Sophia Atkinson
1ac096ca52
You can configure the following settings: - Placeholder artwork URL - Paused timeout (in seconds, minutes, or hours) - Metadata fetch interval (in seconds, minutes, or hours) I also added helping notes to the title of the inputs to make it clearer what each setting does. Also meow meow meow meow meow meow meow meow meow meow meow meow meow meow
179 lines
5.7 KiB
HTML
179 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>AmNP Settings (Beta)</title>
|
|
<style>
|
|
:root {
|
|
--accent: #F5A9B8;
|
|
--bg: #121212;
|
|
--fg: #eee;
|
|
--input-bg: #1e1e1e;
|
|
--input-border: #444;
|
|
--input-focus: var(--accent);
|
|
--button-bg: var(--accent);
|
|
--button-hover: #d67b8a;
|
|
--shadow: rgba(245, 169, 184, 0.3);
|
|
--details-bg: #18181a;
|
|
--details-border: #2a2a2a;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: var(--bg);
|
|
color: var(--fg);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
padding: 1rem;
|
|
}
|
|
.container {
|
|
background-color: #1c1c1c;
|
|
padding: 2rem;
|
|
border-radius: 12px;
|
|
max-width: 500px;
|
|
width: 100%;
|
|
}
|
|
h1 {
|
|
margin-top: 0;
|
|
font-weight: 700;
|
|
font-size: 1.8rem;
|
|
color: var(--accent);
|
|
text-align: center;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-top: 1.5rem;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
color: var(--fg);
|
|
}
|
|
input[type="text"] {
|
|
width: 100%;
|
|
padding: 0.6rem 0.8rem;
|
|
font-size: 1rem;
|
|
margin-top: 0.3rem;
|
|
border: 1.5px solid var(--input-border);
|
|
border-radius: 8px;
|
|
background-color: var(--input-bg);
|
|
color: var(--fg);
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
input[type="text"]::placeholder {
|
|
color: #888;
|
|
}
|
|
input[type="text"]:focus {
|
|
outline: none;
|
|
border-color: var(--input-focus);
|
|
}
|
|
button {
|
|
margin-top: 2rem;
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
border: none;
|
|
border-radius: 10px;
|
|
background-color: var(--button-bg);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
button:hover,
|
|
button:focus {
|
|
background-color: var(--button-hover);
|
|
outline: none;
|
|
}
|
|
details {
|
|
margin-top: 2rem;
|
|
background: var(--details-bg);
|
|
border: 1.5px solid var(--details-border);
|
|
border-radius: 10px;
|
|
padding: 0.5rem 1rem;
|
|
max-width: 100%;
|
|
}
|
|
details summary {
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
font-size: 1.05rem;
|
|
outline: none;
|
|
padding: 0.5rem 0;
|
|
user-select: none;
|
|
transition: color 0.2s;
|
|
}
|
|
details summary:hover,
|
|
details summary:focus {
|
|
color: #fff;
|
|
}
|
|
details > div {
|
|
margin-top: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
border-top: 1px solid var(--details-border);
|
|
padding-top: 1rem;
|
|
overflow-x: hidden;
|
|
}
|
|
details label {
|
|
margin-top: 0;
|
|
font-size: 0.98rem;
|
|
font-weight: 500;
|
|
color: #ccc;
|
|
}
|
|
details input[type="text"] {
|
|
margin-top: 0.3rem;
|
|
font-size: 0.98rem;
|
|
background: #232326;
|
|
border-color: #333;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
.help {
|
|
cursor: help;
|
|
color: var(--accent);
|
|
transition: color 0.2s ease;
|
|
}
|
|
label[for="endpoint"]:before,
|
|
label[for="artworkEndpoint"]:before,
|
|
label[for="token"]:before {
|
|
content: "* ";
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
#version {
|
|
margin-top: 1.5rem;
|
|
font-size: 0.9rem;
|
|
color: #aaa;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1><span class="help" title="Apple Music Now Playing">AmNP</span> <span class="help" title="Why are you hovering over this, this is the settings page nothing special about it">Settings</span> <span class="help" title="Beta means that this extention is experimental and may not work as expected">(Beta)</span></h1>
|
|
<label for="endpoint">Now playing Endpoint:</label>
|
|
<input title="For wp-amnp it uses the /wp-json/nowplaying/v1/update" type="text" id="endpoint" placeholder="https://zorpzeep.blorp/wp-json/nowplaying/v1/update" autocomplete="off" spellcheck="false" required/>
|
|
<label for="artworkEndpoint">Artwork Endpoint:</label>
|
|
<input title="For wp-amnp it uses the /wp-json/nowplaying/v1/update/artwork" type="text" id="artworkEndpoint" placeholder="https://zorpzeep.blorp/wp-json/nowplaying/v1/update/artwork" autocomplete="off" spellcheck="false" required/>
|
|
<label for="token">Bearer Token:</label>
|
|
<input title="For wp-amnp it can be found in Settings -> Now Playing API" type="text" id="token" placeholder="73757065725f7365637572655f746f6b656e" autocomplete="off" spellcheck="false" required/>
|
|
|
|
<details>
|
|
<summary>Extra Configurations</summary>
|
|
<div>
|
|
<label for="placeholderArtwork">Placeholder Artwork URL:</label>
|
|
<input title="You can type a url that host a placeholder image, any format supported, all are encoded to base64" type="text" id="placeholderArtwork" placeholder="https://placehold.co/150/1E1F22/FFF?text=Nothing%20playing" autocomplete="off" spellcheck="false"/>
|
|
<label for="pausedTimeout">Paused Timeout:</label>
|
|
<input title="You can type 5m, 5 minutes, 300 seconds, 1h, 1 hour, etc. Note that they are converted to ms" type="text" id="pausedTimeout" placeholder="5m" autocomplete="off" spellcheck="false"/>
|
|
<label for="metadataFetchInterval">Update Interval:</label>
|
|
<input title="You can type 5m, 5 minutes, 300 seconds, 1h, 1 hour, etc. Note that they are converted to ms" type="text" id="metadataFetchInterval" placeholder="1s" autocomplete="off" spellcheck="false"/>
|
|
</div>
|
|
</details>
|
|
<button id="save">Save</button>
|
|
|
|
<footer id="version">You are running version: (unavailable)</footer>
|
|
</div>
|
|
<script src="options.js"></script>
|
|
</body>
|
|
</html>
|