Skip to content

Commit 08ca910

Browse files
akhavanskiakhavanski
authored
Add files via upload
1 parent a7ca3b9 commit 08ca910

File tree

1 file changed

+284
-0
lines changed

1 file changed

+284
-0
lines changed

‎index.html‎

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
<!DOCTYPE html>
2+
<html lang="ru">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Морской бой - Telegram Mini App</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
16+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17+
min-height: 100vh;
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
color: white;
22+
}
23+
24+
.container {
25+
text-align: center;
26+
max-width: 400px;
27+
padding: 20px;
28+
background: rgba(255, 255, 255, 0.1);
29+
border-radius: 20px;
30+
backdrop-filter: blur(10px);
31+
border: 1px solid rgba(255, 255, 255, 0.2);
32+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
33+
}
34+
35+
.logo {
36+
font-size: 3rem;
37+
margin-bottom: 20px;
38+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
39+
}
40+
41+
h1 {
42+
font-size: 2rem;
43+
margin-bottom: 10px;
44+
font-weight: 700;
45+
}
46+
47+
.subtitle {
48+
font-size: 1.1rem;
49+
margin-bottom: 30px;
50+
opacity: 0.9;
51+
}
52+
53+
.start-button {
54+
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
55+
border: none;
56+
padding: 15px 40px;
57+
font-size: 1.2rem;
58+
font-weight: 600;
59+
color: white;
60+
border-radius: 50px;
61+
cursor: pointer;
62+
transition: all 0.3s ease;
63+
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
64+
text-transform: uppercase;
65+
letter-spacing: 1px;
66+
}
67+
68+
.start-button:hover {
69+
transform: translateY(-2px);
70+
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
71+
}
72+
73+
.start-button:active {
74+
transform: translateY(0);
75+
}
76+
77+
.features {
78+
margin-top: 30px;
79+
text-align: left;
80+
}
81+
82+
.feature {
83+
display: flex;
84+
align-items: center;
85+
margin-bottom: 15px;
86+
font-size: 0.9rem;
87+
opacity: 0.8;
88+
}
89+
90+
.feature-icon {
91+
margin-right: 10px;
92+
font-size: 1.2rem;
93+
}
94+
95+
.loading {
96+
display: none;
97+
margin-top: 20px;
98+
}
99+
100+
.spinner {
101+
width: 40px;
102+
height: 40px;
103+
border: 4px solid rgba(255, 255, 255, 0.3);
104+
border-top: 4px solid white;
105+
border-radius: 50%;
106+
animation: spin 1s linear infinite;
107+
margin: 0 auto;
108+
}
109+
110+
@keyframes spin {
111+
0% { transform: rotate(0deg); }
112+
100% { transform: rotate(360deg); }
113+
}
114+
115+
.status {
116+
margin-top: 20px;
117+
padding: 10px;
118+
border-radius: 10px;
119+
background: rgba(255, 255, 255, 0.1);
120+
display: none;
121+
}
122+
123+
.status.success {
124+
background: rgba(46, 204, 113, 0.2);
125+
border: 1px solid rgba(46, 204, 113, 0.3);
126+
}
127+
128+
.status.error {
129+
background: rgba(231, 76, 60, 0.2);
130+
border: 1px solid rgba(231, 76, 60, 0.3);
131+
}
132+
133+
@media (max-width: 480px) {
134+
.container {
135+
margin: 20px;
136+
padding: 15px;
137+
}
138+
139+
h1 {
140+
font-size: 1.5rem;
141+
}
142+
143+
.logo {
144+
font-size: 2.5rem;
145+
}
146+
}
147+
</style>
148+
</head>
149+
<body>
150+
<div class="container">
151+
<div class="logo">⚓</div>
152+
<h1>Морской бой</h1>
153+
<p class="subtitle">Сражайтесь с соперниками в классической игре</p>
154+
155+
<button class="start-button" onclick="startGame()">
156+
🚀 Начать бой
157+
</button>
158+
159+
<div class="loading" id="loading">
160+
<div class="spinner"></div>
161+
<p>Поиск соперника...</p>
162+
</div>
163+
164+
<div class="status" id="status"></div>
165+
166+
<div class="features">
167+
<div class="feature">
168+
<span class="feature-icon">🎯</span>
169+
<span>Автоматическое размещение кораблей</span>
170+
</div>
171+
<div class="feature">
172+
<span class="feature-icon">⚡</span>
173+
<span>Быстрый матчмейкинг</span>
174+
</div>
175+
<div class="feature">
176+
<span class="feature-icon">🏆</span>
177+
<span>Система рейтингов</span>
178+
</div>
179+
<div class="feature">
180+
<span class="feature-icon">📱</span>
181+
<span>Играйте в Telegram</span>
182+
</div>
183+
</div>
184+
</div>
185+
186+
<script>
187+
// Проверяем, запущено ли приложение в Telegram
188+
function isTelegramWebApp() {
189+
return window.Telegram && window.Telegram.WebApp;
190+
}
191+
192+
// Получаем данные пользователя из Telegram
193+
function getTelegramUser() {
194+
if (isTelegramWebApp()) {
195+
return window.Telegram.WebApp.initDataUnsafe.user;
196+
}
197+
return null;
198+
}
199+
200+
// Показываем статус
201+
function showStatus(message, type = 'success') {
202+
const status = document.getElementById('status');
203+
status.textContent = message;
204+
status.className = `status ${type}`;
205+
status.style.display = 'block';
206+
207+
setTimeout(() => {
208+
status.style.display = 'none';
209+
}, 3000);
210+
}
211+
212+
// Основная функция запуска игры
213+
function startGame() {
214+
const button = document.querySelector('.start-button');
215+
const loading = document.getElementById('loading');
216+
217+
// Показываем загрузку
218+
button.style.display = 'none';
219+
loading.style.display = 'block';
220+
221+
// Проверяем, запущено ли в Telegram
222+
if (isTelegramWebApp()) {
223+
// Инициализируем Telegram WebApp
224+
window.Telegram.WebApp.ready();
225+
window.Telegram.WebApp.expand();
226+
227+
const user = getTelegramUser();
228+
if (user) {
229+
console.log('Пользователь Telegram:', user);
230+
showStatus(`Добро пожаловать, ${user.first_name}!`, 'success');
231+
}
232+
233+
// Симулируем поиск игры
234+
setTimeout(() => {
235+
loading.style.display = 'none';
236+
showStatus('Игра найдена! Переход к игровому полю...', 'success');
237+
238+
// Здесь будет переход к игровому полю
239+
setTimeout(() => {
240+
// В реальном приложении здесь будет навигация к игровому полю
241+
alert('Игровое поле будет здесь!');
242+
button.style.display = 'block';
243+
}, 2000);
244+
}, 2000);
245+
246+
} else {
247+
// Локальное тестирование
248+
setTimeout(() => {
249+
loading.style.display = 'none';
250+
showStatus('Режим тестирования! Игра запущена локально.', 'success');
251+
252+
setTimeout(() => {
253+
alert('Это локальная версия для тестирования!');
254+
button.style.display = 'block';
255+
}, 2000);
256+
}, 1500);
257+
}
258+
}
259+
260+
// Инициализация при загрузке страницы
261+
document.addEventListener('DOMContentLoaded', function() {
262+
if (isTelegramWebApp()) {
263+
// Настраиваем Telegram WebApp
264+
window.Telegram.WebApp.ready();
265+
window.Telegram.WebApp.expand();
266+
267+
// Меняем заголовок для Telegram
268+
document.querySelector('.subtitle').textContent = 'Играйте прямо в Telegram!';
269+
} else {
270+
// Локальное тестирование
271+
console.log('Запущено в режиме локального тестирования');
272+
showStatus('Режим тестирования активен', 'success');
273+
}
274+
});
275+
276+
// Обработка сообщений от Telegram (если нужно)
277+
if (isTelegramWebApp()) {
278+
window.Telegram.WebApp.onEvent('mainButtonClicked', function() {
279+
console.log('Main button clicked');
280+
});
281+
}
282+
</script>
283+
</body>
284+
</html>

0 commit comments

Comments
 (0)