Update about.html

about.html

@@ -16,7 +16,6 @@
 
         .wrapper {
             margin-top: 80px; /* Отступ для контента под фиксированной шапкой */
-                /* height: 100vh; */ /* Не нужно использовать высоту 100vh для обертки */
             overflow-y: auto; /* Включаем вертикальную прокрутку */
         }
 
@@ -64,19 +63,22 @@
             margin: 0 auto;
             padding: 20px;
             border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            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');
+            box-shadow: 0 0 10px #748623;
             background-size: cover;
             background-position: center;
             margin-top: 80px;
             position: relative;
+            background-color: #222; /* Серый фон */
         }
 
-        h1, p {
-            color: #fff;
-        }
+        h1 {
+        color: #748623;
+        text-align: center; /* Add this line */
+            }
+
 
         p {
+            color: #fff;
             font-size: 18px;
             line-height: 1.6;
             margin-bottom: 20px;
@@ -110,7 +112,18 @@
         .image {
             width: 45%;
             border-radius: 10px;
-            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
+            box-shadow: 0 0 10px #748623;
+        }
+
+        /* Стили для области оценки */
+        #ratings {
+            padding-top: 50px; /* Добавляем отступ сверху, чтобы область оценки была выше */
+            text-align: center; /* Центрируем содержимое */
+        }
+
+        #ratings input {
+            width: 50px; /* Устанавливаем ширину поля ввода */
+            margin: 10px; /* Добавляем отступы между элементами */
         }
     </style>
 </head>
@@ -122,19 +135,48 @@
         <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">
         <h1>About Tanki</h1>
+    </div>
+    <div class="container">
         <p>Welcome to the world of Tanki, an exhilarating single-player action game where you take command of a formidable tank on a mission to conquer enemy territory.</p>
         <p>Embark on an epic solo campaign filled with thrilling missions and challenges as you navigate through diverse landscapes, from desolate wastelands to bustling cities.</p>
         <p>Customize your tank with a wide range of weapons, armor, and upgrades to enhance your combat capabilities. Engage in adrenaline-pumping battles against enemy forces and bosses, utilizing strategic tactics and your tank's unique abilities to overcome obstacles and emerge victorious.</p>
         <p>With its captivating gameplay and stunning visuals, Tanki offers an immersive gaming experience that will keep you engaged for hours. Get ready to embark on an epic journey and become the ultimate tank commander in Tanki!</p>
         <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">
+            <img class="image" src="https://cdn.discordapp.com/attachments/856238529502511144/1234087135787618377/image.png?ex=662f74b5&is=662e2335&hm=ce9367095cc02d2236475fe2c7b6f8f958fe3e8b6547d727fce3e76126cfeb8a&" alt="Left Image">
+            <img class="image" src="https://cdn.discordapp.com/attachments/856238529502511144/1234087242314813500/image.png?ex=662f74ce&is=662e234e&hm=5a7c75a04a0959a718b2a401bf74026a3f204e25639106d886d0dcb4759bfebf&" alt="Right Image">
         </div>
     </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>