Spaces:

math3craft
/

math-site

Running

App Files Files Community

math3craft commited on 22 days ago

Commit

e17a309

verified ·

1 Parent(s): 2ce9127

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +495 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Math Site
-emoji: 🏃
-colorFrom: indigo
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: math-site
+emoji: 🐳
+colorFrom: green
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,495 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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">[email protected]</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>