Upload 19 files

.env

@@ -0,0 +1,5 @@
+HYPERBEAM_API_KEY=sk_live_vDMqARrgzFyPSbErH0E9Q9RV6__2CeLr3cGQPeT8igA
+NHOST_BACKEND_URL=https://sypnrudbonrqtgacejcc.ap-south-1.nhost.run
+NHOST_SUBDOMAIN=sypnrudbonrqtgacejcc
+NHOST_REGION=ap-south-1
+PORT=3000

app.js

@@ -0,0 +1,270 @@
+class SakuraCyberDashboard {
+    constructor() {
+      this.consoleOutput = document.getElementById('console-output');
+      this.themeToggle = document.getElementById('theme-toggle');
+      this.currentTheme = 'sakura'; // Default theme
+      this.loadTheme();
+      this.themeToggle.addEventListener('click', () => this.toggleTheme());
+    }
+  
+    log(message) {
+      const timestamp = new Date().toLocaleTimeString();
+      this.consoleOutput.innerHTML += `[${timestamp}] ${this.glitchText(message)}\n`;
+      this.consoleOutput.scrollTop = this.consoleOutput.scrollHeight;
+    }
+  
+    glitchText(text) {
+      // Japanese-inspired glitch effect
+      const glitchChars = ['・', '◆', '◇', '■', '□'];
+      return text.split('').map(char =>
+        Math.random() > 0.9 ? glitchChars[Math.floor(Math.random() * glitchChars.length)] : char
+      ).join('');
+    }
+  
+    async launchVirtualBrowser() {
+      this.log('Initializing Virtual Browser...');
+      try {
+        // Check if user is signed in
+        const token = localStorage.getItem('authToken');
+        if (!token) {
+          // If not signed in, show sign in modal
+          this.showSignInModal();
+          return;
+        }
+  
+        // User is signed in, open virtual browser in new window
+        const width = Math.min(1200, window.innerWidth * 0.9);
+        const height = width * (9/16); // 16:9 aspect ratio
+        const left = (window.innerWidth - width) / 2;
+        const top = (window.innerHeight - height) / 2;
+  
+        window.open('vbrowser.html', 'Virtual Browser',
+          `width=${width},height=${height},left=${left},top=${top}`);
+  
+      } catch (error) {
+        this.log(`Browser Launch Error: ${error.message}`);
+      }
+    }
+  
+    async launchLiveStreamer() {
+      this.log('Connecting to Live Stream...');
+      try {
+        const response = await fetch('/launch/live-streamer', { method: 'POST' });
+        const data = await response.json();
+        this.log(`Live Stream Established: ${data.status}`);
+      } catch (error) {
+        this.log(`Stream Connection Error: ${error.message}`);
+      }
+    }
+  
+    async launchLiveLogs() {
+      this.log('Starting Log Trace Algorithm...');
+      try {
+        const response = await fetch('/launch/live-logs', { method: 'POST' });
+        const data = await response.json();
+        this.log(`Log Trace Ready: ${data.status}`);
+      } catch (error) {
+        this.log(`Trace Protocol Failure: ${error.message}`);
+      }
+    }
+  
+    toggleTheme() {
+      this.currentTheme = this.currentTheme === 'sakura' ? 'program' : 'sakura';
+      this.applyTheme();
+      localStorage.setItem('theme', this.currentTheme);
+    }
+  
+    loadTheme() {
+      const storedTheme = localStorage.getItem('theme');
+      if (storedTheme) {
+        this.currentTheme = storedTheme;
+      }
+      this.applyTheme();
+    }
+  
+    applyTheme() {
+      const body = document.body;
+      const root = document.documentElement;
+      if (this.currentTheme === 'sakura') {
+        // Sakura Theme
+        root.style.setProperty('--background-primary', 'rgba(255, 255, 255, 0.1)');
+        root.style.setProperty('--background-secondary', 'rgba(255, 255, 255, 0.05)');
+        root.style.setProperty('--text-primary', '#f0f0f0');
+        root.style.setProperty('--text-secondary', '#c0c0c0');
+        root.style.setProperty('--accent-color', '#ff6b6b');
+        root.style.setProperty('--border-color', 'rgba(255, 255, 255, 0.2)');
+        body.style.background = 'linear-gradient(135deg, #1a1a2e, #16213e)';
+        this.themeToggle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>';
+  
+        // Update card icons
+        this.updateCardIcons('sakura');
+      } else if (this.currentTheme === 'program') {
+        // Program Theme
+        root.style.setProperty('--background-primary', 'rgba(255, 255, 255, 0.2)');
+        root.style.setProperty('--background-secondary', 'rgba(255, 255, 255, 0.2)');
+        root.style.setProperty('--text-primary', '#fff');
+        root.style.setProperty('--text-secondary', '#fff');
+        root.style.setProperty('--accent-color', '#5D3FD3');
+        root.style.setProperty('--border-color', 'rgba(255, 255, 255, 0.3)');
+        body.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
+        this.themeToggle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>';
+  
+        // Update card icons
+        this.updateCardIcons('program');
+      }
+    }
+  
+    updateCardIcons(theme) {
+      const virtualBrowserIcon = document.querySelector('.virtual-browser-card .card-icon');
+      const liveStreamerIcon = document.querySelector('.live-streamer-card .card-icon');
+      const liveLogsIcon = document.querySelector('.live-logs-card .card-icon');
+  
+      if (theme === 'sakura') {
+        virtualBrowserIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon">
+        <path d="M4 8h16M4 16h16M3 12h18"></path>
+      </svg>`;
+        liveStreamerIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon">
+        <path d="M23 7l-7 5 7 5V7z"></path>
+        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
+      </svg>`;
+        liveLogsIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon">
+        <path d="M16 18l6-6-6-6"></path>
+        <path d="M2 12h20"></path>
+      </svg>`;
+      } else if (theme === 'program') {
+        virtualBrowserIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon">
+        <path d="M4 8h16M4 16h16M3 12h18"></path>
+      </svg>`;
+        liveStreamerIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon">
+        <path d="M23 7l-7 5 7 5V7z"></path>
+        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
+      </svg>`;
+        liveLogsIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon">
+        <path d="M16 18l6-6-6-6"></path>
+        <path d="M2 12h20"></path>
+      </svg>`;
+      }
+    }
+  
+    showSignInModal() {
+      const modal = document.createElement('div');
+      modal.innerHTML = `
+        <div id="signInModal" style="
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: rgba(0,0,0,0.8);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 1000;
+        ">
+          <div style="
+            background: var(--background-primary);
+            padding: 2rem;
+            border-radius: 15px;
+            border: 1px solid var(--border-color);
+            width: 90%;
+            max-width: 400px;
+          ">
+            <h2 style="margin-bottom: 1rem; color: var(--text-primary)">Sign In</h2>
+            <input type="email" id="email" placeholder="Email" style="
+              width: 100%;
+              padding: 0.5rem;
+              margin-bottom: 1rem;
+              border: 1px solid var(--border-color);
+              background: var(--background-secondary);
+              color: var(--text-primary);
+              border-radius: 5px;
+            ">
+            <input type="password" id="password" placeholder="Password" style="
+              width: 100%;
+              padding: 0.5rem;
+              margin-bottom: 1rem;
+              border: 1px solid var(--border-color);
+              background: var(--background-secondary);
+              color: var(--text-primary);
+              border-radius: 5px;
+            ">
+            <div style="display: flex; justify-content: space-between;">
+              <button id="signInBtn" class="glass-btn">Sign In</button>
+              <button id="signUpBtn" class="glass-btn">Sign Up</button>
+            </div>
+            <button id="closeModal" style="
+              position: absolute;
+              top: 1rem;
+              right: 1rem;
+              background: none;
+              border: none;
+              color: var(--text-primary);
+              cursor: pointer;
+              font-size: 1.5rem;
+            ">×</button>
+          </div>
+        </div>
+      `;
+  
+      document.body.appendChild(modal);
+  
+      const closeModal = () => {
+        document.body.removeChild(modal);
+      };
+  
+      document.getElementById('closeModal').onclick = closeModal;
+      document.getElementById('signInBtn').onclick = async () => {
+        const email = document.getElementById('email').value;
+        const password = document.getElementById('password').value;
+  
+        try {
+          const response = await fetch('/signin', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({email, password})
+          });
+  
+          const data = await response.json();
+          if (data.token) {
+            localStorage.setItem('authToken', data.token);
+            closeModal();
+            this.launchVirtualBrowser();
+          } else {
+            alert(data.error || 'Sign in failed');
+          }
+        } catch (error) {
+          alert('Sign in failed: ' + error.message);
+        }
+      };
+  
+      document.getElementById('signUpBtn').onclick = async () => {
+        const email = document.getElementById('email').value;
+        const password = document.getElementById('password').value;
+  
+        try {
+          const response = await fetch('/signup', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({email, password})
+          });
+  
+          const data = await response.json();
+          if (response.ok) {
+            alert('Account created! Please sign in.');
+          } else {
+            alert(data.error || 'Sign up failed');
+          }
+        } catch (error) {
+          alert('Sign up failed: ' + error.message);
+        }
+      };
+    }
+  }
+  
+  // Initialize the dashboard
+  const dashboard = new SakuraCyberDashboard();
+  
+  // Attach global window functions
+  window.launchVirtualBrowser = () => dashboard.launchVirtualBrowser();
+  window.launchLiveStreamer = () => dashboard.launchLiveStreamer();
+  window.launchLiveLogs = () => dashboard.launchLiveLogs();

dashboard-styles.css

