Rodbak Application Code with
Integrated CSS and Bootstrap
1. index.html (Page d'accueil)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accueil - Rodbak</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
background: linear-gradient(to bottom, yellow 50%, white 50%);
}
.logo-animated {
animation: logoAnimation 2s ease-in-out;
}
@keyframes logoAnimation {
0% { opacity: 0; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
100% { opacity: 1; transform: scale(1); }
}
</style>
</head>
<body>
<div class="container text-center mt-5">
<h1>Bienvenue sur Rodbak</h1>
<img src="images/logo.webp" alt="Logo Rodbak" class="logo-animated mb-3">
<p class="lead">Votre banque mobile, simple et sécurisée.</p>
<button class="btn btn-warning mb-3"
onclick="window.location.href='register.html'">Créer un compte</button>
<button class="btn btn-dark" onclick="window.location.href='login.html'">Se
connecter</button>
</div>
<script src="js/utils.js"></script>
</body>
</html>
2. register.html (Page de création de compte)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Création de compte - Rodbak</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.form-control {
margin-bottom: 1rem;
}
.btn-warning {
width: 100%;
}
</style>
</head>
<body>
<div class="container mt-5">
<h2 class="mb-4">Créer un compte</h2>
<form id="registerForm">
<div class="mb-3">
<label for="prenom" class="form-label">Prénom</label>
<input type="text" class="form-control" id="prenom" required>
</div>
<div class="mb-3">
<label for="nom" class="form-label">Nom</label>
<input type="text" class="form-control" id="nom" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="telephone" class="form-label">Numéro de téléphone</label>
<input type="tel" class="form-control" id="telephone" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Mot de passe</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="mb-3">
<label for="confirmPassword" class="form-label">Confirmer le mot de passe</label>
<input type="password" class="form-control" id="confirmPassword" required>
</div>
<button type="submit" class="btn btn-warning">Créer un compte</button>
</form>
<div id="registerMessage" class="mt-3"></div>
</div>
<script src="js/utils.js"></script>
</body>
</html>
3. login.html (Page de connexion)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Connexion - Rodbak</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.form-control {
margin-bottom: 1rem;
}
.btn-warning {
width: 100%;
}
</style>
</head>
<body>
<div class="container mt-5">
<h2 class="mb-4">Connexion à votre compte</h2>
<form id="loginForm">
<div class="mb-3">
<label for="emailOrPhone" class="form-label">Email ou Téléphone</label>
<input type="text" class="form-control" id="emailOrPhone" required>
</div>
<div class="mb-3">
<label for="loginPassword" class="form-label">Mot de passe</label>
<input type="password" class="form-control" id="loginPassword" required>
</div>
<button type="submit" class="btn btn-warning">Se connecter</button>
</form>
<div id="loginMessage" class="mt-3"></div>
</div>
<script src="js/auth.js"></script>
</body>
</html>
4. dashboard.html (Tableau de bord)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau de bord - Rodbak</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.btn-warning {
width: 100%;
}
</style>
</head>
<body>
<div class="container mt-5">
<h2 class="mb-4">Tableau de bord</h2>
<p>Bonjour, <span id="userName"></span></p>
<p>Solde disponible: <span id="balance"></span> FC</p>
<button class="btn btn-warning" id="depositButton">Recharger mon compte</button>
<button class="btn btn-warning" id="withdrawButton">Retirer de l'argent</button>
<button class="btn btn-warning" id="transferButton">Transférer de l'argent</button>
<button class="btn btn-warning" id="payBillButton">Payer une facture</button>
<button class="btn btn-dark" id="logoutButton">Se déconnecter</button>
<h3 class="mt-4">Historique des opérations</h3>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Type d'opération</th>
<th>Montant</th>
<th>Statut</th>
</tr>
</thead>
<tbody id="transactionHistory"></tbody>
</table>
</div>
<script src="js/dashboard.js"></script>
</body>
</html>
