Added new section for html-only development (does not affect the code directly), just for convenience
This commit is contained in:
@@ -38,6 +38,7 @@ Thanks to...
|
|||||||
- schreibfaul1 (github) for creating the audio library used in this project
|
- schreibfaul1 (github) for creating the audio library used in this project
|
||||||
- the makers of Bootstrap Icons for creating wonderful icons
|
- the makers of Bootstrap Icons for creating wonderful icons
|
||||||
- espressif for making the best microprocessor I've ever seen
|
- espressif for making the best microprocessor I've ever seen
|
||||||
|
- ArduinoJson by Benoit Blanchon
|
||||||
|
|
||||||
# License
|
# 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)
|
ESP32-audioI2S library © schreibfaul1 (https://github.com/schreibfaul1/ESP32-audioI2S as of November 2022)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@@ -94,7 +94,7 @@ hr {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.pager-link::after {
|
.pager-link::after {
|
||||||
content: " > ";
|
content: " >";
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@@ -104,7 +104,7 @@ hr {
|
|||||||
.card {
|
.card {
|
||||||
background-color: #373737;
|
background-color: #373737;
|
||||||
padding: 10pt;
|
padding: 10pt;
|
||||||
margin: 0 auto 60px;
|
margin: 0 auto 40px;
|
||||||
border-radius: 8pt;
|
border-radius: 8pt;
|
||||||
border: 2px solid #f00;
|
border: 2px solid #f00;
|
||||||
}
|
}
|
||||||
|
148
html/main.html
148
html/main.html
@@ -1,74 +1,74 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>NetSpeaker WebUI</title>
|
<title>NetSpeaker WebUI</title>
|
||||||
<link href="main.css" rel="stylesheet">
|
<link href="main.css" rel="stylesheet">
|
||||||
<link href="favicon.svg" rel="icon">
|
<link href="favicon.svg" rel="icon">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="navbar-top">
|
<div class="navbar-top">
|
||||||
<a class="btn-red" href="sdcard.html">Local SD</a>
|
<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="internetradio.html">Internet Radio</a>
|
||||||
<a class="btn-red" href="webstream.html">Network Stream</a>
|
<a class="btn-red" href="webstream.html">Network Stream</a>
|
||||||
<a class="btn-red">Settings</a>
|
<a class="btn-red">Settings</a>
|
||||||
<hr class="left w60">
|
<hr class="left w60">
|
||||||
<a href="main.html" class="pager-link">Home</a>
|
<a href="main.html" class="pager-link">Home</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="container center">
|
<div class="container center">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<img class="song-cover" src="cover.svg">
|
<img class="song-cover" src="cover.svg">
|
||||||
<h1>Title</h1>
|
<h1>Title</h1>
|
||||||
<h3>Interpret</h3>
|
<h3>Interpret</h3>
|
||||||
<p>Comment lorem ipsum dolor sit amet</p>
|
<p>Comment lorem ipsum dolor sit amet</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<table class="playlist">
|
<table class="playlist">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="playlist-song">Song</th>
|
<th class="playlist-song">Song</th>
|
||||||
<th class="playlist-album">Album</th>
|
<th class="playlist-album">Album</th>
|
||||||
<th class="playlist-length">Length</th>
|
<th class="playlist-length">Length</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Vernunft breitet sich aus über die Bundesrepublik Deutschland</td>
|
<td>Vernunft breitet sich aus über die Bundesrepublik Deutschland</td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>2:59</td>
|
<td>2:59</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Natural</td>
|
<td>Natural</td>
|
||||||
<td>Origins</td>
|
<td>Origins</td>
|
||||||
<td>3:42</td>
|
<td>3:42</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Hot2Touch</td>
|
<td>Hot2Touch</td>
|
||||||
<td>I</td>
|
<td>I</td>
|
||||||
<td>2:48</td>
|
<td>2:48</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="navbar-bottom">
|
<div class="navbar-bottom">
|
||||||
<a class="icon-32 bg-rounded" href="_api/web/playback/previous">
|
<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">
|
<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="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"/>
|
<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>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a class="icon-32 bg-rounded" href="_api/web/playback/toogle">
|
<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">
|
<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="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"/>
|
<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>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a class="icon-32 bg-rounded" href="_api/web/playback/next">
|
<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">
|
<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="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"/>
|
<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>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
Reference in New Issue
Block a user