|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Générateur de comptes automatique</title> |
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
|
<style> |
|
|
body { background-color: #f5f5f5; } |
|
|
.card { box-shadow: 0 4px 8px rgba(0,0,0,0.1); } |
|
|
.progress { height: 25px; } |
|
|
#status-display { height: 200px; overflow-y: auto; } |
|
|
</style> |
|
|
<script src="{{ url_for('serve_js') }}"></script> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container mt-5"> |
|
|
<div class="row"> |
|
|
<div class="col-md-12 mb-4"> |
|
|
<div class="card"> |
|
|
<div class="card-header bg-primary text-white"> |
|
|
<h3 class="card-title mb-0">Générateur de comptes - Startup Côte d'Ivoire</h3> |
|
|
</div> |
|
|
<div class="card-body"> |
|
|
<form id="generator-form"> |
|
|
<div class="row mb-3"> |
|
|
<div class="col-md-6"> |
|
|
<label for="num_accounts" class="form-label">Nombre de comptes à créer</label> |
|
|
<input type="number" class="form-control" id="num_accounts" name="num_accounts" min="1" max="1000" value="10"> |
|
|
</div> |
|
|
<div class="col-md-6"> |
|
|
<label for="startup_ratio" class="form-label">Ratio de représentants de startup (%)</label> |
|
|
<input type="number" class="form-control" id="startup_ratio" name="startup_ratio" min="0" max="100" value="30"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="d-grid gap-2 d-md-flex justify-content-md-center"> |
|
|
<button type="submit" id="start-btn" class="btn btn-success btn-lg"> |
|
|
<i class="fas fa-play"></i> Démarrer |
|
|
</button> |
|
|
<button type="button" id="stop-btn" class="btn btn-danger btn-lg"> |
|
|
<i class="fas fa-stop"></i> Arrêter |
|
|
</button> |
|
|
<a href="/accounts" class="btn btn-primary btn-lg"> |
|
|
<i class="fas fa-list"></i> Voir les comptes |
|
|
</a> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="col-md-12"> |
|
|
<div class="card"> |
|
|
<div class="card-header bg-info text-white"> |
|
|
<h4 class="card-title mb-0">Progression</h4> |
|
|
</div> |
|
|
<div class="card-body"> |
|
|
<div class="progress mb-3"> |
|
|
<div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%">0%</div> |
|
|
</div> |
|
|
|
|
|
<div class="row text-center mb-3"> |
|
|
<div class="col"> |
|
|
<div class="card bg-light"> |
|
|
<div class="card-body"> |
|
|
<h5>Total</h5> |
|
|
<h3 id="total-count">0</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col"> |
|
|
<div class="card bg-success text-white"> |
|
|
<div class="card-body"> |
|
|
<h5>Réussis</h5> |
|
|
<h3 id="success-count">0</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col"> |
|
|
<div class="card bg-danger text-white"> |
|
|
<div class="card-body"> |
|
|
<h5>Échecs</h5> |
|
|
<h3 id="failed-count">0</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card mb-3"> |
|
|
<div class="card-header"> |
|
|
<h5>Dernier statut</h5> |
|
|
</div> |
|
|
<div class="card-body"> |
|
|
<p id="last-status">-</p> |
|
|
<p>Dernier compte créé: <span id="last-username" class="text-primary fw-bold">-</span></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="row"> |
|
|
<div class="col-md-6"> |
|
|
<p>Heure de début: <span id="start-time">-</span></p> |
|
|
</div> |
|
|
<div class="col-md-6 text-end"> |
|
|
<p>Heure de fin: <span id="end-time">-</span></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script> |
|
|
|
|
|
</body> |
|
|
</html> |
