ashkankari70gmail/newspro-multi-author-platform
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Submit Article - NewsPro</title>7 <meta name="description" content="Submit your article for review on NewsPro. Share your expertise with our readers.">8 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">9 <script src="https://cdn.tailwindcss.com"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11</head>12<body class="bg-gray-100">13 <!-- Header -->14 <header class="bg-white shadow-md">15 <div class="container mx-auto px-4 py-4">16 <div class="flex justify-between items-center">17 <div class="flex items-center">18 <i data-feather="book-open" class="text-blue-600 mr-2"></i>19 <h1 class="text-2xl font-bold text-gray-800">NewsPro</h1>20 </div>21 <div class="flex items-center space-x-4">22 <span class="text-gray-600">Welcome, John Smith</span>23 <a href="index.html" class="text-blue-600 hover:text-blue-800">Logout</a>24 </div>25 </div>26 </div>27 </header>28 29 <!-- Submit Article Form -->30 <main class="container mx-auto px-4 py-8">31 <div class="bg-white rounded-lg shadow-md p-8">32 <div class="flex justify-between items-center mb-8">33 <h1 class="text-3xl font-bold">Submit New Article</h1>34 <a href="author-dashboard.html" class="text-blue-600 hover:text-blue-800 flex items-center">35 <i data-feather="arrow-left" class="mr-2 w-5 h-5"></i>36 Back to Dashboard37 </a>38 </div>39 40 <form>41 <div class="mb-6">42 <label class="block text-gray-700 text-sm font-bold mb-2" for="title">43 Article Title44 </label>45 <input class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="title" type="text" placeholder="Enter your article title" required>46 </div>47 48 <div class="mb-6">49 <label class="block text-gray-700 text-sm font-bold mb-2" for="category">50 Category51 </label>52 <select class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="category" required>53 <option value="">Select a category</option>54 <option value="technology">Technology</option>55 <option value="business">Business</option>56 <option value="science">Science</option>57 <option value="sports">Sports</option>58 <option value="politics">Politics</option>59 <option value="health">Health</option>60 <option value="entertainment">Entertainment</option>61 </select>62 </div>63 64 <div class="mb-6">65 <label class="block text-gray-700 text-sm font-bold mb-2" for="featured-image">66 Featured Image67 </label>68 <div class="flex items-center">69 <div class="border-2 border-dashed border-gray-300 rounded-lg w-32 h-32 flex items-center justify-center mr-4">70 <i data-feather="image" class="text-gray-400 w-8 h-8"></i>71 </div>72 <div>73 <input type="file" class="hidden" id="featured-image">74 <label for="featured-image" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded cursor-pointer inline-block">75 Choose Image76 </label>77 <p class="text-gray-500 text-sm mt-2">Recommended: 1200x630 pixels</p>78 </div>79 </div>80 </div>81 82 <div class="mb-6">83 <label class="block text-gray-700 text-sm font-bold mb-2" for="excerpt">84 Excerpt85 </label>86 <textarea class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="excerpt" placeholder="Brief summary of your article (150-200 characters)" rows="3" required></textarea>87 </div>88 89 <div class="mb-6">90 <label class="block text-gray-700 text-sm font-bold mb-2" for="content">91 Article Content92 </label>93 <textarea class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="content" placeholder="Write your article content here..." rows="15" required></textarea>94 </div>95 96 <div class="mb-6">97 <label class="block text-gray-700 text-sm font-bold mb-2">98 Tags99 </label>100 <div class="flex flex-wrap gap-2 mb-3">101 <input type="text" class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Add a tag" style="width: 200px;">102 <button type="button" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded">Add</button>103 </div>104 <div class="flex flex-wrap gap-2">105 <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded flex items-center">106 Technology107 <i data-feather="x" class="ml-2 w-4 h-4 cursor-pointer"></i>108 </span>109 <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded flex items-center">110 AI111 <i data-feather="x" class="ml-2 w-4 h-4 cursor-pointer"></i>112 </span>113 <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded flex items-center">114 Innovation115 <i data-feather="x" class="ml-2 w-4 h-4 cursor-pointer"></i>116 </span>117 </div>118 </div>119 120 <div class="flex items-center justify-between">121 <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">122 Save Draft123 </button>124 <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">125 Submit for Review126 </button>127 </div>128 </form>129 </div>130 </main>131 132 <!-- Footer -->133 <footer class="bg-gray-800 text-white py-8">134 <div class="container mx-auto px-4 text-center">135 <p>© 2023 NewsPro. All rights reserved.</p>136 </div>137 </footer>138 139 <script>feather.replace();</script>140</body>141</html>