Spaces:

Mingsong07
/

vibecoder-flowstate

Running

App Files Files Community

Mingsong07 commited on Oct 9

Commit

42112b9

verified ·

1 Parent(s): 2f6620c

什么是vibe coding

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +139 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Vibecoder Flowstate
-emoji: 📈
-colorFrom: red
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: VibeCoder Flowstate
+colorFrom: yellow
+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,140 @@
-<!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>VibeCoder | Flowstate</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <style>
+        .code-bg {
+            background-color: #1a1a2e;
+            color: #e6e6e6;
+            font-family: 'Courier New', monospace;
+        }
+        .glow-text {
+            text-shadow: 0 0 8px rgba(100, 255, 218, 0.8);
+        }
+        .typewriter {
+            border-right: 3px solid #64ffda;
+            white-space: nowrap;
+            overflow: hidden;
+            animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+        }
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: #64ffda }
+        }
+    </style>
+</head>
+<body class="code-bg min-h-screen" id="vanta-bg">
+    <div class="container mx-auto px-4 py-16">
+        <header class="flex flex-col items-center mb-12">
+            <div class="flex items-center space-x-4 mb-6">
+                <i data-feather="code" class="text-emerald-400 w-12 h-12"></i>
+                <h1 class="text-5xl font-bold text-emerald-400 glow-text">VibeCoder</h1>
+            </div>
+            <h2 class="text-xl text-gray-300 mb-2">The ultimate flowstate experience</h2>
+            <div class="w-full max-w-3xl h-1 bg-gradient-to-r from-emerald-400 to-purple-500 rounded-full"></div>
+        </header>
+        <main class="grid md:grid-cols-2 gap-10">
+            <section class="bg-gray-900 bg-opacity-70 rounded-xl p-8 backdrop-blur-sm border border-gray-700">
+                <h3 class="text-2xl text-emerald-400 mb-4 flex items-center">
+                    <i data-feather="zap" class="mr-2"></i> What is Vibe Coding?
+                </h3>
+                <p class="text-gray-300 mb-6 leading-relaxed">
+                    Vibe coding is when you enter that magical flow state where code flows effortlessly from your fingertips. It's that sweet spot where time disappears and you become one with your editor.
+                </p>
+                <div class="typewriter text-gray-300 text-lg mb-6">while(inTheZone) { createMagic(); }</div>
+                <div class="flex flex-wrap gap-3">
+                    <span class="px-3 py-1 bg-emerald-900 bg-opacity-50 rounded-full text-emerald-300">#FlowState</span>
+                    <span class="px-3 py-1 bg-purple-900 bg-opacity-50 rounded-full text-purple-300">#DeveloperZen</span>
+                    <span class="px-3 py-1 bg-blue-900 bg-opacity-50 rounded-full text-blue-300">#CodeHappiness</span>
+                </div>
+            </section>
+            <section class="bg-gray-900 bg-opacity-70 rounded-xl p-8 backdrop-blur-sm border border-gray-700">
+                <h3 class="text-2xl text-purple-400 mb-4 flex items-center">
+                    <i data-feather="activity" class="mr-2"></i> Enter the Vibe
+                </h3>
+                <ul class="space-y-4">
+                    <li class="flex items-start">
+                        <i data-feather="check-circle" class="text-emerald-400 mr-3 mt-1"></i>
+                        <span class="text-gray-300">Perfect playlist matching your coding tempo</span>
+                    </li>
+                    <li class="flex items-start">
+                        <i data-feather="check-circle" class="text-emerald-400 mr-3 mt-1"></i>
+                        <span class="text-gray-300">Ambient visualizations synced to your typing</span>
+                    </li>
+                    <li class="flex items-start">
+                        <i data-feather="check-circle" class="text-emerald-400 mr-3 mt-1"></i>
+                        <span class="text-gray-300">Distraction-free environment with focus timers</span>
+                    </li>
+                    <li class="flex items-start">
+                        <i data-feather="check-circle" class="text-emerald-400 mr-3 mt-1"></i>
+                        <span class="text-gray-300">Community of fellow vibe coders</span>
+                    </li>
+                </ul>
+                <button class="mt-6 px-6 py-3 bg-gradient-to-r from-emerald-500 to-purple-600 rounded-lg text-white font-medium hover:opacity-90 transition flex items-center">
+                    <i data-feather="play" class="mr-2"></i> Start Coding Session
+                </button>
+            </section>
+        </main>
+        <div class="mt-16 text-center">
+            <p class="text-gray-400 mb-4">Join thousands of developers in the ultimate coding flow</p>
+            <div class="flex justify-center space-x-4">
+                <a href="#" class="text-gray-400 hover:text-emerald-400 transition">
+                    <i data-feather="github" class="w-6 h-6"></i>
+                </a>
+                <a href="#" class="text-gray-400 hover:text-purple-400 transition">
+                    <i data-feather="twitter" class="w-6 h-6"></i>
+                </a>
+                <a href="#" class="text-gray-400 hover:text-blue-400 transition">
+                    <i data-feather="discord" class="w-6 h-6"></i>
+                </a>
+            </div>
+        </div>
+    </div>
+    <script>
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x64ffda,
+            backgroundColor: 0x1a1a2e,
+            size: 0.8
+        })
+    </script>
+    <script>
+        feather.replace();
+        // Animate elements on scroll
+        document.addEventListener('DOMContentLoaded', () => {
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('animate-fadeIn');
+                    }
+                });
+            }, { threshold: 0.1 });
+            document.querySelectorAll('section').forEach(section => {
+                observer.observe(section);
+            });
+        });
+    </script>
+</body>
 </html>