Skip to content

Commit

Permalink
Refactor codebase
Browse files Browse the repository at this point in the history
  • Loading branch information
shvpnd committed Aug 28, 2024
1 parent 251e3e3 commit bcaac5b
Show file tree
Hide file tree
Showing 10 changed files with 545 additions and 285 deletions.
61 changes: 49 additions & 12 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,25 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snarr | Dashboard</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style/base.css">
<link rel="stylesheet" href="style/modal.css">
<link rel="stylesheet" href="style/pomodoro.css">
<link rel="stylesheet" href="style/layout.css">
<link rel="stylesheet" href="style/spotify.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- Font Awesome -->
</head>
<body>
<div class="loading-overlay">
<img src="logo_resp.png" alt="Loading..." class="loading-logo">
<div class="loading-overlay">
<img src="logo_resp.png" alt="Loading..." class="loading-logo">
<div class="loading-bar">
<div class="loading-progress" id="loadingProgress"></div>
</div>
</div>
</div>
<div class="content">
<!-- Your existing content goes here -->
<img src="logo.png" alt="Logo" class="logo">
<div class="settings-icon" id="settingsIcon"></div>
<div class="settings-icon" id="settingsIcon"><i class="fas fa-cog"></i></div> <!-- Settings icon -->
<div class="pomodoro">
<div id="timer" class="timer">
<span id="minutes">25</span>:<span id="seconds">00</span>
Expand All @@ -31,9 +40,9 @@
<div class="modal-sidebar">
<ul>
<li data-category="pomodoro">Pomodoro</li>
<li data-category="theme">Theme</li>
<li data-category="sounds">Sounds</li>
<li data-category="music">Music</li>
<li data-category="backgrounds">Backgrounds</li>
<li data-category="feedback">Feedback & Support</li>
</ul>
</div>
Expand All @@ -46,11 +55,7 @@
<label for="breakDuration">Break Duration (minutes):</label>
<input type="range" id="breakDuration" min="1" max="30" value="5" step="1">
<span id="breakValue">5 minutes</span>
</div>
<div class="settings-category" id="themes">
<h3>Select Theme</h3>
<p>Theme selection is currently disabled.</p>
</div>
</div>
<div class="settings-category" id="sounds" style="display: none;">
<strong>Sound Settings</strong>
<label for="soundVolume">Volume:</label>
Expand All @@ -59,17 +64,49 @@ <h3>Select Theme</h3>
<div class="settings-category" id="music" style="display: none;">
<strong>Music Settings</strong>
<p>Manage your music preferences here.</p>
<label for="playlistLink">Spotify Playlist Link:</label>
<input type="text" id="playlistLink" placeholder="Paste your Spotify playlist link here">
<button id="updatePlaylist">Update Playlist</button>
</div>
<div class="settings-category" id="backgrounds" style="display: none;">
<strong>Background Settings</strong>
<div class="background-thumbnails">
<img src="bg/image1.jpg" alt="Background 1" class="thumbnail" data-image="image1.jpg">
<img src="bg/image2.jpg" alt="Background 2" class="thumbnail" data-image="image2.jpg">
<img src="bg/image3.jpg" alt="Background 3" class="thumbnail" data-image="image3.jpg">
<img src="bg/image4.jpg" alt="Background 4" class="thumbnail" data-image="image4.jpg">
<img src="bg/image5.jpg" alt="Background 5" class="thumbnail" data-image="image5.jpg">
<img src="bg/image6.jpg" alt="Background 6" class="thumbnail" data-image="image6.jpg">
<img src="bg/image7.jpg" alt="Background 7" class="thumbnail" data-image="image7.jpg">
<img src="bg/image8.jpg" alt="Background 8" class="thumbnail" data-image="image8.jpg">
<img src="bg/image9.jpg" alt="Background 9" class="thumbnail" data-image="image9.jpg">
<img src="bg/image10.jpg" alt="Background 10" class="thumbnail" data-image="image10.jpg">
<img src="bg/image11.jpg" alt="Background 11" class="thumbnail" data-image="image11.jpg">
<img src="bg/image12.jpg" alt="Background 12" class="thumbnail" data-image="image12.jpg">
<img src="bg/image13.jpg" alt="Background 13" class="thumbnail" data-image="image13.jpg">
<img src="bg/image14.jpg" alt="Background 14" class="thumbnail" data-image="image14.jpg">
<img src="bg/image15.jpg" alt="Background 15" class="thumbnail" data-image="image15.jpg">
<img src="bg/image16.jpg" alt="Background 16" class="thumbnail" data-image="image16.jpg">
<img src="bg/image17.jpg" alt="Background 17" class="thumbnail" data-image="image17.jpg">
<img src="bg/image18.jpg" alt="Background 18" class="thumbnail" data-image="image18.jpg">
<img src="bg/image19.jpg" alt="Background 19" class="thumbnail" data-image="image19.jpg">
<img src="bg/image20.jpg" alt="Background 20" class="thumbnail" data-image="image20.jpg">
<img src="bg/image21.jpg" alt="Background 21" class="thumbnail" data-image="image21.jpg">
<img src="bg/image22.jpg" alt="Background 22" class="thumbnail" data-image="image22.jpg">
</div>
</div>
<div class="settings-category" id="feedback" style="display: none;">
<strong>Feedback & Support</strong>
<p>Contact us for support or feedback.</p>
</div>
</div>
</div>
</div>
</div>
<div class="fullscreen-icon" id="fullscreenIcon"><i class="fas fa-expand"></i></div> <!-- Fullscreen icon -->
<script src="script/main.js"></script>
<script src="script/pomodoro.js"></script>
<script src="script/modal.js"></script>
<script src="script/spotify.js"></script>
</div>
</body>

</html>
69 changes: 59 additions & 10 deletions script/main.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,37 @@
document.addEventListener('DOMContentLoaded', () => {
// Existing code...

// Hide loading overlay and show content
const loadingOverlay = document.querySelector('.loading-overlay');
const content = document.querySelector('.content');

loadingOverlay.style.display = 'none'; // Hide loading overlay
content.style.display = 'block'; // Show main content
const loadingProgress = document.getElementById('loadingProgress');

// Existing code...
});
// Function to simulate loading progress
function simulateLoading() {
let progress = 0;
const interval = setInterval(() => {
progress += 10; // Increase progress by 10%
loadingProgress.style.width = `${progress}%`;

document.addEventListener('DOMContentLoaded', () => {
if (progress >= 100) {
clearInterval(interval);
setTimeout(() => {
loadingOverlay.style.display = 'none'; // Hide loading overlay
content.style.display = 'block'; // Show main content
}, 500); // Short delay before showing content
}
}, 300); // Update every 300ms
}

// Start the loading simulation
simulateLoading();

// Ensure the loading screen is shown for at least 5 seconds
setTimeout(() => {
if (loadingOverlay.style.display !== 'none') {
loadingOverlay.style.display = 'none'; // Hide loading overlay
content.style.display = 'block'; // Show main content
}
}, 5000); // 5 seconds

// Settings modal functionality
const elements = {
settingsIcon: document.getElementById('settingsIcon'),
settingsModal: document.getElementById('settingsModal'),
Expand All @@ -24,7 +44,7 @@ document.addEventListener('DOMContentLoaded', () => {
function setRandomBackground() {
const totalImages = 22; // Adjust this to the total number of images you have
const randomIndex = Math.floor(Math.random() * totalImages) + 1; // Random index from 1 to totalImages
const backgroundImage = `url('../bg/image${randomIndex}.jpg')`; // Adjust the image format if necessary
const backgroundImage = `url('bg/image${randomIndex}.jpg')`; // Adjust the image format if necessary
document.body.style.backgroundImage = backgroundImage;
}

Expand Down Expand Up @@ -58,5 +78,34 @@ document.addEventListener('DOMContentLoaded', () => {
});
});

// Add this code to handle background image changes
function changeBackgroundImage(imageName) {
const backgroundImage = `url('bg/${imageName}')`;
document.body.style.backgroundImage = backgroundImage;
}

// Add event listeners to the thumbnails
const thumbnails = document.querySelectorAll('.thumbnail');
thumbnails.forEach(thumbnail => {
thumbnail.addEventListener('click', () => {
const imageName = thumbnail.getAttribute('data-image');
changeBackgroundImage(imageName);
});
});

document.querySelector('.modal-sidebar li[data-category="pomodoro"]').click();
});

// Assuming you have a script file where you handle modal interactions
document.addEventListener('DOMContentLoaded', function() {
const categoryItems = document.querySelectorAll('.modal-sidebar li');

categoryItems.forEach(item => {
item.addEventListener('click', function() {
// Remove 'selected' class from all items
categoryItems.forEach(i => i.classList.remove('selected'));
// Add 'selected' class to the clicked item
this.classList.add('selected');
});
});
});
64 changes: 64 additions & 0 deletions script/modal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
// modal.js
function initializeModal() {
const elements = {
settingsIcon: document.getElementById('settingsIcon'),
settingsModal: document.getElementById('settingsModal'),
closeModal: document.getElementById('closeModal'),
categoryLinks: document.querySelectorAll('.modal-sidebar li'),
categories: document.querySelectorAll('.settings-category')
};

// Open the modal when the settings icon is clicked
elements.settingsIcon.addEventListener('click', () => {
elements.settingsModal.style.display = 'block';
});

// Close the modal when the close button is clicked
elements.closeModal.addEventListener('click', () => {
elements.settingsModal.style.display = 'none';
});

// Close the modal when clicking outside of the modal content
window.addEventListener('click', (event) => {
// Check if the click was outside the modal content
if (event.target === elements.settingsModal) {
elements.settingsModal.style.display = 'none';
}
});

// Handle category link clicks
elements.categoryLinks.forEach(link => {
link.addEventListener('click', () => {
const category = link.getAttribute('data-category');
elements.categories.forEach(cat => {
cat.style.display = 'none';
});
document.getElementById(category).style.display = 'block';
});
});

// Set default category
document.querySelector('.modal-sidebar li[data-category="pomodoro"]').click();
}

// Function to change background image (if needed)
function changeBackgroundImage(imageName) {
const backgroundImage = `url('bg/${imageName}')`;
document.body.style.backgroundImage = backgroundImage;
}

// Initialize the modal when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', initializeModal);

// Fullscreen functionality
const fullscreenIcon = document.getElementById('fullscreenIcon');

fullscreenIcon.addEventListener('click', () => {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen().catch(err => {
console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
document.exitFullscreen();
}
});
32 changes: 32 additions & 0 deletions script/spotify,js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
// spotify.js
function initializeSpotify() {
const spotifyIframe = document.querySelector('.spotify-widget iframe');
const playlistLinkInput = document.getElementById('playlistLink');
const updatePlaylistButton = document.getElementById('updatePlaylist');

// Add event listener to the update button
updatePlaylistButton.addEventListener('click', () => {
updateSpotifyPlaylist(spotifyIframe, playlistLinkInput);
});
}

// Function to update the Spotify playlist
function updateSpotifyPlaylist(spotifyIframe, playlistLinkInput) {
const playlistLink = playlistLinkInput.value.trim();
if (playlistLink) {
// Extract the playlist ID from the link
const playlistIdMatch = playlistLink.match(/playlist\/([a-zA-Z0-9]+)/);
if (playlistIdMatch) {
const playlistId = playlistIdMatch[1];
// Update the iframe source
spotifyIframe.src = `https://open.spotify.com/embed/playlist/${playlistId}?utm_source=generator&theme=black`;
} else {
alert('Please enter a valid Spotify playlist link.');
}
} else {
alert('Please enter a playlist link.');
}
}

// Initialize Spotify functionality on DOMContentLoaded
document.addEventListener('DOMContentLoaded', initializeSpotify);
Loading

0 comments on commit bcaac5b

Please sign in to comment.