Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dictionnaire Pulaar Multilingue</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> | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| /* Animation for search */ | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| /* Custom transition for dictionary entries */ | |
| .entry-transition { | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- App Container --> | |
| <div class="max-w-md mx-auto bg-white min-h-screen shadow-lg overflow-hidden flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-4 shadow-md"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-book text-2xl"></i> | |
| <h1 class="text-xl font-bold">Pulaar Dictionary</h1> | |
| </div> | |
| <button class="p-2 rounded-full hover:bg-blue-700 transition"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| <!-- Language Selector --> | |
| <div class="mt-4 flex justify-center space-x-2"> | |
| <button id="lang-pulaar" class="lang-btn active bg-blue-500 text-white px-4 py-2 rounded-full font-medium">Pulaar</button> | |
| <button id="lang-french" class="lang-btn bg-white text-blue-600 px-4 py-2 rounded-full font-medium">Français</button> | |
| <button id="lang-english" class="lang-btn bg-white text-blue-600 px-4 py-2 rounded-full font-medium">English</button> | |
| </div> | |
| <!-- Search Bar --> | |
| <div class="mt-4 relative"> | |
| <input type="text" id="search-input" placeholder="Rechercher un mot..." | |
| class="w-full p-3 pl-10 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-400"> | |
| <i class="fas fa-search absolute left-3 top-3.5 text-gray-500"></i> | |
| <button id="voice-search" class="absolute right-3 top-3 text-blue-500"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 overflow-y-auto p-4"> | |
| <!-- Welcome Section --> | |
| <div id="welcome-section" class="text-center py-8"> | |
| <div class="pulse-animation inline-block mb-4"> | |
| <i class="fas fa-book-open text-6xl text-blue-500"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-2">Bienvenue!</h2> | |
| <p class="text-gray-600">Commencez à rechercher un mot dans le dictionnaire Pulaar-Français-Anglais</p> | |
| </div> | |
| <!-- Dictionary Results --> | |
| <div id="results-section" class="hidden"> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-3">Résultats de recherche</h3> | |
| <div id="results-container" class="space-y-4"> | |
| <!-- Results will be populated here --> | |
| </div> | |
| </div> | |
| <!-- Favorites Section --> | |
| <div id="favorites-section" class="mt-8 hidden"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="text-lg font-semibold text-gray-700">Favoris</h3> | |
| <button id="toggle-favorites" class="text-blue-500 text-sm">Tout voir</button> | |
| </div> | |
| <div id="favorites-container" class="grid grid-cols-2 gap-3"> | |
| <!-- Favorites will be populated here --> | |
| </div> | |
| </div> | |
| <!-- History Section --> | |
| <div id="history-section" class="mt-8 hidden"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="text-lg font-semibold text-gray-700">Historique</h3> | |
| <button id="clear-history" class="text-red-500 text-sm">Effacer</button> | |
| </div> | |
| <div id="history-container" class="space-y-2"> | |
| <!-- History will be populated here --> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Bottom Navigation --> | |
| <nav class="bg-white border-t border-gray-200 flex justify-around py-3"> | |
| <button class="nav-btn active text-blue-600 flex flex-col items-center"> | |
| <i class="fas fa-home text-xl"></i> | |
| <span class="text-xs mt-1">Accueil</span> | |
| </button> | |
| <button class="nav-btn text-gray-600 flex flex-col items-center"> | |
| <i class="fas fa-book text-xl"></i> | |
| <span class="text-xs mt-1">Dictionnaire</span> | |
| </button> | |
| <button class="nav-btn text-gray-600 flex flex-col items-center"> | |
| <i class="fas fa-heart text-xl"></i> | |
| <span class="text-xs mt-1">Favoris</span> | |
| </button> | |
| <button class="nav-btn text-gray-600 flex flex-col items-center"> | |
| <i class="fas fa-history text-xl"></i> | |
| <span class="text-xs mt-1">Historique</span> | |
| </button> | |
| </nav> | |
| </div> | |
| <!-- Modal for Word Details --> | |
| <div id="word-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50"> | |
| <div class="bg-white rounded-lg w-full max-w-md max-h-[80vh] overflow-y-auto"> | |
| <div class="sticky top-0 bg-white p-4 border-b flex justify-between items-center"> | |
| <h3 id="modal-word" class="text-xl font-bold"></h3> | |
| <button id="close-modal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-6"> | |
| <h4 class="font-semibold text-gray-700 mb-2">Pulaar</h4> | |
| <p id="modal-pulaar" class="text-gray-800"></p> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-semibold text-gray-700 mb-2">Français</h4> | |
| <p id="modal-french" class="text-gray-800"></p> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-semibold text-gray-700 mb-2">English</h4> | |
| <p id="modal-english" class="text-gray-800"></p> | |
| </div> | |
| <div class="flex justify-between items-center pt-4 border-t"> | |
| <button id="add-favorite" class="flex items-center text-blue-500"> | |
| <i class="far fa-heart mr-2"></i> Ajouter aux favoris | |
| </button> | |
| <button id="share-word" class="flex items-center text-gray-600"> | |
| <i class="fas fa-share-alt mr-2"></i> Partager | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Sample dictionary data | |
| const dictionary = [ | |
| { | |
| pulaar: "Jom", | |
| french: "Courage", | |
| english: "Courage", | |
| category: "Virtue" | |
| }, | |
| { | |
| pulaar: "Neddo", | |
| french: "Personne", | |
| english: "Person", | |
| category: "General" | |
| }, | |
| { | |
| pulaar: "Lingu", | |
| french: "Arbre", | |
| english: "Tree", | |
| category: "Nature" | |
| }, | |
| { | |
| pulaar: "Ndiyam", | |
| french: "Eau", | |
| english: "Water", | |
| category: "Nature" | |
| }, | |
| { | |
| pulaar: "Suudu", | |
| french: "Maison", | |
| english: "House", | |
| category: "Habitation" | |
| }, | |
| { | |
| pulaar: "Mawdo", | |
| french: "Grand", | |
| english: "Big", | |
| category: "Adjective" | |
| }, | |
| { | |
| pulaar: "Fijo", | |
| french: "Bon", | |
| english: "Good", | |
| category: "Adjective" | |
| }, | |
| { | |
| pulaar: "Yahde", | |
| french: "Aller", | |
| english: "Go", | |
| category: "Verb" | |
| }, | |
| { | |
| pulaar: "Aade", | |
| french: "Venir", | |
| english: "Come", | |
| category: "Verb" | |
| }, | |
| { | |
| pulaar: "Miɗo", | |
| french: "Moi", | |
| english: "Me", | |
| category: "Pronoun" | |
| } | |
| ]; | |
| // DOM Elements | |
| const searchInput = document.getElementById('search-input'); | |
| const resultsSection = document.getElementById('results-section'); | |
| const welcomeSection = document.getElementById('welcome-section'); | |
| const resultsContainer = document.getElementById('results-container'); | |
| const favoritesContainer = document.getElementById('favorites-container'); | |
| const historyContainer = document.getElementById('history-container'); | |
| const favoritesSection = document.getElementById('favorites-section'); | |
| const historySection = document.getElementById('history-section'); | |
| const langButtons = document.querySelectorAll('.lang-btn'); | |
| const navButtons = document.querySelectorAll('.nav-btn'); | |
| const wordModal = document.getElementById('word-modal'); | |
| const closeModal = document.getElementById('close-modal'); | |
| const modalWord = document.getElementById('modal-word'); | |
| const modalPulaar = document.getElementById('modal-pulaar'); | |
| const modalFrench = document.getElementById('modal-french'); | |
| const modalEnglish = document.getElementById('modal-english'); | |
| const addFavorite = document.getElementById('add-favorite'); | |
| const voiceSearch = document.getElementById('voice-search'); | |
| const clearHistory = document.getElementById('clear-history'); | |
| const toggleFavorites = document.getElementById('toggle-favorites'); | |
| // App state | |
| let currentLang = 'pulaar'; | |
| let favorites = JSON.parse(localStorage.getItem('favorites')) || []; | |
| let history = JSON.parse(localStorage.getItem('history')) || []; | |
| // Initialize the app | |
| function initApp() { | |
| updateFavoritesDisplay(); | |
| updateHistoryDisplay(); | |
| if (history.length > 0) { | |
| historySection.classList.remove('hidden'); | |
| } | |
| if (favorites.length > 0) { | |
| favoritesSection.classList.remove('hidden'); | |
| } | |
| } | |
| // Search function | |
| function searchDictionary(query) { | |
| if (!query.trim()) { | |
| resultsSection.classList.add('hidden'); | |
| welcomeSection.classList.remove('hidden'); | |
| return; | |
| } | |
| welcomeSection.classList.add('hidden'); | |
| resultsSection.classList.remove('hidden'); | |
| const results = dictionary.filter(item => { | |
| return item.pulaar.toLowerCase().includes(query.toLowerCase()) || | |
| item.french.toLowerCase().includes(query.toLowerCase()) || | |
| item.english.toLowerCase().includes(query.toLowerCase()); | |
| }); | |
| displayResults(results); | |
| // Add to history if not already there | |
| if (results.length > 0 && !history.includes(query.toLowerCase())) { | |
| history.unshift(query.toLowerCase()); | |
| if (history.length > 10) history.pop(); | |
| localStorage.setItem('history', JSON.stringify(history)); | |
| updateHistoryDisplay(); | |
| historySection.classList.remove('hidden'); | |
| } | |
| } | |
| // Display results | |
| function displayResults(results) { | |
| resultsContainer.innerHTML = ''; | |
| if (results.length === 0) { | |
| resultsContainer.innerHTML = ` | |
| <div class="text-center py-8 text-gray-500"> | |
| <i class="fas fa-search fa-3x mb-4"></i> | |
| <p>Aucun résultat trouvé</p> | |
| </div> | |
| `; | |
| return; | |
| } | |
| results.forEach(item => { | |
| const resultItem = document.createElement('div'); | |
| resultItem.className = 'bg-white p-4 rounded-lg shadow-sm border border-gray-100 entry-transition hover:shadow-md cursor-pointer'; | |
| resultItem.innerHTML = ` | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-bold text-lg text-blue-600">${item.pulaar}</h4> | |
| <p class="text-gray-600">${item.french}</p> | |
| <p class="text-gray-600">${item.english}</p> | |
| </div> | |
| <button class="favorite-btn text-gray-400 hover:text-red-500" data-word="${item.pulaar}"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">${item.category}</span> | |
| </div> | |
| `; | |
| resultItem.addEventListener('click', () => openWordModal(item)); | |
| // Check if this word is a favorite | |
| const favoriteBtn = resultItem.querySelector('.favorite-btn'); | |
| if (favorites.includes(item.pulaar)) { | |
| favoriteBtn.innerHTML = '<i class="fas fa-heart text-red-500"></i>'; | |
| } | |
| favoriteBtn.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| toggleFavorite(item.pulaar); | |
| if (favorites.includes(item.pulaar)) { | |
| favoriteBtn.innerHTML = '<i class="fas fa-heart text-red-500"></i>'; | |
| } else { | |
| favoriteBtn.innerHTML = '<i class="far fa-heart"></i>'; | |
| } | |
| }); | |
| resultsContainer.appendChild(resultItem); | |
| }); | |
| } | |
| // Open word modal | |
| function openWordModal(word) { | |
| modalWord.textContent = word.pulaar; | |
| modalPulaar.textContent = word.pulaar; | |
| modalFrench.textContent = word.french; | |
| modalEnglish.textContent = word.english; | |
| // Update favorite button state | |
| if (favorites.includes(word.pulaar)) { | |
| addFavorite.innerHTML = '<i class="fas fa-heart mr-2 text-red-500"></i> Retirer des favoris'; | |
| addFavorite.dataset.favorite = 'true'; | |
| } else { | |
| addFavorite.innerHTML = '<i class="far fa-heart mr-2"></i> Ajouter aux favoris'; | |
| addFavorite.dataset.favorite = 'false'; | |
| } | |
| wordModal.classList.remove('hidden'); | |
| } | |
| // Toggle favorite | |
| function toggleFavorite(word) { | |
| const index = favorites.indexOf(word); | |
| if (index === -1) { | |
| favorites.push(word); | |
| } else { | |
| favorites.splice(index, 1); | |
| } | |
| localStorage.setItem('favorites', JSON.stringify(favorites)); | |
| updateFavoritesDisplay(); | |
| if (favorites.length > 0) { | |
| favoritesSection.classList.remove('hidden'); | |
| } else { | |
| favoritesSection.classList.add('hidden'); | |
| } | |
| } | |
| // Update favorites display | |
| function updateFavoritesDisplay() { | |
| favoritesContainer.innerHTML = ''; | |
| const displayFavorites = favorites.slice(0, 4); // Show only 4 favorites | |
| displayFavorites.forEach(fav => { | |
| const word = dictionary.find(item => item.pulaar === fav); | |
| if (word) { | |
| const favoriteItem = document.createElement('div'); | |
| favoriteItem.className = 'bg-white p-3 rounded-lg shadow-sm border border-gray-100 cursor-pointer'; | |
| favoriteItem.innerHTML = ` | |
| <h4 class="font-semibold text-blue-600 truncate">${word.pulaar}</h4> | |
| <p class="text-sm text-gray-600 truncate">${word.french}</p> | |
| `; | |
| favoriteItem.addEventListener('click', () => openWordModal(word)); | |
| favoritesContainer.appendChild(favoriteItem); | |
| } | |
| }); | |
| if (favorites.length > 4) { | |
| const moreItem = document.createElement('div'); | |
| moreItem.className = 'bg-blue-50 p-3 rounded-lg flex items-center justify-center cursor-pointer'; | |
| moreItem.innerHTML = ` | |
| <span class="text-blue-600 font-medium">+${favorites.length - 4} plus</span> | |
| `; | |
| moreItem.addEventListener('click', () => showAllFavorites()); | |
| favoritesContainer.appendChild(moreItem); | |
| } | |
| } | |
| // Show all favorites | |
| function showAllFavorites() { | |
| resultsContainer.innerHTML = ''; | |
| favorites.forEach(fav => { | |
| const word = dictionary.find(item => item.pulaar === fav); | |
| if (word) { | |
| const resultItem = document.createElement('div'); | |
| resultItem.className = 'bg-white p-4 rounded-lg shadow-sm border border-gray-100 entry-transition hover:shadow-md cursor-pointer'; | |
| resultItem.innerHTML = ` | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-bold text-lg text-blue-600">${word.pulaar}</h4> | |
| <p class="text-gray-600">${word.french}</p> | |
| <p class="text-gray-600">${word.english}</p> | |
| </div> | |
| <button class="favorite-btn text-red-500" data-word="${word.pulaar}"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">${word.category}</span> | |
| </div> | |
| `; | |
| resultItem.addEventListener('click', () => openWordModal(word)); | |
| const favoriteBtn = resultItem.querySelector('.favorite-btn'); | |
| favoriteBtn.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| toggleFavorite(word.pulaar); | |
| resultItem.remove(); | |
| }); | |
| resultsContainer.appendChild(resultItem); | |
| } | |
| }); | |
| welcomeSection.classList.add('hidden'); | |
| resultsSection.classList.remove('hidden'); | |
| favoritesSection.classList.add('hidden'); | |
| } | |
| // Update history display | |
| function updateHistoryDisplay() { | |
| historyContainer.innerHTML = ''; | |
| history.forEach(item => { | |
| const historyItem = document.createElement('div'); | |
| historyItem.className = 'flex justify-between items-center p-3 bg-gray-50 rounded-lg'; | |
| historyItem.innerHTML = ` | |
| <span>${item}</span> | |
| <button class="text-gray-400 hover:text-blue-500 search-history" data-query="${item}"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| `; | |
| historyContainer.appendChild(historyItem); | |
| }); | |
| // Add event listeners to history search buttons | |
| document.querySelectorAll('.search-history').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const query = e.currentTarget.dataset.query; | |
| searchInput.value = query; | |
| searchDictionary(query); | |
| }); | |
| }); | |
| } | |
| // Event Listeners | |
| searchInput.addEventListener('input', (e) => { | |
| searchDictionary(e.target.value); | |
| }); | |
| langButtons.forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| langButtons.forEach(b => b.classList.remove('active', 'bg-blue-500', 'text-white')); | |
| langButtons.forEach(b => b.classList.add('bg-white', 'text-blue-600')); | |
| e.currentTarget.classList.add('active', 'bg-blue-500', 'text-white'); | |
| e.currentTarget.classList.remove('bg-white', 'text-blue-600'); | |
| currentLang = e.currentTarget.id.replace('lang-', ''); | |
| // Update placeholder based on language | |
| if (currentLang === 'pulaar') { | |
| searchInput.placeholder = "Ɗaɗɗo ɗemngal..."; | |
| } else if (currentLang === 'french') { | |
| searchInput.placeholder = "Rechercher un mot..."; | |
| } else { | |
| searchInput.placeholder = "Search for a word..."; | |
| } | |
| }); | |
| }); | |
| navButtons.forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| navButtons.forEach(b => b.classList.remove('text-blue-600')); | |
| navButtons.forEach(b => b.classList.add('text-gray-600')); | |
| e.currentTarget.classList.add('text-blue-600'); | |
| e.currentTarget.classList.remove('text-gray-600'); | |
| // Handle navigation | |
| const text = e.currentTarget.querySelector('span').textContent; | |
| if (text === 'Favoris') { | |
| showAllFavorites(); | |
| } else if (text === 'Historique') { | |
| welcomeSection.classList.add('hidden'); | |
| resultsSection.classList.add('hidden'); | |
| favoritesSection.classList.add('hidden'); | |
| historySection.classList.remove('hidden'); | |
| } else if (text === 'Dictionnaire') { | |
| welcomeSection.classList.remove('hidden'); | |
| resultsSection.classList.add('hidden'); | |
| favoritesSection.classList.add('hidden'); | |
| historySection.classList.add('hidden'); | |
| } else { // Accueil | |
| welcomeSection.classList.remove('hidden'); | |
| resultsSection.classList.add('hidden'); | |
| if (favorites.length > 0) favoritesSection.classList.remove('hidden'); | |
| if (history.length > 0) historySection.classList.remove('hidden'); | |
| } | |
| }); | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| wordModal.classList.add('hidden'); | |
| }); | |
| addFavorite.addEventListener('click', () => { | |
| const word = modalWord.textContent; | |
| toggleFavorite(word); | |
| if (addFavorite.dataset.favorite === 'true') { | |
| addFavorite.innerHTML = '<i class="far fa-heart mr-2"></i> Ajouter aux favoris'; | |
| addFavorite.dataset.favorite = 'false'; | |
| } else { | |
| addFavorite.innerHTML = '<i class="fas fa-heart mr-2 text-red-500"></i> Retirer des favoris'; | |
| addFavorite.dataset.favorite = 'true'; | |
| } | |
| }); | |
| // Voice search simulation | |
| voiceSearch.addEventListener('click', () => { | |
| voiceSearch.innerHTML = '<i class="fas fa-microphone-slash"></i>'; | |
| voiceSearch.classList.add('text-red-500'); | |
| // Simulate voice recognition | |
| setTimeout(() => { | |
| const randomWord = dictionary[Math.floor(Math.random() * dictionary.length)].pulaar; | |
| searchInput.value = randomWord; | |
| searchDictionary(randomWord); | |
| voiceSearch.innerHTML = '<i class="fas fa-microphone"></i>'; | |
| voiceSearch.classList.remove('text-red-500'); | |
| }, 1500); | |
| }); | |
| clearHistory.addEventListener('click', () => { | |
| history = []; | |
| localStorage.setItem('history', JSON.stringify(history)); | |
| historyContainer.innerHTML = ''; | |
| historySection.classList.add('hidden'); | |
| }); | |
| toggleFavorites.addEventListener('click', showAllFavorites); | |
| // Initialize the app | |
| initApp(); | |
| </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=Janngu/dictionary" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |