112 lines
4.2 KiB
HTML
112 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SecureVault • Gestionnaire</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div id="toast-container"></div>
|
|
|
|
<div id="auth-view" class="view active">
|
|
<div class="auth-card">
|
|
<div class="auth-header">
|
|
<div class="logo-icon">🔒</div>
|
|
<h1>SecureVault</h1>
|
|
<p>Vos secrets, chiffrés de bout en bout.</p>
|
|
</div>
|
|
|
|
<div class="tabs">
|
|
<button class="tab-btn active" onclick="switchTab('login')">Connexion</button>
|
|
<button class="tab-btn" onclick="switchTab('register')">Inscription</button>
|
|
</div>
|
|
|
|
<form id="login-form" class="auth-form">
|
|
<div class="input-group">
|
|
<label>Email</label>
|
|
<input type="email" id="login-email" required placeholder="exemple@mail.com">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Mot de passe</label>
|
|
<input type="password" id="login-password" required placeholder="Votre phrase secrète">
|
|
</div>
|
|
<button type="submit" class="btn-primary">Se connecter</button>
|
|
</form>
|
|
|
|
<form id="register-form" class="auth-form hidden">
|
|
<div class="input-group">
|
|
<label>Email</label>
|
|
<input type="email" id="register-email" required placeholder="exemple@mail.com">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Mot de passe maître</label>
|
|
<input type="password" id="register-password" required placeholder="Choisissez une phrase longue">
|
|
<small>Ce mot de passe chiffrera votre coffre. Ne l'oubliez pas.</small>
|
|
</div>
|
|
<button type="submit" class="btn-secondary">Créer un compte</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dashboard-view" class="view hidden">
|
|
<nav class="navbar">
|
|
<div class="nav-brand">
|
|
<span class="logo-icon-sm">🔒</span> SecureVault
|
|
</div>
|
|
<div class="nav-actions">
|
|
<span id="user-email-display">user@example.com</span>
|
|
<button onclick="logout()" class="btn-logout">Déconnexion</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="container">
|
|
<div class="dashboard-header">
|
|
<h2>Mon Coffre</h2>
|
|
<button onclick="openModal()" class="btn-primary">+ Nouveau mot de passe</button>
|
|
</div>
|
|
|
|
<div id="entries-grid" class="entries-grid">
|
|
<div class="loading-spinner">Chargement...</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<div id="modal-overlay" class="modal-overlay hidden">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<h3>Ajouter une entrée</h3>
|
|
<button onclick="closeModal()" class="btn-close">×</button>
|
|
</div>
|
|
<form id="add-entry-form">
|
|
<div class="input-group">
|
|
<label>Titre (ex: Netflix)</label>
|
|
<input type="text" id="entry-title" required>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>URL (Optionnel)</label>
|
|
<input type="url" id="entry-url" placeholder="https://...">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Identifiant / Email</label>
|
|
<input type="text" id="entry-username" required>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Mot de passe à sécuriser</label>
|
|
<input type="text" id="entry-password" required class="code-font">
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" onclick="closeModal()" class="btn-text">Annuler</button>
|
|
<button type="submit" class="btn-primary">Chiffrer & Sauvegarder</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |