| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Submit Essay | Global Essay Competition</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <style> |
| .file-upload { |
| border: 2px dashed #cbd5e0; |
| transition: all 0.3s ease; |
| } |
| .file-upload:hover { |
| border-color: #818cf8; |
| } |
| .file-upload.active { |
| border-color: #4f46e5; |
| background-color: #f5f3ff; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50"> |
| |
| <nav class="bg-white shadow-sm"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i data-feather="edit-3" class="h-8 w-8 text-indigo-600"></i> |
| <span class="ml-2 text-xl font-bold text-gray-900">Global Essay</span> |
| </div> |
| </div> |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
| <a href="index.html" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Home</a> |
| <a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-indigo-500 text-sm font-medium">Submit Essay</a> |
| <a href="judges.html" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Judges Portal</a> |
| <a href="results.html" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Results</a> |
| </div> |
| <div class="-mr-2 flex items-center md:hidden"> |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8"> |
| <div class="lg:col-span-5"> |
| <div class="bg-white shadow rounded-lg p-6 sticky top-6" data-aos="fade-right"> |
| <h2 class="text-2xl font-bold text-gray-900 mb-4">Submission Guidelines</h2> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i data-feather="check-circle" class="h-5 w-5 text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-600"> |
| Essays must be original, unpublished work between 1,500-3,000 words. |
| </p> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i data-feather="check-circle" class="h-5 w-5 text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-600"> |
| Only .doc, .docx, or .pdf formats accepted. |
| </p> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i data-feather="check-circle" class="h-5 w-5 text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-600"> |
| Include a title page with your name, contact information, and essay title. |
| </p> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i data-feather="check-circle" class="h-5 w-5 text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-600"> |
| No identifying information should appear in the essay text itself. |
| </p> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i data-feather="check-circle" class="h-5 w-5 text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-600"> |
| Submission deadline is August 31, 2023 at 11:59 PM GMT. |
| </p> |
| </div> |
| </div> |
| <div class="mt-6 border-t border-gray-200 pt-6"> |
| <h3 class="text-lg font-medium text-gray-900">Need Help?</h3> |
| <p class="mt-2 text-sm text-gray-600"> |
| Contact our support team at <a href="mailto:support@globalessay.com" class="text-indigo-600 hover:text-indigo-500">support@globalessay.com</a> |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-8 lg:mt-0 lg:col-span-7"> |
| <div class="bg-white shadow overflow-hidden rounded-lg" data-aos="fade-left"> |
| <div class="px-4 py-5 sm:p-6"> |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">Essay Submission Form</h2> |
| |
| <form class="space-y-6"> |
| <div> |
| <label for="full-name" class="block text-sm font-medium text-gray-700">Full Name</label> |
| <div class="mt-1"> |
| <input type="text" name="full-name" id="full-name" autocomplete="name" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"> |
| </div> |
| </div> |
|
|
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label> |
| <div class="mt-1"> |
| <input type="email" name="email" id="email" autocomplete="email" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"> |
| </div> |
| </div> |
|
|
| <div> |
| <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label> |
| <div class="mt-1"> |
| <input type="tel" name="phone" id="phone" autocomplete="tel" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"> |
| </div> |
| </div> |
|
|
| <div> |
| <label for="country" class="block text-sm font-medium text-gray-700">Country</label> |
| <div class="mt-1"> |
| <select id="country" name="country" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"> |
| <option>Select your country</option> |
| <option>United States</option> |
| <option>United Kingdom</option> |
| <option>Canada</option> |
| <option>Australia</option> |
| <option>Other</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div> |
| <label for="essay-title" class="block text-sm font-medium text-gray-700">Essay Title</label> |
| <div class="mt-1"> |
| <input type="text" name="essay-title" id="essay-title" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"> |
| </div> |
| </div> |
|
|
| <div> |
| <label for="category" class="block text-sm font-medium text-gray-700">Category</label> |
| <div class="mt-1"> |
| <select id="category" name="category" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"> |
| <option>Select a category</option> |
| <option>Fiction</option> |
| <option>Non-Fiction</option> |
| <option>Science & Technology</option> |
| <option>Social Issues</option> |
| <option>Personal Narrative</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div> |
| <label class="block text-sm font-medium text-gray-700">Upload Essay</label> |
| <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md file-upload" id="dropzone"> |
| <div class="space-y-1 text-center"> |
| <i data-feather="upload" class="mx-auto h-12 w-12 text-gray-400"></i> |
| <div class="flex text-sm text-gray-600"> |
| <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none"> |
| <span>Upload a file</span> |
| <input id="file-upload" name="file-upload" type="file" class="sr-only"> |
| </label> |
| <p class="pl-1">or drag and drop</p> |
| </div> |
| <p class="text-xs text-gray-500"> |
| DOC, DOCX, or PDF up to 10MB |
| </p> |
| </div> |
| </div> |
| <div id="file-info" class="mt-2 text-sm text-gray-600 hidden"> |
| <i data-feather="file" class="inline h-4 w-4"></i> |
| <span id="file-name" class="ml-1"></span> |
| <span id="file-size" class="ml-2 text-gray-500"></span> |
| </div> |
| </div> |
|
|
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="terms" name="terms" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 text-sm"> |
| <label for="terms" class="font-medium text-gray-700">I agree to the <a href="#" class="text-indigo-600 hover:text-indigo-500">terms and conditions</a></label> |
| <p class="text-gray-500">I confirm this is my original work and has not been published elsewhere.</p> |
| </div> |
| </div> |
|
|
| <div> |
| <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
| Submit Essay |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-800"> |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Competition</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Rules</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">FAQ</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Participants</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="submit.html" class="text-base text-gray-300 hover:text-white">Submit Essay</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Guidelines</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Past Winners</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Judges</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="judges.html" class="text-base text-gray-300 hover:text-white">Judges Portal</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Judging Criteria</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Become a Judge</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Contact Us</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Instagram</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between"> |
| <div class="flex space-x-6 md:order-2"> |
| <a href="#" class="text-gray-400 hover:text-gray-300"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-gray-300"> |
| <i data-feather="instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-gray-300"> |
| <i data-feather="facebook"></i> |
| </a> |
| </div> |
| <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1"> |
| © 2023 Global Essay Competition. All rights reserved. |
| </p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| AOS.init(); |
| feather.replace(); |
| |
| |
| const dropzone = document.getElementById('dropzone'); |
| const fileInput = document.getElementById('file-upload'); |
| const fileInfo = document.getElementById('file-info'); |
| const fileName = document.getElementById('file-name'); |
| const fileSize = document.getElementById('file-size'); |
| |
| fileInput.addEventListener('change', (e) => { |
| if (e.target.files.length) { |
| const file = e.target.files[0]; |
| updateFileInfo(file); |
| } |
| }); |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| dropzone.addEventListener(eventName, preventDefaults, false); |
| }); |
| |
| function preventDefaults(e) { |
| e.preventDefault(); |
| e.stopPropagation(); |
| } |
| |
| ['dragenter', 'dragover'].forEach(eventName => { |
| dropzone.addEventListener(eventName, highlight, false); |
| }); |
| |
| ['dragleave', 'drop'].forEach(eventName => { |
| dropzone.addEventListener(eventName, unhighlight, false); |
| }); |
| |
| function highlight() { |
| dropzone.classList.add('active'); |
| } |
| |
| function unhighlight() { |
| dropzone.classList.remove('active'); |
| } |
| |
| dropzone.addEventListener('drop', handleDrop, false); |
| |
| function handleDrop(e) { |
| const dt = e.dataTransfer; |
| const file = dt.files[0]; |
| fileInput.files = dt.files; |
| updateFileInfo(file); |
| } |
| |
| function updateFileInfo(file) { |
| fileName.textContent = file.name; |
| fileSize.textContent = formatFileSize(file.size); |
| fileInfo.classList.remove('hidden'); |
| } |
| |
| function formatFileSize(bytes) { |
| if (bytes === 0) return '0 Bytes'; |
| const k = 1024; |
| const sizes = ['Bytes', 'KB', 'MB', 'GB']; |
| const i = Math.floor(Math.log(bytes) / Math.log(k)); |
| return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; |
| } |
| </script> |
| </body> |
| </html> |
|
|
