Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cartoon Creator Studio</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; | |
| --secondary: #ec4899; | |
| --accent: #f59e0b; | |
| --dark: #1e293b; | |
| --light: #f8fafc; | |
| --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| --radius: 12px; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: var(--light); | |
| color: var(--dark); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Navigation */ | |
| nav { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| box-shadow: var(--shadow); | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| z-index: 1000; | |
| transition: all 0.3s ease; | |
| } | |
| nav.scrolled { | |
| background: rgba(255, 255, 255, 0.98); | |
| } | |
| .nav-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 2rem; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| list-style: none; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: var(--dark); | |
| font-weight: 500; | |
| transition: color 0.3s ease; | |
| position: relative; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary); | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--primary); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| background: var(--gradient); | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| color: white; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23fff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23fff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>'); | |
| animation: float 20s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-20px) rotate(180deg); } | |
| } | |
| .hero-content { | |
| z-index: 1; | |
| max-width: 600px; | |
| } | |
| .hero h1 { | |
| font-size: clamp(2.5rem, 5vw, 4rem); | |
| margin-bottom: 1rem; | |
| animation: fadeInUp 0.8s ease; | |
| } | |
| .hero p { | |
| font-size: 1.25rem; | |
| margin-bottom: 2rem; | |
| opacity: 0.9; | |
| animation: fadeInUp 0.8s ease 0.2s both; | |
| } | |
| .cta-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| animation: fadeInUp 0.8s ease 0.4s both; | |
| } | |
| .btn { | |
| padding: 1rem 2rem; | |
| border: none; | |
| border-radius: var(--radius); | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| .btn-primary { | |
| background: white; | |
| color: var(--primary); | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: white; | |
| border: 2px solid white; | |
| } | |
| .btn-secondary:hover { | |
| background: white; | |
| color: var(--primary); | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Features Grid */ | |
| .features { | |
| padding: 5rem 0; | |
| background: white; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .section-title h2 { | |
| font-size: 2.5rem; | |
| color: var(--dark); | |
| margin-bottom: 1rem; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .feature-card { | |
| background: white; | |
| border-radius: var(--radius); | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .feature-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: var(--gradient); | |
| transform: translateX(-100%); | |
| transition: transform 0.3s ease; | |
| } | |
| .feature-card:hover::before { | |
| transform: translateX(0); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-icon { | |
| width: 60px; | |
| height: 60px; | |
| background: var(--gradient); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1rem; | |
| font-size: 1.5rem; | |
| color: white; | |
| } | |
| .feature-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| color: var(--dark); | |
| } | |
| .feature-card p { | |
| color: #64748b; | |
| line-height: 1.8; | |
| } | |
| /* Individual Pages */ | |
| .page { | |
| display: none; | |
| min-height: 100vh; | |
| padding-top: 80px; | |
| } | |
| .page.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .page-header { | |
| background: var(--gradient); | |
| color: white; | |
| padding: 2rem 0; | |
| margin-bottom: 2rem; | |
| } | |
| .page-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| .upload-area { | |
| border: 2px dashed #cbd5e1; | |
| border-radius: var(--radius); | |
| padding: 3rem; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .upload-area:hover { | |
| border-color: var(--primary); | |
| background: #f8fafc; | |
| } | |
| .upload-area i { | |
| font-size: 3rem; | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| } | |
| .style-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 1rem; | |
| margin: 2rem 0; | |
| } | |
| .style-option { | |
| padding: 1rem; | |
| border: 2px solid #e2e8f0; | |
| border-radius: var(--radius); | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .style-option:hover { | |
| border-color: var(--primary); | |
| background: #f8fafc; | |
| } | |
| .style-option.selected { | |
| border-color: var(--primary); | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .workspace { | |
| background: white; | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| padding: 2rem; | |
| margin: 2rem 0; | |
| } | |
| .timeline { | |
| background: #f1f5f9; | |
| border-radius: var(--radius); | |
| padding: 1rem; | |
| margin: 1rem 0; | |
| overflow-x: auto; | |
| } | |
| .timeline-bar { | |
| display: flex; | |
| gap: 0.5rem; | |
| min-width: max-content; | |
| } | |
| .timeline-item { | |
| background: white; | |
| border-radius: 4px; | |
| padding: 0.5rem 1rem; | |
| font-size: 0.875rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .timeline-item:hover { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| } | |
| .hero h1 { | |
| font-size: 2rem; | |
| } | |
| .cta-buttons { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .features-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Loading Animation */ | |
| .loader { | |
| display: inline-block; | |
| width: 40px; | |
| height: 40px; | |
| border: 3px solid #f3f3f3; | |
| border-top: 3px solid var(--primary); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Back Button */ | |
| .back-btn { | |
| position: fixed; | |
| top: 100px; | |
| left: 20px; | |
| background: white; | |
| border: none; | |
| padding: 0.5rem 1rem; | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| z-index: 100; | |
| } | |
| .back-btn:hover { | |
| transform: translateX(-5px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav id="navbar"> | |
| <div class="nav-container"> | |
| <div class="logo">Cartoon Creator Studio</div> | |
| <ul class="nav-links"> | |
| <li><a href="#home" onclick="showPage('home')">Home</a></li> | |
| <li><a href="#features">Features</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#" id="authLink" onclick="toggleAuthModal()">Register / Login</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <!-- Home Page --> | |
| <div id="home" class="page active"> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="hero-content"> | |
| <h1>Bring Your Photos to Life</h1> | |
| <p>Transform your photos into animated cartoon characters with AI-powered tools. Create, animate, and share your unique characters.</p> | |
| <div class="cta-buttons"> | |
| <a href="#features" class="btn btn-primary">Get Started</a> | |
| <a href="#about" class="btn btn-secondary">Learn More</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Powerful Features</h2> | |
| <p>Everything you need to create amazing cartoon animations</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card" onclick="showPage('upload')"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-upload"></i> | |
| </div> | |
| <h3>Image Upload & Cartoon Conversion</h3> | |
| <p>Upload your photo and instantly convert it to cartoon style with various artistic styles to choose from.</p> | |
| </div> | |
| <div class="feature-card" onclick="showPage('character')"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-user-circle"></i> | |
| </div> | |
| <h3>Character Sheet Generation</h3> | |
| <p>Automatically generate character sheets with multiple views and poses for consistent animation.</p> | |
| </div> | |
| <div class="feature-card" onclick="showPage('assets')"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-cut"></i> | |
| </div> | |
| <h3>Asset Extraction</h3> | |
| <p>Intelligently separate body parts and assets for detailed animation control.</p> | |
| </div> | |
| <div class="feature-card" onclick="showPage('rigging')"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-bone"></i> | |
| </div> | |
| <h3>Rigging Interface</h3> | |
| <p>Easy-to-use rigging tools to prepare your character for animation.</p> | |
| </div> | |
| <div class="feature-card" onclick="showPage('animation')"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-play"></i> | |
| </div> | |
| <h3>Animation Engine</h3> | |
| <p>Create smooth animations with presets and motion capture capabilities.</p> | |
| </div> | |
| <div class="feature-card" onclick="showPage('studio')"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-video"></i> | |
| </div> | |
| <h3>Studio & Scene Building</h3> | |
| <p>Build complete scenes with backgrounds, multiple characters, and export as videos.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Individual Feature Pages --> | |
| <div id="upload" class="page"> | |
| <button class="back-btn" onclick="showPage('home')"> | |
| <i class="fas fa-arrow-left"></i> Back | |
| </button> | |
| <div class="page-header"> | |
| <div class="container"> | |
| <h1>Image Upload & Cartoon Conversion</h1> | |
| <p>Transform your photos into stunning cartoon characters</p> | |
| </div> | |
| </div> | |
| <div class="page-content"> | |
| <div class="upload-area" onclick="document.getElementById('fileInput').click()"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| <h3>Click to upload, drag & drop, or use camera</h3> | |
| <p>Supports JPG, PNG, WebP up to 10MB</p> | |
| <input type="file" id="fileInput" accept="image/*" style="display: none;"> | |
| <button class="btn btn-primary" onclick="startCamera(event)" style="margin-top: 1rem;"> | |
| <i class="fas fa-camera"></i> Take Photo | |
| </button> | |
| <video id="cameraPreview" style="display: none; width: 100%; max-width: 300px; margin-top: 1rem;"></video> | |
| <button id="captureBtn" style="display: none;" class="btn btn-primary" onclick="capturePhoto()"> | |
| <i class="fas fa-camera"></i> Capture | |
| </button> | |
| </div> | |
| <div style="margin: 2rem 0;"> | |
| <h3>Choose Your Style</h3> | |
| <div class="style-grid"> | |
| <div class="style-option" onclick="selectStyle(this)"> | |
| <i class="fas fa-laugh"></i> | |
| <p>Classic Cartoon</p> | |
| </div> | |
| <div class="style-option" onclick="selectStyle(this)"> | |
| <i class="fas fa-star"></i> | |
| <p>Anime Style</p> | |
| </div> | |
| <div class="style-option" onclick="selectStyle(this)"> | |
| <i class="fas fa-palette"></i> | |
| <p>Comic Book</p> | |
| </div> | |
| <div class="style-option" onclick="selectStyle(this)"> | |
| <i class="fas fa-heart"></i> | |
| <p>Disney Style</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="btn btn-primary" style="width: 100%; padding: 1rem;"> | |
| Convert to Cartoon | |
| </button> | |
| </div> | |
| </div> | |
| <div id="character" class="page"> | |
| <button class="back-btn" onclick="showPage('home')"> | |
| <i class="fas fa-arrow-left"></i> Back | |
| </button> | |
| <div class="page-header"> | |
| <div class="container"> | |
| <h1>Character Sheet Generation</h1> | |
| <p>Create comprehensive character sheets for animation</p> | |
| </div> | |
| </div> | |
| <div class="page-content"> | |
| <div class="workspace"> | |
| <h3>Character Views</h3> | |
| <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1rem 0;"> | |
| <div class="style-option"> | |
| <i class="fas fa-user"></i> | |
| <p>Front View</p> | |
| </div> | |
| <div class="style-option"> | |
| <i class="fas fa-user-ninja"></i> | |
| <p>¾ View</p> | |
| </div> | |
| <div class="style-option"> | |
| <i class="fas fa-user-secret"></i> | |
| <p>Side View</p> | |
| </div> | |
| <div class="style-option"> | |
| <i class="fas fa-user-astronaut"></i> | |
| <p>Back View</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="assets" class="page"> | |
| <button class="back-btn" onclick="showPage('home')"> | |
| <i class="fas fa-arrow-left"></i> Back | |
| </button> | |
| <div class="page-header"> | |
| <div class="container"> | |
| <h1>Asset Extraction</h1> | |
| <p>AI-powered automatic detection and extraction of character parts</p> | |
| </div> | |
| </div> | |
| <div class="page-content"> | |
| <div class="upload-area" onclick="detectAssets()" style="cursor: pointer;"> | |
| <i class="fas fa-magic"></i> | |
| <h3>Click to auto-detect assets</h3> | |
| <p>AI will identify all character parts automatically</p> | |
| </div> | |
| <div class="workspace"> | |
| <h3>Detected Assets</h3> | |
| <div id="detectionProgress" style="text-align: center; padding: 1rem; display: none;"> | |
| <div class="loader"></div> | |
| <p>Detecting assets...</p> | |
| </div> | |
| <div id="assetGrid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1rem;"> | |
| <div class="style-option detected-asset" data-asset="eyes"> | |
| <i class="fas fa-eye"></i> | |
| <p>Eyes</p> | |
| <small class="confidence">95%</small> | |
| </div> | |
| <div class="style-option detected-asset" data-asset="mouth"> | |
| <i class="fas fa-smile"></i> | |
| <p>Mouth</p> | |
| <small class="confidence">92%</small> | |
| </div> | |
| <div class="style-option detected-asset" data-asset="hands"> | |
| <i class="fas fa-hand-paper"></i> | |
| <p>Hands</p> | |
| <small class="confidence">89%</small> | |
| </div> | |
| <div class="style-option detected-asset" data-asset="feet"> | |
| <i class="fas fa-shoe-prints"></i> | |
| <p>Feet</p> | |
| <small class="confidence">87%</small> | |
| </div> | |
| <div class="style-option detected-asset" data-asset="legs"> | |
| <i class="fas fa-walking"></i> | |
| <p>Legs</p> | |
| <small class="confidence">94%</small> | |
| </div> | |
| <div class="style-option detected-asset" data-asset="hair"> | |
| <i class="fas fa-cut"></i> | |
| <p>Hair</p> | |
| <small class="confidence">96%</small> | |
| </div> | |
| <div class="style-option detected-asset" data-asset="torso"> | |
| <i class="fas fa-user"></i> | |
| <p>Torso</p> | |
| <small class="confidence">98%</small> | |
| </div> | |
| <div class="style-option detected-asset" data-asset="arms"> | |
| <i class="fas fa-hand-rock"></i> | |
| <p>Arms</p> | |
| <small class="confidence">91%</small> | |
| </div> | |
| </div> | |
| <div style="margin-top: 2rem;"> | |
| <button class="btn btn-primary" onclick="refineDetection()"> | |
| <i class="fas fa-cog"></i> Refine Detection | |
| </button> | |
| <button class="btn btn-secondary" onclick="exportAssets()"> | |
| <i class="fas fa-download"></i> Export Assets | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="rigging" class="page"> | |
| <button class="back-btn" onclick="showPage('home')"> | |
| <i class="fas fa-arrow-left"></i> Back | |
| </button> | |
| <div class="page-header"> | |
| <div class="container"> | |
| <h1>Rigging Interface</h1> | |
| <p>Set up bones and joints for smooth animation</p> | |
| </div> | |
| </div> | |
| <div class="page-content"> | |
| <div class="workspace"> | |
| <h3>Rigging Workspace</h3> | |
| <div style="height: 400px; background: #f8fafc; border-radius: var(--radius); display: flex; align-items: center; justify-content: center;"> | |
| <p>Drag and drop joints to rig your character</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="animation" class="page"> | |
| <button class="back-btn" onclick="showPage('home')"> | |
| <i class="fas fa-arrow-left"></i> Back | |
| </button> | |
| <div class="page-header"> | |
| <div class="container"> | |
| <h1>Animation Engine</h1> | |
| <p>Bring your characters to life with smooth animations</p> | |
| </div> | |
| </div> | |
| <div class="page-content"> | |
| <div class="workspace"> | |
| <h3>Animation Presets</h3> | |
| <div class="style-grid"> | |
| <div class="style-option"> | |
| <i class="fas fa-walking"></i> | |
| <p>Walk</p> | |
| </div> | |
| <div class="style-option"> | |
| <i class="fas fa-running"></i> | |
| <p>Run</p> | |
| </div> | |
| <div class="style-option"> | |
| <i class="fas fa-hand-peace"></i> | |
| <p>Wave</p> | |
| </div> | |
| <div class="style-option"> | |
| <i class="fas fa-bed"></i> | |
| <p>Idle</p> | |
| </div> | |
| </div> | |
| <div class="timeline"> | |
| <div class="timeline-bar"> | |
| <div class="timeline-item">Frame 1</div> | |
| <div class="timeline-item">Frame 2</div> | |
| <div class="timeline-item">Frame 3</div> | |
| <div class="timeline-item">Frame 4</div> | |
| <div class="timeline-item">Frame 5</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="studio" class="page"> | |
| <button class="back-btn" onclick="showPage('home')"> | |
| <i class="fas fa-arrow-left"></i> Back | |
| </button> | |
| <div class="page-header"> | |
| <div class="container"> | |
| <h1>Studio & Scene Building</h1> | |
| <p>Create complete animated scenes</p> | |
| </div> | |
| </div> | |
| <div class="page-content"> | |
| <div class="workspace"> | |
| <h3>Scene Editor</h3> | |
| <div style="height: 400px; background: #f8fafc; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;"> | |
| <p>Scene editing area</p> | |
| </div> | |
| <button class="btn btn-primary">Export Video</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Navigation scroll effect | |
| window.addEventListener('scroll', () => { | |
| const navbar = document.getElementById('navbar'); | |
| if (window.scrollY > 50) { | |
| navbar.classList.add('scrolled'); | |
| } else { | |
| navbar.classList.remove('scrolled'); | |
| } | |
| }); | |
| // Page navigation | |
| function showPage(pageId) { | |
| const pages = document.querySelectorAll('.page'); | |
| pages.forEach(page => page.classList.remove('active')); | |
| const targetPage = document.getElementById(pageId); | |
| if (targetPage) { | |
| targetPage.classList.add('active'); | |
| window.scrollTo(0, 0); | |
| } | |
| } | |
| // Style selection | |
| function selectStyle(element) { | |
| document.querySelectorAll('.style-option').forEach(opt => opt.classList.remove('selected')); | |
| element.classList.add('selected'); | |
| } | |
| // File upload handling | |
| document.getElementById('fileInput').addEventListener('change', (e) => { | |
| const file = e.target.files[0]; | |
| if (file) { | |
| // Handle file upload | |
| console.log('File selected:', file.name); | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |