Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cartropicrart — AI Art & Text Studio</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=DM+Sans:ital,opsz,wght@0,9..40,300;400;500;600;700&family=DM+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['"DM Sans"', 'system-ui', 'sans-serif'], | |
| mono: ['"DM Mono"', 'monospace'], | |
| serif: ['"Playfair Display"', 'serif'], | |
| }, | |
| colors: { | |
| sand: { | |
| 50: '#FEFCF9', | |
| 100: '#FDF8F1', | |
| 200: '#FAF0E3', | |
| 300: '#F5E6D0', | |
| }, | |
| ink: { | |
| 50: '#F8F7F5', | |
| 100: '#EDEBE6', | |
| 200: '#D4D0C8', | |
| 300: '#B5AFA4', | |
| 400: '#8E877B', | |
| 500: '#6B6459', | |
| 600: '#4A443C', | |
| 700: '#35302A', | |
| 800: '#24201C', | |
| 900: '#191714', | |
| }, | |
| clay: { | |
| light: '#D4A882', | |
| DEFAULT: '#C8936B', | |
| dark: '#B07E56', | |
| }, | |
| sage: { | |
| light: '#9EB5A0', | |
| DEFAULT: '#7FA382', | |
| dark: '#5E7D61', | |
| }, | |
| coral: { | |
| light: '#E8A398', | |
| DEFAULT: '#D48378', | |
| dark: '#BA6A5F', | |
| }, | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| :root { | |
| --sidebar-w: 280px; | |
| --ease-out: cubic-bezier(0.22, 1, 0.36, 1); | |
| --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| body { | |
| font-family: 'DM Sans', system-ui, sans-serif; | |
| background: #FDF8F1; | |
| color: #35302A; | |
| overflow-x: hidden; | |
| } | |
| /* ---- Custom Scrollbar ---- */ | |
| ::-webkit-scrollbar { | |
| width: 7px; | |
| height: 7px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(52, 48, 42, 0.15); | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(52, 48, 42, 0.3); | |
| } | |
| /* ---- Animations ---- */ | |
| @keyframes breathe { | |
| 0%, 100% { opacity: 0.6; } | |
| 50% { opacity: 1; } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-8px); } | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: -200% 0; } | |
| 100% { background-position: 200% 0; } | |
| } | |
| @keyframes blob { | |
| 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } | |
| 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } | |
| } | |
| @keyframes pulse-ring { | |
| 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(200, 147, 107, 0.4); } | |
| 70% { transform: scale(1); box-shadow: 0 0 0 12px rgba(200, 147, 107, 0); } | |
| 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(200, 147, 107, 0); } | |
| } | |
| @keyframes slideUpFade { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes spin-slow { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| .animate-breathe { animation: breathe 3s ease-in-out infinite; } | |
| .animate-float { animation: float 5s ease-in-out infinite; } | |
| .animate-shimmer { background-size: 200% 100%; animation: shimmer 2s linear infinite; } | |
| .animate-blob { animation: blob 8s ease-in-out infinite; } | |
| .animate-pulse-ring { animation: pulse-ring 2s ease-in-out infinite; } | |
| .animate-spin-slow { animation: spin-slow 12s linear infinite; } | |
| /* ---- Glass Surface ---- */ | |
| .glass { | |
| background: rgba(253, 248, 241, 0.75); | |
| backdrop-filter: blur(24px) saturate(1.3); | |
| -webkit-backdrop-filter: blur(24px) saturate(1.3); | |
| border: 1px solid rgba(255, 255, 255, 0.5); | |
| } | |
| .glass-strong { | |
| background: rgba(253, 248, 241, 0.92); | |
| backdrop-filter: blur(32px) saturate(1.5); | |
| -webkit-backdrop-filter: blur(32px) saturate(1.5); | |
| border: 1px solid rgba(255, 255, 255, 0.6); | |
| } | |
| .glass-panel { | |
| background: rgba(255, 255, 255, 0.55); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| } | |
| /* ---- Canvas Noise Texture Overlay ---- */ | |
| .noise-overlay { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 9999; | |
| opacity: 0.025; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); | |
| } | |
| /* ---- Generative Canvas Background ---- */ | |
| #bgCanvas { | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| opacity: 0.45; | |
| } | |
| /* ---- Sidebar ---- */ | |
| .sidebar { | |
| width: var(--sidebar-w); | |
| transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out); | |
| } | |
| .sidebar.collapsed { | |
| width: 72px; | |
| } | |
| .sidebar-nav-item { | |
| position: relative; | |
| transition: all 0.3s var(--ease-out); | |
| } | |
| .sidebar-nav-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 50%; | |
| transform: translateY(-50%) scaleY(0); | |
| width: 3px; | |
| height: 60%; | |
| background: #C8936B; | |
| border-radius: 0 3px 3px 0; | |
| transition: transform 0.35s var(--ease-out); | |
| } | |
| .sidebar-nav-item.active::before { | |
| transform: translateY(-50%) scaleY(1); | |
| } | |
| .sidebar-nav-item:hover { | |
| background: rgba(200, 147, 107, 0.06); | |
| } | |
| .sidebar-nav-item.active { | |
| background: rgba(200, 147, 107, 0.1); | |
| color: #B07E56; | |
| } | |
| .sidebar-nav-item i { | |
| transition: transform 0.3s var(--ease-spring); | |
| } | |
| .sidebar-nav-item:hover i { | |
| transform: scale(1.15) rotate(-5deg); | |
| } | |
| .sidebar.collapsed .sidebar-nav-item span { | |
| opacity: 0; | |
| transform: translateX(-8px); | |
| pointer-events: none; | |
| } | |
| .sidebar.collapsed .sidebar-nav-item { | |
| justify-content: center; | |
| } | |
| /* ---- Tool Cards ---- */ | |
| .tool-card { | |
| transition: all 0.45s var(--ease-out); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .tool-card::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(200, 147, 107, 0.08), transparent 60%); | |
| opacity: 0; | |
| transition: opacity 0.4s ease; | |
| pointer-events: none; | |
| } | |
| .tool-card:hover::after { | |
| opacity: 1; | |
| } | |
| .tool-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 12px 40px rgba(52, 48, 42, 0.08), 0 2px 8px rgba(52, 48, 42, 0.04); | |
| border-color: rgba(200, 147, 107, 0.25); | |
| } | |
| /* ---- Generator Preview ---- */ | |
| .preview-stage { | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 24px; | |
| } | |
| .preview-stage::before { | |
| content: ''; | |
| position: absolute; | |
| inset: -2px; | |
| border-radius: inherit; | |
| background: linear-gradient(135deg, rgba(200,147,107,0.3), rgba(127,163,130,0.2), rgba(212,131,120,0.15)); | |
| z-index: -1; | |
| opacity: 0; | |
| transition: opacity 0.5s ease; | |
| } | |
| .preview-stage.generating::before { | |
| opacity: 1; | |
| animation: shimmer 3s linear infinite; | |
| background-size: 400% 400%; | |
| } | |
| /* ---- Generated Image ---- */ | |
| .generated-img-wrap { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .generated-img-wrap img { | |
| transition: transform 0.6s var(--ease-out), filter 0.6s ease; | |
| } | |
| .generated-img-wrap:hover img { | |
| transform: scale(1.03); | |
| filter: brightness(1.02) contrast(1.02); | |
| } | |
| .generated-img-wrap .img-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(transparent 60%, rgba(36,32,28,0.7)); | |
| opacity: 0; | |
| transition: opacity 0.35s ease; | |
| display: flex; | |
| align-items: flex-end; | |
| justify-content: center; | |
| padding-bottom: 16px; | |
| gap: 8px; | |
| } | |
| .generated-img-wrap:hover .img-overlay { | |
| opacity: 1; | |
| } | |
| /* ---- Hero ---- */ | |
| .hero-gradient-text { | |
| background: linear-gradient(135deg, #35302A 0%, #6B6459 30%, #C8936B 60%, #7FA382 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| background-size: 200% 200%; | |
| animation: shimmer 8s ease infinite; | |
| } | |
| .hero-molecule { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .hero-molecule:nth-child(2) { | |
| animation-delay: -2s; | |
| animation-duration: 7s; | |
| } | |
| .hero-molecule:nth-child(3) { | |
| animation-delay: -4s; | |
| animation-duration: 5.5s; | |
| } | |
| /* ---- Input ---- */ | |
| .prompt-input { | |
| background: rgba(255, 255, 255, 0.7); | |
| border: 1.5px solid rgba(52, 48, 42, 0.1); | |
| transition: all 0.35s var(--ease-out); | |
| } | |
| .prompt-input:focus { | |
| background: white; | |
| border-color: rgba(200, 147, 107, 0.4); | |
| box-shadow: 0 0 0 4px rgba(200, 147, 107, 0.08), 0 4px 20px rgba(52, 48, 42, 0.06); | |
| } | |
| /* ---- Chip ---- */ | |
| .chip { | |
| transition: all 0.25s var(--ease-spring); | |
| border: 1px solid transparent; | |
| } | |
| .chip:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 3px 10px rgba(52, 48, 42, 0.06); | |
| } | |
| .chip.active { | |
| border-color: rgba(200, 147, 107, 0.5); | |
| background: rgba(200, 147, 107, 0.1); | |
| color: #8E877B; | |
| font-weight: 500; | |
| } | |
| /* ---- Badge ---- */ | |
| .ai-badge { | |
| background: linear-gradient(135deg, #C8936B, #D48378); | |
| color: white; | |
| font-size: 10px; | |
| font-weight: 600; | |
| padding: 2px 7px; | |
| border-radius: 100px; | |
| letter-spacing: 0.5px; | |
| text-transform: uppercase; | |
| } | |
| /* ---- Gallery Masonry ---- */ | |
| .masonry { | |
| columns: 4 280px; | |
| column-gap: 16px; | |
| } | |
| .masonry > * { | |
| break-inside: avoid; | |
| margin-bottom: 16px; | |
| } | |
| /* ---- Progress Bar for generation ---- */ | |
| .progress-track { | |
| height: 3px; | |
| background: rgba(52, 48, 42, 0.08); | |
| border-radius: 100px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #C8936B, #D48378, #9EB5A0, #C8936B); | |
| background-size: 300% 100%; | |
| border-radius: 100px; | |
| width: 0%; | |
| transition: width 0.3s linear; | |
| animation: shimmer 2s linear infinite; | |
| } | |
| /* ---- Orb loading ---- */ | |
| .loading-orb { | |
| width: 48px; | |
| height: 48px; | |
| position: relative; | |
| } | |
| .loading-orb::before, | |
| .loading-orb::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 50%; | |
| background: conic-gradient(transparent, #C8936B, #7FA382, transparent); | |
| mask: radial-gradient(farthest-side, transparent 60%, black 61%); | |
| -webkit-mask: radial-gradient(farthest-side, transparent 60%, black 61%); | |
| } | |
| .loading-orb::before { | |
| animation: spin-slow 2s linear infinite; | |
| } | |
| .loading-orb::after { | |
| animation: spin-slow 2s linear infinite reverse; | |
| inset: 6px; | |
| opacity: 0.5; | |
| } | |
| /* ---- Tooltip (custom) ---- */ | |
| .tt { | |
| position: relative; | |
| } | |
| .tt::after { | |
| content: attr(data-tip); | |
| position: absolute; | |
| bottom: calc(100% + 8px); | |
| left: 50%; | |
| transform: translateX(-50%) scale(0.9); | |
| background: #35302A; | |
| color: #FAF0E3; | |
| padding: 6px 12px; | |
| border-radius: 8px; | |
| font-size: 12px; | |
| white-space: nowrap; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: all 0.25s var(--ease-out); | |
| z-index: 50; | |
| } | |
| .tt:hover::after { | |
| opacity: 1; | |
| transform: translateX(-50%) scale(1); | |
| } | |
| /* ---- Section entrance ---- */ | |
| .entrance { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.7s var(--ease-out); | |
| } | |
| .entrance.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* ---- Stagger ---- */ | |
| .stagger > * { | |
| opacity: 0; | |
| transform: translateY(16px); | |
| } | |
| .stagger.visible > *:nth-child(1) { animation: slideUpFade 0.5s 0.05s forwards var(--ease-out); } | |
| .stagger.visible > *:nth-child(2) { animation: slideUpFade 0.5s 0.1s forwards var(--ease-out); } | |
| .stagger.visible > *:nth-child(3) { animation: slideUpFade 0.5s 0.15s forwards var(--ease-out); } | |
| .stagger.visible > *:nth-child(4) { animation: slideUpFade 0.5s 0.2s forwards var(--ease-out); } | |
| .stagger.visible > *:nth-child(5) { animation: slideUpFade 0.5s 0.25s forwards var(--ease-out); } | |
| .stagger.visible > *:nth-child(6) { animation: slideUpFade 0.5s 0.3s forwards var(--ease-out); } | |
| /* ---- Mobile nav overlay ---- */ | |
| .mobile-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(36, 32, 28, 0.3); | |
| backdrop-filter: blur(4px); | |
| z-index: 40; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| .mobile-overlay.active { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| /* ---- Footer link ---- */ | |
| .footer-link { | |
| position: relative; | |
| } | |
| .footer-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 0; | |
| height: 1px; | |
| background: #C8936B; | |
| transition: width 0.3s var(--ease-out); | |
| } | |
| .footer-link:hover::after { | |
| width: 100%; | |
| } | |
| /* ---- Toast ---- */ | |
| .toast { | |
| transform: translateX(120%); | |
| transition: transform 0.5s var(--ease-spring); | |
| } | |
| .toast.show { | |
| transform: translateX(0); | |
| } | |
| /* ---- Decorative shapes ---- */ | |
| .deco-blob { | |
| position: absolute; | |
| filter: blur(80px); | |
| pointer-events: none; | |
| opacity: 0.5; | |
| } | |
| /* ---- Canvas-based image (used for AI generation) ---- */ | |
| canvas.generated-canvas { | |
| border-radius: 20px; | |
| box-shadow: 0 8px 32px rgba(52, 48, 42, 0.1); | |
| } | |
| /* ---- Responsive ---- */ | |
| @media (max-width: 1024px) { | |
| .masonry { | |
| columns: 3 240px; | |
| } | |
| .sidebar { | |
| position: fixed; | |
| left: 0; | |
| top: 0; | |
| height: 100vh; | |
| z-index: 45; | |
| transform: translateX(-100%); | |
| } | |
| .sidebar.open { | |
| transform: translateX(0); | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .masonry { | |
| columns: 2 200px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .masonry { | |
| columns: 1; | |
| } | |
| } | |
| /* ---- Kinetic type effect ---- */ | |
| .kinetic-char { | |
| display: inline-block; | |
| transition: transform 0.3s var(--ease-spring); | |
| } | |
| .kinetic-char:hover { | |
| transform: translateY(-4px) scale(1.1); | |
| color: #C8936B; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen relative"> | |
| <!-- Noise texture overlay --> | |
| <div class="noise-overlay"></div> | |
| <!-- Generative background canvas --> | |
| <canvas id="bgCanvas"></canvas> | |
| <!-- Decorative blobs --> | |
| <div class="deco-blob w-[500px] h-[500px] bg-clay/20 -top-48 -right-48 rounded-full"></div> | |
| <div class="deco-blob w-[400px] h-[400px] bg-sage/20 top-1/3 -left-32 rounded-full"></div> | |
| <div class="deco-blob w-[350px] h-[350px] bg-coral/15 bottom-20 right-1/4 rounded-full"></div> | |
| <!-- Mobile overlay --> | |
| <div class="mobile-overlay" id="mobileOverlay"></div> | |
| <!-- ---- SIDEBAR ---- --> | |
| <aside class="sidebar glass-strong fixed left-0 top-0 h-screen z-50 flex flex-col" id="sidebar"> | |
| <!-- Brand --> | |
| <div class="p-6 flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-2xl bg-gradient-to-br from-clay to-coral flex items-center justify-center shadow-lg shadow-clay/20 shrink-0"> | |
| <i class="fa-solid fa-shapes text-white text-sm"></i> | |
| </div> | |
| <div class="overflow-hidden whitespace-nowrap transition-all duration-500" id="brandText"> | |
| <div class="font-serif font-bold text-xl tracking-tight text-ink-800">Cartropicrart</div> | |
| <div class="text-[11px] text-ink-400 font-medium tracking-wide mt-0.5">AI Art & Text Studio</div> | |
| </div> | |
| <button id="toggleSidebar" class="ml-auto w-8 h-8 rounded-xl hover:bg-ink-100 flex items-center justify-center transition-colors lg:hidden"> | |
| <i class="fa-solid fa-chevron-left text-ink-400 text-xs"></i> | |
| </button> | |
| </div> | |
| <!-- Tools nav --> | |
| <nav class="flex-1 px-3 space-y-0.5"> | |
| <div class="px-4 py-2 text-[10px] uppercase tracking-[0.15em] font-semibold text-ink-400" id="toolsLabel">AI Tools</div> | |
| <button class="sidebar-nav-item active w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-ink-700" data-view="home" onclick="switchView('home')"> | |
| <div class="w-8 h-8 rounded-lg bg-clay/10 flex items-center justify-center shrink-0"> | |
| <i class="fa-solid fa-house text-clay text-xs"></i> | |
| </div> | |
| <span class="whitespace-nowrap transition-all duration-300">Dashboard</span> | |
| </button> | |
| <button class="sidebar-nav-item w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-ink-500" data-view="image" onclick="switchView('image')"> | |
| <div class="w-8 h-8 rounded-lg bg-sage/10 flex items-center justify-center shrink-0"> | |
| <i class="fa-solid fa-image text-sage-dark text-xs"></i> | |
| </div> | |
| <span class="whitespace-nowrap transition-all duration-300">Image Gen</span> | |
| </button> | |
| <button class="sidebar-nav-item w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-ink-500" data-view="text" onclick="switchView('text')"> | |
| <div class="w-8 h-8 rounded-lg bg-coral/10 flex items-center justify-center shrink-0"> | |
| <i class="fa-solid fa-pen-nib text-coral-dark text-xs"></i> | |
| </div> | |
| <span class="whitespace-nowrap transition-all duration-300">Text Gen</span> | |
| </button> | |
| <button class="sidebar-nav-item w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-ink-500" data-view="gallery" onclick="switchView('gallery')"> | |
| <div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center shrink-0"> | |
| <i class="fa-solid fa-layer-group text-indigo-400 text-xs"></i> | |
| </div> | |
| <span class="whitespace-nowrap transition-all duration-300">Gallery</span> | |
| </button> | |
| <button class="sidebar-nav-item w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-ink-500" data-view="sketch" onclick="switchView('sketch')"> | |
| <div class="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center shrink-0"> | |
| <i class="fa-solid fa-palette text-amber-500 text-xs"></i> | |
| </div> | |
| <span class="whitespace-nowrap transition-all duration-300">AI Sketch</span> | |
| </button> | |
| <div class="px-4 py-2 mt-6 text-[10px] uppercase tracking-[0.15em] font-semibold text-ink-400" id="recentsLabel">Recent</div> | |
| <button class="sidebar-nav-item w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-xs text-ink-400" onclick="openInImage('Cyberpunk cityscape at twilight with holographic billboards')"> | |
| <div class="w-7 h-7 rounded-lg bg-gradient-to-br from-violet-200 to-violet-400 flex items-center justify-center shrink-0"> | |
| <i class="fa-solid fa-wand-magic-sparkles text-white text-[10px]"></i> | |
| </div> | |
| <span class="whitespace-nowrap transition-all duration-300 line-clamp-1">Cyberpunk cityscape...</span> | |
| </button> | |
| <button class="sidebar-nav-item w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-xs text-ink-400" onclick="openInText('Write a poem about autumn leaves falling')"> | |
| <div class="w-7 h-7 rounded-lg bg-gradient-to-br from-orange-200 to-orange-400 flex items-center justify-center shrink-0"> | |
| <i class="fa-solid fa-leaf text-white text-[10px]"></i> | |
| </div> | |
| <span class="whitespace-nowrap transition-all duration-300 line-clamp-1">Autumn poem...</span> | |
| </button> | |
| <button class="sidebar-nav-item w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-xs text-ink-400" onclick="openInImage('Dreamy watercolor portrait of a fox in a forest')"> | |
| <div class="w-7 h-7 rounded-lg bg-gradient-to-br from-rose-200 to-rose-400 flex items-center justify-center shrink-0"> | |
| <i class="fa-solid fa-droplet text-white text-[10px]"></i> | |
| </div> | |
| <span class="whitespace-nowrap transition-all duration-300 line-clamp-1">Watercolor fox...</span> | |
| </button> | |
| </nav> | |
| <!-- Bottom --> | |
| <div class="p-4 border-t border-ink-100/50"> | |
| <div class="flex items-center gap-3 p-3 rounded-2xl bg-ink-50/80"> | |
| <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-clay-light to-clay flex items-center justify-center shrink-0"> | |
| <span class="text-white font-bold text-xs">YO</span> | |
| </div> | |
| <div class="overflow-hidden whitespace-nowrap transition-all duration-500 flex-1" id="userText"> | |
| <div class="text-sm font-medium text-ink-700">You</div> | |
| <div class="text-[11px] text-ink-400">Free plan · 12/20 tokens</div> | |
| </div> | |
| <div class="overflow-hidden whitespace-nowrap transition-all duration-500" id="upgradeBtn"> | |
| <button class="text-[11px] bg-ink-800 text-sand-100 px-3 py-1.5 rounded-full font-medium hover:bg-ink-900 transition-colors"> | |
| Upgrade | |
| </button> | |
| </div> | |
| </div> | |
| <button id="sidebarCollapse" class="hidden lg:flex w-full mt-3 items-center justify-center gap-2 text-ink-400 hover:text-ink-600 transition-colors text-xs py-1.5 rounded-lg hover:bg-ink-50"> | |
| <i class="fa-solid fa-chevron-left text-[10px] transition-transform duration-300" id="collapseIcon"></i> | |
| <span id="collapseLabel" class="transition-all duration-300">Collapse</span> | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- ---- MAIN CONTENT ---- --> | |
| <main class="lg:ml-[280px] min-h-screen relative z-10" id="mainContent"> | |
| <!-- ---- HEADER ---- --> | |
| <header class="sticky top-0 z-30 glass-strong px-5 py-3 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <button class="lg:hidden w-9 h-9 rounded-xl hover:bg-ink-50 flex items-center justify-center transition-colors" onclick="toggleMobileSidebar()"> | |
| <i class="fa-solid fa-bars text-ink-500"></i> | |
| </button> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="group flex items-center gap-2.5 px-3 py-1.5 rounded-full bg-ink-800/5 hover:bg-clay/10 transition-all duration-300"> | |
| <i class="fa-solid fa-code text-clay text-xs group-hover:scale-110 transition-transform"></i> | |
| <span class="text-[13px] text-ink-600 font-medium group-hover:text-clay-dark transition-colors">Built with anycoder</span> | |
| </a> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <button class="w-9 h-9 rounded-xl hover:bg-ink-50 flex items-center justify-center transition-colors relative" onclick="showToast('Notifications coming soon!')"> | |
| <i class="fa-regular fa-bell text-ink-500 text-sm"></i> | |
| <span class="absolute top-1.5 right-1.5 w-2 h-2 bg-coral rounded-full border-2 border-sand-100 animate-pulse-ring"></span> | |
| </button> | |
| <button class="w-9 h-9 rounded-xl hover:bg-ink-50 flex items-center justify-center transition-colors" onclick="showToast('Search coming soon!')"> | |
| <i class="fa-solid fa-magnifying-glass text-ink-500 text-sm"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- ---- HERO ---- --> | |
| <section class="relative px-5 pt-8 pb-4 max-w-[1600px] mx-auto"> | |
| <div class="glass rounded-3xl p-8 lg:p-12 relative overflow-hidden entrance visible"> | |
| <!-- Animated shapes --> | |
| <div class="absolute top-6 right-6 w-32 h-32 hero-molecule"> | |
| <svg viewBox="0 0 120 120" fill="none"> | |
| <circle cx="60" cy="60" r="45" stroke="rgba(200,147,107,0.15)" stroke-width="1" stroke-dasharray="4 8"/> | |
| <circle cx="60" cy="60" r="30" fill="rgba(200,147,107,0.05)"/> | |
| <circle cx="85" cy="35" r="8" fill="rgba(127,163,130,0.25)"/> | |
| <circle cx="35" cy="85" r="6" fill="rgba(212,131,120,0.25)"/> | |
| </svg> | |
| </div> | |
| <div class="absolute bottom-8 right-24 w-20 h-20 hero-molecule"> | |
| <svg viewBox="0 0 80 80" fill="none"> | |
| <rect x="15" y="15" width="50" height="50" rx="12" stroke="rgba(212,131,120,0.12)" stroke-width="1.5"/> | |
| <rect x="25" y="25" width="30" height="30" rx="8" fill="rgba(127,163,130,0.06)"/> | |
| </svg> | |
| </div> | |
| <div class="absolute top-16 right-48 w-16 h-16 hero-molecule hidden lg:block"> | |
| <svg viewBox="0 0 60 60" fill="none"> | |
| <polygon points="30,5 55,52 5,52" stroke="rgba(200,147,107,0.1)" stroke-width="1.2"/> | |
| <polygon points="30,15 50,45 10,45" fill="rgba(200,147,107,0.04)"/> | |
| </svg> | |
| </div> | |
| <div class="relative z-10 max-w-2xl"> | |
| <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-clay/8 mb-5"> | |
| <span class="w-1.5 h-1.5 rounded-full bg-clay animate-breathe"></span> | |
| <span class="text-xs font-medium text-clay-dark tracking-wide">AI Studio Live</span> | |
| </div> | |
| <h1 class="font-serif text-4xl lg:text-6xl font-medium text-ink-900 leading-[1.15] tracking-tight mb-4"> | |
| Generate <span class="hero-gradient-text">art</span>,<br> | |
| craft <span class="hero-gradient-text">narratives</span>,<br> | |
| shape <span class="hero-gradient-text">ideas</span>. | |
| </h1> | |
| <p class="text-ink-500 text-base lg:text-lg leading-relaxed max-w-lg mb-7 font-light"> | |
| Your creative canvas powered by artificial intelligence. Transform imagination into stunning visuals and compelling text in seconds. | |
| </p> | |
| <div class="flex items-center gap-3"> | |
| <button onclick="switchView('image')" class="group px-6 py-3 rounded-2xl bg-gradient-to-r from-ink-800 to-ink-700 text-sand-100 font-medium text-sm hover:shadow-xl hover:shadow-ink-800/20 transition-all duration-400 flex items-center gap-2.5"> | |
| <span>Start Creating</span> | |
| <i class="fa-solid fa-arrow-right text-xs group-hover:translate-x-1 transition-transform"></i> | |
| </button> | |
| <button onclick="showToast('Quick tour coming soon!')" class="px-5 py-3 rounded-2xl border border-ink-200/80 text-ink-600 font-medium text-sm hover:border-clay/40 hover:bg-clay/5 transition-all duration-300"> | |
| Take a Tour | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ---- QUICK TOOLS ---- --> | |
| <section class="px-5 py-4 max-w-[1600px] mx-auto"> | |
| <div class="flex items-center justify-between mb-5"> | |
| <h2 class="font-serif text-xl font-medium text-ink-800">Quick Tools</h2> | |
| <button class="text-xs font-medium text-clay hover:text-clay-dark transition-colors flex items-center gap-1" onclick="showToast('All tools page coming soon!')"> | |
| View all <i class="fa-solid fa-chevron-right text-[10px]"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 stagger" id="toolsGrid"> | |
| <button onclick="switchView('image')" class="tool-card group text-left p-6 rounded-3xl bg-white/70 border border-ink-100/80"> | |
| <div class="w-12 h-12 rounded-2xl bg-sage/10 flex items-center justify-center mb-4 group-hover:bg-sage/20 transition-colors"> | |
| <i class="fa-solid fa-image text-sage-dark text-lg"></i> | |
| </div> | |
| <h3 class="font-semibold text-ink-800 mb-1.5">Image Generator</h3> | |
| <p class="text-xs text-ink-400 leading-relaxed">Create unique visuals from any prompt.</p> | |
| </button> | |
| <button onclick="switchView('text')" class="tool-card group text-left p-6 rounded-3xl bg-white/70 border border-ink-100/80"> | |
| <div class="w-12 h-12 rounded-2xl bg-coral/10 flex items-center justify-center mb-4 group-hover:bg-coral/20 transition-colors"> | |
| <i class="fa-solid fa-pen-nib text-coral-dark text-lg"></i> | |
| </div> | |
| <h3 class="font-semibold text-ink-800 mb-1.5">Text Writer</h3> | |
| <p class="text-xs text-ink-400 leading-relaxed">Draft articles, poems, and more.</p> | |
| </button> | |
| <button onclick="switchView('sketch')" class="tool-card group text-left p-6 rounded-3xl bg-white/70 border border-ink-100/80"> | |
| <div class="w-12 h-12 rounded-2xl bg-amber-50 flex items-center justify-center mb-4 group-hover:bg-amber-100 transition-colors"> | |
| <i class="fa-solid fa-palette text-amber-500 text-lg"></i> | |
| </div> | |
| <h3 class="font-semibold text-ink-800 mb-1.5">AI Sketch</h3> | |
| <p class="text-xs text-ink-400 leading-relaxed">Draw concepts that AI refines.</p> | |
| </button> | |
| <button onclick="switchView('gallery')" class="tool-card group text-left p-6 rounded-3xl bg-white/70 border border-ink-100/80"> | |
| <div class="w-12 h-12 rounded-2xl bg-indigo-50 flex items-center justify-center mb-4 group-hover:bg-indigo-100 transition-colors"> | |
| <i class="fa-solid fa-layer-group text-indigo-400 text-lg"></i> | |
| </div> | |
| <h3 class="font-semibold text-ink-800 mb-1.5">Gallery</h3> | |
| <p class="text-xs text-ink-400 leading-relaxed">Browse your creative collection.</p> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- ---- IMAGE GENERATOR ---- --> | |
| <section id="view-image" class="view-section hidden px-5 py-4 max-w-[1600px] mx-auto"> | |
| <div class="entrance visible"> | |
| <div class="flex items-center gap-3 mb-6"> | |
| <div class="w-10 h-10 rounded-2xl bg-sage/10 flex items-center justify-center"> | |
| <i class="fa-solid fa-image text-sage-dark"></i> | |
| </div> | |
| <div> | |
| <h2 class="font-serif text-2xl font-medium text-ink-800">Image Generator</h2> | |
| <p class="text-xs text-ink-400 mt-0.5">Describe what you want to see, and watch AI bring it to life.</p> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <div class="glass rounded-3xl p-6 lg:p-8 mb-6"> | |
| <label class="block text-sm font-medium text-ink-700 mb-3">Your Prompt</label> | |
| <div class="relative mb-5"> | |
| <textarea id="imgPrompt" rows="3" placeholder="A surreal dreamscape where crystal mountains reflect an aurora of warm pastels, small bioluminescent creatures float through valleys..." class="prompt-input w-full rounded-2xl px-5 py-4 text-sm text-ink-800 placeholder:text-ink-300 resize-none focus:outline-none font-light"></textarea> | |
| <button class="absolute right-3 bottom-3 w-8 h-8 rounded-xl bg-ink-50 hover:bg-ink-100 flex items-center justify-center transition-colors" onclick="surprisePrompt()" title="Surprise me!"> | |
| <i class=" |