@@ -0,0 +1,180 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');
+
+:root {
+  --background-primary: rgba(255, 255, 255, 0.1);
+  --background-secondary: rgba(255, 255, 255, 0.05);
+  --text-primary: #f0f0f0;
+  --text-secondary: #c0c0c0;
+  --accent-color: #ff6b6b;
+  --border-color: rgba(255, 255, 255, 0.2);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Noto Sans JP', sans-serif;
+  background: linear-gradient(135deg, #1a1a2e, #16213e);
+  color: var(--text-primary);
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  perspective: 1000px;
+  overflow: hidden;
+}
+
+.cyber-dashboard {
+  width: 95vw;
+  max-width: 1200px;
+  background: var(--background-primary);
+  backdrop-filter: blur(15px);
+  border-radius: 20px;
+  border: 1px solid var(--border-color);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+}
+
+.dashboard-header {
+  background: rgba(255, 255, 255, 0.05);
+  padding: 20px;
+  text-align: center;
+}
+
+.header-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.terminal-title {
+  font-size: 2.5rem;
+  color: var(--accent-color);
+  font-weight: 700;
+  letter-spacing: 2px;
+}
+
+.terminal-subtitle {
+  font-size: 1rem;
+  color: var(--text-secondary);
+  margin-top: 10px;
+}
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  padding: 30px;
+}
+
+.dashboard-card {
+  position: relative;
+  background: var(--background-secondary);
+  border-radius: 15px;
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+  transition: transform 0.3s ease;
+}
+
+.dashboard-card:hover {
+  transform: scale(1.05) rotateX(5deg);
+}
+
+.card-glass-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(5px);
+  opacity: 0.3;
+  border-radius: inherit;
+}
+
+.card-content {
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  padding: 30px 15px;
+}
+
+.card-icon {
+  width: 100px;
+  height: 100px;
+  margin: 0 auto 20px;
+  color: var(--accent-color);
+}
+
+.card-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.dashboard-card h2 {
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+  color: var(--text-primary);
+  letter-spacing: 2px;
+}
+
+.glass-btn {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  padding: 10px 25px;
+  font-family: 'Noto Sans JP', sans-serif;
+  font-weight: bold;
+  letter-spacing: 2px;
+  cursor: pointer;
+  border-radius: 5px;
+  backdrop-filter: blur(5px);
+  transition: all 0.3s ease;
+}
+
+.glass-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+}
+
+.dashboard-console {
+  background: rgba(0, 0, 0, 0.3);
+  color: var(--text-primary);
+  font-family: 'Courier New', monospace;
+  padding: 20px;
+  max-height: 300px;
+  overflow-y: auto;
+  border-top: 1px solid var(--border-color);
+  white-space: pre-wrap;
+}
+
+.theme-toggle {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--border-color);
+  padding: 10px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(5px);
+  z-index: 2;
+}
+
+.theme-toggle:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.theme-icon {
+  width: 20px;
+  height: 20px;
+  color: var(--text-primary);
+}

dashboard.html

@@ -0,0 +1,68 @@
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sakura Cyber Terminal</title>
+  <link rel="stylesheet" href="dashboard-styles.css">
+</head>
+<body>
+  <div class="cyber-dashboard">
+     <button id="theme-toggle" class="theme-toggle">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+    </button>
+    <header class="dashboard-header">
+      <div class="header-content">
+        <h1 class="terminal-title">桜ネットワーク</h1>
+        <p class="terminal-subtitle">Sakura Network Terminal</p>
+      </div>
+    </header>
+    
+    <main class="dashboard-grid">
+      <div class="dashboard-card virtual-browser-card">
+        <div class="card-glass-overlay"></div>
+        <div class="card-content">
+          <div class="card-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M4 5h16v14H4V5zm2 2v10h12V7H6zm3 3a1 1 0 112 0 1 1 0 01-2 0zm3 0a1 1 0 112 0 1 1 0 01-2 0zm3 0a1 1 0 112 0 1 1 0 01-2 0z"/>
+            </svg>
+          </div>
+          <h2>Virtual Browser</h2>
+          <button onclick="launchVirtualBrowser()" class="glass-btn">Launch</button>
+        </div>
+      </div>
+      
+      <div class="dashboard-card live-streamer-card">
+        <div class="card-glass-overlay"></div>
+        <div class="card-content">
+          <div class="card-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M17 9.2l5-3.2v12l-5-3.2V19H3V5h14v4.2zm-2-1.2H5v10h10V8zM2 4v16h16V4H2zm19 2.2L17 9v6l4 2.8V6.2z"/>
+            </svg>
+          </div>
+          <h2>Live Streamer</h2>
+          <button onclick="launchLiveStreamer()" class="glass-btn">Start</button>
+        </div>
+      </div>
+      
+      <div class="dashboard-card live-logs-card">
+        <div class="card-glass-overlay"></div>
+        <div class="card-content">
+          <div class="card-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z"/>
+            </svg>
+          </div>
+          <h2>Live Logs Bot</h2>
+          <button onclick="launchLiveLogs()" class="glass-btn">Trace</button>
+        </div>
+      </div>
+    </main>
+    
+    <div id="console-output" class="dashboard-console"></div>
+  </div>
+  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>

index.html

@@ -0,0 +1,508 @@
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kuro Browser - Secure Virtual Browsing</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <nav class="navbar">
+    <div class="container">
+      <a href="#" class="logo">Kuro Browser</a>
+      <div class="nav-links">
+        <a href="#features">Features</a>
+        <a href="#security">Security</a>
+        <a href="#technology">Technology</a>
+        <a href="#launch-plans">Launch Plans</a>
+        <a href="#faq">FAQ</a>
+        <a href="#brainstorming">Brainstorming</a>
+        <a href="signin.html" class="sign-in-link">Sign In</a>
+      </div>
+    </div>
+  </nav>
+
+  <section class="hero">
+     <div class="animated-stars"></div>
+    <div class="hero-content container">
+        <div class="mission-badge">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+               <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+           </svg>
+             Your Secure Gateway
+      </div>
+      <h1>Experience the Web, Reimagined</h1>
+      <p>Aetheria offers a secure, private, and personalized virtual browser accessible from any device. Protect your data and browse with complete peace of mind.</p>
+      <a href="#" class="cta-button">Start Browsing Securely
+         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M5 12h14M12 5l7 7-7 7"/>
+        </svg>
+      </a>
+    </div>
+  </section>
+
+  <section class="features section" id="features">
+    <div class="container">
+      <div class="feature-card">
+        <div class="feature-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+           </svg>
+        </div>
+        <h3>Personalized Browsing</h3>
+        <p>Customize your browsing environment with themes, extensions, and settings, making it truly yours.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+           </svg>
+        </div>
+        <h3>Cross-Device Access</h3>
+        <p>Access your virtual browser and settings from any device, ensuring a consistent browsing experience.</p>
+      </div>
+       <div class="feature-card">
+            <div class="feature-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
+                  </svg>
+           </div>
+        <h3>Enhanced Privacy</h3>
+       <p>Keep your browsing history and data private with our advanced security features and privacy options.</p>
+      </div>
+          <div class="feature-card">
+            <div class="feature-icon">
+               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
+               </svg>
+           </div>
+        <h3>Secure File Storage</h3>
+        <p>Store your important files securely within Aetheria, accessible from any device, any time.</p>
+        </div>
+         <div class="feature-card">
+             <div class="feature-icon">
+               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M16 17l-4-4-4 4m0-8l4 4 4-4M21 3l-2.8 2.8c-.5.5-1.4.5-2 0L12 5l-3.2 1.8c-.5.5-1.4.5-2 0L3 3"/>
+               </svg>
+           </div>
+         <h3>Real-Time Threat Detection</h3>
+        <p>Our advanced system monitors and prevents threats in real-time, safeguarding your browsing experience.</p>
+        </div>
+           <div class="feature-card">
+                <div class="feature-icon">
+                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
+                        <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h5z"/>
+                  </svg>
+               </div>
+               <h3>Multiple Sessions</h3>
+               <p>Run multiple browsing sessions simultaneously, boosting your productivity and organization.</p>
+            </div>
+    </div>
+  </section>
+    
+ <section class="security section" id="security">
+    <div class="container">
+      <h2>Interactive Exploration of Your Digital World</h2>
+      <p>Dive into a new dimension of control, privacy, and customization. Aetheria is not just a browser, it's your personal digital sanctuary.</p>
+    <div class="interactive-grid">
+      <div class="interactive-item" data-modal="data-encryption">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 15v6m-4-2h8M7 7h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z"/>
+          </svg>
+        <h3>Data Encryption</h3>
+        <p>Explore the advanced encryption protocols that protect your data.</p>
+      </div>
+         <div class="interactive-item" data-modal="anonymous-browsing">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+               <path d="M17.5 17.5a3.5 3.5 0 10-5-5 3.5 3.5 0 005 5z"/>
+                <path d="M2 12s4-8 10-8 10 8 10 8-4 8-10 8-10-8-10-8z"/>
+            </svg>
+        <h3>Anonymous Browsing</h3>
+         <p>Uncover how we mask your IP and prevent tracking.</p>
+       </div>
+      <div class="interactive-item" data-modal="sandboxed-environment">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><path d="M17 7v10M7 7v10"/>
+            </svg>
+        <h3>Sandboxed Environment</h3>
+        <p>Understand how our virtual environment safeguards your system.</p>
+     </div>
+      <div class="interactive-item" data-modal="realtime-threat-detection">
+           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M16 17l-4-4-4 4m0-8l4 4 4-4M21 3l-2.8 2.8c-.5.5-1.4.5-2 0L12 5l-3.2 1.8c-.5.5-1.4.5-2 0L3 3"/>
+         </svg>
+        <h3>Real-time Threat Detection</h3>
+        <p>See how we continuously monitor and prevent security compromises.</p>
+    </div>
+     <div class="interactive-item" data-modal="personalized-themes">
+         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+           <path d="M3 9l9-7 9 7-9 7-9-7zm0 5l9 7 9-7-9-7-9 7z"/>
+         </svg>
+        <h3>Personalized Themes</h3>
+       <p>Explore the array of themes that will allow you to tailor your browsing experience.</p>
+    </div>
+     <div class="interactive-item" data-modal="cross-device-access">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M22 12a10 10 0 0 1-10 10 10 10 0 0 1-10-10 10 10 0 0 1 10-10 10 10 0 0 1 10 10z"/>
+            <path d="M12 12v8"/>
+           <path d="M4 20a8 8 0 0 0 16 0"/>
+        </svg>
+       <h3>Cross-Device Access</h3>
+       <p>Learn how Aetheria seamlessly syncs across all your devices.</p>
+     </div>
+    </div>
+  </div>
+</section>
+
+  <div class="interactive-modal" id="data-encryption">
+     <div class="interactive-modal-content">
+       <span class="interactive-modal-close">&times;</span>
+       <h2>Data Encryption</h2>
+       <p>Aetheria employs state-of-the-art encryption techniques to safeguard your data. All data transmitted and stored within Aetheria is encrypted, providing the highest level of protection. You can explore our protocols and learn more about how we prioritize your privacy. Your peace of mind is our priority.</p>
+    </div>
+ </div>
+  <div class="interactive-modal" id="anonymous-browsing">
+     <div class="interactive-modal-content">
+       <span class="interactive-modal-close">&times;</span>
+       <h2>Anonymous Browsing</h2>
+       <p>With Aetheria, you can browse the web without leaving a trace. Our advanced system masks your IP address and prevents tracking, ensuring your anonymity and privacy. You can delve into our anonymity protocols and understand how Aetheria keeps your browsing activity truly private. Explore freely without any worry.</p>
+    </div>
+ </div>
+ <div class="interactive-modal" id="sandboxed-environment">
+     <div class="interactive-modal-content">
+       <span class="interactive-modal-close">&times;</span>
+       <h2>Sandboxed Environment</h2>
+       <p>Aetheria's sandboxed environment isolates your browsing sessions, preventing malware and tracking cookies from affecting your system. This means you can explore the web without any fear of malicious software or intrusive tracking. It is your own virtual safe zone within the web.</p>
+    </div>
+ </div>
+    <div class="interactive-modal" id="realtime-threat-detection">
+     <div class="interactive-modal-content">
+       <span class="interactive-modal-close">&times;</span>
+       <h2>Real-time Threat Detection</h2>
+       <p>Aetheria continuously monitors your browsing activity in real-time to detect and prevent potential security threats, ensuring a safe and secure browsing experience.</p>
+    </div>
+ </div>
+    <div class="interactive-modal" id="personalized-themes">
+     <div class="interactive-modal-content">
+       <span class="interactive-modal-close">&times;</span>
+       <h2>Personalized Themes</h2>
+       <p>Aetheria offers a wide range of personalized themes, allowing you to customize your browsing experience to suit your preferences. From minimalistic designs to vibrant colors, you can choose the perfect theme to match your personality.</p>
+    </div>
+ </div>
+    <div class="interactive-modal" id="cross-device-access">
+     <div class="interactive-modal-content">
+       <span class="interactive-modal-close">&times;</span>
+       <h2>Cross-Device Access</h2>
+       <p>Aetheria allows you to access your virtual browser and settings from any device, ensuring a consistent browsing experience across all your devices. With Aetheria, you can start browsing on one device and pick up where you left off on another, seamlessly.</p>
+    </div>
+ </div>
+  <section class="user-experience section" id="user-experience">
+    <div class="container">
+      <h2>Reimagine Your Digital Journey</h2>
+      <p>Aetheria is more than a browser - it's a personalized digital ecosystem that adapts to your unique needs.</p>
+      
+      <div class="experience-showcase">
+        <div class="experience-card">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 16c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/>
+            <path d="M13 9h-2v2h2V9zm0 4h-2v2h2v-2z"/>
+          </svg>
+          <h3>Adaptive Intelligence</h3>
+          <p>Our AI learns your browsing patterns, suggesting optimal experiences and privacy settings.</p>
+          <button class="learn-more-btn">How It Works</button>
+        </div>
+
+        <div class="experience-card">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M10 19l-7-7 7-7"/>
+            <path d="M19 19l-7-7 7-7"/>
+          </svg>
+          <h3>Seamless Transitions</h3>
+          <p>Switch between devices, workspaces, and browsing modes without losing context.</p>
+          <button class="learn-more-btn">Explore Transitions</button>
+        </div>
+
+        <div class="experience-card">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"/>
+            <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/>
+            <line x1="12" y1="17" x2="12.01" y2="17"/>
+          </svg>
+          <h3>Contextual Privacy</h3>
+          <p>Intelligent privacy modes that automatically adjust based on your browsing context.</p>
+          <button class="learn-more-btn">Privacy Insights</button>
+        </div>
+      </div>
+
+      <div class="experience-testimonial">
+        <blockquote>
+          "Aetheria doesn't just protect my browsing - it transforms how I interact with the digital world."
+          <footer>— Alex Rodriguez, Tech Innovator</footer>
+        </blockquote>
+      </div>
+    </div>
+  </section>
+
+  <section class="advanced-features section" id="advanced-features">
+    <div class="container">
+      <h2>Beyond Boundaries: Advanced Features</h2>
+      <div class="features-grid">
+        <div class="advanced-feature">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+            <circle cx="12" cy="7" r="4"/>
+          </svg>
+          <h3>Persona Management</h3>
+          <p>Create multiple digital personas for different contexts: work, personal, research.</p>
+        </div>
+        <div class="advanced-feature">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
+            <rect x="8" y="2" width="8" height="4" rx="1" ry="1"/>
+          </svg>
+          <h3>Dynamic Content Isolation</h3>
+          <p>Separate browsing contexts to prevent cross-site tracking and data leakage.</p>
+        </div>
+        <div class="advanced-feature">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polygon points="12 2 2 7 12 12 22 7 12 2"/>
+            <polyline points="2 17 12 22 22 17"/>
+            <polyline points="2 12 12 17 22 12"/>
+          </svg>
+          <h3>Knowledge Layers</h3>
+          <p>Intelligent content categorization and smart bookmarking across browsing sessions.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="community-interaction section" id="community">
+    <div class="container">
+      <h2>Join the Aetheria Community</h2>
+      <div class="community-grid">
+        <div class="community-card">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M17 8h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v4l-4-4H9a1.5 1.5 0 0 1-1.5-1.5v-6A1.5 1.5 0 0 1 9 8h8z"/>
+            <path d="M9 8V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v4l-4-4H9a1.5 1.5 0 0 1-1.5-1.5v-6A1.5 1.5 0 0 1 9 8z"/>
+          </svg>
+          <h3>Community Forum</h3>
+          <p>Connect with other Aetheria users, share experiences, and get support.</p>
+          <button class="community-btn">Join Discussion</button>
+        </div>
+        <div class="community-card">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
+          </svg>
+          <h3>Beta Tester Program</h3>
+          <p>Help shape the future of Aetheria by becoming an early feedback contributor.</p>
+          <button class="community-btn">Apply Now</button>
+        </div>
+        <div class="community-card">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="3" width="18" height="18" rx="2"/>
+            <path d="M3 9h18M9 21V9"/>
+          </svg>
+          <h3>Roadmap Collaboration</h3>
+          <p>Vote on features and contribute to our product development roadmap.</p>
+          <button class="community-btn">Collaborate</button>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="early-access section" id="early-access">
+    <div class="container">
+      <h2>Get Early Access</h2>
+      <form id="early-access-form" class="early-access-form">
+        <input type="email" placeholder="Enter your email" required>
+        <select required>
+          <option value="">Select Your Primary Use Case</option>
+          <option value="personal">Personal Browsing</option>
+          <option value="business">Business</option>
+          <option value="research">Research</option>
+          <option value="privacy">Privacy Focused</option>
+        </select>
+        <button type="submit">Request Invite</button>
+      </form>
+    </div>
+  </section>
+
+  <section class="innovation-journey section" id="innovation">
+    <div class="container">
+      <h2>Your Digital Innovation Journey</h2>
+      <div class="innovation-timeline">
+        <div class="timeline-item">
+          <div class="timeline-icon">🚀</div>
+          <div class="timeline-content">
+            <h3>Conceptualization</h3>
+            <p>Where groundbreaking ideas transform into revolutionary technology.</p>
+          </div>
+        </div>
+        <div class="timeline-item">
+          <div class="timeline-icon">🔬</div>
+          <div class="timeline-content">
+            <h3>Advanced Research</h3>
+            <p>Continuous exploration of cutting-edge privacy and security technologies.</p>
+          </div>
+        </div>
+        <div class="timeline-item">
+          <div class="timeline-icon">🌐</div>
+          <div class="timeline-content">
+            <h3>Global Integration</h3>
+            <p>Connecting innovators, researchers, and privacy enthusiasts worldwide.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="interactive-playground section" id="playground">
+    <div class="container">
+      <h2>Your Digital Playground</h2>
+      <p>Explore, experiment, and experience the future of browsing.</p>
+      <div class="playground-grid">
+        <div class="playground-card" data-tooltip="Customize your browsing environment">
+          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 16c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/>
+          </svg>
+          <h3>Personalization Hub</h3>
+        </div>
+        <div class="playground-card" data-tooltip="Experiment with privacy modes">
+          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
+            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/>
+          </svg>
+          <h3>Privacy Laboratory</h3>
+        </div>
+        <div class="playground-card" data-tooltip="Discover new browsing paradigms">
+          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
+            <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 0 1 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/>
+          </svg>
+          <h3>Innovation Arena</h3>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="vision-exploration section" id="vision">
+    <div class="container">
+      <h2>Beyond Browsing: A Visionary Expedition</h2>
+      <div class="vision-cards">
+        <div class="vision-card" data-interaction="modal">
+          <h3>Future of Digital Privacy</h3>
+          <p>Explore how Aetheria is redefining digital sovereignty.</p>
+          <button class="vision-trigger">Discover More</button>
+        </div>
+        <div class="vision-card" data-interaction="modal">
+          <h3>Technological Frontiers</h3>
+          <p>Dive into the cutting-edge technologies powering Aetheria.</p>
+          <button class="vision-trigger">Explore Frontiers</button>
+        </div>
+        <div class="vision-card" data-interaction="modal">
+          <h3>Global Privacy Movement</h3>
+          <p>Join our mission to transform digital interactions.</p>
+          <button class="vision-trigger">Join Movement</button>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <div id="vision-modals" class="vision-modal-container">
+    <!-- Modals for Vision Sections -->
+    <div class="vision-modal" id="privacy-modal">
+      <div class="modal-content">
+        <h2>Digital Privacy Redefined</h2>
+        <p>Aetheria is not just a browser; it's a declaration of digital rights.</p>
+        <button class="modal-close">Close</button>
+      </div>
+    </div>
+    <!-- Similar modals for other vision cards -->
+  </div>
+
+  <section class="kuro-hero">
+    <div class="hero-content">
+      <h1>Secure Your Digital Journey</h1>
+      <p>Experience private, personalized browsing with Kuro Browser. Your virtual gateway to the web.</p>
+      <button class="cta-button">Get Started Now</button>
+      <div class="hero-animation-container">
+        <svg class="hero-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+          <path class="sakura-path" d="M75 20 C70 2, 40 2, 25 30 S30 90 75 115, 120 90, 125 30, 80 2 75 20 Z" fill="none" stroke="#ffb6c1" stroke-width="2" stroke-linecap="round" />
+          <path class="sakura-path" d="M75 40 C60 10, 30 10, 15 40 S20 100 75 125, 130 100, 135 40, 90 10 75 40 Z" fill="none" stroke="#ffb6c1" stroke-width="2" stroke-linecap="round" />
+        </svg>
+        <div class="floating-kanji">
+          <div class="kanji" style="left: 20%; top: 10%;">私</div>
+          <div class="kanji" style="left: 80%; top: 25%;">安</div>
+          <div class="kanji" style="left: 10%; top: 40%;">全</div>
+          <div class="kanji" style="left: 60%; top: 60%;">専</div>
+          <div class="kanji" style="left: 30%; top: 70%;">用</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <footer class="enhanced-footer" style="background-image: url('https://deta.surf/footer-32-yesdither-nomatte.gif'); background-size: cover; background-position: center;">
+    <div class="container">
+      <div class="footer-grid">
+        <div class="footer-column">
+          <h4>Quick Links</h4>
+          <ul>
+            <li><a href="#features">Features</a></li>
+            <li><a href="#security">Security</a></li>
+            <li><a href="#innovation">Our Journey</a></li>
+          </ul>
+        </div>
+        <div class="footer-column">
+          <h4>Community</h4>
+          <ul>
+            <li><a href="#community">Forums</a></li>
+            <li><a href="#beta">Beta Program</a></li>
+            <li><a href="#roadmap">Roadmap</a></li>
+          </ul>
+        </div>
+        <div class="footer-social">
+          <h4>Connect</h4>
+          <div class="social-icons">
+            <a href="#" class="social-icon">Twitter</a>
+            <a href="#" class="social-icon">GitHub</a>
+            <a href="#" class="social-icon">Discord</a>
+          </div>
+        </div>
+      </div>
+      <div class="footer-bottom">
+        <p>&copy; 2023 Kuro Browser. All Rights Reserved.</p>
+      </div>
+    </div>
+  </footer>
+
+  <script src="interactive.js"></script>
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      const ctaButton = document.querySelector('.cta-button');
+      if (ctaButton) {
+        ctaButton.addEventListener('click', () => {
+          alert('Starting your secure browsing experience!');
+        });
+      }
+
+      function getRandomPosition(element) {
+        const containerWidth = document.querySelector('.hero-animation-container').offsetWidth;
+        const containerHeight = document.querySelector('.hero-animation-container').offsetHeight;
+        const elementWidth = element.offsetWidth;
+        const elementHeight = element.offsetHeight;
+        const x = Math.random() * (containerWidth - elementWidth);
+        const y = Math.random() * (containerHeight - elementHeight);
+        return {x, y};
+      }
+
+      const kanjiElements = document.querySelectorAll('.kanji');
+      kanjiElements.forEach(kanji => {
+        const {x, y} = getRandomPosition(kanji);
+        kanji.style.left = `${x}px`;
+        kanji.style.top = `${y}px`;
+      });
+    });
+  </script>
+</body>
+</html>

interative.js

@@ -0,0 +1,170 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Interactive Modals
+    const interactiveItems = document.querySelectorAll('.interactive-item');
+    const modals = document.querySelectorAll('.interactive-modal');
+    const interactiveModalCloseButtons = document.querySelectorAll('.interactive-modal-close');
+  
+    interactiveItems.forEach(item => {
+      item.addEventListener('click', () => {
+        const modalId = item.getAttribute('data-modal');
+        const modal = document.getElementById(modalId);
+        if (modal) {
+          modal.classList.add('active');
+        }
+      });
+    });
+  
+    interactiveModalCloseButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        const modal = button.closest('.interactive-modal');
+        modal.classList.remove('active');
+      });
+    });
+  
+    // Early Access Form
+    const earlyAccessForm = document.getElementById('early-access-form');
+    if (earlyAccessForm) {
+      earlyAccessForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const email = e.target.querySelector('input').value;
+        const useCase = e.target.querySelector('select').value;
+        
+        // Here you would typically send this data to a backend service
+        alert(`Thank you for your interest!\nEmail: ${email}\nUse Case: ${useCase}`);
+      });
+    }
+  
+    // Learn More Button Interactions
+    const learnMoreButtons = document.querySelectorAll('.learn-more-btn');
+    learnMoreButtons.forEach(button => {
+      button.addEventListener('click', (e) => {
+        const parentCard = e.target.closest('.experience-card, .advanced-feature');
+        const cardTitle = parentCard.querySelector('h3').textContent;
+        alert(`You want to learn more about: ${cardTitle}. Detailed information coming soon!`);
+      });
+    });
+  
+    // New Interactive Elements
+    const playgroundCards = document.querySelectorAll('.playground-card');
+    playgroundCards.forEach(card => {
+      card.addEventListener('mouseenter', () => {
+        const tooltip = card.getAttribute('data-tooltip');
+        const tooltipElement = document.createElement('div');
+        tooltipElement.classList.add('playground-tooltip');
+        tooltipElement.textContent = tooltip;
+        card.appendChild(tooltipElement);
+      });
+  
+      card.addEventListener('mouseleave', () => {
+        const tooltip = card.querySelector('.playground-tooltip');
+        if (tooltip) {
+          card.removeChild(tooltip);
+        }
+      });
+    });
+  
+    // Vision Section Modals
+    const visionTriggers = document.querySelectorAll('.vision-trigger');
+    const visionModalsContainer = document.getElementById('vision-modals');
+    const visionModalCloseButtons = document.querySelectorAll('.modal-close');
+  
+    visionTriggers.forEach(trigger => {
+      trigger.addEventListener('click', (e) => {
+        const card = e.target.closest('.vision-card');
+        const modalId = card.getAttribute('data-modal-target');
+        const modal = document.getElementById(modalId);
+        
+        if (modal) {
+          visionModalsContainer.classList.add('active');
+          modal.classList.add('active');
+        }
+      });
+    });
+  
+    visionModalCloseButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        visionModalsContainer.classList.remove('active');
+        const activeModal = document.querySelector('.vision-modal.active');
+        if (activeModal) {
+          activeModal.classList.remove('active');
+        }
+      });
+    });
+  
+    // Dynamic Text Replacement Effect
+    const reimagineElement = document.querySelector('.hero h1');
+    if (reimagineElement) {
+      const words = ['Transformed', 'Revolutionized', 'Redefined', 'Elevated', 'Unleashed'];
+      let currentWordIndex = 0;
+      
+      function animateTextReplacement() {
+        const originalText = 'Reimagined';
+        const targetWord = words[currentWordIndex];
+        const container = document.createElement('div');
+        container.style.display = 'inline-block';
+        container.style.position = 'relative';
+        
+        // Create a wrapper for the static text
+        const staticTextSpan = document.createElement('span');
+        staticTextSpan.textContent = 'Experience the Web, ';
+        
+        reimagineElement.innerHTML = '';
+        reimagineElement.appendChild(staticTextSpan);
+        reimagineElement.appendChild(container);
+  
+        // Cursor effect
+        const cursor = document.createElement('span');
+        cursor.textContent = '_';
+        cursor.style.animation = 'blink 0.7s infinite';
+        cursor.style.marginLeft = '3px';
+        
+        // Clear original text
+        function clearText(callback) {
+          let index = originalText.length;
+          const clearIntervalId = setInterval(() => {
+            container.textContent = originalText.slice(0, index);
+            index--;
+            if (index < 0) {
+              clearInterval(clearIntervalId);
+              callback();
+            }
+          }, 50);
+        }
+  
+        // Type new text
+        function typeText() {
+          let index = 0;
+          const typeIntervalId = setInterval(() => {
+            container.textContent = targetWord.slice(0, index + 1);
+            index++;
+            
+            if (index === targetWord.length) {
+              clearInterval(typeIntervalId);
+              container.appendChild(cursor);
+              
+              // Prepare for next iteration
+              setTimeout(() => {
+                currentWordIndex = (currentWordIndex + 1) % words.length;
+                animateTextReplacement();
+              }, 2000);
+            }
+          }, 100);
+        }
+  
+        clearText(typeText);
+      }
+  
+      // Add style for cursor blinking
+      const style = document.createElement('style');
+      style.textContent = `
+        @keyframes blink {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0; }
+        }
+      `;
+      document.head.appendChild(style);
+  
+      // Start the animation
+      animateTextReplacement();
+    }
+  });

nhostClient.js

@@ -0,0 +1,9 @@
+//nhost import kiya
+const { NhostClient } = require('@nhost/nhost-js');
+
+const nhost = new NhostClient({
+  subdomain: process.env.NHOST_SUBDOMAIN, //domain name
+  region: process.env.NHOST_REGION, //region env se
+});
+
+module.exports = nhost; //isse export kiya ,isse script.js main import kar sake

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "hyperbeam-example",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "node server/app.js",
+    "build": "netlify-lambda build functions"
+  },
+  "dependencies": {
+    "@nhost/nhost-js": "^3.2.4",
+    "body-parser": "^1.20.3",
+    "dotenv": "^10.0.0",
+    "express": "^4.21.2",
+    "express-session": "^1.18.1",
+    "node-fetch": "^2.6.7",
+    "serverless-http": "^3.0.0"
+  },
+  "devDependencies": {
+    "netlify-lambda": "^2.0.0",
+    "tailwindcss": "^4.0.1"
+  }
+}

server.js

