Spaces:

Bakingbad
/

countdown-to-cuffing-season

Running

App Files Files Community

Bakingbad commited on Oct 2

Commit

f889249

verified ·

1 Parent(s): 32c9d0f

Redesign my website

Browse files

Files changed (2) hide show

README.md +7 -4
index.html +168 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Countdown To Cuffing Season
-emoji: 📈
-colorFrom: pink
 colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Countdown to Cuffing Season ✨
+colorFrom: gray
 colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,169 @@
-<!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="da">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>De Uovervindelige - Speed Dating Event</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+        .title-font {
+            font-family: 'Playfair Display', serif;
+        }
+        .countdown-item {
+            transition: all 0.3s ease;
+        }
+        .countdown-item:hover {
+            transform: translateY(-5px);
+        }
+        .floating {
+            animation: float 3s ease-in-out infinite;
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        .pulse-glow {
+            animation: pulse-glow 2s ease-in-out infinite alternate;
+        }
+        @keyframes pulse-glow {
+            from { box-shadow: 0 0 20px rgba(255, 105, 180, 0.4); }
+            to { box-shadow: 0 0 30px rgba(255, 105, 180, 0.8); }
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-purple-900 via-pink-700 to-rose-600 min-h-screen text-white">
+    <div id="vanta-bg"></div>
+    <div class="relative z-10 min-h-screen flex flex-col items-center justify-center px-4 py-12">
+        <!-- Header Section -->
+        <div class="text-center mb-12 floating">
+            <h1 class="title-font text-5xl md:text-7xl font-black mb-4 bg-gradient-to-r from-yellow-300 to-pink-400 bg-clip-text text-transparent">
+                De Uovervindelige
+            </h1>
+            <div class="w-24 h-1 bg-gradient-to-r from-yellow-300 to-pink-400 mx-auto mb-6 rounded-full"></div>
+            <h2 class="text-2xl md:text-3xl font-light tracking-wider">
+                Speed Dating Event
+            </h2>
+            <div class="flex items-center justify-center mt-4 text-lg md:text-xl">
+                <i data-feather="map-pin" class="w-5 h-5 mr-2"></i>
+                <span>Holdtebro</span>
+                <span class="mx-3">•</span>
+                <i data-feather="calendar" class="w-5 h-5 mr-2"></i>
+                <span>29. november 2025</span>
+                <span class="mx-3">•</span>
+                <i data-feather="clock" class="w-5 h-5 mr-2"></i>
+                <span>kl. 15:00</span>
+            </div>
+        </div>
+        <!-- Countdown Section -->
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8 mb-16 w-full max-w-4xl">
+            <div class="countdown-item bg-white/10 backdrop-blur-lg rounded-2xl p-6 text-center border border-white/20 pulse-glow">
+                <div class="text-4xl md:text-6xl font-bold mb-2" id="days">58</div>
+                <div class="text-sm md:text-base uppercase tracking-wider opacity-80">Dage</div>
+            </div>
+            <div class="countdown-item bg-white/10 backdrop-blur-lg rounded-2xl p-6 text-center border border-white/20">
+                <div class="text-4xl md:text-6xl font-bold mb-2" id="hours">04</div>
+                <div class="text-sm md:text-base uppercase tracking-wider opacity-80">Timer</div>
+            </div>
+            <div class="countdown-item bg-white/10 backdrop-blur-lg rounded-2xl p-6 text-center border border-white/20">
+                <div class="text-4xl md:text-6xl font-bold mb-2" id="minutes">49</div>
+                <div class="text-sm md:text-base uppercase tracking-wider opacity-80">Min.</div>
+            </div>
+            <div class="countdown-item bg-white/10 backdrop-blur-lg rounded-2xl p-6 text-center border border-white/20">
+                <div class="text-4xl md:text-6xl font-bold mb-2" id="seconds">38</div>
+                <div class="text-sm md:text-base uppercase tracking-wider opacity-80">Sek.</div>
+            </div>
+        </div>
+        <!-- CTA Section -->
+        <div class="text-center mb-16">
+            <h3 class="text-3xl md:text-4xl font-bold mb-6 title-font">Glæd dig!</h3>
+            <button class="bg-gradient-to-r from-yellow-400 to-pink-500 hover:from-yellow-500 hover:to-pink-600 text-white font-semibold py-4 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 hover:shadow-2xl">
+                Tilmeld Dig Nu!
+            </button>
+        </div>
+        <!-- Meme Section -->
+        <div class="max-w-2xl w-full">
+            <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20">
+                <h4 class="text-xl font-semibold mb-4 text-center">Dagens Dating Meme</h4>
+                <img
+                    src="https://dum-dummere-countdown.lovable.app/assets/meme-3-CWaL0Zvx.jpg"
+                    alt="Dagens dating meme"
+                    class="w-full h-auto rounded-xl shadow-2xl transform transition-transform duration-300 hover:scale-105"
+                >
+            </div>
+        </div>
+        <!-- Footer -->
+        <div class="mt-16 text-center text-white/60">
+            <p class="text-sm">Kom og mød De Uovervindelige på årets mest spændende speed dating event!</p>
+        </div>
+    </div>
+    <script>
+        // Vanta.js Background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0xff69b4,
+            backgroundColor: 0x4a044e,
+            size: 0.8
+        });
+        // Countdown Timer
+        function updateCountdown() {
+            const eventDate = new Date('November 29, 2025 15:00:00').getTime();
+            const now = new Date().getTime();
+            const distance = eventDate - now;
+            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+            document.getElementById('days').innerText = days.toString().padStart(2, '0');
+            document.getElementById('hours').innerText = hours.toString().padStart(2, '0');
+            document.getElementById('minutes').innerText = minutes.toString().padStart(2, '0');
+            document.getElementById('seconds').innerText = seconds.toString().padStart(2, '0');
+            if (distance < 0) {
+                clearInterval(countdownTimer);
+                document.querySelectorAll('.countdown-item').forEach(item => {
+                    item.innerHTML = '<div class="text-2xl">🎉 Eventet er i gang! 🎉</div>';
+                });
+            }
+        }
+        const countdownTimer = setInterval(updateCountdown, 1000);
+        updateCountdown();
+        // Initialize Feather Icons
+        feather.replace();
+    </script>
+</body>
 </html>