diff --git a/app/apple-touch-icon.png b/app/apple-touch-icon.png new file mode 100644 index 0000000..f319dce Binary files /dev/null and b/app/apple-touch-icon.png differ diff --git a/app/favicon-16x16.png b/app/favicon-16x16.png new file mode 100644 index 0000000..5e7b212 Binary files /dev/null and b/app/favicon-16x16.png differ diff --git a/app/favicon-32x32.png b/app/favicon-32x32.png new file mode 100644 index 0000000..2d77783 Binary files /dev/null and b/app/favicon-32x32.png differ diff --git a/app/index.html b/app/index.html index 8f53ae4..cccbc82 100644 --- a/app/index.html +++ b/app/index.html @@ -1,432 +1,946 @@ + - - - -CYBERUSGATE - Access - - + .logo-box svg { + width: 32px; + height: 32px; + fill: var(--blue-main); + } + + .login-card h1 { + font-size: 22px; + color: var(--text-main); + margin-bottom: 8px; + } + + .login-card p { + font-size: 14px; + color: var(--text-sub); + margin-bottom: 32px; + } + + .role-btn { + width: 100%; + padding: 16px; + border-radius: 12px; + border: 2px solid var(--gray-2); + background: var(--white); + margin-bottom: 16px; + cursor: pointer; + display: flex; + align-items: center; + gap: 16px; + text-align: left; + transition: 0.2s; + } + + .role-btn:active { + transform: scale(0.98); + border-color: var(--blue-main); + background: var(--blue-pale); + } + + .role-icon { + width: 48px; + height: 48px; + border-radius: 50%; + background: var(--gray-1); + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + font-weight: bold; + color: var(--blue-main); + } + + .role-text h3 { + font-size: 16px; + color: var(--text-main); + margin-bottom: 4px; + } + + .role-text p { + font-size: 12px; + color: var(--text-sub); + } + + /* ======= APP HEADER & NAV ======= */ + .app-header { + background: var(--blue-dark); + padding: 48px 20px 20px; + display: flex; + align-items: center; + justify-content: space-between; + position: sticky; + top: 0; + z-index: 100; + } + + .user-badge { + display: flex; + align-items: center; + gap: 12px; + } + + .avatar { + width: 44px; + height: 44px; + border-radius: 50%; + background: var(--blue-light); + border: 2px solid rgba(255, 255, 255, 0.2); + display: flex; + align-items: center; + justify-content: center; + color: white; + font-weight: bold; + } + + .header-info h2 { + font-size: 16px; + color: white; + } + + .header-info p { + font-size: 12px; + color: rgba(255, 255, 255, 0.7); + } + + .logout-btn { + background: rgba(255, 255, 255, 0.1); + border: none; + color: white; + padding: 8px 12px; + border-radius: 8px; + font-size: 12px; + font-weight: 600; + cursor: pointer; + } + + .nav-tabs { + display: flex; + background: var(--white); + border-bottom: 1px solid var(--gray-2); + position: sticky; + top: 112px; + z-index: 99; + } + + .nav-tab { + flex: 1; + padding: 14px 4px; + border: none; + background: transparent; + font-size: 11px; + font-weight: 700; + color: var(--gray-3); + text-transform: uppercase; + cursor: pointer; + border-bottom: 3px solid transparent; + transition: 0.2s; + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + } + + .nav-tab svg { + width: 22px; + height: 22px; + stroke: currentColor; + fill: none; + stroke-width: 2; + } + + .nav-tab.active { + color: var(--blue-main); + border-bottom-color: var(--blue-main); + } + + .tab-content { + padding: 20px; + display: none; + flex-direction: column; + gap: 16px; + padding-bottom: 100px; + } + + .tab-content.active { + display: flex; + animation: fadeIn 0.3s; + } + + /* ======= UI COMPONENTS ======= */ + .card { + background: var(--white); + border-radius: var(--radius); + padding: 20px; + box-shadow: var(--shadow); + } + + .card-title { + font-size: 16px; + font-weight: 700; + margin-bottom: 16px; + display: flex; + align-items: center; + justify-content: space-between; + } + + .btn { + padding: 14px; + border-radius: 8px; + font-size: 15px; + font-weight: 600; + cursor: pointer; + border: none; + text-align: center; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + transition: 0.2s; + } + + .btn-primary { + background: var(--blue-main); + color: white; + } + + .btn-primary:active { + background: var(--blue-dark); + transform: scale(0.98); + } + + .btn-outline { + background: transparent; + border: 2px solid var(--blue-main); + color: var(--blue-main); + } + + /* BADGE COMPONENT (USER) */ + .virtual-badge { + background: linear-gradient(135deg, var(--blue-dark), var(--blue-main)); + border-radius: 16px; + padding: 24px; + color: white; + text-align: center; + position: relative; + overflow: hidden; + box-shadow: 0 10px 24px rgba(21, 101, 192, 0.3); + margin-bottom: 16px; + } + + .virtual-badge .company { + font-size: 12px; + opacity: 0.8; + letter-spacing: 1px; + margin-bottom: 16px; + text-transform: uppercase; + } + + .virtual-badge .nfc-icon { + width: 80px; + height: 80px; + margin: 0 auto 16px; + border: 3px solid rgba(255, 255, 255, 0.3); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + animation: pulse 2s infinite; + cursor: pointer; + } + + @keyframes pulse { + 0% { + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); + } + + 70% { + box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); + } + + 100% { + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); + } + } + + .virtual-badge h3 { + font-size: 20px; + margin-bottom: 4px; + } + + .virtual-badge p { + font-size: 14px; + opacity: 0.9; + } + + /* ADMIN UI */ + .stat-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; + margin-bottom: 16px; + } + + .stat-box { + background: var(--white); + padding: 16px; + border-radius: 12px; + box-shadow: var(--shadow); + border-left: 4px solid var(--blue-main); + } + + .stat-box .num { + font-size: 24px; + font-weight: bold; + color: var(--text-main); + } + + .stat-box .lbl { + font-size: 12px; + color: var(--text-sub); + margin-top: 4px; + text-transform: uppercase; + } + + .user-list-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px; + border-bottom: 1px solid var(--gray-2); + cursor: pointer; + } + + .user-list-item:last-child { + border-bottom: none; + } + + .user-list-item .info h4 { + font-size: 15px; + margin-bottom: 4px; + } + + .user-list-item .info p { + font-size: 12px; + color: var(--text-sub); + } + + /* BADGE MANAGEMENT CARD */ + .badge-mgmt-card { + border: 1px solid var(--gray-2); + border-radius: 12px; + padding: 16px; + margin-bottom: 12px; + background: var(--gray-1); + } + + .badge-mgmt-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 12px; + } + + .badge-mgmt-header h4 { + font-size: 14px; + } + + /* TOGGLE */ + .toggle { + width: 44px; + height: 24px; + background: var(--gray-3); + border-radius: 12px; + position: relative; + cursor: pointer; + transition: 0.3s; + } + + .toggle.on { + background: var(--green); + } + + .toggle::after { + content: ''; + position: absolute; + top: 2px; + left: 2px; + width: 20px; + height: 20px; + border-radius: 50%; + background: white; + transition: 0.3s; + } + + .toggle.on::after { + left: 22px; + } + + /* SELECT */ + select.select-slot { + width: 100%; + padding: 10px; + border-radius: 8px; + border: 1px solid var(--gray-3); + background: var(--white); + color: var(--text-main); + font-size: 13px; + outline: none; + } + + /* MODALS */ + .modal-overlay { + display: none; + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.7); + z-index: 1000; + align-items: center; + justify-content: center; + backdrop-filter: blur(3px); + opacity: 0; + transition: 0.3s; + } + + .modal-overlay.open { + display: flex; + opacity: 1; + } + + .modal-box { + background: var(--white); + border-radius: 20px; + padding: 24px; + width: 90%; + max-width: 360px; + transform: scale(0.9); + transition: 0.3s; + text-align: center; + } + + .modal-overlay.open .modal-box { + transform: scale(1); + } + + .qr-placeholder { + width: 200px; + height: 200px; + margin: 20px auto; + background: white; + border: 4px solid var(--blue-main); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + position: relative; + } + + .qr-placeholder img { + width: 100%; + height: 100%; + object-fit: contain; + } + + /* TOAST */ + .toast { + position: fixed; + bottom: 30px; + left: 50%; + transform: translateX(-50%) translateY(20px); + background: #263238; + color: white; + padding: 14px 24px; + border-radius: 30px; + font-size: 14px; + font-weight: bold; + opacity: 0; + transition: 0.3s; + z-index: 9999; + pointer-events: none; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + } + + .toast.show { + opacity: 1; + transform: translateX(-50%) translateY(0); + } + + /* Biometric animation */ + .bio-icon { + color: var(--blue-main); + margin-bottom: 16px; + animation: pulseBio 2s infinite; + } + + @keyframes pulseBio { + 0% { + transform: scale(1); + } + + 50% { + transform: scale(1.05); + } + + 100% { + transform: scale(1); + } + } + + - -
-
-
- -
-

CYBERUSGATE

-

Système de contrôle d'accès

- -
-
AD
-
-

Espace Utilisateur

-

Alice Dupont · Employée

+ +
+ - -
-
⚙️
-
-

Espace DSI / Admin

-

Gestion Infrastructure

+

CYBERUSGATE

+

Système de contrôle d'accès

+ +
+
AD
+
+

Espace Utilisateur

+

Alice Dupont · Employée

+
+
+ +
+
⚙️
+
+

Espace DSI / Admin

+

Gestion Infrastructure

+
-
- -
-
-
-
AD
-
-

Alice Dupont

-

Utilisateur Interne

+ +
+
+
+
AD
+
+

Alice Dupont

+

Utilisateur Interne

+
+
- -
- - + + - - + + - - -
-
- -
-
-
-
-

Ajouter un badge

-

Demandez à votre administrateur système de générer un QR code d'invitation pour provisionner votre téléphone.

- -
- -
- - -
-
- - - - -
-
-
190
Équipements
-
30
Utilisateurs
-
--
Badges Actifs
-
--
QR Actifs
-
- -
-
État du système
-
-
Synchro Active DirectoryOpérationnelle
-
Chiffrement AES-256Actif
-
Contrôleurs de DomaineEn ligne
-
-
-
- -
-
-
Annuaire Utilisateurs
-
+
+
-
- -
-
-
Générateur d'accès sécurisé
-

Générez un QR Code temporaire. L'utilisateur devra le scanner avec son application pour provisionner son e-badge.

- - + +
+
+

Ajouter un badge

+

Demandez à votre administrateur système de + générer un QR code d'invitation pour provisionner votre téléphone.

+ +
+ + + + +
+ + +
- -

Invitations en attente

-
- + + + + +
+
+
+
190
+
Équipements
+
+
+
30
+
Utilisateurs
+
+
+
--
+
Badges Actifs
+
+
+
--
+
QR Actifs
+
+
+ +
+
État du système
+
+
Synchro Active DirectoryOpérationnelle
+
Chiffrement AES-256Actif
+
Contrôleurs de DomaineEn ligne
+
+
+
+ +
+
+
Annuaire Utilisateurs +
+
+ +
+
+
+ +
+
+
Générateur d'accès sécurisé
+

Générez un QR Code temporaire. + L'utilisateur devra le scanner avec son application pour provisionner son e-badge.

+ + +
+ +

Invitations en attente

+
+ +
+
+ +
+ + + + + -
+ +