Add base website

shvpnd · Aug 26, 2024 · e60bada · e60bada
commit e60bada
Show file tree

Hide file tree

Showing 15 changed files with 428 additions and 0 deletions.
diff --git a/alarm.mp3 b/alarm.mp3
diff --git a/bg/1.jpg b/bg/1.jpg
diff --git a/bg/2.png b/bg/2.png
diff --git a/bg/3.png b/bg/3.png
diff --git a/bg/4.png b/bg/4.png
diff --git a/bg/5.png b/bg/5.png
diff --git a/bg/6.png b/bg/6.png
diff --git a/bg/7.png b/bg/7.png
diff --git a/font/Degular-Bold.otf b/font/Degular-Bold.otf
diff --git a/font/Degular-Medium.otf b/font/Degular-Medium.otf
diff --git a/font/sanfranblack.otf b/font/sanfranblack.otf
diff --git a/index.html b/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <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">
+</head>
+<body>
+    <div class="settings-icon" id="settingsIcon">⛭</div>
+    <div class="pomodoro">
+        <div id="timer" class="timer"> 
+            <span id="minutes">25</span>:<span id="seconds">00</span>
+        </div>
+        <div class="controls">
+            <button id="reset">Reset</button>
+        </div>
+    </div>
+    <div class="spotify-widget">
+        <iframe style="border-radius:15px" src="https://open.spotify.com/embed/playlist/1xVQZjNBLeHGCLfT3Ngfrk?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
+    </div>
+    <div class="modal" id="settingsModal">
+        <div class="modal-content">
+            <span class="close" id="closeModal">&times;</span>
+            <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="feedback">Feedback & Support</li>
+                </ul>
+            </div>
+            <div class="modal-main">
+                <div class="settings-category" id="pomodoro">
+                    <strong>Pomodoro Settings</strong>
+                    <label for="pomodoroDuration">Pomodoro Duration (minutes):</label>
+                    <input type="range" id="pomodoroDuration" min="1" max="60" value="25" step="1">
+                    <span id="pomodoroValue">25 minutes</span>
+                    <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 class="settings-category" id="sounds" style="display: none;">
+                    <strong>Sound Settings</strong>
+                    <label for="soundVolume">Volume:</label>
+                    <input type="range" id="soundVolume" min="0" max="100" value="50">
+                </div>
+                <div class="settings-category" id="music" style="display: none;">
+                    <strong>Music Settings</strong>
+                    <p>Manage your music preferences here.</p>
+                </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>
+    <script src="script/main.js"></script>
+    <script src="script/pomodoro.js"></script>
+</body>
+</html>
diff --git a/script/main.js b/script/main.js
@@ -0,0 +1,35 @@
+document.addEventListener('DOMContentLoaded', () => {
+    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')
+    };
+
+    elements.settingsIcon.addEventListener('click', () => {
+        elements.settingsModal.style.display = 'block';
+    });
+
+    elements.closeModal.addEventListener('click', () => {
+        elements.settingsModal.style.display = 'none';
+    });
+
+    window.addEventListener('click', (event) => {
+        if (event.target === elements.settingsModal) {
+            elements.settingsModal.style.display = 'none';
+        }
+    });
+
+    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';
+        });
+    });
+
+    document.querySelector('.modal-sidebar li[data-category="pomodoro"]').click();
+});
diff --git a/script/pomodoro.js b/script/pomodoro.js
@@ -0,0 +1,126 @@
+let timer, isRunning = false, timeLeft;
+let pomodoroDuration = 25 * 60, breakDuration = 5 * 60;
+let isBreakTime = false;
+
+const elements = {
+    minutesDisplay: document.getElementById('minutes'),
+    secondsDisplay: document.getElementById('seconds'),
+    resetButton: document.getElementById('reset'),
+    pomodoroInput: document.getElementById('pomodoroDuration'),
+    breakInput: document.getElementById('breakDuration'),
+    pomodoroValue: document.getElementById('pomodoroValue'),
+    breakValue: document.getElementById('breakValue'),
+    timerDisplay: document.getElementById('timer')
+};
+
+const loadSettings = () => {
+    const savedPomodoro = localStorage.getItem('pomodoroDuration');
+    const savedBreak = localStorage.getItem('breakDuration');
+
+    if (savedPomodoro) {
+        pomodoroDuration = parseInt(savedPomodoro) * 60;
+        elements.pomodoroInput.value = savedPomodoro;
+        elements.pomodoroValue.textContent = `${savedPomodoro} minutes`;
+    }
+
+    if (savedBreak) {
+        breakDuration = parseInt(savedBreak) * 60;
+        elements.breakInput.value = savedBreak;
+        elements.breakValue.textContent = `${savedBreak} minutes`;
+    }
+
+    timeLeft = pomodoroDuration;
+    updateDisplay();
+    updateResetButtonText();
+};
+
+const updateDisplay = () => {
+    elements.minutesDisplay.textContent = String(Math.floor(timeLeft / 60)).padStart(2, '0');
+    elements.secondsDisplay.textContent = String(timeLeft % 60).padStart(2, '0');
+};
+
+const updateResetButtonText = () => {
+    elements.resetButton.textContent = isBreakTime ? "Break" : "Work";
+};
+
+const updateTimer = () => {
+    if (timeLeft <= 0) {
+        clearInterval(timer);
+        isRunning = false;
+        playSound();
+
+        if (isBreakTime) {
+            timeLeft = pomodoroDuration;
+            isBreakTime = false;
+        } else {
+            timeLeft = breakDuration;
+            isBreakTime = true;
+        }
+        updateDisplay();
+        updateResetButtonText();
+        timer = setInterval(updateTimer, 1000);
+        return;
+    }
+    timeLeft--;
+    updateDisplay();
+};
+
+const playSound = () => {
+    const audio = new Audio('alarm.mp3');
+    audio.play();
+};
+
+const saveSettings = () => {
+    localStorage.setItem('pomodoroDuration', pomodoroDuration / 60);
+    localStorage.setItem('breakDuration', breakDuration / 60);
+};
+
+const updateRangeBackground = (input) => {
+    const value = input.value;
+    const min = input.min ? input.min : 0;
+    const max = input.max ? input.max : 100;
+    const percentage = (value - min) / (max - min) * 100;
+    input.style.background = `linear-gradient(to right, #583119 ${percentage}%, #505050 ${percentage}%)`;
+};
+
+updateRangeBackground(elements.pomodoroInput);
+updateRangeBackground(elements.breakInput);
+
+elements.pomodoroInput.addEventListener('input', () => {
+    pomodoroDuration = parseInt(elements.pomodoroInput.value) * 60;
+    elements.pomodoroValue.textContent = `${elements.pomodoroInput.value} minutes`;
+    saveSettings();
+    if (!isRunning) {
+        timeLeft = pomodoroDuration;
+        updateDisplay();
+    }
+    updateRangeBackground(elements.pomodoroInput);
+});
+
+elements.breakInput.addEventListener('input', () => {
+    breakDuration = parseInt(elements.breakInput.value) * 60;
+    elements.breakValue.textContent = `${elements.breakInput.value} minutes`;
+    saveSettings();
+    updateRangeBackground(elements.breakInput);
+});
+
+elements.timerDisplay.addEventListener('click', () => {
+    if (!isRunning) {
+        isRunning = true;
+        timeLeft = pomodoroDuration; 
+        updateDisplay();
+        updateResetButtonText(); 
+        timer = setInterval(updateTimer, 1000);
+    }
+});
+
+elements.resetButton.addEventListener('click', () => {
+    clearInterval(timer);
+    isRunning = false;
+    timeLeft = pomodoroDuration; 
+    isBreakTime = false; 
+    updateDisplay();
+    updateResetButtonText(); 
+});
+
+loadSettings();