Various styling improvements, moved font locally and added icon font

static/style.css → static/css/style.css

@@ -2,18 +2,18 @@
     --background-primary: #f9f9f9;
     --background-secondary: #fff;
     --background-tertiary: #ddd;
-    --background-accent: rgba(74, 144, 226, 0.75);
-    --background-info: var(--background-accent);
-    --background-success: rgba(76, 175, 80, 0.8);
-    --background-warning: rgba(255, 152, 0, 0.8);
-    --background-error: rgba(229, 57, 53, 0.8);
+    --background-accent: #4e453fbf;
+    --background-info: var(--color-info);
+    --background-success: var(--color-success);
+    --background-warning: var(--color-warning);
+    --background-error: var( --color-error);
 
     --theme-primary: #6A9AD9;
     --theme-primary-hover: #A0CCF2;
     --theme-secondary: #C4B4A0;
     --theme-secondary-hover: #4E453F;
 
-    --color-info: var(--theme-primary);
+    --color-info: #6A9AD9CC;
     --color-success: #4CAF50CC;
     --color-warning: #FF9800CC;
     --color-error: #E53935CC;
@@ -33,6 +33,15 @@
     --transition-slow: 1s ease;
 }
 
+@font-face {
+    font-family: 'Roboto';
+    src: url('../webfonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
+    font-weight: 100 900; /* Variable range of weights */
+    font-stretch: 75% 100%; /* Variable width range (optional) */
+    font-style: normal;
+}
+
+
 /* General
 
 /* General Styling */
@@ -173,8 +182,8 @@ input, select {
 
 .dropdown {
     position: relative;
-    display: inline-block;
-    min-width: 200px;
+    display: flex;
+    flex-grow: 1;
 }
 
 .dropdown-button {
@@ -198,7 +207,7 @@ input, select {
     cursor: pointer;
     user-select: none;
     height: 100%;
-    aspect-ratio: 1 / 1;
+    aspect-ratio: 1 / 2;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -212,16 +221,19 @@ input, select {
 
 .dropdown-content {
     position: absolute;
+    width: 100%;
+    top: 100%;
     color: var(--theme-primary);
     background: var(--text-secondary);
     min-width: 120px;
     box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
     z-index: 1;
     display: none;
-    border-radius: 5px
+    border-radius: 5px;
+    padding: 5px;
 }
 
-.dropdown-content button {
+.dropdown-content button.no-bg {
     width: 100%;
     color: var(--theme-primary);
     background: none;
@@ -229,6 +241,9 @@ input, select {
     text-align: left;
     padding: 10px;
     cursor: pointer;
+    aspect-ratio: auto;
+    font-size: 0.9rem;
+    margin: 0;
 }
 
 .dropdown-content button:hover {
@@ -247,6 +262,9 @@ button {
     cursor: pointer;
     font-size: 1rem;
     transition: background 0.3s ease,color 0.3s ease;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 button:not(.no-bg):hover{
@@ -415,7 +433,6 @@ button.no-bg {
 section .header .add-button {
     height: 35px;
     width: 35px;
-    font-size: 1.5rem;
     padding: 0;
 }
 
@@ -603,9 +620,60 @@ section .header .add-button {
     justify-content: flex-end;
 }
 
-.action-buttons button {
-    flex: 1;
+.action-buttons.square button {
+    padding: 5px;
+    aspect-ratio: 1 / 1;
+    width: calc(25% - 10px);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.action-buttons.square .dropdown-content button {
+    width: 100%;
+    aspect-ratio: auto;
+    padding: 10px;
+}
+
+.action-buttons.square button i{
+    font-size: 2rem;
 }
+
+button i + span{
+    font-size: 1.25rem;
+}
+
+button i + span{
+    margin-left: 5px;
+}
+
+.action-buttons.square button i + span{
+    margin: 3px;
+}
+
+button i + span.small {
+    font-size: 0.75rem;
+}
+
+.action-buttons button i + span{
+    display: block;
+}
+
+.action-buttons button.dropdown-button {
+    aspect-ratio: auto;
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.action-buttons button.m {
+    width: calc(50% - 10px);
+}
+
+.action-buttons button.l {
+    width: 100%;
+}
+
 .action-buttons button.small {
     flex: 0;
     flex-basis: calc(25% - 10px);
@@ -631,12 +699,8 @@ button#debug_button.active {
     box-shadow: inset 0 0 4px var(--border-secondary);
 }
 
-#settings-tab button.cancel {
-    flex-basis: 100%;
-}
-
 #settings-tab .dropdown {
-    min-width: 66.66%;
+    width: 50%;
 }
 
 /* Preview Canvas */
@@ -669,14 +733,19 @@ body.playing .bottom-nav {
     align-items: flex-end;
 }
 
-body.playing section.sticky{
-    bottom: 200px;
-}
-
 #currently-playing-container {
     align-items: center;
+    background: var(--background-accent);
+    color: var(--text-secondary);
 }
 
+#currently-playing-container h2,
+#currently-playing-container .open-button
+{
+    color: var(--text-secondary);
+}
+
+
 body:not(.playing) #currently-playing-container {
     display: none;
 }
@@ -694,22 +763,31 @@ body.playing #currently-playing-container:not(.open) {
     bottom: 60px;
 }
 
-body.playing #currently-playing-container:not(.open) .header{
+body.playing #currently-playing-container .header{
     justify-content: center;
+    margin-bottom: 0;
 }
 
-body.playing #currently-playing-container:not(.open) .header .fullscreen-button,
-body.playing #currently-playing-container:not(.open) .header .close-button,
-body.playing #currently-playing-container:not(.open) .header h2 {
-    display: none;
+body.playing #currently-playing-container .header .open-button {
+    width: 100%;
+    height: 20px;
+    padding-top: 10px;
+    margin: 0;
 }
 
-body.playing #currently-playing-container:not(.open) .header .open-button {
-    display: block;
+body.playing #currently-playing-preview {
+    padding: 10px;
 }
 
-body.playing #currently-playing-container:not(.open) #currently-playing-preview {
+body.playing #currently-playing-preview #currentlyPlayingCanvas {
     max-width:80px;
+    padding: 10px;
+}
+
+body.playing #currently-playing-container:not(.open) .header .fullscreen-button,
+body.playing #currently-playing-container:not(.open) .header .close-button,
+body.playing #currently-playing-container:not(.open) .header h2 {
+    display: none;
 }
 
 body.playing #currently-playing-container:not(.open) #currently-playing-details{
@@ -728,7 +806,7 @@ body.playing #currently-playing-container:not(.open) #progress-container {
     width: 100%;
 }
 
-body:not(.playing) #currently-playing-container:not(.open) #play_progress_text {
+body.playing #currently-playing-container:not(.open) #play_progress_text {
     display: none;
 }
 
@@ -752,7 +830,6 @@ body:not(.playing) #currently-playing-container:not(.open) #play_progress_text {
 
 #currently-playing-details p {
     margin: 5px 0;
-    color: var(--text-primary);
     font-size: 1rem;
 }
 
@@ -761,7 +838,7 @@ body:not(.playing) #currently-playing-container:not(.open) #play_progress_text {
     align-items: center;
     justify-content: center;
     width: 100%;
-    margin-bottom: 10px;
+    margin: 5px 0;
     flex-wrap: wrap;
 }
 
@@ -786,7 +863,6 @@ body:not(.playing) #currently-playing-container:not(.open) #play_progress_text {
 #play_progress_text {
     font-size: 0.9rem;
     margin-left: 10px;
-    color: var(--text-primary);
 }
 
 .play-buttons {
@@ -902,9 +978,9 @@ body:not(.playing) #currently-playing-container:not(.open) #play_progress_text {
     background-color: var(--color-error);
 }
 
-
 #serial_ports_buttons {
-    display: inline-block;
+    display: flex;
+    gap: 10px;
 }
 
 .status.connected {
@@ -964,11 +1040,6 @@ input[type="number"]:focus {
     min-width: 200px;
 }
 
-#serial_status_container,
-#serial_ports_buttons {
-    display: inline-block;
-}
-
 /* Notification Styles */
 .notification {
     display: flex;
@@ -1054,6 +1125,11 @@ input[type="number"]:focus {
     button.cta:hover {
         background: var(--theme-primary);
     }
+
+    body.playing section.sticky{
+        bottom: 200px;
+    }
+
 }
 
 /* On larger screens, display all tabs in a 3-column grid */
@@ -1065,10 +1141,6 @@ input[type="number"]:focus {
         height: calc(100vh - 60px);
     }
 
-    .bottom-nav {
-        display: none;
-    }
-
     #status_log {
         grid-column: span 3;
         align-self: flex-end;
@@ -1080,6 +1152,14 @@ input[type="number"]:focus {
         bottom: 0;
     }
 
+    .bottom-nav .tab-button {
+        display: none;
+    }
+
+    .bottom-nav {
+        border-top: 0;
+    }
+
     /* Show all tabs in grid layout */
     .tab-content {
         display: flex !important; /* Always display tab-content */
@@ -1091,4 +1171,26 @@ input[type="number"]:focus {
         overflow-x: hidden;
         position: relative;
     }
+
+    body.playing .app {
+        padding: 15px 0 150px 15px;
+        margin-bottom: -140px;
+    }
+
+    body.playing .bottom-nav {
+        height: 140px;
+    }
+
+    body:not(.playing) .bottom-nav {
+        display: none;
+    }
+
+    body.playing #currently-playing-container.open {
+        position: absolute;
+        bottom: 0;
+    }
+
+    body.playing #currently-playing-container.open .header {
+        display: none;
+    }
 }

static/icons/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>

static/icons/chevron-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>

static/icons/chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>

static/icons/chevron-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"/></svg>

static/icons/pause.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z"/></svg>

static/icons/play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>

static/main.js → static/js/main.js

@@ -566,8 +566,8 @@ async function checkSerialStatus() {
         // Hide Available Ports and show disconnect/restart buttons
         serialPortsContainer.style.display = 'none';
         connectButton.style.display = 'none';
-        disconnectButton.style.display = 'inline-block';
-        restartButton.style.display = 'inline-block';
+        disconnectButton.style.display = 'flex';
+        restartButton.style.display = 'flex';
 
         // Preselect the connected port in the dropdown
         const newOption = document.createElement('option');
@@ -587,7 +587,7 @@ async function checkSerialStatus() {
 
         // Show Available Ports and the connect button
         serialPortsContainer.style.display = 'block';
-        connectButton.style.display = 'inline-block';
+        connectButton.style.display = 'flex';
         disconnectButton.style.display = 'none';
         restartButton.style.display = 'none';
 
@@ -1073,7 +1073,7 @@ function populatePlaylistDropdown() {
 
             logMessage('Playlist dropdown populated, event listener attached, and saved playlist restored.');
         })
-        .catch(error => logMessage(`Error fetching playlists: ${error.message}`, LOG_TYPE.ERROR));
+        .catch(error => logMessage(`Error fetching playlists: ${error.message}`));
 }
 populatePlaylistDropdown().then(() => {
     loadSettingsFromCookies(); // Restore selected playlist after populating the dropdown
@@ -1419,7 +1419,7 @@ function closeStickySection(sectionId) {
         // Reset the fullscreen button text if it exists
         const fullscreenButton = section.querySelector('.fullscreen-button');
         if (fullscreenButton) {
-            fullscreenButton.textContent = '⛶'; // Reset to enter fullscreen icon/text
+            fullscreenButton.textContent = '<i class="fa-solid fa-compress"></i>'; // Reset to enter fullscreen icon/text
         }
 
         logMessage(`Closed section: ${sectionId}`);
@@ -1459,7 +1459,7 @@ function attachFullScreenListeners() {
             const stickySection = this.closest('.sticky'); // Find the closest sticky section
             if (stickySection) {
                 // Close all other sections
-                document.querySelectorAll('.sticky').forEach(section => {
+                document.querySelectorAll('.sticky:not(#currently-playing-container)').forEach(section => {
                     if (section !== stickySection) {
                         section.classList.remove('fullscreen');
                         section.classList.remove('visible');
@@ -1666,7 +1666,7 @@ function loadSettingsFromCookies() {
         document.getElementById('end_time').value = endTime;
     }
 
-    if (startTime !== null || endTime !== null ) {
+    if (startTime && endTime ) {
         document.getElementById('clear_time').style.display = 'block';
     }
 

templates/index.html

@@ -5,7 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <title>Dune Weaver Controller</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="../static/style.css">
+    <link rel="stylesheet" href="../static/css/style.css">
+    <link rel="stylesheet" href="../static/css/all.min.css">
 </head>
 <body>
 <header>
@@ -17,14 +18,22 @@
         <section class="main">
             <div class="header">
                 <h2>Patterns</h2>
-                <button class="add-button cta" onclick="toggleSecondaryButtons('add-pattern-container')">+</button>
+                <button class="add-button cta" onclick="toggleSecondaryButtons('add-pattern-container')">
+                    <i class="fa-solid fa-plus"></i>
+                </button>
             </div>
             <div id="add-pattern-container" class="add-to-container hidden">
                 <div class="action-buttons">
                     <label for="upload_file">Upload pattern file (.thr):</label>
                     <input type="file" id="upload_file">
-                    <button class="cancel" onclick="toggleSecondaryButtons('add-pattern-container')">Cancel</button>
-                    <button class="cta" onclick="uploadThetaRho()">Upload</button>
+                    <button class="cta" onclick="uploadThetaRho()">
+                        <i class="fa-solid fa-file-arrow-up"></i>
+                        <span>Upload</span>
+                    </button>
+                    <button class="cancel" onclick="toggleSecondaryButtons('add-pattern-container')">
+                        <i class="fa-solid fa-xmark"></i>
+                        <span>Cancel</span>
+                    </button>
                 </div>
             </div>
             <input type="text" id="search_pattern" placeholder="Search files..." oninput="searchPatternFiles()">
@@ -36,7 +45,9 @@
             <div class="header">
                 <h2>Preview</h2>
                 <button class="fullscreen-button no-bg">⛶</button>
-                <button class="close-button no-bg" onclick="closeStickySection('pattern-preview-container')">&times;</button>
+                <button class="close-button no-bg" onclick="closeStickySection('pattern-preview-container')">
+                    <i class="fa-solid fa-xmark"></i>
+                </button>
             </div>
             <div id="pattern-preview">
                 <canvas id="patternPreviewCanvas"></canvas>
@@ -56,8 +67,14 @@
                 <h2>Select Playlist</h2>
                 <select id="select-playlist"></select>
                 <div class="action-buttons">
-                    <button onclick="toggleSecondaryButtons('add-to-playlist-container')" class="cancel">Cancel</button>
-                    <button onclick="saveToPlaylist()" class="cta">Save</button>
+                    <button onclick="toggleSecondaryButtons('add-to-playlist-container')" class="cancel">
+                        <i class="fa-solid fa-xmark"></i>
+                        <span>Cancel</span>
+                    </button>
+                    <button onclick="saveToPlaylist()" class="cta">
+                        <i class="fa-solid fa-floppy-disk"></i>
+                        <span>Save</span>
+                    </button>
                 </div>
             </div>
         </section>
@@ -68,13 +85,21 @@
         <section>
             <div class="header">
                 <h2>Playlists</h2>
-                <button class="cta add-button" onclick="toggleSecondaryButtons('add-playlist-container')">+</button>
+                <button class="cta add-button" onclick="toggleSecondaryButtons('add-playlist-container')">
+                    <i class="fa-solid fa-plus"></i>
+                </button>
             </div>
             <div id="add-playlist-container" class="add-to-container hidden">
                 <input type="text" id="new_playlist_name" placeholder="Enter new playlist name" />
                 <div class="action-buttons">
-                    <button onclick="confirmAddPlaylist()" class="cta">Save</button>
-                    <button onclick="toggleSecondaryButtons('add-playlist-container')" class="cancel">Cancel</button>
+                    <button onclick="confirmAddPlaylist()" class="cta">
+                        <i class="fa-solid fa-floppy-disk"></i>
+                        <span>Save</span>
+                    </button>
+                    <button onclick="toggleSecondaryButtons('add-playlist-container')" class="cancel">
+                        <i class="fa-solid fa-xmark"></i>
+                        <span>Cancel</span>
+                    </button>
                 </div>
             </div>
             <ul id="all_playlists" class="file-list">
@@ -131,7 +156,9 @@
                         <label for="end_time">End time</label>
                         <input type="time" id="end_time" min="00:00" max="24:00">
                     </div>
-                    <button id="clear_time" onclick="clearSchedule()" style="display: none" class="small cancel">Clear</button>
+                    <button id="clear_time" onclick="clearSchedule()" style="display: none" class="small cancel">
+                        <i class="fa-solid fa-delete-left"></i>
+                    </button>
                 </div>
             </div>
         </section>
@@ -140,8 +167,12 @@
         <section id="playlist-editor" class="sticky hidden">
             <div class="header">
                 <h2 id="playlist_title">Playlist: <span id="playlist_name_display"></span></h2>
-                <button class="fullscreen-button no-bg">⛶</button>
-                <button class="close-button no-bg" onclick="closeStickySection('playlist-editor')">&times;</button>
+                <button class="fullscreen-button no-bg">
+                    <i class="fa-solid fa-expand"></i>
+                </button>
+                <button class="close-button no-bg" onclick="closeStickySection('playlist-editor')">
+                    <i class="fa-solid fa-xmark" ></i>
+                </button>
             </div>
             <ul id="playlist_items" class="file-list">
             </ul>
@@ -151,15 +182,27 @@
                 <button onclick="toggleSecondaryButtons('rename-playlist-container')">Rename</button>
                 <button onclick="deleteCurrentPlaylist()" class="cancel">Delete</button>
                 <!-- Save and Cancel buttons -->
-                <button onclick="savePlaylist()" class="save-cancel cta" style="display: none;">Save</button>
-                <button onclick="cancelPlaylistChanges()" class="save-cancel cancel" style="display: none;">Cancel</button>
+                <button onclick="savePlaylist()" class="save-cancel cta" style="display: none;">
+                    <i class="fa-solid fa-floppy-disk"></i>
+                    <span>Save</span>
+                </button>
+                <button onclick="cancelPlaylistChanges()" class="save-cancel cancel" style="display: none;">
+                    <i class="fa-solid fa-xmark"></i>
+                    <span>Cancel</span>
+                </button>
             </div>
             <!-- Playlist Rename Section -->
             <div id="rename-playlist-container" class="hidden">
                 <input type="text" id="playlist_name_input" placeholder="Enter new playlist name">
                 <div class="action-buttons">
-                    <button onclick="confirmRenamePlaylist()" class="cta">Save</button>
-                    <button onclick="toggleSecondaryButtons('rename-playlist-container')" class="cancel">Cancel</button>
+                    <button onclick="confirmRenamePlaylist()" class="cta">
+                        <i class="fa-solid fa-floppy-disk"></i>
+                        <span>Save</span>
+                    </button>
+                    <button onclick="toggleSecondaryButtons('rename-playlist-container')" class="cancel">
+                        <i class="fa-solid fa-xmark"></i>
+                        <span>Cancel</span>
+                    </button>
                 </div>
             </div>
         </section>
@@ -172,7 +215,7 @@
                 <h2>Device Controls</h2>
             </div>
 
-            <div class="action-buttons">
+            <div class="action-buttons square">
                 <div class="dropdown">
                     <button id="clear_button" class="dropdown-button" onclick="executeClearAction()">
                         <span>Clear <span id="clear_action_label">From Center</span></span>
@@ -184,9 +227,9 @@
                         <button class="no-bg" onclick="updateClearAction('Sideways', 'runClearSide')">Clear Sideways</button>
                     </div>
                 </div>
-                <button onclick="moveToCenter()">Move to Center</button>
-                <button onclick="moveToPerimeter()">Move to Perimeter</button>
-                <button onclick="sendHomeCommand()" class="small warn">Home</button>
+                <button onclick="moveToCenter()"><i class="fa-solid fa-circle-dot"></i><span class="small">Move to Center</span></button>
+                <button onclick="moveToPerimeter()"><i class="fa-solid fa-circle-notch"></i><span class="small">Move to Perimeter</span></button>
+                <button onclick="sendHomeCommand()" class="warn"><i class="fa-solid fa-house"></i><span class="small">Home</span></button>
             </div>
             <h3>Send to Coordinate</h3>
             <div class="control-group">
@@ -199,7 +242,9 @@
                     <input type="number" id="rho_input" placeholder="Rho">
                 </div>
                 <div class="item cta">
-                    <button onclick="sendCoordinate()">Send</button>
+                    <button onclick="sendCoordinate()">
+                        <i class="fa-solid fa-map-pin"></i><span>Send</span>
+                    </button>
                 </div>
             </div>
             <h3>Pre-Execution Action</h3>
@@ -217,7 +262,7 @@
                     <input type="number" id="speed_input" placeholder="1-100" min="1" step="1" max="100">
                 </div>
                 <div class="item cta">
-                    <button class="small-button"  onclick="changeSpeed()">Set Speed</button>
+                    <button class="small-button"  onclick="changeSpeed()"><i class="fa-solid fa-gauge-high"></i><span>Set Speed</span></button>
                 </div>
             </div>
         </section>
@@ -230,11 +275,13 @@
             <div id="serial_ports_container">
                 <label for="serial_ports">Available Ports:</label>
                 <select id="serial_ports"></select>
-                <button onclick="connectSerial()" class="cta">Connect</button>
+                <button onclick="connectSerial()" class="cta"><span class="small">Connect</span></button>
             </div>
             <div id="serial_ports_buttons" class="button-group">
-                <button onclick="disconnectSerial()" class="cancel">Disconnect</button>
-                <button onclick="restartSerial()" class="warn">Restart</button>
+                <button onclick="disconnectSerial()" class="cancel">
+                    <i class="fa-solid fa-power-off"></i><span class="small">Disconnect</span></button>
+                <button onclick="restartSerial()" class="warn">
+                    <i class="fa-solid fa-rotate-left"></i><span class="small">Restart</span></button>
             </div>
         </section>
 
@@ -280,16 +327,13 @@
 <nav class="bottom-nav">
     <section id="currently-playing-container" class="sticky">
         <div class="header">
-            <h2>Currently Playing</h2>
-            <button class="open-button no-bg" onclick="openStickySection('currently-playing-container')">^</button>
-<!--            <button class="fullscreen-button no-bg">⛶</button>-->
-<!--            <button class="close-button no-bg" onclick="closeStickySection('currently-playing-container')">×</button>-->
+<!--            <button class="open-button no-bg" onclick="openStickySection('currently-playing-container')">^</button>-->
         </div>
         <div id="currently-playing-preview">
             <canvas id="currentlyPlayingCanvas"></canvas>
         </div>
         <div id="currently-playing-details">
-            <p id="currently-playing-file"></p>
+            <h2 id="currently-playing-file"></h2>
             <p id="currently-playing-position"></p>
         </div>
         <div class="play-buttons">
@@ -310,6 +354,6 @@
     <!-- Messages will be appended here -->
 </div>
 
-<script src="../static/main.js"></script>
+<script src="../static/js/main.js"></script>
 </body>
 </html>