Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Web Scraping Project</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 min-h-screen flex items-center justify-center font-[Poppins] text-white"> | |
| <div class="w-full max-w-xl bg-gray-800/70 backdrop-blur-md rounded-2xl shadow-2xl p-8 border border-gray-700"> | |
| <!-- Title --> | |
| <h1 class="text-center text-3xl font-bold text-cyan-400 mb-8 tracking-wide"> | |
| Web Scraping Project | |
| </h1> | |
| <!-- Form --> | |
| <form method="POST" action="/scrap" class="space-y-6"> | |
| <!-- URL input --> | |
| <div> | |
| <label for="url" class="block text-lg mb-2 font-semibold text-gray-300">Enter Website URL</label> | |
| <input | |
| type="text" | |
| id="url" | |
| name="url" | |
| placeholder="https://example.com" | |
| required | |
| class="w-full px-4 py-3 rounded-lg bg-gray-900 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-cyan-400 placeholder-gray-500" | |
| > | |
| </div> | |
| <!-- Dropdown and Button Row --> | |
| <div class="flex flex-col sm:flex-row items-center justify-between gap-4"> | |
| <div class="w-full sm:w-1/2"> | |
| <label for="Headers" class="block text-lg mb-2 font-semibold text-gray-300">Select Header Type</label> | |
| <select | |
| id="Headers" | |
| name="Headers" | |
| class="w-full px-4 py-3 rounded-lg bg-gray-900 border border-gray-700 text-gray-200 focus:outline-none focus:ring-2 focus:ring-cyan-400" | |
| > | |
| <option value="h1">H1</option> | |
| <option value="h2">H2</option> | |
| <option value="h3">H3</option> | |
| </select> | |
| </div> | |
| <!-- Submit Button --> | |
| <div class="w-full sm:w-1/3 mt-6 sm:mt-8 text-center"> | |
| <button | |
| type="submit" | |
| class="w-full py-3 px-6 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg shadow-lg transition-all duration-300 ease-in-out" | |
| > | |
| Next → | |
| </button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Subtle background animation --> | |
| <div class="absolute top-0 left-0 w-full h-full -z-10"> | |
| <div class="absolute w-72 h-72 bg-cyan-500/30 rounded-full blur-3xl top-20 left-10 animate-pulse"></div> | |
| <div class="absolute w-96 h-96 bg-blue-600/20 rounded-full blur-3xl bottom-10 right-10 animate-ping"></div> | |
| </div> | |
| </body> | |
| </html> | |