modified: about.html

modified: css/styles.css modified: index.html modified: mods.json
MEGATREX4 · Oct 22, 2023 · 12a945f · 12a945f
1 parent 1b6d9f3
commit 12a945f
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 28 deletions.
diff --git a/about.html b/about.html
@@ -41,12 +41,6 @@
             <h1 class="headertext">Спільнота українізації модів</h1>
         </div>
     </div>
-            <!-- Додайте поле пошуку -->
-            <div class="search-container">
-                <div class="mobile-only"> </div>
-                <button id="searchbtn" onclick="performSearch()"><i class="fa fa-search" aria-hidden="true"></i></button>
-                <button class="addbutton" onclick="window.open('/addtranslation.html', '_self')" id="addbutton"><i class="fa fa-plus faadd" aria-hidden="true"></i></button>
-            </div>
     <div class="div">
         <!-- Додайте вкладки -->
         <div class="tabs container" id="tabs">
@@ -90,6 +84,16 @@ <h1 class="headertext">Спільнота українізації модів</h
             <p class="terms">робота виключно на кошти донорів</p>
          </div>
     </div>
+    <div class="mobile-only mobile-only-visability">
+        <div class="mobilecontainer">
+            <button id="searchbtn" onclick="window.open('/about.html', '_self')"><i class="fa fa-share-alt" aria-hidden="true"></i></button>
+            <button class="addbutton" onclick="window.open('/addtranslation.html', '_self')" id="addbutton">
+                <i class="fa fa-plus faadd mobileadd" aria-hidden="true"></i>
+            </button>
+            <button id="searchbtn" onclick="performSearch()"><i class="fa fa-search" aria-hidden="true"></i></button>
+
+        </div>
+
 </div>
 </div>
     <div class="footer">

diff --git a/css/styles.css b/css/styles.css
@@ -17,14 +17,43 @@ background-size: cover!important;
     .header {
         padding-bottom: 20px;
     }
-    .mobile-only {
+
+    .pc-only{
+        display: none!important;
+    }
+    .mobile-only-visability{
         display: block!important; /* Показувати меню на мобільних пристроях */
+    }
+    .mobilecontainer {
+        display: flex;
+        flex-direction:row; /* Stack elements vertically */
+        justify-content: center; /* Center-align elements vertically */
+        align-items: center; /* Center-align elements horizontally */
+    }
+
+    #addbutton{
+        height: calc(+20%);
+        width: calc(+20%);
+    }
+
+    #searchbtn{
+        background-color: #131214!important;
+    }
+    #searchbtn:hover{
+        box-shadow: none!important;
+    }
+
+    .mobileadd{
+        resize: 20%;
+    }
+
+    .mobile-only {
         position: fixed; /* Фіксована позиція */
         bottom: -2px; /* Внизу екрану */
         left: 0; /* Лівий край екрану */
         background-color: #131214; /* Колір фону меню */
-        width: 90%; /* 100% ширина екрану */
-        padding: 40px; /* Відступи */
+        width: 100%; /* 100% ширина екрану */
+        padding: 10px 0; /* Відступи */
         text-align: center; /* Вирівнювання тексту по центру */
         z-index: 50; /* Вищий індекс ніж в інших елементів */
         color: white;
@@ -35,13 +64,6 @@ background-size: cover!important;
         -webkit-border-radius: 19px 19px 0px 0px;
         -moz-border-radius: 19px 19px 0px 0px;
     }
-    .addbutton{
-        display: block!important; /* Показувати меню на мобільних пристроях */
-        position: fixed; /* Фіксована позиція */
-        bottom: 8px; /* Внизу екрану */
-        z-index: 100;
-
-    }
     .search-container{
         display: flex;
         justify-content: center;
@@ -66,10 +88,13 @@ background-size: cover!important;
 
     }
     .searchbtn{
-        width: 60px;
-        height: 60px;
+        width: 60px!important;
+        height: 60px!important;
     }
 }
+.pc-only{
+    display: block;
+}
 
 .tabs{
     margin: 0px!important;
@@ -79,7 +104,7 @@ background-size: cover!important;
     display: flex!important;
 }
 
-.mobile-only {
+.mobile-only-visability {
     display: none;
     }
 

diff --git a/index.html b/index.html
@@ -54,9 +54,9 @@ <h1 class="headertext">Спільнота українізації модів</h
     </div>
             <!-- Додайте поле пошуку -->
             <div class="search-container">
-                <button class="addbutton" onclick="window.open('/addtranslation.html', '_self')" id="addbutton"><i class="fa fa-plus faadd" aria-hidden="true"></i></button>
+                <button class="addbutton pc-only" onclick="window.open('/addtranslation.html', '_self')" id="addbutton"><i class="fa fa-plus faadd" aria-hidden="true"></i></button>
                 <input type="text" id="search" placeholder="Пошук...">
-                <button id="searchbtn" onclick="performSearch()"><i class="fa fa-search" aria-hidden="true"></i></button>
+                <button id="searchbtn" class="pc-only" onclick="performSearch()"><i class="fa fa-search" aria-hidden="true"></i></button>
 
             </div>
 
@@ -65,7 +65,7 @@ <h1 class="headertext">Спільнота українізації модів</h
                     <div class="tab" data-tab="all" onclick="redirectToIndex('all')">Всі переклади</div>
                     <div class="tab" data-tab="minecraft" onclick="redirectToIndex('minecraft')">Майнкрафт моди</div>
                     <div class="tab" data-tab="games" onclick="redirectToIndex('games')">Переклади ігор</div>
-                    <div class="tab" onclick="window.open('/about.html', '_self')">Про нас</div>
+                    <div class="tab pc-only" onclick="window.open('/about.html', '_self')">Про нас</div>
                     <div class="tab NotCompletedTab" data-tab="notcompleted" onclick="redirectToIndex('notcompleted')" id="notcompleted-tab">В роботі</div>
                     <div class="tab" data-tab="official" onclick="redirectToIndex('official')" id="official-tab">Офіційні</div>
     </div>
@@ -79,19 +79,28 @@ <h1 class="headertext">Спільнота українізації модів</h
     </script>
     <div class="concon">
     <div class="container">
-        <div class="mobile-only"> </div>
+
         <div class="container-content">
             <!-- Контейнер для карточок -->
             <div id="data-container">
                 <!-- Карточки будуть додаватися за допомогою JavaScript -->
             </div>
             <div class="button-container">
             <button id="show-more-button" class="show-more-button">Показати більше</button>
-            </div></button>
+            </div>
         </div>
     </div>
     </div>
+    <div class="mobile-only mobile-only-visability">
+        <div class="mobilecontainer">
+            <button id="searchbtn" onclick="window.open('/about.html', '_self')"><i class="fa fa-share-alt" aria-hidden="true"></i></button>
+            <button class="addbutton" onclick="window.open('/addtranslation.html', '_self')" id="addbutton">
+                <i class="fa fa-plus faadd mobileadd" aria-hidden="true"></i>
+            </button>
+            <button id="searchbtn" onclick="performSearch()"><i class="fa fa-search" aria-hidden="true"></i></button>
 
+        </div>
+    </div>
     <div class="custom-tooltip" style="display: none;">
         <div class="tooltip-content">
         </div>

diff --git a/mods.json b/mods.json
@@ -371,18 +371,18 @@
     {
         "title": "AE2 Additions",
         "description": "Це мод, який додає деякі функції для Applied Energetics 2, які зроблять ваше життя простішим.",
-        "image": "blob:https://imgur.com/c535ba13-3519-42f0-aebe-79d454d25ce3",
+        "image": "https://i.ibb.co/cth4wxg/pattern-provider-3th.png",
         "verified": false,
         "author": "Команда СУМ",
         "completed": true,
         "link": ""
     },
     {
         "title": "Ae2 Things",
-        "description": "",
-        "image": "",
+        "description": "Додає більше карток більшого розміру, на яких можна зберігати нескінченно багато інформації ",
+        "image": "https://media.forgecdn.net/avatars/475/528/637767573984958255.png",
         "verified": false,
-        "author": "",
+        "author": "Команда СУМ",
         "completed": true,
         "link": ""
     },