Added new section for html-only development (does not affect the code directly), just for convenience

This commit is contained in:
2023-10-14 16:16:16 +02:00
parent 665e6aefbf
commit a9e067cf44
3 changed files with 77 additions and 79 deletions

View File

@@ -38,6 +38,7 @@ Thanks to...
- schreibfaul1 (github) for creating the audio library used in this project
- the makers of Bootstrap Icons for creating wonderful icons
- espressif for making the best microprocessor I've ever seen
- ArduinoJson by Benoit Blanchon
# License
@@ -73,6 +74,3 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
ESP32-audioI2S library © schreibfaul1 (https://github.com/schreibfaul1/ESP32-audioI2S as of November 2022)

View File

@@ -94,7 +94,7 @@ hr {
cursor: pointer;
}
.pager-link::after {
content: " > ";
content: " >";
}
.container {
@@ -104,7 +104,7 @@ hr {
.card {
background-color: #373737;
padding: 10pt;
margin: 0 auto 60px;
margin: 0 auto 40px;
border-radius: 8pt;
border: 2px solid #f00;
}

View File

@@ -1,74 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<title>NetSpeaker WebUI</title>
<link href="main.css" rel="stylesheet">
<link href="favicon.svg" rel="icon">
</head>
<body>
<div class="navbar-top">
<a class="btn-red" href="sdcard.html">Local SD</a>
<a class="btn-red" href="internetradio.html">Internet Radio</a>
<a class="btn-red" href="webstream.html">Network Stream</a>
<a class="btn-red">Settings</a>
<hr class="left w60">
<a href="main.html" class="pager-link">Home</a>
</div>
<div class="container center">
<div class="card">
<img class="song-cover" src="cover.svg">
<h1>Title</h1>
<h3>Interpret</h3>
<p>Comment lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<table class="playlist">
<thead>
<tr>
<th class="playlist-song">Song</th>
<th class="playlist-album">Album</th>
<th class="playlist-length">Length</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vernunft breitet sich aus über die Bundesrepublik Deutschland</td>
<td></td>
<td>2:59</td>
</tr>
<tr>
<td>Natural</td>
<td>Origins</td>
<td>3:42</td>
</tr>
<tr>
<td>Hot2Touch</td>
<td>I</td>
<td>2:48</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="navbar-bottom">
<a class="icon-32 bg-rounded" href="_api/web/playback/previous">
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M11.729 5.055a.5.5 0 0 0-.52.038L8.5 7.028V5.5a.5.5 0 0 0-.79-.407L5 7.028V5.5a.5.5 0 0 0-1 0v5a.5.5 0 0 0 1 0V8.972l2.71 1.935a.5.5 0 0 0 .79-.407V8.972l2.71 1.935A.5.5 0 0 0 12 10.5v-5a.5.5 0 0 0-.271-.445z"/>
</svg>
</a>
<a class="icon-32 bg-rounded" href="_api/web/playback/toogle">
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"/>
</svg>
</a>
<a class="icon-32 bg-rounded" href="_api/web/playback/next">
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M4.271 5.055a.5.5 0 0 1 .52.038L7.5 7.028V5.5a.5.5 0 0 1 .79-.407L11 7.028V5.5a.5.5 0 0 1 1 0v5a.5.5 0 0 1-1 0V8.972l-2.71 1.935a.5.5 0 0 1-.79-.407V8.972l-2.71 1.935A.5.5 0 0 1 4 10.5v-5a.5.5 0 0 1 .271-.445z"/>
</svg>
</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>NetSpeaker WebUI</title>
<link href="main.css" rel="stylesheet">
<link href="favicon.svg" rel="icon">
</head>
<body>
<div class="navbar-top">
<a class="btn-red" href="sdcard.html">Local SD</a>
<a class="btn-red" href="internetradio.html">Internet Radio</a>
<a class="btn-red" href="webstream.html">Network Stream</a>
<a class="btn-red">Settings</a>
<hr class="left w60">
<a href="main.html" class="pager-link">Home</a>
</div>
<div class="container center">
<div class="card">
<img class="song-cover" src="cover.svg">
<h1>Title</h1>
<h3>Interpret</h3>
<p>Comment lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<table class="playlist">
<thead>
<tr>
<th class="playlist-song">Song</th>
<th class="playlist-album">Album</th>
<th class="playlist-length">Length</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vernunft breitet sich aus über die Bundesrepublik Deutschland</td>
<td></td>
<td>2:59</td>
</tr>
<tr>
<td>Natural</td>
<td>Origins</td>
<td>3:42</td>
</tr>
<tr>
<td>Hot2Touch</td>
<td>I</td>
<td>2:48</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="navbar-bottom">
<a class="icon-32 bg-rounded" href="_api/web/playback/previous">
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M11.729 5.055a.5.5 0 0 0-.52.038L8.5 7.028V5.5a.5.5 0 0 0-.79-.407L5 7.028V5.5a.5.5 0 0 0-1 0v5a.5.5 0 0 0 1 0V8.972l2.71 1.935a.5.5 0 0 0 .79-.407V8.972l2.71 1.935A.5.5 0 0 0 12 10.5v-5a.5.5 0 0 0-.271-.445z"/>
</svg>
</a>
<a class="icon-32 bg-rounded" href="_api/web/playback/toogle">
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"/>
</svg>
</a>
<a class="icon-32 bg-rounded" href="_api/web/playback/next">
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M4.271 5.055a.5.5 0 0 1 .52.038L7.5 7.028V5.5a.5.5 0 0 1 .79-.407L11 7.028V5.5a.5.5 0 0 1 1 0v5a.5.5 0 0 1-1 0V8.972l-2.71 1.935a.5.5 0 0 1-.79-.407V8.972l-2.71 1.935A.5.5 0 0 1 4 10.5v-5a.5.5 0 0 1 .271-.445z"/>
</svg>
</a>
</div>
</body>
</html>