Pygame_Project/game.html

195 lines
7.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game - Tanks 2D</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
background-color: #000; /* Черный цвет фона */
color: #fff; /* Белый цвет текста */
}
.wrapper {
margin-top: 80px; /* Отступ для контента под фиксированной шапкой */
overflow-y: auto; /* Включаем вертикальную прокрутку */
}
nav {
position: fixed; /* Фиксированная позиция */
top: 0; /* Расположение шапки вверху */
left: 0; /* Расположение шапки слева */
width: 100%; /* Занимает всю ширину экрана */
background-color: #333;
padding: 10px 0;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 999; /* Чтобы шапка была выше других элементов */
}
.logo img {
width: 100px; /* Устанавливаем ширину логотипа */
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
nav ul li {
display: inline;
}
nav ul li a {
color: #fff;
text-decoration: none;
padding: 10px 20px;
transition: background-color 0.3s;
}
nav ul li a:hover {
background-color: #555;
}
.container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background-color: #222; /* Цвет фона контейнера */
border-radius: 10px;
box-shadow: 0 0 10px #748623; /* Тень контейнера */
text-align: center;
}
h1 {
color: #748623; /* Цвет заголовка */
}
p {
font-size: 18px;
line-height: 1.6;
margin-bottom: 20px;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #748623; /* Цвет кнопки */
color: #fff; /* Цвет текста на кнопке */
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #748623; /* Изменение цвета кнопки при наведении */
}
.advertisement {
margin-top: 50px;
}
.advertisement img {
max-width: 100%;
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* Тень изображения */
}
.footer {
background-color: #748623; /* Серый цвет фона нижнего раздела */
padding: 20px;
margin-top: 50px; /* Отступ сверху */
}
.footer h2 {
color: #fff; /* Белый цвет текста */
margin: 0; /* Убираем внешние отступы */
}
/* Стили для области оценки */
#ratings {
padding-top: 50px; /* Добавляем отступ сверху, чтобы область оценки была выше */
text-align: center; /* Центрируем содержимое */
}
#ratings input {
width: 50px; /* Устанавливаем ширину поля ввода */
margin: 10px; /* Добавляем отступы между элементами */
}
</style>
</head>
<body>
<nav>
<div class="logo">
<a href="/"><img src="https://cdn.discordapp.com/attachments/704651653873139803/1233880220004519986/Screenshot_2024-04-27_233856-removebg-preview.png?ex=662eb400&is=662d6280&hm=518bf12af052c5268492e81d64f8957eea1d6163b3c8fe28c3e8a69758169263&" alt="Tanki Logo"></a>
</div>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/game">Game</a></li>
<li><a href="/support">Support</a></li>
</ul>
</nav>
<div class="container">
<h1>Tanks 2D</h1>
<img src="https://cdn.discordapp.com/attachments/856238529502511144/1234090991045312543/image.png?ex=662f784c&is=662e26cc&hm=065a8314fa2f80d3f78d86beccbd81b4c1471065feba35a0dd0342d43376cfc7&" alt="Tanks 2D Screenshot">
<p>
Tanks 2D is an action-packed game where you control a tank and battle against other tanks in various environments.
The game features multiple levels, unique weapons, and challenging obstacles.
As you progress, you unlock new tanks and upgrades to enhance your gameplay experience.
</p>
<h2>Key Features</h2>
<p>
- Fast-paced 2D tank battles<br>
- Unique weapons and upgrades<br>
- Various maps and environments<br>
- Multiplayer modes and special events<br>
</p>
<h2>How to Play</h2>
<p>
To start playing Tanks 2D, download the game using the link below and follow the instructions to install it.
You can play single-player or join multiplayer battles to test your skills against other players.
</p>
<a href="/download" class="download-link">Download Tanks 2D</a>
</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>