Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Математические игры - Подготовка к ОГЭ и ЕГЭ</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .game-card:hover .game-overlay { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .game-overlay { | |
| transition: all 0.3s ease; | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| .exam-tab.active { | |
| border-bottom: 3px solid #3b82f6; | |
| color: #3b82f6; | |
| font-weight: 600; | |
| } | |
| .variant-btn.free { | |
| background-color: #10b981; | |
| color: white; | |
| } | |
| .variant-btn.free:hover { | |
| background-color: #059669; | |
| } | |
| .variant-btn.selected { | |
| background-color: #3b82f6; | |
| color: white; | |
| border-color: #3b82f6; | |
| } | |
| #game-container { | |
| min-height: 500px; | |
| background-color: #f3f4f6; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 0.5rem; | |
| } | |
| .loading-spinner { | |
| border: 4px solid rgba(0, 0, 0, 0.1); | |
| border-left-color: #3b82f6; | |
| animation: spin 1s linear infinite; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header --> | |
| <header class="bg-blue-600 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-square-root-alt text-3xl"></i> | |
| <h1 class="text-2xl font-bold">Математические игры</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-blue-200 transition">Главная</a> | |
| <a href="#" class="hover:text-blue-200 transition">Игры</a> | |
| <a href="#" class="hover:text-blue-200 transition">О проекте</a> | |
| <a href="#" class="hover:text-blue-200 transition">Контакты</a> | |
| </nav> | |
| <button class="md:hidden text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-3">Подготовка к ОГЭ и ЕГЭ по математике</h2> | |
| <p class="text-xl md:text-2xl text-blue-100">Обучайтесь через увлекательные игры!</p> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Games Section --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6 text-center">Выберите игру</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Game 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden relative game-card"> | |
| <img src="https://via.placeholder.com/600x400?text=Математическая+Рулетка" alt="Математическая Рулетка" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-bold mb-2">Математическая Рулетка</h3> | |
| <p class="text-gray-600 mb-4">Решайте задачи на время, крутя рулетку с заданиями из ОГЭ и ЕГЭ.</p> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition select-game" data-game="roulette"> | |
| Выбрать игру | |
| </button> | |
| </div> | |
| <div class="absolute inset-0 bg-blue-600 bg-opacity-90 flex items-center justify-center game-overlay"> | |
| <div class="text-white text-center p-4"> | |
| <h3 class="text-xl font-bold mb-2">Математическая Рулетка</h3> | |
| <p class="mb-4">Крутите рулетку и получайте случайные задания. Чем быстрее решаете - тем больше очков!</p> | |
| <div class="flex justify-center space-x-2"> | |
| <span class="bg-blue-500 px-2 py-1 rounded text-sm">ОГЭ</span> | |
| <span class="bg-blue-500 px-2 py-1 rounded text-sm">ЕГЭ</span> | |
| <span class="bg-blue-500 px-2 py-1 rounded text-sm">Таймер</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden relative game-card"> | |
| <img src="https://via.placeholder.com/600x400?text=Математический+Футбол" alt="Математический Футбол" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-bold mb-2">Математический Футбол</h3> | |
| <p class="text-gray-600 mb-4">Забивайте голы, правильно решая задачи из экзаменационных вариантов.</p> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition select-game" data-game="football"> | |
| Выбрать игру | |
| </button> | |
| </div> | |
| <div class="absolute inset-0 bg-blue-600 bg-opacity-90 flex items-center justify-center game-overlay"> | |
| <div class="text-white text-center p-4"> | |
| <h3 class="text-xl font-bold mb-2">Математический Футбол</h3> | |
| <p class="mb-4">Решайте задачи и забивайте голы! Каждый правильный ответ - удар по воротам.</p> | |
| <div class="flex justify-center space-x-2"> | |
| <span class="bg-blue-500 px-2 py-1 rounded text-sm">ОГЭ</span> | |
| <span class="bg-blue-500 px-2 py-1 rounded text-sm">ЕГЭ</span> | |
| <span class="bg-blue-500 px-2 py-1 rounded text-sm">Соревнование</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden relative game-card"> | |
| <img src="https://via.placeholder.com/600x400?text=Математическая+Гонка" alt="Математическая Гонка" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-bold mb-2">Математическая Гонка</h3> | |
| <p class="text-gray-600 mb-4">Участвуйте в гонках, решая задачи на скорость и точность.</p> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition select-game" data-game="race"> | |
| Выбрать игру | |
| </button> | |
| </div> | |
| <div class="absolute inset-0 bg-blue-600 bg-opacity-90 flex items-center justify-center game-overlay"> | |
| <div class="text-white text-center p-4"> | |
| <h3 class="text-xl font-bold mb-2">Математическая Гонка</h3> | |
| <p class="mb-4">Ваша машина едет быстрее, когда вы правильно решаете задачи. Догоните лидеров!</p> | |
| <div class="flex justify-center space-x-2"> | |
| <span class="bg-blue-500 px-2 py-1 rounded text-sm">ОГЭ</span> | |
| <span class="bg-blue-500 px-2 py-1 rounded text-sm">ЕГЭ</span> | |
| <span class="bg-blue-500 px-2 py-1 rounded text-sm">Гонка</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Game Selection Area --> | |
| <section id="game-selection" class="bg-white rounded-lg shadow-lg p-6 mb-8 hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold" id="selected-game-title">Математическая Рулетка</h2> | |
| <button id="change-game" class="text-blue-600 hover:text-blue-800 transition"> | |
| <i class="fas fa-exchange-alt mr-2"></i>Сменить игру | |
| </button> | |
| </div> | |
| <!-- Exam Type Tabs --> | |
| <div class="mb-8"> | |
| <div class="flex border-b"> | |
| <button class="exam-tab active px-4 py-2" data-exam="oge">ОГЭ</button> | |
| <button class="exam-tab px-4 py-2" data-exam="ege">ЕГЭ</button> | |
| </div> | |
| </div> | |
| <!-- Variant Selection --> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Выберите вариант:</h3> | |
| <div class="grid grid-cols-2 sm:grid-cols-5 md:grid-cols-10 gap-2 mb-6" id="variant-grid"> | |
| <!-- Variants will be loaded here by JavaScript --> | |
| </div> | |
| <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-info-circle text-blue-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-blue-700"> | |
| <span class="font-bold">Первый вариант каждого экзамена доступен бесплатно</span> - попробуйте игру перед покупкой других вариантов. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Purchase and Play Area --> | |
| <div class="mt-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center bg-gray-100 p-4 rounded-lg"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="font-bold text-lg" id="selected-variant-info">Выбран вариант: ОГЭ, вариант 1 (бесплатно)</h3> | |
| <p class="text-gray-600" id="price-info">Цена: Бесплатно</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button id="buy-btn" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition hidden"> | |
| Купить за <span id="price-amount">149</span> ₽ | |
| </button> | |
| <button id="play-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition"> | |
| <i class="fas fa-play mr-2"></i>Играть | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Game Container --> | |
| <section id="game-play-section" class="hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold" id="game-playing-title">Играем: Математическая Рулетка (ОГЭ, вариант 1)</h2> | |
| <button id="back-to-selection" class="text-blue-600 hover:text-blue-800 transition"> | |
| <i class="fas fa-arrow-left mr-2"></i>Вернуться к выбору | |
| </button> | |
| </div> | |
| <div id="game-container"> | |
| <div class="text-center"> | |
| <div class="loading-spinner mb-4"></div> | |
| <p class="text-gray-600">Загрузка игры...</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 bg-yellow-50 border-l-4 border-yellow-400 p-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-lightbulb text-yellow-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-yellow-700"> | |
| <span class="font-bold">Совет:</span> Решайте задачи внимательно. В конце игры вы увидите подробный разбор всех заданий. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="my-12"> | |
| <h2 class="text-2xl font-bold mb-8 text-center">Почему наши игры эффективны?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="text-blue-600 mb-4 text-4xl"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Геймификация обучения</h3> | |
| <p class="text-gray-600">Игровая форма повышает мотивацию и делает процесс подготовки увлекательным.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="text-blue-600 mb-4 text-4xl"> | |
| <i class="fas fa-tasks"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Реальные варианты</h3> | |
| <p class="text-gray-600">Все задания взяты из актуальных вариантов ОГЭ и ЕГЭ прошлых лет.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="text-blue-600 mb-4 text-4xl"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Отслеживание прогресса</h3> | |
| <p class="text-gray-600">После каждой игры вы видите статистику по решенным задачам и свои слабые места.</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Математические игры</h3> | |
| <p class="text-gray-300">Подготовка к ОГЭ и ЕГЭ по математике через увлекательные игры.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Игры</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Математическая Рулетка</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Математический Футбол</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Математическая Гонка</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Поддержка</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">FAQ</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Оплата</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Контакты</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Контакты</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-gray-300"></i> | |
| <span class="text-gray-300">info@mathgames.ru</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone mr-2 text-gray-300"></i> | |
| <span class="text-gray-300">+7 (123) 456-78-90</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> | |
| <p>© 2023 Математические игры. Все права защищены.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Current selection state | |
| const state = { | |
| game: null, | |
| exam: 'oge', | |
| variant: 1, | |
| isFree: true | |
| }; | |
| // DOM elements | |
| const gameSelectionSection = document.getElementById('game-selection'); | |
| const gamePlaySection = document.getElementById('game-play-section'); | |
| const selectedGameTitle = document.getElementById('selected-game-title'); | |
| const gamePlayingTitle = document.getElementById('game-playing-title'); | |
| const variantGrid = document.getElementById('variant-grid'); | |
| const selectedVariantInfo = document.getElementById('selected-variant-info'); | |
| const priceInfo = document.getElementById('price-info'); | |
| const priceAmount = document.getElementById('price-amount'); | |
| const buyBtn = document.getElementById('buy-btn'); | |
| const playBtn = document.getElementById('play-btn'); | |
| const gameContainer = document.getElementById('game-container'); | |
| // Game names mapping | |
| const gameNames = { | |
| roulette: 'Математическая Рулетка', | |
| football: 'Математический Футбол', | |
| race: 'Математическая Гонка' | |
| }; | |
| // Prices for games (in rubles) | |
| const gamePrices = { | |
| roulette: 149, | |
| football: 179, | |
| race: 199 | |
| }; | |
| // Select game handler | |
| document.querySelectorAll('.select-game').forEach(button => { | |
| button.addEventListener('click', function() { | |
| state.game = this.dataset.game; | |
| state.exam = 'oge'; | |
| state.variant = 1; | |
| state.isFree = true; | |
| // Update UI | |
| selectedGameTitle.textContent = gameNames[state.game]; | |
| gameSelectionSection.classList.remove('hidden'); | |
| // Scroll to selection | |
| gameSelectionSection.scrollIntoView({ behavior: 'smooth' }); | |
| // Load variants | |
| loadVariants(); | |
| updateSelectionInfo(); | |
| }); | |
| }); | |
| // Change game handler | |
| document.getElementById('change-game').addEventListener('click', function() { | |
| gameSelectionSection.classList.add('hidden'); | |
| gamePlaySection.classList.add('hidden'); | |
| state.game = null; | |
| }); | |
| // Exam tab handler | |
| document.querySelectorAll('.exam-tab').forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| // Update active tab | |
| document.querySelectorAll('.exam-tab').forEach(t => t.classList.remove('active')); | |
| this.classList.add('active'); | |
| // Update state | |
| state.exam = this.dataset.exam; | |
| state.variant = 1; | |
| state.isFree = true; | |
| // Load variants and update UI | |
| loadVariants(); | |
| updateSelectionInfo(); | |
| }); | |
| }); | |
| // Back to selection handler | |
| document.getElementById('back-to-selection').addEventListener('click', function() { | |
| gamePlaySection.classList.add('hidden'); | |
| gameSelectionSection.classList.remove('hidden'); | |
| // Clear game container | |
| gameContainer.innerHTML = ` | |
| <div class="text-center"> | |
| <div class="loading-spinner mb-4"></div> | |
| <p class="text-gray-600">Загрузка игры...</p> | |
| </div> | |
| `; | |
| }); | |
| // Play button handler | |
| playBtn.addEventListener('click', function() { | |
| if (!state.game || !state.exam || !state.variant) return; | |
| // Update game playing title | |
| const examName = state.exam === 'oge' ? 'ОГЭ' : 'ЕГЭ'; | |
| gamePlayingTitle.textContent = `Играем: ${gameNames[state.game]} (${examName}, вариант ${state.variant})`; | |
| // Show game section | |
| gameSelectionSection.classList.add('hidden'); | |
| gamePlaySection.classList.remove('hidden'); | |
| // Scroll to game | |
| gamePlaySection.scrollIntoView({ behavior: 'smooth' }); | |
| // In a real implementation, here you would load the Unity WebGL game | |
| // For this example, we'll simulate loading | |
| setTimeout(() => { | |
| gameContainer.innerHTML = ` | |
| <div class="text-center p-8"> | |
| <i class="fas fa-gamepad text-6xl text-blue-500 mb-4"></i> | |
| <h3 class="text-xl font-bold mb-2">${gameNames[state.game]}</h3> | |
| <p class="text-gray-600 mb-4">${examName}, вариант ${state.variant}</p> | |
| <p class="text-gray-700">Здесь будет загружена игра в формате WebGL</p> | |
| </div> | |
| `; | |
| }, 1500); | |
| }); | |
| // Load variants into the grid | |
| function loadVariants() { | |
| variantGrid.innerHTML = ''; | |
| // Create 50 variants (1 is free) | |
| for (let i = 1; i <= 50; i++) { | |
| const variantBtn = document.createElement('button'); | |
| variantBtn.className = `variant-btn py-2 px-3 rounded border border-gray-300 hover:bg-gray-100 transition ${i === 1 ? 'free' : ''}`; | |
| variantBtn.textContent = i; | |
| variantBtn.dataset.variant = i; | |
| if (i === state.variant) { | |
| variantBtn.classList.add('selected'); | |
| } | |
| variantBtn.addEventListener('click', function() { | |
| // Update selected variant | |
| document.querySelectorAll('.variant-btn').forEach(btn => btn.classList.remove('selected')); | |
| this.classList.add('selected'); | |
| // Update state | |
| state.variant = parseInt(this.dataset.variant); | |
| state.isFree = state.variant === 1; | |
| // Update UI | |
| updateSelectionInfo(); | |
| }); | |
| variantGrid.appendChild(variantBtn); | |
| } | |
| } | |
| // Update selection info and buttons | |
| function updateSelectionInfo() { | |
| const examName = state.exam === 'oge' ? 'ОГЭ' : 'ЕГЭ'; | |
| selectedVariantInfo.textContent = `Выбран вариант: ${examName}, вариант ${state.variant}${state.isFree ? ' (бесплатно)' : ''}`; | |
| if (state.isFree) { | |
| priceInfo.textContent = 'Цена: Бесплатно'; | |
| buyBtn.classList.add('hidden'); | |
| } else { | |
| priceInfo.textContent = `Цена: ${gamePrices[state.game]} ₽`; | |
| priceAmount.textContent = gamePrices[state.game]; | |
| buyBtn.classList.remove('hidden'); | |
| } | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=math3craft/math-site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |