| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>GéoChallenge - Jeu éducatif de géographie</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> |
| .country-flag { |
| height: 120px; |
| object-fit: contain; |
| background-color: #f8fafc; |
| border-radius: 8px; |
| padding: 8px; |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
| } |
| .monument-image { |
| height: 180px; |
| width: 100%; |
| object-fit: cover; |
| border-radius: 8px; |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
| } |
| .progress-bar { |
| transition: width 0.5s ease-in-out; |
| } |
| .option-btn { |
| transition: all 0.2s ease; |
| } |
| .option-btn:hover { |
| transform: translateY(-2px); |
| } |
| .option-btn.correct { |
| background-color: #10b981 !important; |
| color: white !important; |
| } |
| .option-btn.incorrect { |
| background-color: #ef4444 !important; |
| color: white !important; |
| } |
| .pulse-animation { |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen font-sans"> |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> |
| |
| <header class="text-center mb-8"> |
| <h1 class="text-4xl font-bold text-blue-800 mb-2">GéoChallenge</h1> |
| <p class="text-lg text-gray-600">Testez vos connaissances en géographie mondiale</p> |
| <div class="flex justify-center mt-4"> |
| <div class="w-full bg-gray-200 rounded-full h-4 max-w-xl"> |
| <div id="progress-bar" class="progress-bar bg-blue-600 h-4 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| <div id="score-display" class="mt-2 text-lg font-semibold text-blue-700"> |
| Score: <span id="score">0</span>/<span id="total-questions">0</span> |
| </div> |
| </header> |
|
|
| |
| <main> |
| |
| <div id="start-screen" class="bg-white rounded-xl shadow-lg p-8 text-center"> |
| <div class="mb-6"> |
| <i class="fas fa-globe-europe text-6xl text-blue-600 mb-4"></i> |
| <h2 class="text-2xl font-bold text-gray-800 mb-2">Bienvenue sur GéoChallenge</h2> |
| <p class="text-gray-600 mb-6">Un jeu éducatif pour tester et améliorer vos connaissances en géographie. Prêt à relever le défi ?</p> |
| </div> |
| <div class="mb-6"> |
| <label for="difficulty" class="block text-gray-700 font-medium mb-2">Niveau de difficulté</label> |
| <select id="difficulty" class="w-full md:w-64 px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> |
| <option value="easy">Facile</option> |
| <option value="medium">Moyen</option> |
| <option value="hard">Difficile</option> |
| </select> |
| </div> |
| <button id="start-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition-all duration-300 transform hover:scale-105 pulse-animation"> |
| Commencer le jeu <i class="fas fa-play ml-2"></i> |
| </button> |
| </div> |
|
|
| |
| <div id="question-screen" class="hidden bg-white rounded-xl shadow-lg p-6 md:p-8"> |
| <div class="flex justify-between items-center mb-6"> |
| <div id="question-number" class="text-gray-500 font-medium">Question 1/10</div> |
| <div id="timer" class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full font-semibold flex items-center"> |
| <i class="fas fa-clock mr-2"></i> |
| <span id="time">30</span>s |
| </div> |
| </div> |
|
|
| <div id="question-container"> |
| <h2 id="question-text" class="text-xl md:text-2xl font-bold text-gray-800 mb-6"></h2> |
| |
| |
| <div id="flag-question" class="hidden mb-8"> |
| <div class="flex justify-center"> |
| <img id="flag-image" src="" alt="Drapeau du pays" class="country-flag"> |
| </div> |
| </div> |
| |
| |
| <div id="monument-question" class="hidden mb-8"> |
| <div class="flex justify-center"> |
| <img id="monument-image" src="" alt="Monument" class="monument-image"> |
| </div> |
| </div> |
| |
| |
| <div id="options-container" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
| |
| </div> |
| </div> |
|
|
| <div class="flex justify-between items-center mt-6"> |
| <button id="hint-btn" class="bg-yellow-100 hover:bg-yellow-200 text-yellow-800 font-medium py-2 px-4 rounded-lg flex items-center"> |
| <i class="fas fa-lightbulb mr-2"></i> Indice |
| </button> |
| <button id="next-btn" class="hidden bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg"> |
| Suivant <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="hint-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> |
| <div class="bg-white rounded-xl p-6 max-w-md mx-4"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-bold text-gray-800"><i class="fas fa-lightbulb text-yellow-500 mr-2"></i> Indice</h3> |
| <button id="close-hint" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <p id="hint-text" class="text-gray-700 mb-4"></p> |
| <div class="text-right"> |
| <button id="use-hint" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg"> |
| Utiliser cet indice |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="results-screen" class="hidden bg-white rounded-xl shadow-lg p-8 text-center"> |
| <div class="mb-6"> |
| <div class="flex justify-center mb-4"> |
| <div class="w-24 h-24 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-trophy text-4xl text-yellow-500"></i> |
| </div> |
| </div> |
| <h2 class="text-2xl font-bold text-gray-800 mb-2">Résultats finaux</h2> |
| <p id="result-message" class="text-gray-600 mb-6"></p> |
| </div> |
| |
| <div class="bg-gray-50 rounded-lg p-6 mb-8"> |
| <div class="grid grid-cols-3 gap-4 text-center"> |
| <div> |
| <div class="text-3xl font-bold text-blue-600" id="final-score">0</div> |
| <div class="text-gray-500">Score</div> |
| </div> |
| <div> |
| <div class="text-3xl font-bold text-green-600" id="correct-answers">0</div> |
| <div class="text-gray-500">Correctes</div> |
| </div> |
| <div> |
| <div class="text-3xl font-bold text-red-600" id="wrong-answers">0</div> |
| <div class="text-gray-500">Incorrectes</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="text-lg font-semibold text-gray-700 mb-3">Détail des réponses</h3> |
| <div id="answers-detail" class="space-y-3 max-h-60 overflow-y-auto"> |
| |
| </div> |
| </div> |
| |
| <button id="restart-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg text-lg"> |
| Rejouer <i class="fas fa-redo ml-2"></i> |
| </button> |
| </div> |
| </main> |
|
|
| |
| <footer class="mt-12 text-center text-gray-500 text-sm"> |
| <p>GéoChallenge - Un jeu éducatif pour apprendre la géographie en s'amusant</p> |
| <p class="mt-1">© 2023 Tous droits réservés</p> |
| </footer> |
| </div> |
|
|
| <script> |
| |
| const gameData = { |
| easy: [ |
| { |
| type: "capital", |
| question: "Quelle est la capitale de la France ?", |
| options: ["Lyon", "Marseille", "Paris", "Bordeaux"], |
| answer: "Paris", |
| hint: "Cette ville est connue comme la 'Ville Lumière' et abrite la Tour Eiffel." |
| }, |
| { |
| type: "flag", |
| question: "À quel pays appartient ce drapeau ?", |
| flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Flag_of_Brazil.svg/320px-Flag_of_Brazil.svg.png", |
| options: ["Argentine", "Brésil", "Colombie", "Venezuela"], |
| answer: "Brésil", |
| hint: "Ce pays est le plus grand d'Amérique du Sud et est connu pour le Carnaval de Rio." |
| }, |
| { |
| type: "monument", |
| question: "Dans quel pays se trouve ce monument ?", |
| monument: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/NYC_Empire_State_Building.jpg/320px-NYC_Empire_State_Building.jpg", |
| options: ["Canada", "États-Unis", "Royaume-Uni", "Australie"], |
| answer: "États-Unis", |
| hint: "Ce gratte-ciel emblématique est situé à New York." |
| }, |
| { |
| type: "capital", |
| question: "Quelle est la capitale du Japon ?", |
| options: ["Osaka", "Kyoto", "Tokyo", "Hiroshima"], |
| answer: "Tokyo", |
| hint: "C'est la plus grande ville du Japon et l'une des métropoles les plus peuplées du monde." |
| }, |
| { |
| type: "flag", |
| question: "À quel pays appartient ce drapeau ?", |
| flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Flag_of_the_People%27s_Republic_of_China.svg/320px-Flag_of_the_People%27s_Republic_of_China.svg.png", |
| options: ["Japon", "Corée du Sud", "Chine", "Vietnam"], |
| answer: "Chine", |
| hint: "Ce pays est le plus peuplé du monde et abrite la Grande Muraille." |
| } |
| ], |
| medium: [ |
| { |
| type: "capital", |
| question: "Quelle est la capitale de l'Afrique du Sud ?", |
| options: ["Pretoria", "Le Cap", "Bloemfontein", "Les trois"], |
| answer: "Les trois", |
| hint: "Ce pays a trois capitales officielles pour différentes branches du gouvernement." |
| }, |
| { |
| type: "monument", |
| question: "Dans quel pays se trouve ce monument ?", |
| monument: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Colosseo_2020.jpg/320px-Colosseo_2020.jpg", |
| options: ["Grèce", "Italie", "Espagne", "Turquie"], |
| answer: "Italie", |
| hint: "Cet amphithéâtre antique est situé dans la capitale de ce pays." |
| }, |
| { |
| type: "flag", |
| question: "À quel pays appartient ce drapeau ?", |
| flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Flag_of_Japan.svg/320px-Flag_of_Japan.svg.png", |
| options: ["Corée du Sud", "Japon", "Chine", "Thaïlande"], |
| answer: "Japon", |
| hint: "Ce pays est connu comme le 'Pays du Soleil Levant'." |
| }, |
| { |
| type: "capital", |
| question: "Quelle est la capitale du Canada ?", |
| options: ["Toronto", "Montréal", "Ottawa", "Vancouver"], |
| answer: "Ottawa", |
| hint: "Cette ville est située dans la province de l'Ontario, près de la frontière avec le Québec." |
| }, |
| { |
| type: "monument", |
| question: "Dans quel pays se trouve ce monument ?", |
| monument: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg/320px-Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg", |
| options: ["Nouvelle-Zélande", "Australie", "Afrique du Sud", "Argentine"], |
| answer: "Australie", |
| hint: "Ce monument emblématique est situé dans la plus grande ville de ce pays." |
| } |
| ], |
| hard: [ |
| { |
| type: "capital", |
| question: "Quelle est la capitale de la Suisse ?", |
| options: ["Zurich", "Genève", "Berne", "Bâle"], |
| answer: "Berne", |
| hint: "Bien que ce ne soit pas la plus grande ville du pays, c'est la capitale fédérale." |
| }, |
| { |
| type: "flag", |
| question: "À quel pays appartient ce drapeau ?", |
| flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Portugal.svg/320px-Flag_of_Portugal.svg.png", |
| options: ["Portugal", "Serbie", "Slovaquie", "Lituanie"], |
| answer: "Portugal", |
| hint: "Ce pays européen est connu pour ses explorateurs comme Vasco de Gama." |
| }, |
| { |
| type: "monument", |
| question: "Dans quel pays se trouve ce monument ?", |
| monument: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Machu_Picchu%2C_Peru.jpg/320px-Machu_Picchu%2C_Peru.jpg", |
| options: ["Mexique", "Pérou", "Bolivie", "Équateur"], |
| answer: "Pérou", |
| hint: "Cette ancienne cité inca est située dans les Andes." |
| }, |
| { |
| type: "capital", |
| question: "Quelle est la capitale de la Nouvelle-Zélande ?", |
| options: ["Auckland", "Christchurch", "Wellington", "Dunedin"], |
| answer: "Wellington", |
| hint: "Cette ville est située à l'extrémité sud de l'île du Nord." |
| }, |
| { |
| type: "flag", |
| question: "À quel pays appartient ce drapeau ?", |
| flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Flag_of_the_Czech_Republic.svg/320px-Flag_of_the_Czech_Republic.svg.png", |
| options: ["Tchéquie", "Slovaquie", "Slovénie", "Croatie"], |
| answer: "Tchéquie", |
| hint: "Ce pays d'Europe centrale a pour capitale Prague." |
| } |
| ] |
| }; |
| |
| |
| let currentQuestions = []; |
| let currentQuestionIndex = 0; |
| let score = 0; |
| let timer; |
| let timeLeft = 30; |
| let usedHints = 0; |
| let answersDetail = []; |
| |
| |
| const startScreen = document.getElementById('start-screen'); |
| const questionScreen = document.getElementById('question-screen'); |
| const resultsScreen = document.getElementById('results-screen'); |
| const startBtn = document.getElementById('start-btn'); |
| const nextBtn = document.getElementById('next-btn'); |
| const hintBtn = document.getElementById('hint-btn'); |
| const useHintBtn = document.getElementById('use-hint'); |
| const closeHintBtn = document.getElementById('close-hint'); |
| const hintModal = document.getElementById('hint-modal'); |
| const restartBtn = document.getElementById('restart-btn'); |
| const difficultySelect = document.getElementById('difficulty'); |
| const questionText = document.getElementById('question-text'); |
| const optionsContainer = document.getElementById('options-container'); |
| const questionNumber = document.getElementById('question-number'); |
| const timeDisplay = document.getElementById('time'); |
| const scoreDisplay = document.getElementById('score'); |
| const totalQuestions = document.getElementById('total-questions'); |
| const progressBar = document.getElementById('progress-bar'); |
| const flagQuestion = document.getElementById('flag-question'); |
| const flagImage = document.getElementById('flag-image'); |
| const monumentQuestion = document.getElementById('monument-question'); |
| const monumentImage = document.getElementById('monument-image'); |
| const hintText = document.getElementById('hint-text'); |
| const finalScore = document.getElementById('final-score'); |
| const correctAnswers = document.getElementById('correct-answers'); |
| const wrongAnswers = document.getElementById('wrong-answers'); |
| const resultMessage = document.getElementById('result-message'); |
| const answersDetailContainer = document.getElementById('answers-detail'); |
| |
| |
| startBtn.addEventListener('click', startGame); |
| nextBtn.addEventListener('click', nextQuestion); |
| hintBtn.addEventListener('click', showHint); |
| useHintBtn.addEventListener('click', useHint); |
| closeHintBtn.addEventListener('click', closeHint); |
| restartBtn.addEventListener('click', restartGame); |
| |
| |
| function startGame() { |
| const difficulty = difficultySelect.value; |
| currentQuestions = [...gameData[difficulty]]; |
| currentQuestionIndex = 0; |
| score = 0; |
| usedHints = 0; |
| answersDetail = []; |
| |
| |
| shuffleArray(currentQuestions); |
| |
| |
| startScreen.classList.add('hidden'); |
| questionScreen.classList.remove('hidden'); |
| totalQuestions.textContent = currentQuestions.length; |
| updateScore(); |
| |
| |
| loadQuestion(); |
| } |
| |
| |
| function loadQuestion() { |
| const question = currentQuestions[currentQuestionIndex]; |
| |
| |
| optionsContainer.innerHTML = ''; |
| nextBtn.classList.add('hidden'); |
| flagQuestion.classList.add('hidden'); |
| monumentQuestion.classList.add('hidden'); |
| |
| |
| questionText.textContent = question.question; |
| questionNumber.textContent = `Question ${currentQuestionIndex + 1}/${currentQuestions.length}`; |
| |
| |
| if (question.type === 'flag') { |
| flagQuestion.classList.remove('hidden'); |
| flagImage.src = question.flag; |
| flagImage.alt = `Drapeau de ${question.answer}`; |
| } else if (question.type === 'monument') { |
| monumentQuestion.classList.remove('hidden'); |
| monumentImage.src = question.monument; |
| monumentImage.alt = `Monument de ${question.answer}`; |
| } |
| |
| |
| const shuffledOptions = [...question.options]; |
| shuffleArray(shuffledOptions); |
| |
| shuffledOptions.forEach(option => { |
| const button = document.createElement('button'); |
| button.textContent = option; |
| button.className = 'option-btn bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-3 px-4 rounded-lg text-left'; |
| button.addEventListener('click', () => selectAnswer(option)); |
| optionsContainer.appendChild(button); |
| }); |
| |
| |
| hintText.textContent = question.hint; |
| |
| |
| startTimer(); |
| |
| |
| const progress = ((currentQuestionIndex) / currentQuestions.length) * 100; |
| progressBar.style.width = `${progress}%`; |
| } |
| |
| |
| function selectAnswer(selectedOption) { |
| clearInterval(timer); |
| |
| const question = currentQuestions[currentQuestionIndex]; |
| const isCorrect = selectedOption === question.answer; |
| |
| |
| const buttons = document.querySelectorAll('.option-btn'); |
| buttons.forEach(button => { |
| button.disabled = true; |
| if (button.textContent === question.answer) { |
| button.classList.add('correct'); |
| } else if (button.textContent === selectedOption && !isCorrect) { |
| button.classList.add('incorrect'); |
| } |
| }); |
| |
| |
| if (isCorrect) { |
| score++; |
| updateScore(); |
| } |
| |
| |
| answersDetail.push({ |
| question: question.question, |
| correctAnswer: question.answer, |
| userAnswer: selectedOption, |
| isCorrect: isCorrect |
| }); |
| |
| |
| nextBtn.classList.remove('hidden'); |
| } |
| |
| |
| function nextQuestion() { |
| currentQuestionIndex++; |
| |
| if (currentQuestionIndex < currentQuestions.length) { |
| loadQuestion(); |
| } else { |
| showResults(); |
| } |
| } |
| |
| |
| function showResults() { |
| questionScreen.classList.add('hidden'); |
| resultsScreen.classList.remove('hidden'); |
| |
| const correctCount = answersDetail.filter(answer => answer.isCorrect).length; |
| const wrongCount = answersDetail.length - correctCount; |
| |
| |
| finalScore.textContent = score; |
| correctAnswers.textContent = correctCount; |
| wrongAnswers.textContent = wrongCount; |
| |
| |
| let message; |
| const percentage = (correctCount / answersDetail.length) * 100; |
| |
| if (percentage >= 80) { |
| message = "Félicitations ! Vous êtes un véritable expert en géographie !"; |
| } else if (percentage >= 60) { |
| message = "Bon travail ! Vous avez de solides connaissances en géographie."; |
| } else if (percentage >= 40) { |
| message = "Pas mal ! Continuez à apprendre et vous vous améliorerez."; |
| } else { |
| message = "Ne vous découragez pas ! La géographie s'apprend avec le temps."; |
| } |
| |
| resultMessage.textContent = message; |
| |
| |
| answersDetailContainer.innerHTML = ''; |
| answersDetail.forEach((answer, index) => { |
| const answerElement = document.createElement('div'); |
| answerElement.className = 'bg-gray-50 p-3 rounded-lg'; |
| |
| const questionText = document.createElement('p'); |
| questionText.className = 'font-medium text-gray-800'; |
| questionText.textContent = `${index + 1}. ${answer.question}`; |
| |
| const userAnswer = document.createElement('p'); |
| userAnswer.className = `text-sm ${answer.isCorrect ? 'text-green-600' : 'text-red-600'}`; |
| userAnswer.innerHTML = `<span class="font-medium">Votre réponse:</span> ${answer.userAnswer}`; |
| |
| if (!answer.isCorrect) { |
| const correctAnswer = document.createElement('p'); |
| correctAnswer.className = 'text-sm text-gray-600'; |
| correctAnswer.innerHTML = `<span class="font-medium">Réponse correcte:</span> ${answer.correctAnswer}`; |
| answerElement.appendChild(correctAnswer); |
| } |
| |
| answerElement.prepend(userAnswer); |
| answerElement.prepend(questionText); |
| answersDetailContainer.appendChild(answerElement); |
| }); |
| |
| |
| progressBar.style.width = '100%'; |
| } |
| |
| |
| function restartGame() { |
| resultsScreen.classList.add('hidden'); |
| startScreen.classList.remove('hidden'); |
| } |
| |
| |
| function updateScore() { |
| scoreDisplay.textContent = score; |
| } |
| |
| |
| function startTimer() { |
| timeLeft = 30; |
| timeDisplay.textContent = timeLeft; |
| |
| timer = setInterval(() => { |
| timeLeft--; |
| timeDisplay.textContent = timeLeft; |
| |
| if (timeLeft <= 0) { |
| clearInterval(timer); |
| timeUp(); |
| } |
| }, 1000); |
| } |
| |
| |
| function timeUp() { |
| const question = currentQuestions[currentQuestionIndex]; |
| |
| |
| const buttons = document.querySelectorAll('.option-btn'); |
| buttons.forEach(button => { |
| button.disabled = true; |
| if (button.textContent === question.answer) { |
| button.classList.add('correct'); |
| } |
| }); |
| |
| |
| answersDetail.push({ |
| question: question.question, |
| correctAnswer: question.answer, |
| userAnswer: "Aucune réponse (temps écoulé)", |
| isCorrect: false |
| }); |
| |
| |
| nextBtn.classList.remove('hidden'); |
| } |
| |
| |
| function showHint() { |
| hintModal.classList.remove('hidden'); |
| } |
| |
| |
| function useHint() { |
| usedHints++; |
| closeHint(); |
| |
| |
| const question = currentQuestions[currentQuestionIndex]; |
| const buttons = Array.from(document.querySelectorAll('.option-btn')); |
| const incorrectButtons = buttons.filter(btn => btn.textContent !== question.answer); |
| |
| |
| shuffleArray(incorrectButtons); |
| for (let i = 0; i < Math.min(2, incorrectButtons.length); i++) { |
| incorrectButtons[i].classList.add('hidden'); |
| } |
| |
| |
| hintBtn.disabled = true; |
| hintBtn.classList.add('opacity-50'); |
| } |
| |
| |
| function closeHint() { |
| hintModal.classList.add('hidden'); |
| } |
| |
| |
| function shuffleArray(array) { |
| for (let i = array.length - 1; i > 0; i--) { |
| const j = Math.floor(Math.random() * (i + 1)); |
| [array[i], array[j]] = [array[j], array[i]]; |
| } |
| return array; |
| } |
| </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=arbib/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
