add cache and rename some files
@@ -0,0 +1 @@
|
||||
{"type": "module"}
|
||||
|
After Width: | Height: | Size: 606 B |
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Installation | Essentials for Spotify</title>
|
||||
<link rel="shortcut icon" href="favicon.png" />
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="form-container">
|
||||
<h2>
|
||||
Essentials for Spotify
|
||||
|
||||
<br />
|
||||
|
||||
<small>
|
||||
<small>Installation</small>
|
||||
</small>
|
||||
|
||||
<img alt="Essentials for Spotify" src="logo.png" />
|
||||
</h2>
|
||||
|
||||
<div class="instructions">
|
||||
<span id="success">
|
||||
<span>The installation has been <b>completed successfully</b>!</span>
|
||||
<br />
|
||||
You may close this page now.
|
||||
</span>
|
||||
|
||||
<ol class="main">
|
||||
<li>Login to <a href="https://developer.spotify.com" target="_blank" rel="noopener">Spotify for Developers</a> with your Spotify account.</li>
|
||||
<li>Go to <a href="https://developer.spotify.com/dashboard/create" target="_blank" rel="noopener">Create app - Spotify for Developers</a>.</li>
|
||||
<li>Set <code id="url">http://127.0.0.1:<span class="port"></span></code> as <b>"Redirect URI"</b> and click <b>Add</b>.</li>
|
||||
<li>Check <b>"Web API"</b> in <b>"Which API/SDKs are you planning to use?"</b>.</li>
|
||||
<li>Fill the rest of the form to your liking, <b>"Website"</b> field can be left empty.</li>
|
||||
<li>Create the app and navigate to the app's dashboard.</li>
|
||||
<li>Click <b>"Basic Information"</b> in the app's dashboard.</li>
|
||||
<li>Copy the <b>"Client ID"</b> to the form below.</li>
|
||||
<li>Click <b>"View client secret"</b> and copy the <b>"Client secret"</b> to the form below.</li>
|
||||
<li>Submit the form below.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<form action="/" method="POST" class="main">
|
||||
<div id="error">
|
||||
<span>Something went wrong!</span>
|
||||
<br />
|
||||
<small><b>Please double-check the app information and try again.</b></small>
|
||||
<br /><br><br>
|
||||
</div>
|
||||
|
||||
<input type="text" id="clientId" name="clientId" placeholder="Client ID" required />
|
||||
<input type="text" id="clientSecret" name="clientSecret" placeholder="Client Secret" required />
|
||||
<input type="submit" value="Submit" />
|
||||
|
||||
<br />
|
||||
|
||||
<small>If you get "<b>INVALID_CLIENT: Invalid redirect URI</b>":<br />Make sure you have copied the <b>Redirect URL</b> exactly as is, without a trailing slash (/).</small>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -0,0 +1,24 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
const mainContainer = document.querySelector('.form-container')
|
||||
const code = document.querySelector('#url')
|
||||
|
||||
code.addEventListener('click', () => {
|
||||
const range = document.createRange()
|
||||
range.selectNode(code)
|
||||
window.getSelection().removeAllRanges()
|
||||
window.getSelection().addRange(range)
|
||||
})
|
||||
|
||||
if (params.has('success')) {
|
||||
document.querySelectorAll('.main').forEach(e => e.style.display = 'none')
|
||||
document.getElementById('success').style.display = 'block'
|
||||
} else if (params.has('error'))
|
||||
document.getElementById('error').style.display = 'block'
|
||||
|
||||
fetch('/port').then(response => response.text()).then(port => {
|
||||
document.querySelectorAll('.port').forEach(e => e.textContent = port)
|
||||
mainContainer.style.display = 'block'
|
||||
setTimeout(() => mainContainer.classList.add('visible'), 500)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,128 @@
|
||||
body {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
font-family: 'Lato', sans-serif;
|
||||
}
|
||||
|
||||
#error, #success {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#error span {
|
||||
color: #ff2f2f;
|
||||
}
|
||||
|
||||
#success span {
|
||||
color: #1db954;
|
||||
}
|
||||
|
||||
small {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
max-width: 600px;
|
||||
margin: 50px auto;
|
||||
padding: 20px 40px;
|
||||
background-color: #181818;
|
||||
border: 1px solid #282828;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
transition: opacity 1.5s ease;
|
||||
}
|
||||
|
||||
.form-container form {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-container.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="submit"] {
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - 20px);
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #282828;
|
||||
border: 1px solid #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
background-color: #1db954;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="submit"]:hover {
|
||||
background-color: #1ed760;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
max-width: 600px;
|
||||
margin: 20px auto;
|
||||
color: #b3b3b3;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1db954;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease, text-decoration 0.3s ease;
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
color: #1ed760;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ol li {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h2 img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #282828;
|
||||
padding: 2px 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #1db954;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: #1db954;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::-webkit-selection {
|
||||
background-color: #1db954;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #282828;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
After Width: | Height: | Size: 249 B |
|
After Width: | Height: | Size: 421 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 245 B |
|
After Width: | Height: | Size: 425 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 286 B |
|
After Width: | Height: | Size: 441 B |
|
After Width: | Height: | Size: 466 B |
|
After Width: | Height: | Size: 900 B |
|
After Width: | Height: | Size: 361 B |
|
After Width: | Height: | Size: 599 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 260 B |
|
After Width: | Height: | Size: 276 B |
|
After Width: | Height: | Size: 403 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 415 B |
|
After Width: | Height: | Size: 809 B |
|
After Width: | Height: | Size: 473 B |
|
After Width: | Height: | Size: 954 B |
|
After Width: | Height: | Size: 346 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 292 B |
|
After Width: | Height: | Size: 499 B |
|
After Width: | Height: | Size: 441 B |
|
After Width: | Height: | Size: 695 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.1 KiB |