Merge pull request #147 from AkierRaee/main

Add translations for audiobooks in multiple languages
Ctoic · Nov 7, 2024 · 95412db · 95412db
2 parents 350e770 + 047128d
commit 95412db
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -100,22 +100,29 @@ MIT License
                     <sub><b>JULES MUKADI</b></sub>
                 </a>
             </td>
+            <td align="center">
+                <a href="https://github.com/AkierRaee">
+                    <img src="https://avatars.githubusercontent.com/u/151558456?v=4" width="100;" alt="AkierRaee"/>
+                    <br />
+                    <sub><b>Au Huishan</b></sub>
+                </a>
+            </td>
             <td align="center">
                 <a href="https://github.com/AdityaJ2305">
                     <img src="https://avatars.githubusercontent.com/u/148325158?v=4" width="100;" alt="AdityaJ2305"/>
                     <br />
                     <sub><b>Aditya Jindal</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/AdityaBavadekar">
                     <img src="https://avatars.githubusercontent.com/u/64344960?v=4" width="100;" alt="AdityaBavadekar"/>
                     <br />
                     <sub><b>Aditya Bavadekar</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/solanki03">
                     <img src="https://avatars.githubusercontent.com/u/147741415?v=4" width="100;" alt="solanki03"/>
@@ -130,13 +137,6 @@ MIT License
                     <sub><b>Aman Kumar</b></sub>
                 </a>
             </td>
-            <td align="center">
-                <a href="https://github.com/AkierRaee">
-                    <img src="https://avatars.githubusercontent.com/u/151558456?v=4" width="100;" alt="AkierRaee"/>
-                    <br />
-                    <sub><b>Au Huishan</b></sub>
-                </a>
-            </td>
             <td align="center">
                 <a href="https://github.com/VaradJadhav">
                     <img src="https://avatars.githubusercontent.com/u/96735054?v=4" width="100;" alt="VaradJadhav"/>

diff --git a/adventures.html b/adventures.html
@@ -102,11 +102,13 @@
                         <a
                             href="./index.html"
                             class="text-gray-300 hover:text-green-500"
+                            id="home"
                             >Home</a
                         >
                         <a
                             href="./about.html"
                             class="text-gray-300 hover:text-green-500"
+                            id="about"
                             >About</a
                         >
 
@@ -139,6 +141,20 @@
                                 />
                             </svg>
                         </button>
+
+                        <div class="language-selector">
+                            <select
+                                id="language"
+                                onchange="changeLanguage()"
+                                style="background-color: #1db954; color: #fff"
+                            >
+                                <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>
                     </div>
 
                     <!-- Mobile Menu Toggle Button -->
@@ -259,14 +275,12 @@
                             />
                         </div>
                         <!-- Book Details -->
-                        <div class="mt-4">
-                            <h1 class="text-2xl font-bold text-green-500">
+                        <div class="mt-4" data-book="sherlock">
+                            <h1 class="text-2xl font-bold text-green-500" data-translate="title">
                                 Adventures of Sherlock Holmes
                             </h1>
-                            <h3 class="text-lg mt-2">
-                                By Sir Arthur Conan Doyle
-                            </h3>
-                            <p class="text-sm mt-2">
+                            <h3 class="text-lg mt-2"  data-translate="author">By Sir Arthur Conan Doyle</h3>
+                            <p class="text-sm mt-2" data-translate="description">
                                 Adventures of Sherlock Holmes by Sir Arthur
                                 Conan Doyle is a collection of twelve detective
                                 mysteries featuring Sherlock Holmes and Dr.
@@ -598,6 +612,7 @@ <h2 class="display-5 page-title fw-semibold mb-6">
         <!-- 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"

diff --git a/fs.html b/fs.html
@@ -141,7 +141,7 @@
                                 />
                             </svg>
                         </button>
-
+                        
                         <div class="language-selector">
                             <select
                                 id="language"

diff --git a/pbd.html b/pbd.html
@@ -103,11 +103,13 @@
                         <a
                             href="./index.html"
                             class="text-gray-300 hover:text-green-500"
+                            id="home"
                             >Home</a
                         >
                         <a
                             href="./about.html"
                             class="text-gray-300 hover:text-green-500"
+                            id="about"
                             >About</a
                         >
 
@@ -140,6 +142,20 @@
                                 />
                             </svg>
                         </button>
+
+                        <div class="language-selector">
+                            <select
+                                id="language"
+                                onchange="changeLanguage()"
+                                style="background-color: #1db954; color: #fff"
+                            >
+                                <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>
                     </div>
 
                     <!-- Mobile Menu Toggle Button -->
@@ -260,12 +276,12 @@
                             />
                         </div>
                         <!-- Book Details -->
-                        <div class="mt-4">
-                            <h1 class="text-2xl font-bold text-green-500">
+                        <div class="mt-4" data-book="paleBlueDot">
+                            <h1 class="text-2xl font-bold text-green-500" data-translate="title">
                                 Pale Blue Dot
                             </h1>
-                            <h3 class="text-lg mt-2">By Carl Sagan</h3>
-                            <p class="text-sm mt-2">
+                            <h3 class="text-lg mt-2" data-translate="author">By Carl Sagan</h3>
+                            <p class="text-sm mt-2" data-translate="description">
                                 Pale Blue Dot Sagan traces the spellbinding
                                 history of our launch into the cosmos and
                                 assesses the future that looms before us as we
@@ -660,6 +676,7 @@ <h2 class="display-5 page-title fw-semibold mb-6">
 
         <!-- 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"

diff --git a/rdpd.html b/rdpd.html
@@ -108,6 +108,7 @@
                         <a
                             href="./about.html"
                             class="text-gray-300 hover:text-green-500"
+                            id="about"
                             >About</a
                         >
 
@@ -140,6 +141,20 @@
                                 />
                             </svg>
                         </button>
+
+                        <div class="language-selector">
+                            <select
+                                id="language"
+                                onchange="changeLanguage()"
+                                style="background-color: #1db954; color: #fff"
+                            >
+                                <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>
                     </div>
 
                     <!-- Mobile Menu Toggle Button -->
@@ -260,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="sapiens">
+                            <h1 class="text-2xl font-bold text-green-500" data-translate="title">
                                 Sapiens: A Brief History of Humankind
                             </h1>
-                            <h3 class="text-lg mt-2">By Yuval Noah Harari</h3>
-                            <p class="text-sm mt-2">
+                            <h3 class="text-lg mt-2" data-translate="author">By Yuval Noah Harari</h3>
+                            <p class="text-sm mt-2" data-translate="description">
                                 Sapiens explores the history and evolution of
                                 humanity, from early Homo sapiens to modern
                                 society.
@@ -281,7 +296,7 @@ <h3 class="text-lg mt-2">By Yuval Noah Harari</h3>
                             <i
                                 class="bi bi-heart mx-4 icon-action-btn tooltip-parent tooltip-bottom"
                                 id="favourite-btn"
-                                ><span class="tooltip"
+                                ><span class="tooltip" id="favourite"
                                     >Save to Favourites</span
                                 ></i
                             >
@@ -290,13 +305,17 @@ <h3 class="text-lg mt-2">By Yuval Noah Harari</h3>
                                 id="share-btn"
                                 data-bs-target="#exampleModalToggle"
                                 data-bs-toggle="modal"
-                                ><span class="tooltip">Share</span></i
+                                ><span class="tooltip" id="share"
+                                    >Share</span>
+                                </i
                             >
 
                             <i
                                 class="bi bi-chat mx-4 icon-action-btn tooltip-parent tooltip-bottom"
                                 id="view-comments-btn"
-                                ><span class="tooltip">View comments</span></i
+                                ><span class="tooltip" id="view"
+                                    >View comments</span
+                                ></i
                             >
                         </div>
                     </div>
@@ -593,6 +612,7 @@ <h2 class="display-5 page-title fw-semibold mb-6">
 
         <!-- 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"

