Scribd
Upload
8 views9 pages

Voice Preview Daniel - mp3

The document is an HTML template for a mobile investment management application called 'InvestiDay'. It includes sections for user tasks, investment details, and a balance banner, along with a bottom navigation bar. The document also contains JavaScript functionality for managing tasks and investments, allowing users to add, complete, and track their progress.

Uploaded by

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

Voice Preview Daniel - mp3

The document is an HTML template for a mobile investment management application called 'InvestiDay'. It includes sections for user tasks, investment details, and a balance banner, along with a bottom navigation bar. The document also contains JavaScript functionality for managing tasks and investments, allowing users to add, complete, and track their progress.

Uploaded by

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

<!

DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0, user-scalable=no">
<title>InvestiDay - Gestion d'Investissement</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.0.0-beta3/css/all.min.css">
<style>
/* Reset et base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif;
}

body {
background-color: #f2f2f7;
color: #1c1c1e;
display: flex;
justify-content: center;
padding: 20px;
min-height: 100vh;
}

.iphone-container {
width: 100%;
max-width: 375px;
background-color: white;
border-radius: 40px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
padding-bottom: 80px;
position: relative;
}

/* En-tête */
.app-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background-color: white;
}

.app-header h1 {
font-size: 24px;
font-weight: 600;
color: #007aff;
}

.user-profile {
width: 36px;
height: 36px;
background-color: #e5e5ea;
border-radius: 18px;
display: flex;
justify-content: center;
align-items: center;
color: #007aff;
}

