Hugging Face's logo

Spaces:
taowei
/
test
Running

App Files Community
taowei commited on
Commit
468996f
·
verified ·
1 Parent(s): c6d7e6d

- Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +244 -77
index.html CHANGED
@@ -3,109 +3,276 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Game Portal - HTML5 Games</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
8
  <style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  .game-card {
10
  transition: all 0.3s ease;
 
11
  }
12
 
13
  .game-card:hover {
14
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
15
- }
16
-
17
- .category-tag {
18
- transition: all 0.2s ease;
19
  }
20
 
21
- .category-tag:hover {
22
- transform: translateY(-2px);
23
  }
24
  </style>
25
  </head>
26
- <body class="bg-gray-900 min-h-screen flex flex-col items-center justify-center overflow-hidden">
27
- <div class="text-center mb-8">
28
- <h1 class="text-4xl md:text-6xl font-bold text-white mb-4">HTML5 Game Portal</h1>
29
- <p class="text-xl text-blue-300">Play the best free games in your browser</p>
30
- </div>
31
-
32
- <div class="w-full max-w-6xl px-4">
33
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
34
- <!-- Game Card 1 -->
35
- <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform hover:scale-105">
36
- <img src="https://via.placeholder.com/400x250" alt="Space Adventure" class="w-full h-48 object-cover">
37
- <div class="p-4">
38
- <h3 class="text-xl font-bold text-white mb-2">Space Adventure</h3>
39
- <p class="text-gray-300 mb-4">Navigate through asteroid fields and collect power-ups!</p>
40
- <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
41
- Play Now
42
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
  </div>
44
  </div>
 
 
45
 
46
- <!-- Game Card 2 -->
47
- <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform hover:scale-105">
48
- <img src="https://via.placeholder.com/400x250" alt="Puzzle Quest" class="w-full h-48 object-cover">
49
- <div class="p-4">
50
- <h3 class="text-xl font-bold text-white mb-2">Puzzle Quest</h3>
51
- <p class="text-gray-300 mb-4">Solve challenging puzzles to advance through levels.</p>
52
- <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
53
- Play Now
54
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
55
  </div>
56
  </div>
 
57
 
58
- <!-- Game Card 3 -->
59
- <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform hover:scale-105">
60
- <img src="https://via.placeholder.com/400x250" alt="Racing Legends" class="w-full h-48 object-cover">
61
- <div class="p-4">
62
- <h3 class="text-xl font-bold text-white mb-2">Racing Legends</h3>
63
- <p class="text-gray-300 mb-4">Compete against AI in high-speed races.</p>
64
- <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
65
- Play Now
66
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  </div>
68
  </div>
69
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70
 
71
- <div class="mt-12 bg-gray-800 rounded-lg p-6">
72
- <h2 class="text-2xl font-bold text-white mb-4">About Our Portal</h2>
73
- <p class="text-gray-300 mb-4">
74
- We host the best HTML5 games that work directly in your browser with no downloads required.
75
- All games are free to play and mobile-friendly.
76
- </p>
77
- <div class="flex flex-wrap gap-4">
78
- <span class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm">Action</span>
79
- <span class="bg-green-600 text-white px-3 py-1 rounded-full text-sm">Adventure</span>
80
- <span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm">Puzzle</span>
81
- <span class="bg-yellow-600 text-white px-3 py-1 rounded-full text-sm">Racing</span>
82
- <span class="bg-red-600 text-white px-3 py-1 rounded-full text-sm">Sports</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
83
  </div>
84
  </div>
85
- </div>
86
-
87
  <script>
88
- // Game card click handlers
89
- document.querySelectorAll('.game-card button').forEach(button => {
90
- button.addEventListener('click', function() {
91
- const gameTitle = this.closest('.game-card').querySelector('h3').textContent;
92
- alert(`Launching ${gameTitle}... (This would load the actual game)`);
93
-
94
- // In a real implementation, this would load the game iframe or redirect
95
- // window.location.href = `/games/${gameTitle.toLowerCase().replace(' ', '-')}`;
96
- });
97
  });
98
-
99
- // Filter games by category (placeholder functionality)
100
- document.querySelectorAll('.category-tag').forEach(tag => {
101
- tag.addEventListener('click', function() {
102
- const category = this.textContent;
103
- alert(`Filtering by ${category} games...`);
104
 
105
- // In a real implementation, this would filter the game cards
106
- // document.querySelectorAll('.game-card').forEach(card => {
107
- // card.style.display = card.dataset.category.includes(category) ? 'block' : 'none';
108
- // });
109
  });
110
  });
111
  </script>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ChildGPT - Free Educational Games & AI Game Creator</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Fredoka+One&display=swap');
11
+
12
+ body {
13
+ font-family: 'Comic Neue', cursive;
14
+ background-color: #f9f7fe;
15
+ }
16
+
17
+ .logo-text {
18
+ font-family: 'Fredoka One', cursive;
19
+ }
20
+
21
+ .nav-item {
22
+ position: relative;
23
+ }
24
+
25
+ .nav-item::after {
26
+ content: '';
27
+ position: absolute;
28
+ width: 0;
29
+ height: 3px;
30
+ bottom: -5px;
31
+ left: 0;
32
+ background-color: #8b5cf6;
33
+ transition: width 0.3s ease;
34
+ }
35
+
36
+ .nav-item:hover::after {
37
+ width: 100%;
38
+ }
39
+
40
  .game-card {
41
  transition: all 0.3s ease;
42
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
43
  }
44
 
45
  .game-card:hover {
46
+ transform: translateY(-5px);
47
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
 
 
 
48
  }
49
 
50
+ .gradient-bg {
51
+ background: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 100%);
52
  }
53
  </style>
54
  </head>
55
+ <body class="min-h-screen">
56
+ <!-- Header -->
57
+ <header class="gradient-bg text-white sticky top-0 z-50 shadow-md">
58
+ <div class="container mx-auto px-4 py-3">
59
+ <div class="flex items-center justify-between">
60
+ <!-- Logo -->
61
+ <div class="flex items-center space-x-2">
62
+ <img src="https://childgpt.com/assets/logo.CAfo0A04.png" alt="ChildGPT Logo" class="h-12 w-12">
63
+ <h1 class="logo-text text-2xl md:text-3xl font-bold">ChildGPT</h1>
64
+ </div>
65
+
66
+ <!-- Navigation -->
67
+ <nav class="hidden md:flex space-x-8">
68
+ <a href="#" class="nav-item text-lg font-medium hover:text-purple-100">Create</a>
69
+ <a href="#" class="nav-item text-lg font-medium hover:text-purple-100">History</a>
70
+ <a href="#" class="nav-item text-lg font-medium hover:text-purple-100">Chat</a>
71
+ <a href="#" class="nav-item text-lg font-medium hover:text-purple-100">Discover</a>
72
+ </nav>
73
+
74
+ <!-- Mobile Menu Button -->
75
+ <button class="md:hidden text-2xl" id="menuBtn">
76
+ <i class="fas fa-bars"></i>
77
+ </button>
78
+ </div>
79
+
80
+ <!-- Mobile Menu -->
81
+ <div class="md:hidden hidden py-4" id="mobileMenu">
82
+ <div class="flex flex-col space-y-4">
83
+ <a href="#" class="nav-item text-lg font-medium hover:text-purple-100">Create</a>
84
+ <a href="#" class="nav-item text-lg font-medium hover:text-purple-100">History</a>
85
+ <a href="#" class="nav-item text-lg font-medium hover:text-purple-100">Chat</a>
86
+ <a href="#" class="nav-item text-lg font-medium hover:text-purple-100">Discover</a>
87
  </div>
88
  </div>
89
+ </div>
90
+ </header>
91
 
92
+ <!-- Main Content -->
93
+ <main class="container mx-auto px-4 py-8">
94
+ <!-- Hero Section -->
95
+ <section class="mb-12">
96
+ <div class="bg-white rounded-2xl p-8 shadow-lg">
97
+ <div class="flex flex-col md:flex-row items-center">
98
+ <div class="md:w-1/2 mb-6 md:mb-0">
99
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Fun Learning with AI-Powered Games</h2>
100
+ <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>
101
+ <div class="flex space-x-4">
102
+ <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
103
+ Try It Free
104
+ </button>
105
+ <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">
106
+ How It Works
107
+ </button>
108
+ </div>
109
+ </div>
110
+ <div class="md:w-1/2 flex justify-center">
111
+ <img src="https://childgpt.com/assets/logo.CAfo0A04.png" alt="ChildGPT Game Example" class="rounded-xl w-full max-w-md">
112
+ </div>
113
  </div>
114
  </div>
115
+ </section>
116
 
117
+ <!-- Hot Recommendations -->
118
+ <section>
119
+ <div class="flex items-center justify-between mb-6">
120
+ <h2 class="text-2xl font-bold text-gray-800 flex items-center">
121
+ <span class="text-red-500 mr-2"><i class="fas fa-fire"></i></span>
122
+ Hot Recommendations
123
+ </h2>
124
+ <a href="#" class="text-purple-600 hover:text-purple-800 font-medium">See All</a>
125
+ </div>
126
+
127
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
128
+ <!-- Game Card 1 -->
129
+ <div class="game-card bg-white rounded-xl overflow-hidden shadow-md">
130
+ <div class="h-48 bg-purple-100 flex items-center justify-center">
131
+ <i class="fas fa-robot text-6xl text-purple-500"></i>
132
+ </div>
133
+ <div class="p-5">
134
+ <h3 class="font-bold text-xl mb-2">Math Adventure</h3>
135
+ <p class="text-gray-600 mb-4">Solve math problems to help the robot find its way home!</p>
136
+ <div class="flex justify-between items-center">
137
+ <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">Ages 6-9</span>
138
+ <button class="text-purple-600 hover:text-purple-800 font-medium">Play Now</button>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Game Card 2 -->
144
+ <div class="game-card bg-white rounded-xl overflow-hidden shadow-md">
145
+ <div class="h-48 bg-blue-100 flex items-center justify-center">
146
+ <i class="fas fa-globe-americas text-6xl text-blue-500"></i>
147
+ </div>
148
+ <div class="p-5">
149
+ <h3 class="font-bold text-xl mb-2">World Explorer</h3>
150
+ <p class="text-gray-600 mb-4">Learn about countries and cultures around the world!</p>
151
+ <div class="flex justify-between items-center">
152
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Ages 8-12</span>
153
+ <button class="text-purple-600 hover:text-purple-800 font-medium">Play Now</button>
154
+ </div>
155
+ </div>
156
+ </div>
157
+
158
+ <!-- Game Card 3 -->
159
+ <div class="game-card bg-white rounded-xl overflow-hidden shadow-md">
160
+ <div class="h-48 bg-green-100 flex items-center justify-center">
161
+ <i class="fas fa-dna text-6xl text-green-500"></i>
162
+ </div>
163
+ <div class="p-5">
164
+ <h3 class="font-bold text-xl mb-2">Science Lab</h3>
165
+ <p class="text-gray-600 mb-4">Conduct fun experiments and learn scientific concepts!</p>
166
+ <div class="flex justify-between items-center">
167
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Ages 7-10</span>
168
+ <button class="text-purple-600 hover:text-purple-800 font-medium">Play Now</button>
169
+ </div>
170
+ </div>
171
  </div>
172
  </div>
173
+ </section>
174
+
175
+ <!-- Create Your Own Section -->
176
+ <section class="mt-16 mb-12">
177
+ <div class="bg-gradient-to-r from-purple-100 to-indigo-100 rounded-2xl p-8 shadow-lg">
178
+ <div class="flex flex-col md:flex-row items-center">
179
+ <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8">
180
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Create Your Own Educational Game</h2>
181
+ <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>
182
+ <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
183
+ Start Creating <i class="fas fa-arrow-right ml-2"></i>
184
+ </button>
185
+ </div>
186
+ <div class="md:w-1/2">
187
+ <div class="bg-white p-6 rounded-xl shadow-md">
188
+ <div class="flex items-center mb-4">
189
+ <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white mr-3">1</div>
190
+ <h3 class="font-bold">Choose a Learning Objective</h3>
191
+ </div>
192
+ <div class="flex items-center mb-4">
193
+ <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white mr-3">2</div>
194
+ <h3 class="font-bold">Select Game Type</h3>
195
+ </div>
196
+ <div class="flex items-center">
197
+ <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white mr-3">3</div>
198
+ <h3 class="font-bold">Customize & Publish</h3>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </section>
205
+ </main>
206
 
207
+ <!-- Footer -->
208
+ <footer class="bg-gray-800 text-white py-8">
209
+ <div class="container mx-auto px-4">
210
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
211
+ <div>
212
+ <div class="flex items-center space-x-2 mb-4">
213
+ <img src="https://childgpt.com/assets/logo.CAfo0A04.png" alt="ChildGPT Logo" class="h-10 w-10">
214
+ <h3 class="logo-text text-xl font-bold">ChildGPT</h3>
215
+ </div>
216
+ <p class="text-gray-300">Making learning fun through AI-powered educational games for children.</p>
217
+ </div>
218
+ <div>
219
+ <h4 class="font-bold text-lg mb-4">Explore</h4>
220
+ <ul class="space-y-2">
221
+ <li><a href="#" class="text-gray-300 hover:text-white">Games</a></li>
222
+ <li><a href="#" class="text-gray-300 hover:text-white">Subjects</a></li>
223
+ <li><a href="#" class="text-gray-300 hover:text-white">Age Groups</a></li>
224
+ <li><a href="#" class="text-gray-300 hover:text-white">New Releases</a></li>
225
+ </ul>
226
+ </div>
227
+ <div>
228
+ <h4 class="font-bold text-lg mb-4">Resources</h4>
229
+ <ul class="space-y-2">
230
+ <li><a href="#" class="text-gray-300 hover:text-white">For Parents</a></li>
231
+ <li><a href="#" class="text-gray-300 hover:text-white">For Teachers</a></li>
232
+ <li><a href="#" class="text-gray-300 hover:text-white">Blog</a></li>
233
+ <li><a href="#" class="text-gray-300 hover:text-white">FAQ</a></li>
234
+ </ul>
235
+ </div>
236
+ <div>
237
+ <h4 class="font-bold text-lg mb-4">Connect</h4>
238
+ <div class="flex space-x-4 mb-4">
239
+ <a href="#" class="text-gray-300 hover:text-white text-xl"><i class="fab fa-facebook"></i></a>
240
+ <a href="#" class="text-gray-300 hover:text-white text-xl"><i class="fab fa-twitter"></i></a>
241
+ <a href="#" class="text-gray-300 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
242
+ <a href="#" class="text-gray-300 hover:text-white text-xl"><i class="fab fa-youtube"></i></a>
243
+ </div>
244
+ <p class="text-gray-300">Subscribe to our newsletter</p>
245
+ <div class="mt-2 flex">
246
+ <input type="email" placeholder="Your email" class="px-3 py-2 rounded-l text-gray-800 w-full">
247
+ <button class="bg-purple-600 hover:bg-purple-700 px-4 rounded-r">
248
+ <i class="fas fa-paper-plane"></i>
249
+ </button>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
254
+ <p>&copy; 2025 ChildGPT. All rights reserved.</p>
255
  </div>
256
  </div>
257
+ </footer>
258
+
259
  <script>
260
+ // Mobile menu toggle
261
+ const menuBtn = document.getElementById('menuBtn');
262
+ const mobileMenu = document.getElementById('mobileMenu');
263
+
264
+ menuBtn.addEventListener('click', () => {
265
+ mobileMenu.classList.toggle('hidden');
 
 
 
266
  });
267
+
268
+ // Smooth scrolling for navigation
269
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
270
+ anchor.addEventListener('click', function (e) {
271
+ e.preventDefault();
 
272
 
273
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
274
+ behavior: 'smooth'
275
+ });
 
276
  });
277
  });
278
  </script>