Http- [WORKING]

.post-card background: white; border-radius: 1.5rem; overflow: hidden; border: 1px solid #e9edf2; box-shadow: 0 8px 18px rgba(0,0,0,0.03); transition: all 0.2s;

/* card styling */ .card background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(0px); border-radius: 2rem; box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.02); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s; border: 1px solid rgba(255,255,255,0.6);

.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;

.hero p color: #2c3e4e; margin-top: 0.75rem; font-size: 1.1rem; font-weight: 500; .post-card background: white

.post-body padding: 1.5rem;

// Helper: parse tags from comma-separated string -> array of trimmed tags function parseTags(tagString) if (!tagString) return []; return tagString.split(',').map(t => t.trim()).filter(t => t !== '');

// 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".'; border: 1px solid #e9edf2

<div class="input-group"> <label>📂 Category / Topic</label> <input type="text" id="postCategory" placeholder="e.g., Technology, HTTP, DevTools" value="HTTP / Networking"> </div>

// 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> box-shadow: 0 8px 18px rgba(0

/* double card layout */ .builder-grid display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;

<div class="input-group"> <label>🏷️ Tags (comma separated)</label> <input type="text" id="postTags" placeholder="e.g., http, webdev, performance" value="http, api, development"> </div>

.card-header h2 i font-size: 1.4rem;

.post-title font-size: 1.7rem; font-weight: 700; color: #0b2b3f; line-height: 1.3; margin-bottom: 0.5rem; word-break: break-word;

label display: block; font-weight: 600; margin-bottom: 0.5rem; color: #1f3b4c; font-size: 0.85rem; letter-spacing: 0.3px; text-transform: uppercase;