Spaces:
Running
Running
| <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> |