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> | |
| <style> | |
| :root { | |
| --primary: #6366f1; | |
| --secondary: #4f46e5; | |
| --bg: #f8fafc; | |
| --text: #1e293b; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', system-ui, sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| line-height: 1.5; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| .header { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .header h1 { | |
| font-size: 2.5rem; | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| } | |
| .header p { | |
| color: #64748b; | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2rem; | |
| } | |
| .panel { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 1rem; | |
| box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); | |
| } | |
| .input-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .input-group label { | |
| display: block; | |
| font-weight: 500; | |
| margin-bottom: 0.5rem; | |
| } | |
| .input-group input, | |
| .input-group textarea, | |
| .input-group select { | |
| width: 100%; | |
| padding: 0.75rem; | |
| border: 1px solid #e2e8f0; | |
| border-radius: 0.5rem; | |
| font-size: 1rem; | |
| } | |
| .input-group textarea { | |
| height: 150px; | |
| resize: vertical; | |
| } | |
| .btn { | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 1rem 2rem; | |
| border-radius: 0.5rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .btn:hover { | |
| background: var(--secondary); | |
| } | |
| .btn-secondary { | |
| background: #e2e8f0; | |
| color: var(--text); | |
| } | |
| .btn-secondary:hover { | |
| background: #cbd5e1; | |
| } | |
| .output { | |
| margin-top: 1rem; | |
| padding: 1rem; | |
| background: #f1f5f9; | |
| border-radius: 0.5rem; | |
| white-space: pre-wrap; | |
| } | |
| .writing-status { | |
| display: flex; | |
| align-items: center; | |
| margin-top: 1rem; | |
| padding: 1rem; | |
| background: #f1f5f9; | |
| border-radius: 0.5rem; | |
| } | |
| .status-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: #22c55e; | |
| margin-right: 0.5rem; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); opacity: 1; } | |
| 50% { transform: scale(1.2); opacity: 0.5; } | |
| 100% { transform: scale(1); opacity: 1; } | |
| } | |
| .tools { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| @media (max-width: 768px) { | |
| .grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header class="header"> | |
| <h1>AI Blog Generator</h1> | |
| <p>Generate high-quality blog content with AI assistance</p> | |
| </header> | |
| <div class="grid"> | |
| <div class="panel"> | |
| <h2>Input</h2> | |
| <div class="tools"> | |
| <button class="btn btn-secondary" onclick="generateIdeas()">Generate Ideas</button> | |
| <button class="btn btn-secondary" onclick="improveWriting()">Improve Writing</button> | |
| </div> | |
| <div class="input-group"> | |
| <label for="topic">Topic/Keywords</label> | |
| <input type="text" id="topic" placeholder="Enter main topic or keywords"> | |
| </div> | |
| <div class="input-group"> | |
| <label for="tone">Writing Tone</label> | |
| <select id="tone"> | |
| <option value="professional">Professional</option> | |
| <option value="casual">Casual</option> | |
| <option value="technical">Technical</option> | |
| <option value="creative">Creative</option> | |
| </select> | |
| </div> | |
| <div class="input-group"> | |
| <label for="length">Article Length</label> | |
| <select id="length"> | |
| <option value="short">Short (~300 words)</option> | |
| <option value="medium">Medium (~600 words)</option> | |
| <option value="long">Long (~1000 words)</option> | |
| </select> | |
| </div> | |
| <button class="btn" onclick="generateContent()">Generate Content</button> | |
| </div> | |
| <div class="panel"> | |
| <h2>Output</h2> | |
| <div id="writingStatus" class="writing-status" style="display: none;"> | |
| <div class="status-dot"></div> | |
| <span>AI is writing...</span> | |
| </div> | |
| <div id="output" class="output"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function simulateAIWriting(text, delay = 50) { | |
| return new Promise((resolve) => { | |
| const output = document.getElementById('output'); | |
| let index = 0; | |
| const interval = setInterval(() => { | |
| if (index < text.length) { | |
| output.textContent += text[index]; | |
| index++; | |
| } else { | |
| clearInterval(interval); | |
| resolve(); | |
| } | |
| }, delay); | |
| }); | |
| } | |
| function generateContent() { | |
| const topic = document.getElementById('topic').value; | |
| const tone = document.getElementById('tone').value; | |
| const length = document.getElementById('length').value; | |
| if (!topic) { | |
| alert('Please enter a topic'); | |
| return; | |
| } | |
| document.getElementById('writingStatus').style.display = 'flex'; | |
| document.getElementById('output').textContent = ''; | |
| // Simulated AI response | |
| const content = generateArticle(topic, tone, length); | |
| document.getElementById('writingStatus').style.display = 'none'; | |
| simulateAIWriting(content); | |
| } | |
| function generateArticle(topic, tone, length) { | |
| // This is a mock function that would normally connect to an AI API | |
| const templates = { | |
| professional: `Title: ${topic}: A Comprehensive Analysis\n\nIn today's rapidly evolving landscape, ${topic} has emerged as a crucial factor in shaping our understanding of modern developments. This article explores the key aspects and implications of ${topic}, providing valuable insights for professionals and enthusiasts alike.\n\nKey Points:\n1. Understanding the fundamentals\n2. Current trends and developments\n3. Future implications\n`, | |
| casual: `Hey there! Let's Talk About ${topic}!\n\nEver wondered what makes ${topic} so interesting? Well, you're in for a treat! Today we're going to dive into this fascinating topic and explore all the cool things about it.\n\nWhat's the Deal With ${topic}?\n`, | |
| technical: `Technical Analysis: ${topic}\n\nAbstract:\nThis technical examination of ${topic} provides a detailed analysis of its core components, implementation considerations, and technical specifications.\n\nTechnical Overview:\n`, | |
| creative: `The Art of ${topic}: A Creative Exploration\n\nImagine a world where ${topic} shapes everything around us. In this creative journey, we'll explore the fascinating dimensions of ${topic} and its impact on our creative consciousness.\n\n` | |
| }; | |
| return templates[tone] + `[Content continues with ${length} format...]`; | |
| } | |
| function generateIdeas() { | |
| const topic = document.getElementById('topic').value; | |
| if (!topic) { | |
| alert('Please enter a topic first'); | |
| return; | |
| } | |
| const ideas = [ | |
| `- How ${topic} is Changing the Future`, | |
| `- The Ultimate Guide to ${topic}`, | |
| `- 10 Things You Didn't Know About ${topic}`, | |
| `- Why ${topic} Matters in 2024`, | |
| `- The Evolution of ${topic}: Past, Present, and Future` | |
| ].join('\n'); | |
| document.getElementById('output').textContent = 'Blog Post Ideas:\n' + ideas; | |
| } | |
| function improveWriting() { | |
| const currentText = document.getElementById('output').textContent; | |
| if (!currentText) { | |
| alert('Generate content first'); | |
| return; | |
| } | |
| document.getElementById('writingStatus').style.display = 'flex'; | |
| setTimeout(() => { | |
| document.getElementById('writingStatus').style.display = 'none'; | |
| document.getElementById('output').textContent = 'Enhanced Version:\n\n' + | |
| currentText.replace(/\b\w+\b/g, match => | |
| Math.random() > 0.8 ? match.charAt(0).toUpperCase() + match.slice(1) : match | |
| ); | |
| }, 2000); | |
| } | |
| </script> | |
| </body> | |
| </html> |