<div class="input-group"> <label>✍️ Author name</label> <input type="text" id="postAuthor" placeholder="Author or handle" value="Alex Rivera"> </div>
.empty-preview background: #f9fcff; border-radius: 1.5rem; padding: 3rem 1.5rem; text-align: center; color: #98b1c9; border: 1px dashed #cbdde9; ✍️ Author name<
<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'); .empty-preview background: #f9fcff
.btn-generate:hover background: linear-gradient(100deg, #1f6e9e, #134f72); transform: scale(0.98); box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 3rem 1.5rem
<div class="input-group"> <label>📅 Date (optional)</label> <input type="date" id="postDate"> </div>