first commit
This commit is contained in:
@@ -0,0 +1,19 @@
|
|||||||
|
/* Animation de défilement infini pour les bandeaux */
|
||||||
|
@keyframes scroll {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-ticker {
|
||||||
|
display: flex;
|
||||||
|
width: max-content;
|
||||||
|
animation: scroll linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-ticker:hover {
|
||||||
|
animation-play-state: paused;
|
||||||
|
}
|
||||||
+116
@@ -0,0 +1,116 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Suivi des Indices Boursiers</title>
|
||||||
|
<!-- Inclusion de Tailwind CSS -->
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<!-- Inclusion de votre fichier CSS externe -->
|
||||||
|
<link rel="stylesheet" href="./css/style.css" />
|
||||||
|
</head>
|
||||||
|
<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 -->
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Cartes de synthèse (Derniers cours) -->
|
||||||
|
<div id="cards-container" class="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 -->
|
||||||
|
<footer
|
||||||
|
class="fixed bottom-0 left-0 w-full h-36 bg-slate-950 border-t border-slate-800 flex flex-col justify-between z-50 shadow-2xl overflow-hidden"
|
||||||
|
>
|
||||||
|
<!-- 3 Bandeaux empilés -->
|
||||||
|
<div
|
||||||
|
class="flex flex-col h-24 divide-y divide-slate-800/60 overflow-hidden bg-slate-900/80"
|
||||||
|
>
|
||||||
|
<!-- Bandeau CAC40 -->
|
||||||
|
<div class="flex-1 overflow-hidden relative flex items-center">
|
||||||
|
<div id="ticker-cac40" class="animate-ticker text-xs font-mono"></div>
|
||||||
|
</div>
|
||||||
|
<!-- Bandeau IBEX35 -->
|
||||||
|
<div class="flex-1 overflow-hidden relative flex items-center">
|
||||||
|
<div
|
||||||
|
id="ticker-ibex35"
|
||||||
|
class="animate-ticker text-xs font-mono"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<!-- Bandeau DOWJONES -->
|
||||||
|
<div class="flex-1 overflow-hidden relative flex items-center">
|
||||||
|
<div
|
||||||
|
id="ticker-dowjones"
|
||||||
|
class="animate-ticker text-xs font-mono"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Dernière ligne : Copyright -->
|
||||||
|
<div
|
||||||
|
class="h-12 bg-slate-950 flex items-center justify-center text-xs text-slate-400 tracking-wide border-t border-slate-900"
|
||||||
|
>
|
||||||
|
Copyright Jean-Francois GIRAUD 2026
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Inclusion du fichier JavaScript externe -->
|
||||||
|
<script src="./js/indices.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+152
@@ -0,0 +1,152 @@
|
|||||||
|
// Tableau global JavaScript pour stocker les données
|
||||||
|
let indicesData = [];
|
||||||
|
|
||||||
|
function chargerDonnees() {
|
||||||
|
fetch("./php/api_indices.php")
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((result) => {
|
||||||
|
if (result.status === "success") {
|
||||||
|
indicesData = result.data;
|
||||||
|
|
||||||
|
// Mise à jour de l'affichage
|
||||||
|
afficherSyntheseCartes();
|
||||||
|
afficherTableauDetails();
|
||||||
|
alimenterBandeauxTicker();
|
||||||
|
|
||||||
|
// Mise à jour du statut
|
||||||
|
document.getElementById("statut").innerText =
|
||||||
|
`Dernière mise à jour : ${new Date().toLocaleTimeString()}`;
|
||||||
|
document.getElementById("counter").innerText =
|
||||||
|
`${indicesData.length} enregistrements`;
|
||||||
|
} else {
|
||||||
|
console.error("Erreur API :", result.message);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => console.error("Erreur réseau :", error));
|
||||||
|
}
|
||||||
|
|
||||||
|
function afficherSyntheseCartes() {
|
||||||
|
const container = document.getElementById("cards-container");
|
||||||
|
container.innerHTML = "";
|
||||||
|
|
||||||
|
const indicesUniques = [...new Set(indicesData.map((item) => item.indice))];
|
||||||
|
|
||||||
|
indicesUniques.forEach((nomIndice) => {
|
||||||
|
const dernier = indicesData.find((item) => item.indice === nomIndice);
|
||||||
|
if (!dernier) return;
|
||||||
|
|
||||||
|
const isPositive = parseFloat(dernier.variation_pct) >= 0;
|
||||||
|
const badgeColor = isPositive
|
||||||
|
? "bg-emerald-500/10 text-emerald-400 border-emerald-500/20"
|
||||||
|
: "bg-rose-500/10 text-rose-400 border-rose-500/20";
|
||||||
|
const sign = isPositive ? "+" : "";
|
||||||
|
|
||||||
|
container.innerHTML += `
|
||||||
|
<div class="bg-slate-800 p-6 rounded-2xl shadow-lg border border-slate-700 flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-start">
|
||||||
|
<span class="text-xs font-semibold uppercase tracking-wider text-slate-400">${dernier.indice}</span>
|
||||||
|
<span class="text-xs px-2.5 py-1 rounded-full border ${badgeColor} font-semibold">
|
||||||
|
${sign}${parseFloat(dernier.variation_pct).toFixed(2)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-white mt-2">${dernier.nom || dernier.indice}</h3>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6 flex items-baseline justify-between">
|
||||||
|
<span class="text-2xl font-extrabold text-white">${parseFloat(dernier.cours).toLocaleString("fr-FR")}</span>
|
||||||
|
<span class="text-xs text-slate-400">${dernier.date_cours}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function afficherTableauDetails() {
|
||||||
|
const tbody = document.getElementById("table-body");
|
||||||
|
tbody.innerHTML = "";
|
||||||
|
|
||||||
|
if (indicesData.length === 0) {
|
||||||
|
tbody.innerHTML = `<tr><td colspan="5" class="p-6 text-center text-slate-400">Aucune donnée disponible</td></tr>`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
indicesData.forEach((row) => {
|
||||||
|
const isPositive = parseFloat(row.variation_pct) >= 0;
|
||||||
|
const textColor = isPositive ? "text-emerald-400" : "text-rose-400";
|
||||||
|
const sign = isPositive ? "+" : "";
|
||||||
|
|
||||||
|
tbody.innerHTML += `
|
||||||
|
<tr class="hover:bg-slate-700/30 transition-colors">
|
||||||
|
<td class="p-4 font-semibold text-white">${row.indice}</td>
|
||||||
|
<td class="p-4 text-slate-300">${row.nom || "-"}</td>
|
||||||
|
<td class="p-4 text-right font-mono text-white">${parseFloat(row.cours).toLocaleString("fr-FR")}</td>
|
||||||
|
<td class="p-4 text-right font-mono font-semibold ${textColor}">${sign}${parseFloat(row.variation_pct).toFixed(2)}%</td>
|
||||||
|
<td class="p-4 text-center text-xs text-slate-400">${row.date_cours}</td>
|
||||||
|
</tr>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function alimenterBandeauxTicker() {
|
||||||
|
// Filtrer et trier par ordre alphabétique sur le champ 'nom' (ou 'indice' si 'nom' est vide)
|
||||||
|
const preparerDonneesTicker = (nomIndice) => {
|
||||||
|
let liste = indicesData.filter((item) => item.indice === nomIndice);
|
||||||
|
|
||||||
|
// Tri alphabétique
|
||||||
|
liste.sort((a, b) => {
|
||||||
|
let valA = (a.nom || a.indice).toLowerCase();
|
||||||
|
let valB = (b.nom || b.indice).toLowerCase();
|
||||||
|
return valA.localeCompare(valB);
|
||||||
|
});
|
||||||
|
|
||||||
|
return liste;
|
||||||
|
};
|
||||||
|
|
||||||
|
remplirUnBandeau("ticker-cac40", preparerDonneesTicker("CAC40"));
|
||||||
|
remplirUnBandeau("ticker-ibex35", preparerDonneesTicker("IBEX35"));
|
||||||
|
remplirUnBandeau("ticker-dowjones", preparerDonneesTicker("DOWJONES"));
|
||||||
|
}
|
||||||
|
|
||||||
|
function remplirUnBandeau(elementId, donneesTriees) {
|
||||||
|
const container = document.getElementById(elementId);
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
if (donneesTriees.length === 0) {
|
||||||
|
container.innerHTML = `<span class="px-4 text-slate-500">Aucune donnée disponible</span>`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let htmlContent = "";
|
||||||
|
|
||||||
|
// On génère une séquence d'éléments
|
||||||
|
const genererBlocs = () => {
|
||||||
|
let blocs = "";
|
||||||
|
donneesTriees.forEach((item) => {
|
||||||
|
const isPositive = parseFloat(item.variation_pct) >= 0;
|
||||||
|
const colorClass = isPositive ? "text-emerald-400" : "text-rose-400";
|
||||||
|
const sign = isPositive ? "+" : "";
|
||||||
|
const nomAffichage = item.nom || item.indice;
|
||||||
|
const coursFormate = parseFloat(item.cours).toLocaleString("fr-FR");
|
||||||
|
const variationFormatee = parseFloat(item.variation_pct).toFixed(2);
|
||||||
|
|
||||||
|
blocs += `
|
||||||
|
<div class="inline-flex items-center px-6 space-x-3 border-r border-slate-800/80">
|
||||||
|
<span class="font-bold text-white">${nomAffichage}</span>
|
||||||
|
<span class="text-slate-300">${coursFormate}</span>
|
||||||
|
<span class="${colorClass} font-semibold">${sign}${variationFormatee}%</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
return blocs;
|
||||||
|
};
|
||||||
|
|
||||||
|
// On duplique le contenu pour assurer un effet de défilement infini fluide sans saccade
|
||||||
|
htmlContent = genererBlocs() + genererBlocs();
|
||||||
|
container.innerHTML = htmlContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Lancer au chargement initial
|
||||||
|
chargerDonnees();
|
||||||
|
|
||||||
|
// Rafraîchir automatiquement toutes les 60 secondes
|
||||||
|
setInterval(chargerDonnees, 60000);
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
<?php
|
||||||
|
// Indiquer au client que la réponse est du JSON
|
||||||
|
header('Content-Type: application/json; charset=utf-8');
|
||||||
|
|
||||||
|
// Paramètres de connexion MySQL
|
||||||
|
$host = 'localhost';
|
||||||
|
$db = 'GF';
|
||||||
|
$user = 'root';
|
||||||
|
$pass = 'sysadm-1963';
|
||||||
|
$charset = 'utf8mb4';
|
||||||
|
|
||||||
|
$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
|
||||||
|
$options = [
|
||||||
|
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
|
||||||
|
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
|
||||||
|
PDO::ATTR_EMULATE_PREPARES => false,
|
||||||
|
];
|
||||||
|
|
||||||
|
try {
|
||||||
|
$pdo = new PDO($dsn, $user, $pass, $options);
|
||||||
|
|
||||||
|
// Requête UNION pour récupérer :
|
||||||
|
// - Les 40 derniers pour le CAC40
|
||||||
|
// - Les 35 derniers pour l'IBEX35
|
||||||
|
// - Les 30 derniers pour le DOWJONES
|
||||||
|
// (Triés à chaque fois par date_cours décroissante)
|
||||||
|
$sql = "
|
||||||
|
(SELECT * FROM cours_actions WHERE indice = 'CAC40' ORDER BY date_cours DESC LIMIT 40)
|
||||||
|
UNION ALL
|
||||||
|
(SELECT * FROM cours_actions WHERE indice = 'IBEX35' ORDER BY date_cours DESC LIMIT 35)
|
||||||
|
UNION ALL
|
||||||
|
(SELECT * FROM cours_actions WHERE indice = 'DOWJONES' ORDER BY date_cours DESC LIMIT 30)
|
||||||
|
";
|
||||||
|
|
||||||
|
$stmt = $pdo->query($sql);
|
||||||
|
$data = $stmt->fetchAll();
|
||||||
|
|
||||||
|
// Renvoyer les données sous format JSON propre
|
||||||
|
echo json_encode([
|
||||||
|
"status" => "success",
|
||||||
|
"count" => count($data),
|
||||||
|
"data" => $data
|
||||||
|
], JSON_PRETTY_PRINT);
|
||||||
|
} catch (\PDOException $e) {
|
||||||
|
http_response_code(500);
|
||||||
|
echo json_encode([
|
||||||
|
"status" => "error",
|
||||||
|
"message" => $e->getMessage()
|
||||||
|
]);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user