bạn biết về mã hóa kh

README.md

@@ -1,10 +1,14 @@
 ---
-title: Code Wizard S Wonderland
-emoji: 😻
-colorFrom: indigo
-colorTo: red
+title: Code Wizard's Wonderland 🧙‍♂️✨
+colorFrom: green
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).
+      

components/code-editor.js

@@ -0,0 +1,88 @@
+class CodeEditor extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          margin: 2rem 0;
+        }
+        .editor-container {
+          border-radius: 0.5rem;
+          overflow: hidden;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+        .editor-header {
+          background: #2d3748;
+          padding: 0.5rem 1rem;
+          display: flex;
+          align-items: center;
+          color: white;
+        }
+        .editor-header-title {
+          font-family: 'Inter', sans-serif;
+          font-size: 0.875rem;
+          font-weight: 500;
+        }
+        .editor-body {
+          background: #1a202c;
+          padding: 1rem;
+          font-family: 'Fira Code', monospace;
+          color: #e2e8f0;
+          min-height: 200px;
+          max-height: 400px;
+          overflow-y: auto;
+        }
+        .line-numbers {
+          color: #718096;
+          user-select: none;
+          margin-right: 1rem;
+        }
+        .code-line {
+          display: flex;
+          margin-bottom: 0.5rem;
+        }
+        .keyword {
+          color: #f687b3;
+        }
+        .string {
+          color: #68d391;
+        }
+        .comment {
+          color: #718096;
+          font-style: italic;
+        }
+        .number {
+          color: #f6ad55;
+        }
+        .function {
+          color: #63b3ed;
+        }
+      </style>
+      <div class="editor-container">
+        <div class="editor-header">
+          <span class="editor-header-title">code.js</span>
+        </div>
+        <div class="editor-body">
+          <div class="code-line"><span class="line-numbers">1</span> <span class="keyword">const</span> <span class="function">encodeMessage</span> = (<span class="keyword">message</span>) => {</div>
+          <div class="code-line"><span class="line-numbers">2</span>   <span class="keyword">return</span> <span class="function">btoa</span>(<span class="function">encodeURIComponent</span>(<span class="keyword">message</span>));</div>
+          <div class="code-line"><span class="line-numbers">3</span> };</div>
+          <div class="code-line"><span class="line-numbers">4</span>&nbsp;</div>
+          <div class="code-line"><span class="line-numbers">5</span> <span class="keyword">const</span> <span class="function">decodeMessage</span> = (<span class="keyword">encoded</span>) => {</div>
+          <div class="code-line"><span class="line-numbers">6</span>   <span class="keyword">try</span> {</div>
+          <div class="code-line"><span class="line-numbers">7</span>     <span class="keyword">return</span> <span class="function">decodeURIComponent</span>(<span class="function">atob</span>(<span class="keyword">encoded</span>));</div>
+          <div class="code-line"><span class="line-numbers">8</span>   } <span class="keyword">catch</span> (<span class="keyword">e</span>) {</div>
+          <div class="code-line"><span class="line-numbers">9</span>     <span class="keyword">return</span> <span class="string">"Invalid encoding"</span>;</div>
+          <div class="code-line"><span class="line-numbers">10</span>   }</div>
+          <div class="code-line"><span class="line-numbers">11</span> };</div>
+          <div class="code-line"><span class="line-numbers">12</span>&nbsp;</div>
+          <div class="code-line"><span class="line-numbers">13</span> <span class="comment">// Example usage:</span></div>
+          <div class="code-line"><span class="line-numbers">14</span> <span class="keyword">const</span> <span class="keyword">secret</span> = <span class="string">"Hello World!"</span>;</div>
+          <div class="code-line"><span class="line-numbers">15</span> <span class="keyword">const</span> <span class="keyword">encoded</span> = <span class="function">encodeMessage</span>(<span class="keyword">secret</span>);</div>
+          <div class="code-line"><span class="line-numbers">16</span> <span class="keyword">const</span> <span class="keyword">decoded</span> = <span class="function">decodeMessage</span>(<span class="keyword">encoded</span>);</div>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define('code-editor', CodeEditor);

components/footer.js

@@ -0,0 +1,118 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #1f2937;
+          color: white;
+          padding: 4rem 2rem;
+        }
+        .footer-content {
+          max-width: 1200px;
+          margin: 0 auto;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 2rem;
+        }
+        .footer-section h3 {
+          font-size: 1.25rem;
+          font-weight: 600;
+          margin-bottom: 1.5rem;
+          color: #e5e7eb;
+        }
+        .footer-section ul {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+        .footer-section li {
+          margin-bottom: 0.75rem;
+        }
+        .footer-section a {
+          color: #9ca3af;
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        .footer-section a:hover {
+          color: white;
+        }
+        .social-links {
+          display: flex;
+          gap: 1rem;
+          margin-top: 1.5rem;
+        }
+        .social-links a {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 36px;
+          height: 36px;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.1);
+          transition: all 0.2s;
+        }
+        .social-links a:hover {
+          background: rgba(255, 255, 255, 0.2);
+          transform: translateY(-2px);
+        }
+        .footer-bottom {
+          text-align: center;
+          padding-top: 2rem;
+          margin-top: 2rem;
+          border-top: 1px solid rgba(255, 255, 255, 0.1);
+          color: #9ca3af;
+          font-size: 0.875rem;
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div class="footer-section">
+            <h3>Next.js</h3>
+            <p>The React Framework for Production</p>
+            <div class="social-links">
+              <a href="https://twitter.com/vercel" target="_blank" aria-label="Twitter">
+                <i data-feather="twitter"></i>
+              </a>
+              <a href="https://github.com/vercel/next.js" target="_blank" aria-label="GitHub">
+                <i data-feather="github"></i>
+              </a>
+              <a href="https://discord.com/invite/nextjs" target="_blank" aria-label="Discord">
+                <i data-feather="message-circle"></i>
+              </a>
+            </div>
+          </div>
+          <div class="footer-section">
+            <h3>Resources</h3>
+            <ul>
+              <li><a href="https://nextjs.org/docs" target="_blank">Documentation</a></li>
+              <li><a href="https://nextjs.org/learn" target="_blank">Learn</a></li>
+              <li><a href="https://github.com/vercel/next.js" target="_blank">GitHub</a></li>
+              <li><a href="https://nextjs.org/showcase" target="_blank">Showcase</a></li>
+            </ul>
+          </div>
+          <div class="footer-section">
+            <h3>Company</h3>
+            <ul>
+              <li><a href="https://vercel.com" target="_blank">Vercel</a></li>
+              <li><a href="https://vercel.com/blog" target="_blank">Blog</a></li>
+              <li><a href="https://nextjs.org/contact" target="_blank">Contact</a></li>
+              <li><a href="https://vercel.com/oss" target="_blank">Open Source</a></li>
+            </ul>
+          </div>
+          <div class="footer-section">
+            <h3>Legal</h3>
+            <ul>
+              <li><a href="https://vercel.com/legal/privacy-policy" target="_blank">Privacy Policy</a></li>
+              <li><a href="https://vercel.com/legal/terms" target="_blank">Terms of Service</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="footer-bottom">
+          <p>&copy; ${new Date().getFullYear()} Next.js Wonderland. All rights reserved.</p>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,79 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: rgba(255, 255, 255, 0.9);
+          backdrop-filter: blur(10px);
+          padding: 1.5rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 50;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+        .logo {
+          font-weight: 700;
+          font-size: 1.5rem;
+          background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+        }
+        ul {
+          display: flex;
+          gap: 1.5rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          align-items: center;
+        }
+        a {
+          text-decoration: none;
+          color: #4b5563;
+          font-weight: 500;
+          transition: color 0.2s;
+        }
+        a:hover {
+          color: #7c3aed;
+        }
+        .cta-button {
+          background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
+          color: white;
+          padding: 0.5rem 1.25rem;
+          border-radius: 9999px;
+          transition: all 0.2s;
+        }
+        .cta-button:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.3);
+          color: white;
+        }
+        @media (max-width: 768px) {
+          ul {
+            display: none;
+          }
+          .mobile-menu-button {
+            display: block;
+          }
+        }
+      </style>
+      <nav>
+        <a href="/" class="logo">Next.js Wonderland</a>
+        <ul>
+          <li><a href="#features">Features</a></li>
+          <li><a href="#get-started">Get Started</a></li>
+          <li><a href="https://nextjs.org/docs" target="_blank">Docs</a></li>
+          <li><a href="https://github.com/vercel/next.js" target="_blank">GitHub</a></li>
+          <li><a href="https://nextjs.org/learn" target="_blank" class="cta-button">Learn</a></li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,115 @@
-<!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>Next.js Wonderland</title>
+    <link rel="stylesheet" href="style.css">
+    <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.net.min.js"></script>
+</head>
+<body>
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-12">
+        <div id="vanta-background" class="absolute top-0 left-0 w-full h-full z-0"></div>
+        <div class="relative z-10">
+            <section class="hero min-h-screen flex items-center justify-center">
+                <div class="text-center">
+                    <h1 class="text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
+                        Welcome to Next.js Wonderland
+                    </h1>
+                    <p class="text-xl mb-8 max-w-2xl mx-auto">
+                        A magical place where React meets server-side rendering and static site generation.
+                    </p>
+                    <div class="flex justify-center gap-4">
+                        <a href="#features" class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-full font-medium shadow-lg hover:shadow-xl transition-all duration-300">
+                            Explore Features
+                        </a>
+                        <a href="#get-started" class="px-6 py-3 border-2 border-purple-500 text-purple-500 rounded-full font-medium hover:bg-purple-50 transition-all duration-300">
+                            Get Started
+                        </a>
+                    </div>
+                </div>
+            </section>
+
+            <section id="features" class="py-20">
+                <h2 class="text-4xl font-bold text-center mb-16">Why Choose Next.js?</h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                    <div class="feature-card p-8 rounded-xl bg-white bg-opacity-90 backdrop-blur-sm border border-gray-200 hover:border-purple-300 transition-all duration-300">
+                        <div class="w-16 h-16 flex items-center justify-center bg-purple-100 rounded-full mb-6">
+                            <i data-feather="zap" class="text-purple-600"></i>
+                        </div>
+                        <h3 class="text-2xl font-semibold mb-3">Blazing Fast</h3>
+                        <p class="text-gray-600">Automatic static optimization and server-side rendering for lightning-fast performance.</p>
+                    </div>
+                    <div class="feature-card p-8 rounded-xl bg-white bg-opacity-90 backdrop-blur-sm border border-gray-200 hover:border-purple-300 transition-all duration-300">
+                        <div class="w-16 h-16 flex items-center justify-center bg-purple-100 rounded-full mb-6">
+                            <i data-feather="code" class="text-purple-600"></i>
+                        </div>
+                        <h3 class="text-2xl font-semibold mb-3">Developer Experience</h3>
+                        <p class="text-gray-600">File-system routing, API routes, and built-in CSS/Sass support make development a breeze.</p>
+                    </div>
+                    <div class="feature-card p-8 rounded-xl bg-white bg-opacity-90 backdrop-blur-sm border border-gray-200 hover:border-purple-300 transition-all duration-300">
+                        <div class="w-16 h-16 flex items-center justify-center bg-purple-100 rounded-full mb-6">
+                            <i data-feather="globe" class="text-purple-600"></i>
+                        </div>
+                        <h3 class="text-2xl font-semibold mb-3">Hybrid Rendering</h3>
+                        <p class="text-gray-600">Mix static generation, server-side rendering, and client-side rendering in a single app.</p>
+                    </div>
+                </div>
+            </section>
+            <section id="code-examples" class="py-20">
+                <h2 class="text-4xl font-bold text-center mb-16">Encoding Examples</h2>
+                <div class="max-w-4xl mx-auto">
+                    <code-editor></code-editor>
+                    <div class="mt-8 bg-white bg-opacity-90 backdrop-blur-sm rounded-xl p-6">
+                        <h3 class="text-2xl font-semibold mb-4">Try it yourself:</h3>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Encode a message:</label>
+                                <input type="text" id="encode-input" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="Type a message...">
+                                <button onclick="encodeMessage()" class="mt-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">Encode</button>
+                                <div id="encode-output" class="mt-2 p-3 bg-gray-100 rounded-lg font-mono text-sm"></div>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Decode a message:</label>
+                                <input type="text" id="decode-input" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="Paste encoded message...">
+                                <button onclick="decodeMessage()" class="mt-2 px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition">Decode</button>
+                                <div id="decode-output" class="mt-2 p-3 bg-gray-100 rounded-lg font-mono text-sm"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section id="get-started" class="py-20">
+<div class="bg-gradient-to-r from-purple-500 to-pink-500 rounded-2xl p-10 text-white">
+                    <div class="max-w-4xl mx-auto">
+                        <h2 class="text-3xl font-bold mb-6">Ready to Build Something Amazing?</h2>
+                        <p class="text-xl mb-8">Get started with Next.js in seconds with our interactive tutorial.</p>
+                        <div class="bg-gray-900 rounded-xl p-6 mb-8 overflow-x-auto">
+                            <pre class="text-green-400"><code>npx create-next-app@latest</code></pre>
+                        </div>
+                        <a href="https://nextjs.org/docs" target="_blank" class="inline-block px-8 py-3 bg-white text-purple-600 rounded-full font-bold hover:bg-gray-100 transition-all duration-300">
+                            Explore Documentation
+                        </a>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/code-editor.js"></script>
+<script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,44 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize Vanta.js background
+    VANTA.NET({
+        el: "#vanta-background",
+        mouseControls: true,
+        touchControls: true,
+        gyroControls: false,
+        minHeight: 200.00,
+        minWidth: 200.00,
+        scale: 1.00,
+        scaleMobile: 1.00,
+        color: 0x7c3aed,
+        backgroundColor: 0xf9fafb,
+        points: 12.00,
+        maxDistance: 22.00,
+        spacing: 18.00
+    });
+    // Encoding/Decoding functions
+    window.encodeMessage = function() {
+      const input = document.getElementById('encode-input').value;
+      const encoded = btoa(encodeURIComponent(input));
+      document.getElementById('encode-output').textContent = encoded;
+    };
+
+    window.decodeMessage = function() {
+      const input = document.getElementById('decode-input').value;
+      try {
+        const decoded = decodeURIComponent(atob(input));
+        document.getElementById('decode-output').textContent = decoded;
+      } catch (e) {
+        document.getElementById('decode-output').textContent = "Invalid encoded message";
+      }
+    };
+
+    // Smooth scrolling for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
+});

style.css

@@ -1,28 +1,42 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    background-color: #f9fafb;
+    color: #1f2937;
+    overflow-x: hidden;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px -5px rgba(168, 85, 247, 0.1);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+#vanta-background {
+    position: fixed;
+    z-index: 0;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.hero {
+    min-height: calc(100vh - 80px);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+code {
+    font-family: 'Fira Code', monospace;
+}
+@media (max-width: 768px) {
+    .hero h1 {
+        font-size: 2.5rem;
+    }
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap');
+
+code, pre {
+    font-family: 'Fira Code', monospace;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+#encode-output, #decode-output {
+    min-height: 50px;
+    word-break: break-all;
 }