├── .gitignore
├── readme
    ├── lyricexp1.png
    ├── lyricexp2.png
    └── lyricexp3.png
├── public
    ├── src
    │   ├── favicon.png
    │   ├── lyricexp1.png
    │   ├── lyricexp2.png
    │   ├── lyricexp3.png
    │   ├── Spotify_Logo_RGB_Black.png
    │   └── Spotify_Logo_RGB_White.png
    ├── Fonts
    │   ├── Gotham-Black.otf
    │   ├── Gotham-Bold.otf
    │   ├── GothamBold.ttf
    │   ├── GothamBook.ttf
    │   ├── GothamMedium.ttf
    │   ├── GothamMedium_1.ttf
    │   ├── GothamBoldItalic.ttf
    │   └── GothamMediumItalic.ttf
    ├── scripts
    │   ├── gsearch.js
    │   ├── search.js
    │   ├── lyrics.js
    │   └── home.js
    └── sheets
    │   ├── policy.css
    │   ├── about.css
    │   ├── search.css
    │   ├── genius.css
    │   ├── lyrics.css
    │   └── home.css
├── modules
    ├── .npmignore
    ├── getAlbumArt.js
    ├── getSong.js
    ├── utils
    │   ├── index.js
    │   └── extractLyrics.js
    ├── package.json
    ├── getSongById.js
    ├── getLyrics.js
    ├── .gitignore
    ├── LICENSE.txt
    ├── searchSong.js
    └── README.md
├── .vscode
    └── launch.json
├── package.json
├── views
    ├── search.ejs
    ├── gsearch.ejs
    ├── privacy.ejs
    ├── home.ejs
    ├── lyrics.ejs
    └── about.ejs
├── README.md
├── server.js
└── LICENSE


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules 
2 | .env
3 | .vscode


--------------------------------------------------------------------------------
/readme/lyricexp1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MythicalMayhem/MythicalLyrics/HEAD/readme/lyricexp1.png


--------------------------------------------------------------------------------
/readme/lyricexp2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MythicalMayhem/MythicalLyrics/HEAD/readme/lyricexp2.png


--------------------------------------------------------------------------------
/readme/lyricexp3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MythicalMayhem/MythicalLyrics/HEAD/readme/lyricexp3.png


--------------------------------------------------------------------------------
/public/src/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MythicalMayhem/MythicalLyrics/HEAD/public/src/favicon.png


--------------------------------------------------------------------------------
/public/src/lyricexp1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MythicalMayhem/MythicalLyrics/HEAD/public/src/lyricexp1.png


--------------------------------------------------------------------------------
/public/src/lyricexp2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MythicalMayhem/MythicalLyrics/HEAD/public/src/lyricexp2.png


--------------------------------------------------------------------------------
/public/src/lyricexp3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MythicalMayhem/MythicalLyrics/HEAD/public/src/lyricexp3.png


--------------------------------------------------------------------------------
/public/Fonts/Gotham-Black.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MythicalMayhem/MythicalLyrics/HEAD/public/Fonts/Gotham-Black.otf


--------------------------------------------------------------------------------
/public/Fonts/Gotham-Bold.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MythicalMayhem/MythicalLyrics/HEAD/public/Fonts/Gotham-Bold.otf


--------------------------------------------------------------------------------
/public/Fonts/GothamBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MythicalMayhem/MythicalLyrics/HEAD/public/Fonts/GothamBold.ttf


--------------------------------------------------------------------------------
/public/Fonts/GothamBook.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MythicalMayhem/MythicalLyrics/HEAD/public/Fonts/GothamBook.ttf


--------------------------------------------------------------------------------
/public/Fonts/GothamMedium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MythicalMayhem/MythicalLyrics/HEAD/public/Fonts/GothamMedium.ttf


--------------------------------------------------------------------------------
/public/Fonts/GothamMedium_1.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MythicalMayhem/MythicalLyrics/HEAD/public/Fonts/GothamMedium_1.ttf


--------------------------------------------------------------------------------
/public/Fonts/GothamBoldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MythicalMayhem/MythicalLyrics/HEAD/public/Fonts/GothamBoldItalic.ttf


--------------------------------------------------------------------------------
/public/Fonts/GothamMediumItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MythicalMayhem/MythicalLyrics/HEAD/public/Fonts/GothamMediumItalic.ttf


--------------------------------------------------------------------------------
/public/src/Spotify_Logo_RGB_Black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MythicalMayhem/MythicalLyrics/HEAD/public/src/Spotify_Logo_RGB_Black.png


--------------------------------------------------------------------------------
/public/src/Spotify_Logo_RGB_White.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MythicalMayhem/MythicalLyrics/HEAD/public/src/Spotify_Logo_RGB_White.png


--------------------------------------------------------------------------------
/modules/.npmignore:
--------------------------------------------------------------------------------
 1 | node_modules/
 2 | demo/
 3 | npm-debug.log
 4 | yarn-error.log
 5 | 
 6 | # BUCK
 7 | buck-out/
 8 | \.buckd/
 9 | *.keystore
10 | yarn.lock


--------------------------------------------------------------------------------
/modules/getAlbumArt.js:
--------------------------------------------------------------------------------
 1 | const searchSong = require('./searchSong');
 2 | const { checkOptions } = require('./utils');
 3 | 
 4 | /**
 5 |  * @param {{apiKey: string, title: string, artist: string, optimizeQuery: boolean}} options
 6 |  */
 7 | module.exports = async function (options) {
 8 | 	checkOptions(options);
 9 | 	let results = await searchSong(options);
10 | 	if (!results) return null;
11 | 	return results[0].albumArt;
12 | };
13 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     // Use IntelliSense to learn about possible attributes.
 3 |     // Hover to view descriptions of existing attributes.
 4 |     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 |     "version": "0.2.0",
 6 |     "configurations": [
 7 |         {
 8 |             "type": "chrome",
 9 |             "request": "launch",
10 |             "name": "Launch Chrome against localhost",
11 |             "url": "http://localhost:8080",
12 |             "webRoot": "${workspaceFolder}"
13 |         }
14 |     ]
15 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "spotifyxgenius",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "start": "nodemon server.js"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "dotenv": "^16.3.1",
14 |     "ejs": "^3.1.9",
15 |     "express": "^4.18.2",
16 |     "extract-colors": "^4.0.1",
17 |     "genius-lyrics-api": "^3.2.0",
18 |     "get-pixels": "^3.3.3",
19 |     "html2canvas": "^1.4.1",
20 |     "node-fetch": "^2.7.0"
21 |   },
22 |   "devDependencies": {
23 |     "nodemon": "^3.0.1"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/modules/getSong.js:
--------------------------------------------------------------------------------
 1 | const searchSong = require('./searchSong');
 2 | const extractLyrics = require('./utils/extractLyrics');
 3 | const { checkOptions } = require('./utils');
 4 | 
 5 | /**
 6 |  * @param {{apiKey: string, title: string, artist: string, optimizeQuery: boolean}} options
 7 |  */
 8 | module.exports = async function (options) {
 9 | 	try {
10 | 		checkOptions(options);
11 | 		let results = await searchSong(options);
12 | 		if (!results) return null;
13 | 		let lyrics = await extractLyrics(results[0].url);
14 | 		return {
15 | 			id: results[0].id,
16 | 			title: results[0].title,
17 | 			url: results[0].url,
18 | 			lyrics,
19 | 			albumArt: results[0].albumArt
20 | 		};
21 | 	} catch (e) {
22 | 		throw e;
23 | 	}
24 | };
25 | 


--------------------------------------------------------------------------------
/modules/utils/index.js:
--------------------------------------------------------------------------------
 1 | const checkOptions = (options) => {
 2 | 	let { apiKey, title, artist } = options;
 3 | 	if (!apiKey) {
 4 | 		throw '"apiKey" property is missing from options';
 5 | 	} else if (!title) {
 6 | 		throw '"title" property is missing from options';
 7 | 	}
 8 | };
 9 | const getTitle = (title, artist) => {
10 | 	let b = `${artist} ${title}`
11 | 		.toLowerCase()
12 | 
13 | 		.replace(/[ ](ft|feat)\.?[ ].*/g, '').replace(/\([^)]*\)/g, '')
14 | 		.replace(/ *\[[^\]]*]/g, '')
15 | 		.replace(/\s+/g, ' ')
16 | 		.trim()
17 | 	console.log(b)
18 | 	if (b.length > 12) {
19 | 		const lastIndex = b.lastIndexOf('-');
20 | 		b = b.slice(0, lastIndex)
21 | 	}
22 | 	return b
23 | };
24 | 
25 | module.exports = { checkOptions, getTitle };
26 | 


--------------------------------------------------------------------------------
/modules/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "genius-lyrics-api",
 3 | 	"version": "3.2.0",
 4 | 	"main": "index.js",
 5 | 	"author": {
 6 | 		"name": "Faisal Arshed",
 7 | 		"url": "https://github.com/farshed"
 8 | 	},
 9 | 	"contributors": [
10 | 		{
11 | 			"name": "Garlicvideos",
12 | 			"url": "https://github.com/Garlicvideos"
13 | 		}
14 | 	],
15 | 	"license": "MIT",
16 | 	"dependencies": {
17 | 		"axios": "^0.27.2",
18 | 		"cheerio-without-node-native": "0.20.2"
19 | 	},
20 | 	"repository": {
21 | 		"type": "git",
22 | 		"url": "https://github.com/farshed/genius-lyrics-api.git"
23 | 	},
24 | 	"keywords": [
25 | 		"genius",
26 | 		"lyrics",
27 | 		"album-art",
28 | 		"scraper",
29 | 		"genius-lyrics",
30 | 		"genius-album-art",
31 | 		"genius-api",
32 | 		"lyrics-scraper"
33 | 	]
34 | }
35 | 


--------------------------------------------------------------------------------
/modules/getSongById.js:
--------------------------------------------------------------------------------
 1 | const axios = require('axios');
 2 | const extractLyrics = require('./utils/extractLyrics');
 3 | 
 4 | const url = 'https://api.genius.com/songs/';
 5 | 
 6 | /**
 7 |  * @param {(number|string)} id
 8 |  * @param {string} apiKey
 9 |  */
10 | module.exports = async function (id, apiKey) {
11 | 	if (!id) throw 'No id was provided';
12 | 	if (!apiKey) throw 'No apiKey was provided';
13 | 	try {
14 | 		let {
15 | 			data: {
16 | 				response: { song }
17 | 			}
18 | 		} = await axios.get(`${url}${id}?access_token=${apiKey}`);
19 | 		let lyrics = await extractLyrics(song.url);
20 | 		return {
21 | 			id: song.id,
22 | 			title: song.title,
23 | 			url: song.url,
24 | 			lyrics,
25 | 			albumArt: song.song_art_image_url
26 | 		};
27 | 	} catch (e) {
28 | 		throw e;
29 | 	}
30 | };
31 | 


--------------------------------------------------------------------------------
/modules/getLyrics.js:
--------------------------------------------------------------------------------
 1 | const searchSong = require('./searchSong');
 2 | const { checkOptions } = require('./utils');
 3 | const extractLyrics = require('./utils/extractLyrics');
 4 | 
 5 | /**
 6 |  * @param {({apiKey: string, title: string, artist: string, optimizeQuery: boolean}|string)} arg - options object, or Genius URL
 7 |  */
 8 | module.exports = async function (arg) {
 9 | 	try {
10 | 		if (arg && typeof arg === 'string') {
11 | 			let lyrics = await extractLyrics(arg);
12 | 			return lyrics;
13 | 		} else if (typeof arg === 'object') {
14 | 			checkOptions(arg);
15 | 			let results = await searchSong(arg);
16 | 			if (!results) return null;
17 | 			let lyrics = await extractLyrics(results[0].url);
18 | 			return lyrics;
19 | 		} else {
20 | 			throw 'Invalid argument';
21 | 		}
22 | 	} catch (e) {
23 | 		throw e;
24 | 	}
25 | };
26 | 


--------------------------------------------------------------------------------
/modules/utils/extractLyrics.js:
--------------------------------------------------------------------------------
 1 | const axios = require('axios');
 2 | const cheerio = require('cheerio-without-node-native');
 3 | 
 4 | /**
 5 |  * @param {string} url - Genius URL
 6 |  */
 7 | module.exports = async function (url) {
 8 | 	try {
 9 | 		console.log(url)
10 | 		let { data } = await axios.get(url);
11 | 		const $ = cheerio.load(data);
12 | 		let lyrics = $('div[class="lyrics"]').text().trim();
13 | 		if (!lyrics) {
14 | 			lyrics = '';
15 | 			$('div[class^="Lyrics__Container"]').each((i, elem) => {
16 | 				if ($(elem).text().length !== 0) {
17 | 					let snippet = $(elem)
18 | 						.html()
19 | 						.replace(/<br>/g, '\n')
20 | 						.replace(/<(?!\s*br\s*\/?)[^>]+>/gi, '');
21 | 					lyrics += $('<textarea/>').html(snippet).text().trim() + '\n\n';
22 | 				}
23 | 			});
24 | 		}
25 | 		if (!lyrics) return null;
26 | 		return lyrics.trim();
27 | 	} catch (e) {
28 | 		throw 'e';
29 | 	}
30 | };
31 | 


--------------------------------------------------------------------------------
/modules/.gitignore:
--------------------------------------------------------------------------------
 1 | # OSX
 2 | #
 3 | .DS_Store
 4 | 
 5 | # Xcode
 6 | #
 7 | build/
 8 | *.pbxuser
 9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 | project.xcworkspace
24 | 
25 | # Android/IntelliJ
26 | #
27 | build/
28 | .idea
29 | .gradle
30 | local.properties
31 | *.iml
32 | 
33 | # node.js
34 | #
35 | node_modules/
36 | npm-debug.log
37 | yarn-error.log
38 | 
39 | # BUCK
40 | buck-out/
41 | \.buckd/
42 | *.keystore
43 | 
44 | # fastlane
45 | #
46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47 | # screenshots whenever they are needed.
48 | # For more information about the recommended setup visit:
49 | # https://docs.fastlane.tools/best-practices/source-control/
50 | 
51 | */fastlane/report.xml
52 | */fastlane/Preview.html
53 | */fastlane/screenshots
54 | 
55 | # Bundle artifact
56 | *.jsbundle
57 | 


--------------------------------------------------------------------------------
/modules/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) Faisal Arshed
 4 | Permission is hereby granted, free of charge, to any person obtaining a copy
 5 | of this software and associated documentation files (the "genius-lyrics-api"), to deal
 6 | in the Software without restriction, including without limitation the rights
 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 8 | copies of the Software, and to permit persons to whom the Software is
 9 | furnished to do so, subject to the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be included in all
12 | copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
20 | SOFTWARE.


--------------------------------------------------------------------------------
/modules/searchSong.js:
--------------------------------------------------------------------------------
 1 | const axios = require('axios');
 2 | const { checkOptions, getTitle } = require('./utils');
 3 | 
 4 | const searchUrl = 'https://api.genius.com/search?q=';
 5 | 
 6 | /**
 7 |  * @param {{apiKey: string, title: string, artist: string, optimizeQuery: boolean, authHeader: boolean}} options
 8 |  */
 9 | module.exports = async function (options) {
10 | 	try {
11 | 
12 | 		checkOptions(options);
13 | 		let { apiKey, title, artist, optimizeQuery = false, authHeader = false } = options;
14 | 		const song = optimizeQuery ? getTitle(title, artist) : `${title} ${artist}`;
15 | 
16 | 		const reqUrl = `${searchUrl}${encodeURIComponent(song)}`;
17 | 		const headers = {
18 | 			Authorization: 'Bearer ' + apiKey
19 | 		};
20 | 		let { data } = await axios.get(
21 | 			authHeader ? reqUrl : `${reqUrl}&access_token=${apiKey}`,
22 | 			authHeader && { headers }
23 | 		);
24 | 		if (data.response.hits.length === 0) return {};
25 | 		const results = data.response.hits.map((val) => {
26 | 			const { full_title, title, song_art_image_url, artist_names, id, url } = val.result;
27 | 			return { id, title: title, artists: artist_names, albumArt: song_art_image_url, url };
28 | 		});
29 | 		return results;
30 | 	} catch (e) {
31 | 		throw e;
32 | 	}
33 | };
34 | 


--------------------------------------------------------------------------------
/views/search.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Search by spotify </title>
 8 |     <link rel="stylesheet" href="sheets/search.css">
 9 |     <link rel="icon" type="image/x-icon" href="/src/favicon.png">
10 |     <script defer src="scripts/search.js"></script>
11 | </head>
12 | 
13 | <body>
14 |     <nav id="nav">
15 |         <a href="/">home</a>
16 |         <a href="/about">About</a>
17 |         <a href="/privacy">Privacy</a>
18 |     </nav>
19 |     <div id="wrapper">
20 |         <div id="searchContainer">
21 |             <input spellcheck="false" name="searcher" type="text" oninput="searchLegit(this.value.trim())" id="searcher"
22 |                 placeholder="search song name/link"><br>
23 |         </div>
24 |         <div id="container">
25 | 
26 |         </div>
27 |     </div>
28 |     <footer>
29 |         <p>Made By <a href="https://github.com/MythicalMayhem/sgxlyrics">MythicalMayhem</a></p>
30 |         <p>Made Possible By
31 |             <a href="https://www.genius.com" target="_blank">Genius.com</a> and
32 |             <a href="https://www.spotify.com" target="_blank">spotify.com</a> api
33 |         </p>
34 |     </footer>
35 | 
36 | </body>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/views/gsearch.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Search by spotify</title>
 7 |     <link rel="stylesheet" href="sheets/genius.css" />
 8 |     <link rel="icon" type="image/x-icon" href="/src/favicon.png" />
 9 |     <script defer src="scripts/gsearch.js"></script>
10 |   </head>
11 | 
12 |   <body>
13 |     <nav id="nav">
14 |       <a href="/">home</a>
15 |       <a href="/about">About</a>
16 |       <a href="/privacy">Privacy</a>
17 |     </nav>
18 |     <div id="wrapper">
19 |       <form id="searchContainer">
20 |         <input
21 |           spellcheck="false"
22 |           name="searcher"
23 |           type="text"
24 |           id="searcher"
25 |           placeholder="search song name/link"
26 |         /><br />
27 |       </form>
28 |       <div id="container"></div>
29 |     </div>
30 |     <footer>
31 |       <p>
32 |         Made By
33 |         <a href="https://github.com/MythicalMayhem/sgxlyrics">MythicalMayhem</a>
34 |       </p>
35 |       <p>
36 |         Made Possible By
37 |         <a href="https://www.genius.com" target="_blank">Genius.com</a> and
38 |         <a href="https://www.spotify.com" target="_blank">spotify.com</a> api
39 |       </p>
40 |     </footer>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align='center'>
 2 | <h1>Mythical Lyrics</h1>
 3 | <img  src='https://github.com/MythicalMayhem/MythicalLyrics/assets/72671232/240f6da3-cc90-4e8f-904b-39cbd7daae77' width='395px'>
 4 |  <h3>Music lyrics at a glance</h3>
 5 |  <div align='center'>
 6 |  <img src='https://img.shields.io/github/stars/MythicalMayhem/MythicalLyrics'>
 7 |  <img src='https://img.shields.io/github/last-commit/MythicalMayhem/MythicalLyrics/main'>
 8 |  <img src='https://img.shields.io/github/license/MythicalMayhem/MythicalLyrics'><br>
 9 |  <img src='https://img.shields.io/website/https/mythicallyrics.onrender.com'>
10 |  <img src='https://img.shields.io/github/repo-size/MythicalMayhem/MythicalLyrics'>
11 | </div>
12 | </div>
13 |  
14 | # Description 
15 | <div  >
16 |  <h3  >
17 | Now with Mythical Lyrics, getting track lyrics has never been easier, not only that but<br>
18 |   can also create lyrics cards just like the spotify app</h3>
19 | </div>
20 |  <br>
21 | 
22 | # examples 
23 | <div align='center'>
24 | <img src='readme/lyricexp1.png' width='250px'/>
25 | <img src='readme/lyricexp3.png' width='250px'/>
26 | <img src='readme/lyricexp2.png' width='250px'/>
27 | </div >
28 | 
29 | ## check it out 
30 | This project is currently deployed [here](https://mythicallyrics.onrender.com)<br>
31 | Though the app is yet to be accepted by spotify
32 | so logging in and search using spotify is not available
33 | 
34 | 
35 | ## Local development and testing
36 | 
37 | ### 1. make new directory and clone
38 | 
39 | ```bash
40 | git clone https://github.com/MythicalMayhem/MythicalLyrics .
41 | ```
42 | 
43 | ### 2. Install dependencies
44 | 
45 | ```bash
46 | npm install
47 | ```
48 | 
49 | ### 3. Start development server
50 | 
51 | ```bash
52 | npm run start
53 | ```
54 | 
55 | ## Acknowledgements
56 | 
57 | Refer to [https://mythicallyrics.onrender.com/privacy](https://mythicallyrics.onrender.com/privacy)
58 | 
59 | - [Spotify API](https://developer.spotify.com/)
60 | - [Genius API](https://docs.genius.com)
61 | - [genius-lyrics-api](https://github.com/farshed/genius-lyrics-api)
62 | 
63 | ## Authors
64 | 
65 | - [@MythicalMayhem](https://github.com/MythicalMayhem)
66 | 


--------------------------------------------------------------------------------
/views/privacy.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Privacy policy</title>
 8 |     <link rel="icon" type="image/x-icon" href="/src/favicon.png">
 9 |     <link rel="stylesheet" href="sheets/policy.css">
10 | </head>
11 | 
12 | <body>
13 |     <nav id="nav">
14 |         <a href="/">home</a>
15 |         <a href="/about">About</a>
16 |         <a href="/privacy">Privacy</a>
17 |     </nav>
18 |     <div id="container">
19 |         <h1>Privacy Policy</h1>
20 |         <p>
21 |             MythicalLyrics was developed as an open source app powered by the
22 |             Spotify Web API. By choosing to use this app, you
23 |             agree to the use of your Spotify account token to search for tracks
24 |             and your Spotify account username and data for your top
25 |             artists and tracks.
26 |         </p>
27 |         <p>
28 |             None of the data used by MythicalLyrics is stored or collected anywhere, and
29 |             it is NOT shared with any third parties. All information is used solely
30 |             for display.
31 |         </p>
32 |         <p>
33 |             Although you can rest assured that your data is not being stored or used
34 |             maliciously, if you would like to revoke MythicalLyrics's permissions, you
35 |             can visit
36 |             <a href="http://www.spotify.com/account/apps/?_ga=2.57194153.2059435232.1677244602-1044990631.1616788427"
37 |                 target="_blank">your
38 |                 apps page</a>
39 |             and click "REMOVE ACCESS" on MythicalLyrics.
40 |             <a href="https://support.spotify.com/us/article/spotify-on-other-apps/" target="_blank">Here</a>
41 |             is a more detailed guide for doing so.
42 |         </p>
43 |     </div>
44 |     <footer>
45 |         <p>Made By <a href="https://github.com/MythicalMayhem/MythicalLyrics">MythicalMayhem</a></p>
46 |         <p>Made Possible By
47 |             <a href="https://www.genius.com" target="_blank">Genius.com</a> and
48 |             <a href="https://www.spotify.com" target="_blank">spotify.com </a> api
49 |         </p>
50 |     </footer>
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/views/home.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Home Page</title>
 8 |     <link rel="stylesheet" href="sheets/home.css">
 9 |     <link rel="icon" type="image/x-icon" href="/src/favicon.png">
10 |     <script src="scripts/home.js" defer></script>
11 | </head>
12 | 
13 | <body>
14 |     <nav id="nav">
15 |         <div id="pages">
16 |             <a href="/">home</a>
17 |             <a href="/about">About</a>
18 |             <a href="/privacy">Privacy</a>
19 |             <a id="logout" onclick="logout()" href="/">Log out </a>
20 |         </div>
21 |         <div id="account">
22 |             <button id="login" onclick="window.location='/authorize'" disabled>Log in</button>
23 |             <p>test</p>
24 |             <img src="" alt="" height="64px" width="64px">
25 |         </div>
26 |     </nav>
27 |     <div id="wrapper">
28 |         <div id="player">
29 |             <div id="identity">
30 | 
31 |             </div>
32 |             <button id="login" onclick="window.location='/authorize'" disabled>Log in</button>
33 |             <div id="history">
34 |             </div>
35 |         </div>
36 |         <div id="introduction"> 
37 | 
38 |                 <div id="para">
39 |                     <h1>Mythical lyrics</h1>
40 |                     <p>Music lyrics at a glance</p>
41 |                     <button onclick="window.location='/search'" id="searchnow">Go To Search</button>
42 |                     
43 |                     <img src="/src/favicon.png"   alt="">
44 |                 </div>
45 |                 <div id="images">
46 |                     <img src="src/lyricexp1.png" alt="" srcset="">
47 |                     <img src="src/lyricexp2.png" alt="" srcset="">
48 |                     <img src="src/lyricexp3.png" alt="" srcset="">
49 |                 </div>
50 |             </div>
51 |  
52 |     </div>
53 |     <footer>
54 |         <p>Made By <a href="https://github.com/MythicalMayhem/sgxlyrics">MythicalMayhem</a></p>
55 |         <p>Made Possible By
56 |             <a href="https://www.genius.com" target="_blank">Genius.com</a> and
57 |             <a href="https://www.spotify.com" target="_blank">spotify.com</a> api
58 |         </p>
59 |     </footer>
60 | 
61 | </body>
62 | 
63 | </html>


--------------------------------------------------------------------------------
/public/scripts/gsearch.js:
--------------------------------------------------------------------------------
 1 | 
 2 | let form = document.querySelector("form");
 3 | form.addEventListener('submit', handleForm);
 4 | let lastTerm = ''
 5 | let allowed = true
 6 | 
 7 | async function handleForm(e) {
 8 |     e.preventDefault()
 9 |     let term = document.querySelector('#searcher').value.trim()
10 |     if (!(term && term.length > 1 && term !== lastTerm && allowed)) { return }
11 |     allowed = false
12 |     lastTerm = term
13 |     setTimeout(() => { allowed = true }, 2250);
14 |     await fetch(`/gsearchreq?query=${term}`)
15 |         .then((res) => { return res.json() })
16 |         .then((res) => {
17 |             if (res.ok === true && res?.data.length > 0) { return populateSearch(res['data']) }
18 |             else {
19 |                 let parent = document.getElementById('container')
20 |                 while (parent.hasChildNodes()) { parent.removeChild(parent.firstChild) }
21 |                 let h1 = document.createElement('h1')
22 |                 h1.innerText = 'No results'
23 |                 h1.style.color = 'white'
24 |                 parent.appendChild(h1)
25 |             }
26 |         })
27 | }
28 | function populateSearch(res) {
29 |     let parent = document.getElementById('container')
30 |     while (parent.hasChildNodes()) { parent.removeChild(parent.firstChild) }
31 |     res.forEach(el => {
32 |         let wrapper = document.createElement('div')
33 |         let span1 = document.createElement('span')
34 |         let span2 = document.createElement('span')
35 |         let div1 = document.createElement('div')
36 |         span1.textContent = el.title
37 |         span2.textContent = el.artists
38 |         let img = document.createElement('img')
39 |         let newurl = new URL(window.location.protocol + '//' + window.location.hostname + ':' + window.location.port)
40 |         newurl.pathname = '/glyrics' 
41 |         newurl.searchParams.set("id", el.id)
42 |         newurl.searchParams.set("fullartists", el.artists)
43 | 
44 |         img.style.height = '75px'
45 |         img.style.width = '75px'
46 |         img.src = el.albumArt
47 |         div1.id = 'identity'
48 |         wrapper.id = 'template'
49 |         div1.appendChild(span1)
50 |         div1.appendChild(span2)
51 |         wrapper.appendChild(img)
52 |         wrapper.appendChild(div1)
53 |         wrapper.setAttribute('redir', newurl)
54 | 
55 |         wrapper.addEventListener('click', () => {
56 |             
57 |             window.location = (wrapper.getAttribute('redir'))
58 |         })
59 |         parent.appendChild(wrapper)
60 |     });
61 | }


--------------------------------------------------------------------------------
/public/sheets/policy.css:
--------------------------------------------------------------------------------
  1 | *{
  2 | 	box-sizing: border-box;
  3 | 	font-family: sans-serif;
  4 | 	color: whitesmoke; 
  5 | }
  6 | html,
  7 | body {
  8 | 	height: 100%;
  9 | 	padding: 0;
 10 | 	margin: 0;
 11 | }
 12 | 
 13 | @keyframes gradient {
 14 | 	0% {background-position: 0% 50%;}
 15 | 	50% {background-position: 100% 50%;}
 16 | 	100% {background-position: 0% 50%;}
 17 | }
 18 | body {
 19 | 	background: linear-gradient(-45deg, #303030,gray, #4e4e50);
 20 | 	background-size: 400% 400%;
 21 | 	animation: gradient 5s ease infinite;
 22 | 	background-color: #303030;
 23 | 	display: flex;
 24 | 	flex-direction: column;
 25 | 	flex-wrap: nowrap;
 26 | 	justify-content: space-between;
 27 | 	align-items: center;
 28 | 	gap: 20px;
 29 | }
 30 | 
 31 | #container {
 32 | 	align-self: unset;
 33 | 	justify-self: unset;
 34 | 	text-align: center;
 35 | 	font-family: sans-serif;
 36 | 	font-size: 1.05rem;
 37 | 	color: whitesmoke;
 38 | 	padding: 25px;
 39 | 	box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.65);
 40 | 	background-color: #4e4e50;
 41 | 	min-width: 200px;
 42 | 	width: 60%;
 43 | 	display: flex;
 44 | 	flex-direction: column;
 45 | 	flex-wrap: nowrap;
 46 | 	justify-content: center;
 47 | 	align-items: center;
 48 | }
 49 | 
 50 | #nav {
 51 | 	display: block;
 52 | 	height: 50px;
 53 | 	width: fit-content;
 54 | 	text-align: center;
 55 | 	display: flex;
 56 | 	flex-direction: row;
 57 | 	justify-content: center;
 58 | 	flex-wrap: wrap;
 59 | 	align-items: center;
 60 | 	gap: 20px 50px;
 61 | 	width: fit-content;
 62 | 	height: fit-content;
 63 | 	text-shadow: 2px 3px 5px rgba(0,0,0,0.5);
 64 | 	padding: 15px;
 65 | 	border-radius: 10px;
 66 | }
 67 | 
 68 | #nav a {
 69 | 	padding: 0 10px;
 70 | 	font-family: sans-serif;
 71 | 	color: whitesmoke;
 72 | 	font-size: 25px;
 73 | 	transition: all 0.2s ease-in-out;
 74 | 	text-decoration: none;
 75 | }
 76 | 
 77 | #nav a:hover {
 78 | 	color: #950740;
 79 | }
 80 | footer {
 81 | 	display: flex;
 82 | 	flex-direction: column;
 83 | 	flex-wrap: wrap;
 84 | 	align-items: center;
 85 | 	justify-content: space-evenly;
 86 | 	gap: 20px;
 87 | 	width: fit-content;
 88 | 	max-width: 700px;
 89 | 	box-sizing: border-box;
 90 | 	padding: 17px;
 91 | 	margin-bottom: 10px;
 92 | 	background-color: none;
 93 | 	font-family: sans-serif;
 94 | 	text-align: center;
 95 | 	align-self: flex-end;
 96 | }
 97 | footer p {
 98 | 	margin: unset;
 99 | }
100 | a {
101 | 	color: #c3073f;
102 | 	font-weight: bold;
103 | }
104 | a:hover {
105 | 	color: crimson;
106 | }
107 | @media (max-width: 450px) {
108 | 	#nav {
109 | 		flex-direction: column;
110 | 		align-self: flex-start;
111 | 	}
112 | }
113 | 


--------------------------------------------------------------------------------
/views/lyrics.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title><%=' '+title%> - <%=' '+author%></title>
 7 |     <link rel="icon" type="image/x-icon" href="/src/favicon.png" />
 8 |     <link rel="stylesheet" href="sheets/lyrics.css" />
 9 |     <script
10 |       defer
11 |       src="https://html2canvas.hertzen.com/dist/html2canvas.js"
12 |     ></script>
13 |     <script defer src="scripts/lyrics.js"></script>
14 |   </head>
15 | 
16 |   <body onload="">
17 |     <nav id="nav">
18 |       <a href="/">home</a>
19 |       <a href="/about">About</a>
20 |       <a href="/privacy">Privacy</a>
21 |     </nav>
22 | 
23 |     <div id="body">
24 |       <div id="lyricsContainer" class="container">
25 |         <div class="container-inner">
26 |           <%pagelyrics.forEach(bar=> {bar = bar.toString().trim();if (bar == '')
27 |           { %><br />
28 |           <% }else if (bar[0]==`[`){ %>
29 |           <p id="bar"><span> <%=bar %> </span></p>
30 |           <br />
31 |           <%}else{%>
32 |           <p id="bar"><%= bar %></p>
33 |           <%} } )%>
34 |         </div>
35 |         <div class="scroll-marker"></div>
36 |       </div>
37 | 
38 |       <div id="wrapper">
39 |         <button onclick="downloadimage()" id="downloader">DOWNLOAD</button>
40 |         <div id="mainContainer">
41 |           <div id="identity">
42 |             <img id="albumArt" src="<%=art%>" alt="" />
43 |             <div id="name">
44 |               <p spellcheck="false" contenteditable="true"><%=title%></p>
45 |               <p spellcheck="false" contenteditable="true"><%=author%></p>
46 |             </div>
47 |           </div>
48 |           <div id="barz">
49 |             <br />
50 |             <h3 spellcheck="false" contenteditable="true" id="bar">
51 |               choose or type lyrics
52 |             </h3>
53 |             <br />
54 |           </div>
55 |           <div id="other">
56 |             <img
57 |               id="spotify_logo"
58 |               style="height: 32px"
59 |               src="src/Spotify_Logo_RGB_White.png"
60 |               alt="spotify icon"
61 |               crossorigin="anonymous"
62 |               />
63 |           </div>
64 |         </div>
65 |         <div id="colors"></div>
66 |       </div>
67 |     </div>
68 |     <footer>
69 |       <p>
70 |         Made By
71 |         <a href="https://github.com/MythicalMayhem/sgxlyrics">MythicalMayhem</a>
72 |       </p>
73 |       <p>
74 |         Made Possible By
75 |         <a href="https://www.genius.com" target="_blank">Genius.com</a> and
76 |         <a href="https://www.spotify.com" target="_blank">spotify.com</a> api
77 |       </p>
78 |     </footer>
79 |   </body>
80 | </html>
81 | 


--------------------------------------------------------------------------------
/public/sheets/about.css:
--------------------------------------------------------------------------------
  1 | * {
  2 | 	box-sizing: border-box;
  3 | 	font-family: sans-serif;
  4 | 	color: whitesmoke; 
  5 | }
  6 | 
  7 | ::-webkit-scrollbar {
  8 | 	width: 0;
  9 | }
 10 | html,
 11 | body {
 12 | 	margin: 0;
 13 | 	height: 100%;
 14 | }
 15 | @keyframes gradient {
 16 | 	0% {background-position: 0% 50%;}
 17 | 	50% {background-position: 100% 50%;}
 18 | 	100% {background-position: 0% 50%;}
 19 | }
 20 | body {
 21 | 	background: linear-gradient(-45deg, #303030,gray, #4e4e50);
 22 | 	background-size: 400% 400%;
 23 | 	animation: gradient 5s ease infinite;
 24 | 	background-color: #303030;
 25 | 	color: white;
 26 | 	display: flex;
 27 | 	flex-direction: column;
 28 | 	flex-wrap: nowrap;
 29 | 	justify-content: space-between;
 30 | 	align-items: center;
 31 | 	gap: 3cm;
 32 | }
 33 | 
 34 | #nav {
 35 | 	text-align: center;
 36 | 	display: flex;
 37 | 	flex-direction: row;
 38 | 	justify-content: center;
 39 | 	flex-wrap: wrap;
 40 | 	align-items: center;
 41 | 	gap: 20px 50px;
 42 | 	width: fit-content;
 43 | 	height: fit-content;
 44 | 
 45 | 	padding: 15px;
 46 | 	border-radius: 10px;
 47 | }
 48 | 
 49 | #nav a {
 50 | 	padding: 0 10px;
 51 | 	text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
 52 | 	color: whitesmoke;
 53 | 	font-size: 25px;
 54 | 	transition: all 0.2s ease-in-out;
 55 | 	text-decoration: none;
 56 | }
 57 | 
 58 | #nav a:hover {
 59 | 	color: #950740;
 60 | }
 61 | 
 62 | #main {
 63 | 	max-width: 850px;
 64 | 	margin: 0 10px;
 65 | 
 66 | 	font-size: smaller;
 67 | 	display: flex;
 68 | 	flex-direction: column;
 69 | 	flex-wrap: nowrap;
 70 | 	justify-content: center;
 71 | 	align-items: center;
 72 | 	gap: 1cm;
 73 | 	background-color: #4e4e50;
 74 | 	box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.781);
 75 | 	padding: 1cm 0;
 76 | }
 77 | 
 78 | fieldset {
 79 | 	border: none;
 80 | 	box-shadow: 0px 0px 10px 1px rgba(27, 27, 27, 0.781);
 81 | 	box-sizing: border-box;
 82 | 	width: 90%;
 83 | 	padding: 20px;
 84 | }
 85 | fieldset legend {
 86 | 	font-size: 30px;
 87 | 	font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 88 | }
 89 | 
 90 | fieldset p {
 91 | 	font-size: 15px;
 92 | 	font-weight: lighter;
 93 | 	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
 94 | 		"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
 95 | }
 96 | 
 97 | fieldset ul {
 98 | 	margin: 0;
 99 | 	padding: 0;
100 | }
101 | fieldset ul li {
102 | 	margin: 15px;
103 | 	padding: 0;
104 | }
105 | 
106 | footer {
107 | 	display: flex;
108 | 	flex-direction: column;
109 | 	flex-wrap: wrap;
110 | 	align-items: center;
111 | 	justify-content: space-evenly;
112 | 	gap: 20px;
113 | 	width: fit-content;
114 | 	max-width: 700px;
115 | 	box-sizing: border-box;
116 | 	padding: 17px;
117 | 	margin-bottom: 10px;
118 | 	background-color: none;
119 | 	font-family: sans-serif;
120 | 	text-align: center;
121 | 	align-self: flex-end;
122 | }
123 | footer p {
124 | 	margin: unset;
125 | }
126 | a {
127 | 	color: #c3073f;
128 | 	font-weight: bold;
129 | }
130 | a:hover {
131 | 	color: crimson;
132 | }
133 | @media (max-width: 450px) {
134 | 	#nav {
135 | 		flex-direction: column;
136 | 		align-self: flex-start;
137 | 	}
138 | }
139 | 


--------------------------------------------------------------------------------
/modules/README.md:
--------------------------------------------------------------------------------
  1 | # genius-lyrics-api [![npm version](https://img.shields.io/npm/v/genius-lyrics-api.svg?style=flat)](https://www.npmjs.com/package/genius-lyrics-api)
  2 | 
  3 | A JavaScript package for non-browser environments that leverages [Genius API](https://genius.com/developers) to find (and scrape) song lyrics and album covers.<br/>
  4 | 
  5 | ## Installation
  6 | 
  7 | Install with npm
  8 | 
  9 | ```js
 10 | npm install --save genius-lyrics-api
 11 | ```
 12 | 
 13 | Or install with Yarn
 14 | 
 15 | ```js
 16 | yarn add genius-lyrics-api
 17 | ```
 18 | 
 19 | ## Usage
 20 | 
 21 | [Get the Genius Developer Access Token](https://genius.com/developers)
 22 | <br>
 23 | 
 24 | ```js
 25 | import { getLyrics, getSong } from 'genius-lyrics-api';
 26 | ```
 27 | 
 28 | ```js
 29 | const options = {
 30 | 	apiKey: 'XXXXXXXXXXXXXXXXXXXXXXX',
 31 | 	title: 'Posthumous Forgiveness',
 32 | 	artist: 'Tame Impala',
 33 | 	optimizeQuery: true
 34 | };
 35 | 
 36 | getLyrics(options).then((lyrics) => console.log(lyrics));
 37 | 
 38 | getSong(options).then((song) =>
 39 | 	console.log(`${song.id} - ${song.title} - ${song.url} - ${song.albumArt} - ${song.lyrics}`)
 40 | );
 41 | ```
 42 | 
 43 | <br>
 44 | 
 45 | ## Types
 46 | 
 47 | ```
 48 | type options {
 49 | 	title: string;
 50 | 	artist: string;
 51 | 	apiKey: string;		// Genius developer access token
 52 | 	optimizeQuery?: boolean; // (optional, default: false) If true, Perform some cleanup to maximize the chance of finding a match
 53 | 	authHeader?: boolean; // (optional, default: false) Whether to include auth header in the search request
 54 | }
 55 | 
 56 | ```
 57 | 
 58 | 🚨 If `title` or `artist` is unknown, pass an empty string.
 59 | 
 60 | ```
 61 | type song {
 62 | 	id: number;		// Genius song id
 63 | 	title: string;          // Song title
 64 | 	url: string;		// Genius webpage URL for the song
 65 | 	lyrics: string;		// Song lyrics
 66 | 	albumArt: string;	// URL of the album art image (jpg/png)
 67 | }
 68 | 
 69 | ```
 70 | 
 71 | ```
 72 | type searchResult {
 73 | 	id: number;		// Genius song id
 74 | 	url: string;		// Genius webpage URL for the song
 75 | 	title: string;		// Song title
 76 | 	albumArt: string;	// URL of the album art image (jpg/png)
 77 | }
 78 | ```
 79 | 
 80 | ## Methods
 81 | 
 82 | genius-lyrics-api exposes the following methods:
 83 | 
 84 | ### `getLyrics(options | url)`
 85 | 
 86 | Accepts [options](#types) or the url to a Genius song. <br/>
 87 | Returns a promise that resolves to a string containing lyrics. Returns `null` if no lyrics are found.
 88 | 
 89 | ### `getAlbumArt(options)`
 90 | 
 91 | Accepts an [options](#types) object. <br/>
 92 | Returns a promise that resolves to a url (string) to the song's album art. Returns `null` if no url is found.
 93 | 
 94 | ### `getSong(options)`
 95 | 
 96 | Accepts an [options](#types) object. <br/>
 97 | Returns a promise that resolves to an object of type [song](#types). Returns `null` if song is not found.
 98 | 
 99 | ### `searchSong(options)`
100 | 
101 | Accepts an [options](#types) object. <br/>
102 | Returns a promise that resolves to an array of type [searchResult](#types). Returns `null` if no matches are found.
103 | 
104 | ### `getSongById(id: (number | string), access_token: string)`
105 | 
106 | Accepts a valid Genius song ID. IDs can be found using the `searchSong` method. <br/>
107 | Returns a promise that resolves to an object of type [song](#types).
108 | 


--------------------------------------------------------------------------------
/views/about.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>About</title>
 8 |     <link rel="icon" type="image/x-icon" href="/src/favicon.png">
 9 |     <link rel="stylesheet" href="sheets/about.css">
10 | </head>
11 | 
12 | <body>
13 |     <nav id="nav">
14 |         <a href="/">home</a>
15 |         <a href="/about">About</a>
16 |         <a href="/privacy">Privacy</a>
17 |     </nav>
18 |     <div id="main">
19 |         <fieldset>
20 |             <legend>Motive</legend>
21 |             <p>
22 |                 This is a personal project made with passion by <a
23 |                     href="https://github.com/MythicalMayhem/sgxlyrics">MythicalMayhem(me)</a>.
24 |             </p>
25 |         </fieldset>
26 |         <fieldset>
27 |             <legend>How it works</legend>
28 |             <ul>
29 |                 <li>
30 |                     <h2>using Spotify search</h2>
31 |                     <p>
32 |                         By logging in, the app receives your token to be used to search for tracks,then redirects to
33 |                         '/search'
34 |                         After selecting the desired track, it sends the track details (track owner/artist and track
35 |                         name) to server, then redirect to the appropriate /spotifylyrics page where lyrics are displayed
36 |                     </p>
37 |                 </li>
38 |                 <li>
39 |                     <h2>using Genius search</h2>
40 |                     <p>
41 |                         Without a Spotify token, the only method left is to search directly on Genius.com (/gsearch).
42 |                         1. Gets song from inputs in the homepage
43 |                         2. Gets lyrics and displays them on /geniuslyrics
44 |                     </p>
45 |                 </li>
46 |                 <li>
47 |                     <h2>the searching isn't perfect! (yet)</h2>
48 |                     <p>
49 |                         querying isn't really perfect, and not many tests have been run.
50 |                         if ever encountered any errors, or got the wrong lyrics or track,
51 |                         please create an issue on the <a href="https://github.com/MythicalMayhem/MythicalLyrics"
52 |                             target="_blank">
53 |                             github repository</a> or report it somewhere.
54 |                     </p>
55 |                 </li>
56 |             </ul>
57 |         </fieldset>
58 |         <fieldset>
59 |             <legend>open source!!</legend>
60 |             <p>
61 |                 This project is open source, with many more features to be added.
62 |                 Every contribution is appreciated.
63 |                 Check out the Github repository <a href="https://github.com/MythicalMayhem/MythicalLyrics"
64 |                     target="_blank">HERE</a>.
65 |                 <center>
66 |                     <h5>( Make sure to give it a Star ;) <3 )</h5>
67 |                 </center>
68 |             </p>
69 |         </fieldset>
70 |     </div>
71 |     <footer>
72 |         <p>Made By <a href="https://github.com/MythicalMayhem/sgxlyrics">MythicalMayhem</a></p>
73 |         <p>Made Possible By
74 |             <a href="https://www.genius.com" target="_blank">Genius.com</a> and
75 |             <a href="https://www.spotify.com" target="_blank">spotify.com</a> api
76 |         </p>
77 |     </footer>
78 | </body>
79 | 
80 | </html>


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
  1 | require('dotenv').config()
  2 | const express = require("express");
  3 | const fetch = require("node-fetch");
  4 | const extractLyrics = require('./modules/utils/extractLyrics')
  5 | const searchSong = require('./modules/searchSong')
  6 | const getSongById = require('./modules/getSongById')
  7 | const getLyrics = require('./modules/getLyrics')
  8 | 
  9 | const getPixels = require("get-pixels")
 10 | const { extractColors } = require('extract-colors')
 11 | 
 12 | const client_id = process.env.clientID;
 13 | const client_secret = process.env.clientSecret
 14 | const geniusApiKey = process.env.geniusApiKey
 15 | console.log(geniusApiKey);
 16 | 
 17 | 
 18 | const app = express()
 19 | 
 20 | app.listen(3000)
 21 | app.set('view engine', 'ejs')
 22 | app.use(express.static('public'));
 23 | 
 24 | function redir(base) {
 25 |   let redirect_uri = base + "/response";
 26 |   let scope = "user-read-recently-played user-read-currently-playing";
 27 |   let url = "https://accounts.spotify.com/authorize";
 28 |   url += "?response_type=code";
 29 |   url += "&client_id=" + encodeURIComponent(client_id);
 30 |   url += "&scope=" + encodeURIComponent(scope);
 31 |   url += "&redirect_uri=" + encodeURIComponent(redirect_uri);
 32 |   return url
 33 | }
 34 | 
 35 | async function token(base, code) {
 36 |   const params = new URLSearchParams();
 37 |   params.append("redirect_uri", base + "/response");
 38 |   params.append("grant_type", "authorization_code");
 39 |   params.append("code", code);
 40 |   params.append("client_id", client_id);
 41 |   params.append("client_secret", client_secret);
 42 |   const result = await fetch("https://accounts.spotify.com/api/token", {
 43 |     method: "POST",
 44 |     headers: { "Content-Type": "application/x-www-form-urlencoded" },
 45 |     body: params
 46 |   })
 47 |   return result.json()
 48 | }
 49 | 
 50 | 
 51 | 
 52 | 
 53 | 
 54 | app.get('/', (req, res) => { res.redirect('/home') })
 55 | app.get(/^(\/search)/, (req, res) => { res.render('search') })
 56 | app.get(/^(\/gsearch)$/, (req, res) => { res.render('gsearch') })
 57 | app.get(/^(\/privacy)/, (req, res) => { res.render('privacy') })
 58 | app.get(/^(\/about)/, (req, res) => { res.render('about') })
 59 | app.get('/home', (req, res) => { res.render('home') })
 60 | app.get('/authorize', (req, res) => { res.redirect(redir(req.protocol + '://' + req.get('host'))) })
 61 | 
 62 | app.get(/^(\/response)/, (req, res) => {
 63 |   let code = req.query.code || null;
 64 |   token(req.protocol + '://' + req.get('host'), code).then(function (result) {
 65 |     res.redirect('/home?access_token=' + result['access_token'])//+'&refresh='+result['refresh_token']
 66 |   })
 67 | })
 68 | 
 69 | app.get(/^(\/gsearchreq)/, (req, res) => {
 70 |   let fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
 71 |   const query = decodeURI(new URL(fullUrl).searchParams.get('query'))
 72 |   console.log(query);
 73 |   
 74 |   if (query) {
 75 |     const options = {
 76 |       apiKey: geniusApiKey,
 77 |       title: query,
 78 |       artist: '',
 79 |       optimizeQuery: true,
 80 |     }
 81 |     searchSong(options).then((r) => {
 82 |       console.log(r)
 83 |       res.status(200).json({
 84 |         ok: true,
 85 |         data: r
 86 |       });
 87 | 
 88 |     })
 89 |       .catch((e) => {
 90 |         console.log(e);
 91 |         
 92 |         res.status(501).json({ 'server error': String(e) })
 93 |       })
 94 |   }
 95 | })
 96 | app.get(/^(\/slyrics)/, (req, res) => {
 97 |   let url = new URL(req.protocol + '://' + req.get('host') + req.originalUrl)
 98 |   let params = new URLSearchParams(url.search)
 99 |   if (!(params.has('track') && params.has('artist') && params.has('fullartists'))) { res.send('unformatted url'); return }
100 | 
101 |   const track = decodeURI(params.get('track'))  // ! check if url params are encoded first
102 |   const artist = decodeURI(params.get('artist'))
103 |   const fullartists = decodeURI(params.get('fullartists'))
104 | 
105 |   const options = { apiKey: geniusApiKey, title: track, artist: artist, optimizeQuery: true }
106 | 
107 |   searchSong(options).then((r) => { return r[0] })
108 |     .then((r) => { getLyrics(r.url).then((lyrics) => { res.render('lyrics', { pagelyrics: lyrics.split('\n'), title: track.replace(/\(feat.*\)/, ''), author: fullartists, art: r.albumArt }) }) })
109 |     .catch((e) => { res.render('lyrics', { pagelyrics: ['sorry no lyrics for this one :( \n type them out yourself !'], title: 'title', author: 'artist', art: 'null' }) })
110 | })
111 | 
112 | app.get(/^(\/glyrics)/, (req, res,next) => {
113 |   let url = new URL(req.protocol + '://' + req.get('host') + req.originalUrl)
114 |   let params = new URLSearchParams(url.search)
115 |   if (!(params.has('id'))) { res.send('unformatted url'); return }
116 | 
117 |   const id = decodeURI(params.get('id'))
118 |   const artists = decodeURI(params.get('fullartists'))
119 | 
120 |   getSongById(id, geniusApiKey).then((r) => {
121 |     res.render('lyrics', { pagelyrics: r.lyrics.split('\n'), title: r.title.replace(/\(feat.*\)/, ''), author: artists, art: r.albumArt })
122 |   }).catch((e) => {
123 |     res.status(501).json({ 'server error': String(e) })
124 |     res.render('lyrics', { pagelyrics: ['sorry no lyrics for this one :( \n type them out yourself !'], title: 'title', author: 'artist', art: 'null' })
125 |   })
126 |  
127 | }) 


--------------------------------------------------------------------------------
/public/sheets/search.css:
--------------------------------------------------------------------------------
  1 | * {
  2 | 	box-sizing: border-box;
  3 | 	font-family: sans-serif;
  4 | 	color: whitesmoke;
  5 | }
  6 | ::-webkit-scrollbar {
  7 | 	width: 0;
  8 | }
  9 | html {
 10 | 	height: 100%;
 11 | }
 12 | @keyframes gradient {
 13 | 	0% {background-position: 0% 50%;}
 14 | 	50% {background-position: 100% 50%;}
 15 | 	100% {background-position: 0% 50%;}
 16 | }
 17 | body {
 18 | 	background: linear-gradient(-45deg, #303030,gray, #4e4e50);
 19 | 	background-size: 400% 400%;
 20 | 	animation: gradient 5s ease infinite;
 21 | 	width: 100%;
 22 | 	min-height: 100%;
 23 | 	height: fit-content;
 24 | 	padding: 0;
 25 | 	margin: 0;
 26 | 	background-color: #303030;
 27 | 	display: flex;
 28 | 	flex-direction: column;
 29 | 	justify-content: space-between;
 30 | 	align-items: center;
 31 | 	gap: 3cm;
 32 | }
 33 | #nav {
 34 | 	text-align: center;
 35 | 	display: flex;
 36 | 	flex-direction: row;
 37 | 	justify-content: center;
 38 | 	flex-wrap: wrap;
 39 | 	align-items: center;
 40 | 	gap: 20px 50px;
 41 | 	width: fit-content;
 42 | 	height: fit-content;
 43 | 
 44 | 	padding: 15px;
 45 | 	border-radius: 10px;
 46 | }
 47 | 
 48 | #nav a {
 49 | 	padding: 0 10px;
 50 | 	text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
 51 | 	color: whitesmoke;
 52 | 	font-size: 25px;
 53 | 	transition: all 0.2s ease-in-out;
 54 | 	text-decoration: none;
 55 | }
 56 | 
 57 | #nav a:hover {
 58 | 	color: #950740;
 59 | }
 60 | #wrapper {
 61 | 	width: 100%;
 62 | 	display: flex;
 63 | 	flex-direction: column;
 64 | 	flex-wrap: nowrap;
 65 | 	justify-content: center;
 66 | 	align-items: center;
 67 | }
 68 | 
 69 | #searchContainer {
 70 | 	display: flex;
 71 | 	flex-direction: column;
 72 | 	justify-content: center;
 73 | 	align-items: center;
 74 | 	margin: 20px;
 75 | 	height: fit-content;
 76 | 	width: 50%;
 77 | 	margin-bottom: 20px;
 78 | }
 79 | 
 80 | #searcher {
 81 | 	font-size: 35px;
 82 | 	padding: 10px;
 83 | 	text-indent: 25px;
 84 | 	height: 1.1cm;
 85 | 	width: 100%;
 86 | 	background-color: transparent;
 87 | 	border: none;
 88 | 	outline: none;
 89 | 	color: whitesmoke;
 90 | 	border-bottom: 3px solid white;
 91 | }
 92 | 
 93 | #container {
 94 | 	box-sizing: border-box;
 95 | 	background-color: #4e4e50;
 96 | 	width: 70%;
 97 | 	padding: 0.5cm;
 98 | 	border-radius: 0.6cm;
 99 | 	box-shadow: 0px 0px 10px 1px rgba(27, 27, 27, 0.781);
100 | 	display: flex;
101 | 	height: fit-content;
102 | 	flex-wrap: wrap;
103 | 	flex-direction: row;
104 | 	align-items: stretch;
105 | 	justify-content: center;
106 | }
107 | 
108 | #template {
109 | 	cursor: pointer;
110 | 	max-width: 300px;
111 | 	min-width: 150px;
112 | 	margin: 5px;
113 | 	padding: 15px 8px 7px 8px;
114 | 	box-sizing: border-box;
115 | 	display: flex;
116 | 	flex-direction: column;
117 | 	justify-content: space-between;
118 | 	align-items: center;
119 | 	background-color: #373737;
120 | 	border-radius: 5px;
121 | 	overflow: hidden;
122 | 	z-index: 3;
123 | 	flex: 1 1 20%;
124 | 	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
125 | 		rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
126 | 		rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
127 | 
128 | 	transition-duration: 0.1s;
129 | }
130 | 
131 | #template:hover {
132 | 	z-index: 10;
133 | 	transform: scale(1.1);
134 | }
135 | 
136 | #other { 
137 | 	align-self: flex-start;
138 | 	width: fit-content;
139 | }
140 | 
141 | #template #spotify_logo {
142 | 	width: 70px;
143 | 	margin: 15px;
144 | 	margin-bottom: 12px;
145 | }
146 | 
147 | #duration {
148 | 	margin-block: 0;
149 | 	color: white;
150 | 	font-weight: lighter;
151 | 	font-size: 15px;
152 | 	margin: 3px 0;
153 | }
154 | 
155 | #template #img {
156 | 	height: 80px;
157 | 	width: 80px;
158 | 	background-color: white;
159 | }
160 | 
161 | #template #identity {
162 | 	display: flex;
163 | 	flex-direction: column;
164 | 	justify-content: center;
165 | 	align-items: center;
166 | 	height: fit-content;
167 | 	width: 100%;
168 | 	box-sizing: border-box;
169 | 	flex-wrap: wrap;
170 | }
171 | 
172 | #template #identity a {
173 | 	overflow-wrap: break-word;
174 | 	color: white;
175 | 	text-align: center;
176 | 	font-family: sans-serif;
177 | 	text-decoration: none;
178 | 	max-width: 100%;
179 | 	width: fit-content;
180 | 	-webkit-line-clamp: 2;
181 | }
182 | 
183 | #template #identity a:hover {
184 | 	text-decoration: underline;
185 | 	color: #950740;
186 | }
187 | 
188 | #title {
189 | 	font-size: 15px;
190 | 	text-overflow: ellipsis;
191 | 	font-weight: bolder;
192 | }
193 | 
194 | #template #identity div {
195 | 	display: flex;
196 | 	flex-direction: row;
197 | 	flex-wrap: wrap;
198 | 	justify-content: center;
199 | 	align-items: center;
200 | }
201 | #identity div a {
202 | 	font-weight: lighter;
203 | }
204 | #submitter {
205 | 	background: none;
206 | 	font-size: 1.7em;
207 | 	cursor: pointer;
208 | 	text-decoration: 1.5px underline;
209 | 	border: none;
210 | 	font-weight: bolder;
211 | 	color: white;
212 | }
213 | 
214 | footer {
215 | 	display: flex;
216 | 	flex-direction: column;
217 | 	flex-wrap: wrap;
218 | 	align-items: center;
219 | 	justify-content: space-evenly;
220 | 	gap: 20px;
221 | 	width: fit-content;
222 | 	max-width: 700px;
223 | 	box-sizing: border-box;
224 | 	padding: 17px;
225 | 	margin-bottom: 10px;
226 | 	background-color: none;
227 | 	font-family: sans-serif;
228 | 	text-align: center;
229 | 	align-self: flex-end;
230 | }
231 | footer p {
232 | 	margin: unset;
233 | }
234 | a {
235 | 	color: #c3073f;
236 | 	font-weight: bold;
237 | }
238 | a:hover {
239 | 	color: crimson;
240 | }
241 | @media only screen and (max-width: 1000px) {
242 | 	#container {
243 | 		width: 90%;
244 | 	}
245 | 
246 | 	#searchContainer,
247 | 	#searcher {
248 | 		width: 90%;
249 | 		margin: 20px;
250 | 		font-size: 20px;
251 | 	}
252 | }
253 | 
254 | @media screen and (max-width: 500px) {
255 | 	#nav {
256 | 		flex-direction: column;
257 | 
258 | 		align-self: flex-start;
259 | 	}
260 | 	input {
261 | 		font-size: small;
262 | 	}
263 | }
264 | 


--------------------------------------------------------------------------------
/public/sheets/genius.css:
--------------------------------------------------------------------------------
  1 | * {
  2 | 	box-sizing: border-box;
  3 | 	font-family: sans-serif;
  4 | 	color: whitesmoke;
  5 | }
  6 | ::-webkit-scrollbar {
  7 | 	width: 0;
  8 | }
  9 | html {
 10 | 	height: 100%;
 11 | }
 12 | @keyframes gradient {
 13 | 	0% {background-position: 0% 50%;}
 14 | 	50% {background-position: 100% 50%;}
 15 | 	100% {background-position: 0% 50%;}
 16 | }
 17 | body {
 18 | 	background: linear-gradient(-45deg, #303030,gray, #4e4e50);
 19 | 	background-size: 400% 400%;
 20 | 	animation: gradient 5s ease infinite;
 21 | 	width: 100%;
 22 | 	min-height: 100%;
 23 | 	height: fit-content;
 24 | 	padding: 0;
 25 | 	margin: 0;
 26 | 	background-color: #303030;
 27 | 	display: flex;
 28 | 	flex-direction: column;
 29 | 	justify-content: space-between;
 30 | 	align-items: center;
 31 | 	gap: 3cm;
 32 | }
 33 | #nav {
 34 | 	text-align: center;
 35 | 	display: flex;
 36 | 	flex-direction: row;
 37 | 	justify-content: center;
 38 | 	flex-wrap: wrap;
 39 | 	align-items: center;
 40 | 	gap: 20px 50px;
 41 | 	width: fit-content;
 42 | 	height: fit-content;
 43 | 
 44 | 	padding: 15px;
 45 | 	border-radius: 10px;
 46 | }
 47 | 
 48 | #nav a {
 49 | 	padding: 0 10px;
 50 | 	text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
 51 | 	color: whitesmoke;
 52 | 	font-size: 25px;
 53 | 	transition: all 0.2s ease-in-out;
 54 | 	text-decoration: none;
 55 | }
 56 | 
 57 | #nav a:hover {
 58 | 	color: #950740;
 59 | }
 60 | #wrapper {
 61 | 	width: 100%;
 62 | 	display: flex;
 63 | 	flex-direction: column;
 64 | 	flex-wrap: nowrap;
 65 | 	justify-content: center;
 66 | 	align-items: center;
 67 | }
 68 | 
 69 | #searchContainer {
 70 | 	display: flex;
 71 | 	flex-direction: column;
 72 | 	justify-content: center;
 73 | 	align-items: center;
 74 | 	margin: 20px;
 75 | 	height: fit-content;
 76 | 	width: 50%;
 77 | 	margin-bottom: 20px;
 78 | }
 79 | 
 80 | #searcher {
 81 | 	font-size: 35px;
 82 | 	padding: 10px;
 83 | 	text-indent: 25px;
 84 | 	height: 1.1cm;
 85 | 	width: 100%;
 86 | 	background-color: transparent;
 87 | 	border: none;
 88 | 	outline: none;
 89 | 	color: whitesmoke;
 90 | 	border-bottom: 3px solid white;
 91 | }
 92 | 
 93 | #container {
 94 | 	box-sizing: border-box;
 95 | 	background-color: #4e4e50;
 96 | 	width: 70%;
 97 | 	padding: 0.5cm;
 98 | 	border-radius: 0.6cm;
 99 | 	box-shadow: 0px 0px 10px 1px rgba(27, 27, 27, 0.781);
100 | 	display: flex;
101 | 	height: fit-content;
102 | 	flex-wrap: wrap;
103 | 	flex-direction: row;
104 | 	align-items: stretch;
105 | 	justify-content: center;
106 | }
107 | 
108 | #template {
109 | 	cursor: pointer;
110 | 	max-width: 300px;
111 | 	min-width: 150px;
112 | 	margin: 5px;
113 | 	padding: 15px 8px 7px 8px;
114 | 	box-sizing: border-box;
115 | 	display: flex;
116 | 	flex-direction: column;
117 | 	justify-content: space-between;
118 | 	align-items: center;
119 | 	background-color: #373737;
120 | 	border-radius: 5px;
121 | 	overflow: hidden;
122 | 	z-index: 3;
123 | 	flex: 1 1 20%;
124 | 	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
125 | 		rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
126 | 		rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
127 | 
128 | 	transition-duration: 0.1s;
129 | }
130 | 
131 | #template:hover {
132 | 	z-index: 10;
133 | 	transform: scale(1.1);
134 | }
135 | 
136 | #other { 
137 | 	align-self: flex-start;
138 | 	width: fit-content;
139 | }
140 | 
141 | #template #spotify_logo {
142 | 	width: 70px;
143 | 	margin: 15px;
144 | 	margin-bottom: 12px;
145 | }
146 | 
147 | #duration {
148 | 	margin-block: 0;
149 | 	color: white;
150 | 	font-weight: lighter;
151 | 	font-size: 15px;
152 | 	margin: 3px 0;
153 | }
154 | 
155 | #template #img {
156 | 	height: 80px;
157 | 	width: 80px;
158 | 	background-color: white;
159 | }
160 | 
161 | #template #identity {
162 | 	display: flex;
163 | 	flex-direction: column;
164 | 	justify-content: center;
165 | 	align-items: center;
166 | 	height: fit-content;
167 | 	width: 100%;
168 | 	box-sizing: border-box;
169 | 	flex-wrap: wrap;
170 | }
171 | 
172 | #template #identity a {
173 | 	overflow-wrap: break-word;
174 | 	color: white;
175 | 	text-align: center;
176 | 	font-family: sans-serif;
177 | 	text-decoration: none;
178 | 	max-width: 100%;
179 | 	width: fit-content;
180 | 	line-clamp: 2;
181 | 	-webkit-line-clamp: 2;
182 | }
183 | 
184 | #template #identity a:hover {
185 | 	text-decoration: underline;
186 | 	color: #950740;
187 | }
188 | 
189 | #title {
190 | 	font-size: 15px;
191 | 	text-overflow: ellipsis;
192 | 	font-weight: bolder;
193 | }
194 | 
195 | #template #identity div {
196 | 	display: flex;
197 | 	flex-direction: row;
198 | 	flex-wrap: wrap;
199 | 	justify-content: center;
200 | 	align-items: center;
201 | }
202 | #identity div a {
203 | 	font-weight: lighter;
204 | }
205 | #submitter {
206 | 	background: none;
207 | 	font-size: 1.7em;
208 | 	cursor: pointer;
209 | 	text-decoration: 1.5px underline;
210 | 	border: none;
211 | 	font-weight: bolder;
212 | 	color: white;
213 | }
214 | 
215 | footer {
216 | 	display: flex;
217 | 	flex-direction: column;
218 | 	flex-wrap: wrap;
219 | 	align-items: center;
220 | 	justify-content: space-evenly;
221 | 	gap: 20px;
222 | 	width: fit-content;
223 | 	max-width: 700px;
224 | 	box-sizing: border-box;
225 | 	padding: 17px;
226 | 	margin-bottom: 10px;
227 | 	background-color: none;
228 | 	font-family: sans-serif;
229 | 	text-align: center;
230 | 	align-self: flex-end;
231 | }
232 | footer p {
233 | 	margin: unset;
234 | }
235 | a {
236 | 	color: #c3073f;
237 | 	font-weight: bold;
238 | }
239 | a:hover {
240 | 	color: crimson;
241 | }
242 | @media only screen and (max-width: 1000px) {
243 | 	#container {
244 | 		width: 90%;
245 | 	}
246 | 
247 | 	#searchContainer,
248 | 	#searcher {
249 | 		width: 90%;
250 | 		margin: 20px;
251 | 		font-size: 20px;
252 | 	}
253 | }
254 | 
255 | @media screen and (max-width: 500px) {
256 | 	#nav {
257 | 		flex-direction: column;
258 | 
259 | 		align-self: flex-start;
260 | 	}
261 | 	input {
262 | 		font-size: small;
263 | 	}
264 | }
265 | 


--------------------------------------------------------------------------------
/public/sheets/lyrics.css:
--------------------------------------------------------------------------------
  1 | * {
  2 | 	scroll-behavior: smooth;
  3 | 	box-sizing: border-box;
  4 | 	font-family: sans-serif;
  5 | 	transition: all 150ms;
  6 | }
  7 | :root {
  8 | 	--bgc: #212121;
  9 | 	--bgcDarker: #151515;
 10 | 	--bgcLighter: #303030;
 11 | 
 12 | 	--textC: white;
 13 | 	--opposite: black;
 14 | 	
 15 | 	--selected: black;
 16 | 	--unselected: white;
 17 | }
 18 | [contenteditable="true"] {
 19 | 	outline: none;
 20 | }
 21 | 
 22 | @font-face {
 23 | 	font-family: Gotham;
 24 | 	font-weight: bold;
 25 | 	src: url("../Fonts/GothamBold.ttf");
 26 | }
 27 | 
 28 | @font-face {
 29 | 	font-family: Gotham;
 30 | 	font-weight: normal;
 31 | 	src: url("../Fonts/GothamMedium.ttf");
 32 | }
 33 | 
 34 | html,
 35 | body {
 36 | 	height: 100%;
 37 | }
 38 | @keyframes gradient {
 39 | 	0% {
 40 | 		background-position: 0% 50%;
 41 | 	}
 42 | 	50% {
 43 | 		background-position: 100% 50%;
 44 | 	}
 45 | 	100% {
 46 | 		background-position: 0% 50%;
 47 | 	}
 48 | }
 49 | body {
 50 | 	background: linear-gradient(
 51 | 		-45deg,
 52 | 		var(--bgcDarker),
 53 | 		var(--bgc),
 54 | 		var(--bgcLighter)
 55 | 	);
 56 | 	background-size: 400% 400%;
 57 | 	animation: gradient 5s ease infinite;
 58 | 	display: flex;
 59 | 	flex-direction: column;
 60 | 	background-color: var(--bgc);
 61 | 	margin: 0;
 62 | 	min-width: 300px;
 63 | 	justify-content: space-between;
 64 | 	align-items: center;
 65 | 	gap: 1cm;
 66 | 	width: 100%;
 67 | 	min-width: 320px;
 68 | }
 69 | 
 70 | #body {
 71 | 	width: 100%;
 72 | 	height: fit-content;
 73 | 	display: flex;
 74 | 	flex-direction: row;
 75 | 	justify-content: space-evenly;
 76 | 	align-items: center;
 77 | 	flex-wrap: wrap;
 78 | }
 79 | 
 80 | #nav {
 81 | 	display: block;
 82 | 	height: 50px;
 83 | 	width: fit-content;
 84 | 	text-align: center;
 85 | 	display: flex;
 86 | 	flex-direction: row;
 87 | 	justify-content: center;
 88 | 	flex-wrap: wrap;
 89 | 	align-items: center;
 90 | 	gap: 20px 50px;
 91 | 	width: fit-content;
 92 | 	height: fit-content;
 93 | 
 94 | 	padding: 15px;
 95 | 	border-radius: 10px;
 96 | }
 97 | 
 98 | #nav a {
 99 | 	padding: 0 10px;
100 | 	text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
101 | 	color: var(--textC);
102 | 	font-size: 25px;
103 | 	transition: all 0.2s ease-in-out;
104 | 	text-decoration: none;
105 | 	font-weight: bolder;
106 | }
107 | 
108 | #nav a:hover,a:hover {
109 | 	color: var(--bgcLighter);
110 | }
111 | a {
112 | 	font-weight: bolder;
113 | 	color: var(--textC);
114 | }
115 | .container {
116 | 	background-color: var(--bgc);
117 | 	position: relative;
118 | 	height: 100%;
119 | 	max-height: 500px;
120 | 	max-width: 50%;
121 | 	min-width: 300px;
122 | 	box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.65);
123 | 	display: flex;
124 | 	flex-wrap: nowrap;
125 | 	flex-direction: column;
126 | 	align-items: flex-start;
127 | 	border-radius: 8px;
128 | }
129 | 
130 | .container-inner {
131 | 	width: 95%;
132 | 	height: calc(100% - 10px);
133 | 	overflow-y: scroll;
134 | 	overflow-x: hidden;
135 | 	align-self: flex-end;
136 | }
137 | 
138 | p {
139 | 	color: var(--textC);
140 | 	margin: 12px 0;
141 | 	font-size: 18px;
142 | 	font-family: sans-serif;
143 | }
144 | 
145 | .container-inner #bar {
146 | 	padding: 10px 0px;
147 | }
148 | 
149 | .marker {
150 | 	background-color: var(--textC);
151 | }
152 | 
153 | .scroll-marker {
154 | 	position: absolute;
155 | 	height: 100%;
156 | 	width: 12px;
157 | 	pointer-events: none;
158 | 	top: 0;
159 | 	right: 0;
160 | }
161 | 
162 | .scroll-marker span {
163 | 	position: absolute;
164 | 	width: 100%;
165 | }
166 | 
167 | ::-webkit-scrollbar {
168 | 	width: 0;
169 | }
170 | 
171 | .container-inner::-webkit-scrollbar {
172 | 	width: 12px;
173 | }
174 | 
175 | /* Track */
176 | .container-inner::-webkit-scrollbar-track {
177 | 	background: var(--bgc);
178 | }
179 | 
180 | /* Handle */
181 | .container-inner::-webkit-scrollbar-thumb {
182 | 	background: var(--bgcLighter);
183 | }
184 | 
185 | #wrapper {
186 | 	display: flex;
187 | 	flex-direction: column;
188 | 	flex-wrap: nowrap;
189 | 	justify-content: center;
190 | 	align-items: center;
191 | 	border-radius: 8px;
192 | 	width: fit-content;
193 | }
194 | 
195 | #mainContainer {
196 | 	background-color: var(--bgc);
197 | 	height: fit-content;
198 | 	width: 320px;
199 | 	padding: 25px;
200 | 	border-radius: 25px;
201 | 	display: flex;
202 | 	flex-wrap: nowrap;
203 | 	flex-direction: column;
204 | 	align-items: flex-start;
205 | 	gap: 25px;
206 | }
207 | 
208 | #identity {
209 | 	display: flex;
210 | 	flex-direction: row;
211 | 	justify-content: space-around;
212 | 	flex-wrap: nowrap;
213 | }
214 | 
215 | #identity > img {
216 | 	height: 80px;
217 | 	width: 80px;
218 | 	background-color: var(--bgc);
219 | }
220 | 
221 | #identity div {
222 | 	display: flex;
223 | 	flex-direction: column;
224 | }
225 | 
226 | #name {
227 | 	display: flex;
228 | 	justify-content: center;
229 | 	align-items: flex-start;
230 | 	flex-wrap: nowrap;
231 | }
232 | 
233 | #name p {
234 | 	color: var(--textC);
235 | 	padding: 0;
236 | 	margin: 3px;
237 | 	margin-left: 22px;
238 | }
239 | 
240 | #name p:nth-child(1) {
241 | 	text-overflow: ellipsis;
242 | 	font-family: Gotham;
243 | 	font-weight: bold;
244 | 	font-size: 1.2em;
245 | }
246 | 
247 | #name p:nth-child(2) {
248 | 	font-family: sans-serif;
249 | 	font-size: 1em;
250 | }
251 | 
252 | #bar {
253 | 	height: auto;
254 | 	margin: 2px 0;
255 | 	font-family: Gotham;
256 | 	font-size: 1.5em;
257 | 	color: var(--textC);
258 | 	border-radius: 5px;
259 | 	outline: 0px solid transparent;
260 | }
261 | 
262 | #barz #bar {
263 | 	font-size: 1.425em;
264 | 	color: var(--textC);
265 | 	padding: 1.5px 0;
266 | }
267 | 
268 | #downloader {
269 | 	background: none;
270 | 	font-size: 1.6em;
271 | 	cursor: pointer;
272 | 	text-decoration: 1.5px underline;
273 | 	border: none;
274 | 	font-weight: bolder;
275 | 	color: var(--textC);
276 | 	margin: 30px 0;
277 | }
278 | 
279 | footer {
280 | 	display: flex;
281 | 	flex-direction: column;
282 | 	flex-wrap: wrap;
283 | 	align-items: center;
284 | 	justify-content: space-evenly;
285 | 	gap: 20px;
286 | 	width: fit-content;
287 | 	max-width: 700px;
288 | 	box-sizing: border-box;
289 | 	padding: 17px;
290 | 	margin-bottom: 10px;
291 | 	background-color: none;
292 | 	font-family: sans-serif;
293 | 	text-align: center;
294 | 	align-self: flex-end;
295 | }
296 | footer p {
297 | 	margin: unset;
298 | }
299 |  
300 | @media only screen and (max-width: 1050px) {
301 | 	body {
302 | 		height: fit-content;
303 | 		display: flex;
304 | 		flex-direction: column;
305 | 		justify-content: center;
306 | 		align-items: center;
307 | 	}
308 | 
309 | 	#lyricsContainer {
310 | 		width: 75%;
311 | 		max-width: unset;
312 | 	}
313 | 
314 | 	p {
315 | 		margin: 10px 0;
316 | 	}
317 | }
318 | 
319 | @media (max-width: 500px) {
320 | 	#nav {
321 | 		flex-direction: column;
322 | 		align-self: flex-start;
323 | 	}
324 | 	#lyricsContainer {
325 | 		width: 90%;
326 | 	}
327 | }
328 | 


--------------------------------------------------------------------------------
/public/scripts/search.js:
--------------------------------------------------------------------------------
  1 | function setCookie(name, value, days) {
  2 |     if (days) {
  3 |         let date = new Date();
  4 |         date.setTime(date.getTime() + (3500000));
  5 |         let expires = "; expires=" + date.toUTCString();
  6 |     } else {
  7 |         let expires = "";
  8 |         document.cookie = name + "=" + value + expires + "; path=/";
  9 |     }
 10 | }
 11 | 
 12 | function getCookie(name) {
 13 |     let nameEQ = name + "=";
 14 |     let ca = document.cookie.split(';');
 15 |     for (let i = 0; i < ca.length; i++) {
 16 |         let c = ca[i];
 17 |         while (c.charAt(0) == ' ') c = c.substring(1, c.length);
 18 |         if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
 19 |     }
 20 |     return null;
 21 | }
 22 | 
 23 | function deleteCookie(name) { setCookie(name, "", -1); }
 24 | 
 25 | function Code() {
 26 |     if (!getCookie('token')) {
 27 |         console.log(getCookie('token2'))
 28 |         const params1 = new URLSearchParams(window.location.search)
 29 |         const token = params1.get("access_token")
 30 |         if (!token) { return false }
 31 |         setCookie('token', token, 10)
 32 |         return token
 33 |     }
 34 |     return getCookie('token')
 35 | }
 36 | 
 37 | 
 38 | function mtmas(millis) {
 39 |     let minutes = Math.floor(millis / 60000);
 40 |     let seconds = ((millis % 60000) / 1000).toFixed(0);
 41 |     return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
 42 | }
 43 | 
 44 | class playlistConstruct {
 45 |     constructor(res) {
 46 |         this.type = res['type'];
 47 |         this.id = res['id'];
 48 |         this.href = res["external_urls"]["spotify"];
 49 |         this.name = res['name'];
 50 |         this.collaborative = res["collaborative"];
 51 |         this.description = res["description"];
 52 |         this.img = res["images"][0]['url'];
 53 |         this.tracks = res["tracks"]["href"];
 54 |         this.len = res["tracks"]["total"];
 55 |     }
 56 |     async getTrackLink(token) {
 57 |         const result = await fetch(this.tracks, { method: "GET", headers: { Authorization: `Bearer ${token}` }, });
 58 |         let r = await result.json(); r = r["items"];
 59 |         let tlist = [];
 60 |         for (let i = 0; i < r.length; i++) { tlist.push(new trackConstruct(r[i]["track"])); }
 61 |         return tlist;
 62 |     }
 63 | }
 64 | class trackConstruct {
 65 |     constructor(searchItem) {
 66 |         this.name = searchItem['name']
 67 |         this.img = searchItem['album']['images'][1]['url']
 68 |         this.artists = this.getArtists(searchItem['artists'])
 69 |         this.length = searchItem['duration_ms']
 70 |         this.href = searchItem['external_urls']['spotify']
 71 |     }
 72 |     getArtists(t) {
 73 |         let artists = [];
 74 |         for (let j = 0; j < t.length; j++) {
 75 |             let artist = { name: t[j]["name"], link: t[j]["external_urls"]["spotify"] };
 76 |             artists.push(artist);
 77 |         }
 78 |         return artists
 79 |     }
 80 | }
 81 | async function getPlaylists(token) {
 82 |     const result = await fetch("https://api.spotify.com/v1/me/playlists?&limit=50", { method: "GET", headers: { Authorization: `Bearer ${token}` } });
 83 |     let playlists = [];
 84 |     let res = await result.json();
 85 |     res = res["items"];
 86 |     for (let i = 0; i < res.length; i++) {
 87 |         let pl = new playlistConstruct(res[i]);
 88 |         pl.tracks = pl.getTrackLink(token);
 89 |         playlists.push(pl);
 90 |     } return playlists
 91 | }
 92 | //console.log(getPlaylists(Code()))
 93 | 
 94 | async function search(searchterm) {
 95 |     if (searchterm.length == 0) { return }
 96 |     try {
 97 |         if (searchterm.startsWith('https://open.spotify.com/track/')) {
 98 |             const id = searchterm.split('track/')[1].split('?')[0]
 99 |             const result = await fetch(`https://api.spotify.com/v1/tracks/${id}`, {
100 |                 method: "GET", headers: { Authorization: `Bearer ${Code()}` }
101 |             })
102 |             let r = await result.json();
103 |             return [new trackConstruct(r)]
104 |         }
105 |         else {
106 |             let url = "https://api.spotify.com/v1/search?";
107 |             url += "q=" + encodeURIComponent(searchterm);
108 |             url += '&type=track&limit=10'
109 |             const result = await fetch(url, { method: "GET", headers: { Authorization: `Bearer ${Code()}` } })
110 |             let r = await result.json();
111 |             let queries = r['tracks']['items']
112 |             let returner = []
113 |             for (let i = 0; i < queries.length; i++) {
114 |                 returner.push(new trackConstruct(queries[i]))
115 |             }
116 |             return returner
117 |         }
118 | 
119 |     } catch (error) {
120 |         let url = "https://api.spotify.com/v1/search?";
121 |         url += "q=" + encodeURIComponent(searchterm);
122 |         url += '&type=track&limit=8'
123 |         const result = await fetch(url, { method: "GET", headers: { Authorization: `Bearer ${Code()}` } })
124 |         let r = await result.json();
125 |         let returner = []
126 |         r['tracks']['items'].forEach(el => { returner.push(new trackConstruct(el)) });
127 | 
128 |         return returner
129 |     }
130 | }
131 | 
132 | 
133 | async function PopulateSearch(term) {
134 |     const arr = await search(term)
135 |     if (!arr) { return }
136 |     document.getElementById('container').innerHTML = ''
137 |     for (let i = 0; i < arr.length; i++) {
138 |         let artists = []
139 |         for (index of arr[i].artists) { artists.push(`<a id='artist' target="_blank" href=${index['link']}>${index['name']}`) }
140 |         let template = ` 
141 |             <img id="img" src="${arr[i].img}" alt="track image"><p id="duration">${mtmas(arr[i].length)}</p>
142 |             <div id="identity"><a target="_blank" id='title' href="${arr[i].href}">${arr[i].name}</a><div>${artists.join(',</a>') + '</a>'}</div></div>
143 |             <div id="other"><img id="spotify_logo" src="src/Spotify_Logo_RGB_White.png" alt="spotify icon" /></div>`
144 | 
145 |         const container = document.createElement("div");
146 |         container.id = 'template'
147 | 
148 | 
149 |         let newurl = new URL(window.location.protocol + '//' + window.location.hostname + ':' + window.location.port)
150 |         newurl.pathname = '/slyrics'
151 |         newurl.searchParams.set("fullartists", arr[i].artists.reduce((Artists, item) => { return Artists + item.name + ', ' }, '').slice(0, -2))
152 |         newurl.searchParams.set("artist", `${arr[i].artists[0].name}`)
153 |         newurl.searchParams.set("track", `${arr[i].name}`)
154 | 
155 |         container.setAttribute('redir', newurl)
156 |         container.addEventListener('click', (e) => {
157 |             if (e.target.tagName === 'DIV') {
158 |                 window.location = (container.getAttribute('redir'))
159 |             }
160 |         })
161 | 
162 |         container.innerHTML = template
163 |         document.getElementById('container').appendChild(container)
164 |     }
165 | }
166 | 
167 | 
168 | 
169 | PopulateSearch('a')
170 | let call
171 | async function searchLegit(term) {
172 |     clearTimeout(call)
173 |     call = setTimeout(() => { PopulateSearch(term) }, 500)
174 | }
175 | 
176 | if (!Code()) { window.location = '/gsearch' }


--------------------------------------------------------------------------------
/public/scripts/lyrics.js:
--------------------------------------------------------------------------------
  1 | function downloadimage() {
  2 |     let container = document.getElementById("mainContainer");
  3 |     html2canvas(container, {
  4 |         allowTaint: true, useCORS: true, backgroundColor: null, imageTimeout: 15000
  5 |     }).then(function (canvas) {
  6 |         let link = document.createElement("a");
  7 |         document.body.appendChild(link);
  8 |         link.download = "html_image.png";
  9 |         link.href = canvas.toDataURL();
 10 |         link.target = '_blank';
 11 |         link.click();
 12 |     });
 13 | }
 14 | 
 15 | function getAverageRGB(imgEl) {
 16 |     let blockSize = 10, // only visit every 5 pixels
 17 |         defaultRGB = { r: 0, g: 0, b: 0 },
 18 |         canvas = document.createElement('canvas'),
 19 |         context = canvas.getContext && canvas.getContext('2d'), data, width, height, i = -4, length, rgb = { r: 0, g: 0, b: 0 }, count = 0;
 20 |     if (!context) { return defaultRGB; }
 21 |     height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
 22 |     width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;
 23 | 
 24 |     context.drawImage(imgEl, 0, 0);
 25 | 
 26 |     try { data = context.getImageData(0, 0, width, height); }
 27 |     catch (e) { return defaultRGB; }
 28 |     length = data.data.length;
 29 | 
 30 |     while ((i += blockSize * 4) < length) { ++count; rgb.r += data.data[i]; rgb.g += data.data[i + 1]; rgb.b += data.data[i + 2]; }
 31 | 
 32 |     rgb.r = ~~(rgb.r / count);
 33 |     rgb.g = ~~(rgb.g / count);
 34 |     rgb.b = ~~(rgb.b / count);
 35 |     return rgb;
 36 | }
 37 | function changeBackground(nodes, items) {
 38 |     for (let j = 0; j < nodes.length; j++) {
 39 |         if (items.indexOf(j) == -1) {
 40 |             nodes[j].style.backgroundColor = 'var(--bgc)'
 41 |             nodes[j].style.borderInline = 'none'
 42 |             nodes[j].style.color = 'var(--unselected)'
 43 |         }
 44 |         else {
 45 |             nodes[j].style.backgroundColor = 'var(--selected)'
 46 |             nodes[j].style.borderInline = '5px solid ' + 'var(--selected)'
 47 |             nodes[j].style.color = 'var(--unselected)'
 48 |         }
 49 |     }
 50 |     if (selected.length >= 5) { return }
 51 |     if (items[0] > 0) {
 52 |         nodes[items[0] - 1].style.color = 'var(--selected)'
 53 |         nodes[items[0] - 1].style.backgroundColor = 'var(--unselected)'
 54 |         nodes[items[0] - 1].style.borderInline = '5px solid ' + 'var(--unselected)'
 55 |     }
 56 |     if (items[items.length - 1] < nodes.length - 1) {
 57 |         nodes[items[items.length - 1] + 1].style.color = 'var(--selected)'
 58 |         nodes[items[items.length - 1] + 1].style.backgroundColor = 'var(--unselected)'
 59 |         nodes[items[items.length - 1] + 1].style.borderInline = '5px solid ' + 'var(--unselected)'
 60 |     }
 61 | }
 62 | 
 63 | function resize() {
 64 |     let container = document.querySelector('.container');
 65 |     let containerInner = document.querySelector('.container-inner');
 66 |     let containerHeight = container.offsetHeight;
 67 |     let containerScrollHeight = containerInner.scrollHeight;
 68 |     let scrollMarker = document.querySelector('.scroll-marker');
 69 |     let colorfulStuff = document.querySelectorAll('.container-inner span'); // colorful spans from text
 70 | 
 71 |     while (scrollMarker.hasChildNodes()) { scrollMarker.removeChild(scrollMarker.firstChild) }
 72 | 
 73 |     colorfulStuff.forEach(function (span) { // loop to create each marker
 74 |         let spanTop = span.offsetTop;
 75 |         let spanBottom = spanTop + span.offsetHeight;
 76 |         let markerTop = Math.ceil(spanTop * containerHeight / containerScrollHeight);
 77 |         let markerBottom = Math.ceil(spanBottom * containerHeight / containerScrollHeight);
 78 |         let markerElement = document.createElement("span"); // create the marker, set color and position and put it there
 79 |         markerElement.className = 'marker'
 80 |         markerElement.style.backgroundColor = 'var(--bgcDarker)';
 81 |         markerElement.style.top = markerTop + "px"
 82 |         markerElement.style.height = (markerBottom - markerTop + 2) + "px"
 83 |         scrollMarker.appendChild(markerElement);
 84 |     })
 85 | }
 86 | 
 87 | let kids = document.getElementById('lyricsContainer').querySelectorAll('#bar')
 88 | let imgEl = document.getElementById('albumArt')
 89 | let selected = []
 90 | 
 91 | 
 92 | 
 93 | function componentToHex(c) { return c.toString(16).length == 1 ? "0" + c.toString(16) : c.toString(16); }
 94 | function rgbToHex(r, g, b) { return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); }
 95 | function adjust(col, amt) {
 96 |     if (col[0] == "#") { col = col.slice(1); }
 97 |     let num = parseInt(col, 16);
 98 |     let r = (num >> 16) + amt; if (r > 255) { r = 255 } else if (r < 0) { r = 0 };
 99 |     let g = (num & 0x0000FF) + amt; if (g > 255) { g = 255 } else if (g < 0) { g = 0 };
100 |     let b = ((num >> 8) & 0x00FF) + amt; if (b > 255) { b = 255 } else if (b < 0) { b = 0 }
101 |     return "#" + (g | (b << 8) | (r << 16)).toString(16);
102 | }
103 | function getContrastYIQ(hexcolor) {
104 |     var r = parseInt(hexcolor.substring(1, 3), 16);
105 |     var g = parseInt(hexcolor.substring(3, 5), 16);
106 |     var b = parseInt(hexcolor.substring(5, 7), 16);
107 |     var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
108 |     return (yiq >= 128) ? '#000000' : '#ffffff';
109 | }
110 | function fixHex(HEX) {
111 |     if (HEX[0] == "#") { HEX = HEX.slice(1); }
112 |     if (isNaN(HEX)) { return '#' + HEX }
113 |     while (HEX.length < 6) { HEX += '0' }
114 |     return '#' + HEX
115 | }
116 | function setColors() {
117 |     let rgb = getAverageRGB(imgEl)
118 |     let defaultBGC = rgbToHex(rgb.r, rgb.g, rgb.b)
119 |     let textColor = getContrastYIQ(defaultBGC)
120 |     if (textColor !== '#ffffff') { document.querySelector('#spotify_logo').src = 'src/Spotify_Logo_RGB_Black.png' }
121 |     let opposite = (textColor === '#ffffff') ? '#000000' : '#ffffff';
122 |     let r = document.querySelector(':root')
123 | 
124 |     r.style.setProperty('--bgc', fixHex(defaultBGC));
125 |     r.style.setProperty('--bgcDarker', fixHex(adjust(defaultBGC, -50)));
126 |     r.style.setProperty('--bgcLighter', fixHex(adjust(defaultBGC, 50)));
127 | 
128 |     r.style.setProperty('--selected', fixHex(adjust(defaultBGC, -100)));
129 |     r.style.setProperty('--unselected', fixHex(adjust(defaultBGC, 100)));
130 | 
131 |     r.style.setProperty('--textC', fixHex(textColor));
132 |     r.style.setProperty('--opposite', fixHex(opposite));
133 | 
134 |     changeBackground(kids, selected)
135 | }
136 | imgEl.onload = setColors
137 | setColors()
138 | 
139 | 
140 | 
141 | resize()
142 | document.addEventListener("resize", () => { resize() });
143 | 
144 | 
145 | for (let i = 0; i < kids.length; i++) {
146 |     const el = kids[i];
147 |     el.addEventListener('click', (e) => {
148 |         if (selected.length == 0) { selected = [i] }
149 |         else if (selected.indexOf(i) != -1) {
150 |             if (selected[0] == i) { selected.shift() }
151 |             else if (selected[selected.length - 1] == i) { selected.pop() }
152 |             else { selected = [] }
153 |         } else if (selected.length < 5) { if (i - selected[selected.length - 1] == 1) { selected.push(i) } else if (selected[0] - i == 1) { selected.unshift(i) } else { selected = [i] } }
154 |         else { selected = [i] }
155 |         while (document.getElementById('barz').hasChildNodes()) {
156 |             document.getElementById('barz').removeChild(document.getElementById('barz').firstChild)
157 |         }
158 |         selected.forEach(el => {
159 |             const text = kids[el].textContent
160 |             let clone = document.createElement('p')
161 |             clone.textContent = text.trim()
162 |             clone.id = 'bar'
163 |             document.getElementById('barz').appendChild(clone)
164 |         })
165 |         if (document.getElementById('barz').hasChildNodes() == false) {
166 |             let a = document.createElement('h3')
167 |             a.id = 'bar'
168 |             a.setAttribute('contenteditable', 'true')
169 |             const text = document.createTextNode("choose or type lyrics");
170 |             a.appendChild(text)
171 |             document.getElementById('barz').appendChild(a)
172 |         }
173 |         changeBackground(kids, selected)
174 |     })
175 | }
176 | 
177 | 
178 | const getImg = (e) => {
179 |     const src = e.target.getAttribute('src')
180 |     console.log(src);
181 |     
182 | }


--------------------------------------------------------------------------------
/public/scripts/home.js:
--------------------------------------------------------------------------------
  1 | function setCookie(cName, cValue, time) {
  2 |     let date = new Date();
  3 |     date.setTime(date.getTime() + (time * 1000));
  4 |     date = "expires=" + date.toUTCString()
  5 |     document.cookie = cName + "=" + cValue + "; " + date + "; path=/";
  6 | }
  7 | 
  8 | function getCookie(cName) {
  9 |     const name = cName + "=";
 10 |     const cDecoded = decodeURIComponent(document.cookie);
 11 |     const cArr = cDecoded.split('; ');
 12 |     let res;
 13 |     cArr.forEach(val => {
 14 |         if (val.indexOf(name) === 0) res = val.substring(name.length);
 15 |     })
 16 |     return res;
 17 | }
 18 | 
 19 | function deleteCookie(name) {
 20 |     setCookie(name, '', -1)
 21 | }
 22 | function Code() {
 23 |     if (!getCookie('token') || getCookie('token')?.length == '') {
 24 |         const params1 = new URLSearchParams(window.location.search)
 25 |         const token = params1.get("access_token")
 26 |         if (!token) { return false }
 27 |         setCookie('token', token, 50 * 60)
 28 |         if ((getCookie('autoLogin') !== 'true') && confirm("Save login info ?")) { setCookie('autoLogin', 'true', (10 * 365 * 24 * 60 * 60)) }
 29 |         window.location = '/home'
 30 |         return token
 31 |     }
 32 |     return getCookie('token')
 33 | }
 34 | 
 35 | class trackConstruct {
 36 |     constructor(searchItem) {
 37 |         this.name = searchItem['name'].replace(/\(feat.*\)/, '')
 38 |         this.img = searchItem['album']['images'][1]['url']
 39 |         this.artists = this.getArtists(searchItem['artists'])
 40 |         this.length = searchItem['duration_ms']
 41 |         this.href = searchItem['external_urls']['spotify']
 42 |     }
 43 |     getArtists(t) {
 44 |         let artists = [];
 45 |         for (let j = 0; j < t.length; j++) {
 46 |             let artist = { name: t[j]["name"], link: t[j]["external_urls"]["spotify"] };
 47 |             artists.push(artist);
 48 |         }
 49 |         return artists
 50 |     }
 51 | }
 52 | async function getCurrentPlaying(token) {
 53 |     const result = await fetch(`https://api.spotify.com/v1/me/player/currently-playing`, { method: "GET", headers: { Authorization: `Bearer ${token}` } })
 54 |     return await result.json()
 55 | }
 56 | async function getRecent(token) {
 57 |     const result = await fetch(`https://api.spotify.com/v1/me/player/recently-played?limit=3`, { method: "GET", headers: { Authorization: `Bearer ${token}` } })
 58 |     return await result.json()
 59 | }
 60 | async function fetchProfile(token) {
 61 |     const result = await fetch("https://api.spotify.com/v1/me", { method: "GET", headers: { Authorization: `Bearer ${token}` } });
 62 |     return await result.json();
 63 | }
 64 | 
 65 | function PopulateProfile() {
 66 |     fetchProfile(Code()).then((res) => {
 67 |         if (res?.error?.status === 401) { deleteCookie('token'); return }
 68 |         document.querySelector('#account').querySelector('p').innerText = res['display_name']
 69 |         document.querySelector('#account').querySelector('img').src = res['images'][1]['url']
 70 |     })
 71 | }
 72 | function PopulateRecent() {
 73 |     getRecent(Code()).then((res) => {
 74 |         if (res?.error?.status === 401) { deleteCookie('token'); return }
 75 |         while (document.getElementById('history').hasChildNodes()) { document.getElementById('history').removeChild(document.getElementById('history').firstChild) }
 76 |         for (const i of res['items']) {
 77 |             let item = new trackConstruct(i['track'])
 78 |             let div = document.createElement('div')
 79 |             let img = document.createElement('img')
 80 |             let title = document.createElement('span')
 81 |             img.src = item.img; img.style.height = '40px'; img.style.width = '40px'
 82 |             title.innerHTML = `<a target='_blank' href=${item.href}>${item.name}</a> - ${item.artists.reduce((Artists, el) => { return Artists + `<a target='_blank'  href="${el.link}">` + el.name + `</a>` + ', ' }, '').slice(0, -2)}`
 83 | 
 84 |             let logo = document.createElement('img')
 85 |             logo.src = '../src/Spotify_Logo_RGB_White.png'
 86 |             logo.id = 'spotify_logo'
 87 |             let logow = document.createElement('div')
 88 |             logow.appendChild(logo)
 89 |             logow.id = 'logo'
 90 |             let after = document.createElement('div')
 91 |             after.id = 'after'
 92 |             after.textContent = 'Get Lyrics'
 93 | 
 94 |             let wrap = document.createElement('div')
 95 |             wrap.id = 'cwrap'
 96 |             wrap.appendChild(img)
 97 |             wrap.appendChild(title)
 98 |             div.appendChild(logow); div.appendChild(wrap); div.appendChild(after)
 99 |             div.id = 'clicker'
100 | 
101 | 
102 | 
103 |             let newurl = new URL(window.location.protocol + '//' + window.location.hostname + ':' + window.location.port)
104 |             newurl.pathname = '/slyrics'
105 |             newurl.searchParams.set("artist", item.artists[0].name)
106 |             newurl.searchParams.set("track", item.name)
107 |             newurl.searchParams.set("fullartists", item.artists.reduce((Artists, item) => { return Artists + item.name + ', ' }, '').slice(0, -2))
108 |             div.addEventListener('click', (e) => {
109 |                 if (e.target.tagName === 'DIV') { window.location.href = newurl.toString() }
110 |             })
111 |             document.getElementById('history').appendChild(div)
112 |         }
113 |     })
114 | }
115 | let currentPlay = undefined
116 | async function Runner() {
117 |     getCurrentPlaying(Code()).then((res) => {
118 |         if (res?.error?.status === 401) { deleteCookie('token'); return }
119 |         let track = new trackConstruct(res['item'])
120 |         if (((currentPlay?.name !== track.name))) {
121 |             let div0 = document.getElementById('identity')
122 |             let img0 = document.createElement('img')
123 |             let div1 = document.createElement('div')
124 |             let title0 = document.createElement('span')
125 |             let artist0 = document.createElement('span')
126 |             img0.src = track.img; img0.style.height = '80px'; img0.style.width = '80px'
127 |             title0.innerHTML = `<a target='_blank' href=${track.href}>${track.name}</a>`;
128 |             artist0.innerHTML = `${track.artists.reduce((Artists, item) => { return Artists + `<a target='_blank' href="${item.link}">` + item.name + `</a>` + ', ' }, '').slice(0, -2)}`;
129 |             div1.id = 'name'
130 | 
131 |             let logo = document.createElement('img')
132 |             logo.src = '../src/Spotify_Logo_RGB_White.png'
133 |             logo.id = 'spotify_logo'
134 |             let logow = document.createElement('div')
135 |             logow.appendChild(logo)
136 |             logow.id = 'logo'
137 |             let after = document.createElement('div')
138 |             after.id = 'after'
139 |             after.textContent = 'Get Lyrics'
140 |             let wrap = document.createElement('div'); wrap.id = 'cwrap'
141 |             wrap.appendChild(img0); div1.appendChild(title0); div1.appendChild(artist0); wrap.appendChild(div1); wrap
142 |             let newurl = new URL(window.location.protocol + '//' + window.location.hostname + ':' + window.location.port)
143 |             newurl.pathname = '/slyrics'
144 |             newurl.searchParams.set("artist", track.artists[0].name)
145 |             newurl.searchParams.set("track", track.name)
146 |             newurl.searchParams.set("fullartists", track.artists.reduce((Artists, item) => { return Artists + item.name + ', ' }, '').slice(0, -2))
147 |             div0.setAttribute('redir', newurl.toString())
148 |             while (div0.hasChildNodes()) { div0.firstChild.remove() }
149 |             div0.appendChild(logow); div0.appendChild(wrap); div0.appendChild(after);
150 |         }
151 |         currentPlay = track
152 |         PopulateRecent()
153 |     }).then(() => { setTimeout(() => { Runner() }, "2500") })
154 | }
155 | 
156 | 
157 | function logout() {
158 |     deleteCookie('token')
159 |     deleteCookie('autoLogin')
160 |     window.location = '/'
161 | }
162 | console.log(document.cookie)
163 | if (Code()) {
164 |     PopulateRecent()
165 |     PopulateProfile(Code())
166 |     document.querySelector('#account').style.display = 'flex'
167 |     document.querySelectorAll('#login')[0].style.display = 'none'
168 |     document.querySelectorAll('#login')[1].style.display = 'none'
169 |     document.querySelector('#logout').style.display = 'unset'
170 |     Runner()
171 |     document.getElementById('identity').addEventListener('click', (e) => {
172 |         if (e.target.tagName === 'DIV') {
173 |             window.location.href = document.getElementById('identity').getAttribute('redir')
174 |         }
175 |     })
176 | 
177 | } else {
178 |     document.querySelector('#account').querySelector('p').style.display = 'none'
179 |     document.querySelector('#account').querySelector('img').style.display = 'none'
180 |     document.querySelector('#logout').style.display = 'none'
181 |     document.querySelectorAll('#login')[0].style.display = 'block'
182 |     document.querySelectorAll('#login')[1].style.display = 'block'
183 |     document.querySelector('#identity').remove()
184 |     document.querySelector('#history').remove()
185 |     if (getCookie('autoLogin') === 'true') { window.location = '/authorize' }
186 | }  
187 | 


--------------------------------------------------------------------------------
/public/sheets/home.css:
--------------------------------------------------------------------------------
  1 | * {
  2 | 	transition: all 0.2s ease-in-out;
  3 | 	box-sizing: border-box;
  4 | 	font-family: sans-serif;
  5 | 	color: whitesmoke;
  6 | 	text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
  7 | }
  8 | ::-webkit-scrollbar {
  9 | 	width: 0;
 10 | }
 11 | body,
 12 | html {
 13 | 	height: 100%;
 14 | 	margin: 0;
 15 | 	padding: 0;
 16 | }
 17 | @keyframes gradient {
 18 | 	0% {
 19 | 		background-position: 0% 50%;
 20 | 	}
 21 | 	50% {
 22 | 		background-position: 100% 50%;
 23 | 	}
 24 | 	100% {
 25 | 		background-position: 0% 50%;
 26 | 	}
 27 | }
 28 | body {
 29 | 	background: linear-gradient(-45deg, #303030, gray, #4e4e50);
 30 | 	background-size: 400% 400%;
 31 | 	animation: gradient 5s ease infinite;
 32 | 	min-height: 100%;
 33 | 	height: fit-content;
 34 | 	background-color: #303030;
 35 | 	display: flex;
 36 | 	flex-direction: column;
 37 | 	justify-content: space-between;
 38 | 	align-items: center;
 39 | 	gap: 1cm;
 40 | }
 41 | 
 42 | #nav {
 43 | 	text-align: center;
 44 | 	display: flex;
 45 | 	flex-direction: row;
 46 | 	justify-content: space-between;
 47 | 	align-items: center;
 48 | 	flex-wrap: wrap;
 49 | 	gap: 30px 2cm;
 50 | 	max-width: 80%;
 51 | 	height: fit-content;
 52 | 	padding-top: 15px;
 53 | 	border-radius: 10px;
 54 | 
 55 | 	width: 100%;
 56 | }
 57 | 
 58 | #nav #pages {
 59 | 	min-width: fit-content;
 60 | 	gap: 20px 1cm;
 61 | 	display: flex;
 62 | 	flex-direction: row;
 63 | 	flex-wrap: nowrap;
 64 | 	justify-content: center;
 65 | 	align-items: center;
 66 | }
 67 | #nav a {
 68 | 	padding: 0 10px;
 69 | 	font-family: sans-serif;
 70 | 	color: whitesmoke;
 71 | 	font-size: 25px;
 72 | 
 73 | 	text-decoration: none;
 74 | }
 75 | #nav a:hover {
 76 | 	color: #950740;
 77 | }
 78 | #nav #account {
 79 | 	display: flex;
 80 | 	flex-direction: row;
 81 | 	gap: 10px;
 82 | 	font-family: sans-serif;
 83 | 	color: whitesmoke;
 84 | 	font-size: 25px;
 85 | 	display: flex;
 86 | 	flex-direction: row;
 87 | 	justify-content: center;
 88 | 	align-items: center;
 89 | }
 90 | #nav #account img {
 91 | 	border-radius: 100%;
 92 | 	box-shadow: 0px 0px 10px 1px rgba(27, 27, 27, 0.781);
 93 | 	background-color: #c3073f;
 94 | 	border: 3px solid #c3073f;
 95 | }
 96 | #wrapper {
 97 | 	width: 90%;
 98 | 	height: 100%;
 99 | 	color: white;
100 | 	font-family: sans-serif;
101 | 	display: flex;
102 | 	flex-direction: row;
103 | 	align-items: stretch;
104 | 	justify-content: center;
105 | 	gap: 30px;
106 | 	flex-wrap: wrap;
107 | }
108 | 
109 | #player {
110 | 	min-height: 200px;
111 | 	box-sizing: border-box;
112 | 	padding: 20px;
113 | 	width: 100%;
114 | 	max-width: 350px;
115 | 	max-height: fit-content;
116 | 	background-color: #4e4e50;
117 | 	box-shadow: 0px 0px 10px 1px rgba(27, 27, 27, 0.781);
118 | 	display: flex;
119 | 	flex-direction: column;
120 | 	justify-content: space-evenly;
121 | 	align-items: flex-start;
122 | 	flex-wrap: nowrap;
123 | 	gap: 30px;
124 | }
125 | #cwrap {
126 | 	display: flex;
127 | 	flex-direction: row;
128 | 	flex-wrap: nowrap;
129 | 	gap: 10px;
130 | 	margin-left: 10%;
131 | }
132 | #player #identity {
133 | 	width: 100%;
134 | 	display: flex;
135 | 	flex-direction: column;
136 | 	align-items: flex-start;
137 | 	position: relative;
138 | 	margin-top: 10px;
139 | }
140 | #identity::before {
141 | 	top: -24px;
142 | 	font-weight: bold;
143 | 	color: crimson;
144 | 	content: "currently playing ";
145 | 	position: absolute;
146 | }
147 | #player #identity #name span a,
148 | #history a {
149 | 	text-decoration: none;
150 | 	color: inherit;
151 | }
152 | #player #identity #name span a:hover,
153 | #history a:hover {
154 | 	text-decoration: underline;
155 | 	color: #950740;
156 | }
157 | #player #identity #name span:nth-child(1) a {
158 | 	font-weight: bolder;
159 | }
160 | 
161 | #player #identity #name {
162 | 	display: flex;
163 | 	flex-direction: column;
164 | 	flex-wrap: nowrap;
165 | 	justify-content: space-evenly;
166 | 	align-items: flex-start;
167 | 	font-family: sans-serif;
168 | 	color: whitesmoke;
169 | 	font-size: 18px;
170 | }
171 | #player #history {
172 | 	display: flex;
173 | 	flex-direction: column;
174 | 	flex-wrap: wrap;
175 | 	gap: 5px;
176 | 	position: relative;
177 | 	width: 100%;
178 | 	margin-top: 10px;
179 | }
180 | #player #history::before {
181 | 	top: -24px;
182 | 	display: block;
183 | 	font-weight: bold;
184 | 	color: crimson;
185 | 	content: "history";
186 | 	position: absolute;
187 | }
188 | 
189 | #logo {
190 | 	display: flex;
191 | 	flex-direction: row;
192 | 	justify-content: center;
193 | 	align-items: flex-start;
194 | 	font-size: 10px;
195 | }
196 | #spotify_logo {
197 | 	width: 71px;
198 | 	margin: 12.5px;
199 | 	z-index: 10;
200 | }
201 | 
202 | #after {
203 | 	font-weight: bold;
204 | 	top: 90px;
205 | 	color: #c3073f;
206 | 	align-self: flex-end;
207 | 	margin-right: 10px;
208 | 	margin-bottom: 10px;
209 | }
210 | #player #history > div {
211 | 	position: relative;
212 | 	justify-content: center;
213 | 	align-items: flex-start;
214 | 	flex-direction: column;
215 | 	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
216 | 		rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
217 | 		rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
218 | }
219 | #clicker span a:nth-child(1) {
220 | 	font-weight: bold;
221 | }
222 | #player #history > div,
223 | #identity {
224 | 	cursor: pointer;
225 | 	display: flex;
226 | 	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
227 | 		rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
228 | 		rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
229 | 	background-color: #434343;
230 | 	padding: 3px;
231 | }
232 | #identity {
233 | 	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
234 | 		rgba(0, 0, 0, 0.23) 0px 6px 6px;
235 | }
236 | 
237 | #introduction {
238 | 	text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1),
239 | 		0px 18px 23px rgba(0, 0, 0, 0.1);
240 | 	width: fit-content;
241 | 	box-sizing: border-box;
242 | 	padding: 20px;
243 | 	flex-grow: 0.5;
244 | 	font-size: 1.5em;
245 | 	background-color: #4e4e50;
246 | 	box-shadow: 0px 0px 10px 1px rgba(27, 27, 27, 0.781);
247 | 	display: flex;
248 | 	flex-direction: row;
249 | 	flex-wrap: nowrap;
250 | 	justify-content: space-evenly;
251 | 	align-items: center;
252 | 	column-gap: 1cm;
253 | }
254 | #introduction #para {
255 | 	flex-grow: 1;
256 | 	text-align: center;
257 | 	display: flex;
258 | 	flex-direction: column;
259 | 	align-items: center;
260 | 	flex-wrap: nowrap;
261 | }
262 | #para p {
263 | 	margin: 0;
264 | }
265 | #para h1 {
266 | 	margin: none;
267 | }
268 | #para img {
269 | 	max-width: 250px;
270 | 	flex-grow: 1;
271 | }
272 | 
273 | #searchnow {
274 | 	cursor: pointer;
275 | 	border: none;
276 | 	font-size: 1em;
277 | 	margin-top: 25px;
278 | 	font-weight: bold;
279 | 	background-color: #c3073f;
280 | 	text-shadow: none;
281 | 	color: rgb(218, 218, 218);
282 | 	padding: 10px 20px;
283 | 	box-shadow: 0px 0px 10px 1px rgba(27, 27, 27, 0.781);
284 | 	text-decoration: none;
285 | }
286 | #introduction #images {
287 | 	position: relative;
288 | 	height: 300px;
289 | 	min-width: 170px;
290 | 	flex-grow: 1;
291 | 	box-sizing: border-box;
292 | 	display: flex;
293 | 	flex-direction: column;
294 | 	justify-content: center;
295 | 	align-items: center;
296 | }
297 | #introduction #images img {
298 | 	position: absolute;
299 | 	height: 300px;
300 | 	box-sizing: border-box;
301 | }
302 | #introduction #images img:nth-child(1) {
303 | 	transform-origin: 50% 50%;
304 | 	transform: rotate(-10deg) scale(0.6);
305 | 	z-index: 0;
306 | 	top: -50px;
307 | }
308 | #introduction #images img:nth-child(2) {
309 | 	transform-origin: 50% 50%;
310 | 	transform: rotate(10deg) scale(0.7);
311 | 	z-index: 0;
312 | 	top: 20px;
313 | }
314 | #introduction #images img:nth-child(3) {
315 | 	transform-origin: 0% 0%;
316 | 	transform: rotate(-10deg) scale(0.75);
317 | 	top: 140px;
318 | }
319 | 
320 | #login {
321 | 	cursor: pointer;
322 | 	padding: 5px;
323 | 	border: none;
324 | 	font-size: larger;
325 | 	background-color: #c3073f;
326 | 	align-self: flex-start;
327 | 	display: none;
328 | }
329 | #player {
330 | 	position: relative;
331 | }
332 | #player #login {
333 | 	position: absolute;
334 | 	top: 20%;
335 | 	right: 40%;
336 | }
337 | #player #login::before {
338 | 	position: absolute;
339 | 	content: "to display the player";
340 | 	color: white;
341 | 	font-size: medium;
342 | 	text-overflow: clip;
343 | 	width: 150px;
344 | 	left: -50px;
345 | 	top: 50px;
346 | }
347 | footer {
348 | 	display: flex;
349 | 	flex-direction: column;
350 | 	flex-wrap: wrap;
351 | 	align-items: center;
352 | 	justify-content: space-evenly;
353 | 	gap: 20px;
354 | 	width: fit-content;
355 | 	max-width: 700px;
356 | 	box-sizing: border-box;
357 | 	padding: 17px;
358 | 	margin-bottom: 10px;
359 | 	background-color: none;
360 | 	font-family: sans-serif;
361 | 	text-align: center;
362 | 	align-self: flex-end;
363 | }
364 | footer p {
365 | 	margin: unset;
366 | }
367 | 
368 | a:hover {
369 | 	color: crimson;
370 | }
371 | @media only screen and (max-width: 1100px) {
372 | 	html {
373 | 		overflow: auto;
374 | 	}
375 | 	#introduction {
376 | 		flex-direction: column;
377 | 		justify-content: center;
378 | 		align-items: center;
379 | 		min-width: fit-content;
380 | 		width: 88%;
381 | 	}
382 | 	#wrapper {
383 | 		width: 90%;
384 | 		justify-content: center;
385 | 		align-items: center;
386 | 		flex-direction: column;
387 | 		min-width: fit-content;
388 | 	}
389 | 	#player {
390 | 		justify-self: flex-start;
391 | 		align-self: flex-start;
392 | 	}
393 | }
394 | @media only screen and (max-width: 625px) {
395 | 	#nav #pages {
396 | 		flex-direction: column;
397 | 		width: fit-content;
398 | 		align-items: flex-start;
399 | 		justify-self: flex-start;
400 | 	}
401 | 	#introduction {
402 | 		width: 100%;
403 | 	}
404 | }
405 | @media only screen and (max-width: 925px) {
406 | 	#nav {
407 | 		height: fit-content;
408 | 		justify-content: space-around;
409 | 		align-items: center;
410 | 		max-width: unset;
411 | 		width: 90%;
412 | 	}
413 | 	#nav #pages {
414 | 		row-gap: 10px;
415 | 		justify-self: flex-end;
416 | 	}
417 | }
418 | @media only screen and (max-width: 500px) {
419 | 	#nav {
420 | 		flex-direction: column;
421 | 	}
422 | }
423 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                     GNU GENERAL PUBLIC LICENSE
  2 |                        Version 3, 29 June 2007
  3 | 
  4 |  Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
  5 |  Everyone is permitted to copy and distribute verbatim copies
  6 |  of this license document, but changing it is not allowed.
  7 | 
  8 |                             Preamble
  9 | 
 10 |   The GNU General Public License is a free, copyleft license for
 11 | software and other kinds of works.
 12 | 
 13 |   The licenses for most software and other practical works are designed
 14 | to take away your freedom to share and change the works.  By contrast,
 15 | the GNU General Public License is intended to guarantee your freedom to
 16 | share and change all versions of a program--to make sure it remains free
 17 | software for all its users.  We, the Free Software Foundation, use the
 18 | GNU General Public License for most of our software; it applies also to
 19 | any other work released this way by its authors.  You can apply it to
 20 | your programs, too.
 21 | 
 22 |   When we speak of free software, we are referring to freedom, not
 23 | price.  Our General Public Licenses are designed to make sure that you
 24 | have the freedom to distribute copies of free software (and charge for
 25 | them if you wish), that you receive source code or can get it if you
 26 | want it, that you can change the software or use pieces of it in new
 27 | free programs, and that you know you can do these things.
 28 | 
 29 |   To protect your rights, we need to prevent others from denying you
 30 | these rights or asking you to surrender the rights.  Therefore, you have
 31 | certain responsibilities if you distribute copies of the software, or if
 32 | you modify it: responsibilities to respect the freedom of others.
 33 | 
 34 |   For example, if you distribute copies of such a program, whether
 35 | gratis or for a fee, you must pass on to the recipients the same
 36 | freedoms that you received.  You must make sure that they, too, receive
 37 | or can get the source code.  And you must show them these terms so they
 38 | know their rights.
 39 | 
 40 |   Developers that use the GNU GPL protect your rights with two steps:
 41 | (1) assert copyright on the software, and (2) offer you this License
 42 | giving you legal permission to copy, distribute and/or modify it.
 43 | 
 44 |   For the developers' and authors' protection, the GPL clearly explains
 45 | that there is no warranty for this free software.  For both users' and
 46 | authors' sake, the GPL requires that modified versions be marked as
 47 | changed, so that their problems will not be attributed erroneously to
 48 | authors of previous versions.
 49 | 
 50 |   Some devices are designed to deny users access to install or run
 51 | modified versions of the software inside them, although the manufacturer
 52 | can do so.  This is fundamentally incompatible with the aim of
 53 | protecting users' freedom to change the software.  The systematic
 54 | pattern of such abuse occurs in the area of products for individuals to
 55 | use, which is precisely where it is most unacceptable.  Therefore, we
 56 | have designed this version of the GPL to prohibit the practice for those
 57 | products.  If such problems arise substantially in other domains, we
 58 | stand ready to extend this provision to those domains in future versions
 59 | of the GPL, as needed to protect the freedom of users.
 60 | 
 61 |   Finally, every program is threatened constantly by software patents.
 62 | States should not allow patents to restrict development and use of
 63 | software on general-purpose computers, but in those that do, we wish to
 64 | avoid the special danger that patents applied to a free program could
 65 | make it effectively proprietary.  To prevent this, the GPL assures that
 66 | patents cannot be used to render the program non-free.
 67 | 
 68 |   The precise terms and conditions for copying, distribution and
 69 | modification follow.
 70 | 
 71 |                        TERMS AND CONDITIONS
 72 | 
 73 |   0. Definitions.
 74 | 
 75 |   "This License" refers to version 3 of the GNU General Public License.
 76 | 
 77 |   "Copyright" also means copyright-like laws that apply to other kinds of
 78 | works, such as semiconductor masks.
 79 | 
 80 |   "The Program" refers to any copyrightable work licensed under this
 81 | License.  Each licensee is addressed as "you".  "Licensees" and
 82 | "recipients" may be individuals or organizations.
 83 | 
 84 |   To "modify" a work means to copy from or adapt all or part of the work
 85 | in a fashion requiring copyright permission, other than the making of an
 86 | exact copy.  The resulting work is called a "modified version" of the
 87 | earlier work or a work "based on" the earlier work.
 88 | 
 89 |   A "covered work" means either the unmodified Program or a work based
 90 | on the Program.
 91 | 
 92 |   To "propagate" a work means to do anything with it that, without
 93 | permission, would make you directly or secondarily liable for
 94 | infringement under applicable copyright law, except executing it on a
 95 | computer or modifying a private copy.  Propagation includes copying,
 96 | distribution (with or without modification), making available to the
 97 | public, and in some countries other activities as well.
 98 | 
 99 |   To "convey" a work means any kind of propagation that enables other
