mirror of
https://github.com/Mastermindzh/tidal-hifi.git
synced 2024-11-25 06:43:48 +01:00
388 lines
10 KiB
HTML
388 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="header">
|
||
|
|
<h1 class="title">Settings</h1>
|
||
|
|
<a href="javascript:hide();" class="exitWindow">
|
||
|
|
|
||
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 348.333 348.334">
|
||
|
|
<g>
|
||
|
|
<path fill="white" d="M336.559,68.611L231.016,174.165l105.543,105.549c15.699,15.705,15.699,41.145,0,56.85
|
||
|
|
c-7.844,7.844-18.128,11.769-28.407,11.769c-10.296,0-20.581-3.919-28.419-11.769L174.167,231.003L68.609,336.563
|
||
|
|
c-7.843,7.844-18.128,11.769-28.416,11.769c-10.285,0-20.563-3.919-28.413-11.769c-15.699-15.698-15.699-41.139,0-56.85
|
||
|
|
l105.54-105.549L11.774,68.611c-15.699-15.699-15.699-41.145,0-56.844c15.696-15.687,41.127-15.687,56.829,0l105.563,105.554
|
||
|
|
L279.721,11.767c15.705-15.687,41.139-15.687,56.832,0C352.258,27.466,352.258,52.912,336.559,68.611z" />
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="body">
|
||
|
|
<div class="tabset">
|
||
|
|
<!-- Tab 1 -->
|
||
|
|
<input type="radio" name="tabset" id="tab1" checked />
|
||
|
|
<label for="tab1">General</label>
|
||
|
|
<!-- Tab 2 -->
|
||
|
|
<input type="radio" name="tabset" id="tab2" />
|
||
|
|
<label for="tab2">Api</label>
|
||
|
|
|
||
|
|
<div class="tab-panels">
|
||
|
|
<section id="general" class="tab-panel">
|
||
|
|
<div class="section">
|
||
|
|
<h3>Playback</h3>
|
||
|
|
<div class="option">
|
||
|
|
<h4>Notifications</h4>
|
||
|
|
<p>
|
||
|
|
Whether to show a notification when a new song starts.
|
||
|
|
</p>
|
||
|
|
<label class="switch">
|
||
|
|
<input id="notifications" type="checkbox">
|
||
|
|
<span class="slider round"></span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="section">
|
||
|
|
<h3>UI</h3>
|
||
|
|
<div class="option">
|
||
|
|
<h4>Menubar</h4>
|
||
|
|
<p>
|
||
|
|
Show Tidal-hifi's menu bar
|
||
|
|
</p>
|
||
|
|
<label class="switch">
|
||
|
|
<input id="menuBar" type="checkbox">
|
||
|
|
<span class="slider round"></span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section id="api" class="tab-panel">
|
||
|
|
<div class="section">
|
||
|
|
<h3>Api</h3>
|
||
|
|
<p style="margin-bottom: 15px;">
|
||
|
|
Tidal-hifi has a web api built in to allow users to get current song information. You can optionally enable playback control as well.
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<small>* api changes require a restart to update</small>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="option">
|
||
|
|
<h4>Web API</h4>
|
||
|
|
<p>
|
||
|
|
Whether to enable the Tidal-hifi web api
|
||
|
|
</p>
|
||
|
|
<label class="switch">
|
||
|
|
<input id="apiCheckbox" type="checkbox">
|
||
|
|
<span class="slider round"></span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="option">
|
||
|
|
<h4 style="margin-bottom: 5px;">API port</h4>
|
||
|
|
<input id="port" type="text" class="freeTextInput" name="port">
|
||
|
|
</div>
|
||
|
|
<div class="option">
|
||
|
|
<h4>Playback control</h4>
|
||
|
|
<p>
|
||
|
|
Whether to enable playback control from the api
|
||
|
|
</p>
|
||
|
|
<label class="switch">
|
||
|
|
<input id="playBackControl" type="checkbox">
|
||
|
|
<span class="slider round"></span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button onClick="restart()">Restart Tidal-hifi</button>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.header {
|
||
|
|
-webkit-user-select: none;
|
||
|
|
-webkit-app-region: drag;
|
||
|
|
}
|
||
|
|
.header a {
|
||
|
|
-webkit-app-region: no-drag;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
margin: 0%;
|
||
|
|
padding: 0%;
|
||
|
|
color: #ffffff;
|
||
|
|
font-weight: 400;
|
||
|
|
font-stretch: normal;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
font-family: nationale, nationale-regular, Helvetica, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
html,
|
||
|
|
body {
|
||
|
|
height: 100%;
|
||
|
|
background-color: black;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
small {
|
||
|
|
font-style: italic;
|
||
|
|
color: #72777f;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
background-color: #242528;
|
||
|
|
border-bottom: 1px solid #5a5a5a;
|
||
|
|
height: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
float: left;
|
||
|
|
line-height: 50px;
|
||
|
|
margin-left: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.accent {
|
||
|
|
color: #0ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.exitWindow {
|
||
|
|
border: none;
|
||
|
|
text-decoration: none;
|
||
|
|
font-size: 1.4rem;
|
||
|
|
float: right;
|
||
|
|
margin-right: 15px;
|
||
|
|
height: 50px;
|
||
|
|
line-height: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.exitWindow svg {
|
||
|
|
height: 50px;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section {
|
||
|
|
padding-top: 10px;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
border-bottom: 1px solid rgba(246, 245, 255, .1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.section .option {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section .option p {
|
||
|
|
max-width: 75%;
|
||
|
|
float: left
|
||
|
|
}
|
||
|
|
|
||
|
|
.section .option label {
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section:after,
|
||
|
|
.section .option:after {
|
||
|
|
content: "";
|
||
|
|
display: table;
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section h3 {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section h4 {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section p {
|
||
|
|
color: #72777f;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom-border {
|
||
|
|
border-bottom: 1px solid #0ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.body {
|
||
|
|
padding: 15px;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
position: relative;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.body::-webkit-scrollbar-track {
|
||
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||
|
|
border-radius: 5px;
|
||
|
|
background-color: 2a2a2a;
|
||
|
|
}
|
||
|
|
|
||
|
|
.body::-webkit-scrollbar {
|
||
|
|
width: 10px;
|
||
|
|
background-color: #2a2a2a;
|
||
|
|
}
|
||
|
|
|
||
|
|
.body::-webkit-scrollbar-thumb {
|
||
|
|
border-radius: 10px;
|
||
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
||
|
|
background-color: #5a5a5a;
|
||
|
|
}
|
||
|
|
/* Tabs */
|
||
|
|
|
||
|
|
.tabset > input[type="radio"] {
|
||
|
|
position: absolute;
|
||
|
|
left: -200vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabset .tab-panel {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
|
||
|
|
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
|
||
|
|
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3) {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabset > label {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
padding: 15px 0px 10px;
|
||
|
|
border-bottom: 0;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabset > input + label {
|
||
|
|
color: #e0e0e0;
|
||
|
|
margin-right: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabset > input:checked + label {
|
||
|
|
color: #0ff;
|
||
|
|
border-bottom: 2px solid #0ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-panel {
|
||
|
|
padding: 10px 0;
|
||
|
|
}
|
||
|
|
/* switches */
|
||
|
|
/* The switch - the box around the slider */
|
||
|
|
|
||
|
|
.switch {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
width: 50px;
|
||
|
|
height: 28px;
|
||
|
|
}
|
||
|
|
/* Hide default HTML checkbox */
|
||
|
|
|
||
|
|
.switch input {
|
||
|
|
opacity: 0;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
}
|
||
|
|
/* The slider */
|
||
|
|
|
||
|
|
.slider {
|
||
|
|
position: absolute;
|
||
|
|
cursor: pointer;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background-color: rgba(246, 245, 255, .1);
|
||
|
|
-webkit-transition: .4s;
|
||
|
|
transition: .4s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slider:before {
|
||
|
|
position: absolute;
|
||
|
|
content: "";
|
||
|
|
height: 24px;
|
||
|
|
width: 24px;
|
||
|
|
left: 2px;
|
||
|
|
bottom: 2px;
|
||
|
|
background-color: white;
|
||
|
|
-webkit-transition: .4s;
|
||
|
|
transition: .4s;
|
||
|
|
}
|
||
|
|
|
||
|
|
input:checked + .slider {
|
||
|
|
background-color: #0ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
input:focus + .slider {
|
||
|
|
box-shadow: 0 0 1px #0ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
input:checked + .slider:before {
|
||
|
|
-webkit-transform: translateX(22px);
|
||
|
|
-ms-transform: translateX(22px);
|
||
|
|
transform: translateX(22px);
|
||
|
|
}
|
||
|
|
/* Rounded sliders */
|
||
|
|
|
||
|
|
.slider.round {
|
||
|
|
border-radius: 34px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slider.round:before {
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
/* input field */
|
||
|
|
|
||
|
|
input {
|
||
|
|
background: transparent;
|
||
|
|
border: 0;
|
||
|
|
border-bottom: 1px solid rgba(246, 245, 255, .1);
|
||
|
|
color: rgba(229, 238, 255, .6);
|
||
|
|
width: 100%;
|
||
|
|
display: block;
|
||
|
|
padding: 0 0 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.freeTextInput:focus {
|
||
|
|
outline: none;
|
||
|
|
border-bottom: 1px solid #0ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* buttons */
|
||
|
|
button{
|
||
|
|
border:none;
|
||
|
|
background:none;
|
||
|
|
align-items: center;
|
||
|
|
background-color: rgba(229,238,255,.2);
|
||
|
|
display: inline-flex;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: 12px;
|
||
|
|
height: 48px;
|
||
|
|
line-height: 49px;
|
||
|
|
padding: 0 24px;
|
||
|
|
text-align: center;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
transition: background .35s ease;
|
||
|
|
min-height: 0;
|
||
|
|
min-width: 0;
|
||
|
|
font-size: 1.14286rem;
|
||
|
|
font-family: nationale,nationale-regular,Helvetica,sans-serif;
|
||
|
|
margin-top: 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
button:hover{
|
||
|
|
background-color: rgba(229,238,255,.3);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</html>
|