[WIP] GUI improvements

docker-compose.yml

@@ -12,3 +12,19 @@ services:
             - redis
     redis:
         image: redis
+
+    navidrome:
+        image: deluan/navidrome:latest
+#        user: 1000:1000 # should be owner of volumes
+        ports:
+            - "4533:4533"
+        restart: unless-stopped
+        environment:
+            # Optional: put your config options customization here. Examples:
+            ND_SCANSCHEDULE: 1h
+            ND_LOGLEVEL: info
+            ND_SESSIONTIMEOUT: 24h
+#            ND_BASEURL: ""
+        volumes:
+            - "./navidrome:/data:Z"
+            - "/home/stonesoft/Music:/music:ro"

static/css/style.css

@@ -18,6 +18,15 @@ body {
     transform: translate(-50%, -50%) !important;
 }
 
+#disk {
+    width: 66vw;
+    border-radius: 1200px;
+    aspect-ratio: 1 / 1 !important;
+    background-image: url('/static/img/vinyl.png');
+    background-position: center;
+    background-size: cover;
+}
+
 .card {
     box-shadow: 0 0 36px 0px rgba(128,128,128,0.128);
     background-color: white;

templates/base.html

@@ -29,77 +29,77 @@
             <div class="page-content">
                 <div class="container">
                     <div class="row">
-                        <div class="card centered w-75">
+                        <div id="disk" class="card centered">
-                            <!-- LOGO -->
-                            <div class="logo-home mx-auto">
-                                <a id="logo" class="text-black btn-modal" href="#" data-action="main_menu">
-                                    <h1 class="logo-text" style="margin-left: 6px;">
-                                        <i class="la la-compact-disc"></i>Discography
-                                    </h1>
-                                </a>
-                            </div>
 
-                            <div class="text-center mb-2">
+                            <div class="disk-content centered">
-                                <p>Enter an Artist</p>
+                                <!-- LOGO -->
-                            </div>
+                                <div class="logo-home mx-auto">
+                                    <a id="logo" class="text-black btn-modal" href="#" data-action="main_menu">
+                                        <h1 class="logo-text" style="margin-left: 6px;">
+                                            <i class="la la-compact-disc"></i>Discography
+                                        </h1>
+                                    </a>
+                                </div>
 
-                            <!-- Search bar -->
+                                <div class="text-center mb-2">
-                            <div id="search-container">
+                                    <p>Enter an Artist</p>
-                                <div class="input-group mb-3">
-                                    <input id="search_bar" type="text" class="form-control" placeholder=""
-                                           aria-label="Search" aria-describedby="Search"/>
                                 </div>
-                            </div>
 
-                            <t t-if="user">
+                                <!-- Search bar -->
-                                <!-- Quick Action Menu -->
+                                <div id="search-container">
-                                <div id="actions-container-home" class="mt-4">
+                                    <div class="input-group mb-3">
-                        <span>
+                                        <input id="search_bar" type="text" class="form-control" placeholder=""
-                            <a id="download_btn" class="btn btn-outline-secondary action-item-home btn-modal" href="#download"
+                                               aria-label="Search" aria-describedby="Search"/>
-                               data-action="download">
+                                    </div>
-                                <i class="las la-download"></i>
-                                Download
-                            </a>
-                        </span>
                                 </div>
+
+                                <a id="download_btn" class="btn btn-outline-secondary action-item-home btn-modal"
+                                   href="#download"
+                                   data-action="download">
+                                    <i class="las la-download"></i>
+                                    Download
+                                </a>
+                            </div>
+
                         </div>
                     </div>
-
-                    <!--[if IE]>
-                    <div class="position-fixed bottom-0 w-100 p-2 text-bg-dark d-flex justify-content-between"><p>
-                        Outdated
-                        browser
-                        dectected. Please use a modern browser for a better browsing experience.</p>
-                        <button type="button" class="btn-close btn-close-white" onClick="parentNode.remove()"
-                                aria-label="Close"></button>
-                    </div><![endif]-->
-                    <!-- ░░░░░▄▄▄▄▀▀▀▀▀▀▀▀▄▄▄▄▄▄░░░░░░░░ -->
-                    <!-- ░░░░░█░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░▀▀▄░░░░ -->
-                    <!-- ░░░░█░░░▒▒▒▒▒▒░░░░░░░░▒▒▒░░█░░░ -->
-                    <!-- ░░░█░░░░░░▄██▀▄▄░░░░░▄▄▄░░░░█░░ -->
-                    <!-- ░▄▀▒▄▄▄▒░█▀▀▀▀▄▄█░░░██▄▄█░░░░█░ -->
-                    <!-- █░▒█▒▄░▀▄▄▄▀░░░░░░░░█░░░▒▒▒▒▒░█ -->
-                    <!-- █░▒█░█▀▄▄░░░░░█▀░░░░▀▄░░▄▀▀▀▄▒█ -->
-                    <!-- ░█░▀▄░█▄░█▀▄▄░▀░▀▀░▄▄▀░░░░█░░█░ -->
-                    <!-- ░░█░░░▀▄▀█▄▄░█▀▀▀▄▄▄▄▀▀█▀██░█░░ -->
-                    <!-- ░░░█░░░░██░░▀█▄▄▄█▄▄█▄████░█░░░ -->
-                    <!-- ░░░░█░░░░▀▀▄░█░░░█░█▀██████░█░░ -->
-                    <!-- ░░░░░▀▄░░░░░▀▀▄▄▄█▄█▄█▄█▄▀░░█░░ -->
-                    <!-- ░░░░░░░▀▄▄░▒▒▒▒░░░░░░░░░░▒░░░█░ -->
-                    <!-- ░░░░░░░░░░▀▀▄▄░▒▒▒▒▒▒▒▒▒▒░░░░█░ -->
-                    <!-- ░░░░░░░░░░░░░░▀▄▄▄▄▄░░░░░░░▄█░░ -->
-                    <script src="https://code.jquery.com/jquery-3.7.0.min.js" crossorigin="anonymous"></script>
-                    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
-                            crossorigin="anonymous"></script>
-                    <script type="text/javascript">
-                        $(window).on('load', function () {
-                            $("#loader-wrapper").fadeOut(900);
-                        });
-                    </script>
-                    <script src="/static/js/app.js"></script>
                 </div>
+
+                <!--[if IE]>
+                <div class="position-fixed bottom-0 w-100 p-2 text-bg-dark d-flex justify-content-between"><p>
+                    Outdated
+                    browser
+                    dectected. Please use a modern browser for a better browsing experience.</p>
+                    <button type="button" class="btn-close btn-close-white" onClick="parentNode.remove()"
+                            aria-label="Close"></button>
+                </div><![endif]-->
+                <!-- ░░░░░▄▄▄▄▀▀▀▀▀▀▀▀▄▄▄▄▄▄░░░░░░░░ -->
+                <!-- ░░░░░█░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░▀▀▄░░░░ -->
+                <!-- ░░░░█░░░▒▒▒▒▒▒░░░░░░░░▒▒▒░░█░░░ -->
+                <!-- ░░░█░░░░░░▄██▀▄▄░░░░░▄▄▄░░░░█░░ -->
+                <!-- ░▄▀▒▄▄▄▒░█▀▀▀▀▄▄█░░░██▄▄█░░░░█░ -->
+                <!-- █░▒█▒▄░▀▄▄▄▀░░░░░░░░█░░░▒▒▒▒▒░█ -->
+                <!-- █░▒█░█▀▄▄░░░░░█▀░░░░▀▄░░▄▀▀▀▄▒█ -->
+                <!-- ░█░▀▄░█▄░█▀▄▄░▀░▀▀░▄▄▀░░░░█░░█░ -->
+                <!-- ░░█░░░▀▄▀█▄▄░█▀▀▀▄▄▄▄▀▀█▀██░█░░ -->
+                <!-- ░░░█░░░░██░░▀█▄▄▄█▄▄█▄████░█░░░ -->
+                <!-- ░░░░█░░░░▀▀▄░█░░░█░█▀██████░█░░ -->
+                <!-- ░░░░░▀▄░░░░░▀▀▄▄▄█▄█▄█▄█▄▀░░█░░ -->
+                <!-- ░░░░░░░▀▄▄░▒▒▒▒░░░░░░░░░░▒░░░█░ -->
+                <!-- ░░░░░░░░░░▀▀▄▄░▒▒▒▒▒▒▒▒▒▒░░░░█░ -->
+                <!-- ░░░░░░░░░░░░░░▀▄▄▄▄▄░░░░░░░▄█░░ -->
+                <script src="https://code.jquery.com/jquery-3.7.0.min.js" crossorigin="anonymous"></script>
+                <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
+                        crossorigin="anonymous"></script>
+                <script type="text/javascript">
+                    $(window).on('load', function () {
+                        $("#loader-wrapper").fadeOut(900);
+                    });
+                </script>
+                <script src="/static/js/app.js"></script>
             </div>
         </div>
     </div>
+</div>
 </body>
 </html>