Pygame_Project/game.html

172 lines
6.7 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">
<link rel="icon" href="https://cdn.discordapp.com/attachments/856238529502511144/1234217742689767424/free-icon-tank-942355.png?ex=662fee58&is=662e9cd8&hm=82b93f0803c76e54589ff9766815979b37ed52b2ac7ac88a05cd081040a33492&">
<style>
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
background-color: #000; /* Черный цвет фона */
color: #fff; /* Белый цвет текста */
}
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;
}
.advertisement {
margin-top: 50px;
}
.advertisement img {
max-width: 100%;
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* Тень изображения */
}
/* Стили для области оценки */
#ratings {
padding-top: 50px; /* Добавляем отступ сверху, чтобы область оценки была выше */
padding-bottom: 50px; /* Добавляем отступ снизу */
text-align: center; /* Центрируем содержимое */
}
#ratings input {
width: 50px; /* Устанавливаем ширину поля ввода */
margin: 10px; /* Добавляем отступы между элементами */
}
/* Стили для QR-кода */
#qr-code {
width: 150px; /* Задаем ширину */
height: 150px; /* Задаем высоту */
}
</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>
<li><a href="/updates">Updates</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 a fast-paced game where you control a tank and fight other tanks in harsh environments.
The game features one unique tank, unique weapons and challenging obstacles.
As you progress, the number of enemies in the location increases each time.
</p>
<h2>Key Features</h2>
<p>
- Fast-paced 2D tank battles<br>
- Unique weapon<br>
- Carefully designed map<br>
- Detailed graphics<br>
- Beautiful special effects of explosions<br>
</p>
<h2>Difficulties during development</h2>
<p>
If you want to see the difficulties on the way of creating Tanks 2D, <a href="https://crimson-coletta-46.tiiny.site" target="_blank"> click here</a>.
</p>
<p><img id="qr-code" src="https://cdn.discordapp.com/attachments/711235658319921268/1234144155463057408/QRCode.png?ex=662fa9cf&is=662e584f&hm=469e1f53dc4872746d91f8bb84db6d2da0b47d7dda6b37745341179a20df19ab&" alt="QR Code"><br>QR Code</p>
</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 Roman. :) \nWebsite: " + websiteRating + " stars\nGame: " + gameRating + " stars");
}
</script>
</body>
</html>