Hugging Face's logo

Spaces:
Mingsong07
/
vibecoder-flowstate
Running

App Files Community
vibecoder-flowstate
File size: 6,579 Bytes 
42112b9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2f6620c
 
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
 
<!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>