Http- Apr 2026
.post-body padding: 1.5rem;
.hero h1 font-size: 2.8rem; font-weight: 700; background: linear-gradient(135deg, #1a2a3f, #1e3a5f); background-clip: text; -webkit-background-clip: text; color: transparent; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 12px;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Http‑— generate a post | Smart Post Builder</title> <style> * margin: 0; padding: 0; box-sizing: border-box; .post-body padding: 1.5rem
.hero p color: #2c3e4e; margin-top: 0.75rem; font-size: 1.1rem; font-weight: 500;
// fallback defaults for empty fields (so preview is always meaningful) if (title === '') title = 'Untitled — HTTP insight'; if (category === '') category = 'Tech Insights'; if (author === '') author = 'Guest Author'; if (content === '') content = '✨ Start writing your post. Share thoughts about HTTP, APIs, modern web standards, or any topic you like. The preview updates instantly when you click "Generate / Refresh post".'; .hero h1 font-size: 2.8rem
/* double card layout */ .builder-grid display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
.tag-list display: flex; flex-wrap: wrap; gap: 0.5rem; meta name="viewport" content="width=device-width
<script> // DOM elements const titleInput = document.getElementById('postTitle'); const categoryInput = document.getElementById('postCategory'); const authorInput = document.getElementById('postAuthor'); const dateInput = document.getElementById('postDate'); const contentTextarea = document.getElementById('postContent'); const tagsInput = document.getElementById('postTags'); const generateBtn = document.getElementById('generatePostBtn'); const previewContainer = document.getElementById('previewContainer'); const toast = document.getElementById('toastMsg');
// Helper: show temporary toast function showToast(message = '📋 Copied to clipboard!') toast.textContent = message; toast.style.opacity = '1'; setTimeout(() => toast.style.opacity = '0'; , 2000);
<div class="input-group"> <label>✍️ Author name</label> <input type="text" id="postAuthor" placeholder="Author or handle" value="Alex Rivera"> </div>