@@ -0,0 +1,101 @@
+require('dotenv').config();
+const express = require('express');
+const fetch = require('node-fetch');
+const path = require('path');
+const nhost = require('./nhostClient');
+
+const app = express();
+const PORT = process.env.PORT || 3000;
+
+app.use(express.json());
+app.use(express.static(path.join(__dirname)));
+
+async function fetchHyperbeamData() {
+  try {
+    const response = await fetch('https://engine.hyperbeam.com/v0/vm', {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${process.env.HYPERBEAM_API_KEY}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({})
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to create browser: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    return data.embed_url;
+  } catch (error) {
+    console.error('Error fetching Hyperbeam data:', error);
+    throw error;
+  }
+}
+
+app.get('/embed-url', async (req, res) => {
+  try {
+    const token = req.headers.authorization?.split(' ')[1];
+    if (!token) {
+      return res.status(401).json({ error: 'Unauthorized' });
+    }
+    const embedURL = await fetchHyperbeamData();
+    res.json({ embedURL });
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to fetch embed URL' });
+  }
+});
+
+app.post('/signup', async (req, res) => {
+  const { email, password } = req.body;
+  try {
+    const { user, error } = await nhost.auth.signUp({
+      email,
+      password,
+    });
+
+    if (error) {
+      return res.status(400).json({ error: error.message });
+    }
+
+    res.status(201).json({ message: 'Sign up successful', user });
+  } catch (error) {
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
+app.post('/signin', async (req, res) => {
+  const { email, password } = req.body;
+  try {
+    const { session, error } = await nhost.auth.signIn({
+      email,
+      password,
+    });
+    if (error || !session) {
+      return res.status(400).json({ error: error?.message || 'Sign in failed' });
+    }
+    res.status(200).json({ token: session.accessToken });
+  } catch (error) {
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
+app.post('/signout', async (req, res) => {
+  try {
+    const { error } = await nhost.auth.signOut();
+    if (error) {
+      return res.status(400).json({ error: error.message });
+    }
+    res.status(200).json({ message: 'Signed out successfully' });
+  } catch (error) {
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
+app.get('/', (req, res) => {
+    res.sendFile(path.join(__dirname, 'index.html'));
+});
+
+app.listen(PORT, () => {
+  console.log(`Server running on http://localhost:${PORT}`);
+});

signin-styles.css

@@ -0,0 +1,199 @@
+:root {
+    --zen-background: #f0f4f0;
+    --moss-green: #6b8e23;
+    --stone-gray: #8b8989;
+    --bamboo-text: #2c4b36;
+    --water-accent: #87ceeb;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Noto Sans JP', sans-serif;
+    background-color: var(--zen-background);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    overflow: hidden;
+    perspective: 1000px;
+}
+
+.zen-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.signin-panel {
+    position: relative;
+    width: 400px;
+    height: 550px;
+    background-color: white;
+    border-radius: 15px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.moss-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, rgba(107, 142, 35, 0.1), rgba(107, 142, 35, 0.03));
+    z-index: 1;
+}
+
+.signin-content {
+    position: relative;
+    z-index: 2;
+    padding: 40px;
+    text-align: center;
+}
+
+.stone-emblem {
+    width: 100px;
+    height: 100px;
+    margin: 0 auto 20px;
+    transition: transform 0.5s ease;
+}
+
+.stone-emblem:hover {
+    transform: rotate(10deg);
+}
+
+.stone-emblem svg {
+    width: 100%;
+    height: 100%;
+}
+
+h1 {
+    color: var(--bamboo-text);
+    margin-bottom: 30px;
+    font-weight: 300;
+    font-size: 1.2em;
+    line-height: 1.6;
+}
+
+.input-stone {
+    position: relative;
+    margin-bottom: 20px;
+}
+
+.input-stone input {
+    width: 100%;
+    padding: 15px 15px 15px 50px;
+    border: 1px solid var(--moss-green);
+    border-radius: 10px;
+    background-color: rgba(107, 142, 35, 0.05);
+    color: var(--bamboo-text);
+    outline: none;
+    transition: all 0.3s ease;
+}
+
+.input-stone input:focus {
+    box-shadow: 0 0 10px rgba(107, 142, 35, 0.3);
+    border-color: var(--water-accent);
+}
+
+.stone-icon {
+    position: absolute;
+    left: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    opacity: 0.6;
+}
+
+.enter-gate {
+    width: 100%;
+    padding: 15px;
+    border: 2px solid var(--moss-green);
+    border-radius: 10px;
+    background-color: transparent;
+    color: var(--bamboo-text);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+}
+
+.enter-gate:hover {
+    background-color: var(--moss-green);
+    color: white;
+}
+
+.enter-gate:active {
+    transform: scale(0.95);
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-10px); }
+  75% { transform: translateX(10px); }
+}
+
+.error-message {
+  text-align: center;
+  margin-top: 10px;
+  color: #ff4444;
+  font-size: 0.9em;
+}
+
+.input-stone.error input {
+  border-color: #ff4444;
+  box-shadow: 0 0 10px rgba(255, 68, 68, 0.2);
+}
+
+.enter-gate.loading {
+  position: relative;
+  color: transparent;
+}
+
+.enter-gate.loading::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 20px;
+  height: 20px;
+  margin: -10px 0 0 -10px;
+  border: 2px solid #fff;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: loading-spin 1s linear infinite;
+}
+
+@keyframes loading-spin {
+  to { transform: rotate(360deg); }
+}
+
+.zen-footer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
+.zen-footer a {
+    color: var(--bamboo-text);
+    text-decoration: none;
+    font-size: 0.8em;
+    opacity: 0.7;
+    transition: color 0.3s ease;
+}
+
+.zen-footer a:hover {
+    color: var(--water-accent);
+}
+
+@media (max-width: 450px) {
+    .signin-panel {
+        width: 95%;
+        height: auto;
+    }
+}

signin.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Zen Garden Access - Sign In</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="signin-styles.css">
+</head>
+<body>
+    <div class="zen-container">
+        <div class="signin-panel">
+            <div class="moss-layer"></div>
+            <div class="signin-content">
+                <div class="stone-emblem">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+                        <path d="M50 10 L85 50 L50 90 L15 50 Z" fill="#4a7c59" stroke="#2c4b36" stroke-width="3"/>
+                        <circle cx="50" cy="50" r="25" fill="#6b8e23" opacity="0.6"/>
+                    </svg>
+                </div>
+                <h1>庭園の入り口 <br> Garden Passage</h1>
+                <form class="zen-form">
+                    <div class="input-stone">
+                        <input type="email" placeholder="Path Name (Email)" required autocomplete="username">
+                        <div class="stone-icon">🍃</div>
+                    </div>
+                    <div class="input-stone">
+                        <input type="password" placeholder="Secret Passage" required autocomplete="current-password">
+                        <div class="stone-icon">🍂</div>
+                    </div>
+                    <button type="submit" class="enter-gate">Enter Sanctuary</button>
+                </form>
+                <div class="zen-footer">
+                    <a href="#" class="forgotten-path">Forgotten Path?</a>
+                    <a href="signup.html" class="new-journey">New Journey</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="signin.js"></script>
+</body>
+</html>

signin.js

@@ -0,0 +1,101 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Check if user is already signed in
+    const token = localStorage.getItem('authToken');
+    if (token) {
+      window.location.href = '/dashboard.html'; // Redirect to dashboard if already signed in
+      return;
+    }
+  
+    const zenForm = document.querySelector('.zen-form');
+    const signinPanel = document.querySelector('.signin-panel');
+    const inputs = zenForm.querySelectorAll('input');
+  
+    // Add input validation and interaction
+    inputs.forEach(input => {
+      input.addEventListener('focus', () => {
+        input.parentElement.classList.add('input-focus');
+      });
+  
+      input.addEventListener('blur', () => {
+        input.parentElement.classList.remove('input-focus');
+      });
+    });
+  
+    // Handle form submission
+    zenForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      
+      const email = inputs[0].value;
+      const password = inputs[1].value;
+      const submitButton = zenForm.querySelector('.enter-gate');
+  
+      try {
+        // Show loading state
+        submitButton.textContent = 'Entering...';
+        submitButton.disabled = true;
+  
+        const response = await fetch('/signin', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email, password }),
+        });
+  
+        const data = await response.json();
+  
+        if (response.ok) {
+          // Store authentication token
+          localStorage.setItem('authToken', data.token);
+          
+          // Success animation
+          signinPanel.style.transform = 'rotateY(180deg)';
+          signinPanel.style.background = 'linear-gradient(135deg, #6b8e23, #87ceeb)';
+          
+          setTimeout(() => {
+            window.location.href = '/dashboard.html'; // Redirect to dashboard
+          }, 1000);
+        } else {
+          // Show error message
+          const errorDisplay = document.createElement('div');
+          errorDisplay.className = 'error-message';
+          errorDisplay.textContent = data.error || 'Invalid credentials';
+          zenForm.appendChild(errorDisplay);
+          
+          // Shake animation for error
+          signinPanel.style.animation = 'shake 0.5s ease-in-out';
+          
+          // Remove error message after 3 seconds
+          setTimeout(() => {
+            errorDisplay.remove();
+          }, 3000);
+        }
+      } catch (error) {
+        console.error('Signin error:', error);
+        // Handle network errors or server being down
+        const errorDisplay = document.createElement('div');
+        errorDisplay.className = 'error-message';
+        errorDisplay.textContent = 'Unable to connect to server. Please try again later.';
+        zenForm.appendChild(errorDisplay);
+        
+        setTimeout(() => {
+          errorDisplay.remove();
+        }, 3000);
+      } finally {
+        // Reset button state
+        submitButton.textContent = 'Enter Sanctuary';
+        submitButton.disabled = false;
+      }
+    });
+  });
+  
+  // Helper function for authenticated requests
+  window.authenticatedFetch = async (url, options = {}) => {
+    const token = localStorage.getItem('authToken');
+    if (token) {
+      options.headers = {
+        ...options.headers,
+        'Authorization': `Bearer ${token}`,
+      };
+    }
+    const response = await fetch(url, options);
+    return response;
+  };

signup-styles.css

@@ -0,0 +1,180 @@
+:root {
+    --parchment-bg: #f4e4d0;
+    --ancient-text: #4a3f35;
+    --moss-green: #5d6d4e;
+    --mystical-gold: #c1a257;
+    --shadow-tone: rgba(74, 63, 53, 0.1);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background: var(--parchment-bg);
+    font-family: 'Cormorant', serif;
+    color: var(--ancient-text);
+    overflow: hidden;
+}
+
+.mystical-login-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    position: relative;
+}
+
+.magical-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        135deg, 
+        rgba(93, 109, 78, 0.1), 
+        rgba(193, 162, 87, 0.05)
+    );
+    z-index: -1;
+}
+
+.magical-form-wrapper {
+    background: rgba(244, 228, 208, 0.8);
+    border-radius: 15px;
+    padding: 40px;
+    width: 400px;
+    box-shadow: 
+        0 10px 30px var(--shadow-tone),
+        inset 0 0 20px rgba(193, 162, 87, 0.1);
+    position: relative;
+    overflow: hidden;
+}
+
+.rune-border {
+    position: absolute;
+    top: -5px;
+    left: -5px;
+    right: -5px;
+    bottom: -5px;
+    background: linear-gradient(
+        45deg, 
+        var(--mystical-gold), 
+        var(--moss-green)
+    );
+    z-index: -1;
+    filter: blur(5px);
+    opacity: 0.3;
+}
+
+.ancient-access-form h1 {
+    font-family: 'Cinzel', serif;
+    text-align: center;
+    color: var(--ancient-text);
+    letter-spacing: 3px;
+    margin-bottom: 30px;
+}
+
+.mystical-input-group input {
+    width: 100%;
+    padding: 12px 15px;
+    margin: 15px 0;
+    background: rgba(244, 228, 208, 0.5);
+    border: 1px solid var(--moss-green);
+    border-radius: 5px;
+    color: var(--ancient-text);
+    font-family: 'Cormorant', serif;
+    letter-spacing: 2px;
+    transition: all 0.3s ease;
+}
+
+.mystical-input-group input:focus {
+    outline: none;
+    border-color: var(--mystical-gold);
+    box-shadow: 0 0 10px rgba(193, 162, 87, 0.3);
+}
+
+.password-container {
+    position: relative;
+    width: 100%;
+}
+
+.toggle-password {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.3s ease;
+}
+
+.toggle-password:hover {
+    opacity: 1;
+}
+
+.toggle-password .eye-icon {
+    width: 20px;
+    height: 20px;
+    stroke: var(--ancient-text);
+}
+
+.password-container input {
+    padding-right: 40px;
+}
+
+.mystical-enter-btn {
+    width: 100%;
+    padding: 15px;
+    background: var(--moss-green);
+    color: var(--parchment-bg);
+    border: none;
+    border-radius: 5px;
+    font-family: 'Cinzel', serif;
+    letter-spacing: 3px;
+    cursor: pointer;
+    transition: background 0.3s ease;
+}
+
+.mystical-enter-btn:hover {
+    background: var(--mystical-gold);
+}
+
+.mystic-links {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
+.mystic-link {
+    color: var(--ancient-text);
+    text-decoration: none;
+    font-size: 0.9em;
+    letter-spacing: 1px;
+    position: relative;
+    opacity: 0.7;
+    transition: opacity 0.3s ease;
+}
+
+.mystic-link:hover {
+    opacity: 1;
+}
+
+.mystic-link::after {
+    content: '';
+    position: absolute;
+    bottom: -3px;
+    left: 0;
+    width: 0;
+    height: 1px;
+    background: var(--ancient-text);
+    transition: width 0.3s ease;
+}
+
+.mystic-link:hover::after {
+    width: 100%;
+}

signup.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Sanctuary of Secrets - Sign Up</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Cormorant:wght@300;400&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="signup-styles.css">
+</head>
+<body>
+    <div class="mystical-login-container">
+        <div class="magical-form-wrapper">
+            <div class="rune-border"></div>
+            <form class="ancient-access-form">
+                <h1>Create Your Realm</h1>
+                <div class="mystical-input-group">
+                    <input type="text" placeholder="CHOSEN NAME" required>
+                    <input type="email" placeholder="MYSTICAL EMAIL" required>
+                    <div class="password-container">
+                        <input type="password" placeholder="SACRED CIPHER" required>
+                        <button type="button" class="toggle-password" aria-label="Toggle password visibility">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="eye-icon">
+                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                                <circle cx="12" cy="12" r="3"></circle>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="password-container">
+                        <input type="password" placeholder="CONFIRM SACRED CIPHER" required>
+                        <button type="button" class="toggle-password" aria-label="Toggle password visibility">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="eye-icon">
+                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                                <circle cx="12" cy="12" r="3"></circle>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+                <button type="submit" class="mystical-enter-btn">Forge Destiny</button>
+                <div class="mystic-links">
+                    <a href="signin.html" class="mystic-link">Already Initiated?</a>
+                    <a href="#" class="mystic-link">Need Guidance</a>
+                </div>
+            </form>
+        </div>
+        <div class="magical-background"></div>
+    </div>
+
+    <script src="signup.js"></script>
+</body>
+</html>

signup.js

@@ -0,0 +1,107 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Check if user is already signed in
+    const token = localStorage.getItem('authToken');
+    if (token) {
+      window.location.href = '/dashboard.html'; // Redirect to dashboard if already signed in
+      return;
+    }
+  
+    const form = document.querySelector('.ancient-access-form');
+    const inputs = document.querySelectorAll('.mystical-input-group input');
+    const passwordInputs = document.querySelectorAll('input[type="password"]');
+    const passwordToggleButtons = document.querySelectorAll('.toggle-password');
+  
+    // Input focus effects
+    inputs.forEach(input => {
+      input.addEventListener('focus', () => {
+        input.style.transform = 'scale(1.02)';
+        input.style.boxShadow = '0 0 15px rgba(193, 162, 87, 0.3)';
+      });
+  
+      input.addEventListener('blur', () => {
+        input.style.transform = 'scale(1)';
+        input.style.boxShadow = 'none';
+      });
+    });
+  
+    // Password visibility toggle
+    passwordToggleButtons.forEach((button, index) => {
+      button.addEventListener('click', () => {
+        const input = passwordInputs[index];
+        const eyeIcon = button.querySelector('.eye-icon');
+        
+        if (input.type === 'password') {
+          input.type = 'text';
+          eyeIcon.innerHTML = `
+            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+            <line x1="1" y1="1" x2="23" y2="23"></line>
+          `;
+        } else {
+          input.type = 'password';
+          eyeIcon.innerHTML = `
+            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+            <circle cx="12" cy="12" r="3"></circle>
+          `;
+        }
+      });
+    });
+  
+    // Form submission with API integration
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      
+      // Password validation
+      const [password, confirmPassword] = passwordInputs;
+      if (password.value !== confirmPassword.value) {
+        alert('Sacred Ciphers must align');
+        return;
+      }
+  
+      const email = form.querySelector('input[type="email"]').value;
+      const username = form.querySelector('input[type="text"]').value;
+      
+      try {
+        const response = await fetch('/signup', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ 
+            email, 
+            password: password.value,
+            username 
+          }),
+        });
+  
+        const data = await response.json();
+        
+        if (response.ok) {
+          // Create a magical reveal effect
+          const formWrapper = document.querySelector('.magical-form-wrapper');
+          formWrapper.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
+          formWrapper.style.transform = 'scale(1.1)';
+          formWrapper.style.opacity = '0';
+  
+          alert('Signup successful!');
+          alert('A confirmation email has been sent!');
+          
+          setTimeout(() => {
+            window.location.href = 'signin.html';
+          }, 500);
+        } else {
+          const errorSpan = document.createElement('span');
+          errorSpan.style.color = 'red';
+          errorSpan.style.display = 'block';
+          errorSpan.style.textAlign = 'center';
+          errorSpan.style.marginTop = '10px';
+          errorSpan.innerText = data.error;
+          form.appendChild(errorSpan);
+  
+          setTimeout(() => {
+            errorSpan.remove();
+          }, 3000);
+        }
+      } catch (error) {
+        console.error('Signup error:', error);
+        alert('A mystical disturbance occurred. Please try again.');
+      }
+    });
+  });

styles.css

