Spaces:

zama1
/

harmonygen

Running

App Files Files Community

zama1 commited on Apr 10

Commit

ad8030c

verified ·

1 Parent(s): 8a4d64b

Add 1 files

Browse files

Files changed (1) hide show

index.html +462 -578

index.html CHANGED Viewed

@@ -1,636 +1,520 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HarmonyGen - Multilingual Chord Progression Generator</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/tone@14.7.77/build/Tone.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');
-        body {
-            font-family: 'Inter', sans-serif;
-            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-            min-height: 100vh;
-            color: #e2e8f0;
         }
-        .chord-card {
-            transition: all 0.3s ease;
-            transform-style: preserve-3d;
         }
-        .chord-card:hover {
-            transform: translateY(-5px) scale(1.03);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
         }
-        .chord-playing {
-            animation: pulse 1s infinite;
-            box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.5);
         }
         @keyframes pulse {
-            0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
-            70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
-            100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
-        }
-        .language-selector {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-        }
-        .genre-selector {
-            scrollbar-width: thin;
-            scrollbar-color: #4f46e5 #1e293b;
-        }
-        .genre-selector::-webkit-scrollbar {
-            height: 8px;
-        }
-        .genre-selector::-webkit-scrollbar-track {
-            background: #1e293b;
-            border-radius: 10px;
-        }
-        .genre-selector::-webkit-scrollbar-thumb {
-            background-color: #4f46e5;
-            border-radius: 10px;
         }
     </style>
 </head>
-<body class="min-h-screen flex flex-col">
-    <!-- Header with Language Selector -->
-    <header class="py-4 px-6 flex justify-between items-center border-b border-gray-700">
-        <div class="flex items-center space-x-2">
-            <i class="fas fa-music text-indigo-500 text-2xl"></i>
-            <h1 class="text-xl font-bold bg-gradient-to-r from-indigo-400 to-purple-500 bg-clip-text text-transparent">HarmonyGen</h1>
-        </div>
-        <div class="relative">
-            <select id="language-selector" class="language-selector px-4 py-2 rounded-full text-sm font-medium border border-gray-600 appearance-none focus:outline-none focus:ring-2 focus:ring-indigo-500">
-                <option value="en">English</option>
-                <option value="fr">Français</option>
-                <option value="es">Español</option>
-                <option value="de">Deutsch</option>
-                <option value="it">Italiano</option>
-                <option value="ja">日本語</option>
-            </select>
-            <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
         </div>
     </header>
     <!-- Main Content -->
-    <main class="flex-1 container mx-auto px-4 py-8">
-        <div class="max-w-4xl mx-auto">
-            <div class="text-center mb-10">
-                <h2 id="main-title" class="text-3xl md:text-4xl font-bold mb-3">Generate Beautiful Chord Progressions</h2>
-                <p id="main-subtitle" class="text-gray-400 max-w-2xl mx-auto">Create harmonic sequences with one click. Perfect for songwriting and music theory practice.</p>
-            </div>
-            <!-- Genre Selector -->
-            <div class="mb-8">
-                <h3 id="genre-label" class="text-lg font-semibold mb-3">Select Music Style</h3>
-                <div class="genre-selector flex space-x-3 pb-2 overflow-x-auto">
-                    <button data-genre="pop" class="genre-btn flex-shrink-0 px-4 py-2 rounded-full bg-indigo-900 text-indigo-100 hover:bg-indigo-700 transition">Pop</button>
-                    <button data-genre="rock" class="genre-btn flex-shrink-0 px-4 py-2 rounded-full bg-gray-700 hover:bg-gray-600 transition">Rock</button>
-                    <button data-genre="jazz" class="genre-btn flex-shrink-0 px-4 py-2 rounded-full bg-amber-900 hover:bg-amber-800 transition">Jazz</button>
-                    <button data-genre="blues" class="genre-btn flex-shrink-0 px-4 py-2 rounded-full bg-blue-900 hover:bg-blue-800 transition">Blues</button>
-                    <button data-genre="classical" class="genre-btn flex-shrink-0 px-4 py-2 rounded-full bg-purple-900 hover:bg-purple-800 transition">Classical</button>
-                    <button data-genre="electronic" class="genre-btn flex-shrink-0 px-4 py-2 rounded-full bg-pink-900 hover:bg-pink-800 transition">Electronic</button>
-                    <button data-genre="flamenco" class="genre-btn flex-shrink-0 px-4 py-2 rounded-full bg-red-900 hover:bg-red-800 transition">Flamenco</button>
-                    <button data-genre="reggae" class="genre-btn flex-shrink-0 px-4 py-2 rounded-full bg-green-900 hover:bg-green-800 transition">Reggae</button>
                 </div>
             </div>
-            <!-- Key Selector -->
-            <div class="mb-8">
-                <h3 id="key-label" class="text-lg font-semibold mb-3">Select Key</h3>
-                <div class="grid grid-cols-4 sm:grid-cols-7 gap-3">
-                    <button data-key="C" class="key-btn px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 transition">C</button>
-                    <button data-key="D" class="key-btn px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 transition">D</button>
-                    <button data-key="E" class="key-btn px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 transition">E</button>
-                    <button data-key="F" class="key-btn px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 transition">F</button>
-                    <button data-key="G" class="key-btn px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 transition">G</button>
-                    <button data-key="A" class="key-btn px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 transition">A</button>
-                    <button data-key="B" class="key-btn px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 transition">B</button>
                 </div>
             </div>
             <!-- Generate Button -->
-            <div class="text-center mb-10">
-                <button id="generate-btn" class="px-8 py-3 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold shadow-lg transition transform hover:scale-105">
-                    <i class="fas fa-magic mr-2"></i>
-                    <span id="generate-text">Generate Progression</span>
                 </button>
             </div>
-            <!-- Results Section -->
-            <div id="results-section" class="hidden">
-                <div class="flex justify-between items-center mb-4">
-                    <h3 id="progression-label" class="text-xl font-semibold">Your Chord Progression</h3>
-                    <button id="play-btn" class="px-4 py-2 rounded bg-green-600 hover:bg-green-700 text-white flex items-center">
-                        <i class="fas fa-play mr-2"></i>
-                        <span id="play-text">Play</span>
-                    </button>
                 </div>
-                <div id="chord-container" class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
-                    <!-- Chord cards will be inserted here -->
                 </div>
-                <div class="flex flex-wrap justify-center gap-3">
-                    <button id="save-btn" class="px-4 py-2 rounded bg-indigo-600 hover:bg-indigo-700 text-white flex items-center">
-                        <i class="fas fa-save mr-2"></i>
-                        <span id="save-text">Save</span>
                     </button>
-                    <button id="share-btn" class="px-4 py-2 rounded bg-blue-600 hover:bg-blue-700 text-white flex items-center">
-                        <i class="fas fa-share-alt mr-2"></i>
-                        <span id="share-text">Share</span>
                     </button>
-                    <button id="export-midi-btn" class="px-4 py-2 rounded bg-purple-600 hover:bg-purple-700 text-white flex items-center">
-                        <i class="fas fa-file-export mr-2"></i>
-                        <span id="export-text">Export MIDI</span>
                     </button>
                 </div>
             </div>
-            <!-- Music Theory Tips -->
-            <div id="theory-tips" class="mt-12 p-6 bg-gray-800 rounded-lg hidden">
-                <h3 id="tips-title" class="text-xl font-semibold mb-3">Music Theory Insight</h3>
-                <p id="tips-content" class="text-gray-300">This progression uses a classic I-V-vi-IV pattern which is very common in pop music. The movement from the tonic (I) to dominant (V) creates tension that resolves back to the tonic.</p>
-            </div>
         </div>
     </main>
     <!-- Footer -->
-    <footer class="py-6 px-4 border-t border-gray-700 text-center text-gray-400 text-sm">
-        <p id="footer-text">© 2023 HarmonyGen - All rights reserved | Made with <i class="fas fa-heart text-red-500"></i> for music lovers</p>
     </footer>
     <script>
-        // Internationalization data
-        const translations = {
-            en: {
-                title: "Generate Beautiful Chord Progressions",
-                subtitle: "Create harmonic sequences with one click. Perfect for songwriting and music theory practice.",
-                genreLabel: "Select Music Style",
-                keyLabel: "Select Key",
-                generateText: "Generate Progression",
-                progressionLabel: "Your Chord Progression",
-                playText: "Play",
-                saveText: "Save",
-                shareText: "Share",
-                exportText: "Export MIDI",
-                tipsTitle: "Music Theory Insight",
-                tipsContent: "This progression uses a classic I-V-vi-IV pattern which is very common in pop music. The movement from the tonic (I) to dominant (V) creates tension that resolves back to the tonic.",
-                footer: "© 2023 HarmonyGen - All rights reserved | Made with ♥ for music lovers"
-            },
-            fr: {
-                title: "Générez de Belles Progressions d'Accords",
-                subtitle: "Créez des séquences harmoniques en un clic. Parfait pour l'écriture de chansons et la pratique de la théorie musicale.",
-                genreLabel: "Sélectionnez le Style Musical",
-                keyLabel: "Sélectionnez la Tonale",
-                generateText: "Générer une Progression",
-                progressionLabel: "Votre Progression d'Accords",
-                playText: "Jouer",
-                saveText: "Enregistrer",
-                shareText: "Partager",
-                exportText: "Exporter MIDI",
-                tipsTitle: "Conseil de Théorie Musicale",
-                tipsContent: "Cette progression utilise un motif classique I-V-vi-IV très courant dans la musique pop. Le mouvement de la tonique (I) à la dominante (V) crée une tension qui se résout vers la tonique.",
-                footer: "© 2023 HarmonyGen - Tous droits réservés | Fait avec ♥ pour les amoureux de la musique"
-            },
-            es: {
-                title: "Genera Hermosas Progresiones de Acordes",
-                subtitle: "Crea secuencias armónicas con un clic. Perfecto para componer canciones y practicar teoría musical.",
-                genreLabel: "Selecciona Estilo Musical",
-                keyLabel: "Selecciona Tonalidad",
-                generateText: "Generar Progresión",
-                progressionLabel: "Tu Progresión de Acordes",
-                playText: "Reproducir",
-                saveText: "Guardar",
-                shareText: "Compartir",
-                exportText: "Exportar MIDI",
-                tipsTitle: "Consejo de Teoría Musical",
-                tipsContent: "Esta progresión utiliza un patrón clásico I-V-vi-IV muy común en la música pop. El movimiento de la tónica (I) a la dominante (V) crea tensión que se resuelve hacia la tónica.",
-                footer: "© 2023 HarmonyGen - Todos los derechos reservados | Hecho con ♥ para amantes de la música"
-            },
-            de: {
-                title: "Erzeuge Schöne Akkordfolgen",
-                subtitle: "Erstelle harmonische Sequenzen mit einem Klick. Perfekt für Songwriting und Musiktheorie-Übungen.",
-                genreLabel: "Musikstil auswählen",
-                keyLabel: "Tonart auswählen",
-                generateText: "Akkordfolge generieren",
-                progressionLabel: "Deine Akkordfolge",
-                playText: "Abspielen",
-                saveText: "Speichern",
-                shareText: "Teilen",
-                exportText: "MIDI exportieren",
-                tipsTitle: "Musiktheorie-Tipp",
-                tipsContent: "Diese Folge verwendet ein klassisches I-V-vi-IV-Muster, das in der Popmusik sehr verbreitet ist. Die Bewegung von der Tonika (I) zur Dominante (V) erzeugt Spannung, die sich zur Tonika auflöst.",
-                footer: "© 2023 HarmonyGen - Alle Rechte vorbehalten | Mit ♥ für Musikliebhaber gemacht"
-            },
-            it: {
-                title: "Genera Belle Progressioni di Accordi",
-                subtitle: "Crea sequenze armoniche con un clic. Perfetto per scrivere canzoni e praticare la teoria musicale.",
-                genreLabel: "Seleziona Stile Musicale",
-                keyLabel: "Seleziona Tonalità",
-                generateText: "Genera Progressione",
-                progressionLabel: "La Tua Progressione di Accordi",
-                playText: "Riproduci",
-                saveText: "Salva",
-                shareText: "Condividi",
-                exportText: "Esporta MIDI",
-                tipsTitle: "Consiglio di Teoria Musicale",
-                tipsContent: "Questa progressione utilizza un classico pattern I-V-vi-IV molto comune nella musica pop. Il movimento dalla tonica (I) alla dominante (V) crea tensione che si risolve verso la tonica.",
-                footer: "© 2023 HarmonyGen - Tutti i diritti riservati | Fatto con ♥ per gli amanti della musica"
-            },
-            ja: {
-                title: "美しいコード進行を生成",
-                subtitle: "ワンクリックでハーモニックなコード進行を作成。作曲や音楽理論の練習に最適です。",
-                genreLabel: "音楽スタイルを選択",
-                keyLabel: "キーを選択",
-                generateText: "コード進行を生成",
-                progressionLabel: "あなたのコード進行",
-                playText: "再生",
-                saveText: "保存",
-                shareText: "共有",
-                exportText: "MIDIエクスポート",
-                tipsTitle: "音楽理論のヒント",
-                tipsContent: "この進行は、ポップミュージックで非常に一般的な古典的なI-V-vi-IVパターンを使用しています。トニック（I）からドミナント（V）への動きは、トニックに解決する緊張感を作り出します。",
-                footer: "© 2023 HarmonyGen - 全著作権所有 | 音楽愛好家のために♥で作られました"
-            }
-        };
-        // Chord translations
-        const chordTranslations = {
-            en: {
-                C: "C", G: "G", Am: "Am", F: "F", Em: "Em", Dm: "Dm", Bb: "Bb",
-                D: "D", A: "A", E: "E", B: "B", Fm: "Fm", Cm: "Cm", Gm: "Gm",
-                D7: "D7", G7: "G7", C7: "C7", A7: "A7", E7: "E7", B7: "B7"
-            },
-            fr: {
-                C: "Do", G: "Sol", Am: "Lam", F: "Fa", Em: "Mim", Dm: "Rém", Bb: "Sib",
-                D: "Ré", A: "La", E: "Mi", B: "Si", Fm: "Fam", Cm: "Dom", Gm: "Solm",
-                D7: "Ré7", G7: "Sol7", C7: "Do7", A7: "La7", E7: "Mi7", B7: "Si7"
-            },
-            es: {
-                C: "Do", G: "Sol", Am: "Lam", F: "Fa", Em: "Mim", Dm: "Rem", Bb: "Sib",
-                D: "Re", A: "La", E: "Mi", B: "Si", Fm: "Fam", Cm: "Dom", Gm: "Solm",
-                D7: "Re7", G7: "Sol7", C7: "Do7", A7: "La7", E7: "Mi7", B7: "Si7"
-            },
-            de: {
-                C: "C", G: "G", Am: "Am", F: "F", Em: "Em", Dm: "Dm", Bb: "B",
-                D: "D", A: "A", E: "E", B: "H", Fm: "Fm", Cm: "Cm", Gm: "Gm",
-                D7: "D7", G7: "G7", C7: "C7", A7: "A7", E7: "E7", B7: "H7"
-            },
-            it: {
-                C: "Do", G: "Sol", Am: "Lam", F: "Fa", Em: "Mim", Dm: "Rem", Bb: "Sib",
-                D: "Re", A: "La", E: "Mi", B: "Si", Fm: "Fam", Cm: "Dom", Gm: "Solm",
-                D7: "Re7", G7: "Sol7", C7: "Do7", A7: "La7", E7: "Mi7", B7: "Si7"
-            },
-            ja: {
-                C: "C", G: "G", Am: "Am", F: "F", Em: "Em", Dm: "Dm", Bb: "B♭",
-                D: "D", A: "A", E: "E", B: "B", Fm: "Fm", Cm: "Cm", Gm: "Gm",
-                D7: "D7", G7: "G7", C7: "C7", A7: "A7", E7: "E7", B7: "B7"
-            }
-        };
-        // Common chord progressions by genre
-        const progressions = {
-            pop: ["C", "G", "Am", "F"],
-            rock: ["E", "B", "C#m", "A"],
-            jazz: ["Dm7", "G7", "Cmaj7", "A7"],
-            blues: ["C7", "F7", "G7", "C7"],
-            classical: ["C", "G", "Am", "Em", "F", "C", "F", "G"],
-            electronic: ["Cm", "Bb", "Ab", "Eb"],
-            flamenco: ["Am", "G", "F", "E"],
-            reggae: ["A", "D", "E", "A"]
-        };
-        // Music theory tips by genre
-        const theoryTips = {
-            pop: {
-                en: "This I-V-vi-IV progression is the most common in pop music, found in countless hit songs. The movement from the tonic (I) to dominant (V) creates tension that resolves satisfyingly.",
-                fr: "Cette progression I-V-vi-IV est la plus courante dans la musique pop, présente dans d'innombrables tubes. Le mouvement de la tonique (I) à la dominante (V) crée une tension qui se résout de manière satisfaisante.",
-                es: "Esta progresión I-V-vi-IV es la más común en la música pop, presente en innumerables éxitos. El movimiento de la tónica (I) a la dominante (V) crea tensión que se resuelve de manera satisfactoria.",
-                de: "Diese I-V-vi-IV-Folge ist die häufigste in der Popmusik und findet sich in unzähligen Hits. Die Bewegung von der Tonika (I) zur Dominante (V) erzeugt Spannung, die sich befriedigend auflöst.",
-                it: "Questa progressione I-V-vi-IV è la più comune nella musica pop, presente in innumerevoli canzoni di successo. Il movimento dalla tonica (I) alla dominante (V) crea tensione che si risolve in modo soddisfacente.",
-                ja: "このI-V-vi-IV進行はポップミュージックで最も一般的で、無数のヒット曲に見られます。トニック（I）からドミナント（V）への動きは、満足のいく解決をもたらす緊張感を作り出します。"
-            },
-            rock: {
-                en: "This powerful progression uses the classic rock formula with strong root movements. The V-IV-I pattern creates a driving energy perfect for anthemic rock songs.",
-                fr: "Cette progression puissante utilise la formule rock classique avec des mouvements de basse forts. Le motif V-IV-I crée une énergie entraînante parfaite pour les chansons rock hymne.",
-                es: "Esta progresión poderosa utiliza la fórmula clásica del rock con fuertes movimientos de raíz. El patrón V-IV-I crea una energía impulsora perfecta para canciones de rock himno.",
-                de: "Diese kraftvolle Folge verwendet die klassische Rockformel mit starken Grundtonbewegungen. Das V-IV-I-Muster erzeugt eine treibende Energie, die perfekt für hymnische Rocksongs ist.",
-                it: "Questa potente progressione utilizza la classica formula rock con forti movimenti di radice. Il pattern V-IV-I crea un'energia trainante perfetta per le canzoni rock inno.",
-                ja: "この力強い進行は、強力なルートムーブメントを備えたクラシックなロックの公式を使用しています。V-IV-Iパターンは、アンセミックなロックソングに最適な推進力のあるエネルギーを作り出します。"
-            },
-            jazz: {
-                en: "This ii-V-I progression with added 7ths is the backbone of jazz harmony. The chromatic movement and extended chords create rich harmonic color.",
-                fr: "Cette progression ii-V-I avec des 7èmes ajoutées est l'épine dorsale de l'harmonie jazz. Le mouvement chromatique et les accords étendus créent une riche couleur harmonique.",
-                es: "Esta progresión ii-V-I con séptimas añadidas es la columna vertebral de la armonía jazz. El movimiento cromático y los acordes extendidos crean un rico color armónico.",
-                de: "Diese ii-V-I-Folge mit hinzugefügten Septimen ist das Rückgrat der Jazzharmonik. Die chromatische Bewegung und die erweiterten Akkorde erzeugen eine reiche harmonische Farbe.",
-                it: "Questa progressione ii-V-I con settime aggiunte è la spina dorsale dell'armonia jazz. Il movimento cromatico e gli accordi estesi creano un ricco colore armonico.",
-                ja: "7thを加えたこのii-V-I進行は、ジャズハーモニーのバックボーンです。半音階の動きと拡張されたコードは、豊かなハーモニックカラーを作り出します。"
-            }
-            // More genre tips can be added here
-        };
-        // Current state
-        let currentLanguage = 'en';
-        let currentGenre = 'pop';
-        let currentKey = 'C';
-        let currentChords = [];
-        let isPlaying = false;
-        let synth;
-        // DOM elements
-        const languageSelector = document.getElementById('language-selector');
-        const genreButtons = document.querySelectorAll('.genre-btn');
-        const keyButtons = document.querySelectorAll('.key-btn');
-        const generateBtn = document.getElementById('generate-btn');
-        const playBtn = document.getElementById('play-btn');
-        const resultsSection = document.getElementById('results-section');
-        const chordContainer = document.getElementById('chord-container');
-        const theoryTipsSection = document.getElementById('theory-tips');
-        // Initialize Tone.js
-        function initAudio() {
-            synth = new Tone.PolySynth(Tone.Synth).toDestination();
-            synth.volume.value = -10;
-        }
-        // Translate the UI
-        function translateUI(lang) {
-            const translation = translations[lang];
-            document.getElementById('main-title').textContent = translation.title;
-            document.getElementById('main-subtitle').textContent = translation.subtitle;
-            document.getElementById('genre-label').textContent = translation.genreLabel;
-            document.getElementById('key-label').textContent = translation.keyLabel;
-            document.getElementById('generate-text').textContent = translation.generateText;
-            document.getElementById('progression-label').textContent = translation.progressionLabel;
-            document.getElementById('play-text').textContent = translation.playText;
-            document.getElementById('save-text').textContent = translation.saveText;
-            document.getElementById('share-text').textContent = translation.shareText;
-            document.getElementById('export-text').textContent = translation.exportText;
-            document.getElementById('tips-title').textContent = translation.tipsTitle;
-            document.getElementById('tips-content').textContent = translation.tipsContent;
-            document.getElementById('footer-text').innerHTML = translation.footer;
-            // Update chord names if we have a progression displayed
-            if (currentChords.length > 0) {
-                renderChords(currentChords);
-            }
-        }
-        // Generate a chord progression
-        function generateProgression() {
-            const baseProgression = progressions[currentGenre];
-            // Transpose to selected key
-            const keyIndex = ['C', 'D', 'E', 'F', 'G', 'A', 'B'].indexOf(currentKey);
-            const transposedChords = baseProgression.map(chord => {
-                return transposeChord(chord, keyIndex);
-            });
-            currentChords = transposedChords;
-            renderChords(transposedChords);
-            // Show results section
-            resultsSection.classList.remove('hidden');
-            // Show music theory tips if available
-            if (theoryTips[currentGenre] && theoryTips[currentGenre][currentLanguage]) {
-                document.getElementById('tips-content').textContent = theoryTips[currentGenre][currentLanguage];
-                theoryTipsSection.classList.remove('hidden');
-            } else {
-                theoryTipsSection.classList.add('hidden');
             }
-            // Scroll to results
-            resultsSection.scrollIntoView({ behavior: 'smooth' });
-        }
-        // Transpose a chord to a new key
-        function transposeChord(chord, semitones) {
-            const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
-            const flats = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'];
-            // Extract root note and quality
-            let root = chord.match(/^[A-G][#b]?/)[0];
-            const quality = chord.slice(root.length);
-            // Find current index
-            let currentIndex = notes.indexOf(root);
-            if (currentIndex === -1) currentIndex = flats.indexOf(root);
-            // Calculate new index
-            let newIndex = (currentIndex + semitones) % 12;
-            if (newIndex < 0) newIndex += 12;
-            // Get new root (prefer sharps for simplicity)
-            const newRoot = notes[newIndex];
-            return newRoot + quality;
-        }
-        // Render chords to the UI
-        function renderChords(chords) {
-            chordContainer.innerHTML = '';
-            chords.forEach((chord, index) => {
-                const chordCard = document.createElement('div');
-                chordCard.className = 'chord-card bg-gray-800 rounded-lg p-6 text-center border border-gray-700';
-                // Get translated chord name
-                const translatedChord = chordTranslations[currentLanguage][chord.replace(/[0-9]/g, '')] || chord;
-                chordCard.innerHTML = `
-                    <div class="text-5xl font-bold mb-2 text-indigo-400">${translatedChord}</div>
-                    <div class="text-sm text-gray-400">${getRomanNumeral(chord, currentKey)}</div>
-                    <button data-index="${index}" class="mt-4 px-3 py-1 rounded bg-gray-700 hover:bg-gray-600 text-sm play-chord-btn">
-                        <i class="fas fa-volume-up mr-1"></i>
-                        <span>${translations[currentLanguage].playText || 'Play'}</span>
-                    </button>
-                `;
-                chordContainer.appendChild(chordCard);
-            });
-            // Add event listeners to chord play buttons
-            document.querySelectorAll('.play-chord-btn').forEach(btn => {
-                btn.addEventListener('click', function() {
-                    const index = parseInt(this.getAttribute('data-index'));
-                    playChord(currentChords[index]);
-                    // Add visual feedback
-                    const chordCard = this.closest('.chord-card');
-                    chordCard.classList.add('chord-playing');
-                    setTimeout(() => {
-                        chordCard.classList.remove('chord-playing');
-                    }, 1000);
-                });
-            });
-        }
-        // Get Roman numeral for a chord
-        function getRomanNumeral(chord, key) {
-            const root = chord.match(/^[A-G][#b]?/)[0];
-            const scale = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
-            const keyIndex = scale.indexOf(key[0]);
-            const rootIndex = scale.indexOf(root[0]);
-            let distance = (rootIndex - keyIndex + 7) % 7;
-            const numerals = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII'];
-            return numerals[distance];
-        }
-        // Play a single chord
-        function playChord(chord) {
-            if (!synth) initAudio();
-            // Parse chord to get notes
-            const notes = getChordNotes(chord);
-            // Play the chord
-            synth.triggerAttackRelease(notes, "2n");
         }
-        // Play the entire progression
-        function playProgression() {
-            if (isPlaying) {
-                // Stop playback
-                Tone.Transport.cancel();
-                isPlaying = false;
-                playBtn.innerHTML = `<i class="fas fa-play mr-2"></i><span>${translations[currentLanguage].playText || 'Play'}</span>`;
-                return;
-            }
-            if (!synth) initAudio();
-            isPlaying = true;
-            playBtn.innerHTML = `<i class="fas fa-stop mr-2"></i><span>${translations[currentLanguage].playText || 'Stop'}</span>`;
-            // Start Tone.js transport
-            Tone.start();
-            Tone.Transport.cancel();
-            Tone.Transport.bpm.value = 90;
-            let time = 0;
-            currentChords.forEach((chord, i) => {
-                const notes = getChordNotes(chord);
-                // Play chord
-                Tone.Transport.schedule(time => {
-                    synth.triggerAttackRelease(notes, "2n", time);
-                    // Highlight the playing chord
-                    const chordCards = document.querySelectorAll('.chord-card');
-                    chordCards.forEach(card => card.classList.remove('chord-playing'));
-                    chordCards[i].classList.add('chord-playing');
-                }, time);
-                time += 1; // 1 measure per chord
-            });
-            // Stop highlighting when done
-            Tone.Transport.schedule(time => {
-                document.querySelectorAll('.chord-card').forEach(card => {
-                    card.classList.remove('chord-playing');
-                });
-                isPlaying = false;
-                playBtn.innerHTML = `<i class="fas fa-play mr-2"></i><span>${translations[currentLanguage].playText || 'Play'}</span>`;
-            }, time);
-            Tone.Transport.start();
         }
-        // Get notes for a chord
-        function getChordNotes(chord) {
-            const chordMap = {
-                'C': ['C4', 'E4', 'G4'],
-                'Cm': ['C4', 'Eb4', 'G4'],
-                'C7': ['C4', 'E4', 'G4', 'Bb4'],
-                'D': ['D4', 'F#4', 'A4'],
-                'Dm': ['D4', 'F4', 'A4'],
-                'D7': ['D4', 'F#4', 'A4', 'C5'],
-                'E': ['E4', 'G#4', 'B4'],
-                'Em': ['E4', 'G4', 'B4'],
-                'E7': ['E4', 'G#4', 'B4', 'D5'],
-                'F': ['F4', 'A4', 'C5'],
-                'Fm': ['F4', 'Ab4', 'C5'],
-                'F7': ['F4', 'A4', 'C5', 'Eb5'],
-                'G': ['G4', 'B4', 'D5'],
-                'Gm': ['G4', 'Bb4', 'D5'],
-                'G7': ['G4', 'B4', 'D5', 'F5'],
-                'A': ['A4', 'C#5', 'E5'],
-                'Am': ['A4', 'C5', 'E5'],
-                'A7': ['A4', 'C#5', 'E5', 'G5'],
-                'B': ['B4', 'D#5', 'F#5'],
-                'Bm': ['B4', 'D5', 'F#5'],
-                'B7': ['B4', 'D#5', 'F#5', 'A5'],
-                'Bb': ['Bb4', 'D5', 'F5'],
-                'C#m': ['C#4', 'E4', 'G#4'],
-                'F#m': ['F#4', 'A4', 'C#5']
-            };
-            return chordMap[chord] || ['C4', 'E4', 'G4']; // Default to C major if chord not found
-        }
-        // Event listeners
-        languageSelector.addEventListener('change', function() {
-            currentLanguage = this.value;
-            translateUI(currentLanguage);
-        });
-        genreButtons.forEach(btn => {
-            btn.addEventListener('click', function() {
-                // Update active genre button
-                genreButtons.forEach(b => {
-                    b.classList.remove('bg-indigo-700', 'text-indigo-100');
-                    const genreClass = {
-                        pop: 'bg-indigo-900',
-                        rock: 'bg-gray-700',
-                        jazz: 'bg-amber-900',
-                        blues: 'bg-blue-900',
-                        classical: 'bg-purple-900',
-                        electronic: 'bg-pink-900',
-                        flamenco: 'bg-red-900',
-                        reggae: 'bg-green-900'
-                    }[b.dataset.genre];
-                    b.classList.add(genreClass);
-                });
-                this.classList.remove('bg-indigo-900', 'bg-gray-700', 'bg-amber-900', 'bg-blue-900', 'bg-purple-900', 'bg-pink-900', 'bg-red-900', 'bg-green-900');
-                this.classList.add('bg-indigo-700', 'text-indigo-100');
-                currentGenre = this.dataset.genre;
-            });
-        });
-        keyButtons.forEach(btn => {
-            btn.addEventListener('click', function() {
-                keyButtons.forEach(b => b.classList.remove('bg-indigo-600', 'text-white'));
-                this.classList.add('bg-indigo-600', 'text-white');
-                currentKey = this.dataset.key;
-            });
-        });
-        generateBtn.addEventListener('click', generateProgression);
-        playBtn.addEventListener('click', playProgression);
-        // Initialize
-        translateUI(currentLanguage);
-        genreButtons[0].click(); // Select first genre by default
-        keyButtons[0].click(); // Select first key by default
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=zama1/harmonygen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <!DOCTYPE html>
+<html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Turf Pro - Analyse Quinté+</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #1e3a8a 0%, #065f46 100%);
         }
+        .horse-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
         }
+        .confidence-bar {
+            transition: width 0.5s ease-in-out;
         }
+        .pulse {
+            animation: pulse 2s infinite;
         }
         @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.6; }
+            100% { opacity: 1; }
         }
     </style>
 </head>
+<body class="bg-gray-100 font-sans">
+    <!-- Header -->
+    <header class="gradient-bg text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center space-x-4">
+                    <i class="fas fa-horse-head text-3xl"></i>
+                    <h1 class="text-2xl font-bold">Turf Pro Analyzer</h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <div class="relative">
+                        <select class="bg-blue-900 text-white px-4 py-2 rounded-lg appearance-none pr-8">
+                            <option>Français</option>
+                            <option>English</option>
+                            <option>Español</option>
+                        </select>
+                        <i class="fas fa-chevron-down absolute right-3 top-3 text-xs"></i>
+                    </div>
+                    <button class="bg-yellow-500 hover:bg-yellow-600 text-blue-900 font-bold px-4 py-2 rounded-lg flex items-center">
+                        <i class="fas fa-crown mr-2"></i> Premium
+                    </button>
+                </div>
+            </div>
         </div>
     </header>
     <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Race Info -->
+        <div class="bg-white rounded-xl shadow-md p-6 mb-8">
+            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
+                <div>
+                    <h2 class="text-2xl font-bold text-gray-800">Quinté+ du 10/04/2024</h2>
+                    <p class="text-gray-600 flex items-center mt-2">
+                        <i class="fas fa-map-marker-alt mr-2 text-blue-600"></i> Hippodrome de Vincennes
+                        <span class="mx-4">|</span>
+                        <i class="fas fa-clock mr-2 text-blue-600"></i> Départ à 15:25
+                        <span class="mx-4">|</span>
+                        <i class="fas fa-ruler mr-2 text-blue-600"></i> 2,150 mètres
+                    </p>
+                </div>
+                <div class="mt-4 md:mt-0">
+                    <div class="flex items-center bg-blue-50 rounded-lg p-3">
+                        <div class="mr-4">
+                            <div class="text-sm text-gray-500">État de la piste</div>
+                            <div class="font-bold flex items-center">
+                                <i class="fas fa-cloud-sun mr-2 text-yellow-500"></i> Bonne
+                            </div>
+                        </div>
+                        <div class="mr-4">
+                            <div class="text-sm text-gray-500">Météo</div>
+                            <div class="font-bold flex items-center">
+                                <i class="fas fa-temperature-low mr-2 text-blue-400"></i> 18°C
+                            </div>
+                        </div>
+                        <div>
+                            <div class="text-sm text-gray-500">Mise à jour</div>
+                            <div class="font-bold flex items-center">
+                                <i class="fas fa-sync-alt mr-2 text-green-500"></i> 12:45
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
+            <!-- Alert -->
+            <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 mb-6">
+                <div class="flex">
+                    <div class="flex-shrink-0">
+                        <i class="fas fa-exclamation-circle text-yellow-500"></i>
+                    </div>
+                    <div class="ml-3">
+                        <p class="text-sm text-yellow-700">
+                            <span class="font-bold">Alerte :</span> Le cheval n°8 "Galopin" a été déclaré non-partant. Mise à jour des cotes en cours.
+                        </p>
+                    </div>
                 </div>
             </div>
             <!-- Generate Button -->
+            <div class="flex justify-center mb-8">
+                <button id="generateBtn" class="gradient-bg hover:opacity-90 text-white font-bold py-3 px-8 rounded-full text-lg flex items-center pulse">
+                    <i class="fas fa-magic mr-3"></i> Générer l'Analyse Pro
                 </button>
             </div>
+            <!-- Horses Table -->
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">N°</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cheval</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jockey</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Entraîneur</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cote</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Confiance</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Conseils</th>
+                        </tr>
+                    </thead>
+                    <tbody id="horsesTable" class="bg-white divide-y divide-gray-200">
+                        <!-- Will be populated by JavaScript -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <!-- Analysis Results -->
+        <div id="analysisResults" class="hidden">
+            <!-- Top 5 Horses -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+                <div class="bg-white rounded-xl shadow-md p-6">
+                    <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
+                        <i class="fas fa-trophy mr-3 text-yellow-500"></i> Top 5 Chevaux
+                    </h3>
+                    <div class="space-y-4">
+                        <div class="flex items-center p-3 bg-blue-50 rounded-lg">
+                            <div class="text-2xl font-bold text-blue-800 mr-4">5</div>
+                            <div>
+                                <div class="font-bold">Fuego</div>
+                                <div class="text-sm text-gray-600">A. Crastus / M. Lelong</div>
+                            </div>
+                            <div class="ml-auto bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-bold">
+                                32% victoire
+                            </div>
+                        </div>
+                        <div class="flex items-center p-3 bg-green-50 rounded-lg">
+                            <div class="text-2xl font-bold text-green-800 mr-4">2</div>
+                            <div>
+                                <div class="font-bold">Hasting</div>
+                                <div class="text-sm text-gray-600">P. Caro / L. Dupon</div>
+                            </div>
+                            <div class="ml-auto bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-bold">
+                                28% victoire
+                            </div>
+                        </div>
+                        <div class="flex items-center p-3 bg-yellow-50 rounded-lg">
+                            <div class="text-2xl font-bold text-yellow-800 mr-4">7</div>
+                            <div>
+                                <div class="font-bold">Viking</div>
+                                <div class="text-sm text-gray-600">M. Dor / F. Bress</div>
+                            </div>
+                            <div class="ml-auto bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-bold">
+                                25% victoire
+                            </div>
+                        </div>
+                        <div class="flex items-center p-3 bg-purple-50 rounded-lg">
+                            <div class="text-2xl font-bold text-purple-800 mr-4">1</div>
+                            <div>
+                                <div class="font-bold">Eclair</div>
+                                <div class="text-sm text-gray-600">J. Moulin / R. Duval</div>
+                            </div>
+                            <div class="ml-auto bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-bold">
+                                22% victoire
+                            </div>
+                        </div>
+                        <div class="flex items-center p-3 bg-indigo-50 rounded-lg">
+                            <div class="text-2xl font-bold text-indigo-800 mr-4">12</div>
+                            <div>
+                                <div class="font-bold">Tonnerre</div>
+                                <div class="text-sm text-gray-600">L. Petit / G. Martin</div>
+                            </div>
+                            <div class="ml-auto bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-bold">
+                                18% victoire
+                            </div>
+                        </div>
+                    </div>
                 </div>
