diff --git a/src/Projects/Relaxio/README.md b/src/Projects/Relaxio/README.md new file mode 100644 index 00000000..798af6bd --- /dev/null +++ b/src/Projects/Relaxio/README.md @@ -0,0 +1,20 @@ +I have created a Chrome extension which works on all Chromium-based browsers for stress relief when coding. +
+

Features:

+ +- Motivational Quotes on a single click, +- Meow! button which fetches random funny cat photographs and GIFs, +- A simple number guesser game and +- A custom tailormade collection of LoFi beats for concentration. +
+This Chrome extension works using the Manifest feature of chromium browsers, Html, CSS and JavaScript, and using various APIs (Quotable for quotes, TheCatApi for cat images, Music from FreeSoundLibrary). +
+ +

How to Run?

+ +- Download as zip file +- In your browser extensions page, enable 'Developer Mode' +- Click on the 'Load Unpacked" button and select this zip file. +- Enjoy! +
+Made by Winter262005 diff --git a/src/Projects/Relaxio/audio/README.md b/src/Projects/Relaxio/audio/README.md new file mode 100644 index 00000000..6733712e --- /dev/null +++ b/src/Projects/Relaxio/audio/README.md @@ -0,0 +1,2 @@ +This folder contains the audio for music player. +credits: FreeSoundLibrary diff --git a/src/Projects/Relaxio/audio/ghf.mp3 b/src/Projects/Relaxio/audio/ghf.mp3 new file mode 100644 index 00000000..f8c9cc4e Binary files /dev/null and b/src/Projects/Relaxio/audio/ghf.mp3 differ diff --git a/src/Projects/Relaxio/audio/lbf.mp3 b/src/Projects/Relaxio/audio/lbf.mp3 new file mode 100644 index 00000000..ed360098 Binary files /dev/null and b/src/Projects/Relaxio/audio/lbf.mp3 differ diff --git a/src/Projects/Relaxio/audio/mgl.mp3 b/src/Projects/Relaxio/audio/mgl.mp3 new file mode 100644 index 00000000..2fa0aab4 Binary files /dev/null and b/src/Projects/Relaxio/audio/mgl.mp3 differ diff --git a/src/Projects/Relaxio/audio/ssf.mp3 b/src/Projects/Relaxio/audio/ssf.mp3 new file mode 100644 index 00000000..f8de942c Binary files /dev/null and b/src/Projects/Relaxio/audio/ssf.mp3 differ diff --git a/src/Projects/Relaxio/background.js b/src/Projects/Relaxio/background.js new file mode 100644 index 00000000..60872d36 --- /dev/null +++ b/src/Projects/Relaxio/background.js @@ -0,0 +1,45 @@ +// background.js +let player = new Audio(); +let tracks = ['audio/alb.mp3','audio/cbm.mp3','audio/clp.mp3','audio/fls.mp3','audio/lbf.mp3','audio/lgb.wav','audio/dft.mp3','audio/ssf.mp3','audio/ghf.mp3','audio/mgl.mp3']; // replace with your tracks +let currentTrackIndex = 0; +let repeat = false; // Repeat flag + +player.addEventListener('ended', () => { + if (repeat) { + player.currentTime = 0; + player.play(); + } else { + nextTrack(); + } +}); + +chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { + if (request.command === 'togglePlay') { + if (player.paused) { + player.play(); + } else { + player.pause(); + } + } else if (request.command === 'prev') { + prevTrack(); + } else if (request.command === 'next') { + nextTrack(); + } else if (request.command === 'toggleRepeat') { + repeat = !repeat; // Toggle repeat flag + } +}); + + +function nextTrack() { + currentTrackIndex = (currentTrackIndex + 1) % tracks.length; + player.src = tracks[currentTrackIndex]; + player.load(); // Load the new source + player.play(); +} + +function prevTrack() { + currentTrackIndex = (currentTrackIndex - 1 + tracks.length) % tracks.length; + player.src = tracks[currentTrackIndex]; + player.load(); // Load the new source + player.play(); +} diff --git a/src/Projects/Relaxio/images/README.md b/src/Projects/Relaxio/images/README.md new file mode 100644 index 00000000..c4128122 --- /dev/null +++ b/src/Projects/Relaxio/images/README.md @@ -0,0 +1 @@ +This folder contains all the icons. diff --git a/src/Projects/Relaxio/images/icon128.png b/src/Projects/Relaxio/images/icon128.png new file mode 100644 index 00000000..f71a5805 Binary files /dev/null and b/src/Projects/Relaxio/images/icon128.png differ diff --git a/src/Projects/Relaxio/images/icon16.png b/src/Projects/Relaxio/images/icon16.png new file mode 100644 index 00000000..b01bcd0a Binary files /dev/null and b/src/Projects/Relaxio/images/icon16.png differ diff --git a/src/Projects/Relaxio/images/icon48.png b/src/Projects/Relaxio/images/icon48.png new file mode 100644 index 00000000..7a4035ab Binary files /dev/null and b/src/Projects/Relaxio/images/icon48.png differ diff --git a/src/Projects/Relaxio/manifest.json b/src/Projects/Relaxio/manifest.json new file mode 100644 index 00000000..b4a73613 --- /dev/null +++ b/src/Projects/Relaxio/manifest.json @@ -0,0 +1,19 @@ +{ + "manifest_version": 2, + "name": "RELAXIO", + "version": "1.0", + "description": "Made by Winter262005. An extension for stress relief and timepass.", + "browser_action": { + "default_popup": "popup.html", + "default_title": "RELAXIO" + }, + "background": { + "scripts": ["background.js"] + }, + "permissions": ["tabs"], + "icons": { + "16": "images/icon16.png", + "48": "images/icon48.png", + "128": "images/icon128.png" + } +} diff --git a/src/Projects/Relaxio/popup.html b/src/Projects/Relaxio/popup.html new file mode 100644 index 00000000..2638a868 --- /dev/null +++ b/src/Projects/Relaxio/popup.html @@ -0,0 +1,35 @@ + + + + + + + + +

