SUGAM-ARORA · SUGAM-ARORA · Oct 9, 2024 · Oct 6, 2024 · Oct 6, 2024 · Oct 6, 2024
diff --git a/src/Projects/Relaxio/README.md 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.
+<hr>
+<h2>Features:</h2>
+
+- 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.
+<hr>
+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).
+<hr>
+
+<h2>How to Run?</h2>
+
+- Download as zip file
+- In your browser extensions page, enable 'Developer Mode'
+- Click on the 'Load Unpacked" button and select this zip file.
+- Enjoy!
+<hr>
+Made by Winter262005
diff --git a/src/Projects/Relaxio/audio/README.md 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
diff --git a/src/Projects/Relaxio/audio/lbf.mp3 b/src/Projects/Relaxio/audio/lbf.mp3
diff --git a/src/Projects/Relaxio/audio/mgl.mp3 b/src/Projects/Relaxio/audio/mgl.mp3
diff --git a/src/Projects/Relaxio/audio/ssf.mp3 b/src/Projects/Relaxio/audio/ssf.mp3
diff --git a/src/Projects/Relaxio/background.js 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
@@ -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
diff --git a/src/Projects/Relaxio/images/icon16.png b/src/Projects/Relaxio/images/icon16.png
diff --git a/src/Projects/Relaxio/images/icon48.png b/src/Projects/Relaxio/images/icon48.png
diff --git a/src/Projects/Relaxio/manifest.json 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
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+    <!-- Add Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
+  </head>
+  <body>
+    <h1 id="title">RELAXIO</h1>
+    <hr>
+    <button id="quoteButton">Motivate Me</button>
+    <h2 id="quote"></h2>
+    <hr>
+    <button id="imageButton">Meow! &#x1F638;</button>
+    <img id="image" width="200" height="200">
+    <hr>
+    <h3>Guess the Number Game</h3>
+    <p>Guess a number between 1 and 10:</p>
+    <input id="guess" type="number" min="1" max="10">
+    <div id="gameButtons">
+      <button id="guessButton">Guess</button>
+      <button id="resetButton">Reset</button>
+    </div>
+    <p id="gameResult"></p>
+    <hr>
+    <h3>Relaxing Music</h3>
+    <div id="audioButtons">
+      <button id="prevButton"><i class="bi bi-skip-backward-fill"></i></button>
+      <button id="playButton"><i class="bi bi-play-fill"></i></button>
+      <button id="nextButton"><i class="bi bi-skip-forward-fill"></i></button>
+      <button id="repeatButton"><i class="bi bi-arrow-repeat"></i></button> <!-- Repeat button -->
+    </div>
+    <script src="popup.js"></script>
+  </body>
+</html>
diff --git a/src/Projects/Relaxio/popup.js 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
@@ -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; }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		This folder contains the audio for music player.
		credits: FreeSoundLibrary