+                <!-- Recommended Bets -->
+                <div class="bg-white rounded-xl shadow-md p-6">
+                    <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
+                        <i class="fas fa-coins mr-3 text-green-500"></i> Combinaisons Recommandées
+                    </h3>
+                    <div class="space-y-4">
+                        <div class="p-4 bg-gradient-to-r from-blue-50 to-green-50 rounded-lg border border-blue-100">
+                            <h4 class="font-bold text-blue-800 mb-2">Quinté+</h4>
+                            <div class="flex items-center mb-2">
+                                <div class="text-sm text-gray-600 mr-3">Base :</div>
+                                <div class="flex space-x-2">
+                                    <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full font-bold">5</span>
+                                    <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full font-bold">2</span>
+                                </div>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="text-sm text-gray-600 mr-3">Outsiders :</div>
+                                <div class="flex space-x-2">
+                                    <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full font-bold">7</span>
+                                    <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full font-bold">1</span>
+                                    <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full font-bold">12</span>
+                                </div>
+                            </div>
+                            <div class="mt-3 text-sm text-gray-700">
+                                <i class="fas fa-lightbulb text-yellow-500 mr-1"></i> Jeu conseillé : 2-5-7-1-12
+                            </div>
+                        </div>
+                        <div class="p-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg border border-purple-100">
+                            <h4 class="font-bold text-purple-800 mb-2">Tiercé</h4>
+                            <div class="flex items-center mb-2">
+                                <div class="text-sm text-gray-600 mr-3">Sélection :</div>
+                                <div class="flex space-x-2">
+                                    <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full font-bold">5</span>
+                                    <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full font-bold">2</span>
+                                    <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full font-bold">7</span>
+                                </div>
+                            </div>
+                            <div class="mt-3 text-sm text-gray-700">
+                                <i class="fas fa-lightbulb text-yellow-500 mr-1"></i> Ordre probable : 5-2-7
+                            </div>
+                        </div>
+                        <div class="p-4 bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg border border-yellow-100">
+                            <h4 class="font-bold text-yellow-800 mb-2">Simple Gagnant</h4>
+                            <div class="flex items-center">
+                                <div class="text-sm text-gray-600 mr-3">Meilleur choix :</div>
+                                <div class="flex space-x-2">
+                                    <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full font-bold">5</span>
+                                    <span class="text-sm text-gray-600">(Fuego)</span>
+                                </div>
+                            </div>
+                            <div class="mt-3 text-sm text-gray-700">
+                                <i class="fas fa-lightbulb text-yellow-500 mr-1"></i> Cote estimée : 4.5/1
+                            </div>
+                        </div>
+                    </div>
                 </div>
+            </div>
+            <!-- Performance Charts -->
+            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
+                <h3 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
+                    <i class="fas fa-chart-line mr-3 text-blue-500"></i> Analyse de Performance
+                </h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    <div>
+                        <h4 class="font-bold text-gray-700 mb-4">Top 3 Chevaux - Dernières Courses</h4>
+                        <div class="bg-gray-50 p-4 rounded-lg">
+                            <div class="flex items-center justify-between mb-3">
+                                <div class="text-sm font-medium text-gray-700">Fuego (n°5)</div>
+                                <div class="text-xs text-gray-500">5 dernières courses</div>
+                            </div>
+                            <div class="flex space-x-1 mb-6">
+                                <div class="h-8 w-full bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">1</div>
+                                <div class="h-8 w-full bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">2</div>
+                                <div class="h-8 w-full bg-yellow-500 rounded flex items-center justify-center text-white text-xs font-bold">4</div>
+                                <div class="h-8 w-full bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">1</div>
+                                <div class="h-8 w-full bg-red-500 rounded flex items-center justify-center text-white text-xs font-bold">7</div>
+                            </div>
+                            <div class="flex items-center justify-between mb-3">
+                                <div class="text-sm font-medium text-gray-700">Hasting (n°2)</div>
+                                <div class="text-xs text-gray-500">5 dernières courses</div>
+                            </div>
+                            <div class="flex space-x-1 mb-6">
+                                <div class="h-8 w-full bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">2</div>
+                                <div class="h-8 w-full bg-yellow-500 rounded flex items-center justify-center text-white text-xs font-bold">3</div>
+                                <div class="h-8 w-full bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">1</div>
+                                <div class="h-8 w-full bg-yellow-500 rounded flex items-center justify-center text-white text-xs font-bold">5</div>
+                                <div class="h-8 w-full bg-red-500 rounded flex items-center justify-center text-white text-xs font-bold">8</div>
+                            </div>
+                            <div class="flex items-center justify-between mb-3">
+                                <div class="text-sm font-medium text-gray-700">Viking (n°7)</div>
+                                <div class="text-xs text-gray-500">5 dernières courses</div>
+                            </div>
+                            <div class="flex space-x-1">
+                                <div class="h-8 w-full bg-yellow-500 rounded flex items-center justify-center text-white text-xs font-bold">3</div>
+                                <div class="h-8 w-full bg-red-500 rounded flex items-center justify-center text-white text-xs font-bold">6</div>
+                                <div class="h-8 w-full bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">2</div>
+                                <div class="h-8 w-full bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">1</div>
+                                <div class="h-8 w-full bg-yellow-500 rounded flex items-center justify-center text-white text-xs font-bold">4</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <h4 class="font-bold text-gray-700 mb-4">Facteurs Clés de Sélection</h4>
+                        <div class="space-y-4">
+                            <div>
+                                <div class="flex justify-between mb-1">
+                                    <span class="text-sm font-medium text-gray-700">Performance sur distance similaire</span>
+                                    <span class="text-sm font-medium text-blue-700">87%</span>
+                                </div>
+                                <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                    <div class="bg-blue-600 h-2.5 rounded-full" style="width: 87%"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between mb-1">
+                                    <span class="text-sm font-medium text-gray-700">Taux de réussite jockey/entraîneur</span>
+                                    <span class="text-sm font-medium text-green-700">78%</span>
+                                </div>
+                                <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                    <div class="bg-green-600 h-2.5 rounded-full" style="width: 78%"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between mb-1">
+                                    <span class="text-sm font-medium text-gray-700">Adaptation à l'état de la piste</span>
+                                    <span class="text-sm font-medium text-yellow-700">65%</span>
+                                </div>
+                                <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                    <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 65%"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between mb-1">
+                                    <span class="text-sm font-medium text-gray-700">Tendance des parieurs</span>
+                                    <span class="text-sm font-medium text-purple-700">72%</span>
+                                </div>
+                                <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                    <div class="bg-purple-600 h-2.5 rounded-full" style="width: 72%"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Export & Share -->
+            <div class="bg-white rounded-xl shadow-md p-6">
+                <h3 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
+                    <i class="fas fa-share-alt mr-3 text-green-500"></i> Exporter & Partager
+                </h3>
+                <div class="flex flex-wrap gap-4">
+                    <button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg flex items-center">
+                        <i class="fas fa-file-pdf mr-2"></i> PDF
                     </button>
+                    <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center">
+                        <i class="fas fa-envelope mr-2"></i> Email
                     </button>
+                    <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg flex items-center">
+                        <i class="fab fa-whatsapp mr-2"></i> WhatsApp
+                    </button>
+                    <button class="bg-gray-800 hover:bg-black text-white px-4 py-2 rounded-lg flex items-center">
+                        <i class="fas fa-print mr-2"></i> Imprimer
                     </button>
                 </div>
             </div>
         </div>
     </main>
     <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-8">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Turf Pro Analyzer</h3>
+                    <p class="text-gray-400 text-sm">
+                        L'outil professionnel pour analyser les courses PMU et optimiser vos chances de gagner.
+                    </p>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Navigation</h3>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="#" class="hover:text-white">Accueil</a></li>
+                        <li><a href="#" class="hover:text-white">Historique</a></li>
+                        <li><a href="#" class="hover:text-white">Abonnements</a></li>
+                        <li><a href="#" class="hover:text-white">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Légal</h3>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="#" class="hover:text-white">CGU</a></li>
+                        <li><a href="#" class="hover:text-white">Confidentialité</a></li>
+                        <li><a href="#" class="hover:text-white">Mentions légales</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Nous suivre</h3>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
+                © 2024 Turf Pro Analyzer. Tous droits réservés.
+            </div>
+        </div>
     </footer>
     <script>
+        // Sample horse data
+        const horses = [
+            { number: 1, name: "Eclair", jockey: "J. Moulin", trainer: "R. Duval", odds: "12/1", confidence: 70, tips: "Bon départ mais fatigue en fin de course" },
+            { number: 2, name: "Hasting", jockey: "P. Caro", trainer: "L. Dupon", odds: "5/1", confidence: 85, tips: "💎 Bon outsider" },
+            { number: 3, name: "Soleil", jockey: "A. Blanc", trainer: "E. Rouge", odds: "8/1", confidence: 65, tips: "Performances irrégulières" },
+            { number: 4, name: "Vent", jockey: "M. Noir", trainer: "S. Vert", odds: "15/1", confidence: 50, tips: "Éviter, mauvaises conditions" },
+            { number: 5, name: "Fuego", jockey: "A. Crastus", trainer: "M. Lelong", odds: "3/1", confidence: 90, tips: "🔥 Base Solide" },
+            { number: 6, name: "Lune", jockey: "T. Gris", trainer: "V. Bleu", odds: "20/1", confidence: 40, tips: "Faible sur cette distance" },
+            { number: 7, name: "Viking", jockey: "M. Dor", trainer: "F. Bress", odds: "6/1", confidence: 80, tips: "Risque en fin de course" },
+            { number: 8, name: "Galopin", jockey: "N/A", trainer: "N/A", odds: "N/P", confidence: 0, tips: "Non-partant" },
+            { number: 9, name: "Flamme", jockey: "D. Jaune", trainer: "P. Rose", odds: "10/1", confidence: 60, tips: "Peut surprendre" },
+            { number: 10, name: "Glacier", jockey: "E. Froid", trainer: "C. Chaud", odds: "25/1", confidence: 30, tips: "À éviter" },
+            { number: 11, name: "Tempête", jockey: "O. Orage", trainer: "L. Arc", odds: "18/1", confidence: 45, tips: "Performances moyennes" },
+            { number: 12, name: "Tonnerre", jockey: "L. Petit", trainer: "G. Martin", odds: "9/1", confidence: 75, tips: "Bon outsider" }
+        ];
+        // Populate horses table
+        const horsesTable = document.getElementById('horsesTable');
+        horses.forEach(horse => {
+            const row = document.createElement('tr');
+            row.className = horse.number % 2 === 0 ? 'bg-gray-50' : 'bg-white';
+            // Confidence stars
+            let stars = '';
+            const starCount = Math.floor(horse.confidence / 20);
+            for (let i = 0; i < 5; i++) {
+                if (i < starCount) {
+                    stars += '<i class="fas fa-star text-yellow-500"></i>';
+                } else {
+                    stars += '<i class="far fa-star text-yellow-500"></i>';
+                }
             }
+            // Confidence bar
+            const confidenceBar = `
+                <div class="w-full bg-gray-200 rounded-full h-2">
+                    <div class="confidence-bar h-2 rounded-full ${getConfidenceColor(horse.confidence)}" style="width: ${horse.confidence}%"></div>
+                </div>
+                <div class="text-xs text-gray-500 mt-1">${horse.confidence}%</div>
+            `;
+            row.innerHTML = `
+                <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">${horse.number}</td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                        <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
+                            <i class="fas fa-horse text-blue-600"></i>
+                        </div>
+                        <div class="ml-4">
+                            <div class="text-sm font-medium text-gray-900">${horse.name}</div>
+                        </div>
+                    </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${horse.jockey}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${horse.trainer}</td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getOddsColor(horse.odds)}">
+                        ${horse.odds}
+                    </span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="w-24">
+                        ${confidenceBar}
+                    </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${horse.tips}</td>
+            `;
+            horsesTable.appendChild(row);
+        });
+        // Generate analysis button
+        document.getElementById('generateBtn').addEventListener('click', function() {
+            this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analyse en cours...';
+            // Simulate analysis delay
+            setTimeout(() => {
+                this.classList.remove('pulse');
+                this.innerHTML = '<i class="fas fa-check mr-2"></i> Analyse terminée';
+                this.classList.add('bg-green-500');
+                // Show results
+                document.getElementById('analysisResults').classList.remove('hidden');
+                // Scroll to results
+                document.getElementById('analysisResults').scrollIntoView({ behavior: 'smooth' });
+            }, 2000);
+        });
+        // Helper functions
+        function getConfidenceColor(confidence) {
+            if (confidence >= 80) return 'bg-green-500';
+            if (confidence >= 60) return 'bg-blue-500';
+            if (confidence >= 40) return 'bg-yellow-500';
+            return 'bg-red-500';
         }
+        function getOddsColor(odds) {
+            if (odds === 'N/P') return 'bg-gray-200 text-gray-800';
+            const value = parseFloat(odds.split('/')[0]);
+            if (value <= 5) return 'bg-green-100 text-green-800';
+            if (value <= 10) return 'bg-blue-100 text-blue-800';
+            if (value <= 15) return 'bg-yellow-100 text-yellow-800';
+            return 'bg-red-100 text-red-800';
         }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=zama1/harmonygen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>