43 lines
1.6 KiB
HTML
43 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Mini CRM AJAX</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
|
||
<script type="module" src="app.js" defer></script>
|
||
</head>
|
||
<body>
|
||
<div class="container py-4">
|
||
<h1 class="mb-4">Gestion de Contacts</h1>
|
||
|
||
<!-- Statut -->
|
||
<div id="status-message" class="alert d-none" role="alert"></div>
|
||
|
||
<!-- Bouton charger -->
|
||
<div class="mb-3">
|
||
<button id="load-contacts" class="btn btn-primary">Charger les contacts</button>
|
||
</div>
|
||
|
||
<!-- Liste des contacts -->
|
||
<ul id="contact-list" class="list-group mb-4"></ul>
|
||
|
||
<!-- Formulaire d’ajout/modification -->
|
||
<form id="contact-form" class="card card-body">
|
||
<h5 id="form-title">Ajouter un contact</h5>
|
||
<div class="mb-3">
|
||
<label for="name" class="form-label">Nom</label>
|
||
<input type="text" id="name" class="form-control" name="name" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="email" class="form-label">Email</label>
|
||
<input type="email" id="email" class="form-control" name="email" required>
|
||
</div>
|
||
<input type="hidden" id="contact-id">
|
||
<button type="submit" class="btn btn-primary">Enregistrer</button>
|
||
</form>
|
||
</div>
|
||
</body>
|
||
</html>
|