modified: about.html

new file: addtranslation.css new file: addtranslation.html modified: index.html modified: search.css modified: search.js modified: styles.css new file: submited.css new file: submited.html
MEGATREX4 · Sep 17, 2023 · 89d4f1a · 89d4f1a
1 parent 069d756
commit 89d4f1a
Show file tree

Hide file tree

Showing 9 changed files with 371 additions and 22 deletions.
diff --git a/about.html b/about.html
@@ -45,7 +45,7 @@ <h1 class="headertext">Спільнота українізації модів</h
             <div class="search-container">
                 <div class="mobile-only"> </div>
 
-                <button class="addbutton" id="addbutton"><i class="fa fa-plus faadd faaddabout" 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">
         <!-- Додайте вкладки -->
@@ -56,9 +56,6 @@ <h1 class="headertext">Спільнота українізації модів</h
             <div class="tab active" onclick="showAboutPage()">Про нас</div>
         </div>
 
-
-
-
         <script>
             function redirectToIndex(tabName) {
               window.location.href = `/index.html?tab=${tabName}`;

diff --git a/addtranslation.css b/addtranslation.css
@@ -0,0 +1,84 @@
+.forminput{
+    margin: 20px 0px;
+}
+
+.containerform {
+    max-width: 460px;
+    margin: 20px auto;
+    vertical-align: middle;
+    justify-content: center;
+    align-items: center;
+    min-height: 50vh;
+    text-align: center;
+}
+
+.form{
+    background-color: #2b2222;
+    padding: 40px 60px;
+    border-radius: 20px;
+}
+
+input{
+    width: 100%;
+    background-color: #7e292a;
+    border: none;
+    padding: 20px 0px;
+    margin: 5px;
+    border-radius: 20px;
+    color: #ffb3b0;
+    text-align: center;
+}
+
+#goBackButton{
+    display: flex;
+    background-color: transparent;
+    position:absolute;
+    color: #dbe1f8;
+    transform: translateX(-28%) translateY(-54%);
+}
+
+#goBackButton:hover{
+    background-color: transparent;
+    color: #dbe1f8;
+    box-shadow: none;
+}
+
+
+
+input::selection{
+    background-color: #ffb3b0;
+    color: #7e292a;
+}
+
+.radio{
+    background-color: #7e292a;
+    accent-color: #7e282a;
+
+}
+
+label, span{
+    color:#dbe1f8;
+}
+
+h2{
+    color:#dbe1f8;
+}
+
+.submit{
+    margin-top: 20px;
+    width: 60%;
+}
+
+.radioinput{
+    text-align: center;
+    vertical-align: middle;
+    justify-content: center;
+    align-items: center;
+    width: 50%;
+    display:flex;
+}
+
+html{
+    align-items: center;
+}
+
diff --git a/addtranslation.html b/addtranslation.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="uk">
+<head>
+    <meta charset="UTF-8">
+    <title>Спільнота українізації модів</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="google-site-verification" content="qggRZdWV97BX58wyp4stLoLL2d2SogccsRlNHH4xuU8" />
+
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="search.css">
+    <link rel="stylesheet" href="scrollbar.css">
+    <link rel="stylesheet" href="load.css">
+    <link rel="stylesheet" href="notcompleted.css">
+    <link rel="stylesheet" href="addtranslation.css">
+
+    <meta property="og:title" content="Спільнота українізації модів">
+    <meta property="og:description" content="Тут ви зможете зайти переклади модів для майнкрафту, або перелкди інших ігор, також можна запропонувати свій переклад(виключно моди майнкрафт)">
+    <meta property="og:image" content="images/icon.png">
+    <meta property="og:url" content="https://sumtranslate.netlify.app/">
+
+
+    <meta name="keywords" content="геймінг, Minecraft, переклад модів, геймерська спільнота, українська мова, Crowdin, аматорський переклад, СУМ, Спільнота Українізації Модів, українські гравці, онлайн-ігри, грейдерське спільнота, модифікації для гри">
+
+    <meta name="description" content="Ми - спільнота аматорських перекладачів, які присвячують свій час та зусилля перекладу модифікацій для Minecraft та інших ігор на українську мову. Долучайтесь до нас, щоб зробити ігри більш доступними для українських гравців та допомогти нам розширювати грейдерський світ геймінгу на Україну. Слідкуйте за нашими оновленнями та долучайтеся до перекладу разом з нами!" />
+
+    <link rel="icon" type="image/x-icon" href="images/icon.png">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet">
+
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
+
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
+
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet"></head>
+<body>
+    <div class="header">
+        <div class="header-content">
+            <img src="header-image.png" alt="Спільнота українізації модів">
+            <h1 class="headertext">Спільнота українізації модів</h1>
+        </div>
+
+    </div>
+
+
+
+<div class="containerform">
+    <div class="mobile-only"> </div>
+    <div class="form">
+        <button id="goBackButton"><i class="fa fa-chevron-left" aria-hidden="true"></i>&nbsp&nbspНазад</button>
+        <h2>Додавання перекладу мода</h2>
+        <form id="translationForm" action="https://docs.google.com/forms/d/e/1FAIpQLSd-uYhHxSskbOC_64FonftTAV6zjs2yiyAP4kMU62v17TSdhg/formResponse">
+        <div class="forminput">
+        <label for="entry.748306319">Ваше ім'я\нік</label><br>
+        <input type="text" name="entry.748306319" required>
+    </div>
+    <div class="forminput">
+        <label for="entry.1661456688">Посилання на картинку</label><br>
+        <input type="text" name="entry.1661456688" required>
+    </div>
+    <div class="forminput">
+        <label for="entry.1518902061">Посилання на мод/переклад</label><br>
+        <input type="text" name="entry.1518902061" required>
+    </div>
+    <div class="forminput">
+        <label for="entry.1702188272">Чи додали ваш переклад в мод</label><br>
+        <div class="radioinput"><input type="radio" class="radio radio1" name="entry.1702188272" value="True" required><span>Так</span>
+        <input type="radio" class="radio radio2" name="entry.1702188272" value="False" required><span>Ні</span>
+        </div>
+    </div>
+    <div class="forminput">
+        <label for="entry.130460730">Е-мейл\Телеграм</label><br>
+        <input type="text" name="entry.130460730">
+    </div>
+    <div><button type="submit" class="submit">Відправити</button></div>
+    </form>
+</div>
+</div>
+
+<script>
+    const goBackButton = document.getElementById('goBackButton');
+
+    goBackButton.addEventListener('click', () => {
+      window.history.back();
+    });
+  </script>
+
+
+<script>
+    const form = document.querySelector('form');
+    const submitButton = document.querySelector('form button');
+
+    submitButton.addEventListener('click', async (e) => {
+        e.preventDefault();
+
+        // Перевіряємо, чи всі обов'язкові поля заповнені
+        if (form.checkValidity()) {
+            // Отримуємо дані з форми
+            const formData = new FormData(form);
+
+            // URL адреса вашої Google Forms
+            const googleFormsUrl = 'https://docs.google.com/forms/d/e/1FAIpQLSd-uYhHxSskbOC_64FonftTAV6zjs2yiyAP4kMU62v17TSdhg/formResponse';
+
+            try {
+                // Відправляємо POST-запит до Google Forms
+                const response = await fetch(googleFormsUrl, {
+                    method: 'POST',
+                    body: formData,
+                    mode: 'no-cors' // Це дозволяє обійти проблеми з CORS
+                });
+
+                // Перенаправлення на іншу сторінку після успішної відправки
+                if (response.ok) {
+                    window.location.href = 'submited.html';
+                } else {
+                    window.location.href = 'submited.html';
+                }
+            } catch (error) {
+                alert('Будь ласка, заповніть всі обов\'язкові поля.');
+            }
+        } else {
+            // Якщо не всі обов'язкові поля заповнені, не відправляємо форму і виводимо повідомлення
+            alert('Будь ласка, заповніть всі обов\'язкові поля.');
+        }
+    });
+</script>
+
+
+
+
+
+    <div class="footer">
+        <p>&copy; 2023 Спільнота українізації модів</p>
+        <p>Створено в Україні для українців</p>
+    </div>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -54,7 +54,7 @@ <h1 class="headertext">Спільнота українізації модів</h
     </div>
             <!-- Додайте поле пошуку -->
             <div class="search-container">
-                <button class="addbutton" id="addbutton"><i class="fa fa-plus faadd" 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>
                 <input type="text" id="search" placeholder="Пошук...">
                 <button id="searchbtn" onclick="performSearch()">Пошук</button>
 

diff --git a/search.css b/search.css
@@ -49,8 +49,3 @@ button:hover{
     color: #ffff;
 }
 
-.faadd{
-    color: white;
-    color: #ffff;
-
-}
diff --git a/search.js b/search.js
@@ -8,7 +8,7 @@ function loadDataFromFiles() {
         .then(data => {
             allData = allData.concat(data);
             // Після завантаження всіх даних, викликайте функцію для відображення
-            displayTranslations(allData, 1, 10); // Змініть параметри, які вам потрібні
+            displayTranslations(allData, 1, 25); // Змініть параметри, які вам потрібні
         })
         .catch(error => {
             console.error('Помилка завантаження JSON даних з файлу game.json:', error);
@@ -19,7 +19,7 @@ function loadDataFromFiles() {
         .then(data => {
             allData = allData.concat(data);
             // Після завантаження всіх даних, викликайте функцію для відображення
-            displayTranslations(allData, 1, 10); // Змініть параметри, які вам потрібні
+            displayTranslations(allData, 1, 25); // Змініть параметри, які вам потрібні
         })
         .catch(error => {
             console.error('Помилка завантаження JSON даних з файлу mods.json:', error);

diff --git a/styles.css b/styles.css
@@ -55,9 +55,7 @@ background-size: cover!important;
     }
 
 
-    .container{
-        margin: 0!important;
-    }
+
     .footer{
         height: 170px;
     }
@@ -133,7 +131,7 @@ body {
     vertical-align: middle;
     text-align: center;
     background-color: #2b2222;
-    border-radius: 20px;
+    border-radius: 30px;
     position: relative;
 
 
@@ -153,7 +151,7 @@ body {
 }
 
 .image {
-    border-radius: 20px;
+    border-radius: 15px;
     width: 200px;
     height: 200px;
     background-size:cover;
@@ -173,7 +171,7 @@ body {
     font-size: 16px;
     margin-top: 5px;
     padding: 20px;
-    border-radius: 20px;
+    border-radius: 15px;
     background-color: #7e292a;
     font-family: 'Ubuntu', sans-serif;
     color: #dbe1f8;
@@ -191,7 +189,7 @@ body {
     background-color: #7e292a;
     color: #dbe1f8;
     padding: 20px;
-    border-radius: 20px;
+    border-radius: 15px;
     z-index: 2;
     width: 210px;
     max-height: none; /* Змінено на "none" замість "0" */
@@ -222,7 +220,7 @@ body {
     color: #dbe1f8;
     border: none;
     padding: 30px 20px;
-    border-radius: 20px;
+    border-radius: 30px;
     margin: 10px 10px;
 }
 
@@ -351,7 +349,7 @@ body, html {
     background-color: #1d1b1e;
     color: #e6e6e6;
     padding: 15px;
-    border-radius: 20px;
+    border-radius: 15px;
     z-index: 999;
     left: -50%;
     top: -10px;
@@ -390,7 +388,7 @@ body, html {
     margin: 10px;
     padding: 10px;
     text-align: center;
-    border-radius: 20px;
+    border-radius: 30px;
     position: relative;
 }