/* Bannière de solde */
.balance-banner {
background: linear-gradient(135deg, #007aff, #34aadc);
color: white;
padding: 25px 20px;
margin: 10px 20px;
border-radius: 15px;
text-align: center;
}

.balance-label {
font-size: 16px;
opacity: 0.9;
margin-bottom: 5px;
}

.balance-amount {
font-size: 32px;
font-weight: 600;
margin-bottom: 5px;
}

.balance-change {
font-size: 14px;
opacity: 0.9;
}

/* Navigation rapide */
.quick-nav {
display: flex;
justify-content: space-around;
padding: 15px 20px;
}

.nav-btn {
background: none;
border: none;
display: flex;
flex-direction: column;
align-items: center;
color: #8e8e93;
font-size: 12px;
cursor: pointer;
}

.nav-btn i {
font-size: 20px;
margin-bottom: 5px;
color: #007aff;
}

/* Section Tâches */
.daily-tasks {
padding: 15px 20px;
}

.daily-tasks h2 {
font-size: 18px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
}

.task-progress {
font-size: 14px;
color: #8e8e93;
font-weight: normal;
}

.task-list {
margin-bottom: 15px;
}

.task-item {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f2f2f7;
cursor: pointer;
}

.task-item i {
margin-right: 10px;
font-size: 20px;
}

.task-item.completed i {
color: #34c759;
}

.task-item.completed span {
color: #8e8e93;
text-decoration: line-through;
}

.add-task-btn {
width: 100%;
background-color: #f2f2f7;
border: none;
padding: 12px;
border-radius: 10px;
color: #007aff;
font-weight: 500;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}

.add-task-btn i {
margin-right: 8px;
}
/* Section Investissements */
.investments-section {
padding: 15px 20px;
}

.investments-section h2 {
font-size: 18px;
margin-bottom: 15px;
}

.investment-card {
background-color: #f9f9f9;
border-radius: 12px;
padding: 15px;
margin-bottom: 12px;
cursor: pointer;
}

.investment-header {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}

.investment-header h3 {
font-size: 16px;
font-weight: 600;
}

.investment-value {
font-weight: 600;
}

.investment-details {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #8e8e93;
}

.investment-details span:first-child {
color: #34c759;
}

.add-investment-btn {
width: 100%;
background-color: #007aff;
color: white;
border: none;
padding: 15px;
border-radius: 10px;
font-weight: 500;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
cursor: pointer;
}
.add-investment-btn i {
margin-right: 8px;
}

/* Navigation du bas */
.bottom-nav {
position: fixed;
bottom: 20px;
width: 100%;
max-width: 375px;
background-color: white;
display: flex;
justify-content: space-around;
padding: 12px 0;
border-top: 1px solid #f2f2f7;
border-radius: 0 0 40px 40px;
}

.nav-link {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: #8e8e93;
font-size: 12px;
}

.nav-link i {
font-size: 20px;
margin-bottom: 4px;
}

.nav-link.active {
color: #007aff;
}

/* Animation pour les tâches */


@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

.task-item {
animation: fadeIn 0.3s ease-out;
}

/* Effet au clic */
button:active, .task-item:active, .investment-card:active {
transform: scale(0.98);
opacity: 0.9;
}
</style>
</head>
<body>
<div class="iphone-container">
<!-- En-tête -->
<header class="app-header">
<h1>InvestiDay</h1>
<div class="user-profile">
<i class="fas fa-user"></i>
</div>
</header>

<!-- Bannière de solde -->


<div class="balance-banner">
<div class="balance-label">Votre portefeuille</div>
<div class="balance-amount">€24,589.34</div>
<div class="balance-change">+2.4% aujourd'hui</div>
</div>

<!-- Navigation rapide -->


<div class="quick-nav">
<button class="nav-btn">
<i class="fas fa-chart-line"></i>
<span>Marchés</span>
</button>
<button class="nav-btn">
<i class="fas fa-tasks"></i>
<span>Tâches</span>
</button>
<button class="nav-btn">
<i class="fas fa-wallet"></i>
<span>Portefeuille</span>
</button>
<button class="nav-btn">
<i class="fas fa-cog"></i>
<span>Paramètres</span>
</button>
</div>

<!-- Section Tâches Quotidiennes -->


<section class="daily-tasks">
<h2>Tâches du jour <span class="task-progress">2/5
complétées</span></h2>

<div class="task-list">
<div class="task-item completed">
<i class="fas fa-check-circle"></i>
<span>Vérifier les marchés</span>
</div>
<div class="task-item completed">
<i class="fas fa-check-circle"></i>
<span>Lire l'actualité financière</span>
</div>
<div class="task-item">
<i class="far fa-circle"></i>
<span>Rééquilibrer le portefeuille</span>
</div>
<div class="task-item">
<i class="far fa-circle"></i>
<span>Analyser une nouvelle opportunité</span>
</div>
<div class="task-item">
<i class="far fa-circle"></i>
<span>Économiser €50 aujourd'hui</span>
</div>
</div>
<button class="add-task-btn">
<i class="fas fa-plus"></i> Ajouter une tâche
</button>
</section>

<!-- Section Investissements -->


<section class="investments-section">
<h2>Vos investissements</h2>

<div class="investment-card">
<div class="investment-header">
<h3>Actions Tech</h3>
<span class="investment-value">€12,450.20</span>
</div>
<div class="investment-details">
<span>+3.2%</span>
<span>5 positions</span>
</div>
</div>

<div class="investment-card">
<div class="investment-header">
<h3>ETF Monde</h3>
<span class="investment-value">€8,120.75</span>
</div>
<div class="investment-details">
<span>+1.8%</span>
<span>2 fonds</span>
</div>
</div>

<button class="add-investment-btn">
<i class="fas fa-plus"></i> Nouvel investissement
</button>
</section>

<!-- Barre de navigation -->


<nav class="bottom-nav">
<a href="#" class="nav-link active">
<i class="fas fa-home"></i>
<span>Accueil</span>
</a>
<a href="#" class="nav-link">
<i class="fas fa-chart-pie"></i>
<span>Analyse</span>
</a>
<a href="#" class="nav-link">
<i class="fas fa-bell"></i>
<span>Alertes</span>
</a>
<a href="#" class="nav-link">
<i class="fas fa-book"></i>
<span>Apprendre</span>
</a>
</nav>
</div>

<script>
// Fonctionnalité de base pour marquer les tâches comme complètes
document.querySelectorAll('.task-item').forEach(item => {
item.addEventListener('click', function() {
if (this.classList.contains('completed')) {
this.classList.remove('completed');
this.querySelector('i').className = 'far fa-circle';
} else {
this.classList.add('completed');
this.querySelector('i').className = 'fas fa-check-circle';
}
updateTaskProgress();
});
});

// Mettre à jour le compteur de tâches complétées


function updateTaskProgress() {
const totalTasks = document.querySelectorAll('.task-item').length;
const completedTasks = document.querySelectorAll('.task-
item.completed').length;
document.querySelector('.task-progress').textContent = `$
{completedTasks}/${totalTasks} complétées`;
}

// Simulation d'ajout de tâche


document.querySelector('.add-task-btn').addEventListener('click',
function() {
const newTaskText = prompt('Ajouter une nouvelle tâche:');
if (newTaskText) {
const taskList = document.querySelector('.task-list');
const newTask = document.createElement('div');
newTask.className = 'task-item';
newTask.innerHTML = `
<i class="far fa-circle"></i>
<span>${newTaskText}</span>
`;
newTask.addEventListener('click', function() {
if (this.classList.contains('completed')) {
this.classList.remove('completed');
this.querySelector('i').className = 'far fa-circle';
} else {
this.classList.add('completed');
this.querySelector('i').className = 'fas fa-check-circle';
}
updateTaskProgress();
});
taskList.appendChild(newTask);
updateTaskProgress();
}
});

// Simulation d'ajout d'investissement


document.querySelector('.add-investment-btn').addEventListener('click',
function() {
const investmentName = prompt('Nom du nouvel investissement:');
if (investmentName) {
const investmentValue = prompt('Valeur (€):') || '0';
const investmentSection = document.querySelector('.investments-
section');
const newInvestment = document.createElement('div');
newInvestment.className = 'investment-card';
newInvestment.innerHTML = `
<div class="investment-header">
<h3>${
investmentName}</h3>
<span class="investment-value">€$
{parseFloat(investmentValue).toFixed(2)}</span>
</div>
<div class="investment-details">
<span>+0.0%</span>
<span>1 position</span>
</div>
`;
investmentSection.insertBefore(newInvestment, this);
}
});
</script>
</body>
</html>

You might also like