Spaces:

Capermint
/

capermint-gcc-titans

Running

App Files Files Community

Capermint commited on Feb 4

Commit

5e56ea4

verified ·

1 Parent(s): 39c4cc4

please complete the code

Browse files

Files changed (2) hide show

index.html +142 -18
script.js +39 -2

index.html CHANGED Viewed

@@ -1,19 +1,143 @@
-<!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="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Top 21 Game Development Companies in GCC | 2025 Directory</title>
+    <meta name="description" content="Discover the leading game development companies across Saudi Arabia, UAE, Qatar, Kuwait, Bahrain, and Oman. Expert reviews, ratings, and company profiles.">
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#6366f1',
+                        secondary: '#8b5cf6',
+                        accent: '#ec4899',
+                        dark: '#0f172a',
+                        darker: '#020617'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body {
+            background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
+            min-height: 100vh;
+        }
+        .hero-gradient {
+            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 50%, rgba(236, 72, 153, 0.05) 100%);
+        }
+    </style>
+</head>
+<body class="text-white antialiased">
+    <!-- Hero Section -->
+    <header class="hero-gradient relative overflow-hidden">
+        <div class="absolute inset-0 opacity-30">
+            <div class="floating-orb absolute top-20 left-10 w-72 h-72 bg-primary/20 rounded-full blur-3xl"></div>
+            <div class="floating-orb absolute bottom-20 right-10 w-96 h-96 bg-secondary/20 rounded-full blur-3xl" style="animation-delay: -2s;"></div>
+            <div class="floating-orb absolute top-1/2 left-1/2 w-64 h-64 bg-accent/10 rounded-full blur-3xl" style="animation-delay: -4s;"></div>
+        </div>
+        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-24">
+            <div class="text-center animate-fade-in">
+                <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-6">
+                    <i data-feather="award" class="w-4 h-4 text-yellow-400"></i>
+                    <span class="text-sm font-medium text-white/80">2025 Edition</span>
+                </div>
+                <h1 class="text-4xl sm:text-5xl lg:text-7xl font-bold mb-6 leading-tight">
+                    <span class="bg-clip-text text-transparent bg-gradient-to-r from-primary via-secondary to-accent">Top 21 Game Dev</span>
+                    <br>
+                    <span class="text-white">Companies in GCC</span>
+                </h1>
+                <p class="text-lg sm:text-xl text-white/60 max-w-3xl mx-auto mb-8 leading-relaxed">
+                    Discover the elite game development studios powering the Middle East's gaming revolution.
+                    From Riyadh to Dubai, explore verified reviews, ratings, and expertise.
+                </p>
+                <!-- Stats Bar -->
+                <div class="flex flex-wrap justify-center gap-8 sm:gap-12 mt-12">
+                    <div class="text-center">
+                        <div class="text-3xl sm:text-4xl font-bold text-white mb-1">21</div>
+                        <div class="text-sm text-white/50 uppercase tracking-wider">Companies</div>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-3xl sm:text-4xl font-bold text-white mb-1">6</div>
+                        <div class="text-sm text-white/50 uppercase tracking-wider">Countries</div>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-3xl sm:text-4xl font-bold text-white mb-1">500+</div>
+                        <div class="text-sm text-white/50 uppercase tracking-wider">Games Delivered</div>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-3xl sm:text-4xl font-bold text-white mb-1">4.6</div>
+                        <div class="text-sm text-white/50 uppercase tracking-wider">Avg Rating</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!-- Filter Section -->
+    <section class="sticky top-0 z-40 backdrop-blur-xl bg-dark/80 border-b border-white/5">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+            <div class="flex flex-wrap items-center justify-center gap-2">
+                <button class="filter-btn active px-4 py-2 rounded-full text-sm font-medium transition-all" data-filter="all">
+                    All Countries
+                </button>
+                <button class="filter-btn px-4 py-2 rounded-full text-sm font-medium transition-all" data-filter="saudi">
+                    🇸🇦 Saudi Arabia
+                </button>
+                <button class="filter-btn px-4 py-2 rounded-full text-sm font-medium transition-all" data-filter="uae">
+                    🇦🇪 UAE
+                </button>
+                <button class="filter-btn px-4 py-2 rounded-full text-sm font-medium transition-all" data-filter="qatar">
+                    🇶🇦 Qatar
+                </button>
+                <button class="filter-btn px-4 py-2 rounded-full text-sm font-medium transition-all" data-filter="kuwait">
+                    🇰🇼 Kuwait
+                </button>
+                <button class="filter-btn px-4 py-2 rounded-full text-sm font-medium transition-all" data-filter="bahrain">
+                    🇧🇭 Bahrain
+                </button>
+                <button class="filter-btn px-4 py-2 rounded-full text-sm font-medium transition-all" data-filter="oman">
+                    🇴🇲 Oman
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Companies Grid -->
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div id="companies-grid" class="space-y-6">
+            <!-- Companies will be rendered here by JavaScript -->
+        </div>
+    </main>
+    <!-- Footer -->
+    <footer class="border-t border-white/5 mt-20">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+            <div class="flex flex-col md:flex-row justify-between items-center gap-6">
+                <div class="text-center md:text-left">
+                    <h3 class="text-lg font-semibold text-white mb-2">GCC Game Dev Directory</h3>
+                    <p class="text-white/50 text-sm">Your trusted source for game development talent in the Middle East.</p>
+                </div>
+                <div class="flex items-center gap-6 text-white/50 text-sm">
+                    <span>© 2025 GCC Game Dev Directory</span>
+                    <span>•</span>
+                    <span>Data updated January 2025</span>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script src="script.js"></script>
+</body>
 </html>

script.js CHANGED Viewed

@@ -707,6 +707,43 @@ function initializeFilters() {
         });
     });
 }
 // Scroll Animations
-function initializeAnimations() {

         });
     });
 }
 // Scroll Animations
+function initializeAnimations() {
+    // Intersection Observer for scroll animations
+    const observerOptions = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.1
+    };
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-fade-in-up');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+    // Observe company cards
+    setTimeout(() => {
+        document.querySelectorAll('.company-card').forEach((card, index) => {
+            card.style.animationDelay = `${index * 0.1}s`;
+            observer.observe(card);
+        });
+    }, 100);
+}
+// Smooth scroll for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+            target.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+    });
+});