diff --git a/translation.js b/translation.js
@@ -4,37 +4,98 @@
 const translations = {
   en: {
     books: {
+      paleBlueDot: {
+        title: "Pale Blue Dot",
+        author: "By Carl Sagan",
+        description: "Pale Blue Dot Sagan traces the spellbinding history of our launch into the cosmos and assesses the future that looms before us as we move out into our own solar system and on to distant galaxies beyond."
+      },
       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."
+      },
+      sherlock: {
+        title: "The Adventures of Sherlock Holmes",
+        author: "By Sir Arthur Conan Doyle",
+        description: " Adventures of Sherlock Holmes by Sir Arthur Conan Doyle is a collection of twelve detective mysteries featuring Sherlock Holmes and Dr. Watson."
+      },
+      sapiens: {
+        title: "Sapiens: A Brief History of Humankind",
+        author: "By Yuval Noah Harari",
+        description: "Sapiens explores the history and evolution of humanity, from early Homo sapiens to modern society."
       }
     }
   },
   fr: {
     books: {
+      paleBlueDot: {
+        title: "Un point bleu pâle",
+        author: "Par Carl Sagan",
+        description: "Dans Un point bleu pâle, Sagan retrace l’histoire captivante de notre lancement dans le cosmos et évalue l’avenir qui se profile devant nous alors que nous explorons notre propre système solaire et nous dirigeons vers des galaxies lointaines au-delà."
+      },
       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."
+      },
+      sherlock: {
+        "title": "Les Aventures de Sherlock Holmes",
+        "author": "Par Sir Arthur Conan Doyle",
+        "description": "Les Aventures de Sherlock Holmes de Sir Arthur Conan Doyle est une collection de douze mystères policiers mettant en scène Sherlock Holmes et le Dr Watson."
+     },
+      sapiens: {
+        "title": "Sapiens: Une brève histoire de l’humanité",
+        "author": "Par Yuval Noah Harari",
+        "description": "Sapiens explore l’histoire et l’évolution de l’humanité, des premiers Homo sapiens à la société moderne."
       }
+
     }
   },
   es: {
     books: {
+      paleBlueDot: {
+        title: "Un punto azul pálido",
+        author: "Por Carl Sagan",
+        description: "Un punto azul pálido de Sagan traza la fascinante historia de nuestro lanzamiento al cosmos y evalúa el futuro que se cierne ante nosotros mientras nos aventuramos en nuestro propio sistema solar y avanzamos hacia galaxias distantes más allá."
+      },
       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."
+      },
+      sherlock: {
+        "title": "Las aventuras de Sherlock Holmes",
+        "author": "Por Sir Arthur Conan Doyle",
+        "description": "Las aventuras de Sherlock Holmes de Sir Arthur Conan Doyle es una colección de doce misterios detectivescos protagonizados por Sherlock Holmes y el Dr. Watson."
+      },
+      sapiens: {
+        "title": "Sapiens. De animales a dioses: Breve historia de la humanidad",
+        "author": "Por Yuval Noah Harari",
+        "description": "Sapiens explora la historia y evolución de la humanidad, desde los primeros Homo sapiens hasta la sociedad moderna."
       }
     }
   },
   zh: {
     books: {
+      paleBlueDot: {
+        title: "暗淡蓝点",
+        author: "卡尔·萨根",
+        description: "在《暗淡蓝点》中，萨根追溯了人类进入宇宙的迷人历程，并评估了在我们在探索太阳系并迈向更遥远的星系时所要面临的未来。"
+      },
       frankenstein: {
         title: "弗兰肯斯坦",
         author: "玛丽·雪莱",
         description: "《弗兰肯斯坦》讲述了科学家维克多·弗兰肯斯坦创造了一个怪物，导致悲剧性后果的故事。"
+      },
+      sherlock: {
+        "title": "福尔摩斯探案全集",
+        "author": "阿瑟·柯南·道尔爵士",
+        "description": "《福尔摩斯探案全集》是阿瑟·柯南·道尔爵士创作的十二篇侦探故事合集，主角是夏洛克·福尔摩斯和华生医生。"
+      },
+      sapiens: {
+        "title": "人类简史：从动物到上帝",
+        "author": "尤瓦尔·赫拉利",
+        "description": "《人类简史》探讨了人类从早期智人到现代社会的历史与演变。"
       }
     }
   }