Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Blog Generator</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Syne:wght@700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: #f0f0fa; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 60px 20px; | |
| color: #1a1a2e; | |
| } | |
| .hero { | |
| text-align: center; | |
| margin-bottom: 36px; | |
| } | |
| .hero h1 { | |
| font-family: 'Syne', sans-serif; | |
| font-size: clamp(36px, 6vw, 58px); | |
| font-weight: 800; | |
| color: #1a1a2e; | |
| letter-spacing: -1px; | |
| line-height: 1.1; | |
| margin-bottom: 14px; | |
| } | |
| .hero p { | |
| font-size: 16px; | |
| color: #6b6b8a; | |
| max-width: 380px; | |
| margin: 0 auto; | |
| line-height: 1.6; | |
| } | |
| .card { | |
| background: #ffffff; | |
| border-radius: 20px; | |
| padding: 28px; | |
| width: 100%; | |
| max-width: 680px; | |
| box-shadow: 0 4px 32px rgba(0,0,0,0.06); | |
| } | |
| .input-label { | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 1.5px; | |
| text-transform: uppercase; | |
| color: #5c6ac4; | |
| margin-bottom: 10px; | |
| display: block; | |
| } | |
| textarea { | |
| width: 100%; | |
| border: none; | |
| outline: none; | |
| resize: none; | |
| font-family: 'Inter', sans-serif; | |
| font-size: 15px; | |
| color: #9999bb; | |
| background: transparent; | |
| min-height: 100px; | |
| line-height: 1.6; | |
| } | |
| textarea::placeholder { color: #b0b0cc; } | |
| .card-footer { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-top: 20px; | |
| padding-top: 16px; | |
| border-top: 1px solid #f0f0f8; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .tags { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .tag { | |
| font-size: 11px; | |
| font-weight: 500; | |
| padding: 6px 12px; | |
| border-radius: 20px; | |
| border: 1px solid #e0e0f0; | |
| color: #6b6b8a; | |
| background: #fafaff; | |
| cursor: default; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .tag::before { | |
| content: ''; | |
| display: inline-block; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: #5c6ac4; | |
| } | |
| .generate-btn { | |
| background: #3d3db8; | |
| color: #fff; | |
| border: none; | |
| border-radius: 10px; | |
| padding: 12px 24px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| transition: background 0.2s ease, transform 0.15s ease; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .generate-btn:hover { | |
| background: #2e2ea0; | |
| transform: scale(1.02); | |
| } | |
| .generate-btn::after { content: '⚡'; font-size: 13px; } | |
| .output-card { | |
| margin-top: 20px; | |
| background: #ffffff; | |
| border-radius: 20px; | |
| padding: 28px; | |
| width: 100%; | |
| max-width: 680px; | |
| box-shadow: 0 4px 32px rgba(0,0,0,0.06); | |
| font-size: 15px; | |
| line-height: 1.8; | |
| color: #2d2d4e; | |
| border-left: 4px solid #5c6ac4; | |
| } | |
| .features { | |
| display: flex; | |
| gap: 32px; | |
| margin-top: 36px; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .feature { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| max-width: 180px; | |
| } | |
| .feature-icon { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 8px; | |
| background: #ececfc; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 15px; | |
| flex-shrink: 0; | |
| } | |
| .feature-text p { | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| color: #1a1a2e; | |
| margin-bottom: 3px; | |
| } | |
| .feature-text span { | |
| font-size: 12px; | |
| color: #8888aa; | |
| line-height: 1.5; | |
| } | |
| .loading { | |
| display: none; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 14px; | |
| margin-top: 20px; | |
| background: #ffffff; | |
| border-radius: 20px; | |
| padding: 32px 28px; | |
| width: 100%; | |
| max-width: 680px; | |
| box-shadow: 0 4px 32px rgba(0,0,0,0.06); | |
| } | |
| .loading.active { display: flex; } | |
| .loading-dots { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| } | |
| .loading-dots span { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: #5c6ac4; | |
| animation: bounce 1.2s infinite ease-in-out; | |
| } | |
| .loading-dots span:nth-child(2) { animation-delay: 0.2s; background: #7c7cd8; } | |
| .loading-dots span:nth-child(3) { animation-delay: 0.4s; background: #a0a0e8; } | |
| @keyframes bounce { | |
| 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } | |
| 40% { transform: scale(1); opacity: 1; } | |
| } | |
| .loading-bar-wrap { | |
| width: 100%; | |
| height: 4px; | |
| background: #ececfc; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .loading-bar { | |
| height: 100%; | |
| width: 0%; | |
| background: linear-gradient(90deg, #5c6ac4, #a78bfa); | |
| border-radius: 4px; | |
| animation: fillbar 3s ease-in-out infinite; | |
| } | |
| @keyframes fillbar { | |
| 0% { width: 0%; } | |
| 60% { width: 85%; } | |
| 100% { width: 95%; } | |
| } | |
| .loading-text { | |
| font-size: 13px; | |
| color: #8888aa; | |
| letter-spacing: 0.3px; | |
| animation: pulse 1.5s infinite ease-in-out; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.4; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="hero"> | |
| <h1>AI Blog Generator</h1> | |
| <p>Transform your sparks of thought into professional editorial content in seconds.</p> | |
| </div> | |
| <div class="card"> | |
| <form method="POST" onsubmit="document.querySelector('.loading').classList.add('active')"> | |
| <label class="input-label">Concept Input</label> | |
| <textarea name="topic" placeholder="Enter your topic here to generate a blog post..." rows="4">{{ request.form.get('topic', '') }}</textarea> | |
| <div class="card-footer"> | |
| <div class="tags"> | |
| <span class="tag">Creative Mode</span> | |
| <span class="tag">English</span> | |
| </div> | |
| <button type="submit" class="generate-btn">Generate</button> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="loading" id="loadingBox"> | |
| <div class="loading-dots"> | |
| <span></span><span></span><span></span> | |
| </div> | |
| <div class="loading-bar-wrap"> | |
| <div class="loading-bar"></div> | |
| </div> | |
| <div class="loading-text">AI is crafting your blog post...</div> | |
| </div> | |
| {% if paragraph %} | |
| <div class="output-card"> | |
| <pre style=" | |
| white-space: pre-wrap; | |
| font-family: 'Inter', sans-serif; | |
| background: transparent; | |
| border: none; | |
| color: #2d2d4e; | |
| line-height: 1.8; | |
| font-size: 15px; | |
| ">{{ paragraph|safe }}</pre> | |
| </div> | |
| {% endif %} | |
| <script> | |
| const form = document.querySelector('form'); | |
| const loadingBox = document.getElementById('loadingBox'); | |
| form.addEventListener('submit', function() { | |
| loadingBox.classList.add('active'); | |
| document.querySelector('.generate-btn').disabled = true; | |
| document.querySelector('.generate-btn').style.opacity = '0.6'; | |
| }); | |
| {% if paragraph %} | |
| loadingBox.classList.remove('active'); | |
| {% endif %} | |
| </script> | |
| <div class="features"> | |
| <div class="feature"> | |
| <div class="feature-icon">⚙️</div> | |
| <div class="feature-text"> | |
| <p>Cognitive Flow</p> | |
| <span>AI analyzes semantic intent and tone.</span> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="feature-icon">✏️</div> | |
| <div class="feature-text"> | |
| <p>Editorial Style</p> | |
| <span>High-performance Swiss typography.</span> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="feature-icon">🚀</div> | |
| <div class="feature-text"> | |
| <p>Instant Export</p> | |
| <span>Ready for CMS integration immediately.</span> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |