Spaces:

Enoder
/

Mantis_game

Running

App Files Files Community

Enoder commited on Jan 29

Commit

c12162b

verified ·

1 Parent(s): 97c42b6

Update index.html

Browse files

Files changed (1) hide show

index.html +655 -19

index.html CHANGED Viewed

@@ -1,19 +1,655 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Devine la Mante | Jeu Géographique</title>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=Source+Sans+3:wght@300;400;600&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            --sepia: #f4f1e8;
+            --dark-sepia: #3d3526;
+            --accent-green: #4a7c59;
+            --accent-gold: #d4a574;
+            --shadow: rgba(61, 53, 38, 0.15);
+            --border: rgba(61, 53, 38, 0.2);
+        }
+        body {
+            font-family: 'Source Sans 3', sans-serif;
+            background: linear-gradient(135deg, #f4f1e8 0%, #e8e3d6 100%);
+            color: var(--dark-sepia);
+            overflow-x: hidden;
+            min-height: 100vh;
+        }
+        /* Texture overlay */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image:
+                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(61, 53, 38, 0.03) 2px, rgba(61, 53, 38, 0.03) 4px),
+                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(61, 53, 38, 0.03) 2px, rgba(61, 53, 38, 0.03) 4px);
+            pointer-events: none;
+            z-index: 1;
+            opacity: 0.3;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 2rem;
+            position: relative;
+            z-index: 2;
+        }
+        header {
+            text-align: center;
+            margin-bottom: 3rem;
+            animation: fadeInDown 1s ease;
+        }
+        h1 {
+            font-family: 'Crimson Pro', serif;
+            font-size: 3.5rem;
+            font-weight: 700;
+            color: var(--accent-green);
+            letter-spacing: -0.02em;
+            margin-bottom: 0.5rem;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+        }
+        .subtitle {
+            font-size: 1.1rem;
+            color: var(--dark-sepia);
+            opacity: 0.8;
+            font-style: italic;
+        }
+        .game-container {
+            display: grid;
+            grid-template-columns: 1fr 380px;
+            gap: 2rem;
+            animation: fadeInUp 1s ease 0.2s both;
+        }
+        .map-panel {
+            background: white;
+            border-radius: 16px;
+            box-shadow:
+                0 10px 40px var(--shadow),
+                inset 0 0 0 1px var(--border);
+            overflow: hidden;
+            position: relative;
+        }
+        .map-header {
+            background: linear-gradient(135deg, var(--accent-green) 0%, #5a8c69 100%);
+            color: white;
+            padding: 1.5rem 2rem;
+            font-family: 'Crimson Pro', serif;
+            font-size: 1.4rem;
+            font-weight: 600;
+            letter-spacing: 0.02em;
+        }
+        #map {
+            height: 600px;
+            width: 100%;
+            background: #a8c5d9;
+        }
+        .control-panel {
+            background: white;
+            border-radius: 16px;
+            box-shadow:
+                0 10px 40px var(--shadow),
+                inset 0 0 0 1px var(--border);
+            padding: 2rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+        }
+        .species-options {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+        }
+        .species-btn {
+            background: var(--sepia);
+            border: 2px solid var(--border);
+            padding: 1rem 1.25rem;
+            border-radius: 10px;
+            font-family: 'Crimson Pro', serif;
+            font-size: 1.05rem;
+            color: var(--dark-sepia);
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            text-align: left;
+            position: relative;
+            overflow: hidden;
+        }
+        .species-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(74, 124, 89, 0.1), transparent);
+            transition: left 0.5s;
+        }
+        .species-btn:hover {
+            background: white;
+            border-color: var(--accent-green);
+            transform: translateX(4px);
+            box-shadow: 0 4px 12px var(--shadow);
+        }
+        .species-btn:hover::before {
+            left: 100%;
+        }
+        .species-btn.correct {
+            background: var(--accent-green);
+            color: white;
+            border-color: var(--accent-green);
+            animation: correctPulse 0.6s ease;
+        }
+        .species-btn.incorrect {
+            background: #c54a4a;
+            color: white;
+            border-color: #c54a4a;
+            animation: shake 0.5s ease;
+        }
+        .hints-section {
+            border-top: 2px solid var(--border);
+            padding-top: 1.5rem;
+        }
+        .hint-btn {
+            background: linear-gradient(135deg, var(--accent-gold) 0%, #c49564 100%);
+            color: white;
+            border: none;
+            padding: 1rem 1.5rem;
+            border-radius: 10px;
+            font-family: 'Crimson Pro', serif;
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            width: 100%;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
+        }
+        .hint-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(212, 165, 116, 0.4);
+        }
+        .hint-btn:active {
+            transform: translateY(0);
+        }
+        .hint-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .hints-display {
+            margin-top: 1rem;
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+        }
+        .hint-item {
+            background: #fff9f0;
+            border-left: 4px solid var(--accent-gold);
+            padding: 1rem;
+            border-radius: 6px;
+            font-size: 0.95rem;
+            line-height: 1.6;
+            animation: slideInRight 0.4s ease;
+        }
+        .hint-label {
+            font-weight: 600;
+            color: var(--accent-green);
+            margin-bottom: 0.25rem;
+        }
+        .score-display {
+            background: linear-gradient(135deg, #f8f6f0 0%, #ede9dc 100%);
+            padding: 1.5rem;
+            border-radius: 10px;
+            text-align: center;
+            border: 2px solid var(--border);
+        }
+        .score-label {
+            font-family: 'Crimson Pro', serif;
+            font-size: 0.9rem;
+            color: var(--dark-sepia);
+            opacity: 0.7;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            margin-bottom: 0.5rem;
+        }
+        .score-value {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: var(--accent-green);
+            font-family: 'Crimson Pro', serif;
+        }
+        .next-btn {
+            background: var(--accent-green);
+            color: white;
+            border: none;
+            padding: 1rem 1.5rem;
+            border-radius: 10px;
+            font-family: 'Crimson Pro', serif;
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            width: 100%;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3);
+        }
+        .next-btn:hover {
+            background: #5a8c69;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(74, 124, 89, 0.4);
+        }
+        .next-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .result-message {
+            padding: 1.5rem;
+            border-radius: 10px;
+            text-align: center;
+            font-family: 'Crimson Pro', serif;
+            font-size: 1.2rem;
+            font-weight: 600;
+            animation: fadeIn 0.5s ease;
+        }
+        .result-message.correct {
+            background: rgba(74, 124, 89, 0.1);
+            color: var(--accent-green);
+            border: 2px solid var(--accent-green);
+        }
+        .result-message.incorrect {
+            background: rgba(197, 74, 74, 0.1);
+            color: #c54a4a;
+            border: 2px solid #c54a4a;
+        }
+        /* Animations */
+        @keyframes fadeInDown {
+            from {
+                opacity: 0;
+                transform: translateY(-30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @keyframes slideInRight {
+            from {
+                opacity: 0;
+                transform: translateX(-20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        @keyframes correctPulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(-10px); }
+            75% { transform: translateX(10px); }
+        }
+        /* Responsive */
+        @media (max-width: 1024px) {
+            .game-container {
+                grid-template-columns: 1fr;
+            }
+            h1 {
+                font-size: 2.5rem;
+            }
+            #map {
+                height: 500px;
+            }
+        }
+        /* Leaflet attribution styling */
+        .leaflet-control-attribution {
+            background: rgba(255, 255, 255, 0.8) !important;
+            font-size: 0.7rem !important;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🦗 Devine la Mante</h1>
+            <p class="subtitle">Identifie l'espèce selon sa distribution géographique</p>
+        </header>
+        <div class="game-container">
+            <div class="map-panel">
+                <div class="map-header">
+                    Distribution Mondiale des Occurrences
+                </div>
+                <div id="map"></div>
+            </div>
+            <div class="control-panel">
+                <div class="score-display">
+                    <div class="score-label">Score</div>
+                    <div class="score-value" id="score">0</div>
+                </div>
+                <div id="result-container"></div>
+                <div class="species-options" id="species-options">
+                    <!-- Options will be generated here -->
+                </div>
+                <div class="hints-section">
+                    <button class="hint-btn" id="hint-btn">
+                        💡 Demander un indice
+                    </button>
+                    <div class="hints-display" id="hints-display">
+                        <!-- Hints will appear here -->
+                    </div>
+                </div>
+                <button class="next-btn" id="next-btn" style="display: none;">
+                    Mante Suivante →
+                </button>
+            </div>
+        </div>
+    </div>
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script>
+        // Species data with taxonKeys and hints
+        const speciesData = [
+            {
+                name: "Mantis religiosa",
+                commonName: "Mante religieuse",
+                taxonKey: "144094823",
+                hints: [
+                    "Famille : Mantidae",
+                    "C'est l'espèce de mante la plus commune et répandue en Europe",
+                    "Son nom vient de sa posture caractéristique, pattes avant levées comme en prière"
+                ]
+            },
+            {
+                name: "Iris oratoria",
+                commonName: "Mante méditerranéenne",
+                taxonKey: "1404300",
+                hints: [
+                    "Famille : Tarachodidae",
+                    "Espèce méditerranéenne qui s'étend vers le nord",
+                    "Reconnaissable aux ocelles (taches en forme d'œil) sur ses ailes postérieures"
+                ]
+            },
+            {
+                name: "Hierodula patellifera",
+                commonName: "Mante asiatique géante",
+                taxonKey: "1405951",
+                hints: [
+                    "Famille : Mantidae",
+                    "Une des plus grandes espèces, originaire d'Asie du Sud-Est",
+                    "Très populaire en terrariophilie pour sa taille impressionnante"
+                ]
+            },
+            {
+                name: "Sphodromantis viridis",
+                commonName: "Mante africaine",
+                taxonKey: "7204692",
+                hints: [
+                    "Famille : Mantidae",
+                    "Espèce africaine de couleur verte caractéristique",
+                    "Robuste et facile à élever, très appréciée des éleveurs"
+                ]
+            },
+            {
+                name: "Blepharopsis mendica",
+                commonName: "Mante fleur égyptienne",
+                taxonKey: "1406697",
+                hints: [
+                    "Famille : Empusidae",
+                    "Originaire d'Afrique du Nord et du Moyen-Orient",
+                    "Connue pour ses superbes motifs et sa ressemblance avec une fleur"
+                ]
+            },
+            {
+                name: "Idolomantis diabolica",
+                commonName: "Mante fleur du diable",
+                taxonKey: "1406692",
+                hints: [
+                    "Famille : Empusidae",
+                    "Espèce africaine considérée comme la plus spectaculaire au monde",
+                    "Appelée 'du diable' pour son apparence impressionnante et ses cornes"
+                ]
+            }
+        ];
+        // Game state
+        let currentSpecies = null;
+        let score = 0;
+        let hintsRevealed = 0;
+        let answered = false;
+        let map = null;
+        let tileLayer = null;
+        // Initialize map
+        function initMap() {
+            map = L.map('map').setView([20, 0], 2);
+            // Base map layer
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '© OpenStreetMap contributors',
+                maxZoom: 18
+            }).addTo(map);
+        }
+        // Load species occurrences on map
+        function loadSpeciesOnMap(taxonKey) {
+            // Remove previous tile layer if exists
+            if (tileLayer) {
+                map.removeLayer(tileLayer);
+            }
+            // Add GBIF occurrence tile layer
+            tileLayer = L.tileLayer(
+                `https://api.gbif.org/v2/map/occurrence/density/{z}/{x}/{y}@1x.png?taxonKey=${taxonKey}&bin=hex&hexPerTile=100&style=classic.point`,
+                {
+                    attribution: '© GBIF',
+                    maxZoom: 18
+                }
+            );
+            tileLayer.addTo(map);
+        }
+        // Shuffle array
+        function shuffle(array) {
+            const shuffled = [...array];
+            for (let i = shuffled.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+            }
+            return shuffled;
+        }
+        // Start new round
+        function startNewRound() {
+            // Pick random species
+            currentSpecies = speciesData[Math.floor(Math.random() * speciesData.length)];
+            hintsRevealed = 0;
+            answered = false;
+            // Load map
+            loadSpeciesOnMap(currentSpecies.taxonKey);
+            // Clear hints
+            document.getElementById('hints-display').innerHTML = '';
+            document.getElementById('hint-btn').disabled = false;
+            // Clear result
+            document.getElementById('result-container').innerHTML = '';
+            // Generate options (correct + 3 random wrong ones)
+            const options = [currentSpecies];
+            const otherSpecies = speciesData.filter(s => s !== currentSpecies);
+            const shuffledOthers = shuffle(otherSpecies);
+            options.push(...shuffledOthers.slice(0, 3));
+            const shuffledOptions = shuffle(options);
+            // Render options
+            const optionsContainer = document.getElementById('species-options');
+            optionsContainer.innerHTML = shuffledOptions.map(species => `
+                <button class="species-btn" data-species="${species.name}">
+                    <strong>${species.commonName}</strong>
+                    <br><em>${species.name}</em>
+                </button>
+            `).join('');
+            // Add event listeners
+            document.querySelectorAll('.species-btn').forEach(btn => {
+                btn.addEventListener('click', handleAnswer);
+            });
+            // Hide next button
+            document.getElementById('next-btn').style.display = 'none';
+        }
+        // Handle answer
+        function handleAnswer(e) {
+            if (answered) return;
+            answered = true;
+            const selectedSpecies = e.currentTarget.dataset.species;
+            const isCorrect = selectedSpecies === currentSpecies.name;
+            // Disable all buttons
+            document.querySelectorAll('.species-btn').forEach(btn => {
+                btn.style.pointerEvents = 'none';
+                if (btn.dataset.species === currentSpecies.name) {
+                    btn.classList.add('correct');
+                } else if (btn.dataset.species === selectedSpecies && !isCorrect) {
+                    btn.classList.add('incorrect');
+                }
+            });
+            // Update score
+            if (isCorrect) {
+                const points = Math.max(3 - hintsRevealed, 1);
+                score += points;
+                document.getElementById('score').textContent = score;
+                document.getElementById('result-container').innerHTML = `
+                    <div class="result-message correct">
+                        ✓ Correct ! +${points} point${points > 1 ? 's' : ''}
+                    </div>
+                `;
+            } else {
+                document.getElementById('result-container').innerHTML = `
+                    <div class="result-message incorrect">
+                        ✗ Incorrect ! C'était ${currentSpecies.commonName}
+                    </div>
+                `;
+            }
+            // Show next button
+            document.getElementById('next-btn').style.display = 'block';
+            document.getElementById('hint-btn').disabled = true;
+        }
+        // Handle hint request
+        document.getElementById('hint-btn').addEventListener('click', () => {
+            if (hintsRevealed >= currentSpecies.hints.length || answered) return;
+            const hint = currentSpecies.hints[hintsRevealed];
+            const hintElement = document.createElement('div');
+            hintElement.className = 'hint-item';
+            hintElement.innerHTML = `
+                <div class="hint-label">Indice ${hintsRevealed + 1} :</div>
+                ${hint}
+            `;
+            document.getElementById('hints-display').appendChild(hintElement);
+            hintsRevealed++;
+            if (hintsRevealed >= currentSpecies.hints.length) {
+                document.getElementById('hint-btn').disabled = true;
+                document.getElementById('hint-btn').textContent = 'Tous les indices révélés';
+            }
+        });
+        // Handle next round
+        document.getElementById('next-btn').addEventListener('click', startNewRound);
+        // Initialize game
+        initMap();
+        startNewRound();
+    </script>
+</body>
+</html>