Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>anycoder | AI Manga Image Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <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=Bangers&family=Inter:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| comic: ['"Bangers"', 'cursive'], | |
| inter: ['"Inter"', 'sans-serif'], | |
| jp: ['"Noto Sans JP"', 'sans-serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| :root { | |
| --bg-base: #0c0c14; | |
| --bg-panel: #13131f; | |
| --bg-card: #1a1a28; | |
| --bg-input: #161623; | |
| --border-subtle: rgba(255,255,255,0.06); | |
| --border-accent: rgba(100, 200, 255, 0.2); | |
| --text-main: #ecebf3; | |
| --text-muted: #7a7a94; | |
| --text-faint: #4a4a5e; | |
| --cyan-glow: #00e5ff; | |
| --cyan-soft: rgba(0, 229, 255, 0.15); | |
| --cyan-wash: rgba(0, 229, 255, 0.06); | |
| --purple-glow: #a855f7; | |
| --purple-wash: rgba(168, 85, 247, 0.08); | |
| --pink-soft: rgba(255, 105, 180, 0.15); | |
| --red-glow: #ff3366; | |
| --red-wash: rgba(255, 51, 102, 0.1); | |
| --success: #10b981; | |
| --error: #ef4444; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: var(--bg-base); | |
| color: var(--text-main); | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| line-height: 1.6; | |
| } | |
| /* ---- Scrollbar ---- */ | |
| ::-webkit-scrollbar { width: 6px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: rgba(100,200,255,0.15); border-radius: 10px; } | |
| ::-webkit-scrollbar-thumb:hover { background: rgba(100,200,255,0.3); } | |
| /* ---- Hero Canvas ---- */ | |
| .hero-canvas-wrap { | |
| position: absolute; | |
| inset: 0; | |
| overflow: hidden; | |
| z-index: 1; | |
| pointer-events: none; | |
| } | |
| /* ---- Noise Texture ---- */ | |
| .noise { | |
| position: fixed; | |
| inset: 0; | |
| opacity: 0.035; | |
| z-index: 9999; | |
| pointer-events: none; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); | |
| background-size: 200px 200px; | |
| } | |
| /* ---- Radial Glow ---- */ | |
| .radial-glow { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(140px); | |
| opacity: 0.4; | |
| pointer-events: none; | |
| animation: glowPulse 6s ease-in-out infinite alternate; | |
| } | |
| .radial-glow.cyan { | |
| background: var(--cyan-glow); | |
| width: 500px; height: 500px; | |
| top: -10%; left: -5%; | |
| } | |
| .radial-glow.purple { | |
| background: var(--purple-glow); | |
| width: 400px; height: 400px; | |
| bottom: -5%; right: -8%; | |
| animation-delay: -3s; | |
| } | |
| @keyframes glowPulse { | |
| 0% { opacity: 0.2; transform: scale(1); } | |
| 100% { opacity: 0.45; transform: scale(1.15); } | |
| } | |
| /* ---- Floating Particles ---- */ | |
| .particle { | |
| position: absolute; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| will-change: transform, opacity; | |
| } | |
| /* ---- Scattered grid pattern ---- */ | |
| .grid-bg { | |
| background-image: | |
| linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px); | |
| background-size: 60px 60px; | |
| } | |
| /* ---- Glass Panel ---- */ | |
| .glass-panel { | |
| background: rgba(19, 19, 31, 0.6); | |
| backdrop-filter: blur(24px); | |
| -webkit-backdrop-filter: blur(24px); | |
| border: 1px solid var(--border-subtle); | |
| } | |
| /* ---- Neon Input ---- */ | |
| .neon-input { | |
| background: var(--bg-input); | |
| border: 1.5px solid rgba(255,255,255,0.07); | |
| color: var(--text-main); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .neon-input:hover { border-color: rgba(0,229,255,0.2); } | |
| .neon-input:focus { | |
| outline: none; | |
| border-color: var(--cyan-glow); | |
| box-shadow: 0 0 20px rgba(0,229,255,0.08), inset 0 0 30px rgba(0,229,255,0.03); | |
| background: #1a1a2a; | |
| } | |
| /* ---- Glow Button ---- */ | |
| .glow-btn { | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| border: 1.5px solid transparent; | |
| } | |
| .glow-btn::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, var(--cyan-glow), var(--purple-glow)); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| z-index: 0; | |
| border-radius: inherit; | |
| } | |
| .glow-btn:hover::before { opacity: 0.15; } | |
| .glow-btn:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 8px 32px rgba(0,229,255,0.15); | |
| border-color: rgba(0,229,255,0.3); | |
| } | |
| .glow-btn:active { transform: translateY(0) scale(0.98); } | |
| /* ---- Anime Speed Lines ---- */ | |
| .speed-line { | |
| position: absolute; | |
| background: linear-gradient(90deg, transparent, rgba(0,229,255,0.12), transparent); | |
| transform-origin: center; | |
| pointer-events: none; | |
| } | |
| /* ---- Anime Action Star ---- */ | |
| .action-star { | |
| position: absolute; | |
| pointer-events: none; | |
| animation: starPop 0.5s ease-out forwards; | |
| } | |
| @keyframes starPop { | |
| 0% { transform: scale(0) rotate(0deg); opacity: 1; } | |
| 60% { transform: scale(1.2) rotate(90deg); opacity: 0.8; } | |
| 100% { transform: scale(1) rotate(180deg); opacity: 0; } | |
| } | |
| /* ---- Card Hover ---- */ | |
| .hover-lift { | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .hover-lift:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 30px rgba(0,229,255,0.06); | |
| } | |
| /* ---- Scanlines ---- */ | |
| .scanlines { | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| transparent, | |
| transparent 2px, | |
| rgba(0,0,0,0.02) 2px, | |
| rgba(0,0,0,0.02) 4px | |
| ); | |
| pointer-events: none; | |
| } | |
| /* ---- Manga Border ---- */ | |
| .manga-border { | |
| position: relative; | |
| border: 2px solid var(--cyan-glow); | |
| } | |
| .manga-border::before { | |
| content: ''; | |
| position: absolute; | |
| inset: -4px; | |
| border: 1px dashed rgba(0,229,255,0.3); | |
| pointer-events: none; | |
| } | |
| /* ---- Bento Grid ---- */ | |
| .bento-card { | |
| background: rgba(19, 19, 31, 0.4); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .bento-card:hover { | |
| border-color: rgba(0,229,255,0.2); | |
| transform: translateY(-3px); | |
| box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 40px rgba(0,229,255,0.04); | |
| } | |
| /* ---- Loading Text Shimmer ---- */ | |
| @keyframes shimmer { | |
| 0% { background-position: -200% center; } | |
| 100% { background-position: 200% center; } | |
| } | |
| .shimmer-text { | |
| background: linear-gradient(90deg, var(--text-muted), var(--cyan-glow), var(--text-muted)); | |
| background-size: 200% auto; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| animation: shimmer 2.5s linear infinite; | |
| } | |
| /* ---- Pulse Ring ---- */ | |
| @keyframes pulseRing { | |
| 0% { transform: scale(0.8); opacity: 0.6; } | |
| 100% { transform: scale(1.5); opacity: 0; } | |
| } | |
| .pulse-ring { | |
| animation: pulseRing 1.5s ease-out infinite; | |
| } | |
| /* ---- Tooltip ---- */ | |
| .tip { | |
| position: relative; | |
| } | |
| .tip::after { | |
| content: attr(data-tip); | |
| position: absolute; | |
| bottom: calc(100% + 8px); | |
| left: 50%; | |
| transform: translateX(-50%) scale(0.9); | |
| background: var(--bg-panel); | |
| color: var(--text-muted); | |
| padding: 6px 12px; | |
| border-radius: 8px; | |
| font-size: 11px; | |
| border: 1px solid var(--border-subtle); | |
| white-space: nowrap; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: all 0.2s; | |
| z-index: 100; | |
| box-shadow: 0 4px 16px rgba(0,0,0,0.4); | |
| } | |
| .tip:hover::after { | |
| opacity: 1; | |
| transform: translateX(-50%) scale(1); | |
| } | |
| /* ---- Anime Line ---- */ | |
| .anime-line { | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--cyan-glow), transparent); | |
| opacity: 0.2; | |
| } | |
| /* ---- Floating 3D card ---- */ | |
| @keyframes float3d { | |
| 0%, 100% { transform: translateY(0) rotateX(2deg); } | |
| 50% { transform: translateY(-15px) rotateX(-2deg); } | |
| } | |
| .float3d { | |
| animation: float3d 6s ease-in-out infinite; | |
| } | |
| /* ---- Typewriter cursor ---- */ | |
| .type-cursor::after { | |
| content: '|'; | |
| animation: blink 0.8s infinite; | |
| color: var(--cyan-glow); | |
| } | |
| @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } | |
| /* ---- Nav Link Underline ---- */ | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -4px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--cyan-glow); | |
| border-radius: 2px; | |
| transition: width 0.3s; | |
| } | |
| .nav-link:hover::after { width: 100%; } | |
| /* ---- Responsive overrides ---- */ | |
| @media (max-width: 640px) { | |
| .hero-title { font-size: 2.5rem ; } | |
| } | |
| </style> | |
| </head> | |
| <body class="grid-bg"> | |
| <!-- Noise Overlay --> | |
| <div class="noise"></div> | |
| <!-- ============ FIXED TOP NAVIGATION ============ --> | |
| <nav class="fixed top-0 left-0 right-0 z-50 glass-panel border-b border-white/[0.04]"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between"> | |
| <!-- Logo --> | |
| <a href="#" class="flex items-center gap-2.5 group"> | |
| <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-[#00e5ff] to-[#a855f7] flex items-center justify-center shadow-lg shadow-[rgba(0,229,255,0.15)] group-hover:shadow-[rgba(0,229,255,0.3)] transition-all"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> | |
| <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/> | |
| </svg> | |
| </div> | |
| <div class="flex flex-col"> | |
| <span class="text-[15px] font-bold tracking-tight text-white/90 leading-none">anycoder</span> | |
| <span class="text-[9px] tracking-[0.25em] uppercase text-[#00e5ff]/60 font-semibold leading-tight">AI Manga</span> | |
| </div> | |
| </a> | |
| <!-- Center Links (desktop) --> | |
| <div class="hidden md:flex items-center gap-8"> | |
| <a href="#generate" class="nav-link text-[13px] text-white/50 hover:text-white/80 transition-colors tracking-wide">Generate</a> | |
| <a href="#gallery" class="nav-link text-[13px] text-white/50 hover:text-white/80 transition-colors tracking-wide">Gallery</a> | |
| <a href="#how-it-works" class="nav-link text-[13px] text-white/50 hover:text-white/80 transition-colors tracking-wide">How It Works</a> | |
| <a href="#pricing" class="nav-link text-[13px] text-white/50 hover:text-white/80 transition-colors tracking-wide">Pricing</a> | |
| </div> | |
| <!-- Right Side --> | |
| <div class="flex items-center gap-3"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" | |
| class="hidden sm:flex items-center gap-2 px-4 py-2 rounded-lg bg-[#00e5ff]/10 border border-[#00e5ff]/20 text-[#00e5ff] text-[13px] font-medium hover:bg-[#00e5ff]/15 hover:border-[#00e5ff]/35 transition-all group"> | |
| <span class="relative flex h-2 w-2"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#00e5ff] opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-2 w-2 bg-[#00e5ff]"></span> | |
| </span> | |
| Built with anycoder | |
| </a> | |
| <button class="md:hidden p-2 text-white/50 hover:text-white/80"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"> | |
| <line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- ============ HERO SECTION ============ --> | |
| <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-16"> | |
| <!-- Hero background canvas --> | |
| <div class="hero-canvas-wrap"> | |
| <canvas id="heroCanvas" style="width:100%;height:100%"></canvas> | |
| </div> | |
| <!-- Radial Glows --> | |
| <div class="radial-glow cyan"></div> | |
| <div class="radial-glow purple"></div> | |
| <div class="relative z-10 text-center px-4 max-w-5xl mx-auto"> | |
| <!-- Badge --> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#00e5ff]/5 border border-[#00e5ff]/15 mb-10 animate-[fadeIn_0.8s_ease-out]"> | |
| <span class="relative flex h-2 w-2"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#00e5ff] opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-2 w-2 bg-[#00e5ff]"></span> | |
| </span> | |
| <span class="text-[12px] font-medium text-[#00e5ff]/80 tracking-wide">Now Generating in Real-time</span> | |
| </div> | |
| <!-- Title --> | |
| <h1 class="hero-title font-comic text-6xl sm:text-7xl md:text-8xl text-white leading-none mb-6 tracking-wide animate-[fadeIn_1s_ease-out_0.2s_both]"> | |
| AI Manga | |
| <br> | |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#00e5ff] via-[#a855f7] to-[#ff3366] animate-[shimmer_4s_linear_infinite]" style="background-size:200% auto"> | |
| Image Generator | |
| </span> | |
| </h1> | |
| <!-- Subtitle --> | |
| <p class="text-[15px] sm:text-[17px] text-white/35 max-w-2xl mx-auto mb-12 leading-relaxed font-light animate-[fadeIn_1.2s_ease-out_0.4s_both]"> | |
| Transform your imagination into stunning manga artwork instantly. Just describe your scene and watch as AI brings your anime vision to life with breathtaking detail and authentic Japanese manga aesthetics. | |
| </p> | |
| <!-- CTA Buttons --> | |
| <div class="flex flex-col sm:flex-row items-center justify-center gap-4 animate-[fadeIn_1.4s_ease-out_0.6s_both]"> | |
| <a href="#generate" class="glow-btn group relative inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-[#00e5ff] to-[#00b8d4] text-black font-bold rounded-xl text-[15px] shadow-[0_8px_32px_rgba(0,229,255,0.25)]"> | |
| <span class="relative z-10 flex items-center gap-3"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> | |
| <path d="M12 5l0 14M5 12l14 0"/> | |
| </svg> | |
| Start Creating | |
| </span> | |
| </a> | |
| <a href="#how-it-works" class="group inline-flex items-center gap-2.5 px-7 py-4 border border-white/10 rounded-xl text-white/60 font-medium text-[15px] hover:bg-white/5 hover:text-white/80 hover:border-white/20 transition-all"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/> | |
| </svg> | |
| Watch Demo | |
| </a> | |
| </div> | |
| <!-- Hero Preview Cards (floating 3D style) --> | |
| <div class="mt-20 flex items-center justify-center gap-4 sm:gap-6 animate-[fadeIn_1.6s_ease-out_0.8s_both] perspective-[1200px]"> | |
| <div class="float3d hidden sm:block" style="animation-delay:-2s"> | |
| <div class="w-[140px] h-[180px] rounded-xl overflow-hidden border border-white/10 shadow-2xl shadow-black/40"> | |
| <img src="https://images.unsplash.com/photo-1578632767115-351597cf2477?w=300&h=400&fit=crop&q=80" alt="Anime girl" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="float3d" style="animation-delay:-1s"> | |
| <div class="w-[180px] h-[240px] rounded-xl overflow-hidden border-2 border-[#00e5ff]/20 shadow-2xl shadow-black/50 relative manga-border"> | |
| <img src="https://images.unsplash.com/photo-1542051841857-5f90071e7989?w=400&h=530&fit=crop&q=80" alt="Anime warrior" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 right-2 px-2 py-0.5 rounded-md bg-black/60 backdrop-blur-sm text-[10px] font-bold text-[#00e5ff] border border-[#00e5ff]/20">NEW</div> | |
| </div> | |
| </div> | |
| <div class="float3d hidden md:block" style="animation-delay:-3s"> | |
| <div class="w-[140px] h-[180px] rounded-xl overflow-hidden border border-white/10 shadow-2xl shadow-black/40"> | |
| <img src="https://images.unsplash.com/photo-1607604276583-eef5a0d8b1f9?w=300&h=400&fit=crop&q=80" alt="Anime landscape" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scroll indicator --> | |
| <div class="mt-16 flex flex-col items-center gap-2 animate-bounce"> | |
| <span class="text-[11px] text-white/20 uppercase tracking-[0.2em]">Scroll to explore</span> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="text-white/20"> | |
| <path d="M7 13l5 5 5-5M7 6l5 5 5-5"/> | |
| </svg> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ============ GENERATOR SECTION ============ --> | |
| <section id="generate" class="relative py-20"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-transparent via-[#00e5ff]/[0.015] to-transparent pointer-events-none"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <!-- Section Header --> | |
| <div class="text-center mb-12"> | |
| <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#a855f7]/5 border border-[#a855f7]/15 mb-4"> | |
| <span class="text-[11px] font-semibold uppercase tracking-widest text-[#a855f7]/70">Generator</span> | |
| </div> | |
| <h2 class="font-comic text-4xl sm:text-5xl text-white mb-3 tracking-wide">Create Your Manga</h2> | |
| <p class="text-[14px] text-white/30 max-w-lg mx-auto">Describe your vision. Adjust the parameters. Watch AI transform your words into manga art.</p> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-6 lg:gap-8"> | |
| <!-- LEFT PANEL: Controls --> | |
| <div class="lg:w-[420px] flex-shrink-0 space-y-5"> | |
| <!-- Prompt Card --> | |
| <div class="bento-card p-6 space-y-5"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-[#00e5ff]/15 to-[#a855f7]/10 flex items-center justify-center border border-[#00e5ff]/10"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00e5ff" stroke-width="2" stroke-linecap="round"> | |
| <circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/> | |
| </svg> | |
| </div> | |
| <div> | |
| <h3 class="text-[15px] font-semibold text-white/90">Prompt</h3> | |
| <p class="text-[11px] text-white/30">Describe your manga scene</p> | |
| </div> | |
| </div> | |
| <div class="relative group"> | |
| <textarea | |
| id="promptInput" | |
| class="neon-input w-full min-h-[120px] rounded-xl p-4 text-[14px] resize-none font-light placeholder-white/15 leading-relaxed" | |
| placeholder="e.g., A cyberpunk samurai girl with neon blue katana standing on a rainy Tokyo rooftop at night, detailed manga style..." | |
| ></textarea> | |
| <div class="absolute bottom-3 right-3 flex gap-1.5"> | |
| <button class="tip p-1.5 rounded-lg hover:bg-white/5 text-white/20 hover:text-white/50 transition-all" data-tip="Clear" onclick="document.getElementById('promptInput').value=''"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> | |
| </button> | |
| </div> | |
| <div class="absolute top-3 right-3"> | |
| <button id="randomPrompt" class="tip p-1.5 rounded-lg hover:bg-white/5 text-white/20 hover:text-white/50 transition-all" data-tip="Random Prompt"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l5 5M4 4l5 5"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quick Suggestions --> | |
| <div class="flex flex-wrap gap-2"> | |
| <button onclick="setPrompt('A brave female warrior with flowing hair, battle-scarred armor, lightning effects, dramatic pose, manga style')" | |
| class="px-3 py-1.5 rounded-lg bg-white/[0.03] border border-white/[0.06] text-[11px] text-white/40 hover:bg-[#00e5ff]/10 hover:text-[#00e5ff]/80 hover:border-[#00e5ff]/20 transition-all cursor-pointer"> | |
| Female Warrior | |
| </button> | |
| <button onclick="setPrompt('Cute anime girl with cat ears, cherry blossom petals, soft pink color palette, shoujo manga style')" | |
| class="px-3 py-1.5 rounded-lg bg-white/[0.03] border border-white/[0.06] text-[11px] text-white/40 hover:bg-[#ff69b4]/10 hover:text-[#ff69b4]/80 hover:border-[#ff69b4]/20 transition-all cursor-pointer"> | |
| Kawaii Cat Girl | |
| </button> | |
| <button onclick="setPrompt('Dark mysterious ninja assassin, hidden in shadows, glowing red eyes, dark city alley, seinen manga style')" | |
| class="px-3 py-1.5 rounded-lg bg-white/[0.03] border border-white/[0.06] text-[11px] text-white/40 hover:bg-[#ff3366]/10 hover:text-[#ff3366]/80 hover:border-[#ff3366]/20 transition-all cursor-pointer"> | |
| Dark Ninja | |
| </button> | |
| <button onclick="setPrompt('Futuristic mecha robot piloted by a young boy, space battle scene, explosions, mecha anime style')" | |
| class="px-3 py-1.5 rounded-lg bg-white/[0.03] border border-white/[0.06] text-[11px] text-white/40 hover:bg-[#a855f7]/10 hover:text-[#a855f7]/80 hover:border-[#a855f7]/20 transition-all cursor-pointer"> | |
| Mecha Battle | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Parameters Card --> | |
| <div class="bento-card p-6 space-y-5"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-[#a855f7]/15 to-[#ff3366]/10 flex items-center justify-center border border-[#a855f7]/10"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#a855f7" stroke-width="2" stroke-linecap="round"> | |
| <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 000 .33c0 .93-.76 1.68-1.69 1.68h-1.72M9.31 5.75L8.5 2.68M14.69 5.75L15.5 2.68M2.82 15.69a1.65 1.65 0 01.33 0 1.68 1.68 0 011.69-1.69h1.72M9.31 18.25l.81 3.07M14.69 18.25l-.81 3.07M5.69 9.31L2.68 8.5M18.31 9.31l3.01-.81M2.82 8.31a1.65 1.65 0 01-.33 0A1.68 1.68 0 011.65 7.5h1.72"/> | |
| </svg> | |
| </div> | |
| <h3 class="text-[15px] font-semibold text-white/90">Parameters</h3> | |
| </div> | |
| <button id="resetParams" class="tip text-[11px] text-white/25 hover:text-white/50 transition-colors" data-tip="Reset to defaults">Reset</button> | |
| </div> | |
| <!-- Style --> | |
| <div class="space-y-2.5"> | |
| <div class="flex items-center justify-between"> | |
| <label class="text-[13px] text-white/50 font-medium">Manga Style</label> | |
| <span id="styleValue" class="text-[12px] text-[#00e5ff]">Shonen</span> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="style-chip active px-3.5 py-2 rounded-lg text-[12px] font-medium border border-[#00e5ff]/30 bg-[#00e5ff]/10 text-[#00e5ff] transition-all" data-style="shonen">Shonen</button> | |
| <button class="style-chip px-3.5 py-2 rounded-lg text-[12px] font-medium border border-white/[0.06] bg-transparent text-white/40 hover:bg-white/[0.04] hover:text-white/60 transition-all" data-style="shoujo">Shoujo</button> | |
| <button class="style-chip px-3.5 py-2 rounded-lg text-[12px] font-medium border border-white/[0.06] bg-transparent text-white/40 hover:bg-white/[0.04] hover:text-white/60 transition-all" data-style="seinen">Seinen</button> | |
| <button class="style-chip px-3.5 py-2 rounded-lg text-[12px] font-medium border border-white/[0.06] bg-transparent text-white/40 hover:bg-white/[0.04] hover:text-white/60 transition-all" data-style="josei">Josei</button> | |
| <button class="style-chip px-3.5 py-2 rounded-lg text-[12px] font-medium border border-white/[0.06] bg-transparent text-white/40 hover:bg-white/[0.04] hover:text-white/60 transition-all" data-style="chibi">Chibi</button> | |
| </div> | |
| </div> | |
| <div class="anime-line"></div> | |
| <!-- Aspect Ratio --> | |
| <div class="space-y-2.5"> | |
| <div class="flex items-center justify-between"> | |
| <label class="text-[13px] text-white/50 font-medium">Aspect Ratio</label> | |
| <span id="aspectValue" class="text-[12px] text-[#a855f7]">1:1 Square</span> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button class="aspect-chip active flex-1 py-2.5 rounded-lg text-[12px] font-medium border border-[#a855f7]/30 bg-[#a855f7]/10 text-[#a855f7] transition-all" data-aspect="1:1" data-w="512" data-h="512">1:1</button> | |
| <button class="aspect-chip flex-1 py-2.5 rounded-lg text-[12px] font-medium border border-white/[0.06] bg-transparent text-white/40 hover:bg-white/[0.04] hover:text-white/60 transition-all" data-aspect="3:4" data-w="512" data-h="768">3:4</button> | |
| <button class="aspect-chip flex-1 py-2.5 rounded-lg text-[12px] font-medium border border-white/[0.06] bg-transparent text-white/40 hover:bg-white/[0.04] hover:text-white/60 transition-all" data-aspect="16:9" data-w="1024" data-h="640">16:9</button> | |
| <button class="aspect-chip flex-1 py-2.5 rounded-lg text-[12px] font-medium border border-white/[0.06] bg-transparent text-white/40 hover:bg-white/[0.04] hover:text-white/60 transition-all" data-aspect="9:16" data-w="640" data-h="1024">9:16</button> | |
| </div> | |
| </div> | |
| <div class="anime-line"></div> | |
| <!-- Steps Slider --> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <label class="text-[13px] text-white/50 font-medium">Quality Steps</label> | |
| <span id="stepsValue" class="text-[12px] text-white/50 tabular-nums">25 steps</span> | |
| </div> | |
| <div class="relative"> | |
| <input type="range" id="stepsRange" min="15" max="50" value="25" class="w-full h-[3px] rounded-full appearance-none cursor-pointer" style="background:linear-gradient(90deg,#00e5ff 50%,rgba(255,255,255,0.08) 50%)"> | |
| <style> | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 16px; height: 16px; | |
| border-radius: 50%; | |
| background: #00e5ff; | |
| cursor: pointer; | |
| box-shadow: 0 0 12px rgba(0,229,255,0.4), 0 0 0 4px rgba(0,229,255,0.1); | |
| transition: box-shadow 0.2s; | |
| } | |
| input[type="range"]::-webkit-slider-thumb:hover { | |
| box-shadow: 0 0 20px rgba(0,229,255,0.6), 0 0 0 6px rgba(0,229,255,0.15); | |
| } | |
| </style> | |
| </div> | |
| <div class="flex justify-between text-[10px] text-white/20"> | |
| <span>Fast</span><span>Better</span> | |
| </div> | |
| </div> | |
| <div class="anime-line"></div> | |
| <!-- Negative Prompt --> | |
| <div class="space-y-2"> | |
| <div class="flex items-center gap-2"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-white/20"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> | |
| <label class="text-[13px] text-white/50 font-medium">Negative Prompt</label> | |
| </div> | |
| <input type="text" id="negativePrompt" | |
| class="neon-input w-full rounded-xl px-4 py-3 text-[13px] placeholder-white/15" | |
| placeholder="e.g., blurry, low quality, bad anatomy, watermark..." | |
| > | |
| </div> | |
| </div> | |
| <!-- Generate Button --> | |
| <button id="generateBtn" class="glow-btn relative w-full py-4 rounded-xl bg-gradient-to-r from-[#00e5ff] to-[#0099cc] text-black font-bold text-[15px] shadow-[0_8px_32px_rgba(0,229,255,0.2)] flex items-center justify-center gap-2.5 cursor-pointer overflow-hidden"> | |
| <span id="btnContent" class="relative z-10 flex items-center gap-2.5"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"> | |
| <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/> | |
| </svg> | |
| Generate Manga Art | |
| </span> | |
| <span id="btnSpinner" class="hidden relative z-10 flex items-center gap-2.5"> | |
| <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> | |
| <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> | |
| <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> | |
| </svg> | |
| <span id="loadingText" class="shimmer-text type-cursor font-medium">Generating</span> | |
| </span> | |
| </button> | |
| </div> | |
| <!-- RIGHT PANEL: Preview --> | |
| <div class="flex-1 min-w-0"> | |
| <div class="bento-card overflow-hidden h-full min-h-[520px] flex flex-col relative"> | |
| <!-- Preview Toolbar --> | |
| <div class="flex items-center |