Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Science Question Portal | Student Submission</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%); | |
| } | |
| .athlete-card:hover .athlete-overlay { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .athlete-overlay { | |
| transition: all 0.4s ease; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white shadow-lg z-50"> | |
| <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"> | |
| <span class="text-blue-800 font-bold text-2xl">AGYEMANG MATTHEW</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#home" class="text-gray-900 hover:text-blue-600 px-3 py-2 font-medium">Submit Questions</a> | |
| <a href="#solutions" class="text-gray-900 hover:text-blue-600 px-3 py-2 font-medium">View Solutions</a> | |
| <a href="#resources" class="text-gray-900 hover:text-blue-600 px-3 py-2 font-medium">Resources</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="mobile-menu-button" class="text-gray-900 hover:text-blue-600"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="block px-3 py-2 text-gray-900 hover:text-blue-600 font-medium">Submit Questions</a> | |
| <a href="#solutions" class="block px-3 py-2 text-gray-900 hover:text-blue-600 font-medium">View Solutions</a> | |
| <a href="#resources" class="block px-3 py-2 text-gray-900 hover:text-blue-600 font-medium">Resources</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Student Form Section --> | |
| <section id="home" class="bg-blue-50 pt-24 pb-16"> | |
| <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="bg-white rounded-xl shadow-lg p-8"> | |
| <h1 class="text-3xl font-bold text-center text-blue-800 mb-8">Science Question Portal</h1> | |
| <form class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> | |
| <input type="text" id="name" name="name" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="student-id" class="block text-sm font-medium text-gray-700 mb-1">Student ID</label> | |
| <input type="text" id="student-id" name="student-id" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="school" class="block text-sm font-medium text-gray-700 mb-1">School</label> | |
| <input type="text" id="school" name="school" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="course" class="block text-sm font-medium text-gray-700 mb-1">Course</label> | |
| <input type="text" id="course" name="course" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="questions" class="block text-sm font-medium text-gray-700 mb-1">Upload Science Questions (PDF/DOC)</label> | |
| <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg"> | |
| <div class="space-y-1 text-center"> | |
| <div class="flex text-sm text-gray-600"> | |
| <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-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">PDF, DOC, DOCX up to 10MB</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-4"> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300"> | |
| Submit Questions | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Wasty5/the-famous-sports-men" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |