Scribd
Upload
3 views31 pages

CashFlowa: Investissement et Profits

The document is an HTML template for a financial application called CashFlowa, featuring user profile management, investment plans, and a referral program. It includes sections for displaying user balances, recent transactions, and VIP investment options, along with a navigation menu for easy access to different views. The design is responsive and incorporates various CSS styles for a modern user interface.

Uploaded by

nyamfredy820
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views31 pages

CashFlowa: Investissement et Profits

The document is an HTML template for a financial application called CashFlowa, featuring user profile management, investment plans, and a referral program. It includes sections for displaying user balances, recent transactions, and VIP investment options, along with a navigation menu for easy access to different views. The design is responsive and incorporates various CSS styles for a modern user interface.

Uploaded by

nyamfredy820
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewpo " content="width=device-width,
initial-scale=1.0">
<title>CashFlowa</title>
<link rel="stylesheet"
href="h ps://[Link] [Link]/ajax/libs/font-awesome/6.4.0/css/
[Link]">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
background-color: #f5f8fa;
color: #333;
line-height: 1.6;
}

.container {
max-width: 100%;
margin: 0 auto;
background: white;
min-height: 100vh;
position: relative;
padding-bo om: 70px;
}
header {
background: linear-gradient(135deg, #4a90e2 0%, #2c6cb3
100%);
color: white;
padding: 20px;
text-align: center;
font-size: 24px;
font-weight: bold;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
display: ex;
justify-content: space-between;
align-items: center;
}

.admin-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
padding: 8px 15px;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
display: ex;
align-items: center;
gap: 5px;
transition: all 0.3s;
}

.admin-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.content {
padding: 20px;
}

h2 {
margin-bo om: 15px;
color: #4a90e2;
border-bo om: 1px solid #eee;
padding-bo om: 10px;
}

.balance-section {
text-align: center;
margin-bo om: 20px;
background: linear-gradient(to right, #f9f9f9, #f0f8 );
padding: 15px;
border-radius: 12px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.balance-amount {
font-size: 28px;
font-weight: bold;
margin: 10px 0;
color: #2c6cb3;
}

.info-item {
display: ex;
align-items: center;
margin: 15px 0;
padding: 10px;
background: #f9f9f9;
border-radius: 8px;
}

.info-item input[type="checkbox"] {
margin-right: 10px;
width: 20px;
height: 20px;
}

.referral-code {
background: linear-gradient(to right, #e1f5fe, #b3e5fc);
padding: 15px;
border-radius: 12px;
text-align: center;
margin: 20px 0;
font-weight: bold;
le er-spacing: 2px;
font-size: 18px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.vip-status {
background: linear-gradient(to right, # f4e6, # e0b2);
padding: 15px;
border-radius: 12px;
margin: 20px 0;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin: 20px 0;
}

.feature-item {
background: #f9f9f9;
padding: 15px;
border-radius: 12px;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
transition: transform 0.3s;
}

.feature-item:hover {
transform: translateY(-3px);
}

.feature-item span {
font-size: 20px;
display: block;
margin-bo om: 5px;
}

.navigation {
position: xed;
bo om: 0;
width: 100%;
max-width: 100%;
display: ex;
justify-content: space-around;
background: white;
border-top: 1px solid #eee;
padding: 15px 0;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
z-index: 100;
}

.nav-item {
text-align: center;
color: #4a90e2;
font-weight: bold;
cursor: pointer;
padding: 8px 15px;
border-radius: 20px;
transition: all 0.3s;
}

.[Link] {
background: #4a90e2;
color: white;
}

.hidden {
display: none;
}

/* Styles pour l'inte ace admin */


.admin-panel {
position: xed;
top: 0;
le : 0;
width: 100%;
height: 100%;
background: white;
z-index: 1000;
ove low-y: auto;
padding: 20px;
}

.admin-header {
display: ex;
justify-content: space-between;
align-items: center;
margin-bo om: 20px;
padding-bo om: 15px;
border-bo om: 1px solid #eee;
}

.admin-section {
margin-bo om: 30px;
}

.admin-card {
background: #f9f9f9;
padding: 20px;
border-radius: 12px;
margin-bo om: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.admin-table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}

.admin-table th, .admin-table td {


padding: 12px;
text-align: le ;
border-bo om: 1px solid #eee;
}

.admin-table th {
background: #4a90e2;
color: white;
}

.admin-table tr:nth-child(even) {
background: #f5f8fa;
}

.form-group {
margin-bo om: 15px;
}

.form-group label {
display: block;
margin-bo om: 5px;
font-weight: bold;
}

.form-group input, .form-group select, .form-group textarea {


width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
}

.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
}

.btn-primary {
background: #4a90e2;
color: white;
}

.btn-primary:hover {
background: #2c6cb3;
}

.btn-danger {
background: #e74c3c;
color: white;
}

.btn-danger:hover {
background: #c0392b;
}

.btn-success {
background: #2ecc71;
color: white;
}

.btn-success:hover {
background: #27ae60;
}

.stats-grid {
display: grid;
grid-template-columns: repeat(auto- t, minmax(200px, 1fr));
gap: 20px;
margin-bo om: 30px;
}

.stat-card {
background: white;
padding: 20px;
border-radius: 12px;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.stat-value {
font-size: 24px;
font-weight: bold;
color: #4a90e2;
margin: 10px 0;
}

.stat-label {
color: #7f8c8d;
font-size: 14px;
}

/* Styles pour la section d'investissement */


.investment-plans {
margin-top: 20px;
}

.vip-plan {
background: linear-gradient(to right, #f8f9fa, #e9ecef);
border-radius: 12px;
padding: 20px;
margin-bo om: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: relative;
ove low: hidden;
}

.[Link] {
opacity: 0.7;
}

.vip-plan h3 {
color: #4a90e2;
margin-bo om: 10px;
font-size: 22px;
}

.vip-badge {
position: absolute;
top: 15px;
right: 15px;
background: # c107;
color: #333;
padding: 5px 10px;
border-radius: 20px;
font-weight: bold;
font-size: 12px;
}

.vip-details {
margin: 15px 0;
}

.vip-detail-item {
display: ex;
justify-content: space-between;
margin: 10px 0;
padding-bo om: 10px;
border-bo om: 1px dashed #ddd;
}

.invest-btn {
width: 100%;
padding: 12px;
background: #4a90e2;
color: white;
border: none;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
margin-top: 10px;
}
.invest-btn:hover {
background: #2c6cb3;
}

.invest-btn:disabled {
background: #ccc;
cursor: not-allowed;
}

@media (max-width: 768px) {


.features {
grid-template-columns: 1fr;
}

.stats-grid {
grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 480px) {


.stats-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div>CashFlowa</div>
<bu on class="admin-btn" id="adminToggle">
<i class="fas fa-cog"></i> Admin
</bu on>
</header>

<div class="content">
<!-- Vue Pro l -->
<div id="pro le-view" class="hidden">
<h2>Pro l</h2>

<div class="info-item">
<h3>Freddy</h3>
</div>
<div class="info-item">
freddynyam820@[Link]<br>
Membre depuis le 14/09/2025
</div>

<div class="balance-section">
<div><strong>Solde</strong></div>
<div class="balance-amount">0,00 $</div>
</div>

<div class="balance-section">
<div><strong>Gains totaux</strong></div>
<div class="balance-amount">0,00 $</div>
</div>

<div class="info-item">
<strong>Transactions récentes</strong> 0
</div>

<div class="info-item">
<strong>Jours actifs</strong> 15
</div>

<h3>Informations du compte</h3>

<div class="info-item">
<input type="checkbox" checked disabled>
<span>E-mail</span><br>
freddynyam820@[Link]
</div>

<div class="info-item">
<input type="checkbox" checked disabled>
<span>Code de parrainage</span><br>
<div class="referral-code">MFJFIG</div>
</div>
</div>

<!-- Vue Accueil -->


<div id="home-view" class="hidden">
<div class="balance-section">
<div><strong>Solde</strong></div>
<div class="balance-amount">0 CFA</div>
</div>

<div class="balance-section">
<div><strong>Gains totaux</strong></div>
<div class="balance-amount">0 CFA</div>
</div>

<div class="referral-code">
Votre code de parrainage<br>
<strong>M F J F W S</strong>
</div>

<div class="vip-status">
<h3>Statut VIP</h3>
<p>Contactez l'admin pour activer le VIP</p>
</div>

<div class="features">
<div class="feature-item">
<span>✔</span>
Chargeur<br>
7
</div>
<div class="feature-item">
<span>✔</span>
Élevé
</div>
<div class="feature-item">
<span>✔</span>
Investir
</div>
<div class="feature-item">
<span>✘</span>
Pa ager pour gagner
</div>
<div class="feature-item">
<span>✔</span>
Parrainage
</div>
<div class="feature-item">
<span>✔</span>
Pro l
</div>
</div>
</div>

<!-- Vue Investissement -->


<div id="investment-view">
<h2>Plans d'Investissement VIP</h2>
<p>Choisissez un plan d'investissement pour commencer à
générer des revenus</p>

<div class="investment-plans">
<div class="vip-plan">
<h3>VIP 1</h3>
<span class="vip-badge">Recommandé</span>

<div class="vip-details">
<div class="vip-detail-item">
<span>Devise:</span>
<strong>CFA</strong>
</div>
<div class="vip-detail-item">
<span>Statut:</span>
<strong>Disponible</strong>
</div>
<div class="vip-detail-item">
<span>Montant d'investissement:</span>
<strong>10 000 CFA</strong>
</div>
<div class="vip-detail-item">
<span>Retour quotidien:</span>
<strong>1 750 CFA</strong>
</div>
<div class="vip-detail-item">
<span>Durée:</span>
<strong>7 jours</strong>
</div>
<div class="vip-detail-item">
<span>Pro t total:</span>
<strong>12 250 CFA</strong>
</div>
</div>

<bu on class="invest-btn" onclick="invest('VIP1')">


Investir Maintenant - 10 000 CFA
</bu on>
</div>

<div class="vip-plan locked">


<h3>VIP 2</h3>
<span class="vip-badge">Verrouillé</span>

<div class="vip-details">
<div class="vip-detail-item">
<span>Devise:</span>
<strong>CFA</strong>
</div>
<div class="vip-detail-item">
<span>Statut:</span>
<strong>Verrouillé</strong>
</div>
<div class="vip-detail-item">
<span>Montant d'investissement:</span>
<strong>20 000 CFA</strong>
</div>
<div class="vip-detail-item">
<span>Retour quotidien:</span>
<strong>3 500 CFA</strong>
</div>
<div class="vip-detail-item">
<span>Durée:</span>
<strong>7 jours</strong>
</div>
<div class="vip-detail-item">
<span>Pro t total:</span>
<strong>24 500 CFA</strong>
</div>
</div>

<bu on class="invest-btn" disabled>


Verrouillé - 20 000 CFA
</bu on>
</div>

<div class="vip-plan locked">


<h3>VIP 3</h3>
<span class="vip-badge">Verrouillé</span>

<div class="vip-details">
<div class="vip-detail-item">
<span>Devise:</span>
<strong>CFA</strong>
</div>
<div class="vip-detail-item">
<span>Statut:</span>
<strong>Verrouillé</strong>
</div>
<div class="vip-detail-item">
<span>Montant d'investissement:</span>
<strong>30 000 CFA</strong>
</div>
<div class="vip-detail-item">
<span>Retour quotidien:</span>
<strong>5 250 CFA</strong>
</div>
<div class="vip-detail-item">
<span>Durée:</span>
<strong>7 jours</strong>
</div>
<div class="vip-detail-item">
<span>Pro t total:</span>
<strong>36 750 CFA</strong>
</div>
</div>

<bu on class="invest-btn" disabled>


Verrouillé - 30 000 CFA
</bu on>
</div>
</div>
</div>

<!-- Vue Parrainage -->


<div id="referral-view" class="hidden">
<h2>Programme de Parrainage</h2>

<div class="balance-section">
<div><strong>Vos gains de parrainage</strong></div>
<div class="balance-amount">0 CFA</div>
</div>

<div class="referral-code">
Votre code de parrainage<br>
<strong>M F J F W S</strong>
</div>

<div class="info-item">
<h3>Comment ça marche?</h3>
<p>Pa agez votre code de parrainage avec vos amis.
Lorsqu'ils s'inscrivent et investissent, vous recevez une commission
de 5% sur leurs investissements.</p>
</div>

<div class="info-item">
<h3>Vos lleuls</h3>
<p>Vous n'avez pas encore de lleuls.</p>
</div>
</div>
</div>

<div class="navigation">
<div class="nav-item" onclick="showView('home')">Accueil</div>
<div class="nav-item active"
onclick="showView('investment')">Investissement</div>
<div class="nav-item"
onclick="showView('referral')">Parrainage</div>
<div class="nav-item" onclick="showView('pro le')">Pro l</div>
</div>

<!-- Inte ace Admin -->


<div id="adminPanel" class="admin-panel hidden">
<div class="admin-header">
<h2>Panel d'Administration CashFlowa</h2>
<bu on class="btn btn-danger"
onclick="toggleAdminPanel()">
<i class="fas fa-times"></i> Fermer
</bu on>
</div>

<div class="stats-grid">
<div class="stat-card">
<div class="stat-label">Utilisateurs Totaux</div>
<div class="stat-value">1,254</div>
<div class="stat-change">+12% ce mois</div>
</div>
<div class="stat-card">
<div class="stat-label">Revenus Totaux</div>
<div class="stat-value">45,670 €</div>
<div class="stat-change">+8% ce mois</div>
</div>
<div class="stat-card">
<div class="stat-label">Investissements</div>
<div class="stat-value">892</div>
<div class="stat-change">+5% ce mois</div>
</div>
<div class="stat-card">
<div class="stat-label">Taux de Conversion</div>
<div class="stat-value">23.6%</div>
<div class="stat-change">+2.3% ce mois</div>
</div>
</div>
<div class="admin-section">
<h3>Gestion des Plans d'Investissement</h3>
<div class="admin-card">
<table class="admin-table">
<thead>
<tr>
<th>Plan VIP</th>
<th>Investissement</th>
<th>Retour Quotidien</th>
<th>Statut</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>VIP 1</td>
<td>10 000 CFA</td>
<td>1 750 CFA</td>
<td>Actif</td>
<td>
<bu on class="btn btn-primary"><i class="fas
fa-edit"></i></bu on>
</td>
</tr>
<tr>
<td>VIP 2</td>
<td>20 000 CFA</td>
<td>3 500 CFA</td>
<td>Verrouillé</td>
<td>
<bu on class="btn btn-primary"><i class="fas
fa-edit"></i></bu on>
</td>
</tr>
<tr>
<td>VIP 3</td>
<td>30 000 CFA</td>
<td>5 250 CFA</td>
<td>Verrouillé</td>
<td>
<bu on class="btn btn-primary"><i class="fas
fa-edit"></i></bu on>
</td>
</tr>
</tbody>
</table>

<div class="form-group" style="margin-top: 20px;">


<bu on class="btn btn-success">
<i class="fas fa-plus"></i> Ajouter un Nouveau Plan
</bu on>
</div>
</div>
</div>

<div class="admin-section">
<h3>Gestion des Utilisateurs</h3>
<div class="admin-card">
<table class="admin-table">
<thead>
<tr>
<th>Nom</th>
<th>Email</th>
<th>Solde</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Freddy</td>
<td>freddynyam820@[Link]</td>
<td>0,00 $</td>
<td>Actif</td>
<td>
<bu on class="btn btn-primary"><i class="fas
fa-edit"></i></bu on>
<bu on class="btn btn-danger"><i class="fas
fa-ban"></i></bu on>
</td>
</tr>
<tr>
<td>Marie Dupont</td>
<td>marie.d@[Link]</td>
<td>150,00 $</td>
<td>VIP</td>
<td>
<bu on class="btn btn-primary"><i class="fas
fa-edit"></i></bu on>
<bu on class="btn btn-danger"><i class="fas
fa-ban"></i></bu on>
</td>
</tr>
<tr>
<td>Jean Ma in</td>
<td>jean.m@[Link]</td>
<td>75,50 $</td>
<td>Actif</td>
<td>
<bu on class="btn btn-primary"><i class="fas
fa-edit"></i></bu on>
<bu on class="btn btn-danger"><i class="fas
fa-ban"></i></bu on>
</td>
</tr>
</tbody>
</table>
</div>
</div>

<div class="admin-section">
<h3>Modi er les Paramètres du Site</h3>
<div class="admin-card">
<div class="form-group">
<label for="siteTitle">Nom du Site</label>
<input type="text" id="siteTitle" value="CashFlowa">
</div>
<div class="form-group">
<label for="mainColor">Couleur Principale</label>
<input type="color" id="mainColor" value="#4a90e2">
</div>
<div class="form-group">
<label for="minInvestment">Investissement
Minimum</label>
<input type="number" id="minInvestment" value="10">
</div>
<div class="form-group">
<label for="referralBonus">Bonus de Parrainage
(%)</label>
<input type="number" id="referralBonus" value="5">
</div>
<div class="form-group">
<label for="vipRequirements">Conditions VIP</label>
<textarea id="vipRequirements" rows="3">Investissement
minimum de 500€ et parrainage de 5 membres actifs.</textarea>
</div>
<bu on class="btn btn-success">Enregistrer les
Paramètres</bu on>
</div>
</div>

<div class="admin-section">
<h3>Transactions Récentes</h3>
<div class="admin-card">
<table class="admin-table">
<thead>
<tr>
<th>ID</th>
<th>Utilisateur</th>
<th>Montant</th>
<th>Type</th>
<th>Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>#TRX-4589</td>
<td>Freddy</td>
<td>50,00 $</td>
<td>Dépôt</td>
<td>14/09/2025</td>
<td>Complété</td>
</tr>
<tr>
<td>#TRX-4588</td>
<td>Marie Dupont</td>
<td>150,00 $</td>
<td>Investissement</td>
<td>13/09/2025</td>
<td>Complété</td>
</tr>
<tr>
<td>#TRX-4587</td>
<td>Jean Ma in</td>
<td>30,00 $</td>
<td>Retrait</td>
<td>13/09/2025</td>
<td>En a ente</td>
</tr>
</tbody>
</table>
</div>
</div>

<div class="admin-section">
<h3>Actions Rapides</h3>
<div style="display: ex; gap: 15px; ex-wrap: wrap;">
<bu on class="btn btn-primary">
<i class="fas fa-plus"></i> Ajouter des Fonds
</bu on>
<bu on class="btn btn-success">
<i class="fas fa-user-plus"></i> Créer un Utilisateur
</bu on>
<bu on class="btn btn-primary">
<i class="fas fa-bullhorn"></i> Envoyer une Noti cation
</bu on>
<bu on class="btn btn-danger">
<i class="fas fa-server"></i> Sauvegarder la Base de
Données
</bu on>
</div>
</div>
</div>
</div>

<script>
// Fonction pour basculer entre les vues
function showView(viewName) {
// Masquer toutes les vues

[Link]('pro le-view').[Link]('hidden');
[Link]('home-view').[Link]('hidden');

[Link]('investment-view').[Link]('hidden');

[Link]('referral-view').[Link]('hidden');

// Me re à jour la navigation
const navItems = [Link]('.nav-item');
[Link](item => [Link]('active'));

// A cher la vue demandée


if (viewName === 'pro le') {
[Link]('pro le-view').[Link]('hidden');
navItems[3].[Link]('active');
} else if (viewName === 'investment') {

[Link]('investment-view').[Link]('hidde
n');
navItems[1].[Link]('active');
} else if (viewName === 'referral') {

[Link]('referral-view').[Link]('hidden');
navItems[2].[Link]('active');
} else {

[Link]('home-view').[Link]('hidden');
navItems[0].[Link]('active');
}
}

// Fonction pour simuler un investissement


function invest(plan) {
ale (`Vous avez choisi d'investir dans le plan ${plan}. Ce e
fonctionnalité sera bientôt disponible!`);
// Ici, vous pourriez ajouter la logique pour traiter
l'investissement
}

// Fonctions pour l'inte ace admin


function toggleAdminPanel() {
const adminPanel = [Link]('adminPanel');
[Link]('hidden');
}
[Link]('adminToggle').addEventListener('click',
toggleAdminPanel);

// Simulation de données pour l'admin


[Link]('DOMContentLoaded', function() {
// Ici on pourrait charger des données réelles depuis une API
[Link]('Page chargée');
});
</script>
</body>
</html

You might also like