tout le front ok
This commit is contained in:
+38
-55
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Suivi des Indices Boursiers</title>
|
||||
<link rel="icon" type="image/ico" href="./images/dollars.ico" />
|
||||
<!-- Inclusion de Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Inclusion de votre fichier CSS externe -->
|
||||
@@ -12,66 +13,50 @@
|
||||
<body class="bg-slate-900 text-slate-100 min-h-screen flex flex-col pb-40">
|
||||
<!-- Contenu principal -->
|
||||
<main class="flex-grow max-w-7xl mx-auto p-6 space-y-8 w-full">
|
||||
<!-- En-tête -->
|
||||
<!-- En-tête avec cartouche de fond -->
|
||||
<header
|
||||
class="flex flex-col sm:flex-row justify-between items-center bg-slate-800 p-6 rounded-2xl shadow-lg border border-slate-700 gap-4"
|
||||
class="max-w-7xl mx-auto px-6 py-6 mt-4 bg-slate-800 border border-slate-700 rounded-2xl shadow-xl"
|
||||
>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-white">
|
||||
Tableau de Bord Boursier
|
||||
</h1>
|
||||
<p class="text-sm text-slate-400 mt-1">
|
||||
CAC 40, IBEX 35 & Dow Jones en temps réel
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
id="statut"
|
||||
class="text-xs px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-full text-slate-300"
|
||||
>
|
||||
Chargement des données...
|
||||
<div class="grid grid-cols-3 items-center">
|
||||
<!-- Colonne 1 : Logo à gauche -->
|
||||
<div class="flex items-center justify-start">
|
||||
<img
|
||||
src="./images/GFBlanc.png"
|
||||
alt="Logo Giraud Finance"
|
||||
class="h-14 w-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Colonne 2 : Titre et sous-titre centrés -->
|
||||
<div class="text-center">
|
||||
<h1 class="text-2xl font-extrabold text-white tracking-tight">
|
||||
Tableau de bord boursier
|
||||
</h1>
|
||||
<p class="text-slate-400 text-xs mt-1">
|
||||
Suivi des cours, variations et analyses de vos portefeuilles et
|
||||
indices financiers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Colonne 3 : Date à droite -->
|
||||
<div class="flex items-center justify-end">
|
||||
<span
|
||||
id="statut"
|
||||
class="text-xs text-slate-300 font-mono bg-slate-900/50 px-3 py-1 rounded-full border border-slate-700"
|
||||
>
|
||||
Dernière mise à jour : --:--:--
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Cartes de synthèse (Derniers cours) -->
|
||||
<div id="cards-container" class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Grille des 18 cartes (3 colonnes x 6 lignes) -->
|
||||
<div
|
||||
id="cards-container"
|
||||
class="max-w-7xl mx-auto px-6 py-8 grid grid-cols-1 md:grid-cols-3 gap-6"
|
||||
>
|
||||
<!-- Injecté dynamiquement par JavaScript -->
|
||||
</div>
|
||||
|
||||
<!-- Tableau détaillé -->
|
||||
<section
|
||||
class="bg-slate-800 rounded-2xl shadow-lg border border-slate-700 overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="p-6 border-b border-slate-700 flex justify-between items-center"
|
||||
>
|
||||
<h2 class="text-lg font-semibold text-white">
|
||||
Historique récent des cotations
|
||||
</h2>
|
||||
<span
|
||||
id="counter"
|
||||
class="text-xs bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 px-3 py-1 rounded-full font-medium"
|
||||
>0 enregistrements</span
|
||||
>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr
|
||||
class="bg-slate-900/50 text-slate-400 uppercase text-xs tracking-wider border-b border-slate-700"
|
||||
>
|
||||
<th class="p-4">Indice</th>
|
||||
<th class="p-4">Nom</th>
|
||||
<th class="p-4 text-right">Cours</th>
|
||||
<th class="p-4 text-right">Variation (%)</th>
|
||||
<th class="p-4 text-center">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body" class="divide-y divide-slate-700/50 text-sm">
|
||||
<!-- Injecté dynamiquement par JavaScript -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer Fixe avec les 3 bandeaux défilants et le copyright -->
|
||||
@@ -84,7 +69,6 @@
|
||||
>
|
||||
<!-- Bandeau CAC40 -->
|
||||
<div class="flex-1 relative overflow-hidden flex items-center">
|
||||
<!-- Étiquette fixe à gauche (Largeur fixe forcée) -->
|
||||
<div
|
||||
class="absolute left-0 top-0 h-full bg-slate-900 border-r border-slate-700/80 flex items-center px-4 space-x-3 z-20 shadow-lg"
|
||||
style="width: 150px"
|
||||
@@ -94,7 +78,6 @@
|
||||
>CAC40</span
|
||||
>
|
||||
</div>
|
||||
<!-- Zone de défilement (Padding gauche égal à la largeur de l'étiquette) -->
|
||||
<div
|
||||
class="w-full h-full flex items-center overflow-hidden"
|
||||
style="padding-left: 150px"
|
||||
|
||||
Reference in New Issue
Block a user