diff options
| author | Tim Keller <tjk@tjkeller.xyz> | 2025-05-04 23:05:18 -0500 |
|---|---|---|
| committer | Tim Keller <tjk@tjkeller.xyz> | 2025-05-04 23:05:18 -0500 |
| commit | 2e43088aa2db9450a670540cbc899c141f5c1c1a (patch) | |
| tree | 403d5d7113f372b3c2f919975bfabe46e9aa4def /public | |
| parent | 7283da81b5f1f938fa407d6d3f0d5bb56e889b1b (diff) | |
| download | immich-frame-2e43088aa2db9450a670540cbc899c141f5c1c1a.tar.xz immich-frame-2e43088aa2db9450a670540cbc899c141f5c1c1a.zip | |
add share icons, fix html viewport, use postcss in css
Diffstat (limited to 'public')
| -rw-r--r-- | public/index.html | 22 | ||||
| -rw-r--r-- | public/style.css | 79 |
2 files changed, 16 insertions, 85 deletions
diff --git a/public/index.html b/public/index.html index 406122e..4ea10e9 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,8 @@ <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script> <script src="index.js" defer type="module"></script> --> - <link rel="stylesheet" href="/style.css"> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <script src="/main.js" defer></script> </head> <body> @@ -17,6 +18,15 @@ <div id="slideshow" style="display:none"> --> <div id="slideshow"> + <div id="slideshow-top-controls"> + <div id="slideshow-share"> + <button id="share"><svg alt="Share"><use xlink:href="#share"></use></svg></button> + <button id="download"><svg alt="Download"><use xlink:href="#download"></use></svg></button> + <!-- + <button id="hide"><svg alt="Don't Show This Image"><use xlink:href="#skip_next"></use></svg></button> + --> + </div> + </div> <div id="slideshow-carousel"> <div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/tulip.jpg" /></div> <div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/grapes.jpg" /></div> @@ -24,6 +34,11 @@ <div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/wolf.jpg" /></div> <div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/shore.jpg" /></div> </div> + <div id="slideshow-bottom-controls"> + <button id="prevSlide"><svg alt="Previous Slide"><use xlink:href="#skip_previous"></use></svg></button> + <button id="playPause"><svg alt="Pause"><use xlink:href="#pause"></use></svg></button> + <button id="nextSlide"><svg alt="Next Slide"><use xlink:href="#skip_next"></use></svg></button> + </div> </div> <div id="albums" style="display:none"> </div> @@ -32,11 +47,6 @@ </main> <footer> <div id="bottom-container"> - <div id="controls"> - <button id="prevSlide"><svg alt="Previous Slide"><use xlink:href="#skip_previous"></use></svg></button> - <button id="playPause"><svg alt="Pause"><use xlink:href="#pause"></use></svg></button> - <button id="nextSlide"><svg alt="Next Slide"><use xlink:href="#skip_next"></use></svg></button> - </div> <div id="menu"> <a href="/slideshow"><svg alt="Slideshow"><use xlink:href="#slideshow"></use></svg></a> <a href="/albums"> <svg alt="Album Picker"><use xlink:href="#photo_album"></use></svg></a> diff --git a/public/style.css b/public/style.css deleted file mode 100644 index f8c26e2..0000000 --- a/public/style.css +++ /dev/null @@ -1,79 +0,0 @@ -body { - background: black; - color: white; -} - -svg { - fill: white; -} - -.carousel-cell { - height: 70vh; - width: 80vw; - - margin: 10px; - - -} - -.carousel-cell img { - vertical-align: middle; -/* border-radius: 10px; */ - height: 100%; - max-width: 100%; - object-fit: contain; -} - - -@media (max-width: 768px) { - .carousel-cell { - height: 100vh; - } -} - - -footer { - position: fixed; - bottom: 0; - width: 100%; -} - -#bottom-container { - max-width: 1024px; - margin: auto; -} - -#controls, #menu { - display: flex; -} -#menu { - width: 100%; -} - -#controls { - width: 80%; - margin: auto; - padding-bottom: 48px; -} - -footer a, footer button { - width: 100%; -} - -footer svg { - height: 48px; - width: 100%; - -} - -#controls button { - background: none; - border: none; - padding: 0; -} - -#menu { - padding: 16px; - box-sizing: border-box; - border-top: 1px solid rgb(55, 65, 81); -} |