index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChildGPT - Free Educational Games & AI Game Creator</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>
        @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Fredoka+One&display=swap');
        
        body {
            font-family: 'Comic Neue', cursive;
            background-color: #f9f7fe;
        }
        
        .logo-text {
            font-family: 'Fredoka One', cursive;
        }
        
        .nav-item {
            position: relative;
        }
        
        .nav-item::after {
            content: '';
            position: absolute;
            width: 0;
            height: 3px;
            bottom: -5px;
            left: 0;
            background-color: #8b5cf6;
            transition: width 0.3s ease;
        }
        
        .nav-item:hover::after {
            width: 100%;
        }
        
        .game-card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        
        .game-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 100%);
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- Header -->
    <header class="gradient-bg text-white sticky top-0 z-50 shadow-md">
        <div class="container mx-auto px-4 py-3">
            <div class="flex items-center justify-between">
                <!-- Logo -->
                <div class="flex items-center space-x-2">
                    <img src="https://childgpt.com/assets/logo.CAfo0A04.png" alt="ChildGPT Logo" class="h-12 w-12">
                    <h1 class="logo-text text-2xl md:text-3xl font-bold">ChildGPT</h1>
                </div>
                
                <!-- Navigation -->
                <nav class="hidden md:flex space-x-8">
                    <a href="#" class="nav-item text-lg font-medium hover:text-purple-100">Create</a>
                    <a href="#" class="nav-item text-lg font-medium hover:text-purple-100">History</a>
                    <a href="#" class="nav-item text-lg font-medium hover:text-purple-100">Chat</a>
                    <a href="#" class="nav-item text-lg font-medium hover:text-purple-100">Discover</a>
                </nav>
                
                <!-- Mobile Menu Button -->
                <button class="md:hidden text-2xl" id="menuBtn">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
            
            <!-- Mobile Menu -->
            <div class="md:hidden hidden py-4" id="mobileMenu">
                <div class="flex flex-col space-y-4">
                    <a href="#" class="nav-item text-lg font-medium hover:text-purple-100">Create</a>
                    <a href="#" class="nav-item text-lg font-medium hover:text-purple-100">History</a>
                    <a href="#" class="nav-item text-lg font-medium hover:text-purple-100">Chat</a>
                    <a href="#" class="nav-item text-lg font-medium hover:text-purple-100">Discover</a>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container mx-auto px-4 py-8">
        <!-- Hero Section -->
        <section class="mb-12">
            <div class="bg-white rounded-2xl p-8 shadow-lg">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 mb-6 md:mb-0">
                        <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Fun Learning with AI-Powered Games</h2>
                        <p class="text-lg text-gray-600 mb-6">ChildGPT helps kids learn through interactive games created by artificial intelligence. Safe, educational, and endlessly fun!</p>
                        <div class="flex space-x-4">
                            <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
                                Try It Free
                            </button>
                            <button class="border-2 border-purple-600 text-purple-600 hover:bg-purple-50 font-bold py-3 px-6 rounded-full transition duration-300">
                                How It Works
                            </button>
                        </div>
                    </div>
                    <div class="md:w-1/2 flex justify-center">
                        <img src="https://childgpt.com/assets/logo.CAfo0A04.png" alt="ChildGPT Game Example" class="rounded-xl w-full max-w-md">
                    </div>
                </div>
            </div>
        </section>

        <!-- Hot Recommendations -->
        <section>
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-2xl font-bold text-gray-800 flex items-center">
                    <span class="text-red-500 mr-2"><i class="fas fa-fire"></i></span>
                    Hot Recommendations
                </h2>
                <a href="#" class="text-purple-600 hover:text-purple-800 font-medium">See All</a>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Game Card 1 -->
                <div class="game-card bg-white rounded-xl overflow-hidden shadow-md">
                    <div class="h-48 bg-purple-100 flex items-center justify-center">
                        <i class="fas fa-robot text-6xl text-purple-500"></i>
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-xl mb-2">Math Adventure</h3>
                        <p class="text-gray-600 mb-4">Solve math problems to help the robot find its way home!</p>
                        <div class="flex justify-between items-center">
                            <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">Ages 6-9</span>
                            <button class="text-purple-600 hover:text-purple-800 font-medium">Play Now</button>
                        </div>
                    </div>
                </div>
                
                <!-- Game Card 2 -->
                <div class="game-card bg-white rounded-xl overflow-hidden shadow-md">
                    <div class="h-48 bg-blue-100 flex items-center justify-center">
                        <i class="fas fa-globe-americas text-6xl text-blue-500"></i>
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-xl mb-2">World Explorer</h3>
                        <p class="text-gray-600 mb-4">Learn about countries and cultures around the world!</p>
                        <div class="flex justify-between items-center">
                            <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Ages 8-12</span>
                            <button class="text-purple-600 hover:text-purple-800 font-medium">Play Now</button>
                        </div>
                    </div>
                </div>
                
                <!-- Game Card 3 -->
                <div class="game-card bg-white rounded-xl overflow-hidden shadow-md">
                    <div class="h-48 bg-green-100 flex items-center justify-center">
                        <i class="fas fa-dna text-6xl text-green-500"></i>
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-xl mb-2">Science Lab</h3>
                        <p class="text-gray-600 mb-4">Conduct fun experiments and learn scientific concepts!</p>
                        <div class="flex justify-between items-center">
                            <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Ages 7-10</span>
                            <button class="text-purple-600 hover:text-purple-800 font-medium">Play Now</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Create Your Own Section -->
        <section class="mt-16 mb-12">
            <div class="bg-gradient-to-r from-purple-100 to-indigo-100 rounded-2xl p-8 shadow-lg">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8">
                        <h2 class="text-3xl font-bold text-gray-800 mb-4">Create Your Own Educational Game</h2>
                        <p class="text-lg text-gray-600 mb-6">Our AI game creator makes it easy for parents and teachers to design custom learning games tailored to any subject or skill level.</p>
                        <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
                            Start Creating <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                    <div class="md:w-1/2">
                        <div class="bg-white p-6 rounded-xl shadow-md">
                            <div class="flex items-center mb-4">
                                <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white mr-3">1</div>
                                <h3 class="font-bold">Choose a Learning Objective</h3>
                            </div>
                            <div class="flex items-center mb-4">
                                <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white mr-3">2</div>
                                <h3 class="font-bold">Select Game Type</h3>
                            </div>
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white mr-3">3</div>
                                <h3 class="font-bold">Customize & Publish</h3>
                            </div>
                        </div>
                    </div>
                </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>
                    <div class="flex items-center space-x-2 mb-4">
                        <img src="https://childgpt.com/assets/logo.CAfo0A04.png" alt="ChildGPT Logo" class="h-10 w-10">
                        <h3 class="logo-text text-xl font-bold">ChildGPT</h3>
                    </div>
                    <p class="text-gray-300">Making learning fun through AI-powered educational games for children.</p>
                </div>
                <div>
                    <h4 class="font-bold text-lg mb-4">Explore</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-300 hover:text-white">Games</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white">Subjects</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white">Age Groups</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white">New Releases</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold text-lg mb-4">Resources</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-300 hover:text-white">For Parents</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white">For Teachers</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white">Blog</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white">FAQ</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold text-lg mb-4">Connect</h4>
                    <div class="flex space-x-4 mb-4">
                        <a href="#" class="text-gray-300 hover:text-white text-xl"><i class="fab fa-facebook"></i></a>
                        <a href="#" class="text-gray-300 hover:text-white text-xl"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-gray-300 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="text-gray-300 hover:text-white text-xl"><i class="fab fa-youtube"></i></a>
                    </div>
                    <p class="text-gray-300">Subscribe to our newsletter</p>
                    <div class="mt-2 flex">
                        <input type="email" placeholder="Your email" class="px-3 py-2 rounded-l text-gray-800 w-full">
                        <button class="bg-purple-600 hover:bg-purple-700 px-4 rounded-r">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
                <p>&copy; 2025 ChildGPT. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        // Mobile menu toggle
        const menuBtn = document.getElementById('menuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        
        menuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // Smooth scrolling for navigation
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </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=taowei/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>