diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/index.html | 37 |
1 files changed, 21 insertions, 16 deletions
diff --git a/public/index.html b/public/index.html index fab37f6..a1781a8 100644 --- a/public/index.html +++ b/public/index.html @@ -5,33 +5,36 @@ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <script src="/main.js" defer></script> </head> -<body class="fill-white"> +<body class="bg-black text-white fill-white h-screen max-h-screen flex flex-col m-0 overflow-hidden"> <header></header> <main> - <div id="slideshow" style="display:none"> + <div id="slideshow" class="hidden!"> <div id="slideshow-top-controls"> <div id="slideshow-share"> - <button id="share"><svg alt="Share"><use href="#sprite-share"></use></svg></button> - <button id="download"><svg alt="Download"><use href="#sprite-download"></use></svg></button> + <button id="share" class="svgbtn p-3 size-12"><svg alt="Share" class="size-6"><use href="#sprite-share"></use></svg></button> + <button id="download" class="svgbtn p-3 size-12"><svg alt="Download" class="size-6"><use href="#sprite-download"></use></svg></button> <!-- <button id="hide"><svg alt="Don't Show This Image"><use href="#skip_next"></use></svg></button> --> </div> </div> - <div id="slideshow-carousel"></div> + <div id="slideshow-carousel" class="h-full"></div> <template id="carousel-cell-template"> <div class="carousel-cell"><img src="" /></div> </template> <div id="slideshow-bottom-controls"> - <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> + <button id="prevSlide" class="svgbtn"><svg alt="Previous Slide" class="size-full"><use href="#sprite-skip_previous"></use></svg></button> + <button id="playPause" class="svgbtn"><svg alt="Pause" class="size-full"><use href="#sprite-pause"></use></svg></button> + <button id="nextSlide" class="svgbtn"><svg alt="Next Slide" class="size-full"><use href="#sprite-skip_next"></use></svg></button> </div> </div> - <div id="albums" style="display:none"> + <div id="albums" class="hidden!"> <input class="rounded-2xl" id="album-search" placeholder="Search your albums" /> <div id="albums-container"></div> <template id="album-template"> - <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> + <div class="album group"> + <svg class="opacity-0 self-center size-6 group-hover:opacity-50 + group-data-selected:opacity-100 group-data-selected:fill-blue-300" 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> @@ -42,19 +45,21 @@ </div> </div> </div> - <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> + <a target="_blank" class="opacity-0 group-hover:opacity-100 absolute bottom-4 right-4"> + <svg class="size-6" alt="View album in Immich"><use href="#sprite-open_in_new"></use></svg> + </a> </div> </template> </div> - <div id="settings" style="display:none"> + <div id="settings" class="hidden!"> </div> </main> <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> + <a href="/slideshow"><svg class="size-6"><use href="#sprite-slideshow" ></use></svg><span>Slideshow</span></a> + <a href="/albums" ><svg class="size-6"><use href="#sprite-photo_album"></use></svg><span>Albums</span></a> + <a href="/settings" ><svg class="size-6"><use href="#sprite-settings" ></use></svg><span>Settings</span></a> </div> </div> </footer> |