@@ -0,0 +1,1213 @@
+:root {
+    --space-blue: #0A192F;
+    --star-yellow: #FFD700;
+    --light-blue: #5390D9;
+    --lightest-blue: #97C2FC;
+    --white: #FFFFFF;
+    --text-light: #B3B3B3;
+    --gradient-bg: linear-gradient(135deg, var(--space-blue) 0%, #1E3A8A 100%);
+    --kuro-dark-text: #1a2b4a;  
+    --kuro-text-accent: #2c3e50;  
+  }
+  
+  body {
+    font-family: 'Space Grotesk', sans-serif;
+    margin: 0;
+    padding: 0;
+    line-height: 1.7;
+    color: var(--white);
+    background: var(--space-blue);
+    overflow-x: hidden;
+  }
+  
+  .container {
+    width: 90%;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  
+  .section {
+      padding: 4rem 0;
+  }
+  
+  .navbar {
+    background: rgba(10, 25, 47, 0.7);
+    backdrop-filter: blur(10px);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1000;
+    padding: 1rem 0;
+  }
+  
+  .navbar .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .logo {
+    font-size: 1.8rem;
+    font-weight: 700;
+    color: var(--star-yellow);
+    text-decoration: none;
+    letter-spacing: 1px;
+     transition: color 0.3s ease;
+  }
+    .logo:hover {
+        color: var(--light-blue);
+    }
+  
+  
+  .nav-links a {
+      text-decoration: none;
+      color: var(--text-light);
+      margin-left: 1.5rem;
+      font-weight: 500;
+       transition: color 0.3s ease;
+  }
+  
+  .nav-links a:hover {
+    color: var(--light-blue);
+  }
+  
+  .navbar .nav-links .sign-in-link {
+    color: var(--star-yellow);
+    text-decoration: underline;
+    font-weight: 600;
+    transition: opacity 0.3s ease;
+  }
+  
+  .navbar .nav-links .sign-in-link:hover {
+    opacity: 0.8;
+  }
+  
+  .hero {
+    background: var(--gradient-bg);
+    color: var(--white);
+    text-align: center;
+    padding: 8rem 0;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .hero-content {
+      position: relative;
+      z-index: 1;
+   }
+  
+  .hero h1 {
+    font-size: 3.8rem;
+    margin-bottom: 1.5rem;
+    line-height: 1.2;
+  }
+  
+  .hero p {
+    font-size: 1.2rem;
+    margin-bottom: 2.5rem;
+    opacity: 0.8;
+  }
+  
+  .cta-button {
+    display: inline-flex;
+    align-items: center;
+    padding: 1rem 2rem;
+    background: var(--star-yellow);
+    color: var(--space-blue);
+    border-radius: 50px;
+    text-decoration: none;
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+  .cta-button:hover {
+      background: var(--light-blue);
+      color: var(--white);
+   }
+  
+  .hero .mission-badge {
+    position: relative;
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 30px;
+    margin-bottom: 1rem;
+    backdrop-filter: blur(5px);
+    color: var(--text-light);
+  }
+  
+  .hero .mission-badge svg {
+    margin-right: 0.5rem;
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+  }
+  
+  .animated-stars {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0.2;
+    pointer-events: none;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='0.5' fill='%23ffffff'/%3E%3Ccircle cx='10' cy='5' r='0.5' fill='%23ffffff'/%3E%3Ccircle cx='6' cy='12' r='0.5' fill='%23ffffff'/%3E%3Ccircle cx='14' cy='9' r='0.5' fill='%23ffffff'/%3E%3C/svg%3E");
+    animation: twinkle 60s linear infinite;
+  }
+  
+  @keyframes twinkle {
+    0% { background-position: 0 0; }
+    100% { background-position: 100% 100%; }
+  }
+  
+  .features {
+    background: var(--space-blue);
+  }
+  
+  .features .container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+      text-align: center;
+  }
+  
+  .feature-card {
+    background: rgba(255, 255, 255, 0.05);
+      padding: 2rem;
+     border-radius: 10px;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+  
+    .feature-card:hover {
+      transform: translateY(-5px);
+     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+  }
+  
+  .feature-icon {
+       width: 60px;
+      height: 60px;
+      margin: 0 auto 1rem;
+     background: var(--star-yellow);
+       border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+  }
+  
+  .feature-icon svg {
+      width: 30px;
+     height: 30px;
+       fill: var(--space-blue);
+  }
+  
+   .security {
+      background: rgba(255, 255, 255, 0.05);
+    }
+  
+  .security .container {
+      text-align: center;
+  }
+  
+  .security h2 {
+     font-size: 2.5rem;
+     margin-bottom: 3rem;
+   }
+  
+  .security-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 2rem;
+     margin-top: 2rem;
+   }
+  
+   .security-card {
+       background: rgba(255, 255, 255, 0.05);
+     padding: 2rem;
+     border-radius: 10px;
+       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+     display: flex;
+     flex-direction: column;
+      align-items: center;
+     transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+  
+  .security-card:hover {
+       transform: translateY(-5px);
+     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+  }
+  
+   .security-icon {
+      width: 50px;
+     height: 50px;
+      margin-bottom: 1rem;
+       background: var(--light-blue);
+       border-radius: 50%;
+       display: flex;
+      align-items: center;
+     justify-content: center;
+  }
+  
+  .security-icon svg {
+      width: 24px;
+     height: 24px;
+     fill: var(--space-blue);
+  }
+  
+  .technology-section {
+     background: var(--space-blue);
+     text-align: center;
+  }
+  
+  .technology-section h2 {
+     font-size: 2.5rem;
+      margin-bottom: 2rem;
+  }
+  
+  .technology-section p {
+      font-size: 1.2rem;
+      margin-bottom: 3rem;
+      opacity: 0.8;
+  }
+  
+  .tech-features {
+     display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+     gap: 2rem;
+      margin-top: 3rem;
+  }
+  
+  .tech-feature {
+       background: rgba(255, 255, 255, 0.05);
+      padding: 1.5rem;
+      border-radius: 10px;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+  
+  .tech-feature:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+  }
+  
+  .tech-feature svg {
+      width: 40px;
+      height: 40px;
+     margin-bottom: 1rem;
+     color: var(--star-yellow);
+  }
+   .launch-plans {
+     background: rgba(255, 255, 255, 0.05);
+  }
+  
+  .launch-plans .container {
+      text-align: center;
+  }
+   .launch-plans h2 {
+     font-size: 2.5rem;
+      margin-bottom: 2rem;
+  }
+  
+  .launch-plans p {
+      font-size: 1.2rem;
+      margin-bottom: 3rem;
+      opacity: 0.8;
+  }
+  
+  .launch-cards {
+      display: grid;
+     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 2rem;
+     margin-top: 2rem;
+  }
+  
+  .launch-card {
+     background: rgba(255, 255, 255, 0.05);
+     padding: 2rem;
+     border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+     transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+  
+  .launch-card:hover {
+       transform: translateY(-5px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+  }
+  
+  .launch-card h3 {
+    font-size: 1.5rem;
+     margin-bottom: 0.75rem;
+  }
+  
+  .launch-card .price {
+      font-size: 2rem;
+     font-weight: 700;
+     color: var(--star-yellow);
+      margin-bottom: 1.5rem;
+  }
+  
+  .launch-card .features-list {
+    margin-bottom: 1.5rem;
+  }
+  
+   .launch-card .features-list li {
+      text-align: left;
+     margin-bottom: 0.5rem;
+  }
+  
+   .launch-card .features-list li::before {
+       content: "✓ ";
+      color: var(--light-blue);
+  }
+  
+  .launch-card a {
+      display: inline-flex;
+    align-items: center;
+    padding: 0.75rem 1.5rem;
+     font-size: 1rem;
+      background: var(--star-yellow);
+     color: var(--space-blue);
+     border-radius: 50px;
+    text-decoration: none;
+    transition: background-color 0.3s ease;
+  }
+  
+  .launch-card a:hover {
+    background: var(--light-blue);
+    color: var(--white);
+  }
+  
+  .faq-section {
+     background: var(--space-blue);
+  }
+  
+  .faq-section .container {
+      text-align: center;
+  }
+  
+  .faq-section h2 {
+     font-size: 2.5rem;
+    margin-bottom: 3rem;
+  }
+  
+  .faq-item {
+     margin-bottom: 1.5rem;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+     padding-bottom: 1.5rem;
+     cursor: pointer;
+   }
+  
+  .faq-question {
+       font-size: 1.2rem;
+     font-weight: 600;
+    display: flex;
+     justify-content: space-between;
+     align-items: center;
+  }
+  
+  .faq-question svg {
+       width: 20px;
+      height: 20px;
+     transition: transform 0.3s ease;
+  }
+  
+  .faq-item.active .faq-question svg {
+    transform: rotate(180deg);
+  }
+  
+  .faq-answer {
+      font-size: 1rem;
+    margin-top: 1rem;
+    display: none;
+    opacity: 0.8;
+  }
+  
+  .faq-item.active .faq-answer {
+     display: block;
+  }
+  
+  .footer {
+     background: var(--space-blue);
+     color: var(--text-light);
+       padding: 2rem 0;
+       text-align: center;
+      position: relative;
+  }
+  
+  .footer::before {
+      content: '';
+      position: absolute;
+      top: 0;
+     left: 0;
+     right: 0;
+      height: 1px;
+      background: rgba(255, 255, 255, 0.1);
+  }
+  
+  .footer p {
+      margin-bottom: 1rem;
+  }
+  
+  .footer a {
+     color: var(--text-light);
+     text-decoration: none;
+    margin: 0 0.5rem;
+  }
+  
+  @media (max-width: 768px) {
+      .hero h1 {
+        font-size: 2.8rem;
+      }
+  
+     .hero p {
+           font-size: 1.1rem;
+       }
+  
+  }
+   .brainstorming-ideas {
+      background: var(--space-blue);
+       padding: 4rem 0;
+      text-align: center;
+  }
+   .brainstorming-ideas h2 {
+       font-size: 2.5rem;
+       margin-bottom: 2rem;
+   }
+   
+    .brainstorming-ideas ul {
+     text-align: left;
+      max-width: 800px;
+     margin: 2rem auto;
+  }
+  
+    .brainstorming-ideas li {
+        margin-bottom: 0.75rem;
+       opacity: 0.8;
+        list-style: none;
+      position: relative;
+     padding-left: 1.5rem;
+  }
+  .brainstorming-ideas li::before {
+      content: "💡";
+      position: absolute;
+      left: 0;
+      color: var(--star-yellow);
+  }
+      
+    .interactive-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 20px;
+      padding: 2rem 0;
+    }
+  
+    .interactive-item {
+      background: rgba(255, 255, 255, 0.05);
+      padding: 2rem;
+      border-radius: 10px;
+      text-align: center;
+      cursor: pointer;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+       position: relative;
+      overflow: hidden;
+    }
+    .interactive-item:hover {
+      transform: translateY(-5px);
+     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+  }
+  
+  .interactive-item::before {
+     content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+     right: 0;
+      height: 5px;
+     background: var(--star-yellow);
+      transform: scaleX(0);
+      transition: transform 0.4s ease-in-out;
+  }
+  .interactive-item:hover::before {
+     transform: scaleX(1);
+  }
+  
+    .interactive-item h3 {
+      margin-bottom: 1rem;
+       font-size: 1.4rem;
+  }
+  
+   .interactive-item p {
+      font-size: 1.1rem;
+     opacity: 0.8;
+  }
+  
+    .interactive-item svg {
+        width: 50px;
+         height: 50px;
+       margin-bottom: 1rem;
+        fill: var(--star-yellow);
+    }
+  
+    .interactive-modal {
+      display: none;
+       position: fixed;
+        top: 0;
+       left: 0;
+       width: 100%;
+        height: 100%;
+      background: rgba(0, 0, 0, 0.7);
+       justify-content: center;
+      align-items: center;
+      z-index: 1001;
+  }
+  
+    .interactive-modal-content {
+      background: var(--space-blue);
+       padding: 2rem;
+      border-radius: 10px;
+     max-width: 700px;
+      position: relative;
+  }
+   .interactive-modal-content h2 {
+      font-size: 2rem;
+      margin-bottom: 1rem;
+    }
+    .interactive-modal-content p {
+         margin-bottom: 1.5rem;
+         line-height: 1.6;
+       opacity: 0.8;
+   }
+    .interactive-modal-close {
+        position: absolute;
+       top: 10px;
+        right: 10px;
+      font-size: 1.5rem;
+      cursor: pointer;
+      color: var(--text-light);
+     transition: color 0.3s ease;
+  }
+     .interactive-modal-close:hover {
+        color: var(--light-blue);
+     }
+    .interactive-modal.active {
+      display: flex;
+   }
+  
+  .user-feedback {
+    background: rgba(255, 255, 255, 0.05);
+     padding: 4rem 0;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+  .user-feedback::before {
+    content: '';
+     position: absolute;
+      top: 0;
+      left: 0;
+    right: 0;
+    height: 1px;
+     background: rgba(255, 255, 255, 0.1);
+  }
+  
+  .user-feedback h2 {
+     font-size: 2.5rem;
+     margin-bottom: 2rem;
+  }
+  .feedback-slider {
+      display: flex;
+      overflow-x: auto;
+     scroll-snap-type: x mandatory;
+      padding: 2rem 0;
+  }
+  .feedback-card {
+      background: rgba(255, 255, 255, 0.05);
+     padding: 2rem;
+      margin: 0 1rem;
+      border-radius: 10px;
+       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+     min-width: 300px;
+      flex: none;
+     scroll-snap-align: start;
+     text-align: left;
+  }
+  
+  .feedback-card p {
+     font-style: italic;
+     margin-bottom: 1rem;
+       opacity: 0.8;
+  }
+  .feedback-card .user-info {
+    display: flex;
+    align-items: center;
+  }
+  
+  .feedback-card .user-avatar {
+      width: 40px;
+      height: 40px;
+    border-radius: 50%;
+      background: var(--light-blue);
+     margin-right: 1rem;
+      display: flex;
+    align-items: center;
+      justify-content: center;
+  }
+    .feedback-card .user-avatar svg {
+        width: 24px;
+        height: 24px;
+        fill: var(--space-blue);
+    }
+   .feedback-card .user-name {
+     font-weight: 600;
+   }
+  
+  .community-interaction {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 4rem 0;
+  }
+  
+  .community-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+  }
+  
+  .community-card {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 2rem;
+    border-radius: 10px;
+    text-align: center;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+  
+  .community-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
+  }
+  
+  .community-card svg {
+    width: 60px;
+    height: 60px;
+    margin-bottom: 1rem;
+    color: var(--star-yellow);
+  }
+  
+  .community-btn {
+    background: var(--light-blue);
+    color: var(--white);
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 50px;
+    margin-top: 1rem;
+    cursor: pointer;
+    transition: background 0.3s ease;
+  }
+  
+  .community-btn:hover {
+    background: var(--star-yellow);
+  }
+  
+  .early-access {
+    background: var(--space-blue);
+    text-align: center;
+  }
+  
+  .early-access-form {
+    max-width: 600px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .early-access-form input,
+  .early-access-form select,
+  .early-access-form button {
+    padding: 1rem;
+    border-radius: 5px;
+    border: 1px solid rgba(255,255,255,0.1);
+    background: rgba(255,255,255,0.1);
+    color: var(--white);
+  }
+  
+  .early-access-form button {
+    background: var(--star-yellow);
+    color: var(--space-blue);
+    cursor: pointer;
+    transition: background 0.3s ease;
+  }
+  
+  .early-access-form button:hover {
+    background: var(--light-blue);
+  }
+  
+  .user-experience {
+    background: rgba(255, 255, 255, 0.05);
+    text-align: center;
+  }
+  
+  .experience-showcase {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 3rem;
+    gap: 2rem;
+  }
+  
+  .experience-card {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 2rem;
+    border-radius: 10px;
+    transition: transform 0.3s ease;
+  }
+  
+  .experience-card:hover {
+    transform: translateY(-10px);
+  }
+  
+  .learn-more-btn {
+    background: var(--light-blue);
+    color: var(--white);
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 50px;
+    margin-top: 1rem;
+    cursor: pointer;
+    transition: background 0.3s ease;
+  }
+  
+  .learn-more-btn:hover {
+    background: var(--star-yellow);
+  }
+  
+  .experience-testimonial {
+    margin-top: 4rem;
+    font-style: italic;
+    max-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
+  .advanced-features {
+    background: var(--space-blue);
+  }
+  
+  .features-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+    margin-top: 3rem;
+  }
+  
+  .advanced-feature {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 2rem;
+    border-radius: 10px;
+    text-align: center;
+    transition: transform 0.3s ease;
+  }
+  
+  .advanced-feature:hover {
+    transform: translateY(-10px);
+  }
+  
+  .advanced-feature svg {
+    width: 50px;
+    height: 50px;
+    margin-bottom: 1rem;
+    color: var(--star-yellow);
+  }
+  
+  .innovation-journey {
+    background: linear-gradient(135deg, var(--space-blue) 0%, #1A2B4A 100%);
+    text-align: center;
+  }
+  
+  .innovation-timeline {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 3rem;
+  }
+  
+  .timeline-item {
+    flex: 1;
+    margin: 0 1rem;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 2rem;
+    border-radius: 10px;
+    transition: transform 0.3s ease;
+  }
+  
+  .timeline-item:hover {
+    transform: translateY(-10px);
+  }
+  
+  .timeline-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+  }
+  
+  .interactive-playground {
+    background: var(--space-blue);
+  }
+  
+  .playground-grid {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 3rem;
+  }
+  
+  .playground-card {
+    text-align: center;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 2rem;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+    position: relative;
+  }
+  
+  .playground-card:hover {
+    transform: scale(1.05);
+  }
+  
+  .playground-tooltip {
+    position: absolute;
+    bottom: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--star-yellow);
+    color: var(--space-blue);
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    white-space: nowrap;
+  }
+  
+  .vision-exploration {
+    background: rgba(255, 255, 255, 0.05);
+  }
+  
+  .vision-cards {
+    display: flex;
+    justify-content: space-between;
+  }
+  
+  .vision-card {
+    flex: 1;
+    margin: 0 1rem;
+    background: var(--space-blue);
+    padding: 2rem;
+    border-radius: 10px;
+    text-align: center;
+  }
+  
+  .vision-card .vision-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem 1.5rem;
+    background: var(--star-yellow);
+    color: var(--space-blue);
+    border: none;
+    border-radius: 50px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: 
+      background-color 0.3s ease, 
+      transform 0.2s ease, 
+      box-shadow 0.3s ease;
+    margin-top: 1rem;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .vision-card .vision-trigger::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      120deg, 
+      transparent, 
+      rgba(255,255,255,0.3), 
+      transparent
+    );
+    transition: all 0.5s ease;
+  }
+  
+  .vision-card .vision-trigger:hover {
+    background: var(--light-blue);
+    color: var(--white);
+    transform: translateY(-3px);
+    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+  }
+  
+  .vision-card .vision-trigger:hover::before {
+    left: 100%;
+  }
+  
+  .vision-card .vision-trigger:active {
+    transform: translateY(1px);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  }
+  
+  .vision-card .vision-trigger::after {
+    content: '→';
+    margin-left: 0.5rem;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+  
+  .vision-card .vision-trigger:hover::after {
+    opacity: 1;
+  }
+  
+  .vision-modal-container {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 1000;
+  }
+  
+  .vision-modal-container.active {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .vision-modal {
+    display: none;
+    background: var(--space-blue);
+    padding: 2rem;
+    border-radius: 10px;
+    max-width: 500px;
+    text-align: center;
+  }
+  
+  .vision-modal.active {
+    display: block;
+  }
+  
+  .enhanced-footer {
+    background-image: url('https://deta.surf/footer-32-yesdither-nomatte.gif');
+    background-size: cover;
+    background-position: center bottom;
+    padding-bottom: 6rem;
+    background-color: #f0f4f8;
+    color: #2c3e50;
+  }
+  
+  .enhanced-footer .container {
+    position: relative;
+    z-index: 2;
+  }
+  
+  .footer-grid {
+    display: flex;
+    justify-content: space-between;
+    padding: 2rem 0;
+  }
+  
+  .footer-column {
+    flex: 1;
+    margin-right: 2rem;
+  }
+  
+  .footer-column h4 {
+    color: #3498db;
+    margin-bottom: 1rem;
+    font-weight: 600;
+  }
+  
+  .footer-column ul {
+    list-style: none;
+    padding: 0;
+  }
+  
+  .footer-column ul li {
+    margin-bottom: 0.5rem;
+  }
+  
+  .footer-column a {
+    color: #34495e;
+    text-decoration: none;
+    transition: color 0.3s ease;
+  }
+  
+  .footer-column a:hover {
+    color: #3498db;
+  }
+  
+  .footer-social {
+    flex: 1;
+  }
+  
+  .social-icons {
+    display: flex;
+    gap: 1rem;
+  }
+  
+  .social-icon {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    background-color: #3498db;
+    color: white;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+  }
+  
+  .social-icon:hover {
+    background-color: #2980b9;
+  }
+  
+  .footer-bottom {
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 1rem 0;
+    text-align: center;
+    color: #34495e;
+  }
+  
+  @media (max-width: 768px) {
+    .footer-grid {
+      flex-direction: column;
+    }
+  
+    .footer-column {
+      margin-right: 0;
+      margin-bottom: 1rem;
+    }
+  }
+  
+  .kuro-hero {
+    background-image: linear-gradient(120deg, #f0f9ff 0%, #cdebff 100%);
+    padding: 4rem 5%;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    color: var(--kuro-dark-text);
+  }
+  
+  .kuro-hero .hero-content {
+    position: relative;
+    z-index: 1;
+  }
+  
+  .kuro-hero h1 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    font-family: 'Noto Sans JP', sans-serif;
+    color: var(--kuro-text-accent);
+  }
+  
+  .kuro-hero p {
+    font-size: 1.2rem;
+    margin-bottom: 2rem;
+    color: var(--kuro-dark-text);
+    opacity: 0.9;
+  }
+  
+  .kuro-hero .cta-button {
+    background-color: #2980b9;  
+    color: white;
+    border: none;
+    padding: 12px 25px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1.1rem;
+    transition: background-color 0.3s ease;
+  }
+  
+  .kuro-hero .cta-button:hover {
+    background-color: #2980b9;
+  }
+  
+  .hero-animation-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .hero-svg {
+    position: absolute;
+    width: 600px;
+    height: 600px;
+    z-index: 0;
+    opacity: 0.5;
+    animation: rotateSakura 20s linear infinite;
+    overflow: visible;
+  }
+  
+  @keyframes rotateSakura {
+    from {transform: rotate(0deg);}
+    to {transform: rotate(360deg);}
+  }
+  
+  .sakura-path {
+    animation: drawSakura 5s ease-in-out infinite alternate;
+    stroke-dasharray: 1000;
+    stroke-dashoffset: 1000;
+    stroke: #ff7fab;  
+  }
+  
+  @keyframes drawSakura {
+    to { stroke-dashoffset: 0; }
+  }
+  
+  .floating-kanji {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+  
+  .floating-kanji .kanji {
+    position: absolute;
+    font-size: 3rem;
+    color: rgba(0, 0, 0, 0.3);  
+    animation: floatKanji 10s linear infinite;
+  }
+  
+  @keyframes floatKanji {
+    0% {transform: translateY(0) translateX(0);}
+    50% {transform: translateY(20px) translateX(10px);}
+    100% {transform: translateY(0) translateX(0);}
+  }
+  
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    .kuro-hero h1 {
+      font-size: 2rem;
+    }
+    
+    .kuro-hero p {
+      font-size: 1rem;
+    }
+    
+    .hero-svg {
+      width: 80%;
+      height: 80%;
+    }
+    
+    .hero-animation-container {
+      align-items: flex-start;
+      justify-content: center;
+    }
+    
+    .floating-kanji {
+      display: none;
+    }
+  }

vbrowser.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Virtual Browser</title>
+    <style>
+        html, body {
+            font-family: 'Noto Sans JP', sans-serif;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            background: linear-gradient(135deg, #1a1a2e, #16213e);
+        }
+
+        #container {
+            width: 100vw;
+            height: 100vh;
+            position: relative;
+        }
+
+        #browserFrame {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+
+        .loading {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.8);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            font-size: 1.2rem;
+        }
+
+        #signoutBtn {
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            padding: 0.5rem 1rem;
+            background: var(--accent-color, #ff6b6b);
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            z-index: 1000;
+        }
+    </style>
+</head>
+<body>
+    <div id="container">
+        <button id="signoutBtn">Sign Out</button>
+    </div>
+    <script>
+        // Check authentication
+        if (!localStorage.getItem('authToken')) {
+            window.close();
+        }
+
+        // Handle sign out
+        document.getElementById('signoutBtn').onclick = async () => {
+            try {
+                const response = await fetch('/signout', { method: 'POST' });
+                if (response.ok) {
+                    localStorage.removeItem('authToken');
+                    window.close();
+                }
+            } catch (error) {
+                console.error('Sign out failed:', error);
+            }
+        };
+
+        // Load browser content
+        (async function loadBrowser() {
+            try {
+                const token = localStorage.getItem('authToken');
+                const response = await fetch('/embed-url', {
+                    headers: { 'Authorization': `Bearer ${token}` }
+                });
+
+                if (!response.ok) throw new Error('Failed to fetch browser URL');
+
+                const { embedURL } = await response.json();
+                const iframe = document.createElement('iframe');
+                iframe.id = 'browserFrame';
+                iframe.src = embedURL;
+                document.getElementById('container').appendChild(iframe);
+            } catch (error) {
+                console.error('Error loading browser:', error);
+                const container = document.getElementById('container');
+                container.innerHTML = `<div class="loading">Failed to load browser: ${error.message}</div>`;
+            }
+        })();
+    </script>
+</body>
+</html>

vercel.json

@@ -0,0 +1,15 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "server.js",
+      "use": "@vercel/node"
+    }
+  ],
+  "routes": [
+    {
+      "src": "/.*",
+      "dest": "server.js"
+    }
+  ]
+}