diff --git a/admin.html b/admin.html new file mode 100644 index 00000000..abb712e8 --- /dev/null +++ b/admin.html @@ -0,0 +1,119 @@ + + + + + + UniAccess Admin Panel + + + +
+ +

🚀 UniAccess Admin Panel

+

Securely access and manage IoT devices

+ + + + +
+ + + diff --git a/assets/QR_RIFD.jpg b/assets/QR_RIFD.jpg new file mode 100644 index 00000000..908857d4 Binary files /dev/null and b/assets/QR_RIFD.jpg differ diff --git a/assets/animations.css b/assets/animations.css new file mode 100644 index 00000000..e69de29b diff --git a/assets/img/logo.jpeg b/assets/img/logo.jpeg new file mode 100644 index 00000000..d8e47c39 Binary files /dev/null and b/assets/img/logo.jpeg differ diff --git a/assets/js/script.js b/assets/js/script.js new file mode 100644 index 00000000..296be1dc --- /dev/null +++ b/assets/js/script.js @@ -0,0 +1,20 @@ +let status = { + door: false, + fan: false, + light: false +}; + +function toggleDevice(device) { + status[device] = !status[device]; + alert(device + " is now " + (status[device] ? "ON" : "OFF")); +} + +function handleRecharge() { + let amount = document.getElementById('rechargeAmount').value; + if (amount > 0) { + alert("Metro Card Recharged with ₹" + amount); + document.getElementById('rechargeAmount').value = ""; + } else { + alert("Enter a valid amount!"); + } +} diff --git a/assets/styles.css b/assets/styles.css new file mode 100644 index 00000000..7c23292e --- /dev/null +++ b/assets/styles.css @@ -0,0 +1,253 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap'); + +body { + font-family: 'Poppins', sans-serif; + text-align: center; + background: linear-gradient(45deg, #1e3c72, #2a5298); + background-size: 400% 400%; + animation: gradientBG 6s ease infinite; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; +} + +@keyframes gradientBG { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +nav { + position: fixed; + top: 0; + width: 100%; + background: rgba(255, 255, 255, 0.2); + padding: 15px; + text-align: center; + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(255, 255, 255, 0.3); +} + +nav a { + color: white; + text-decoration: none; + margin: 0 15px; + font-weight: bold; + transition: all 0.3s ease; +} + +nav a:hover { + color: #ffd700; +} + +.payment-container { + background: rgba(255, 255, 255, 0.2); + padding: 30px; + border-radius: 15px; + box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.4); + backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.4); + transition: all 0.3s; + width: 350px; + text-align: center; +} + +.payment-card { + background: rgba(255, 255, 255, 0.3); + padding: 20px; + border-radius: 10px; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.3); + transition: 0.3s; +} + +.payment-card:hover { + transform: scale(1.05); +} + +h1, h2, p { + color: white; +} + +input { + width: 90%; + padding: 10px; + margin: 10px 0; + border-radius: 5px; + border: none; + font-size: 16px; + text-align: center; +} + +.btn { + display: block; + width: 100%; + padding: 15px; + margin: 10px 0; + font-size: 18px; + border: none; + border-radius: 10px; + cursor: pointer; + font-weight: bold; + transition: all 0.3s ease-in-out; +} + +.btn:hover { + transform: scale(1.1); +} + +.btn-payment { background: #4CAF50; color: white; } +.btn-home { background: #1e88e5; color: white; } +.btn-logout { background: #f44336; color: white; } +@keyframes gradientBG { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +.admin-container { + max-width: 400px; + background: rgba(255, 255, 255, 0.2); + padding: 30px; + border-radius: 15px; + box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.5); + backdrop-filter: blur(15px); + border: 1px solid rgba(255, 255, 255, 0.3); + text-align: center; + transition: all 0.3s ease-in-out; +} + +.admin-container:hover { + transform: scale(1.05); +} + +.logo { + width: 90px; + height: auto; + margin-bottom: 20px; +} + +h1, p { + color: white; + margin-bottom: 20px; +} + +.login-box { + display: flex; + flex-direction: column; + align-items: center; +} + +input { + width: 90%; + padding: 14px; + margin: 10px 0; + border-radius: 8px; + border: none; + font-size: 16px; + text-align: center; + box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease-in-out; +} + +input:focus { + transform: scale(1.05); + outline: none; +} + +.btn { + display: block; + width: 100%; + padding: 14px; + margin: 10px 0; + font-size: 18px; + border: none; + border-radius: 10px; + cursor: pointer; + font-weight: bold; + transition: all 0.3s ease-in-out; +} + +.btn:hover { + transform: scale(1.1); +} + +.btn-login { background: #007bff; color: white; } +.btn-forgot { background: #17a2b8; color: white; font-size: 14px; padding: 10px; } +.scanner-container { + background: #ffffff; + padding: 20px; + border-radius: 12px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + text-align: center; + width: 350px; +} + +h1 { + font-size: 22px; + color: #0047ab; + margin-bottom: 10px; +} + +p { + font-size: 14px; + color: #0056b3; +} + +.qr-container { + display: flex; + justify-content: center; + margin: 15px 0; +} + +.qr-container img { + width: 200px; + height: 200px; + border-radius: 8px; + border: 3px solid #0047ab; + box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); +} + +.qr-text { + font-size: 13px; + color: #003a8c; + font-weight: bold; +} + +.button-group { + margin-top: 15px; +} + +.scan-button, .back-button { + width: 100%; + padding: 10px; + margin: 5px 0; + border: none; + border-radius: 8px; + font-size: 16px; + cursor: pointer; + transition: 0.3s ease-in-out; +} + +.scan-button { + background: #0047ab; + color: white; +} + +.scan-button:hover { + background: #003a8c; +} + +.back-button { + background: #7ca8f7; + color: white; +} + +.back-button:hover { + background: #5f94e7; +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..6a44ff7f --- /dev/null +++ b/index.html @@ -0,0 +1,225 @@ + + + + + + UniAccess Dashboard + + + + + + +
+ +

🚀 UniAccess Dashboard

+

One card, multiple possibilities. Manage payments, home appliances, and metro recharge securely.

+ +

💰 Wallet Balance: ₹1000

+ + +
+ + +
+ + +
+ +
+ +

📜 Transaction History

+
No transactions yet.
+ + 💳 Make Payment + 📡 Scan Your Card +
+ + + + diff --git a/payment.html b/payment.html new file mode 100644 index 00000000..6c5be6b0 --- /dev/null +++ b/payment.html @@ -0,0 +1,103 @@ + + + + + + Payment Gateway + + + + + + +
+

💳 Secure Payment

+

Enter your details to proceed with the payment.

+ +
+ + +
+
+ + + + \ No newline at end of file diff --git a/scan.html b/scan.html new file mode 100644 index 00000000..4bb33ba2 --- /dev/null +++ b/scan.html @@ -0,0 +1,35 @@ + + + + + + RFID & QR Scanner + + + + + + +
+

📡 RFID & QR Scanner

+

Scan your RFID card or the QR code below to control home appliances.

+ + +
+ Scan Here to Control Home Appliances +
+

Scan this QR code to control home appliances.

+ + +
+ + +
+
+ + +