Update support.html

support.html

@@ -10,16 +10,10 @@
             font-family: 'Montserrat', sans-serif;
             margin: 0;
             padding: 0;
-            background-color: #000; /* Черный цвет фона */
+            background-color: #000000; /* Черный цвет фона */
             color: #fff; /* Белый цвет текста */
         }
 
-        .wrapper {
-            margin-top: 80px; /* Отступ для контента под фиксированной шапкой */
-                /* height: 100vh; */ /* Не нужно использовать высоту 100vh для обертки */
-            overflow-y: auto; /* Включаем вертикальную прокрутку */
-        }
-
         nav {
             position: fixed; /* Фиксированная позиция */
             top: 0; /* Расположение шапки вверху */
@@ -64,53 +58,44 @@
             margin: 0 auto;
             padding: 20px;
             border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 0 10px #748623;
-            background: linear-gradient(rgba(70, 185, 70, 0.3), rgba(204, 204, 204, 0.7)), url('https://support.discord.com/hc/user_images/KxH_3KeTycUVZQp-ddSftQ.png');
+            background-color: #222;
             background-size: cover;
             background-position: center;
             margin-top: 80px;
             position: relative;
         }
 
-        h1, p {
+        h1 {
-            color: #fff;
+            color: #748623;
+            text-align: center; /* Центрирование текста */
         }
 
         p {
+            color: #fff;
+            text-align: center; /* Центрирование текста */
             font-size: 18px;
             line-height: 1.6;
             margin-bottom: 20px;
             font-weight: bold;
         }
 
-        .back-button {
+        .email {
-            background-color: #007bff;
+            font-size: 20px;
-            color: #fff;
+            font-weight: bold;
-            padding: 10px 20px;
-            border-radius: 5px;
-            text-decoration: none;
             margin-top: 20px;
-            display: inline-block;
+            text-align: center;
         }
 
-        .back-button:hover {
+        /* Стили для области оценки */
-            background-color: #0056b3;
+        #ratings {
+            padding-top: 50px; /* Добавляем отступ сверху, чтобы область оценки была выше */
+            text-align: center; /* Центрируем содержимое */
         }
 
-        .images-container {
+        #ratings input {
-            position: absolute;
+            width: 50px; /* Устанавливаем ширину поля ввода */
-            top: 100%;
+            margin: 10px; /* Добавляем отступы между элементами */
-            left: 0;
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            margin-top: 20px;
-        }
-
-        .image {
-            width: 45%;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
         }
     </style>
 </head>
@@ -122,17 +107,47 @@
         <ul>
             <li><a href="/about">About</a></li>
             <li><a href="/game">Game</a></li>
-            <li><a href="/link">Link</a></li>
+            <li><a href="/support">Support</a></li>
         </ul>
     </nav>
     <div class="container">
-        <div class="container"> <!-- Основной контент -->
+        <h1>Encountered any unexpected problems?</h1>
-            <h1>Выбери свой танк прямо сейчас!</h1>
-            <div class="images-container">
-            <img class="image" src="https://via.placeholder.com/600x1500" alt="Left Image">
-            <img class="image" src="https://via.placeholder.com/600x1500" alt="Right Image">
-            <a href="game-url" target="_blank" class="btn">Играть в мою игру</a>
-        </div>
     </div>
+    <div class="container">
+        <p>If you have any questions or problems, please contact our support team by email:</p>
+        <p class="email">supporttanki@gmail.com</p>
+        <form id="supportForm">
+            <textarea id="problemDescription" placeholder="Or you can describe your problem here..." rows="4" cols="50"></textarea>
+            <br>
+            <button type="submit">Send</button>
+        </form>
+    </div>
+    
+    <!-- Область для оценки -->
+    <div id="ratings" class="container" style="margin-top: 1000px;"> <!-- Установите высоту в px в зависимости от контента выше -->
+        <h2>Rate Our Website and Game</h2>
+        <p>Please rate our website and game from 1 to 5 stars:</p>
+        <div>
+            <label for="websiteRating">Website:</label>
+            <input type="number" id="websiteRating" name="websiteRating" min="1" max="5">
+        </div>
+        <div>
+            <label for="gameRating">Game:</label>
+            <input type="number" id="gameRating" name="gameRating" min="1" max="5">
+        </div>
+        <button onclick="submitRatings()">Submit Ratings</button>
+    </div>
+
+    <script>
+        // Функция для отправки оценок
+        function submitRatings() {
+            var websiteRating = document.getElementById("websiteRating").value;
+            var gameRating = document.getElementById("gameRating").value;
+
+            // Здесь можно добавить код для отправки оценок на сервер или их обработки
+
+            alert("Thank you for your ratings! \nFrom: Arsenij, Artem and Roma. :) \nWebsite: " + websiteRating + " stars\nGame: " + gameRating + " stars");
+        }
+    </script>
 </body>
 </html>