diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..7f9ad67 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,82 @@ + +:root { + --primary-color: #4A90E2; + --background-color: #F4F7FA; + --surface-color: #FFFFFF; + --text-color: #333333; + --error-color: #D0021B; + --border-radius: 8px; +} + +body { + font-family: 'Inter', sans-serif; + background-color: var(--background-color); + color: var(--text-color); + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + margin: 0; +} + +.login-container { + width: 100%; + max-width: 400px; + padding: 2rem; +} + +.login-card { + background-color: var(--surface-color); + padding: 2.5rem; + border-radius: var(--border-radius); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); + text-align: center; +} + +.login-card h1 { + font-weight: 700; + font-size: 1.75rem; + margin-bottom: 0.5rem; + color: var(--primary-color); +} + +.login-card .tagline { + margin-bottom: 2rem; + color: #6c757d; +} + +.form-control { + border-radius: var(--border-radius); + padding: 0.75rem 1rem; + border: 1px solid #ced4da; +} + +.form-control:focus { + border-color: var(--primary-color); + box-shadow: 0 0 0 0.25rem rgba(74, 144, 226, 0.25); +} + +.btn-primary { + background-color: var(--primary-color); + border-color: var(--primary-color); + border-radius: var(--border-radius); + padding: 0.75rem; + font-weight: 600; + transition: background-color 0.2s ease-in-out; +} + +.btn-primary:hover { + background-color: #357ABD; + border-color: #357ABD; +} + +.phi-banner { + margin-top: 2rem; + padding: 1rem; + background-color: #f8d7da; + color: #721c24; + border: 1px solid #f5c6cb; + border-radius: var(--border-radius); + font-size: 0.875rem; + text-align: left; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..32005d2 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,29 @@ + +document.addEventListener('DOMContentLoaded', function () { + const loginForm = document.getElementById('loginForm'); + + if (loginForm) { + loginForm.addEventListener('submit', function (event) { + event.preventDefault(); + const email = document.getElementById('email').value; + const password = document.getElementById('password').value; + + // Basic client-side validation + if (!email || !password) { + alert('Please enter both email and password.'); + return; + } + + // Simple email format check + const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/; + if (!emailRegex.test(email)) { + alert('Please enter a valid email address.'); + return; + } + + // On success, simulate login + console.log('Login validation passed. Redirecting...'); + window.location.href = 'dashboard.php'; + }); + } +}); diff --git a/dashboard.php b/dashboard.php new file mode 100644 index 0000000..1bea2d5 --- /dev/null +++ b/dashboard.php @@ -0,0 +1,21 @@ + + + + + + + + Dashboard - FlexPass + + + + +
+

Welcome to FlexPass

+

You have successfully logged in.

+ Logout +
+ + diff --git a/index.php b/index.php index 6f7ffab..080de27 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,56 @@ - - + - - - New Style - - - - + + + FlexPass – Secure Login + + + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + +
+
+

FlexPass

+

HIPAA-Ready Credential Vault

+ +
+
+ + +
+
+ + +
+ +
+ +
+ Reminder: Do not store Protected Health Information (PHI) in notes or other non-encrypted fields. +
+
+
+ + + + +