100 | parties to make or receive copies.  Mere interaction with a user through
101 | a computer network, with no transfer of a copy, is not conveying.
102 | 
103 |   An interactive user interface displays "Appropriate Legal Notices"
104 | to the extent that it includes a convenient and prominently visible
105 | feature that (1) displays an appropriate copyright notice, and (2)
106 | tells the user that there is no warranty for the work (except to the
107 | extent that warranties are provided), that licensees may convey the
108 | work under this License, and how to view a copy of this License.  If
109 | the interface presents a list of user commands or options, such as a
110 | menu, a prominent item in the list meets this criterion.
111 | 
112 |   1. Source Code.
113 | 
114 |   The "source code" for a work means the preferred form of the work
115 | for making modifications to it.  "Object code" means any non-source
116 | form of a work.
117 | 
118 |   A "Standard Interface" means an interface that either is an official
119 | standard defined by a recognized standards body, or, in the case of
120 | interfaces specified for a particular programming language, one that
121 | is widely used among developers working in that language.
122 | 
123 |   The "System Libraries" of an executable work include anything, other
124 | than the work as a whole, that (a) is included in the normal form of
125 | packaging a Major Component, but which is not part of that Major
126 | Component, and (b) serves only to enable use of the work with that
127 | Major Component, or to implement a Standard Interface for which an
128 | implementation is available to the public in source code form.  A
129 | "Major Component", in this context, means a major essential component
130 | (kernel, window system, and so on) of the specific operating system
131 | (if any) on which the executable work runs, or a compiler used to
132 | produce the work, or an object code interpreter used to run it.
133 | 
134 |   The "Corresponding Source" for a work in object code form means all
135 | the source code needed to generate, install, and (for an executable
136 | work) run the object code and to modify the work, including scripts to
137 | control those activities.  However, it does not include the work's
138 | System Libraries, or general-purpose tools or generally available free
139 | programs which are used unmodified in performing those activities but
140 | which are not part of the work.  For example, Corresponding Source
141 | includes interface definition files associated with source files for
142 | the work, and the source code for shared libraries and dynamically
143 | linked subprograms that the work is specifically designed to require,
144 | such as by intimate data communication or control flow between those
145 | subprograms and other parts of the work.
146 | 
147 |   The Corresponding Source need not include anything that users
148 | can regenerate automatically from other parts of the Corresponding
149 | Source.
150 | 
151 |   The Corresponding Source for a work in source code form is that
152 | same work.
153 | 
154 |   2. Basic Permissions.
155 | 
156 |   All rights granted under this License are granted for the term of
157 | copyright on the Program, and are irrevocable provided the stated
158 | conditions are met.  This License explicitly affirms your unlimited
159 | permission to run the unmodified Program.  The output from running a
160 | covered work is covered by this License only if the output, given its
161 | content, constitutes a covered work.  This License acknowledges your
162 | rights of fair use or other equivalent, as provided by copyright law.
163 | 
164 |   You may make, run and propagate covered works that you do not
165 | convey, without conditions so long as your license otherwise remains
166 | in force.  You may convey covered works to others for the sole purpose
167 | of having them make modifications exclusively for you, or provide you
168 | with facilities for running those works, provided that you comply with
169 | the terms of this License in conveying all material for which you do
170 | not control copyright.  Those thus making or running the covered works
171 | for you must do so exclusively on your behalf, under your direction
172 | and control, on terms that prohibit them from making any copies of
173 | your copyrighted material outside their relationship with you.
174 | 
175 |   Conveying under any other circumstances is permitted solely under
176 | the conditions stated below.  Sublicensing is not allowed; section 10
177 | makes it unnecessary.
178 | 
179 |   3. Protecting Users' Legal Rights From Anti-Circumvention Law.
180 | 
181 |   No covered work shall be deemed part of an effective technological
182 | measure under any applicable law fulfilling obligations under article
183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or
184 | similar laws prohibiting or restricting circumvention of such
185 | measures.
186 | 
187 |   When you convey a covered work, you waive any legal power to forbid
188 | circumvention of technological measures to the extent such circumvention
189 | is effected by exercising rights under this License with respect to
190 | the covered work, and you disclaim any intention to limit operation or
191 | modification of the work as a means of enforcing, against the work's
192 | users, your or third parties' legal rights to forbid circumvention of
193 | technological measures.
194 | 
195 |   4. Conveying Verbatim Copies.
196 | 
197 |   You may convey verbatim copies of the Program's source code as you
198 | receive it, in any medium, provided that you conspicuously and
199 | appropriately publish on each copy an appropriate copyright notice;
200 | keep intact all notices stating that this License and any
201 | non-permissive terms added in accord with section 7 apply to the code;
202 | keep intact all notices of the absence of any warranty; and give all
203 | recipients a copy of this License along with the Program.
204 | 
205 |   You may charge any price or no price for each copy that you convey,
206 | and you may offer support or warranty protection for a fee.
207 | 
208 |   5. Conveying Modified Source Versions.
209 | 
210 |   You may convey a work based on the Program, or the modifications to
211 | produce it from the Program, in the form of source code under the
212 | terms of section 4, provided that you also meet all of these conditions:
213 | 
214 |     a) The work must carry prominent notices stating that you modified
215 |     it, and giving a relevant date.
216 | 
217 |     b) The work must carry prominent notices stating that it is
218 |     released under this License and any conditions added under section
219 |     7.  This requirement modifies the requirement in section 4 to
220 |     "keep intact all notices".
221 | 
222 |     c) You must license the entire work, as a whole, under this
223 |     License to anyone who comes into possession of a copy.  This
224 |     License will therefore apply, along with any applicable section 7
225 |     additional terms, to the whole of the work, and all its parts,
226 |     regardless of how they are packaged.  This License gives no
227 |     permission to license the work in any other way, but it does not
228 |     invalidate such permission if you have separately received it.
229 | 
230 |     d) If the work has interactive user interfaces, each must display
231 |     Appropriate Legal Notices; however, if the Program has interactive
232 |     interfaces that do not display Appropriate Legal Notices, your
233 |     work need not make them do so.
234 | 
235 |   A compilation of a covered work with other separate and independent
236 | works, which are not by their nature extensions of the covered work,
237 | and which are not combined with it such as to form a larger program,
238 | in or on a volume of a storage or distribution medium, is called an
239 | "aggregate" if the compilation and its resulting copyright are not
240 | used to limit the access or legal rights of the compilation's users
241 | beyond what the individual works permit.  Inclusion of a covered work
242 | in an aggregate does not cause this License to apply to the other
243 | parts of the aggregate.
244 | 
245 |   6. Conveying Non-Source Forms.
246 | 
247 |   You may convey a covered work in object code form under the terms
248 | of sections 4 and 5, provided that you also convey the
249 | machine-readable Corresponding Source under the terms of this License,
250 | in one of these ways:
251 | 
252 |     a) Convey the object code in, or embodied in, a physical product
253 |     (including a physical distribution medium), accompanied by the
254 |     Corresponding Source fixed on a durable physical medium
255 |     customarily used for software interchange.
256 | 
257 |     b) Convey the object code in, or embodied in, a physical product
258 |     (including a physical distribution medium), accompanied by a
259 |     written offer, valid for at least three years and valid for as
260 |     long as you offer spare parts or customer support for that product
261 |     model, to give anyone who possesses the object code either (1) a
262 |     copy of the Corresponding Source for all the software in the
263 |     product that is covered by this License, on a durable physical
264 |     medium customarily used for software interchange, for a price no
265 |     more than your reasonable cost of physically performing this
266 |     conveying of source, or (2) access to copy the
267 |     Corresponding Source from a network server at no charge.
268 | 
269 |     c) Convey individual copies of the object code with a copy of the
270 |     written offer to provide the Corresponding Source.  This
271 |     alternative is allowed only occasionally and noncommercially, and
272 |     only if you received the object code with such an offer, in accord
273 |     with subsection 6b.
274 | 
275 |     d) Convey the object code by offering access from a designated
276 |     place (gratis or for a charge), and offer equivalent access to the
277 |     Corresponding Source in the same way through the same place at no
278 |     further charge.  You need not require recipients to copy the
279 |     Corresponding Source along with the object code.  If the place to
280 |     copy the object code is a network server, the Corresponding Source
281 |     may be on a different server (operated by you or a third party)
282 |     that supports equivalent copying facilities, provided you maintain
283 |     clear directions next to the object code saying where to find the
284 |     Corresponding Source.  Regardless of what server hosts the
285 |     Corresponding Source, you remain obligated to ensure that it is
286 |     available for as long as needed to satisfy these requirements.
287 | 
288 |     e) Convey the object code using peer-to-peer transmission, provided
289 |     you inform other peers where the object code and Corresponding
290 |     Source of the work are being offered to the general public at no
291 |     charge under subsection 6d.
292 | 
293 |   A separable portion of the object code, whose source code is excluded
294 | from the Corresponding Source as a System Library, need not be
295 | included in conveying the object code work.
296 | 
297 |   A "User Product" is either (1) a "consumer product", which means any
298 | tangible personal property which is normally used for personal, family,
299 | or household purposes, or (2) anything designed or sold for incorporation
300 | into a dwelling.  In determining whether a product is a consumer product,
301 | doubtful cases shall be resolved in favor of coverage.  For a particular
302 | product received by a particular user, "normally used" refers to a
303 | typical or common use of that class of product, regardless of the status
304 | of the particular user or of the way in which the particular user
305 | actually uses, or expects or is expected to use, the product.  A product
306 | is a consumer product regardless of whether the product has substantial
307 | commercial, industrial or non-consumer uses, unless such uses represent
308 | the only significant mode of use of the product.
309 | 
310 |   "Installation Information" for a User Product means any methods,
311 | procedures, authorization keys, or other information required to install
312 | and execute modified versions of a covered work in that User Product from
313 | a modified version of its Corresponding Source.  The information must
314 | suffice to ensure that the continued functioning of the modified object
315 | code is in no case prevented or interfered with solely because
316 | modification has been made.
317 | 
318 |   If you convey an object code work under this section in, or with, or
319 | specifically for use in, a User Product, and the conveying occurs as
320 | part of a transaction in which the right of possession and use of the
321 | User Product is transferred to the recipient in perpetuity or for a
322 | fixed term (regardless of how the transaction is characterized), the
323 | Corresponding Source conveyed under this section must be accompanied
324 | by the Installation Information.  But this requirement does not apply
325 | if neither you nor any third party retains the ability to install
326 | modified object code on the User Product (for example, the work has
327 | been installed in ROM).
328 | 
329 |   The requirement to provide Installation Information does not include a
330 | requirement to continue to provide support service, warranty, or updates
331 | for a work that has been modified or installed by the recipient, or for
332 | the User Product in which it has been modified or installed.  Access to a
333 | network may be denied when the modification itself materially and
334 | adversely affects the operation of the network or violates the rules and
335 | protocols for communication across the network.
336 | 
337 |   Corresponding Source conveyed, and Installation Information provided,
338 | in accord with this section must be in a format that is publicly
339 | documented (and with an implementation available to the public in
340 | source code form), and must require no special password or key for
341 | unpacking, reading or copying.
342 | 
343 |   7. Additional Terms.
344 | 
345 |   "Additional permissions" are terms that supplement the terms of this
346 | License by making exceptions from one or more of its conditions.
347 | Additional permissions that are applicable to the entire Program shall
348 | be treated as though they were included in this License, to the extent
349 | that they are valid under applicable law.  If additional permissions
350 | apply only to part of the Program, that part may be used separately
351 | under those permissions, but the entire Program remains governed by
352 | this License without regard to the additional permissions.
353 | 
354 |   When you convey a copy of a covered work, you may at your option
355 | remove any additional permissions from that copy, or from any part of
356 | it.  (Additional permissions may be written to require their own
357 | removal in certain cases when you modify the work.)  You may place
358 | additional permissions on material, added by you to a covered work,
359 | for which you have or can give appropriate copyright permission.
360 | 
361 |   Notwithstanding any other provision of this License, for material you
362 | add to a covered work, you may (if authorized by the copyright holders of
363 | that material) supplement the terms of this License with terms:
364 | 
365 |     a) Disclaiming warranty or limiting liability differently from the
366 |     terms of sections 15 and 16 of this License; or
367 | 
368 |     b) Requiring preservation of specified reasonable legal notices or
369 |     author attributions in that material or in the Appropriate Legal
370 |     Notices displayed by works containing it; or
371 | 
372 |     c) Prohibiting misrepresentation of the origin of that material, or
373 |     requiring that modified versions of such material be marked in
374 |     reasonable ways as different from the original version; or
375 | 
376 |     d) Limiting the use for publicity purposes of names of licensors or
377 |     authors of the material; or
378 | 
379 |     e) Declining to grant rights under trademark law for use of some
380 |     trade names, trademarks, or service marks; or
381 | 
382 |     f) Requiring indemnification of licensors and authors of that
383 |     material by anyone who conveys the material (or modified versions of
384 |     it) with contractual assumptions of liability to the recipient, for
385 |     any liability that these contractual assumptions directly impose on
386 |     those licensors and authors.
387 | 
388 |   All other non-permissive additional terms are considered "further
389 | restrictions" within the meaning of section 10.  If the Program as you
390 | received it, or any part of it, contains a notice stating that it is
391 | governed by this License along with a term that is a further
392 | restriction, you may remove that term.  If a license document contains
393 | a further restriction but permits relicensing or conveying under this
394 | License, you may add to a covered work material governed by the terms
395 | of that license document, provided that the further restriction does
396 | not survive such relicensing or conveying.
397 | 
398 |   If you add terms to a covered work in accord with this section, you
399 | must place, in the relevant source files, a statement of the
400 | additional terms that apply to those files, or a notice indicating
401 | where to find the applicable terms.
402 | 
403 |   Additional terms, permissive or non-permissive, may be stated in the
404 | form of a separately written license, or stated as exceptions;
405 | the above requirements apply either way.
406 | 
407 |   8. Termination.
408 | 
409 |   You may not propagate or modify a covered work except as expressly
410 | provided under this License.  Any attempt otherwise to propagate or
411 | modify it is void, and will automatically terminate your rights under
412 | this License (including any patent licenses granted under the third
413 | paragraph of section 11).
414 | 
415 |   However, if you cease all violation of this License, then your
416 | license from a particular copyright holder is reinstated (a)
417 | provisionally, unless and until the copyright holder explicitly and
418 | finally terminates your license, and (b) permanently, if the copyright
419 | holder fails to notify you of the violation by some reasonable means
420 | prior to 60 days after the cessation.
421 | 
422 |   Moreover, your license from a particular copyright holder is
423 | reinstated permanently if the copyright holder notifies you of the
424 | violation by some reasonable means, this is the first time you have
425 | received notice of violation of this License (for any work) from that
426 | copyright holder, and you cure the violation prior to 30 days after
427 | your receipt of the notice.
428 | 
429 |   Termination of your rights under this section does not terminate the
430 | licenses of parties who have received copies or rights from you under
431 | this License.  If your rights have been terminated and not permanently
432 | reinstated, you do not qualify to receive new licenses for the same
433 | material under section 10.
434 | 
435 |   9. Acceptance Not Required for Having Copies.
436 | 
437 |   You are not required to accept this License in order to receive or
438 | run a copy of the Program.  Ancillary propagation of a covered work
439 | occurring solely as a consequence of using peer-to-peer transmission
440 | to receive a copy likewise does not require acceptance.  However,
441 | nothing other than this License grants you permission to propagate or
442 | modify any covered work.  These actions infringe copyright if you do
443 | not accept this License.  Therefore, by modifying or propagating a
444 | covered work, you indicate your acceptance of this License to do so.
445 | 
446 |   10. Automatic Licensing of Downstream Recipients.
447 | 
448 |   Each time you convey a covered work, the recipient automatically
449 | receives a license from the original licensors, to run, modify and
450 | propagate that work, subject to this License.  You are not responsible
451 | for enforcing compliance by third parties with this License.
452 | 
453 |   An "entity transaction" is a transaction transferring control of an
454 | organization, or substantially all assets of one, or subdividing an
455 | organization, or merging organizations.  If propagation of a covered
456 | work results from an entity transaction, each party to that
457 | transaction who receives a copy of the work also receives whatever
458 | licenses to the work the party's predecessor in interest had or could
459 | give under the previous paragraph, plus a right to possession of the
460 | Corresponding Source of the work from the predecessor in interest, if
461 | the predecessor has it or can get it with reasonable efforts.
462 | 
463 |   You may not impose any further restrictions on the exercise of the
464 | rights granted or affirmed under this License.  For example, you may
465 | not impose a license fee, royalty, or other charge for exercise of
466 | rights granted under this License, and you may not initiate litigation
467 | (including a cross-claim or counterclaim in a lawsuit) alleging that
468 | any patent claim is infringed by making, using, selling, offering for
469 | sale, or importing the Program or any portion of it.
470 | 
471 |   11. Patents.
472 | 
473 |   A "contributor" is a copyright holder who authorizes use under this
474 | License of the Program or a work on which the Program is based.  The
475 | work thus licensed is called the contributor's "contributor version".
476 | 
477 |   A contributor's "essential patent claims" are all patent claims
478 | owned or controlled by the contributor, whether already acquired or
479 | hereafter acquired, that would be infringed by some manner, permitted
480 | by this License, of making, using, or selling its contributor version,
481 | but do not include claims that would be infringed only as a
482 | consequence of further modification of the contributor version.  For
483 | purposes of this definition, "control" includes the right to grant
484 | patent sublicenses in a manner consistent with the requirements of
485 | this License.
486 | 
487 |   Each contributor grants you a non-exclusive, worldwide, royalty-free
488 | patent license under the contributor's essential patent claims, to
489 | make, use, sell, offer for sale, import and otherwise run, modify and
490 | propagate the contents of its contributor version.
491 | 
492 |   In the following three paragraphs, a "patent license" is any express
493 | agreement or commitment, however denominated, not to enforce a patent
494 | (such as an express permission to practice a patent or covenant not to
495 | sue for patent infringement).  To "grant" such a patent license to a
496 | party means to make such an agreement or commitment not to enforce a
497 | patent against the party.
498 | 
499 |   If you convey a covered work, knowingly relying on a patent license,
500 | and the Corresponding Source of the work is not available for anyone
501 | to copy, free of charge and under the terms of this License, through a
502 | publicly available network server or other readily accessible means,
503 | then you must either (1) cause the Corresponding Source to be so
504 | available, or (2) arrange to deprive yourself of the benefit of the
505 | patent license for this particular work, or (3) arrange, in a manner
506 | consistent with the requirements of this License, to extend the patent
507 | license to downstream recipients.  "Knowingly relying" means you have
508 | actual knowledge that, but for the patent license, your conveying the
509 | covered work in a country, or your recipient's use of the covered work
510 | in a country, would infringe one or more identifiable patents in that
511 | country that you have reason to believe are valid.
512 | 
513 |   If, pursuant to or in connection with a single transaction or
514 | arrangement, you convey, or propagate by procuring conveyance of, a
515 | covered work, and grant a patent license to some of the parties
516 | receiving the covered work authorizing them to use, propagate, modify
517 | or convey a specific copy of the covered work, then the patent license
518 | you grant is automatically extended to all recipients of the covered
519 | work and works based on it.
520 | 
521 |   A patent license is "discriminatory" if it does not include within
522 | the scope of its coverage, prohibits the exercise of, or is
523 | conditioned on the non-exercise of one or more of the rights that are
524 | specifically granted under this License.  You may not convey a covered
525 | work if you are a party to an arrangement with a third party that is
526 | in the business of distributing software, under which you make payment
527 | to the third party based on the extent of your activity of conveying
528 | the work, and under which the third party grants, to any of the
529 | parties who would receive the covered work from you, a discriminatory
530 | patent license (a) in connection with copies of the covered work
531 | conveyed by you (or copies made from those copies), or (b) primarily
532 | for and in connection with specific products or compilations that
533 | contain the covered work, unless you entered into that arrangement,
534 | or that patent license was granted, prior to 28 March 2007.
535 | 
536 |   Nothing in this License shall be construed as excluding or limiting
537 | any implied license or other defenses to infringement that may
538 | otherwise be available to you under applicable patent law.
539 | 
540 |   12. No Surrender of Others' Freedom.
541 | 
542 |   If conditions are imposed on you (whether by court order, agreement or
543 | otherwise) that contradict the conditions of this License, they do not
544 | excuse you from the conditions of this License.  If you cannot convey a
545 | covered work so as to satisfy simultaneously your obligations under this
546 | License and any other pertinent obligations, then as a consequence you may
547 | not convey it at all.  For example, if you agree to terms that obligate you
548 | to collect a royalty for further conveying from those to whom you convey
549 | the Program, the only way you could satisfy both those terms and this
550 | License would be to refrain entirely from conveying the Program.
551 | 
552 |   13. Use with the GNU Affero General Public License.
553 | 
554 |   Notwithstanding any other provision of this License, you have
555 | permission to link or combine any covered work with a work licensed
556 | under version 3 of the GNU Affero General Public License into a single
557 | combined work, and to convey the resulting work.  The terms of this
558 | License will continue to apply to the part which is the covered work,
559 | but the special requirements of the GNU Affero General Public License,
560 | section 13, concerning interaction through a network will apply to the
561 | combination as such.
562 | 
563 |   14. Revised Versions of this License.
564 | 
565 |   The Free Software Foundation may publish revised and/or new versions of
566 | the GNU General Public License from time to time.  Such new versions will
567 | be similar in spirit to the present version, but may differ in detail to
568 | address new problems or concerns.
569 | 
570 |   Each version is given a distinguishing version number.  If the
571 | Program specifies that a certain numbered version of the GNU General
572 | Public License "or any later version" applies to it, you have the
573 | option of following the terms and conditions either of that numbered
574 | version or of any later version published by the Free Software
575 | Foundation.  If the Program does not specify a version number of the
576 | GNU General Public License, you may choose any version ever published
577 | by the Free Software Foundation.
578 | 
579 |   If the Program specifies that a proxy can decide which future
580 | versions of the GNU General Public License can be used, that proxy's
581 | public statement of acceptance of a version permanently authorizes you
582 | to choose that version for the Program.
583 | 
584 |   Later license versions may give you additional or different
585 | permissions.  However, no additional obligations are imposed on any
586 | author or copyright holder as a result of your choosing to follow a
587 | later version.
588 | 
589 |   15. Disclaimer of Warranty.
590 | 
591 |   THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
592 | APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
596 | PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
597 | IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
599 | 
600 |   16. Limitation of Liability.
601 | 
602 |   IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
610 | SUCH DAMAGES.
611 | 
612 |   17. Interpretation of Sections 15 and 16.
613 | 
614 |   If the disclaimer of warranty and limitation of liability provided
615 | above cannot be given local legal effect according to their terms,
616 | reviewing courts shall apply local law that most closely approximates
617 | an absolute waiver of all civil liability in connection with the
618 | Program, unless a warranty or assumption of liability accompanies a
619 | copy of the Program in return for a fee.
620 | 
621 |                      END OF TERMS AND CONDITIONS
622 | 
623 |             How to Apply These Terms to Your New Programs
624 | 
625 |   If you develop a new program, and you want it to be of the greatest
626 | possible use to the public, the best way to achieve this is to make it
627 | free software which everyone can redistribute and change under these terms.
628 | 
629 |   To do so, attach the following notices to the program.  It is safest
630 | to attach them to the start of each source file to most effectively
631 | state the exclusion of warranty; and each file should have at least
632 | the "copyright" line and a pointer to where the full notice is found.
633 | 
634 |     <one line to give the program's name and a brief idea of what it does.>
635 |     Copyright (C) <year>  <name of author>
636 | 
637 |     This program is free software: you can redistribute it and/or modify
638 |     it under the terms of the GNU General Public License as published by
639 |     the Free Software Foundation, either version 3 of the License, or
640 |     (at your option) any later version.
641 | 
642 |     This program is distributed in the hope that it will be useful,
643 |     but WITHOUT ANY WARRANTY; without even the implied warranty of
644 |     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
645 |     GNU General Public License for more details.
646 | 
647 |     You should have received a copy of the GNU General Public License
648 |     along with this program.  If not, see <https://www.gnu.org/licenses/>.
649 | 
650 | Also add information on how to contact you by electronic and paper mail.
651 | 
652 |   If the program does terminal interaction, make it output a short
653 | notice like this when it starts in an interactive mode:
654 | 
655 |     <program>  Copyright (C) <year>  <name of author>
656 |     This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
657 |     This is free software, and you are welcome to redistribute it
658 |     under certain conditions; type `show c' for details.
659 | 
660 | The hypothetical commands `show w' and `show c' should show the appropriate
661 | parts of the General Public License.  Of course, your program's commands
662 | might be different; for a GUI interface, you would use an "about box".
663 | 
664 |   You should also get your employer (if you work as a programmer) or school,
665 | if any, to sign a "copyright disclaimer" for the program, if necessary.
666 | For more information on this, and how to apply and follow the GNU GPL, see
667 | <https://www.gnu.org/licenses/>.
668 | 
669 |   The GNU General Public License does not permit incorporating your program
670 | into proprietary programs.  If your program is a subroutine library, you
671 | may consider it more useful to permit linking proprietary applications with
672 | the library.  If this is what you want to do, use the GNU Lesser General
673 | Public License instead of this License.  But first, please read
674 | <https://www.gnu.org/licenses/why-not-lgpl.html>.
675 | 


--------------------------------------------------------------------------------