Skip to content

Commit

Permalink
Merge pull request Ctoic#28 from YakeDev/feature/yakeCodeOrganisation
Browse files Browse the repository at this point in the history 
Consolidation of CSS and JavaScript files for improved maintenance
  • Loading branch information
@Ctoic
Ctoic authored Oct 11, 2024
2 parents 61f99c0 + 627faf3 commit 621b6cc
Show file tree
Hide file tree
Showing 6 changed files with 319 additions and 1,219 deletions.
201 changes: 3 additions & 198 deletions fs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,134 +3,12 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<title>My Favorite Books Music App</title>
<style>
body {
transition: background-color 0.3s, color 0.3s;
}

body.light-theme {
background-color: #f0f0f0;
color: #333;
}

body.dark-theme {
background-color: #121212;
color: #b3b3b3;
}

h1, h2, h3 {
color: inherit;
}

#playlist li:hover {
background-color: #282828;
color: #1DB954;
cursor: pointer;
}

#audio-player {
background-color: #282828;
color: #1DB954;
}

button {
transition: background-color 0.3s;
}

button:hover {
background-color: #1ed760;
}

footer {
background-color: #191414;
color: #b3b3b3;
}

footer a:hover {
color: #1DB954;
}

.book-card {
background-color: #181818;
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
}

.book-card:hover {
transform: translateY(-10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.favorite-button {
transition: color 0.3s;
}

.favorite-button.active {
color: #1DB954;
}

.favorite-button:hover {
color: #1DB954;
}

.light-theme .book-card,
.light-theme #playlist,
.light-theme .bg-gray-800 {
background-color: #f8f8f8;
}

.light-theme .text-gray-300 {
color: #333;
}

.light-theme .bg-gray-700 {
background-color: #e0e0e0;
}

/* Play/Pause button animation */
.play-pause-button {
display: inline-block;
width: 50px;
height: 50px;
background-color: #1DB954;
border-radius: 50%;
cursor: pointer;
position: relative;
transition: background-color 0.3s;
}

.play-pause-button.play::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 10px 0 10px 18px;
border-color: transparent transparent transparent #fff;
}

.play-pause-button.pause::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 24px;
background-color: #fff;
box-shadow: 16px 0 0 #fff;
}

.play-pause-button:hover {
background-color: #1ed760;
}
</style>
</head>
<body class="bg-gray-900 text-gray-300 dark-theme">
<nav class="bg-gray-800 p-4">
Expand Down Expand Up @@ -238,81 +116,8 @@ <h2 class="text-xl font-bold">Leave a Comment</h2>
</footer>

<!-- JS Scripts -->
<script>
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
const favoriteButton = document.getElementById('favorite-button');
const audioPlayer = document.getElementById('audio-player');
const playlist = document.getElementById('playlist');
const playPauseButton = document.getElementById('playPauseBtn'); // Updated ID for Play/Pause button

// Toggle theme
themeToggle.addEventListener('click', () => {
body.classList.toggle('dark-theme');
body.classList.toggle('light-theme');
});

// Toggle favorite button
favoriteButton.addEventListener('click', () => {
favoriteButton.classList.toggle('active');
});

// Playlist functionality
playlist.addEventListener('click', (event) => {
if (event.target.tagName === 'LI') {
const src = event.target.getAttribute('data-src');
audioPlayer.src = src;
audioPlayer.play();
}
});

// Play/Pause button functionality
playPauseButton.addEventListener('click', () => {
if (audioPlayer.paused) {
audioPlayer.play();
playPauseButton.classList.remove('play');
playPauseButton.classList.add('pause');
} else {
audioPlayer.pause();
playPauseButton.classList.remove('pause');
playPauseButton.classList.add('play');
}
});

// Handle comment submission
const commentForm = document.getElementById('comment-form');
const commentSection = document.getElementById('comment-section');

commentForm.addEventListener('submit', (event) => {
event.preventDefault();

const name = document.getElementById('name').value;
const comment = document.getElementById('comment').value;

if (name && comment) {
const newComment = document.createElement('div');
newComment.classList.add('bg-gray-700', 'p-2', 'rounded');
newComment.innerHTML = `<strong>${name}:</strong> ${comment}`;
commentSection.appendChild(newComment);

// Clear the form
document.getElementById('name').value = '';
document.getElementById('comment').value = '';
}
});

// Mobile menu toggle
const menuToggle = document.getElementById('menu-toggle');
const menu = document.getElementById('menu');
const menuClose = document.getElementById('menu-close');

menuToggle.addEventListener('click', () => {
menu.classList.toggle('scale-0');
});

menuClose.addEventListener('click', () => {
menu.classList.toggle('scale-0');
});
<script src="script.js">

</script>

</body>
Expand Down
Loading

0 comments on commit 621b6cc

Please sign in to comment.