diff options
Diffstat (limited to 'public/index.html')
| -rw-r--r-- | public/index.html | 34 |
1 files changed, 17 insertions, 17 deletions
diff --git a/public/index.html b/public/index.html index df128f2..fab37f6 100644 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <script src="/main.js" defer></script> </head> -<body> +<body class="fill-white"> <header></header> <main> <div id="slideshow" style="display:none"> @@ -21,40 +21,40 @@ <div class="carousel-cell"><img src="" /></div> </template> <div id="slideshow-bottom-controls"> - <button id="prevSlide"><svg alt="Previous Slide"><use href="#sprite-skip_previous"></use></svg></button> - <button id="playPause"><svg alt="Pause"><use href="#sprite-pause"></use></svg></button> - <button id="nextSlide"><svg alt="Next Slide"><use href="#sprite-skip_next"></use></svg></button> + <button id="prevSlide"><svg alt="Previous Slide" class="size-full"><use href="#sprite-skip_previous"></use></svg></button> + <button id="playPause"><svg alt="Pause" class="size-full"><use href="#sprite-pause"></use></svg></button> + <button id="nextSlide"><svg alt="Next Slide" class="size-full"><use href="#sprite-skip_next"></use></svg></button> </div> </div> <div id="albums" style="display:none"> - <input id="album-search" placeholder="Search your albums" /> + <input class="rounded-2xl" id="album-search" placeholder="Search your albums" /> <div id="albums-container"></div> <template id="album-template"> - <div class="album"> - <svg class="album-selector p24" alt="Select Album"><use href="#sprite-check_circle"></use></svg> - <img class="album-thumb hover:invert" /> - <div class="album-desc-grid"> + <div class="album group border border-blue-950 cursor-pointer data-selected:bg-slate-950 data-selected:hover:bg-slate-900 hover:bg-gray-900"> + <svg class="opacity-0 group-hover:opacity-50 group-data-selected:opacity-100 group-data-selected:fill-blue-300 self-center size-6" alt="Select Album"><use href="#sprite-check_circle"></use></svg> + <img class="aspect-square object-cover rounded-2xl group-hover:shadow-md" /> + <div class="flex justify-between self-center text-lg"> <div> - <span class="album-name font-bold"></span> + <span class="album-name font-bold group-hover:text-blue-300"></span> <div class="album-info"> <span><span class="album-assets-count"></span> items</span> <span class="album-shared">• Shared</span> </div> </div> </div> - <svg class="album-open p24" alt="View album in Immich"><use href="#sprite-open_in_new"></use></svg> + <svg class="opacity-0 group-hover:opacity-100 absolute bottom-4 right-4 size-6" alt="View album in Immich"><use href="#sprite-open_in_new"></use></svg> </div> </template> </div> <div id="settings" style="display:none"> </div> </main> - <footer> - <div id="bottom-container"> - <div id="menu"> - <a href="/slideshow"><svg><use href="#sprite-slideshow"></use></svg><span>Slideshow</span></a> - <a href="/albums"> <svg><use href="#sprite-photo_album"></use></svg><span>Albums</span></a> - <a href="/settings"> <svg><use href="#sprite-settings"></use></svg><span>Settings</span></a> + <footer class="w-full"> + <div class="max-w-5xl m-auto"> + <div id="menu" class="flex w-full p-4 gap-4 box-border border-t border-gray-500"> + <a href="/slideshow" class="hover:text-blue-300 hover:fill-blue-300"><svg class="size-6"><use href="#sprite-slideshow"></use></svg><span>Slideshow</span></a> + <a href="/albums" class="hover:text-blue-300 hover:fill-blue-300"><svg class="size-6"><use href="#sprite-photo_album"></use></svg><span>Albums</span></a> + <a href="/settings" class="hover:text-blue-300 hover:fill-blue-300"><svg class="size-6"><use href="#sprite-settings"></use></svg><span>Settings</span></a> </div> </div> </footer> |