From 7e9320ab578f7a2f252646893f7e1e48ba0741c7 Mon Sep 17 00:00:00 2001
From: Jay Shukla <75677270+JayShukla8@users.noreply.github.com>
Date: Thu, 10 Oct 2024 14:38:23 +0530
Subject: [PATCH 1/3] Update README.md

changed the url for image so that image is shown properly.
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d855697..9c9352d 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ LisBook is all about simplicity and convenience, making your audiobook experienc
 
 ## Screenshots
 
-![LisBook Screenshot](images/SC2.png)
+![LisBook Screenshot](Images/SC2.png)
 
 ## How to Contribute to LisBook During Hacktoberfest 🎉
 

From 92d17527a3d4fcc455a2b1c809e203664d9bb2f5 Mon Sep 17 00:00:00 2001
From: Jules-2MJ <julesmukadi.dev@gmail.com>
Date: Thu, 10 Oct 2024 15:37:52 +0100
Subject: [PATCH 2/3] feat: Make audio playlist div full-width

- Modified the main container to use `w-full` for full-width display
- Removed margin classes to allow the div to span the entire page width
- Enhanced list item styles for better hover effects and user experience
- Added a play/pause button with consistent styling
---
 index.html | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 075d81e..4798dd9 100644
--- a/index.html
+++ b/index.html
@@ -190,21 +190,25 @@ <h3 class="text-lg mt-2">By Richard Dawkins</h3>
     </div>
 
     <!-- Playlist Section -->
-    <div class="container mx-auto mt-10 text-center">
-        <ul id="playlist" class="list-none mt-5 bg-gray-800 rounded-lg shadow-lg p-4">
-            <li class="p-2 hover:bg-gray-700" data-src="audio/part1.mp3">Introduction: God Delusion</li>
-            <li class="p-2 hover:bg-gray-700" data-src="audio/part2.mp3">Part 2</li>
-            <li class="p-2 hover:bg-gray-700" data-src="audio/part3.mp3">Part 3</li>
-            <li class="p-2 hover:bg-gray-700" data-src="audio/part4.mp3">Part 4</li>
-            <li class="p-2 hover:bg-gray-700" data-src="audio/part5.mp3">Part 5</li>
-            <li class="p-2 hover:bg-gray-700" data-src="audio/part6.mp3">Part 6</li>
-            <li class="p-2 hover:bg-gray-700" data-src="audio/part7.mp3">Part 7</li>
+    <div class="w-full mt-10 text-center bg-gray-800 p-8 rounded-lg shadow-lg">
+        <h2 class="text-2xl font-bold text-green-500 mb-6">Audio Playlist</h2>
+        <ul id="playlist" class="list-none mt-5 bg-gray-900 rounded-lg shadow-lg p-4 space-y-2">
+            <li class="p-4 hover:bg-gray-700 cursor-pointer transition duration-300 ease-in-out" data-src="audio/part1.mp3">Introduction: God Delusion</li>
+            <li class="p-4 hover:bg-gray-700 cursor-pointer transition duration-300 ease-in-out" data-src="audio/part2.mp3">Part 2</li>
+            <li class="p-4 hover:bg-gray-700 cursor-pointer transition duration-300 ease-in-out" data-src="audio/part3.mp3">Part 3</li>
+            <li class="p-4 hover:bg-gray-700 cursor-pointer transition duration-300 ease-in-out" data-src="audio/part4.mp3">Part 4</li>
+            <li class="p-4 hover:bg-gray-700 cursor-pointer transition duration-300 ease-in-out" data-src="audio/part5.mp3">Part 5</li>
+            <li class="p-4 hover:bg-gray-700 cursor-pointer transition duration-300 ease-in-out" data-src="audio/part6.mp3">Part 6</li>
+            <li class="p-4 hover:bg-gray-700 cursor-pointer transition duration-300 ease-in-out" data-src="audio/part7.mp3">Part 7</li>
         </ul>
-        <audio id="audio-player" controls class="mt-4 mx-auto"></audio>
-
+        
+        <audio id="audio-player" controls class="mt-6 mx-auto bg-gray-700 rounded-lg"></audio>
+    
         <!-- Play/Pause Button with Animation -->
         <div class="mt-4 flex justify-center">
-            <button id="playPauseBtn" class="play"></button> <!-- Added Play/Pause button here -->
+            <button id="playPauseBtn" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
+                Play/Pause
+            </button>
         </div>
     </div>
 
@@ -309,4 +313,4 @@ <h2 class="text-xl font-bold">Leave a Comment</h2>
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file

From 6a3187eccd7ae6fae6b3b13388b6ebeb18fca5ea Mon Sep 17 00:00:00 2001
From: Jules-2MJ <julesmukadi.dev@gmail.com>
Date: Thu, 10 Oct 2024 15:48:18 +0100
Subject: [PATCH 3/3] feat: Refactor comment form styling

- Updated the comment form to match the styling of the new design.
- Added background color, padding, rounded corners, and shadow effects to the container.
- Enhanced input fields and buttons with consistent styling, including focus effects and spacing.
- Ensured the comment display section remains functional and visually aligned with the new design.
---
 index.html | 38 +++++++++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 4798dd9..e795ab3 100644
--- a/index.html
+++ b/index.html
@@ -213,16 +213,36 @@ <h2 class="text-2xl font-bold text-green-500 mb-6">Audio Playlist</h2>
     </div>
 
     <!-- Comments Section -->
-    <div class="container mx-auto mt-10 text-center">
-        <h2 class="text-xl font-bold">Leave a Comment</h2>
-        <form id="comment-form" class="mt-4">
-            <input type="text" id="name" placeholder="Your Name" class="w-full p-2 bg-gray-700 rounded mb-2">
-            <textarea id="comment" placeholder="Your Comment" class="w-full p-2 bg-gray-700 rounded mb-2"></textarea>
-            <button type="submit" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Submit</button>
+    <div class="w-full mt-10 text-center bg-gray-800 p-8 rounded-lg shadow-lg">
+        <h2 class="text-2xl font-bold text-green-500 mb-6">Leave a Comment</h2>
+        <form id="comment-form" class="space-y-4">
+            <!-- Name input -->
+            <input 
+                type="text" 
+                id="name" 
+                placeholder="Your Name" 
+                class="w-full p-4 bg-gray-700 text-white rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 transition duration-300 ease-in-out"
+            >
+    
+            <!-- Comment textarea -->
+            <textarea 
+                id="comment" 
+                placeholder="Your Comment" 
+                class="w-full p-4 bg-gray-700 text-white rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 transition duration-300 ease-in-out"
+                rows="5"
+            ></textarea>
+    
+            <!-- Submit button placed at the end, aligned to the right -->
+            <div class="mt-6 flex justify-end">
+                <button type="submit" 
+                    class="bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-full shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
+                    Submit
+                </button>
+            </div>
         </form>
-
-        <!-- Display comments -->
-        <div id="comment-section" class="mt-4 space-y-2">
+    
+        <!-- Display comments section -->
+        <div id="comment-section" class="mt-8 space-y-4">
             <!-- New comments will appear here -->
         </div>
     </div>