first commit

2026-08-20 07:56:32 +00:00
commit 89d84021f3
4 changed files with 337 additions and 0 deletions
@@ -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;
+}
@@ -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>
@@ -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()
+    ]);
+}