Spaces:
Runtime error
Runtime error
| === index.html === | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Open-Sora v2 Text to Video | AI Video Generation</title> | |
| <meta name="description" content="Transform text into stunning videos using hpcai-tech/Open-Sora-v2 AI model optimized for CPU"> | |
| <meta name="keywords" content="AI video, text to video, Open-Sora, video generation, artificial intelligence"> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none"> | |
| <rect width="32" height="32" rx="8" fill="url(#gradient)"/> | |
| <path d="M8 12L16 8L24 12L16 16L8 12Z" fill="white" opacity="0.9"/> | |
| <path d="M8 20L16 16L24 20L16 24L8 20Z" fill="white" opacity="0.7"/> | |
| <defs> | |
| <linearGradient id="gradient" x1="0" y1="0" x2="32" y2="32"> | |
| <stop stop-color="#667eea"/> | |
| <stop offset="1" stop-color="#764ba2"/> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| <span>Open-Sora</span> | |
| </div> | |
| <nav class="nav"> | |
| <a href="#generate" class="nav-link active">Generate</a> | |
| <a href="#gallery" class="nav-link">Gallery</a> | |
| <a href="#about" class="nav-link">About</a> | |
| </nav> | |
| <div class="header-actions"> | |
| <span class="built-with">Built with <a href="https://huggingface.co/hpcai-tech/Open-Sora-v2" target="_blank">Open-Sora-v2</a></span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="main"> | |
| <section class="hero"> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <h1 class="hero-title">Transform Text Into Video</h1> | |
| <p class="hero-subtitle">Powered by hpcai-tech/Open-Sora-v2 - Create stunning videos from simple text descriptions using CPU-optimized AI</p> | |
| <div class="stats"> | |
| <div class="stat"> | |
| <span class="stat-value">4K</span> | |
| <span class="stat-label">Resolution</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-value">16s</span> | |
| <span class="stat-label">Max Duration</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-value">CPU</span> | |
| <span class="stat-label">Ready</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="generate" class="generate-section"> | |
| <div class="container"> | |
| <div class="generate-card"> | |
| <h2 class="section-title">Create Your Video</h2> | |
| <form id="generateForm" class="generate-form"> | |
| <div class="form-group"> | |
| <label for="prompt">Video Description</label> | |
| <textarea id="prompt" placeholder="Describe the video you want to create... e.g., A serene sunset over mountains with birds flying" rows="3"></textarea> | |
| <div class="prompt-suggestions"> | |
| <span class="suggestion-label">Try:</span> | |
| <button type="button" class="suggestion-btn" data-prompt="A futuristic city with flying cars at night">Futuristic City</button> | |
| <button type="button" class="suggestion-btn" data-prompt="Ocean waves crashing on a tropical beach">Ocean Waves</button> | |
| <button type="button" class="suggestion-btn" data-prompt="A forest in autumn with falling leaves">Autumn Forest</button> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="duration">Duration</label> | |
| <select id="duration"> | |
| <option value="2">2 seconds</option> | |
| <option value="4" selected>4 seconds</option> | |
| <option value="8">8 seconds</option> | |
| <option value="16">16 seconds</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="resolution">Resolution</label> | |
| <select id="resolution"> | |
| <option value="144p">144p (Fast)</option> | |
| <option value="240p">240p</option> | |
| <option value="480p" selected>480p</option> | |
| <option value="720p">720p (Slow)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="aspectRatio">Aspect Ratio</label> | |
| <select id="aspectRatio"> | |
| <option value="16:9" selected>16:9 (Widescreen)</option> | |
| <option value="9:16">9:16 (Portrait)</option> | |
| <option value="1:1">1:1 (Square)</option> | |
| <option value="4:3">4:3 (Standard)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button type="submit" class="generate-btn" id="generateBtn"> | |
| <span class="btn-text">Generate Video</span> | |
| <span class="btn-loader" style="display: none;">Generating...</span> | |
| </button> | |
| </form> | |
| </div> | |
| <div id="resultSection" class="result-section" style="display: none;"> | |
| <div class="result-card"> | |
| <h3>Your Generated Video</h3> | |
| <div class="video-container"> | |
| <div class="video-placeholder"> | |
| <div class="play-button"> | |
| <svg width="64" height="64" viewBox="0 0 64 64" fill="none"> | |
| <circle cx="32" cy="32" r="32" fill="white" opacity="0.9"/> | |
| <path d="M24 20L44 32L24 44V20Z" fill="#667eea"/> | |
| </svg> | |
| </div> | |
| <img id="resultImage" src="" alt="Generated video frame" style="width: 100%; height: 100%; object-fit: cover;"> | |
| </div> | |
| </div> | |
| <div class="video-info"> | |
| <p class="video-prompt" id="resultPrompt"></p> | |
| <div class="video-actions"> | |
| <button class="action-btn download-btn"> | |
| <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M10 3v10m0 0l-3-3m3 3l3-3m-7 5h14"/> | |
| </svg> | |
| Download | |
| </button> | |
| <button class="action-btn share-btn"> | |
| <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"/> | |
| </svg> | |
| Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="gallery" class="gallery-section"> | |
| <div class="container"> | |
| <h2 class="section-title">Recent Generations</h2> | |
| <div class="gallery-grid" id="galleryGrid"> | |
| <!-- Gallery items will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="about" class="about-section"> | |
| <div class="container"> | |
| <div class="about-content"> | |
| <div class="about-text"> | |
| <h2 class="section-title">About Open-Sora v2</h2> | |
| <p>hpcai-tech/Open-Sora-v2 is an open-source text-to-video generation model optimized for CPU execution. It transforms textual descriptions into video content using efficient diffusion technology, making AI video generation accessible without requiring powerful GPUs.</p> | |
| <div class="features"> | |
| <div class="feature"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/> | |
| </svg> | |
| <span>Fast CPU Generation</span> | |
| </div> | |
| <div class="feature"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="3" y="3" width="18" height="18" rx="2"/> | |
| <path d="M9 9h6v6H9z"/> | |
| </svg> | |
| <span>High Quality Output</span> | |
| </div> | |
| <div class="feature"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 2v20M17 7l-5-5-5 5M17 17l-5 5-5-5"/> | |
| </svg> | |
| <span>Multiple Styles</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="about-visual"> | |
| <div class="model-card"> | |
| <div class="model-header"> | |
| <span class="model-name">Open-Sora v2</span> | |
| <span class="model-status active">CPU Ready</span> | |
| </div> | |
| <div class="model-stats"> | |
| <div class="model-stat"> | |
| <span class="label">Model</span> | |
| <span class="value">hpcai-tech</span> | |
| </div> | |
| <div class="model-stat"> | |
| <span class="label">Hardware</span> | |
| <span class="value">CPU Optimized</span> | |
| </div> | |
| <div class="model-stat"> | |
| <span class="label">Frame Rate</span> | |
| <span class="value">24 fps</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-section"> | |
| <h4>Open-Sora</h4> | |
| <p>Advanced AI video generation technology</p> | |
| </div> | |
| <div class="footer-section"> | |
| <h4>Resources</h4> | |
| <a href="#" class="footer-link">Documentation</a> | |
| <a href="#" class="footer-link">API Reference</a> | |
| <a href="#" class="footer-link">Examples</a> | |
| </div> | |
| <div class="footer-section"> | |
| <h4>Community</h4> | |
| <a href="#" class="footer-link">GitHub</a> | |
| <a href="#" class="footer-link">Discord</a> | |
| <a href="#" class="footer-link">Twitter</a> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2024 Open-Sora v2. Powered by hpcai-tech.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="assets/js/main.js"></script> | |
| </body> | |
| </html> | |
| === assets/css/styles.css === | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary: #667eea; | |
| --primary-dark: #5a67d8; | |
| --secondary: #764ba2; | |
| --dark: #1a202c; | |
| --gray: #718096; | |
| --light-gray: #e2e8f0; | |
| --white: #ffffff; | |
| --background: #f7fafc; | |
| --card-bg: #ffffff; | |
| --border: #e2e8f0; | |
| --shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05); | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| line-height: 1.6; | |
| color: var(--dark); | |
| background: var(--background); | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Header */ | |
| .header { | |
| background: var(--white); | |
| border-bottom: 1px solid var(--border); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| backdrop-filter: blur(10px); | |
| background: rgba(255, 255, 255, 0.95); | |
| } | |
| .header-content { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 1rem 0; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-weight: 700; | |
| font-size: 1.25rem; | |
| color: var(--dark); | |
| } | |
| .nav { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .nav-link { | |
| text-decoration: none; | |
| color: var(--gray); | |
| font-weight: 500; | |
| transition: color 0.3s; | |
| position: relative; | |
| } | |
| .nav-link.active, | |
| .nav-link:hover { | |
| color: var(--primary); | |
| } | |
| .nav-link.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1rem; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: var(--primary); | |
| } | |
| .built-with { | |
| font-size: 0.875rem; | |
| color: var(--gray); | |
| } | |
| .built-with a { | |
| color: var(--primary); | |
| text-decoration: none; | |
| font-weight: 500; | |
| } | |
| .built-with a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| padding: 4rem 0; | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: var(--white); | |
| text-align: center; | |
| } | |
| .hero-title { | |
| font-size: 3rem; | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero-subtitle { | |
| font-size: 1.25rem; | |
| opacity: 0.9; | |
| margin-bottom: 2rem; | |
| max-width: 600px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .stats { | |
| display: flex; | |
| justify-content: center; | |
| gap: 4rem; | |
| margin-top: 2rem; | |
| } | |
| .stat { | |
| text-align: center; | |
| } | |
| .stat-value { | |
| display: block; | |
| font-size: 2rem; | |
| font-weight: 700; | |
| margin-bottom: 0.25rem; | |
| } | |
| .stat-label { | |
| font-size: 0.875rem; | |
| opacity: 0.8; | |
| } | |
| /* Generate Section */ | |
| .generate-section { | |
| padding: 4rem 0; | |
| } | |
| .generate-card { | |
| background: var(--card-bg); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| margin-bottom: 2rem; | |
| } | |
| .section-title { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| margin-bottom: 2rem; | |
| color: var(--dark); | |
| } | |
| .generate-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .form-group label { | |
| font-weight: 600; | |
| color: var(--dark); | |
| } | |
| .form-group textarea, | |
| .form-group select { | |
| padding: 0.75rem; | |
| border: 2px solid var(--border); | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| transition: border-color 0.3s; | |
| font-family: inherit; | |
| } | |
| .form-group textarea:focus, | |
| .form-group select:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| } | |
| .form-group textarea { | |
| resize: vertical; | |
| min-height: 100px; | |
| } | |
| .prompt-suggestions { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| flex-wrap: wrap; | |
| } | |
| .suggestion-label { | |
| font-size: 0.875rem; | |
| color: var(--gray); | |
| } | |
| .suggestion-btn { | |
| padding: 0.25rem 0.75rem; | |
| background: var(--light-gray); | |
| border: none; | |
| border-radius: 20px; | |
| font-size: 0.875rem; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .suggestion-btn:hover { | |
| background: var(--primary); | |
| color: var(--white); | |
| } | |
| .form-row { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .generate-btn { | |
| padding: 1rem 2rem; | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: var(--white); | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 1.125rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .generate-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); | |
| } | |
| .generate-btn:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .btn-loader { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .btn-loader::before { | |
| content: ''; | |
| width: 16px; | |
| height: 16px; | |
| border: 2px solid var(--white); | |
| border-top-color: transparent; | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Result Section */ | |
| .result-section { | |
| margin-top: 2rem; | |
| } | |
| .result-card { | |
| background: var(--card-bg); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .result-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| color: var(--dark); | |
| } | |
| .video-container { | |
| position: relative; | |
| width: 100%; | |
| padding-bottom: 56.25%; | |
| background: var(--dark); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| margin-bottom: 1.5rem; | |
| } | |
| .video-placeholder { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); | |
| } | |
| .play-button { | |
| position: absolute; | |
| z-index: 10; | |
| opacity: 0.9; | |
| transition: opacity 0.3s, transform 0.3s; | |
| } | |
| .play-button:hover { | |
| opacity: 1; | |
| transform: scale(1.1); | |
| } | |
| .video-info { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .video-prompt { | |
| color: var(--gray); | |
| font-style: italic; | |
| flex: 1; | |
| } | |
| .video-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .action-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.5rem 1rem; | |
| background: var(--white); | |
| border: 2px solid var(--border); | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| font-weight: 500; | |
| } | |
| .action-btn:hover { | |
| background: var(--primary); | |
| color: var(--white); | |
| border-color: var(--primary); | |
| } | |
| /* Gallery Section */ | |
| .gallery-section { | |
| padding: 4rem 0; | |
| background: var(--white); | |
| } | |
| .gallery-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .gallery-item { | |
| position: relative; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| background: var(--dark); | |
| aspect-ratio: 16/9; | |
| cursor: pointer; | |
| transition: transform 0.3s; | |
| } | |
| .gallery-item:hover { | |
| transform: scale(1.02); | |
| } | |
| .gallery-item img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .gallery-item-overlay { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| padding: 1rem; | |
| background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); | |
| color: var(--white); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .gallery-item:hover .gallery-item-overlay { | |
| opacity: 1; | |
| } | |
| /* About Section */ | |
| .about-section { | |
| padding: 4rem 0; | |
| } | |
| .about-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: center; | |
| } | |
| .about-text p { | |
| font-size: 1.125rem; | |
| color: var(--gray); | |
| margin-bottom: 2rem; | |
| line-height: 1.8; | |
| } | |
| .features { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .feature { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| font-weight: 500; | |
| } | |
| .feature svg { | |
| color: var(--primary); | |
| } | |
| .model-card { | |
| background: var(--card-bg); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .model-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .model-name { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| color: var(--dark); | |
| } | |
| .model-status { | |
| padding: 0.25rem 0.75rem; | |
| background: #10b981; | |
| color: var(--white); | |
| border-radius: 20px; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| } | |
| .model-stats { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .model-stat { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 0.75rem 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .model-stat:last-child { | |
| border-bottom: none; | |
| } | |
| .model-stat .label { | |
| color: var(--gray); | |
| } | |
| .model-stat .value { | |
| font-weight: 600; | |
| color: var(--dark); | |
| } | |
| /* Footer */ | |
| .footer { | |
| background: var(--dark); | |
| color: var(--white); | |
| padding: 3rem 0 1rem; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-section h4 { | |
| margin-bottom: 1rem; | |
| color: var(--white); | |
| } | |
| .footer-section p { | |
| color: var(--gray); | |
| font-size: 0.875rem; | |
| } | |
| .footer-link { | |
| display: block; | |
| color: var(--gray); | |
| text-decoration: none; | |
| margin-bottom: 0.5rem; | |
| transition: color 0.3s; | |
| } | |
| .footer-link:hover { | |
| color: var(--primary); | |
| } | |
| .footer-bottom { | |
| padding-top: 2rem; | |
| border-top: 1px solid #374151; | |
| text-align: center; | |
| color: var(--gray); | |
| font-size: 0.875rem; | |
| } | |
| /* Responsive Design */ | |
| .hero-title { | |
| font-size: 2rem; | |
| } | |
| .hero-subtitle { | |
| font-size: 1rem; | |
| } | |
| .stats { | |
| gap: 2rem; | |
| } | |
| .nav { | |
| display: none; | |
| } | |
| .about-content { | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .video-info { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .form-row { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .container { | |
| padding: 0 15px; | |
| } | |
| .generate-card, | |
| .result-card { | |
| padding: 1.5rem; | |
| } | |
| .hero { | |
| padding: 2rem 0; | |
| } | |
| .gallery-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } |