<!DOCTYPE html>
<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>