Skip to content

Commit

Permalink
Merge pull request #794 from Winter262005/main
Browse files Browse the repository at this point in the history
Adding Relaxio Chrome extension project
  • Loading branch information
SUGAM-ARORA authored Oct 9, 2024
2 parents 7fb9b98 + a0343df commit 957abd8
Show file tree
Hide file tree
Showing 15 changed files with 280 additions and 0 deletions.
20 changes: 20 additions & 0 deletions src/Projects/Relaxio/README.md
Original file line number Diff line number Diff line change
@@ -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
2 changes: 2 additions & 0 deletions src/Projects/Relaxio/audio/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
This folder contains the audio for music player.
credits: FreeSoundLibrary
Binary file added src/Projects/Relaxio/audio/ghf.mp3
Binary file not shown.
Binary file added src/Projects/Relaxio/audio/lbf.mp3
Binary file not shown.
Binary file added src/Projects/Relaxio/audio/mgl.mp3
Binary file not shown.
Binary file added src/Projects/Relaxio/audio/ssf.mp3
Binary file not shown.
45 changes: 45 additions & 0 deletions src/Projects/Relaxio/background.js
Original file line number Diff line number Diff line change
@@ -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();
}
1 change: 1 addition & 0 deletions src/Projects/Relaxio/images/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
This folder contains all the icons.
Binary file added src/Projects/Relaxio/images/icon128.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Projects/Relaxio/images/icon16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Projects/Relaxio/images/icon48.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions src/Projects/Relaxio/manifest.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
35 changes: 35 additions & 0 deletions src/Projects/Relaxio/popup.html
Original file line number Diff line number Diff line change
@@ -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>
57 changes: 57 additions & 0 deletions src/Projects/Relaxio/popup.js
Original file line number Diff line number Diff line change
@@ -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'});
});
101 changes: 101 additions & 0 deletions src/Projects/Relaxio/styles.css
Original file line number Diff line number Diff line change
@@ -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; }
}

0 comments on commit 957abd8

Please sign in to comment.