RodBak Application Code Complet
Uploaded by
rodriguelubanda2RodBak Application Code Complet
Uploaded by
rodriguelubanda2Code de l'application RodBak
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RodBak - Application Bancaire</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f7f7f7;
}
/* Style iPhone */
.iphone-frame {
width: 375px;
height: 667px;
border-radius: 36px;
margin: auto;
background-color: white;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
overflow: hidden;
position: relative;
padding-top: 20px;
}
.iphone-screen {
width: 100%;
height: 100%;
padding: 20px;
overflow-y: scroll;
background: #f7f7f7;
}
/* Style splash screen */
.splash {
text-align: center;
margin-top: 100px;
}
.btn-custom {
background-color: yellow;
color: black;
border-radius: 25px;
padding: 10px 30px;
font-size: 18px;
border: none;
cursor: pointer;
}
.btn-custom:hover {
background-color: #ffcc00;
}
/* Table dashboard */
.dashboard {
text-align: center;
}
.dashboard h2 {
color: #333;
}
.btn-action {
background-color: #ffcc00;
color: black;
padding: 10px 20px;
border-radius: 20px;
width: 200px;
}
.btn-action:hover {
background-color: #e6b800;
}
.transaction-history {
margin-top: 20px;
background-color: white;
border-radius: 10px;
padding: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.history-item {
padding: 5px 0;
border-bottom: 1px solid #eee;
}
.error {
color: red;
font-size: 14px;
}
</style>
</head>
<body>
<!-- iPhone Frame -->
<div class="iphone-frame">
<div class="iphone-screen">
<!-- Splash Screen -->
<div id="splashScreen" class="splash">
<h2>Bienvenue sur RodBak</h2>
<button class="btn-custom" id="createAccountBtn">Créer un compte</button>
<button class="btn-custom" id="loginBtn">Se connecter</button>
</div>
<!-- Create Account Form -->
<div id="createAccount" style="display: none;">
<h3>Créer un compte</h3>
<input type="text" id="username" placeholder="Nom d'utilisateur" class="form-
control" required><br>
<input type="password" id="password" placeholder="Mot de passe" class="form-
control" required><br>
<input type="password" id="confirmPassword" placeholder="Confirmer le mot de
passe" class="form-control" required><br>
<button class="btn-custom" id="submitAccountBtn">Créer un compte</button>
<p class="error" id="createError"></p>
<button class="btn-custom" id="backToSplash">Retour</button>
</div>
<!-- Login Form -->
<div id="loginScreen" style="display: none;">
<h3>Se connecter</h3>
<input type="text" id="loginUsername" placeholder="Nom d'utilisateur"
class="form-control" required><br>
<input type="password" id="loginPassword" placeholder="Mot de passe"
class="form-control" required><br>
<button class="btn-custom" id="submitLoginBtn">Se connecter</button>
<p class="error" id="loginError"></p>
<button class="btn-custom" id="backToSplashLogin">Retour</button>
</div>
<!-- Dashboard -->
<div id="dashboard" class="dashboard" style="display: none;">
<h2>Bienvenue, <span id="dashboardUsername">Rodrigue</span></h2>
<h4>Solde : <span id="balance">1000</span> €</h4>
<button class="btn-action" id="depositBtn">Dépôt</button>
<button class="btn-action" id="withdrawBtn">Retrait</button>
<button class="btn-action" id="transferBtn">Transfert</button>
<!-- Transaction History -->
<div class="transaction-history">
<h5>Historique des transactions</h5>
<div id="history">
<div class="history-item">Dépot de 500€</div>
<div class="history-item">Retrait de 200€</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Variables
let users = [];
let currentUser = null;
let transactionHistory = [];
// Splash Screen
document.getElementById('createAccountBtn').addEventListener('click', function() {
document.getElementById('splashScreen').style.display = 'none';
document.getElementById('createAccount').style.display = 'block';
});
document.getElementById('loginBtn').addEventListener('click', function() {
document.getElementById('splashScreen').style.display = 'none';
document.getElementById('loginScreen').style.display = 'block';
});
// Back to Splash
document.getElementById('backToSplash').addEventListener('click', function() {
document.getElementById('createAccount').style.display = 'none';
document.getElementById('splashScreen').style.display = 'block';
});
document.getElementById('backToSplashLogin').addEventListener('click', function() {
document.getElementById('loginScreen').style.display = 'none';
document.getElementById('splashScreen').style.display = 'block';
});
// Create Account Logic
document.getElementById('submitAccountBtn').addEventListener('click', function() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirmPassword').value;
if (password.length < 8) {
document.getElementById('createError').textContent = "Le mot de passe doit avoir
au moins 8 caractères.";
return;
}
if (password !== confirmPassword) {
document.getElementById('createError').textContent = "Les mots de passe ne
correspondent pas.";
return;
}
users.push({ username: username, password: password });
alert("Compte créé avec succès !");
document.getElementById('createAccount').style.display = 'none';
document.getElementById('splashScreen').style.display = 'block';
});
// Login Logic
document.getElementById('submitLoginBtn').addEventListener('click', function() {
const username = document.getElementById('loginUsername').value;
const password = document.getElementById('loginPassword').value;
const user = users.find(user => user.username === username && user.password ===
password);
if (user) {
currentUser = user;
document.getElementById('loginScreen').style.display = 'none';
document.getElementById('dashboard').style.display = 'block';
document.getElementById('dashboardUsername').textContent =
currentUser.username;
} else {
document.getElementById('loginError').textContent = "Nom d'utilisateur ou mot de
passe incorrect.";
}
});
// Deposit Logic
document.getElementById('depositBtn').addEventListener('click', function() {
let depositAmount = prompt("Montant à déposer :");
depositAmount = parseFloat(depositAmount);
if (isNaN(depositAmount) || depositAmount <= 0) {
alert("Veuillez entrer un montant valide.");
return;
}
let newBalance = parseFloat(document.getElementById('balance').textContent) +
depositAmount;
document.getElementById('balance').textContent = newBalance;
transactionHistory.push(`Dépot de ${depositAmount}€`);
updateTransactionHistory();
});
// Withdraw Logic
document.getElementById('withdrawBtn').addEventListener('click', function() {
let password = prompt("Veuillez entrer votre mot de passe pour effectuer un
retrait :");
if (password !== currentUser.password) {
alert("Mot de passe incorrect !");
return;
}
let withdrawalAmount = prompt("Montant à retirer :");
withdrawalAmount = parseFloat(withdrawalAmount);
let currentBalance = parseFloat(document.getElementById('balance').textContent);
if (withdrawalAmount > currentBalance || isNaN(withdrawalAmount) ||
withdrawalAmount <= 0) {
alert("Montant invalide ou insuffisant.");
return;
}
document.getElementById('balance').textContent = currentBalance -
withdrawalAmount;
transactionHistory.push(`Retrait de ${withdrawalAmount}€`);
updateTransactionHistory();
});
// Update Transaction History
function updateTransactionHistory() {
let historyHTML = '';
transactionHistory.forEach(transaction => {
historyHTML += `<div class="history-item">${transaction}</div>`;
});
document.getElementById('history').innerHTML = historyHTML;
}
// Transfer Logic
document.getElementById('transferBtn').addEventListener('click', function() {
alert("Transfert en développement...");
});
</script>
</body>
</html>
