Skip to content

Commit

Permalink
Merge pull request Ctoic#54 from IngaleChinmay04/feat_downloadPodcast
Browse files Browse the repository at this point in the history 
Added Download button to all podcast
  • Loading branch information
@Ctoic
Ctoic authored Oct 12, 2024
2 parents ee129b0 + 757feae commit 29b2021
Show file tree
Hide file tree
Showing 4 changed files with 219 additions and 36 deletions.
47 changes: 46 additions & 1 deletion fs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
/>

<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<title>My Favorite Books Music App</title>
</head>
<body class="bg-gray-900 text-gray-300 dark-theme">
Expand Down Expand Up @@ -138,45 +141,87 @@ <h3 class="text-lg mt-2">By Mary Shelby</h3>
>
<li class="p-2 hover:bg-gray-700" data-src="audio/FS/01.mp3">
Introduction
<a href="audio/FS/01.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="p-2 hover:bg-gray-700" data-src="audio/FS/02.mp3">
Part 2
<a href="audio/FS/02.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="p-2 hover:bg-gray-700" data-src="audio/FS/03.mp3">
Part 3
<a href="audio/FS/03.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="p-2 hover:bg-gray-700" data-src="audio/part4.mp3">
Part 4
<a href="audio/part4.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="p-2 hover:bg-gray-700" data-src="audio/part5.mp3">
Part 5
<a href="audio/part5.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="p-2 hover:bg-gray-700" data-src="audio/part6.mp3">
Part 6
<a href="audio/part6.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="p-2 hover:bg-gray-700" data-src="audio/part7.mp3">
Part 7
<a href="audio/part7.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="p-2 hover:bg-gray-700" data-src="audio/part8.mp3">
Part 8
<a href="audio/part8.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="p-2 hover:bg-gray-700" data-src="audio/part9.mp3">
Part 9
<a href="audio/part9.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="p-2 hover:bg-gray-700" data-src="audio/part10.mp3">
Part 10
<a href="audio/part10.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="p-2 hover:bg-gray-700" data-src="audio/part11.mp3">
Part 11
<a href="audio/part11.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="p-2 hover:bg-gray-700" data-src="audio/part12.mp3">
Part 12
<a href="audio/part12.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="p-2 hover:bg-gray-700" data-src="audio/part13.mp3">
Part 13
<a href="audio/part13.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="p-2 hover:bg-gray-700" data-src="audio/part14.mp3">
Part 14
<a href="audio/part14.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
</ul>
<audio id="audio-player" controls class="mt-4 mx-auto"></audio>
Expand Down
147 changes: 112 additions & 35 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<title>My Favorite Books Music App</title>
</head>

Expand Down Expand Up @@ -45,17 +49,26 @@
/>
</svg>
</div>
<a href="./index.html" class="text-gray-300 hover:text-green-500 my-auto"
<a
href="./index.html"
class="text-gray-300 hover:text-green-500 my-auto"
>Home</a
>

<a href="./index.html" class="text-gray-300 hover:text-green-500 my-auto"
<a
href="./index.html"
class="text-gray-300 hover:text-green-500 my-auto"
>Previous</a
>
<a href="./pbd.html" class="text-gray-300 hover:text-green-500 my-auto"
<a
href="./pbd.html"
class="text-gray-300 hover:text-green-500 my-auto"
>Next</a
>
<button id="theme-toggle" class="text-gray-300 rounded tooltip-parent my-auto tooltip-left">
<button
id="theme-toggle"
class="text-gray-300 rounded tooltip-parent my-auto tooltip-left"
>
<span class="tooltip">Switch theme</span>
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -99,10 +112,12 @@
</nav>

<div class="container p-4 w-full">

<p class="text-2xl mt-3 pb-5 ps-3 font-bold">Top Audio Books</p>

<ul id="audio-books-list" class="space-x-2 space-y-2 flex flex-wrap w-full mx-auto"></ul>
<ul
id="audio-books-list"
class="space-x-2 space-y-2 flex flex-wrap w-full mx-auto"
></ul>
</div>

<!-- Book Card Display -->
Expand Down Expand Up @@ -132,9 +147,21 @@ <h3 class="text-lg mt-2">By Richard Dawkins</h3>

<!-- Favorite Button -->
<div class="mt-4 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">Save to Favourites</span></i>
<i class="bi bi-share mx-4 icon-action-btn tooltip-parent tooltip-bottom" id="share-btn"><span class="tooltip">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>
<i
class="bi bi-heart mx-4 icon-action-btn tooltip-parent tooltip-bottom"
id="favourite-btn"
><span class="tooltip">Save to Favourites</span></i
>
<i
class="bi bi-share mx-4 icon-action-btn tooltip-parent tooltip-bottom"
id="share-btn"
><span class="tooltip">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
>
</div>
</div>
<!-- playlist -->
Expand All @@ -145,33 +172,75 @@ <h3 class="text-lg mt-2">By Richard Dawkins</h3>
id="playlist"
class="playlist list-none rounded-lg text-left overflow-auto"
>
<li class="adiobk-sub-item hover:bg-gray-700" data-src="audio/part1.mp3">
<li
class="adiobk-sub-item hover:bg-gray-700"
data-src="audio/part1.mp3"
>
Introduction: God Delusion
<a href="audio/part1.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="adiobk-sub-item hover:bg-gray-700" data-src="audio/part2.mp3">
<li
class="adiobk-sub-item hover:bg-gray-700"
data-src="audio/part2.mp3"
>
Part 2
<a href="audio/part2.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="adiobk-sub-item hover:bg-gray-700" data-src="audio/part3.mp3">
<li
class="adiobk-sub-item hover:bg-gray-700"
data-src="audio/part3.mp3"
>
Part 3
<a href="audio/part3.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="adiobk-sub-item hover:bg-gray-700" data-src="audio/part4.mp3">
<li
class="adiobk-sub-item hover:bg-gray-700"
data-src="audio/part4.mp3"
>
Part 4
<a href="audio/part4.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="adiobk-sub-item hover:bg-gray-700" data-src="audio/part5.mp3">
<li
class="adiobk-sub-item hover:bg-gray-700"
data-src="audio/part5.mp3"
>
Part 5
<a href="audio/part5.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="adiobk-sub-item hover:bg-gray-700" data-src="audio/part6.mp3">
<li
class="adiobk-sub-item hover:bg-gray-700"
data-src="audio/part6.mp3"
>
Part 6
<a href="audio/part6.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li class="adiobk-sub-item hover:bg-gray-700" data-src="audio/part7.mp3">
<li
class="adiobk-sub-item hover:bg-gray-700"
data-src="audio/part7.mp3"
>
Part 7
<a href="audio/part7.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
</ul>

<div class="player container rounded-xl">
<div class="audio-img"></div>
<audio id="audio-player" controls class="mt-4 mx-auto"></audio>
</div>
</div>

<!-- Play/Pause Button with Animation -->
<div class="mt-4 flex justify-center">
Expand Down Expand Up @@ -224,35 +293,43 @@ <h2 class="text-center text-2xl mb-6">Share Your Thoughts</h2>
<footer class="bg-gray-900 p-4 text-center mt-10">
<div class="text-gray-500">&copy; 2024 Lisbook | All Rights Reserved</div>
</footer>

<!-- Template for the book card -->
<template id="book-card-template">


<li id="audio-book-list-item flex-row items-center" class="md:w-60 w-full">
<div class="book-card flex flex-row p-4 sm:p-3 rounded-lg shadow-lg w-full h-full md:flex-col items-center md:items-start">
<li
id="audio-book-list-item flex-row items-center"
class="md:w-60 w-full"
>
<div
class="book-card flex flex-row p-4 sm:p-3 rounded-lg shadow-lg w-full h-full md:flex-col items-center md:items-start"
>
<!-- Cover Image -->
<div class="container w-14 md:w-40 md:h-40 flex items-center md:w-full"
>
<img
id="img"
src=""
alt=""
class="rounded-lg w-full h-full aspect-square object-cover"
/>
</div>
<div
class="container w-14 md:w-40 md:h-40 flex items-center md:w-full"
>
<img
id="img"
src=""
alt=""
class="rounded-lg w-full h-full aspect-square object-cover"
/>
</div>

<!-- Book Details -->
<div class="md:mt-2 ps-4 md:px-1 text-wrap flex-col items-center" id="text-content">
<p class="md:text-lg text-sm font-medium text-green-500 w-32 truncate sm:w-full align-middle" id="book-title"></p>
<div
class="md:mt-2 ps-4 md:px-1 text-wrap flex-col items-center"
id="text-content"
>
<p
class="md:text-lg text-sm font-medium text-green-500 w-32 truncate sm:w-full align-middle"
id="book-title"
></p>
<p class="text-sm truncate align-middle" id="book-author"></p>
</div>
</div>
</li>

</template>


<!-- JS Scripts -->
<script src="./script.js"></script>
</body>
Expand Down
15 changes: 15 additions & 0 deletions pbd.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,30 +143,45 @@ <h3 class="text-lg mt-2">By Carl Sagan</h3>
data-src="audio/PaleBlueDot/Introduction.mp3"
>
Introduction: Pale Blue Dot
<a href="audio/PaleBlueDot/Introduction.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li
class="p-2 hover:bg-gray-700"
data-src="audio/PaleBlueDot/chap-1.mp3"
>
Chapter 1: The Shores of the Cosmic Ocean
<a href="audio/PaleBlueDot/chap-1.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li
class="p-2 hover:bg-gray-700"
data-src="audio/PaleBlueDot/Chap-2.mp3"
>
Chapter 2: One Voice in the Cosmic Fugue
<a href="audio/PaleBlueDot/Chap-2.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li
class="p-2 hover:bg-gray-700"
data-src="audio/PaleBlueDot/chap-3.mp3"
>
Chapter 3: The Harmony of the Worlds
<a href="audio/PaleBlueDot/chap-3.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
<li
class="p-2 hover:bg-gray-700"
data-src="audio/PaleBlueDot/chap-4.mp3"
>
Chapter 4: Heaven and Hell
<a href="audio/PaleBlueDot/chap-4.mp3" download
><i class="fa fa-download" style="font-size: 24px; color: red"></i
></a>
</li>
</ul>
<audio id="audio-player" controls class="mt-4 mx-auto"></audio>
Expand Down
Loading

0 comments on commit 29b2021

Please sign in to comment.