-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.php
More file actions
409 lines (396 loc) · 21.9 KB
/
Copy pathabout.php
File metadata and controls
409 lines (396 loc) · 21.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
<?php
// Include database connection if needed in the future
// require_once 'config/database.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About - RetroHub</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://unpkg.com/aos@next/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/about.css">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="index.html">
<span class="retro-logo">Retro<span class="hub-text">Hub</span></span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="library.php">Library</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="support.html">Support</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- About Header -->
<div class="about-header">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6" data-aos="fade-right">
<h1>About <span class="text-gradient">RetroHub</span></h1>
<p class="lead">Relive the golden era of gaming through our state-of-the-art browser-based emulation platform.</p>
<div class="stats-container">
<div class="stat-item">
<div class="stat-number" data-count="4">0</div>
<div class="stat-label">Retro Consoles</div>
</div>
<div class="stat-item">
<div class="stat-number" data-count="234">0</div>
<div class="stat-label">Classic Games</div>
</div>
<div class="stat-item">
<div class="stat-number" data-count="1.2">0</div>
<div class="stat-label">Million Players</div>
</div>
</div>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="about-image">
<img src="images/about-hero.png" alt="RetroHub Experience" class="img-fluid">
<div class="glow-effect"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Our Story -->
<section class="our-story">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 mb-4 mb-lg-0" data-aos="fade-right">
<div class="story-image">
<img src="images/our-story.jpg" alt="RetroHub Story" class="img-fluid">
<div class="story-gradient"></div>
</div>
</div>
<div class="col-lg-6" data-aos="fade-left">
<h2 class="section-title">Our <span class="text-gradient">Story</span></h2>
<p>RetroHub began as a passion project by a small team of gaming enthusiasts who wanted to preserve and share the magic of retro gaming with the world. What started as a simple emulation experiment in 2019 has grown into a comprehensive platform that brings classic gaming experiences to your browser.</p>
<p>Our mission is to make retro gaming accessible to everyone, regardless of technical knowledge or hardware limitations. By leveraging cutting-edge web technologies, we've created a seamless emulation experience that runs directly in your browser, with no downloads required.</p>
<p>Today, RetroHub hosts a curated collection of classic titles from iconic consoles like PlayStation 2, PSP, SNES, and Nintendo 64, with more platforms being added regularly. We're committed to preserving gaming history while providing modern conveniences that enhance the retro gaming experience.</p>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section class="how-it-works about-how">
<div class="container">
<h2 class="section-title text-center" data-aos="fade-up">How RetroHub <span class="text-gradient">Works</span></h2>
<p class="text-center mb-5" data-aos="fade-up">Our platform utilizes advanced emulation technology to run games directly in your browser.</p>
<div class="row">
<div class="col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="100">
<div class="step-card">
<div class="step-icon">
<i class="fas fa-microchip"></i>
</div>
<h3>WebAssembly Emulation</h3>
<p>We've ported classic console emulators to WebAssembly, allowing them to run at near-native speeds directly in your browser without plugins or downloads.</p>
</div>
</div>
<div class="col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="200">
<div class="step-card">
<div class="step-icon">
<i class="fas fa-cloud"></i>
</div>
<h3>Cloud Game Storage</h3>
<p>Our game ROMs are stored securely in the cloud and streamed to your browser on demand, eliminating the need for local storage and ensuring instant access.</p>
</div>
</div>
<div class="col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="300">
<div class="step-card">
<div class="step-icon">
<i class="fas fa-save"></i>
</div>
<h3>Cross-Device Saves</h3>
<p>Your game progress is automatically synchronized across all your devices, allowing you to start a game on your computer and continue on your tablet or phone.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Technology Stack -->
<section class="tech-stack">
<div class="container">
<h2 class="section-title text-center" data-aos="fade-up">Our <span class="text-gradient">Technology</span></h2>
<p class="text-center mb-5" data-aos="fade-up">RetroHub leverages cutting-edge web technologies to deliver a seamless gaming experience.</p>
<div class="tech-grid" data-aos="fade-up">
<div class="tech-item">
<div class="tech-icon">
<img src="images/tech/webassembly.svg" alt="WebAssembly">
</div>
<h4>WebAssembly</h4>
</div>
<div class="tech-item">
<div class="tech-icon">
<img src="images/tech/javascript.svg" alt="JavaScript">
</div>
<h4>JavaScript</h4>
</div>
<div class="tech-item">
<div class="tech-icon">
<img src="images/tech/html5.svg" alt="HTML5">
</div>
<h4>HTML5</h4>
</div>
<div class="tech-item">
<div class="tech-icon">
<img src="images/tech/css3.svg" alt="CSS3">
</div>
<h4>CSS3</h4>
</div>
<div class="tech-item">
<div class="tech-icon">
<img src="images/tech/websocket.svg" alt="WebSocket">
</div>
<h4>WebSocket</h4>
</div>
<div class="tech-item">
<div class="tech-icon">
<img src="images/tech/webgl.svg" alt="WebGL">
</div>
<h4>WebGL</h4>
</div>
<div class="tech-item">
<div class="tech-icon">
<img src="images/tech/node.svg" alt="Node.js">
</div>
<h4>Node.js</h4>
</div>
<div class="tech-item">
<div class="tech-icon">
<img src="images/tech/bootstrap.svg" alt="Bootstrap">
</div>
<h4>Bootstrap</h4>
</div>
</div>
</div>
</section>
<!-- Team -->
<section class="team-section">
<div class="container">
<h2 class="section-title text-center" data-aos="fade-up">Meet Our <span class="text-gradient">Team</span></h2>
<p class="text-center mb-5" data-aos="fade-up">The passionate developers and designers behind RetroHub.</p>
<div class="row">
<div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="100">
<div class="team-card">
<div class="team-image">
<img src="images/team/kavan.jpg" alt="Kavan Raval">
<div class="team-social">
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-link"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="team-info">
<h4>Kavan Raval</h4>
<p class="team-role">Founder & Emulation Engineer</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="200">
<div class="team-card">
<div class="team-image">
<img src="images/team/sarah.jpg" alt="Sarah Johnson">
<div class="team-social">
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-link"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="team-info">
<h4>Parva Trivedi</h4>
<p class="team-role">UI/UX Designer & Lead Developer</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="300">
<div class="team-card">
<div class="team-image">
<img src="images/team/michael.jpg" alt="Michael Rodriguez">
<div class="team-social">
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-link"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="team-info">
<h4>Deep Shah</h4>
<p class="team-role">Configurator</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="400">
<div class="team-card">
<div class="team-image">
<img src="images/team/lisa.jpg" alt="Lisa Wong">
<div class="team-social">
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-link"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="team-info">
<h4>Jash Pandhi</h4>
<p class="team-role">Quality Assurance</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="faq-section">
<div class="container">
<h2 class="section-title text-center" data-aos="fade-up">Frequently Asked <span class="text-gradient">Questions</span></h2>
<div class="accordion" id="faqAccordion" data-aos="fade-up">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Is RetroHub free to use?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
<div class="accordion-body">
Yes, RetroHub is completely free to use. We believe that retro gaming should be accessible to everyone, so we've made our platform free with no hidden fees or microtransactions.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Do I need to download any software?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
<div class="accordion-body">
No, RetroHub runs entirely in your web browser. There's no need to download or install any additional software or plugins. Just open the website, select a game, and start playing.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
What browsers are supported?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
<div class="accordion-body">
RetroHub works best on modern browsers like Chrome, Firefox, Safari, and Edge. We recommend using the latest version of your preferred browser for the best performance and compatibility.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Can I use a gamepad or controller?
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#faqAccordion">
<div class="accordion-body">
Yes! RetroHub supports most USB and Bluetooth controllers, including Xbox, PlayStation, and generic gamepads. Connect your controller to your device, and RetroHub will automatically detect and configure it for optimal gameplay.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
How are my game saves stored?
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#faqAccordion">
<div class="accordion-body">
Your game saves are stored securely in the cloud and linked to your RetroHub account. This allows you to access your saves across different devices and ensures you never lose your progress.
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section">
<div class="container text-center">
<h2 data-aos="fade-up">Ready to Start Your Retro Gaming Journey?</h2>
<p data-aos="fade-up" data-aos-delay="100">Join thousands of players already enjoying classic games on RetroHub.</p>
<a href="library.html" class="btn btn-primary btn-lg btn-glow mt-4" data-aos="fade-up" data-aos-delay="200">
Browse Game Library
</a>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-4 mb-lg-0">
<a class="footer-brand" href="index.html">
<span class="retro-logo">Retro<span class="hub-text">Hub</span></span>
</a>
<p class="mt-3">Experience the golden era of gaming through our state-of-the-art online emulation platform.</p>
<div class="social-icons">
<a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-icon"><i class="fab fa-discord"></i></a>
<a href="#" class="social-icon"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6 mb-4 mb-md-0">
<h5>Navigation</h5>
<ul class="footer-links">
<li><a href="index.html">Home</a></li>
<li><a href="library.php">Library</a></li>
<li><a href="about.html">About</a></li>
<li><a href="support.html">Support</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 col-6 mb-4 mb-md-0">
<h5>Consoles</h5>
<ul class="footer-links">
<li><a href="library.html?console=ps2">PlayStation 2</a></li>
<li><a href="library.html?console=psp">PSP</a></li>
<li><a href="library.html?console=snes">SNES</a></li>
<li><a href="library.html">View All</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-4">
<h5>Newsletter</h5>
<p>Subscribe for updates on new games and features.</p>
<form class="newsletter-form" action="process_newsletter.php" method="post" id="footer-newsletter-form">
<div class="input-group">
<input type="email" name="email" class="form-control" placeholder="Your email" required>
<button class="btn btn-primary" type="submit">Subscribe</button>
</div>
<!-- Add hidden debug field -->
<input type="hidden" name="debug" value="1">
</form>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 RetroHub. All rights reserved. For educational purposes only.</p>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script src="js/main.js"></script>
<script src="js/about.js"></script>
</body>
</html>