Spaces:

XZVR
/

code-whisperer-explainer

Running

App Files Files Community

XZVR commited on Oct 17, 2025

Commit

c8fb95b

verified ·

1 Parent(s): 22e41b2

what does it do

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
 title: Code Whisperer Explainer
-emoji: 👁
-colorFrom: pink
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Code Whisperer Explainer
+colorFrom: blue
+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,138 @@
-<!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>Code Whisperer Explainer</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <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.waves.min.js"></script>
+    <style>
+        .gradient-text {
+            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .code-block {
+            background: rgba(30, 41, 59, 0.8);
+            backdrop-filter: blur(10px);
+        }
+    </style>
+</head>
+<body class="min-h-screen bg-slate-900 text-white">
+    <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
+    <header class="py-6 px-4 sm:px-6 lg:px-8">
+        <div class="max-w-7xl mx-auto flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i data-feather="code" class="w-8 h-8 text-indigo-400"></i>
+                <h1 class="text-2xl font-bold gradient-text">Code Whisperer</h1>
+            </div>
+            <nav>
+                <ul class="flex space-x-6">
+                    <li><a href="#" class="hover:text-indigo-300 transition">Home</a></li>
+                    <li><a href="#" class="hover:text-indigo-300 transition">Features</a></li>
+                    <li><a href="#" class="hover:text-indigo-300 transition">About</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <section class="text-center mb-16">
+            <h2 class="text-4xl md:text-5xl font-bold mb-6 gradient-text">What Does It Do?</h2>
+            <p class="text-xl text-slate-300 max-w-3xl mx-auto">
+                I craft beautiful, responsive websites with cutting-edge UI/UX design using only HTML, CSS, and JavaScript.
+            </p>
+        </section>
+        <div class="grid md:grid-cols-3 gap-8">
+            <div class="bg-slate-800/50 rounded-xl p-6 backdrop-blur-sm border border-slate-700/50 hover:border-indigo-400/50 transition">
+                <div class="w-12 h-12 bg-indigo-500/20 rounded-lg flex items-center justify-center mb-4">
+                    <i data-feather="layout" class="w-6 h-6 text-indigo-400"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-2">Stunning UI Design</h3>
+                <p class="text-slate-300">I create visually appealing interfaces with attention to detail and modern design principles.</p>
+            </div>
+            <div class="bg-slate-800/50 rounded-xl p-6 backdrop-blur-sm border border-slate-700/50 hover:border-indigo-400/50 transition">
+                <div class="w-12 h-12 bg-indigo-500/20 rounded-lg flex items-center justify-center mb-4">
+                    <i data-feather="smartphone" class="w-6 h-6 text-indigo-400"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-2">Fully Responsive</h3>
+                <p class="text-slate-300">Every website I build works perfectly on all devices from mobile to desktop.</p>
+            </div>
+            <div class="bg-slate-800/50 rounded-xl p-6 backdrop-blur-sm border border-slate-700/50 hover:border-indigo-400/50 transition">
+                <div class="w-12 h-12 bg-indigo-500/20 rounded-lg flex items-center justify-center mb-4">
+                    <i data-feather="zap" class="w-6 h-6 text-indigo-400"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-2">Modern Tech Stack</h3>
+                <p class="text-slate-300">I use TailwindCSS, Feather Icons, and Vanta.js for interactive, animated experiences.</p>
+            </div>
+        </div>
+        <section class="mt-20">
+            <div class="code-block rounded-xl p-6 overflow-hidden">
+                <div class="flex items-center mb-4">
+                    <div class="flex space-x-2 mr-4">
+                        <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                        <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                        <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                    </div>
+                    <span class="text-sm text-slate-400">example.html</span>
+                </div>
+                <pre class="text-slate-200 font-mono text-sm overflow-x-auto"><code>&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
+    &lt;title&gt;Modern Website&lt;/title&gt;
+    &lt;script src="https://cdn.tailwindcss.com"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body class="min-h-screen bg-gradient-to-br from-indigo-900 to-purple-800"&gt;
+    &lt;h1 class="text-4xl font-bold text-center text-white py-20"&gt;
+        Hello Beautiful World!
+    &lt;/h1&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+            </div>
+        </section>
+    </main>
+    <footer class="py-8 px-4 border-t border-slate-800 mt-12">
+        <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center">
+            <p class="text-slate-400 mb-4 md:mb-0">© 2023 Code Whisperer. All magic reserved.</p>
+            <div class="flex space-x-4">
+                <a href="#" class="text-slate-400 hover:text-indigo-400 transition"><i data-feather="github"></i></a>
+                <a href="#" class="text-slate-400 hover:text-indigo-400 transition"><i data-feather="twitter"></i></a>
+                <a href="#" class="text-slate-400 hover:text-indigo-400 transition"><i data-feather="linkedin"></i></a>
+            </div>
+        </div>
+    </footer>
+    <script>
+        VANTA.WAVES({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3b82f6,
+            shininess: 35.00,
+            waveHeight: 15.00,
+            waveSpeed: 0.85,
+            zoom: 0.85
+        })
+    </script>
+    <script>
+        feather.replace();
+    </script>
+</body>
 </html>