Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>How to Start the App</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <style> | |
| *, *::before, *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --bg-primary: #0a0a0f; | |
| --bg-secondary: #12121a; | |
| --bg-card: #16161f; | |
| --bg-card-hover: #1c1c28; | |
| --accent: #6c5ce7; | |
| --accent-light: #a29bfe; | |
| --accent-glow: rgba(108, 92, 231, 0.3); | |
| --green: #00cec9; | |
| --green-glow: rgba(0, 206, 201, 0.25); | |
| --orange: #fdcb6e; | |
| --orange-glow: rgba(253, 203, 110, 0.25); | |
| --pink: #fd79a8; | |
| --pink-glow: rgba(253, 121, 168, 0.25); | |
| --blue: #74b9ff; | |
| --blue-glow: rgba(116, 185, 255, 0.25); | |
| --text-primary: #e8e8f0; | |
| --text-secondary: #8888a0; | |
| --text-muted: #55556a; | |
| --border: rgba(255, 255, 255, 0.06); | |
| --border-active: rgba(108, 92, 231, 0.4); | |
| --radius: 16px; | |
| --radius-sm: 10px; | |
| --radius-xs: 6px; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| line-height: 1.7; | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { width: 6px; } | |
| ::-webkit-scrollbar-track { background: var(--bg-primary); } | |
| ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; } | |
| /* Animated Background */ | |
| .bg-grid { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 0; | |
| background-image: | |
| linear-gradient(rgba(108, 92, 231, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(108, 92, 231, 0.03) 1px, transparent 1px); | |
| background-size: 60px 60px; | |
| pointer-events: none; | |
| } | |
| .bg-orb { | |
| position: fixed; | |
| border-radius: 50%; | |
| filter: blur(120px); | |
| pointer-events: none; | |
| z-index: 0; | |
| animation: orbFloat 20s ease-in-out infinite; | |
| } | |
| .bg-orb--1 { | |
| width: 500px; | |
| height: 500px; | |
| background: rgba(108, 92, 231, 0.12); | |
| top: -10%; | |
| right: -5%; | |
| } | |
| .bg-orb--2 { | |
| width: 400px; | |
| height: 400px; | |
| background: rgba(0, 206, 201, 0.08); | |
| bottom: 10%; | |
| left: -8%; | |
| animation-delay: -7s; | |
| } | |
| .bg-orb--3 { | |
| width: 300px; | |
| height: 300px; | |
| background: rgba(253, 121, 168, 0.06); | |
| top: 50%; | |
| right: 20%; | |
| animation-delay: -14s; | |
| } | |
| @keyframes orbFloat { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 33% { transform: translate(30px, -40px) scale(1.05); } | |
| 66% { transform: translate(-20px, 20px) scale(0.95); } | |
| } | |
| /* Header */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 100; | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| background: rgba(10, 10, 15, 0.7); | |
| border-bottom: 1px solid var(--border); | |
| transition: all 0.3s ease; | |
| } | |
| header.scrolled { | |
| background: rgba(10, 10, 15, 0.9); | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); | |
| } | |
| .header-inner { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 24px; | |
| height: 64px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-weight: 700; | |
| font-size: 1.15rem; | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| } | |
| .logo-icon { | |
| width: 34px; | |
| height: 34px; | |
| background: linear-gradient(135deg, var(--accent), var(--green)); | |
| border-radius: var(--radius-xs); | |
| display: grid; | |
| place-items: center; | |
| font-size: 0.85rem; | |
| color: white; | |
| } | |
| .header-link { | |
| font-size: 0.82rem; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: color 0.2s; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .header-link:hover { | |
| color: var(--accent-light); | |
| } | |
| .built-with { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| font-weight: 500; | |
| padding: 5px 12px; | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| transition: all 0.3s ease; | |
| } | |
| .built-with:hover { | |
| color: var(--accent-light); | |
| border-color: var(--border-active); | |
| background: rgba(108, 92, 231, 0.08); | |
| } | |
| /* Main Content */ | |
| main { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* Hero */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| padding: 120px 24px 80px; | |
| } | |
| .hero-content { | |
| max-width: 720px; | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 16px; | |
| background: rgba(108, 92, 231, 0.1); | |
| border: 1px solid rgba(108, 92, 231, 0.2); | |
| border-radius: 50px; | |
| font-size: 0.8rem; | |
| color: var(--accent-light); | |
| font-weight: 500; | |
| margin-bottom: 28px; | |
| animation: fadeInUp 0.6s ease both; | |
| } | |
| .hero-badge .pulse-dot { | |
| width: 7px; | |
| height: 7px; | |
| background: var(--green); | |
| border-radius: 50%; | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.5; transform: scale(0.8); } | |
| } | |
| .hero h1 { | |
| font-size: clamp(2.4rem, 6vw, 4rem); | |
| font-weight: 900; | |
| line-height: 1.1; | |
| letter-spacing: -0.03em; | |
| margin-bottom: 20px; | |
| animation: fadeInUp 0.6s ease 0.1s both; | |
| } | |
| .hero h1 .gradient-text { | |
| background: linear-gradient(135deg, var(--accent-light), var(--green), var(--accent)); | |
| background-size: 200% 200%; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: gradientShift 6s ease infinite; | |
| } | |
| @keyframes gradientShift { | |
| 0%, 100% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| } | |
| .hero p { | |
| font-size: 1.1rem; | |
| color: var(--text-secondary); | |
| max-width: 540px; | |
| margin: 0 auto 36px; | |
| line-height: 1.8; | |
| animation: fadeInUp 0.6s ease 0.2s both; | |
| } | |
| .hero-actions { | |
| display: flex; | |
| gap: 14px; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| animation: fadeInUp 0.6s ease 0.3s both; | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px 28px; | |
| border-radius: 50px; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| cursor: pointer; | |
| border: none; | |
| transition: all 0.3s ease; | |
| font-family: inherit; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--accent), #8b7cf7); | |
| color: white; | |
| box-shadow: 0 4px 20px var(--accent-glow); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 30px var(--accent-glow); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-card); | |
| color: var(--text-primary); | |
| border: 1px solid var(--border); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--bg-card-hover); | |
| border-color: var(--border-active); | |
| transform: translateY(-2px); | |
| } | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(24px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Terminal Animation */ | |
| .hero-terminal { | |
| margin-top: 50px; | |
| animation: fadeInUp 0.6s ease 0.4s both; | |
| } | |
| .terminal { | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| max-width: 560px; | |
| margin: 0 auto; | |
| text-align: left; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); | |
| } | |
| .terminal-bar { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px 16px; | |
| background: rgba(255, 255, 255, 0.02); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .terminal-dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| } | |
| .terminal-dot--red { background: #ff5f57; } | |
| .terminal-dot--yellow { background: #febc2e; } | |
| .terminal-dot--green { background: #28c840; } | |
| .terminal-title { | |
| flex: 1; | |
| text-align: center; | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .terminal-body { | |
| padding: 20px; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.82rem; | |
| line-height: 2; | |
| min-height: 140px; | |
| } | |
| .terminal-line { | |
| opacity: 0; | |
| animation: typeLine 0.3s ease forwards; | |
| } | |
| .terminal-line .prompt { | |
| color: var(--green); | |
| user-select: none; | |
| } | |
| .terminal-line .command { | |
| color: var(--text-primary); | |
| } | |
| .terminal-line .output { | |
| color: var(--text-secondary); | |
| padding-left: 0; | |
| } | |
| .terminal-line .flag { | |
| color: var(--orange); | |
| } | |
| .terminal-line .string { | |
| color: var(--green); | |
| } | |
| .terminal-cursor { | |
| display: inline-block; | |
| width: 8px; | |
| height: 16px; | |
| background: var(--accent-light); | |
| animation: blink 1s step-end infinite; | |
| vertical-align: middle; | |
| margin-left: 2px; | |
| } | |
| @keyframes blink { | |
| 50% { opacity: 0; } | |
| } | |
| @keyframes typeLine { | |
| to { opacity: 1; } | |
| } | |
| /* Sections */ | |
| .section { | |
| padding: 100px 24px; | |
| } | |
| .section-inner { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: 64px; | |
| } | |
| .section-label { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| color: var(--accent-light); | |
| margin-bottom: 14px; | |
| } | |
| .section-title { | |
| font-size: clamp(1.8rem, 4vw, 2.6rem); | |
| font-weight: 800; | |
| letter-spacing: -0.02em; | |
| margin-bottom: 14px; | |
| } | |
| .section-desc { | |
| color: var(--text-secondary); | |
| max-width: 520px; | |
| margin: 0 auto; | |
| font-size: 1.02rem; | |
| } | |
| /* Steps */ | |
| .steps-timeline { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| } | |
| .steps-timeline::before { | |
| content: ''; | |
| position: absolute; | |
| left: 28px; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: linear-gradient(to bottom, var(--accent), var(--green), var(--pink), transparent); | |
| border-radius: 2px; | |
| } | |
| .step-card { | |
| position: relative; | |
| display: grid; | |
| grid-template-columns: 56px 1fr; | |
| gap: 20px; | |
| padding: 28px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| transition: all 0.4s ease; | |
| cursor: pointer; | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| .step-card.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .step-card:hover { | |
| background: var(--bg-card-hover); | |
| border-color: var(--border-active); | |
| transform: translateY(-4px); | |
| box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); | |
| } | |
| .step-card.active { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 1px var(--accent), 0 12px 40px var(--accent-glow); | |
| } | |
| .step-number { | |
| width: 56px; | |
| height: 56px; | |
| border-radius: 50%; | |
| display: grid; | |
| place-items: center; | |
| font-weight: 800; | |
| font-size: 1.1rem; | |
| position: relative; | |
| z-index: 2; | |
| transition: all 0.3s ease; | |
| } | |
| .step-card:nth-child(1) .step-number { | |
| background: rgba(108, 92, 231, 0.15); | |
| color: var(--accent-light); | |
| border: 2px solid rgba(108, 92, 231, 0.3); | |
| } | |
| .step-card:nth-child(2) .step-number { | |
| background: rgba(0, 206, 201, 0.15); | |
| color: var(--green); | |
| border: 2px solid rgba(0, 206, 201, 0.3); | |
| } | |
| .step-card:nth-child(3) .step-number { | |
| background: rgba(253, 203, 110, 0.15); | |
| color: var(--orange); | |
| border: 2px solid rgba(253, 203, 110, 0.3); | |
| } | |
| .step-card:nth-child(4) .step-number { | |
| background: rgba(253, 121, 168, 0.15); | |
| color: var(--pink); | |
| border: 2px solid rgba(253, 121, 168, 0.3); | |
| } | |
| .step-card:nth-child(5) .step-number { | |
| background: rgba(116, 185, 255, 0.15); | |
| color: var(--blue); | |
| border: 2px solid rgba(116, 185, 255, 0.3); | |
| } | |
| .step-card.active .step-number { | |
| transform: scale(1.1); | |
| } | |
| .step-content h3 { | |
| font-size: 1.15rem; | |
| font-weight: 700; | |
| margin-bottom: 6px; | |
| } | |
| .step-content p { | |
| color: var(--text-secondary); | |
| font-size: 0.92rem; | |
| line-height: 1.7; | |
| margin-bottom: 14px; | |
| } | |
| .step-code { | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-xs); | |
| padding: 14px 18px; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.8rem; | |
| color: var(--green); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| overflow-x: auto; | |
| } | |
| .step-code code { | |
| white-space: nowrap; | |
| } | |
| .copy-btn { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--border); | |
| color: var(--text-muted); | |
| padding: 4px 10px; | |
| border-radius: var(--radius-xs); | |
| font-size: 0.72rem; | |
| cursor: pointer; | |
| font-family: inherit; | |
| transition: all 0.2s; | |
| flex-shrink: 0; | |
| } | |
| .copy-btn:hover { | |
| color: var(--text-primary); | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .copy-btn.copied { | |
| color: var(--green); | |
| border-color: rgba(0, 206, 201, 0.3); | |
| } | |
| /* Features Grid */ | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 20px; | |
| } | |
| .feature-card { | |
| padding: 28px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| transition: all 0.3s ease; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| .feature-card.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .feature-card:hover { | |
| background: var(--bg-card-hover); | |
| border-color: var(--border-active); | |
| transform: translateY(-4px); | |
| } | |
| .feature-icon { | |
| width: 44px; | |
| height: 44px; | |
| border-radius: var(--radius-sm); | |
| display: grid; | |
| place-items: center; | |
| font-size: 1.1rem; | |
| margin-bottom: 18px; | |
| } | |
| .feature-card:nth-child(1) .feature-icon { | |
| background: rgba(108, 92, 231, 0.12); | |
| color: var(--accent-light); | |
| } | |
| .feature-card:nth-child(2) .feature-icon { | |
| background: rgba(0, 206, 201, 0.12); | |
| color: var(--green); | |
| } | |
| .feature-card:nth-child(3) .feature-icon { | |
| background: rgba(253, 203, 110, 0.12); | |
| color: var(--orange); | |
| } | |
| .feature-card:nth-child(4) .feature-icon { | |
| background: rgba(253, 121, 168, 0.12); | |
| color: var(--pink); | |
| } | |
| .feature-card:nth-child(5) .feature-icon { | |
| background: rgba(116, 185, 255, 0.12); | |
| color: var(--blue); | |
| } | |
| .feature-card:nth-child(6) .feature-icon { | |
| background: rgba(108, 92, 231, 0.12); | |
| color: var(--accent-light); | |
| } | |
| .feature-card h3 { | |
| font-size: 1.05rem; | |
| font-weight: 700; | |
| margin-bottom: 8px; | |
| } | |
| .feature-card p { | |
| color: var(--text-secondary); | |
| font-size: 0.88rem; | |
| line-height: 1.7; | |
| } | |
| /* FAQ */ | |
| .faq-list { | |
| max-width: 720px; | |
| margin: 0 auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .faq-item { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .faq-item:hover { | |
| border-color: var(--border-active); | |
| } | |
| .faq-question { | |
| width: 100%; | |
| padding: 20px 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| background: none; | |
| border: none; | |
| color: var(--text-primary); | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| text-align: left; | |
| font-family: inherit; | |
| transition: color 0.2s; | |
| } | |
| .faq-question:hover { | |
| color: var(--accent-light); | |
| } | |
| .faq-icon { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| background: rgba(108, 92, 231, 0.1); | |
| display: grid; | |
| place-items: center; | |
| font-size: 0.75rem; | |
| color: var(--accent-light); | |
| flex-shrink: 0; | |
| transition: transform 0.3s ease; | |
| } | |
| .faq-item.open .faq-icon { | |
| transform: rotate(45deg); | |
| background: var(--accent); | |
| color: white; | |
| } | |
| .faq-answer { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.4s ease, padding 0.3s ease; | |
| } | |
| .faq-item.open .faq-answer { | |
| max-height: 300px; | |
| } | |
| .faq-answer-inner { | |
| padding: 0 24px 20px; | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| line-height: 1.8; | |
| } | |
| /* Progress Bar */ | |
| .progress-bar-container { | |
| position: fixed; | |
| top: 64px; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| z-index: 99; | |
| background: rgba(255, 255, 255, 0.03); | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--accent), var(--green)); | |
| width: 0%; | |
| transition: width 0.1s linear; | |
| border-radius: 0 3px 3px 0; | |
| } | |
| /* CTA Section */ | |
| .cta-section { | |
| text-align: center; | |
| padding: 100px 24px; | |
| } | |
| .cta-box { | |
| max-width: 640px; | |
| margin: 0 auto; | |
| padding: 60px 40px; | |
| background: linear-gradient(135deg, rgba(108, 92, 231, 0.08), rgba(0, 206, 201, 0.05)); | |
| border: 1px solid rgba(108, 92, 231, 0.15); | |
| border-radius: 24px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cta-box::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle at 30% 40%, rgba(108, 92, 231, 0.06), transparent 50%); | |
| animation: ctaGlow 8s ease-in-out infinite; | |
| } | |
| @keyframes ctaGlow { | |
| 0%, 100% { transform: translate(0, 0); } | |
| 50% { transform: translate(5%, 5%); } | |
| } | |
| .cta-box h2 { | |
| font-size: clamp(1.6rem, 3.5vw, 2.2rem); | |
| font-weight: 800; | |
| margin-bottom: 14px; | |
| position: relative; | |
| } | |
| .cta-box p { | |
| color: var(--text-secondary); | |
| margin-bottom: 30px; | |
| font-size: 1rem; | |
| position: relative; | |
| } | |
| .cta-box .btn { | |
| position: relative; | |
| } | |
| /* Footer */ | |
| footer { | |
| border-top: 1px solid var(--border); | |
| padding: 40px 24px; | |
| text-align: center; | |
| } | |
| .footer-inner { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| } | |
| .footer-text { | |
| color: var(--text-muted); | |
| font-size: 0.82rem; | |
| } | |
| .footer-links { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .footer-links a { | |
| color: var(--text-secondary); | |
| font-size: 0.82rem; | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .footer-links a:hover { | |
| color: var(--accent-light); | |
| } | |
| /* Toast */ | |
| .toast { | |
| position: fixed; | |
| bottom: 30px; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(100px); | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-active); | |
| color: var(--text-primary); | |
| padding: 12px 24px; | |
| border-radius: 50px; | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| z-index: 200; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); | |
| transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| pointer-events: none; | |
| } | |
| .toast.show { | |
| transform: translateX(-50%) translateY(0); | |
| } | |
| .toast i { | |
| color: var(--green); | |
| } | |
| /* Step detail panel */ | |
| .step-detail { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.4s ease; | |
| } | |
| .step-card.active .step-detail { | |
| max-height: 300px; | |
| } | |
| .step-detail-inner { | |
| padding-top: 14px; | |
| border-top: 1px solid var(--border); | |
| margin-top: 14px; | |
| } | |
| .step-tags { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| margin-top: 10px; | |
| } | |
| .step-tag { | |
| padding: 3px 10px; | |
| border-radius: 20px; | |
| font-size: 0.72rem; | |
| font-weight: 500; | |
| background: rgba(108, 92, 231, 0.1); | |
| color: var(--accent-light); | |
| border: 1px solid rgba(108, 92, 231, 0.15); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .steps-timeline::before { | |
| left: 18px; | |
| } | |
| .step-card { | |
| grid-template-columns: 36px 1fr; | |
| gap: 14px; | |
| padding: 20px; | |
| } | |
| .step-number { | |
| width: 36px; | |
| height: 36px; | |
| font-size: 0.85rem; | |
| } | |
| .hero-terminal { | |
| margin-top: 30px; | |
| } | |
| .terminal-body { | |
| font-size: 0.72rem; | |
| padding: 14px; | |
| } | |
| .footer-inner { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .cta-box { | |
| padding: 40px 24px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .hero-actions { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .btn { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .step-code { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| } | |
| /* Smooth reveal */ | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .reveal.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bg-grid"></div> | |
| <div class="bg-orb bg-orb--1"></div> | |
| <div class="bg-orb bg-orb--2"></div> | |
| <div class="bg-orb bg-orb--3"></div> | |
| <!-- Header --> | |
| <header id="header"> | |
| <div class="header-inner"> | |
| <a href="#" class="logo"> | |
| <div class="logo-icon"><i class="fas fa-rocket"></i></div> | |
| QuickStart | |
| </a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a> | |
| </div> | |
| </header> | |
| <div class="progress-bar-container"> | |
| <div class="progress-bar" id="progressBar"></div> | |
| </div> | |
| <!-- Hero --> | |
| <main> | |
| <section class="hero" id="hero"> | |
| <div class="hero-content"> | |
| <div class="hero-badge"> | |
| <span class="pulse-dot"></span> | |
| Getting Started Guide | |
| </div> | |
| <h1>How to Start<br><span class="gradient-text">the App</span></h1> | |
| <p>Get your application up and running in minutes. Follow our streamlined guide from installation to your first launch.</p> | |
| <div class="hero-actions"> | |
| <a href="#steps" class="btn btn-primary"><i class="fas fa-play"></i> Get Started</a> | |
| <a href="#faq" class="btn btn-secondary"><i class="fas fa-circle-question"></i> FAQ</a> | |
| </div> | |
| <div class="hero-terminal"> | |
| <div class="terminal"> | |
| <div class="terminal-bar"> | |
| <span class="terminal-dot terminal-dot--red"></span> | |
| <span class="terminal-dot terminal-dot--yellow"></span> | |
| <span class="terminal-dot terminal-dot--green"></span> | |
| <span class="terminal-title">terminal</span> | |
| </div> | |
| <div class="terminal-body" id="terminalBody"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Steps Section --> | |
| <section class="section" id="steps"> | |
| <div class="section-inner"> | |
| <div class="section-header reveal"> | |
| <div class="section-label"><i class="fas fa-list-check"></i> Step by Step</div> | |
| <h2 class="section-title">Five Simple Steps</h2> | |
| <p class="section-desc">Follow these steps to get your application running locally. Click each step to expand details.</p> | |
| </div> | |
| <div class="steps-timeline" id="stepsTimeline"> | |
| <div class="step-card" data-step="1"> | |
| <div class="step-number">1</div> | |
| <div class="step-content"> | |
| <h3>Clone the Repository</h3> | |
| <p>Start by cloning the project repository to your local machine using Git.</p> | |
| <div class="step-code"> | |
| <code>git clone https://github.com/your-org/your-app.git</code> | |
| <button class="copy-btn" onclick="copyCode(this, 'git clone https://github.com/your-org/your-app.git')"><i class="fas fa-copy"></i> Copy</button> | |
| </div> | |
| <div class="step-detail"> | |
| <div class="step-detail-inner"> | |
| <p style="color: var(--text-secondary); font-size: 0.88rem;">Make sure you have Git installed. If not, download it from <span style="color: var(--accent-light);">git-scm.com</span>. You can also download the ZIP directly from the repository page if you prefer.</p> | |
| <div class="step-tags"> | |
| <span class="step-tag">git</span> | |
| <span class="step-tag">repository</span> | |
| <span class="step-tag">clone</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step-card" data-step="2"> | |
| <div class="step-number">2</div> | |
| <div class="step-content"> | |
| <h3>Navigate to Project Directory</h3> | |
| <p>Enter the project folder to access all the source files and configuration.</p> | |
| <div class="step-code"> | |
| <code>cd your-app</code> | |
| <button class="copy-btn" onclick="copyCode(this, 'cd your-app')"><i class="fas fa-copy"></i> Copy</button> | |
| </div> | |
| <div class="step-detail"> | |
| <div class="step-detail-inner"> | |
| <p style="color: var(--text-secondary); font-size: 0.88rem;">Ensure you're in the root directory of the project. This is where you'll find configuration files like <code style="color: var(--green);">package.json</code>, <code style="color: var(--green);">.env.example</code>, and more.</p> | |
| <div class="step-tags"> | |
| <span class="step-tag">navigation</span> | |
| <span class="step-tag">directory</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step-card" data-step="3"> | |
| <div class="step-number">3</div> | |
| <div class="step-content"> | |
| <h3>Install Dependencies</h3> | |
| <p>Install all required packages and libraries the application needs to run.</p> | |
| <div class="step-code"> | |
| <code>npm install</code> | |
| <button class="copy-btn" onclick="copyCode(this, 'npm install')"><i class="fas fa-copy"></i> Copy</button> | |
| </div> | |
| <div class="step-detail"> | |
| <div class="step-detail-inner"> | |
| <p style="color: var(--text-secondary); font-size: 0.88rem;">This reads the <code style="color: var(--green);">package.json</code> file and installs all dependencies into a <code style="color: var(--green);">node_modules</code> folder. If you prefer Yarn, run <code style="color: var(--green);">yarn install</code> instead.</p> | |
| <div class="step-tags"> | |
| <span class="step-tag">npm</span> | |
| <span class="step-tag">dependencies</span> | |
| <span class="step-tag">yarn</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step-card" data-step="4"> | |
| <div class="step-number">4</div> | |
| <div class="step-content"> | |
| <h3>Configure Environment Variables</h3> | |
| <p>Set up your local environment by copying the example env file and filling in your values.</p> | |
| <div class="step-code"> | |
| <code>cp .env.example .env</code> | |
| <button class="copy-btn" onclick="copyCode(this, 'cp .env.example .env')"><i class="fas fa-copy"></i> Copy</button> | |
| </div> | |
| <div class="step-detail"> | |
| <div class="step-detail-inner"> | |
| <p style="color: var(--text-secondary); font-size: 0.88rem;">Open the newly created <code style="color: var(--green);">.env</code> file and update the values with your local configuration — database URLs, API keys, port numbers, etc. Never commit your <code style="color: var(--pink);">.env</code> file to version control!</p> | |
| <div class="step-tags"> | |
| <span class="step-tag">environment</span> | |
| <span class="step-tag">configuration</span> | |
| <span class="step-tag">security</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step-card" data-step="5"> | |
| <div class="step-number">5</div> | |
| <div class="step-content"> | |
| <h3>Start the Development Server</h3> | |
| <p>Launch the app in development mode with hot-reload enabled for a smooth workflow.</p> | |
| <div class="step-code"> | |
| <code>npm run dev</code> | |
| <button class="copy-btn" onclick="copyCode(this, 'npm run dev')"><i class="fas fa-copy"></i> Copy</button> | |
| </div> | |
| <div class="step-detail"> | |
| <div class="step-detail-inner"> | |
| <p style="color: var(--text-secondary); font-size: 0.88rem;">Your app should now be running at <code style="color: var(--green);">http://localhost:3000</code> (or the port specified in your .env). Hot module replacement is enabled, so changes will reflect instantly in the browser.</p> | |
| <div class="step-tags"> | |
| <span class="step-tag">dev server</span> | |
| <span class="step-tag">hot-reload</span> | |
| <span class="step-tag">localhost</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="section" id="features"> | |
| <div class="section-inner"> | |
| <div class="section-header reveal"> | |
| <div class="section-label"><i class="fas fa-sparkles"></i> Why This Stack</div> | |
| <h2 class="section-title">Built for Developer Experience</h2> | |
| <p class="section-desc">Everything you need for a fast, productive development workflow.</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"><i class="fas fa-bolt"></i></div> | |
| <h3>Instant Hot Reload</h3> | |
| <p>See your changes reflected in real-time without manually refreshing the page or restarting the server.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"><i class="fas fa-shield-halved"></i></div> | |
| <h3>Secure by Default</h3> | |
| <p>Environment variables, CORS settings, and security headers are pre-configured out of the box.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"><i class="fas fa-puzzle-piece"></i></div> | |
| <h3>Modular Architecture</h3> | |
| <p>Clean separation of concerns with scalable folder structure that grows with your project.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"><i class="fas fa-gauge-high"></i></div> | |
| <h3>Optimized Builds</h3> | |
| <p>Production-ready bundling with tree-shaking, code splitting, and minification built in.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"><i class="fas fa-vial"></i></div> | |
| <h3>Testing Ready</h3> | |
| <p>Unit and integration testing frameworks pre-installed and configured for rapid TDD workflows.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"><i class="fas fa-cloud-arrow-up"></i></div> | |
| <h3>Deploy Anywhere</h3> | |
| <p>One-command deployment to Vercel, Netlify, AWS, Docker, or any cloud provider you prefer.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="section" id="faq"> | |
| <div class="section-inner"> | |
| <div class="section-header reveal"> | |
| <div class="section-label"><i class="fas fa-circle-question"></i> FAQ</div> | |
| <h2 class="section-title">Common Questions</h2> | |
| <p class="section-desc">Quick answers to the most frequently asked questions about starting the app.</p> | |
| </div> | |
| <div class="faq-list"> | |
| <div class="faq-item"> | |
| <button class="faq-question" onclick="toggleFaq(this)"> | |
| What are the system requirements? | |
| <span class="faq-icon"><i class="fas fa-plus"></i></span> | |
| </button> | |
| <div class="faq-answer"> | |
| <div class="faq-answer-inner"> | |
| You'll need <strong>Node.js 18+</strong> and <strong>npm 9+</strong> (or Yarn/Pnpm). Git is recommended for version control. The app runs on macOS, Windows, and Linux. We recommend at least 4GB of RAM for smooth development. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <button class="faq-question" onclick="toggleFaq(this)"> | |
| Can I use Docker instead? | |
| <span class="faq-icon"><i class="fas fa-plus"></i></span> | |
| </button> | |
| <div class="faq-answer"> | |
| <div class="faq-answer-inner"> | |
| Absolutely! A <code>Dockerfile</code> and <code>docker-compose.yml</code> are included in the repository. Simply run <code>docker-compose up</code> to start the app with all its services containerized. | |
| </div> | |
| </div> | |
| </div> |