ui: add toolbar component and adjust body styling

This commit is contained in:
2025-09-30 14:20:55 -04:00
parent ec11b18d32
commit 1769faa3a6
20 changed files with 141 additions and 0 deletions

View File

@@ -12,4 +12,6 @@ html {
body {
height: 100%;
margin: 0;
padding: 2px;
box-sizing: border-box;
}

BIN
static/icons/cd.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

13
static/icons/github.svg Normal file
View File

@@ -0,0 +1,13 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 2H9V4H7V6H5V2Z" fill="black"/>
<path d="M5 12H3V6H5V12Z" fill="black"/>
<path d="M7 14H5V12H7V14Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 16V14H7V16H3V14H1V16H3V18H7V22H9V18H11V16H9ZM9 16V18H7V16H9Z" fill="black"/>
<path d="M15 4V6H9V4H15Z" fill="black"/>
<path d="M19 6H17V4H15V2H19V6Z" fill="black"/>
<path d="M19 12V6H21V12H19Z" fill="black"/>
<path d="M17 14V12H19V14H17Z" fill="black"/>
<path d="M15 16V14H17V16H15Z" fill="black"/>
<path d="M15 18H13V16H15V18Z" fill="black"/>
<path d="M15 18H17V22H15V18Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 670 B

View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 4H5V6H3V12V14V18V20H5H8H10V18V14V12H8H5V6H19V12H16H14V14V18V20H16H19H21V18V14V12V6H19V4ZM16 14H19V18H16V14ZM8 14V18H5V14H8Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 296 B

BIN
static/icons/internet.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
static/icons/leftarrow.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 891 B

BIN
static/icons/musicnote.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

3
static/icons/next.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 4H8V6H10V8H12V10H14V14H12V16H10V18H8V20H6V4ZM18 4H16V20H18V4Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 233 B

3
static/icons/play.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20H8V4H10V6H12V9H14V11H16V13H14V15H12V18H10V20Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 220 B

3
static/icons/prev.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 4H8V20H6V4ZM18 4H16V6H14V9H12V11H10V13H12V16H14V18H16V20H18V4Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 234 B

BIN
static/icons/rightarrow.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

3
static/icons/search.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 2H14V4H6V2ZM4 6V4H6V6H4ZM4 14H2V6H4V14ZM6 16H4V14H6V16ZM14 16V18H6V16H14ZM16 14H14V16H16V18H18V20H20V22H22V20H20V18H18V16H16V14ZM16 6H18V14H16V6ZM16 6V4H14V6H16Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 333 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

BIN
static/icons/speaker.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H13V4H11V6H9V8H7H5V10V14V16H7H9V18H11V20H13V22H15V2ZM11 18V16H9V14H7V10H9V8H11V6H13V18H11ZM17 10H19V14H17V10Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 283 B

View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H13V22H11V20H9V18H11V6H9V4H11V2ZM7 8V6H9V8H7ZM7 16H5H3V14V10V8H5H7V10H5V14H7V16ZM7 16V18H9V16H7ZM17 10H15V14H17V10ZM19 8H21V16H19V8ZM19 16V18H15V16H19ZM19 6V8H15V6H19Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 341 B

View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H9V4H7V6H5V8H3H1V10V14V16H3H5V18H7V20H9V22H11V2ZM7 18V16H5V14H3V10H5V8H7V6H9V18H7ZM13 10H15V14H13V10ZM21 4H19V2H13V4H19V6H21V18H19V20H13V22H19V20H21V18H23V6H21V4ZM19 8H17V6H13V8H17V16H13V18H17V16H19V8Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 375 B

3
static/icons/volume.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H17V22H15V20H13V18H15V6H13V4H15V2ZM11 8V6H13V8H11ZM9 10H11V8H9H7V10V14V16H9H11V18H13V16H11V14H9V10Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 273 B