Futuristic Tech File Upload - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Futuristic Tech File Upload</title> <style> body, html { margin: 0; padding: 0; font-family: 'Courier New', monospace; background: #1e1e1e; display: flex; justify-content: center; align-items: center; height: 100vh; } .upload-container { background: #2c2c2c; border-radius: 15px; padding: 30px; max-width: 500px; width: 100%; text-align: center; box-shadow: 0 10px 30px rgba(0, 255, 0, 0.3); } .upload-title { font-size: 26px; color: #0f0; margin-bottom: 20px; font-weight: 700; text-transform: uppercase; text-shadow: 0 0 5px #0f0; } .upload-box { background: #333; border: 3px solid #0f0; border-radius: 12px; padding: 20px; cursor: pointer; transition: border-color 0.3s; } .upload-box:hover { border-color: #00ff00; } .upload-box input[type="file"] { display: none; } .upload-box .icon { font-size: 50px; color: #0f0; margin-bottom: 10px; } .upload-box .text { font-size: 20px; color: #0f0; } </style> </head> <body> <div class="upload-container"> <div class="upload-title">Futuristic Tech</div> <div class="upload-box" onclick="document.getElementById('file-upload').click()"> <input type="file" id="file-upload" /> <div class="icon">💾</div> <div class="text">Click or Drag to Upload</div> </div> </div> <script> document.getElementById('file-upload').addEventListener('change', function() { alert('File selected!'); }); </script> </body> </html>