-
Notifications
You must be signed in to change notification settings - Fork 53
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #146 from AkierRaee/main
Add Simplified Chinese as new multi-language support and fix missing green circles cursor
- Loading branch information
Showing
7 changed files
with
183 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -23,6 +23,28 @@ | |
| <body | ||
| class="bg-gray-900 text-gray-300 dark-theme d-flex flex-column min-vh-100" | ||
| > | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div class="circle"></div> | ||
| <div id="loader" class="spinner-container"> | ||
| <div | ||
| class="spinner-border" | ||
|
|
@@ -129,6 +151,7 @@ | |
| <option value="en">English</option> | ||
| <option value="fr">Français</option> | ||
| <option value="es">Español</option> | ||
| <option value="zh">简体中文</option> | ||
| <!-- Ajoutez d'autres langues ici --> | ||
| </select> | ||
| </div> | ||
|
|
@@ -252,12 +275,12 @@ | |
| /> | ||
| </div> | ||
| <!-- Book Details --> | ||
| <div class="mt-4"> | ||
| <h1 class="text-2xl font-bold text-green-500"> | ||
| <div class="mt-4" data-book="frankenstein"> | ||
| <h1 class="text-2xl font-bold text-green-500" data-translate="title"> | ||
| Frankestine | ||
| </h1> | ||
| <h3 class="text-lg mt-2">By Mary Shelby</h3> | ||
| <p class="text-sm mt-2"> | ||
| <h3 class="text-lg mt-2" data-translate="author">By Mary Shelley</h3> | ||
| <p class="text-sm mt-2" data-translate="description"> | ||
| Frankenstein tells the story of Victor | ||
| Frankenstein, a scientist who creates a | ||
| monstrous creature, leading to tragic | ||
|
|
@@ -740,10 +763,13 @@ <h3 class="text-lg mt-2">By Mary Shelby</h3> | |
|
|
||
| <!-- JavaScript --> | ||
| <script src="./script.js"></script> | ||
| <script src="./translation.js"></script> | ||
| <script | ||
| src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | ||
| integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" | ||
| crossorigin="anonymous" | ||
| ></script> | ||
| </body> | ||
| </html> | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| // translations.js | ||
|
|
||
| // Translation Script | ||
| const translations = { | ||
| en: { | ||
| books: { | ||
| frankenstein: { | ||
| title: "Frankenstein", | ||
| author: "By Mary Shelley", | ||
| description: "Frankenstein tells the story of Victor Frankenstein, a scientist who creates a monstrous creature, leading to tragic consequences." | ||
| } | ||
| } | ||
| }, | ||
| fr: { | ||
| books: { | ||
| frankenstein: { | ||
| title: "Frankenstein", | ||
| author: "Par Mary Shelley", | ||
| description: "Frankenstein raconte l'histoire de Victor Frankenstein, un scientifique qui crée une créature monstrueuse, entraînant des conséquences tragiques." | ||
| } | ||
| } | ||
| }, | ||
| es: { | ||
| books: { | ||
| frankenstein: { | ||
| title: "Frankenstein", | ||
| author: "Por Mary Shelley", | ||
| description: "Frankenstein cuenta la historia de Victor Frankenstein, un científico que crea una criatura monstruosa, lo que lleva a consecuencias trágicas." | ||
| } | ||
| } | ||
| }, | ||
| zh: { | ||
| books: { | ||
| frankenstein: { | ||
| title: "弗兰肯斯坦", | ||
| author: "玛丽·雪莱", | ||
| description: "《弗兰肯斯坦》讲述了科学家维克多·弗兰肯斯坦创造了一个怪物，导致悲剧性后果的故事。" | ||
| } | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| console.log('Translations object:', translations); | ||
|
|
||
| function changeLanguage() { | ||
| const selectedLanguage = document.getElementById('language').value; | ||
| console.log('Selected language:', selectedLanguage); | ||
| applyTranslations(selectedLanguage); | ||
| } | ||
|
|
||
| function applyTranslations(language) { | ||
| const bookElements = document.querySelectorAll('[data-book]'); | ||
| bookElements.forEach(bookElement => { | ||
| const bookKey = bookElement.getAttribute('data-book'); | ||
| console.log('Book key:', bookKey); | ||
| if (translations[language] && translations[language].books && translations[language].books[bookKey]) { | ||
| const bookTranslations = translations[language].books[bookKey]; | ||
| console.log('Applying translations for:', bookKey, bookTranslations); | ||
| bookElement.querySelector('[data-translate="title"]').innerText = bookTranslations.title; | ||
| bookElement.querySelector('[data-translate="author"]').innerText = bookTranslations.author; | ||
| bookElement.querySelector('[data-translate="description"]').innerText = bookTranslations.description; | ||
| } else { | ||
| console.error('Translation not found for:', language, bookKey); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| document.addEventListener('DOMContentLoaded', function() { | ||
| const defaultLanguage = 'en'; | ||
| console.log('Default language:', defaultLanguage); | ||
| applyTranslations(defaultLanguage); | ||
| }); |