Spaces:

codewithdhs
/

anycoder-83eb9ff9

Running

App Files Files Community

codewithdhs commited on 11 days ago

Commit

4895b4c

verified ·

1 Parent(s): 8fd6ebb

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +916 -19

index.html CHANGED Viewed

@@ -1,19 +1,916 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>How AnyCoder Works - Interactive Guide</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    :root {
+      --primary: #6366f1;
+      --primary-dark: #4f46e5;
+      --secondary: #ec4899;
+      --accent: #06b6d4;
+      --dark: #0f172a;
+      --darker: #020617;
+      --light: #f8fafc;
+      --gray: #64748b;
+    }
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: var(--darker);
+      color: var(--light);
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+    /* Header */
+    header {
+      background: linear-gradient(135deg, var(--dark) 0%, var(--darker) 100%);
+      padding: 1rem 2rem;
+      position: fixed;
+      width: 100%;
+      top: 0;
+      z-index: 1000;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+    }
+    .header-content {
+      max-width: 1400px;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      font-size: 1.5rem;
+      font-weight: 700;
+      background: linear-gradient(135deg, var(--primary), var(--secondary));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .logo i {
+      background: linear-gradient(135deg, var(--primary), var(--secondary));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .built-with {
+      color: var(--gray);
+      text-decoration: none;
+      font-size: 0.9rem;
+      transition: color 0.3s;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .built-with:hover {
+      color: var(--primary);
+    }
+    /* Hero Section */
+    .hero {
+      padding: 8rem 2rem 4rem;
+      text-align: center;
+      background: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.15) 0%, transparent 50%);
+    }
+    .hero h1 {
+      font-size: clamp(2rem, 5vw, 4rem);
+      margin-bottom: 1rem;
+      background: linear-gradient(135deg, var(--light) 0%, var(--gray) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .hero p {
+      font-size: clamp(1rem, 2vw, 1.25rem);
+      color: var(--gray);
+      max-width: 600px;
+      margin: 0 auto 2rem;
+    }
+    /* Main Content */
+    main {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+    /* Flow Diagram */
+    .flow-section {
+      margin-bottom: 4rem;
+    }
+    .section-title {
+      font-size: 1.75rem;
+      margin-bottom: 2rem;
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+    .section-title i {
+      color: var(--primary);
+    }
+    .flow-container {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 1rem;
+      align-items: center;
+    }
+    .flow-step {
+      background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 1rem;
+      padding: 1.5rem;
+      text-align: center;
+      min-width: 180px;
+      max-width: 220px;
+      transition: all 0.3s ease;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    .flow-step::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(135deg, var(--primary), var(--secondary));
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    .flow-step:hover::before {
+      opacity: 0.1;
+    }
+    .flow-step:hover {
+      transform: translateY(-5px);
+      border-color: var(--primary);
+      box-shadow: 0 10px 40px rgba(99, 102, 241, 0.3);
+    }
+    .flow-step.active {
+      border-color: var(--primary);
+      box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
+    }
+    .flow-icon {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--primary), var(--secondary));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto 1rem;
+      font-size: 1.5rem;
+      position: relative;
+      z-index: 1;
+    }
+    .flow-step h3 {
+      font-size: 1rem;
+      margin-bottom: 0.5rem;
+      position: relative;
+      z-index: 1;
+    }
+    .flow-step p {
+      font-size: 0.85rem;
+      color: var(--gray);
+      position: relative;
+      z-index: 1;
+    }
+    .flow-arrow {
+      font-size: 2rem;
+      color: var(--primary);
+      animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0%,
+      100% {
+        opacity: 0.5;
+        transform: translateX(0);
+      }
+      50% {
+        opacity: 1;
+        transform: translateX(5px);
+      }
+    }
+    /* Details Panel */
+    .details-panel {
+      background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(2, 6, 23, 0.8) 100%);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 1.5rem;
+      padding: 2rem;
+      margin-top: 2rem;
+      min-height: 200px;
+      transition: all 0.5s ease;
+    }
+    .details-panel h3 {
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
+      color: var(--primary);
+    }
+    .details-panel p {
+      color: var(--gray);
+      line-height: 1.8;
+      margin-bottom: 1rem;
+    }
+    .details-panel ul {
+      list-style: none;
+      padding: 0;
+    }
+    .details-panel li {
+      padding: 0.5rem 0;
+      padding-left: 1.5rem;
+      position: relative;
+      color: var(--gray);
+    }
+    .details-panel li::before {
+      content: '→';
+      position: absolute;
+      left: 0;
+      color: var(--primary);
+    }
+    /* Features Grid */
+    .features-section {
+      margin-bottom: 4rem;
+    }
+    .features-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 1.5rem;
+    }
+    .feature-card {
+      background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 1rem;
+      padding: 2rem;
+      transition: all 0.3s ease;
+    }
+    .feature-card:hover {
+      transform: translateY(-5px);
+      border-color: var(--accent);
+      box-shadow: 0 10px 40px rgba(6, 182, 212, 0.2);
+    }
+    .feature-card i {
+      font-size: 2.5rem;
+      margin-bottom: 1rem;
+      background: linear-gradient(135deg, var(--accent), var(--primary));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .feature-card h3 {
+      font-size: 1.25rem;
+      margin-bottom: 0.75rem;
+    }
+    .feature-card p {
+      color: var(--gray);
+      font-size: 0.95rem;
+      line-height: 1.6;
+    }
+    /* Interactive Demo */
+    .demo-section {
+      margin-bottom: 4rem;
+    }
+    .demo-container {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 2rem;
+    }
+    @media (max-width: 768px) {
+      .demo-container {
+        grid-template-columns: 1fr;
+      }
+    }
+    .demo-input,
+    .demo-output {
+      background: var(--dark);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 1rem;
+      overflow: hidden;
+    }
+    .demo-header {
+      background: rgba(99, 102, 241, 0.1);
+      padding: 1rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .demo-header i {
+      color: var(--primary);
+    }
+    .demo-body {
+      padding: 1.5rem;
+      min-height: 200px;
+    }
+    .demo-input textarea {
+      width: 100%;
+      background: transparent;
+      border: none;
+      color: var(--light);
+      font-family: 'Fira Code', monospace;
+      font-size: 0.9rem;
+      resize: none;
+      min-height: 150px;
+      outline: none;
+    }
+    .demo-output .code-block {
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 0.5rem;
+      padding: 1rem;
+      font-family: 'Fira Code', monospace;
+      font-size: 0.85rem;
+      overflow-x: auto;
+      white-space: pre-wrap;
+      color: var(--accent);
+    }
+    .generate-btn {
+      background: linear-gradient(135deg, var(--primary), var(--secondary));
+      border: none;
+      color: white;
+      padding: 1rem 2rem;
+      border-radius: 0.5rem;
+      font-size: 1rem;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin: 1rem auto;
+      transition: all 0.3s ease;
+    }
+    .generate-btn:hover {
+      transform: scale(1.05);
+      box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
+    }
+    .generate-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    /* Tech Stack */
+    .tech-section {
+      margin-bottom: 4rem;
+    }
+    .tech-grid {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 2rem;
+    }
+    .tech-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 1.5rem;
+      background: rgba(255, 255, 255, 0.02);
+      border-radius: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      transition: all 0.3s ease;
+    }
+    .tech-item:hover {
+      background: rgba(99, 102, 241, 0.1);
+      border-color: var(--primary);
+      transform: translateY(-3px);
+    }
+    .tech-item i {
+      font-size: 3rem;
+      color: var(--primary);
+    }
+    .tech-item span {
+      font-size: 0.9rem;
+      color: var(--gray);
+    }
+    /* Animation Classes */
+    .fade-in {
+      animation: fadeIn 0.5s ease forwards;
+    }
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .typing {
+      overflow: hidden;
+      border-right: 2px solid var(--primary);
+      animation: typing 2s steps(40), blink 0.5s step-end infinite alternate;
+    }
+    @keyframes typing {
+      from {
+        width: 0;
+      }
+      to {
+        width: 100%;
+      }
+    }
+    @keyframes blink {
+      50% {
+        border-color: transparent;
+      }
+    }
+    /* Footer */
+    footer {
+      text-align: center;
+      padding: 2rem;
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      color: var(--gray);
+    }
+    footer a {
+      color: var(--primary);
+      text-decoration: none;
+    }
+    footer a:hover {
+      text-decoration: underline;
+    }
+    /* Responsive */
+    @media (max-width: 768px) {
+      .flow-container {
+        flex-direction: column;
+      }
+      .flow-arrow {
+        transform: rotate(90deg);
+      }
+      .flow-step {
+        width: 100%;
+        max-width: 100%;
+      }
+      header {
+        padding: 1rem;
+      }
+      .header-content {
+        flex-direction: column;
+        gap: 0.5rem;
+      }
+    }
+    /* Scrollbar */
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: var(--darker);
+    }
+    ::-webkit-scrollbar-thumb {
+      background: var(--primary);
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--primary-dark);
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="header-content">
+      <div class="logo">
+        <i class="fas fa-code"></i>
+        AnyCoder
+      </div>
+      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
+        <i class="fas fa-rocket"></i>
+        Built with anycoder
+      </a>
+    </div>
+  </header>
+  <section class="hero">
+    <h1>How AnyCoder Works</h1>
+    <p>An interactive guide to understanding the AI-powered code generation model that transforms your ideas into
+      working applications</p>
+  </section>
+  <main>
+    <!-- Flow Diagram Section -->
+    <section class="flow-section">
+      <h2 class="section-title">
+        <i class="fas fa-project-diagram"></i>
+        The Generation Pipeline
+      </h2>
+      <div class="flow-container">
+        <div class="flow-step" data-step="1" onclick="showDetails(1)">
+          <div class="flow-icon">
+            <i class="fas fa-keyboard"></i>
+          </div>
+          <h3>User Input</h3>
+          <p>Your prompt or request</p>
+        </div>
+        <i class="fas fa-chevron-right flow-arrow"></i>
+        <div class="flow-step" data-step="2" onclick="showDetails(2)">
+          <div class="flow-icon">
+            <i class="fas fa-brain"></i>
+          </div>
+          <h3>AI Processing</h3>
+          <p>Understanding context</p>
+        </div>
+        <i class="fas fa-chevron-right flow-arrow"></i>
+        <div class="flow-step" data-step="3" onclick="showDetails(3)">
+          <div class="flow-icon">
+            <i class="fas fa-cogs"></i>
+          </div>
+          <h3>Code Generation</h3>
+          <p>Creating the solution</p>
+        </div>
+        <i class="fas fa-chevron-right flow-arrow"></i>
+        <div class="flow-step" data-step="4" onclick="showDetails(4)">
+          <div class="flow-icon">
+            <i class="fas fa-check-circle"></i>
+          </div>
+          <h3>Output</h3>
+          <p>Ready-to-use code</p>
+        </div>
+      </div>
+      <div class="details-panel" id="detailsPanel">
+        <h3 id="detailsTitle">Click a step to learn more</h3>
+        <p id="detailsText">Select any step in the pipeline above to see detailed information about how that stage
+          works.</p>
+        <ul id="detailsList"></ul>
+      </div>
+    </section>
+    <!-- Features Section -->
+    <section class="features-section">
+      <h2 class="section-title">
+        <i class="fas fa-star"></i>
+        Key Capabilities
+      </h2>
+      <div class="features-grid">
+        <div class="feature-card">
+          <i class="fas fa-language"></i>
+          <h3>Natural Language Understanding</h3>
+          <p>Describe what you want in plain English. The model understands context, intent, and technical requirements
+            from your description.</p>
+        </div>
+        <div class="feature-card">
+          <i class="fas fa-code"></i>
+          <h3>Multi-Language Support</h3>
+          <p>Generate code in HTML, CSS, JavaScript, and more. The model adapts to produce the right code for your
+            needs.</p>
+        </div>
+        <div class="feature-card">
+          <i class="fas fa-mobile-alt"></i>
+          <h3>Responsive Design</h3>
+          <p>All generated UI code includes modern responsive design principles, ensuring your application works on any
+            device.</p>
+        </div>
+        <div class="feature-card">
+          <i class="fas fa-image"></i>
+          <h3>Image Understanding</h3>
+          <p>Upload images and the model can analyze them to better understand your requirements and generate matching
+            code.</p>
+        </div>
+        <div class="feature-card">
+          <i class="fas fa-bolt"></i>
+          <h3>Instant Execution</h3>
+          <p>Generated code is complete and ready to run immediately. No additional setup or configuration needed.</p>
+        </div>
+        <div class="feature-card">
+          <i class="fas fa-palette"></i>
+          <h3>Modern Styling</h3>
+          <p>Uses modern CSS features including flexbox, grid, custom properties, and smooth animations for beautiful
+            interfaces.</p>
+        </div>
+      </div>
+    </section>
+    <!-- Interactive Demo Section -->
+    <section class="demo-section">
+      <h2 class="section-title">
+        <i class="fas fa-play-circle"></i>
+        Try It Yourself (Simulation)
+      </h2>
+      <div class="demo-container">
+        <div class="demo-input">
+          <div class="demo-header">
+            <i class="fas fa-terminal"></i>
+            <span>Your Prompt</span>
+          </div>
+          <div class="demo-body">
+            <textarea id="promptInput" placeholder="Type your request here... e.g., 'Create a simple counter app'">Create a beautiful button that changes color when clicked</textarea>
+          </div>
+        </div>
+        <div class="demo-output">
+          <div class="demo-header">
+            <i class="fas fa-file-code"></i>
+            <span>Generated Code</span>
+          </div>
+          <div class="demo-body">
+            <div class="code-block" id="codeOutput">// Click "Generate" to see the magic happen!</div>
+          </div>
+        </div>
+      </div>
+      <button class="generate-btn" id="generateBtn" onclick="simulateGeneration()">
+                <i class="fas fa-magic"></i>
+                Generate Code
+            </button>
+    </section>
+    <!-- Tech Stack Section -->
+    <section class="tech-section">
+      <h2 class="section-title">
+        <i class="fas fa-layer-group"></i>
+        Technology Stack
+      </h2>
+      <div class="tech-grid">
+        <div class="tech-item">
+          <i class="fab fa-html5"></i>
+          <span>HTML5</span>
+        </div>
+        <div class="tech-item">
+          <i class="fab fa-css3-alt"></i>
+          <span>CSS3</span>
+        </div>
+        <div class="tech-item">
+          <i class="fab fa-js-square"></i>
+          <span>JavaScript</span>
+        </div>
+        <div class="tech-item">
+          <i class="fas fa-robot"></i>
+          <span>AI Model</span>
+        </div>
+        <div class="tech-item">
+          <i class="fas fa-cloud"></i>
+          <span>Cloud API</span>
+        </div>
+        <div class="tech-item">
+          <i class="fas fa-rocket"></i>
+          <span>Hugging Face</span>
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer>
+    <p>
+      Powered by advanced AI technology |
+      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Try AnyCoder</a>
+    </p>
+  </footer>
+  <script>
+    // Step details data
+        const stepDetails = {
+            1: {
+                title: "📝 Step 1: User Input",
+                text: "The process begins when you provide your request. This can be a simple text description of what you want to build, or it can include an image for visual reference.",
+                list: [
+                    "Text prompts describing the desired application",
+                    "Optional image uploads for visual context",
+                    "Natural language - no coding knowledge required",
+                    "Can specify technologies, styles, or features"
+                ]
+            },
+            2: {
+                title: "🧠 Step 2: AI Processing",
+                text: "The AI model analyzes your input using advanced natural language processing. It understands the context, identifies requirements, and plans the code structure.",
+                list: [
+                    "Tokenization and semantic analysis",
+                    "Context understanding and intent recognition",
+                    "Image analysis (if provided) using vision capabilities",
+                    "Planning optimal code architecture"
+                ]
+            },
+            3: {
+                title: "⚙️ Step 3: Code Generation",
+                text: "Based on its understanding, the model generates complete, working code. It applies best practices, modern patterns, and ensures the code is clean and maintainable.",
+                list: [
+                    "HTML structure generation",
+                    "CSS styling with modern features",
+                    "JavaScript functionality implementation",
+                    "Responsive design integration",
+                    "Accessibility considerations"
+                ]
+            },
+            4: {
+                title: "✅ Step 4: Output",
+                text: "The final code is delivered as a complete, ready-to-run solution. You can copy it directly into your project or run it immediately in a browser.",
+                list: [
+                    "Complete, executable HTML file",
+                    "All dependencies included or linked",
+                    "Properly formatted and commented code",
+                    "Ready for immediate use or further customization"
+                ]
+            }
+        };
+        // Show details for selected step
+        function showDetails(step) {
+            // Remove active class from all steps
+            document.querySelectorAll('.flow-step').forEach(el => {
+                el.classList.remove('active');
+            });
+            // Add active class to selected step
+            document.querySelector(`[data-step="${step}"]`).classList.add('active');
+            // Update details panel
+            const details = stepDetails[step];
+            const panel = document.getElementById('detailsPanel');
+            panel.innerHTML = `
+                <h3>${details.title}</h3>
+                <p>${details.text}</p>
+                <ul>
+                    ${details.list.map(item => `<li>${item}</li>`).join('')}
+                </ul>
+            `;
+            panel.classList.add('fade-in');
+            setTimeout(() => panel.classList.remove('fade-in'), 500);
+        }
+        // Simulate code generation
+        function simulateGeneration() {
+            const btn = document.getElementById('generateBtn');
+            const output = document.getElementById('codeOutput');
+            const input = document.getElementById('promptInput').value;
+            btn.disabled = true;
+            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...';
+            // Simulated generated code based on input
+            const generatedCode = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Generated App</title>
+    <style>
+        .magic-button {
+            padding: 1rem 2rem;
+            font-size: 1.2rem;
+            border: none;
+            border-radius: 8px;
+            background: linear-gradient(
+                135deg, #6366f1, #ec4899
+            );
+            color: white;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .magic-button:hover {
+            transform: scale(1.05);
+            box-shadow: 0 10px 30px
+                rgba(99, 102, 241, 0.4);
+        }
+        .magic-button.clicked {
+            background: linear-gradient(
+                135deg, #06b6d4, #10b981
+            );
+        }
+    </style>
+</head>
+<body>
+    <button class="magic-button"
+        onclick="this.classList.toggle('clicked')">
+        Click Me!
+    </button>
+</body>
+</html>`;
+            // Simulate typing effect
+            let i = 0;
+            output.textContent = '';
+            function typeCode() {
+                if (i < generatedCode.length) {
+                    output.textContent += generatedCode.charAt(i);
+                    i++;
+                    setTimeout(typeCode, 10);
+                } else {
+                    btn.disabled = false;
+                    btn.innerHTML = '<i class="fas fa-magic"></i> Generate Code';
+                }
+            }
+            setTimeout(typeCode, 500);
+        }
+        // Auto-select first step on load
+        document.addEventListener('DOMContentLoaded', () => {
+            showDetails(1);
+            // Add scroll animations
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('fade-in');
+                    }
+                });
+            }, { threshold: 0.1 });
+            document.querySelectorAll('.feature-card, .tech-item').forEach(el => {
+                observer.observe(el);
+            });
+        });
+        // Auto-cycle through steps
+        let currentStep = 1;
+        setInterval(() => {
+            currentStep = currentStep >= 4 ? 1 : currentStep + 1;
+            showDetails(currentStep);
+        }, 5000);
+  </script>
+</body>
+</html>