Skip to content

Commit

Permalink
added language support and embed parts of gd.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@AkierRaee
AkierRaee committed Nov 8, 2024
1 parent d62f1a4 commit 8f15350
Showing 1 changed file with 46 additions and 173 deletions.
219 changes: 46 additions & 173 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,36 @@
</a>
</div>

<!-- Language-selector Toggle -->
<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>

<!-- Ensure language sync in iframe-->
<script>
function changeLanguage() {
const language = document.getElementById('language').value;
const iframe = document.getElementById('gd-iframe');
if (iframe && iframe.contentWindow) {
//set up postMessage to send the selected language to iframe
iframe.contentWindow.postMessage({ type: 'changeLanguage', language: language }, '*');
}
}

// Add event listener for dropdown change to trigger the function
document.getElementById('language').addEventListener('change', changeLanguage);
</script>

<!-- Mobile Menu Toggle Button -->
<div id="menu-toggle" title="Menu" class="text-gray-300 lg:hidden cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
Expand Down Expand Up @@ -164,222 +194,64 @@ <h2 class="display-5 page-title fw-semibold" id="top-audio-books">

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mt-4 align-items-stretch">
<!-- book card -->
<div class="col">
<div class="col" data-book="paleBlueDot">
<div class="features-card border rounded-5 p-4 text-center">
<div class="card-cover-container rounded-4 d-flex align-items-center border">
<img src="./Images/cs.jpg" class="card-img-top img-fluid" alt="Audio book cover" />
</div>
<div class="card-body mt-4">
<h4 class="card-title h-6 page-title">Pale Blue Dot</h4>
<p class="card-text">By Carl Sagan</p>
<h4 class="card-title h6 page-title" data-translate="title">Pale Blue Dot</h4>
<p class="card-text" data-translate="author">By Carl Sagan</p>
<a href="pbd.html" class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5">Discover</a>
</div>
</div>
</div>
<!-- book card -->
<div class="col">
<div class="col" data-book="frankenstein">
<div class="features-card border rounded-5 p-4 text-center">
<div class="card-cover-container rounded-4 d-flex align-items-center border">
<img src="./Images/Frankestine.jpg" class="card-img-top img-fluid" alt="Audio book cover" />
</div>
<div class="card-body mt-4">
<h4 class="card-title h6 page-title">Frankestine</h4>
<p class="card-text">By Mary Shelby</p>
<h4 class="card-title h6 page-title" data-translate="title">Frankestine</h4>
<p class="card-text" data-translate="author">By Mary Shelby</p>
<a href="fs.html" class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5">Discover</a>
</div>
</div>
</div>
<!-- book card -->
<div class="col">
<div class="col" data-book="sherlock">
<div class="features-card border rounded-5 p-4 text-center">
<div class="card-cover-container rounded-4 d-flex align-items-center border">
<img src="./Images/Adventures_Sherlock_Holmes.jpg" class="card-img-top img-fluid"
alt="Audio book cover" />
</div>
<div class="card-body mt-4">
<h4 class="card-title h6 page-title">
Adventures of Sherlock Holmes
</h4>
<p class="card-text">By Sir Arthur Conan Doyle</p>
<h4 class="card-title h6 page-title" data-translate="title">Adventures of Sherlock Holmes</h4>
<p class="card-text" data-translate="author">By Sir Arthur Conan Doyle</p>
<a href="adventures.html" class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5">Discover</a>
</div>
</div>
</div>
<!-- book card -->
<div class="col">
<div class="col" data-book="sapiens">
<div class="features-card border rounded-5 p-4 text-center">
<div class="card-cover-container rounded-4 d-flex align-items-center border">
<img src="./Images/Sapiens.jpg" class="card-img-top img-fluid" alt="Audio book cover" />
</div>
<div class="card-body mt-4">
<h4 class="card-title h6 page-title">
Sapiens: A Brief History of Humankind
</h4>
<p class="card-text">By Yuval Noah Harari</p>
<h4 class="card-title h6 page-title" data-translate="title">Sapiens: A Brief History of Humankind</h4>
<p class="card-text" data-translate="author">By Yuval Noah Harari</p>
<a href="rdpd.html" class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5">Discover</a>
</div>
</div>
</div>
</div>
</section>

<!-- Book details playlist -->
<section class="row d-flex align-items-stretch rounded-5 p-5">
<div class="col-12 col-lg-4 mb-5 mb-lg-0">
<div class="features-card border rounded-5 p-4 text-center h-100">
<!-- Cover Image -->
<div class="card-cover-container rounded-4 d-flex align-items-center border" style="height: 16rem">
<img id="img" src="./Images/GD.jpeg" alt="God Delusion Cover" class="card-img-top img-fluid" />
</div>
<!-- Book Details -->
<div class="mt-4">
<h1 class="text-2xl font-bold text-green-500">God Delusion</h1>
<h3 class="text-lg mt-2" id="author-gd1">By Richard Dawkins</h3>
<p class="text-sm mt-2">
The God Delusion is a book by English biologist Richard Dawkins
that argues against the existence of a supernatural creator.
</p>
</div>

<hr class="opacity-50 w-60 mt-4 mx-auto" />

<!-- Favorite Button -->
<div class="mt-3 flex justify-center icon-action-btn-container">
<i class="bi bi-heart mx-4 icon-action-btn tooltip-parent tooltip-bottom" id="favourite-btn"><span
class="tooltip" id="favourite">Save to Favourites</span></i>
<i class="bi bi-share mx-4 icon-action-btn tooltip-parent tooltip-bottom" id="share-btn"
data-bs-target="#exampleModalToggle" data-bs-toggle="modal"><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" id="view">View comments</span></i>
</div>
<button id="share-link"
class="bg-green-500 text-white font-semibold py-2 px-4 rounded hover:bg-green-600 transition duration-200 mt-4">
Share
</button>
</div>
</div>
<div class="col-12 col-lg-8 ps-4">
<!-- playlist -->
<div class="eatures-card border rounded-5 p-4 text-center h-100">
<ul id="playlist" class="playlist list-none text-left overflow-auto m-2 mb-4">
<li class="adiobk-sub-item d-flex justify-content-between flex-column" data-src="audio/part1.mp3">
<div class="d-flex justify-content-between">
<p>Introduction: God Delusion</p>
<a href="audio/part1.mp3" download><i class="bi bi-cloud-arrow-down-fill"></i></a>
</div>
<div class="bg-gray-700 flex-1 rounded-full ring-1">
<div class="progress-bar bg-red bg-white rounded-full"></div>
</div>
</li>
<li class="adiobk-sub-item d-flex justify-content-between flex-column" data-src="audio/part2.mp3">
<div class="d-flex justify-content-between">
<p>Part 2</p>
<a href="audio/part2.mp3" download><i class="bi bi-cloud-arrow-down-fill"></i></a>
</div>
<div class="bg-gray-700 flex-1 rounded-full ring-1">
<div class="progress-bar bg-red bg-white rounded-full"></div>
</div>
</li>
<li class="adiobk-sub-item d-flex justify-content-between flex-column" data-src="audio/part3.mp3">
<div class="d-flex justify-content-between">
<p>Part 3</p>
<a href="audio/part3.mp3" download><i class="bi bi-cloud-arrow-down-fill"></i></a>
</div>
<div class="bg-gray-700 flex-1 rounded-full ring-1">
<div class="progress-bar bg-red bg-white rounded-full"></div>
</div>
</li>
<li class="adiobk-sub-item d-flex justify-content-between flex-column" data-src="audio/part4.mp3">
<div class="d-flex justify-content-between">
<p>Part 4</p>
<a href="audio/part4.mp3" download><i class="bi bi-cloud-arrow-down-fill"></i></a>
</div>
<div class="bg-gray-700 flex-1 rounded-full ring-1">
<div class="progress-bar bg-red bg-white rounded-full"></div>
</div>
</li>
<li class="adiobk-sub-item d-flex justify-content-between flex-column" data-src="audio/part5.mp3">
<div class="d-flex justify-content-between">
<p>Part 5</p>
<a href="audio/part5.mp3" download><i class="bi bi-cloud-arrow-down-fill"></i></a>
</div>
<div class="bg-gray-700 flex-1 rounded-full ring-1">
<div class="progress-bar bg-red bg-white rounded-full"></div>
</div>
</li>
<li class="adiobk-sub-item d-flex justify-content-between flex-column" data-src="audio/part6.mp3">
<div class="d-flex justify-content-between">
<p>Part 6</p>

