Spaces:

GabrielVidal
/

qui-fdes

Running

App Files Files Community

GabrielVidal commited on 19 days ago

Commit

1396c8e

verified ·

1 Parent(s): 47d7768

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +504 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Qui Fdes
-emoji: 🚀
-colorFrom: yellow
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: qui-fdes
+emoji: 🐳
+colorFrom: gray
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,504 @@
-<!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>Qui est-ce ? FDES Edition</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>
+        .card {
+            perspective: 1000px;
+            width: 150px;
+            height: 200px;
+            cursor: pointer;
+            transition: transform 0.3s;
+        }
+        .card:hover {
+            transform: scale(1.05);
+        }
+        .card-inner {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            transform-style: preserve-3d;
+            transition: transform 0.6s;
+        }
+        .card.flipped .card-inner {
+            transform: rotateY(180deg);
+        }
+        .card-front, .card-back {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+            border-radius: 10px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            padding: 10px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        }
+        .card-back {
+            transform: rotateY(180deg);
+            overflow-y: auto;
+        }
+        .card-icon {
+            font-size: 3rem;
+            margin-bottom: 10px;
+        }
+        .progress-bar {
+            height: 10px;
+            background-color: #e0e0e0;
+            border-radius: 5px;
+            overflow: hidden;
+        }
+        .progress-fill {
+            height: 100%;
+            background-color: #4CAF50;
+            transition: width 0.3s;
+        }
+        @media (max-width: 640px) {
+            .card {
+                width: 100px;
+                height: 150px;
+            }
+            .card-icon {
+                font-size: 2rem;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="text-center mb-8">
+            <h1 class="text-3xl md:text-4xl font-bold text-green-800 mb-2">Qui est-ce ? FDES Edition</h1>
+            <p class="text-gray-600">Découvrez les impacts environnementaux des produits de construction</p>
+            <div class="mt-4">
+                <span class="inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-semibold">
+                    <i class="fas fa-leaf mr-1"></i> Base INIES
+                </span>
+            </div>
+        </header>
+        <!-- Game Area -->
+        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
+            <!-- Game Info -->
+            <div class="flex flex-wrap justify-between items-center mb-6">
+                <div class="mb-4 sm:mb-0">
+                    <h2 class="text-xl font-semibold text-gray-800">Tour <span id="turn-count">1</span></h2>
+                    <p class="text-gray-600">Cartes restantes: <span id="remaining-cards">24</span></p>
+                </div>
+                <div class="w-full sm:w-auto">
+                    <div class="progress-bar">
+                        <div class="progress-fill" style="width: 100%"></div>
+                    </div>
+                    <p class="text-right text-sm text-gray-600 mt-1">Difficulté: Moyenne</p>
+                </div>
+            </div>
+            <!-- Cards Grid -->
+            <div id="cards-container" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-8">
+                <!-- Cards will be dynamically inserted here -->
+            </div>
+            <!-- Question Area -->
+            <div class="bg-gray-50 rounded-lg p-4">
+                <h3 class="text-lg font-semibold mb-3 text-gray-800">Poser une question</h3>
+                <div class="flex flex-wrap gap-3 mb-4">
+                    <button class="filter-btn bg-green-100 hover:bg-green-200 text-green-800 px-4 py-2 rounded-lg transition" data-filter="category">
+                        <i class="fas fa-tag mr-2"></i>Catégorie
+                    </button>
+                    <button class="filter-btn bg-blue-100 hover:bg-blue-200 text-blue-800 px-4 py-2 rounded-lg transition" data-filter="manufacturer">
+                        <i class="fas fa-industry mr-2"></i>Fabricant
+                    </button>
+                    <button class="filter-btn bg-purple-100 hover:bg-purple-200 text-purple-800 px-4 py-2 rounded-lg transition" data-filter="impact">
+                        <i class="fas fa-fire mr-2"></i>Impact environnemental
+                    </button>
+                    <button class="filter-btn bg-yellow-100 hover:bg-yellow-200 text-yellow-800 px-4 py-2 rounded-lg transition" data-filter="health">
+                        <i class="fas fa-heartbeat mr-2"></i>Santé
+                    </button>
+                </div>
+                <div id="question-options" class="hidden bg-white p-4 rounded-lg shadow-inner mb-4">
+                    <!-- Options will be dynamically inserted here -->
+                </div>
+                <div class="flex justify-between items-center">
+                    <button id="submit-guess" class="bg-red-500 hover:bg-red-600 text-white px-6 py-2 rounded-lg font-medium transition">
+                        <i class="fas fa-lightbulb mr-2"></i>Faire une supposition
+                    </button>
+                    <button id="submit-question" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg font-medium transition hidden">
+                        <i class="fas fa-question mr-2"></i>Poser la question
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Game Instructions -->
+        <div class="bg-white rounded-xl shadow-lg p-6">
+            <h2 class="text-xl font-semibold mb-4 text-gray-800">Comment jouer ?</h2>
+            <div class="grid md:grid-cols-3 gap-4">
+                <div class="bg-blue-50 p-4 rounded-lg">
+                    <div class="flex items-center mb-2">
+                        <div class="bg-blue-100 p-2 rounded-full mr-3">
+                            <i class="fas fa-1 text-blue-600"></i>
+                        </div>
+                        <h3 class="font-medium text-blue-800">Choisissez un produit</h3>
+                    </div>
+                    <p class="text-gray-700">Sélectionnez mentalement une carte produit sans la retourner.</p>
+                </div>
+                <div class="bg-green-50 p-4 rounded-lg">
+                    <div class="flex items-center mb-2">
+                        <div class="bg-green-100 p-2 rounded-full mr-3">
+                            <i class="fas fa-2 text-green-600"></i>
+                        </div>
+                        <h3 class="font-medium text-green-800">Répondez aux questions</h3>
+                    </div>
+                    <p class="text-gray-700">L'ordinateur pose des questions pour éliminer des options.</p>
+                </div>
+                <div class="bg-purple-50 p-4 rounded-lg">
+                    <div class="flex items-center mb-2">
+                        <div class="bg-purple-100 p-2 rounded-full mr-3">
+                            <i class="fas fa-3 text-purple-600"></i>
+                        </div>
+                        <h3 class="font-medium text-purple-800">Devinez le produit</h3>
+                    </div>
+                    <p class="text-gray-700">L'ordinateur tente de deviner votre produit en fonction des réponses.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Sample FDES data
+        const products = [
+            {
+                id: 1,
+                name: "Brique terre cuite",
+                category: "Maçonnerie",
+                manufacturer: "Terreal",
+                icon: "fas fa-home",
+                color: "bg-red-100",
+                textColor: "text-red-800",
+                co2: "0.8 kg CO₂ eq/m²",
+                health: "Aucun risque sanitaire connu",
+                recyclability: "90% recyclable"
+            },
+            {
+                id: 2,
+                name: "Béton cellulaire",
+                category: "Maçonnerie",
+                manufacturer: "Siporex",
+                icon: "fas fa-cubes",
+                color: "bg-gray-100",
+                textColor: "text-gray-800",
+                co2: "1.2 kg CO₂ eq/m²",
+                health: "Poussières irritantes",
+                recyclability: "70% recyclable"
+            },
+            {
+                id: 3,
+                name: "Panneau OSB",
+                category: "Bois",
+                manufacturer: "Kronoply",
+                icon: "fas fa-tree",
+                color: "bg-amber-100",
+                textColor: "text-amber-800",
+                co2: "0.5 kg CO₂ eq/m²",
+                health: "Colles sans formaldéhyde",
+                recyclability: "95% valorisable"
+            },
+            {
+                id: 4,
+                name: "Laine de verre",
+                category: "Isolation",
+                manufacturer: "Isover",
+                icon: "fas fa-igloo",
+                color: "bg-blue-100",
+                textColor: "text-blue-800",
+                co2: "1.5 kg CO₂ eq/m²",
+                health: "Protection respiratoire recommandée",
+                recyclability: "60% recyclable"
+            },
+            {
+                id: 5,
+                name: "Plaque de plâtre",
+                category: "Cloison",
+                manufacturer: "Placo",
+                icon: "fas fa-border-style",
+                color: "bg-white",
+                textColor: "text-gray-800",
+                co2: "0.7 kg CO₂ eq/m²",
+                health: "Poussières gypse non toxiques",
+                recyclability: "85% recyclable"
+            },
+            {
+                id: 6,
+                name: "Carrelage céramique",
+                category: "Revêtement",
+                manufacturer: "Novoceram",
+                icon: "fas fa-border-all",
+                color: "bg-indigo-100",
+                textColor: "text-indigo-800",
+                co2: "1.8 kg CO₂ eq/m²",
+                health: "Aucun risque sanitaire",
+                recyclability: "100% recyclable"
+            },
+            {
+                id: 7,
+                name: "Parquet chêne",
+                category: "Revêtement",
+                manufacturer: "Tarkett",
+                icon: "fas fa-border-all",
+                color: "bg-amber-100",
+                textColor: "text-amber-800",
+                co2: "0.9 kg CO₂ eq/m²",
+                health: "Traitement écologique",
+                recyclability: "100% biodégradable"
+            },
+            {
+                id: 8,
+                name: "Laine de roche",
+                category: "Isolation",
+                manufacturer: "Rockwool",
+                icon: "fas fa-igloo",
+                color: "bg-gray-100",
+                textColor: "text-gray-800",
+                co2: "1.6 kg CO₂ eq/m²",
+                health: "Protection respiratoire recommandée",
+                recyclability: "65% recyclable"
+            }
+        ];
+        // Game state
+        let remainingProducts = [...products];
+        let currentFilter = null;
+        let selectedProduct = null;
+        let turnCount = 1;
+        // Initialize the game
+        function initGame() {
+            renderCards();
+            updateGameInfo();
+            // Event listeners for filter buttons
+            document.querySelectorAll('.filter-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    currentFilter = this.dataset.filter;
+                    showQuestionOptions(currentFilter);
+                });
+            });
+            // Event listener for submit question button
+            document.getElementById('submit-question').addEventListener('click', processQuestion);
+            // Event listener for guess button
+            document.getElementById('submit-guess').addEventListener('click', makeGuess);
+        }
+        // Render all product cards
+        function renderCards() {
+            const container = document.getElementById('cards-container');
+            container.innerHTML = '';
+            remainingProducts.forEach(product => {
+                const card = document.createElement('div');
+                card.className = 'card';
+                card.dataset.id = product.id;
+                card.innerHTML = `
+                    <div class="card-inner">
+                        <div class="card-front ${product.color} ${product.textColor}">
+                            <div class="card-icon">
+                                <i class="${product.icon}"></i>
+                            </div>
+                            <div class="text-center font-medium text-sm">${product.category}</div>
+                        </div>
+                        <div class="card-back bg-white">
+                            <h4 class="font-bold text-center mb-2">${product.name}</h4>
+                            <div class="text-xs">
+                                <p><span class="font-semibold">Fabricant:</span> ${product.manufacturer}</p>
+                                <p><span class="font-semibold">CO₂:</span> ${product.co2}</p>
+                                <p><span class="font-semibold">Santé:</span> ${product.health}</p>
+                                <p><span class="font-semibold">Recyclage:</span> ${product.recyclability}</p>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                container.appendChild(card);
+            });
+        }
+        // Update game info display
+        function updateGameInfo() {
+            document.getElementById('remaining-cards').textContent = remainingProducts.length;
+            document.getElementById('turn-count').textContent = turnCount;
+            // Update progress bar
+            const progress = (remainingProducts.length / products.length) * 100;
+            document.querySelector('.progress-fill').style.width = `${progress}%`;
+        }
+        // Show question options based on filter
+        function showQuestionOptions(filter) {
+            const optionsContainer = document.getElementById('question-options');
+            optionsContainer.innerHTML = '';
+            optionsContainer.classList.remove('hidden');
+            document.getElementById('submit-question').classList.remove('hidden');
+            let options = [];
+            let questionText = '';
+            switch(filter) {
+                case 'category':
+                    questionText = 'Le produit appartient-il à la catégorie...';
+                    options = [...new Set(products.map(p => p.category))];
+                    break;
+                case 'manufacturer':
+                    questionText = 'Le produit est-il fabriqué par...';
+                    options = [...new Set(products.map(p => p.manufacturer))];
+                    break;
+                case 'impact':
+                    questionText = 'L\'impact CO₂ du produit est-il...';
+                    options = ['Faible (<1 kg CO₂ eq/m²)', 'Moyen (1-1.5 kg CO₂ eq/m²)', 'Élevé (>1.5 kg CO₂ eq/m²)'];
+                    break;
+                case 'health':
+                    questionText = 'Le produit présente-t-il...';
+                    options = ['Aucun risque sanitaire', 'Risques limités', 'Protection nécessaire'];
+                    break;
+            }
+            optionsContainer.innerHTML = `
+                <h4 class="font-medium mb-3">${questionText}</h4>
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                    ${options.map(opt => `
+                        <label class="flex items-center bg-gray-100 hover:bg-gray-200 rounded-lg p-3 cursor-pointer transition">
+                            <input type="radio" name="questionOption" value="${opt}" class="mr-2">
+                            ${opt}
+                        </label>
+                    `).join('')}
+                </div>
+            `;
+        }
+        // Process the selected question
+        function processQuestion() {
+            const selectedOption = document.querySelector('input[name="questionOption"]:checked');
+            if (!selectedOption) {
+                alert('Veuillez sélectionner une option');
+                return;
+            }
+            const optionValue = selectedOption.value;
+            let filteredProducts = [];
+            switch(currentFilter) {
+                case 'category':
+                    filteredProducts = remainingProducts.filter(p => p.category === optionValue);
+                    break;
+                case 'manufacturer':
+                    filteredProducts = remainingProducts.filter(p => p.manufacturer === optionValue);
+                    break;
+                case 'impact':
+                    if (optionValue.includes('Faible')) {
+                        filteredProducts = remainingProducts.filter(p => parseFloat(p.co2) < 1);
+                    } else if (optionValue.includes('Moyen')) {
+                        filteredProducts = remainingProducts.filter(p => parseFloat(p.co2) >= 1 && parseFloat(p.co2) <= 1.5);
+                    } else {
+                        filteredProducts = remainingProducts.filter(p => parseFloat(p.co2) > 1.5);
+                    }
+                    break;
+                case 'health':
+                    if (optionValue.includes('Aucun')) {
+                        filteredProducts = remainingProducts.filter(p => p.health.includes('Aucun'));
+                    } else if (optionValue.includes('limités')) {
+                        filteredProducts = remainingProducts.filter(p => !p.health.includes('Aucun') && !p.health.includes('Protection'));
+                    } else {
+                        filteredProducts = remainingProducts.filter(p => p.health.includes('Protection'));
+                    }
+                    break;
+            }
+            // Computer makes a guess if only one product remains
+            if (filteredProducts.length === 1) {
+                setTimeout(() => {
+                    alert(`L'ordinateur pense que vous avez sélectionné: ${filteredProducts[0].name}`);
+                    endGame(true);
+                }, 500);
+                return;
+            }
+            // If no products match, computer learns the answer was no
+            if (filteredProducts.length === 0) {
+                alert(`Aucun produit ne correspond à cette caractéristique. L'ordinateur élimine ces options.`);
+            } else {
+                remainingProducts = filteredProducts;
+                turnCount++;
+                updateGameInfo();
+                renderCards();
+            }
+            // Reset question UI
+            document.getElementById('question-options').classList.add('hidden');
+            document.getElementById('submit-question').classList.add('hidden');
+        }
+        // Player makes a guess
+        function makeGuess() {
+            if (remainingProducts.length === 0) {
+                alert('Aucun produit restant à deviner');
+                return;
+            }
+            const options = remainingProducts.map(p => p.name).join('\n');
+            const guess = prompt(`Faites votre supposition parmi ces produits:\n\n${options}`);
+            if (guess) {
+                const found = remainingProducts.find(p => p.name === guess);
+                if (found) {
+                    alert(`Correct! Vous avez deviné: ${guess}`);
+                    endGame(false);
+                } else {
+                    alert('Incorrect. Continuez à poser des questions.');
+                }
+            }
+        }
+        // End the game
+        function endGame(computerWon) {
+            if (computerWon) {
+                alert('L\'ordinateur a gagné ! Voulez-vous rejouer ?');
+            } else {
+                alert('Vous avez gagné ! Voulez-vous rejouer ?');
+            }
+            if (confirm('Nouvelle partie ?')) {
+                resetGame();
+            }
+        }
+        // Reset the game
+        function resetGame() {
+            remainingProducts = [...products];
+            turnCount = 1;
+            currentFilter = null;
+            selectedProduct = null;
+            document.getElementById('question-options').classList.add('hidden');
+            document.getElementById('submit-question').classList.add('hidden');
+            renderCards();
+            updateGameInfo();
+        }
+        // Initialize the game when page loads
+        window.addEventListener('DOMContentLoaded', initGame);
+    </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=GabrielVidal/qui-fdes" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>