RELAXIO

+
+ +

+
+ + +
+

Guess the Number Game

+

Guess a number between 1 and 10:

+ +
+ + +
+

+
+

Relaxing Music

+
+ + + + +
+ + + diff --git a/src/Projects/Relaxio/popup.js b/src/Projects/Relaxio/popup.js new file mode 100644 index 00000000..5896c0f0 --- /dev/null +++ b/src/Projects/Relaxio/popup.js @@ -0,0 +1,57 @@ +// popup.js +document.getElementById('quoteButton').addEventListener('click', fetchQuote); +document.getElementById('imageButton').addEventListener('click', fetchImage); +document.getElementById('guessButton').addEventListener('click', playGame); +document.getElementById('resetButton').addEventListener('click', resetGame); + +let secretNumber = Math.floor(Math.random() * 10) + 1; + +async function fetchQuote() { + const response = await fetch('https://api.quotable.io/random'); + const data = await response.json(); + document.getElementById('quote').textContent = data.content; +} + +async function fetchImage() { + const response = await fetch('https://api.thecatapi.com/v1/images/search'); + const data = await response.json(); + document.getElementById('image').src = data[0].url; +} + +function playGame() { + const guess = document.getElementById('guess').value; + if (!guess || guess < 1 || guess > 10) { + document.getElementById('gameResult').textContent = 'Please enter a number between 1 and 10.'; + return; + } + if (guess == secretNumber) { + document.getElementById('gameResult').textContent = 'Congratulations! You guessed the number!'; + secretNumber = Math.floor(Math.random() * 10) + 1; // Generate a new random number after a correct guess + } else if (guess > secretNumber) { + document.getElementById('gameResult').textContent = 'Too high, try again.'; + } else { + document.getElementById('gameResult').textContent = 'Too low, try again.'; + } +} + + +function resetGame() { + document.getElementById('guess').value = ''; + document.getElementById('gameResult').textContent = ''; +} + +document.getElementById('playButton').addEventListener('click', () => { + chrome.runtime.sendMessage({command: 'togglePlay'}); +}); + +document.getElementById('prevButton').addEventListener('click', () => { + chrome.runtime.sendMessage({command: 'prev'}); +}); + +document.getElementById('nextButton').addEventListener('click', () => { + chrome.runtime.sendMessage({command: 'next'}); +}); + +document.getElementById('repeatButton').addEventListener('click', () => { + chrome.runtime.sendMessage({command: 'toggleRepeat'}); +}); diff --git a/src/Projects/Relaxio/styles.css b/src/Projects/Relaxio/styles.css new file mode 100644 index 00000000..cc5d6944 --- /dev/null +++ b/src/Projects/Relaxio/styles.css @@ -0,0 +1,101 @@ +@import url('https://fonts.googleapis.com/css2?family=Honk&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap'); + +body { + font-family: 'Roboto Mono', monospace; + padding: 10px; + background: linear-gradient(270deg, #000000, #6D018B); + background-size: 200% 200%; + animation: Gradient 3s ease infinite; + color: #fff; + width: 300px; + display: flex; + flex-direction: column; + gap: 10px; + overflow: auto; + align-items: center; + animation: bodyFadeIn 1s; +} + +button { + padding: 5px 10px; + font-size: 16px; + font-family: 'Roboto Mono', monospace; + border: 2px solid #4CAF50; + background-color: transparent; + color: #4CAF50; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease, color 0.3s ease; +} + +button:hover { + border: 2px solid #45a049; + background-color: #45a049; + color: white; +} + +h1 { + color: #fff; + text-align: center; + margin: 0; + font-size: 6em; + font-family: 'Honk', cursive; +} + +h2, h3 { + color: #fff; + text-align: center; + margin: 0; + font-size: 1.5em; +} + +hr { + border: none; + border-top: 1px solid #fff; + width: 80%; + margin: 20px auto; +} + +img { + border: none; + transition: transform 0.3s ease; +} + +img:hover { + transform: scale(1.1); +} + +#gameButtons, #audioButtons { + display: flex; + justify-content: center; + gap: 10px; +} + +/* Minimalistic Scrollbar */ +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +::-webkit-scrollbar-thumb { + background: #888; +} + +::-webkit-scrollbar-thumb:hover { + background: #555; +} + +@keyframes Gradient { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +@keyframes bodyFadeIn { + from { opacity: 0; } + to { opacity: 1; } +}