{% extends 'base.html' %} {% block title %}Create Post{% endblock %} {% block content %} <style> .form-group { margin-bottom: 20px; position: relative; } .container { display: flex; justify-content: center; } form { width: 120%; padding: 20px; border-radius: 5px; background-color: #343a40; box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); } input[type="text"], textarea { width: calc(100% - 24px); padding: 10px; border-radius: 5px; cursor: text; } input[type="file"] { width: calc(100% - 24px); padding: 10px; border-radius: 5px; position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; } .btn-primary { background-color: #007bff; border: none; color: #fff; padding: 10px 20px; border-radius: 5px; cursor: pointer; box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #0051a8 0 -3px 0 inset; } button:focus { box-shadow: #0051a8 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #0051a8 0 -3px 0 inset; } .btn-primary:hover { box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #0051a8 0 -3px 0 inset; } .note { font-style: italic; color: #ccc; } .custom-file-upload { border: 1px solid #ccc; display: inline-block; padding: 10px; cursor: pointer; width: calc(100% - 44px); border-radius: 5px; background-color: #fff; color: #333; text-align: center; } </style> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Create a New Post</h1> <form method="POST" action="{{ url_for('create_post', category_id=category.id) }}" enctype="multipart/form-data"> {{ form.csrf_token }} <div class="form-group"> <input type="text" class="form-control" id="post_name" name="post_name" placeholder="Title" required> </div> <div class="form-group"> <textarea class="form-control" id="text" name="text" rows="6" placeholder="Content" required></textarea> </div> <label for="media" class="custom-file-upload" id="drop-area"> Click or drag & drop to upload media </label> <input type="file" id="media" name="media" style="display: none;" multiple><br> <ul id="file-list" class="file-list"></ul> <button type="submit" class="btn btn-primary">Submit</button> </form> <p class="note"><strong>Note:</strong> **bold** for bold text, *italic* for italic text</p> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const textarea = document.getElementById('text'); const fileList = document.getElementById('file-list'); const dropArea = document.getElementById('drop-area'); const fileInput = document.getElementById('media'); textarea.addEventListener('input', function() { const text = textarea.value; const boldRegex = /\*\*(.*?)\*\*/g; const italicRegex = /\*(.*?)\*/g; const newText = text.replace(boldRegex, '<strong>$1</strong>').replace(italicRegex, '<em>$1</em>'); textarea.innerHTML = newText; }); ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { dropArea.addEventListener(eventName, preventDefaults, false); }); function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); } ['dragenter', 'dragover'].forEach(eventName => { dropArea.addEventListener(eventName, highlight, false); }); ['dragleave', 'drop'].forEach(eventName => { dropArea.addEventListener(eventName, unhighlight, false); }); function highlight() { dropArea.style.backgroundColor = '#f0f0f0'; } function unhighlight() { dropArea.style.backgroundColor = '#fff'; } dropArea.addEventListener('drop', handleDrop, false); function handleDrop(e) { const dt = e.dataTransfer; const files = dt.files; handleFiles(files); } function handleFiles(files) { fileList.innerHTML = ''; for (let i = 0; i < files.length; i++) { const file = files[i]; const listItem = document.createElement('li'); listItem.textContent = file.name; listItem.classList.add('file-list-item'); fileList.appendChild(listItem); } } fileInput.addEventListener('change', function() { handleFiles(this.files); }); }); </script> {% endblock %}