From 468b35f791969bb2b8a3d64abfa1de69cefcce1b Mon Sep 17 00:00:00 2001
From: coon <coon@mailbox.org>
Date: Tue, 5 Dec 2023 02:42:39 +0100
Subject: [PATCH] static: add symbols next to volume slider

---
 static/flexbox/index.html |  2 ++
 static/flexbox/sanic.css  | 12 +++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/static/flexbox/index.html b/static/flexbox/index.html
index 4a62c22..e42eaaf 100644
--- a/static/flexbox/index.html
+++ b/static/flexbox/index.html
@@ -49,7 +49,9 @@
           </div>
         </div>
         <div id="volume-control">
+          <button class="borderless-button">&#x1F509;</button> <!-- 🔉 Speaker with sound wave -->
           <input id="volume" name="volume" type="range" min="1" max="100" value="50">
+          <button class="borderless-button">&#x1F50A;</button> <!-- 🔊 Speaker with sound waves -->
         </div>
       </div>
       <div class="track-info">
diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css
index f349762..b133513 100644
--- a/static/flexbox/sanic.css
+++ b/static/flexbox/sanic.css
@@ -29,6 +29,12 @@ button {
   border-bottom-color: #3A3A3A;
 }
 
+.borderless-button {
+  border: none;
+  background-color: inherit;
+  cursor: pointer;
+}
+
 input[type=text] {
   background-color: #28374a;
   color: white;
@@ -168,7 +174,6 @@ table tr:hover td {
 }
 
 #volume {
-  margin-left: 10px;
   width: 90%;
 }
 
@@ -192,6 +197,11 @@ table tr:hover td {
   flex-direction: row;
 }
 
+#volume-control {
+  display: flex;
+  flex-direction: row;
+}
+
 #top-logo {
   display: flex;
   flex-direction: column;