|
<!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 = ''; |
|
|
|
|
|
const content = generateArticle(topic, tone, length); |
|
|
|
document.getElementById('writingStatus').style.display = 'none'; |
|
simulateAIWriting(content); |
|
} |
|
|
|
function generateArticle(topic, tone, length) { |
|
|
|
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> |
