Spaces:

steake
/

accessv2

Running

App Files Files Community

steake commited on Apr 15, 2025

Commit

007d644

verified ·

1 Parent(s): 33ac5c8

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Accessv2
-emoji: ⚡
-colorFrom: green
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: accessv2
+emoji: 🐳
+colorFrom: yellow
+colorTo: pink
 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,313 @@
-<!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>ACCESS - Event Discovery Platform</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=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');
+        :root {
+            --color-primary: #000000;
+            --color-secondary: #FFFFFF;
+            --color-accent-yellow: #FFFF00;
+            --color-accent-blue: #007AFF;
+            --color-accent-orange: #FF5733;
+            --color-accent-purple: #8A2BE2;
+            --color-light-gray: #F0F0F0;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            overflow-x: hidden;
+        }
+        .heading-font {
+            font-family: 'Bebas Neue', sans-serif;
+            font-weight: 400;
+            letter-spacing: 1px;
+            line-height: 0.9;
+        }
+        .hero-bg {
+            background-image: url('https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
+            background-size: cover;
+            background-position: center;
+            position: relative;
+        }
+        .hero-bg::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.3);
+        }
+        .phone-mockup {
+            position: relative;
+            width: 300px;
+            height: 600px;
+            background-color: #000;
+            border-radius: 40px;
+            padding: 10px;
+            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+            z-index: 2;
+        }
+        .phone-screen {
+            width: 100%;
+            height: 100%;
+            border-radius: 30px;
+            overflow: hidden;
+            background-size: cover;
+            background-position: center;
+        }
+        .ticker {
+            overflow: hidden;
+            white-space: nowrap;
+        }
+        .ticker-content {
+            display: inline-block;
+            animation: ticker 20s linear infinite;
+        }
+        @keyframes ticker {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(-50%); }
+        }
+        .split-text-left, .split-text-right {
+            position: relative;
+            z-index: 1;
+        }
+        .feature-section {
+            position: relative;
+            overflow: hidden;
+        }
+        .input-underline {
+            border-bottom: 2px solid #000;
+            background: transparent;
+            padding-bottom: 8px;
+            outline: none;
+            width: 100%;
+            max-width: 400px;
+        }
+        @media (max-width: 768px) {
+            .phone-mockup {
+                width: 200px;
+                height: 400px;
+                margin-bottom: 40px;
+            }
+            .split-text-left, .split-text-right {
+                text-align: center !important;
+                margin-bottom: 20px;
+            }
+        }
+    </style>
+</head>
+<body class="bg-white text-black">
+    <!-- Header -->
+    <header class="fixed w-full z-50 bg-black bg-opacity-90 transition-all duration-300">
+        <div class="container mx-auto px-6 py-4 flex justify-between items-center">
+            <div class="flex items-center">
+                <i class="fas fa-star text-purple-500 text-2xl mr-2"></i>
+                <span class="text-white font-bold text-xl">ACCESS</span>
+            </div>
+            <nav class="hidden md:flex space-x-8">
+                <a href="#" class="text-white hover:text-purple-300 transition">About</a>
+                <a href="#" class="text-white hover:text-purple-300 transition">Contact</a>
+            </nav>
+            <button class="md:hidden text-white">
+                <i class="fas fa-bars text-2xl"></i>
+            </button>
+        </div>
+    </header>
+    <!-- Hero Section 1 -->
+    <section class="min-h-screen bg-black flex items-center justify-center pt-20">
+        <div class="container mx-auto px-6 text-center">
+            <h1 class="heading-font text-white text-7xl md:text-9xl lg:text-[180px] uppercase">
+                GIGS<br>PARTIES<br>EVENTS
+            </h1>
+        </div>
+    </section>
+    <!-- Hero Section 2 -->
+    <section class="min-h-screen hero-bg flex items-center justify-center relative">
+        <div class="container mx-auto px-6 text-center relative z-10">
+            <h1 class="heading-font text-white text-7xl md:text-9xl lg:text-[180px] uppercase">
+                GET ON<br>THE INSIDE
+            </h1>
+        </div>
+    </section>
+    <!-- Text Section -->
+    <section class="py-20 bg-gray-100">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="heading-font text-black text-7xl md:text-9xl lg:text-[120px] uppercase mb-8">
+                IN OUR<br>WORLD<br>EVERYONE<br>GOES OUT<br>AND NO<br>ONE<br>MISSES<br>OUT
+            </h2>
+            <h3 class="text-2xl md:text-3xl font-bold mb-6">Get on the inside</h3>
+            <p class="text-lg md:text-xl max-w-2xl mx-auto">
+                Coming soon to the App Store.<br>
+                Instantly get access to the most hyped events around you
+            </p>
+        </div>
+    </section>
+    <!-- Ticker Tape 1 -->
+    <section class="py-8 bg-black ticker">
+        <div class="ticker-content">
+            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
+            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
+            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
+            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
+            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
+        </div>
+    </section>
+    <!-- Feature Section 1: Discover -->
+    <section class="py-20 md:py-32 bg-yellow-400 feature-section">
+        <div class="container mx-auto px-6 flex flex-col md:flex-row items-center justify-center">
+            <div class="split-text-left text-left md:w-1/3 mb-12 md:mb-0 md:pr-8">
+                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">DIS</h2>
+                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">THE</h2>
+            </div>
+            <div class="phone-mockup mx-8">
+                <div class="phone-screen" style="background-image: url('https://images.unsplash.com/photo-1540039155733-5bb30b53aa14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80')"></div>
+            </div>
+            <div class="split-text-right text-right md:w-1/3 mt-12 md:mt-0 md:pl-8">
+                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">ER</h2>
+                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">IRL</h2>
+            </div>
+        </div>
+    </section>
+    <!-- Feature Section 2: Become Fan -->
+    <section class="py-20 md:py-32 bg-blue-500 feature-section">
+        <div class="container mx-auto px-6 flex flex-col md:flex-row items-center justify-center">
+            <div class="split-text-left text-left md:w-1/3 mb-12 md:mb-0 md:pr-8">
+                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">BECO</h2>
+                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">ULTIM</h2>
+            </div>
+            <div class="phone-mockup mx-8">
+                <div class="phone-screen" style="background-image: url('https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80')"></div>
+            </div>
+            <div class="split-text-right text-right md:w-1/3 mt-12 md:mt-0 md:pl-8">
+                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">THE</h2>
+                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">FAN</h2>
+            </div>
+        </div>
+    </section>
+    <!-- Feature Section 3: Experience -->
+    <section class="py-20 md:py-32 bg-orange-500 feature-section">
+        <div class="container mx-auto px-6 flex flex-col md:flex-row items-center justify-center">
+            <div class="split-text-left text-left md:w-1/3 mb-12 md:mb-0 md:pr-8">
+                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">EXP</h2>
+                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">AL</h2>
+            </div>
+            <div class="phone-mockup mx-8">
+                <div class="phone-screen" style="background-image: url('https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80')"></div>
+            </div>
+            <div class="split-text-right text-right md:w-1/3 mt-12 md:mt-0 md:pl-8">
+                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">NCE</h2>
+                <h2 class="heading-font text-black text-6xl md:text-8xl uppercase">IT</h2>
+            </div>
+        </div>
+    </section>
+    <!-- Ticker Tape 2 -->
+    <section class="py-8 bg-black ticker">
+        <div class="ticker-content">
+            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
+            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
+            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
+            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
+            <span class="heading-font text-white text-4xl md:text-6xl inline-block mx-4">ACCESS <i class="fas fa-star text-purple-500"></i></span>
+        </div>
+    </section>
+    <!-- Waitlist Section -->
+    <section class="py-20 bg-gray-100">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="heading-font text-black text-7xl md:text-9xl uppercase mb-8">
+                JOIN THE<br>WAITLIST
+            </h2>
+            <form id="waitlist-form" class="max-w-md mx-auto mb-8">
+                <div class="flex items-center">
+                    <input type="email" placeholder="Enter email address" required
+                           class="input-underline text-center text-lg focus:border-purple-500 focus:border-b-2">
+                    <button type="submit" class="ml-4 bg-black text-white p-3 rounded-full hover:bg-purple-500 transition">
+                        <i class="fas fa-arrow-right text-xl"></i>
+                    </button>
+                </div>
+            </form>
+            <p class="text-lg md:text-xl max-w-2xl mx-auto">
+                Launching soon in all major cities.<br>
+                Get on the inside.
+            </p>
+        </div>
+    </section>
+    <!-- Footer -->
+    <section class="py-32 bg-black">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="heading-font text-white text-7xl md:text-9xl lg:text-[180px] uppercase">
+                ACCESS
+            </h2>
+        </div>
+    </section>
+    <script>
+        // Form submission handling
+        document.getElementById('waitlist-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const email = this.querySelector('input').value;
+            // Simple email validation
+            if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+                alert('Thanks for joining the waitlist! We\'ll be in touch soon.');
+                this.querySelector('input').value = '';
+            } else {
+                alert('Please enter a valid email address.');
+            }
+        });
+        // Header scroll effect
+        window.addEventListener('scroll', function() {
+            const header = document.querySelector('header');
+            if (window.scrollY > 50) {
+                header.classList.add('bg-opacity-100', 'shadow-lg');
+            } else {
+                header.classList.remove('bg-opacity-100', 'shadow-lg');
+            }
+        });
+        // Mobile menu toggle (would need more implementation)
+        document.querySelector('button.md\\:hidden').addEventListener('click', function() {
+            // In a full implementation, this would toggle a mobile menu
+            alert('Mobile menu would open here');
+        });
+    </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=steake/accessv2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>