forked from Ctoic/Lisbook
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improved theme management and updated interface
- Added dynamic background color management for `playlist-card` elements, depending on theme (light or dark). - CSS updated to support `light-theme` and `dark-theme` classes, ensuring smooth color transition when changing theme. - Corrected theme-toggle behavior to ensure a consistent experience across the page. - Harmonization of text and background colors in both themes. Objective: Improve UX by ensuring that all page elements react correctly to theme changes and by harmonizing the user interface.
- Loading branch information
Showing
4 changed files
with
68 additions
and
54 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 |
|---|---|---|
| @@ -1,53 +1,60 @@ | ||
| document.addEventListener('DOMContentLoaded', function () { | ||
| const playlistItems = document.querySelectorAll('#playlist li'); | ||
| const audioPlayer = document.getElementById('audio-player'); | ||
| const themeToggle = document.getElementById('theme-toggle'); | ||
| const menuToggle = document.getElementById("menu-toggle"); | ||
| const menuClose = document.getElementById("menu-close"); | ||
| const menu = document.getElementById("menu"); | ||
|
|
||
| playlistItems.forEach(item => { | ||
| item.addEventListener('click', function () { | ||
| audioPlayer.src = item.getAttribute('data-src'); | ||
| audioPlayer.play(); | ||
| }); | ||
| }); | ||
|
|
||
| // Comment Submission | ||
| document.getElementById('comment-form').addEventListener('submit', function (e) { | ||
| e.preventDefault(); | ||
| const username = document.getElementById('username').value; | ||
| const comment = document.getElementById('comment').value; | ||
|
|
||
| const commentHTML = `<div class="bg-gray-700 text-white p-4 rounded-lg"> | ||
| document.addEventListener("DOMContentLoaded", function () { | ||
| const playlistItems = document.querySelectorAll("#playlist li"); | ||
| const audioPlayer = document.getElementById("audio-player"); | ||
| const themeToggle = document.getElementById("theme-toggle"); | ||
| const menuToggle = document.getElementById("menu-toggle"); | ||
| const menuClose = document.getElementById("menu-close"); | ||
| const menu = document.getElementById("menu"); | ||
|
|
||
| playlistItems.forEach((item) => { | ||
| item.addEventListener("click", function () { | ||
| audioPlayer.src = item.getAttribute("data-src"); | ||
| audioPlayer.play(); | ||
| }); | ||
| }); | ||
|
|
||
| // Comment Submission | ||
| document | ||
| .getElementById("comment-form") | ||
| .addEventListener("submit", function (e) { | ||
| e.preventDefault(); | ||
| const username = document.getElementById("username").value; | ||
| const comment = document.getElementById("comment").value; | ||
|
|
||
| const commentHTML = `<div class="bg-gray-700 text-white p-4 rounded-lg"> | ||
| <strong>${username}:</strong> | ||
| <p>${comment}</p> | ||
| </div>`; | ||
|
|
||
| document.getElementById('comments-list').insertAdjacentHTML('beforeend', commentHTML); | ||
|
|
||
| // Reset form | ||
| document.getElementById('comment-form').reset(); | ||
| }); | ||
| // Theme Toggle | ||
| themeToggle.addEventListener('change', function() { | ||
| if (this.checked) { | ||
| document.body.classList.remove('dark-mode'); | ||
| document.body.classList.add('light-mode'); | ||
| } else { | ||
| document.body.classList.remove('light-mode'); | ||
| document.body.classList.add('dark-mode'); | ||
| } | ||
| }); | ||
|
|
||
| //Mobile menu toggle | ||
| menuToggle.addEventListener("click", () => { | ||
| menu.classList.remove("scale-0"); | ||
| menu.classList.add("scale-100"); | ||
| }); | ||
|
|
||
| menuClose.addEventListener("click", () => { | ||
| menu.classList.add("scale-0"); | ||
| menu.classList.remove("scale-100"); | ||
| }); | ||
| }); | ||
| document | ||
| .getElementById("comments-list") | ||
| .insertAdjacentHTML("beforeend", commentHTML); | ||
|
|
||
| // Reset form | ||
| document.getElementById("comment-form").reset(); | ||
| }); | ||
|
|
||
| // Theme Toggle | ||
| themeToggle.addEventListener("click", function () { | ||
| if (document.body.classList.contains("dark-theme")) { | ||
| document.body.classList.remove("dark-theme"); | ||
| document.body.classList.add("light-theme"); | ||
| console.log("light"); | ||
| } else { | ||
| document.body.classList.remove("light-theme"); | ||
| document.body.classList.add("dark-theme"); | ||
| console.log("dark"); | ||
| } | ||
| }); | ||
|
|
||
| //Mobile menu toggle | ||
| menuToggle.addEventListener("click", () => { | ||
| menu.classList.remove("scale-0"); | ||
| menu.classList.add("scale-100"); | ||
| }); | ||
|
|
||
| menuClose.addEventListener("click", () => { | ||
| menu.classList.add("scale-0"); | ||
| menu.classList.remove("scale-100"); | ||
| }); | ||
| }); |
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