<a href="audio/part6.mp3" download><i class="bi bi-cloud-arrow-down-fill"></i></a>
</div>
<div class="bg-gray-700 flex-1 rounded-full ring-1">
<div class="progress-bar bg-red bg-white rounded-full"></div>
</div>
</li>
<li class="adiobk-sub-item d-flex justify-content-between flex-column" data-src="audio/part7.mp3">
<div class="d-flex justify-content-between">
<p>Part 7</p>

<a href="audio/part7.mp3" download><i class="bi bi-cloud-arrow-down-fill"></i></a>
</div>
<div class="bg-gray-700 flex-1 rounded-full ring-1">
<div class="progress-bar bg-red bg-white rounded-full"></div>
</div>
</li>
</ul>

<div class="player container rounded-5">
<audio id="audio-player" class="mt-4 mx-auto"></audio>
<span id="currentTime">0:00</span>
<input type="range" id="seekSlider" min="0" value="0" />
<span id="duration">0:00</span>
<!-- Speed control -->
<div class="relative inline-block">
<span id="speedButton"
class="cursor-pointer text-green-300 font-semibold rounded-lg py-1 px-3 hover:text-green-200 transition">1x</span>

<!-- Dropdown Menu -->
<ul id="speedDropdown" class="absolute hidden bg-gray-800 shadow-md rounded-xl mt-2 w-20">
<li class="px-4 py-2 cursor-pointer hover:bg-gray-700 rounded-xl text-green-300" data-speed="0.5">
0.5x
</li>
<li class="px-4 py-2 cursor-pointer hover:bg-gray-700 rounded-xl text-green-300" data-speed="1">
1x
</li>
<li class="px-4 py-2 cursor-pointer hover:bg-gray-700 rounded-xl text-green-300" data-speed="1.5">
1.5x
</li>
<li class="px-4 py-2 cursor-pointer hover:bg-gray-700 rounded-xl text-green-300" data-speed="2">
2x
</li>
</ul>
</div>
</div>

<!-- Audio Players Controls Buttons -->
<div class="ctrl-player mt-4 mx-auto" id="ctrl-player">
<div class="ctrl-buttons d-flex justify-content-evenly align-items-center">
<div class="ctrl-button ctrl-button-small" id="volume-down">
<i class="bi bi-volume-down-fill"></i>
</div>
<div class="ctrl-button ctrl-button-medium" id="fast-backward">
<span>-30</span>
</div>
<div class="ctrl-button ctrl-button-large d-flex justify-center" id="ctrl-play">
<i class="bi bi-play-fill"></i>
</div>
<div class="ctrl-button ctrl-button-medium" id="fast-forward">
<span>+30</span>
</div>
<div class="ctrl-button ctrl-button-small" id="volume-up">
<i class="bi bi-volume-up-fill"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Embed gd.html -->
<section class="row rounded-5 p-5 mt-5">
<iframe id="gd-iframe" src="gd.html" width="150%" height="850px" frameborder="0"></iframe>
</section>

<!-- Book buttons navigations -->
Expand Down Expand Up @@ -427,6 +299,7 @@ <h2 class="display-5 page-title fw-semibold mb-6 text-center" id="share">
<!-- 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>
Expand Down

0 comments on commit 8f15350

Please sign in to comment.