MACRO NEPAL
DROP DOWN LOGIN FORM FOR PARK MANAGMENT SYSTEM
awiskar acharya
November 10, 2025
10:51 am
Screenshot 2025 11 10 163305

FUTURISTIC CYBERPUNK DESIGN

FEATURE

  • Role Selector Dropdown (clean, professional, mobile-friendly)
  • Cyberpunk + Neon Glow Theme with animated background
  • Orbitron Font for sci-fi feel
  • Kathmandu Location Tag (top-right)
  • Glowing inputs & buttons
  • Animated scan lines background
  • Stronger password rules enforced
  • Nepali phone validation (+977)
  • Admin demo: [email protected] / Admin@2025
  • 100% single file – just save as parkpro-cyber.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PARKPRO - Smart Parking System</title> <style> :root { --bg: #0a0a0a; --card: #111; --text: #f0f0f0; --accent: #00ffff; --border: #333; --glow: rgba(0, 255, 255, 0.3); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: 'Orbitron', 'Arial', sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background-image: radial-gradient(circle at 20% 80%, rgba(0, 255, 255, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(0, 255, 255, 0.1) 0%, transparent 50%); } .container { background: var(--card); padding: 50px 40px; border-radius: 25px; box-shadow: 0 0 50px var(--glow), 0 0 100px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.05); width: 100%; max-width: 450px; border: 1px solid var(--border); position: relative; overflow: hidden; } .container::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: repeating-linear-gradient( 45deg, transparent, transparent 20px, rgba(0, 255, 255, 0.03) 20px, rgba(0, 255, 255, 0.03) 40px ); animation: scan 20s linear infinite; pointer-events: none; } @keyframes scan { 0% { transform: translate(0, 0); } 100% { transform: translate(50%, 50%); } } .header { text-align: center; margin-bottom: 40px; position: relative; z-index: 2; } .logo { font-size: 3.5rem; font-weight: 900; letter-spacing: 8px; background: linear-gradient(90deg, #00ffff, #0088ff, #00ffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 30px rgba(0, 255, 255, 0.5); margin-bottom: 10px; } .tagline { color: #00ffff; font-size: 1rem; letter-spacing: 3px; opacity: 0.9; } /* Role Selector */ .role-selector { margin-bottom: 35px; position: relative; z-index: 2; } .role-label { display: block; margin-bottom: 12px; color: #00ffff; font-weight: 700; letter-spacing: 1px; text-align: center; font-size: 1.1rem; } select { width: 100%; padding: 18px 20px; background: rgba(0, 255, 255, 0.05); border: 2px solid #00ffff; border-radius: 15px; color: #fff; font-size: 1.1rem; font-weight: 600; text-align: center; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ffff'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 20px center; background-size: 16px; cursor: pointer; transition: all 0.4s ease; box-shadow: 0 0 20px rgba(0, 255, 255, 0.2); } select:focus { outline: none; box-shadow: 0 0 30px rgba(0, 255, 255, 0.5); background-color: rgba(0, 255, 255, 0.1); } select option { background: #000; color: #00ffff; padding: 15px; } /* Form Styling */ .form-group { margin-bottom: 22px; position: relative; } label { display: block; margin-bottom: 10px; color: #00ffff; font-weight: 600; font-size: 0.95rem; letter-spacing: 1px; } input { width: 100%; padding: 16px 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(0, 255, 255, 0.3); border-radius: 12px; color: #fff; font-size: 1rem; transition: all 0.3s ease; } input:focus { outline: none; border-color: #00ffff; box-shadow: 0 0 20px rgba(0, 255, 255, 0.4); background: rgba(0, 255, 255, 0.08); } .error { color: #ff3366; font-size: 0.85rem; margin-top: 8px; display: none; font-weight: 600; } .success { color: #00ff88; font-size: 0.95rem; margin-top: 10px; text-align: center; display: none; font-weight: 700; } button { width: 100%; padding: 18px; background: linear-gradient(45deg, #00ffff, #0088ff); color: #000; border: none; border-radius: 15px; font-size: 1.2rem; font-weight: 900; letter-spacing: 2px; cursor: pointer; transition: all 0.4s ease; margin-top: 15px; box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3); text-transform: uppercase; } button:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 255, 255, 0.5); } .switch-text { text-align: center; margin-top: 25px; color: #888; font-size: 0.9rem; } .switch-text a { color: #00ffff; text-decoration: none; font-weight: 700; } .switch-text a:hover { text-decoration: underline; } .form-section { display: none; animation: fadeIn 0.6s ease; } .form-section.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .location-tag { position: absolute; top: 15px; right: 15px; background: rgba(0, 255, 255, 0.1); padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; color: #00ffff; border: 1px solid rgba(0, 255, 255, 0.3); } @media (max-width: 480px) { .container { padding: 40px 25px; } .logo { font-size: 2.8rem; } } </style> <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <div class="location-tag">Kathmandu, Nepal</div> <div class="header"> <h1 class="logo">PARKPRO</h1> <p class="tagline">FUTURE OF PARKING</p> </div> <!-- Role Selector Dropdown --> <div class="role-selector"> <label class="role-label">SELECT YOUR ROLE</label> <select id="roleSelect"> <option value="admin">ADMINISTRATOR</option> <option value="owner">PARKING OWNER</option> <option value="client">CLIENT / DRIVER</option> </select> </div> <!-- Forms --> <div class="form-container"> <!-- Admin Login --> <div id="admin-form" class="form-section active"> <h2 style="text-align:center; color:#00ffff; margin-bottom:25px; font-size:1.8rem;">ADMIN ACCESS</h2> <div class="form-group"> <label>ADMIN EMAIL</label> <input type="email" id="admin-email" placeholder="[email protected]"> <div class="error" id="admin-email-error"></div> </div> <div class="form-group"> <label>MASTER PASSWORD</label> <input type="password" id="admin-password" placeholder="Enter secure password"> <div class="error" id="admin-pass-error"></div> </div> <button onclick="adminLogin()">SECURE LOGIN</button> <div class="success" id="admin-success"></div> </div> <!-- Owner Register --> <div id="owner-form" class="form-section"> <h2 style="text-align:center; color:#00ffff; margin-bottom:25px; font-size:1.8rem;">OWNER REGISTRATION</h2> <div class="form-group"> <label>FULL NAME</label> <input type="text" id="owner-name" placeholder="Ram Bahadur Thapa"> </div> <div class="form-group"> <label>EMAIL ADDRESS</label> <input type="email" id="owner-email" placeholder="[email protected]"> <div class="error" id="owner-email-error"></div> </div> <div class="form-group"> <label>PARKING LOT NAME</label> <input type="text" id="owner-parking" placeholder="Thamel Central Parking"> <div class="error" id="owner-parking-error"></div> </div> <div class="form-group"> <label>SECURE PASSWORD</label> <input type="password" id="owner-password" placeholder="Create strong password"> <div class="error" id="owner-pass-error"></div> </div> <button onclick="ownerRegister()">REGISTER PARKING</button> <div class="success" id="owner-success"></div> </div> <!-- Client Register --> <div id="client-form" class="form-section"> <h2 style="text-align:center; color:#00ffff; margin-bottom:25px; font-size:1.8rem;">CLIENT ACCOUNT</h2> <div class="form-group"> <label>FULL NAME</label> <input type="text" id="client-name" placeholder="Sita Sharma"> </div> <div class="form-group"> <label>EMAIL</label> <input type="email" id="client-email" placeholder="[email protected]"> <div class="error" id="client-email-error"></div> </div> <div class="form-group"> <label>PHONE (Nepal)</label> <input type="tel" id="client-phone" placeholder="+977 9812345678"> <div class="error" id="client-phone-error"></div> </div> <div class="form-group"> <label>PASSWORD</label> <input type="password" id="client-password" placeholder="Minimum 8 characters"> <div class="error" id="client-pass-error"></div> </div> <button onclick="clientRegister()">CREATE ACCOUNT</button> <div class="success" id="client-success"></div> </div> </div> <div class="switch-text"> Need help? Contact <a href="mailto:[email protected]">[email protected]</a> </div> </div> <script> const roleSelect = document.getElementById('roleSelect'); const formSections = document.querySelectorAll('.form-section'); // Change form on role select roleSelect.addEventListener('change', function() { const role = this.value; formSections.forEach(form => { form.classList.remove('active'); }); document.getElementById(`${role}-form`).classList.add('active'); }); // Validation Functions function validateEmail(email) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); } function validatePassword(password) { const re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/; return re.test(password); } function clearErrors() { document.querySelectorAll('.error').forEach(e => e.style.display = 'none'); document.querySelectorAll('.success').forEach(s => s.style.display = 'none'); } // Admin Login function adminLogin() { clearErrors(); const email = document.getElementById('admin-email').value.trim(); const pass = document.getElementById('admin-password').value; if (!validateEmail(email)) { document.getElementById('admin-email-error').textContent = 'Invalid email format'; document.getElementById('admin-email-error').style.display = 'block'; return; } if (email === '[email protected]' && pass === 'Admin@2025') { document.getElementById('admin-success').textContent = 'ACCESS GRANTED - WELCOME ADMIN'; document.getElementById('admin-success').style.display = 'block'; setTimeout(() => { alert('PARKPRO ADMIN DASHBOARD LOADED'); }, 1000); } else { document.getElementById('admin-pass-error').textContent = 'ACCESS DENIED - Wrong credentials'; document.getElementById('admin-pass-error').style.display = 'block'; } } // Owner Register function ownerRegister() { clearErrors(); const name = document.getElementById('owner-name').value.trim(); const email = document.getElementById('owner-email').value.trim(); const parking = document.getElementById('owner-parking').value.trim(); const pass = document.getElementById('owner-password').value; let valid = true; if (name.length < 3) valid = false, document.getElementById('owner-parking-error').textContent = 'Name too short', document.getElementById('owner-parking-error').style.display = 'block'; if (!validateEmail(email)) valid = false, document.getElementById('owner-email-error').textContent = 'Valid email required', document.getElementById('owner-email-error').style.display = 'block'; if (parking.length < 5) valid = false, document.getElementById('owner-parking-error').textContent = 'Enter parking name', document.getElementById('owner-parking-error').style.display = 'block'; if (!validatePassword(pass)) { valid = false; document.getElementById('owner-pass-error').textContent = '8+ chars, 1 Upper, 1 lower, 1 number, 1 symbol'; document.getElementById('owner-pass-error').style.display = 'block'; } if (valid) { document.getElementById('owner-success').textContent = 'OWNER ACCOUNT ACTIVATED!'; document.getElementById('owner-success').style.display = 'block'; setTimeout(() => alert(`Welcome ${name}!\nYour parking lot "${parking}" is now live!`), 800); } } // Client Register function clientRegister() { clearErrors(); const name = document.getElementById('client-name').value.trim(); const email = document.getElementById('client-email').value.trim(); const phone = document.getElementById('client-phone').value.trim(); const pass = document.getElementById('client-password').value; let valid = true; if (!validateEmail(email)) valid = false, document.getElementById('client-email-error').textContent = 'Valid email required', document.getElementById('client-email-error').style.display = 'block'; if (!/^\+977[\s-]?[0-9]{10}$/.test(phone.replace(/[\s-]/g, ''))) { valid = false; document.getElementById('client-phone-error').textContent = 'Use +977 format'; document.getElementById('client-phone-error').style.display = 'block'; } if (!validatePassword(pass)) { valid = false; document.getElementById('client-pass-error').textContent = 'Password too weak!'; document.getElementById('client-pass-error').style.display = 'block'; } if (valid) { document.getElementById('client-success').textContent = 'WELCOME TO PARKPRO!'; document.getElementById('client-success').style.display = 'block'; setTimeout(() => alert(`Hi ${name}!\nStart parking smarter in Kathmandu!`), 800); } } // Enter key support document.addEventListener('keypress', function(e) { if (e.key === 'Enter') { const role = roleSelect.value; if (role === 'admin') adminLogin(); else if (role === 'owner') ownerRegister(); else if (role === 'client') clientRegister(); } }); </script> </body> </html>

HTML Login & Registration Forms – Parking / Management Systems & Modern UI Designs (Related to HTML Forms)

Login & Register Form for Park Management System with Dropdown:
This type of HTML form combines login and registration functionality for parking or park management systems. It often uses dropdown menus to switch between login and sign-up options in a single interface, making it more user-friendly and compact for web applications.
Read more: https://macronepal.com/blog/login-and-register-form-for-park-managmet-system-with-dropdown/

Dropdown Login Form for Parking System:
A dropdown login form allows users to select options like user type (admin/user) before logging in. This improves system control and is commonly used in parking management systems to separate different access levels.
Read more: https://macronepal.com/blog/drop-down-login-form-for-parking-system/

Dropdown Login Form for Park Management System:
Similar to parking systems, this login design uses dropdown selection to manage different roles such as staff, admin, or users. It simplifies authentication while improving system organization.
Read more: https://macronepal.com/blog/drop-down-login-form-for-park-managment-system/

Simple Login Form for Park Management System:
A basic login form built using HTML that includes fields like username and password. It is used for secure access to park management dashboards and is easy to design and implement.
Read more: https://macronepal.com/blog/simple-login-form-code-for-park-managment-system/

AI Style Glow Fullscreen Overlay Login Form:
This modern login form uses glowing UI effects and full-screen overlays to create an advanced and attractive design. It enhances user experience using CSS animations and visual effects.
Read more: https://macronepal.com/blog/ai-style-glow-fullscreen-overlay-login-form/

Glassmorphism Login Form:
Glassmorphism is a modern UI design style that uses blur, transparency, and frosted glass effects. It makes login forms look stylish and professional while maintaining readability.
Read more: https://macronepal.com/blog/what-is-glassmorphism-login-form/

Emoji Background Overlay Full Screen Login Form:
This login design uses emoji-based backgrounds with full-screen overlay effects to create a fun and engaging user interface while keeping login functionality simple.
Read more: https://macronepal.com/blog/emoji-background-overlay-full-screen-login-form/

Minimal Center Alignment Fullscreen Overlay Login Form:
A clean and minimal login form centered on the screen. It focuses on simplicity, proper alignment, and distraction-free user experience.
Read more: https://macronepal.com/blog/minimal-center-alignment-fullscreen-overlay-login-form/

Image Blur Focus Fullscreen Overlay Login Form:
This login design uses blurred background images with a focused login box in the center, improving visual depth and user attention on the form.
Read more: https://macronepal.com/blog/image-blur-focus-fullscreen-overlay-login-form/

Geometric Pattern Fullscreen Overlay Login Form:
A creative login form design that uses geometric patterns as backgrounds with overlay effects, giving a modern and structured visual appearance.
Read more: https://macronepal.com/blog/geometric-pattern-fullscreen-overlay-login-form/

Category : LOGIN FORM

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper