aviary-ps/index.html

221 lines
3.5 KiB
HTML

<!Doctype HTML>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background: #201b27;
color: white;
font-family: sans-serif;
}
h1 {
margin-top: 90px;
margin-bottom: 40px;
text-align: center;
}
p {
margin: 0 10%;
}
#thumbnails {
margin: 30px 10px;
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}
.control {
background-color: transparent;
color: white;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
}
.thumbnail-card {
height: 400px;
width: 400px;
}
.blurhash-frame {
background-size: cover;
display: grid;
align-items: center;
justify-content: center;
}
.thumbnail-card span {
max-width: 300px;
max-height: 300px;
text-align: center;
color: black;
background-color: rgba(255, 255, 255, 30%);
border: 5px solid rgba(255, 255, 255, 15%);
background-clip: padding-box;
padding: 25px 20px;
}
.thumbnail-card img {
height: 400px;
width: 400px;
}
#focused-panel {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: grid;
justify-items: center;
align-items: center;
box-sizing: border-box;
overflow: auto;
}
#focused-bg {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 60%);
height: 100%;
width: 100%;
z-index: -2;
}
#focused-controls {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
#prev-image, #next-image {
z-index: -1;
position: fixed;
height: fit-content;
font-size: 90px;
top: 0;
bottom: 0;
margin: auto 0;
}
#prev-image {
left: 10vw;
}
#next-image {
right: 10vw;
position: fixed;
}
#close {
position: absolute;
font-size: 50px;
top: 5px;
right: 40px;
}
#focused-panel.unzoomed > div.blurhash-frame {
max-height: 80vh;
max-width: 60vw;
}
#focused-panel.unzoomed > div > img {
max-height: 80vh;
max-width: 60vw;
cursor: zoom-in;
}
#focused-panel.zoomed > div > img {
cursor: zoom-out;
padding: 50px;
}
#spinner {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#loader-text {
position: absolute;
width: fit-content;
height: fit-content;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto auto;
text-align: center;
font-size: 31px;
}
.uh-oh-stinky {
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
}
.uh-oh-stinky > p {
max-width: 50vw;
text-align: center;
}
/* Yoinked from https://codepen.io/AdamDipinto/pen/eYOaGvY
with modifications */
.loader {
position: relative;
width: 350px;
height: 350px;
border-radius: 50%;
background: linear-gradient(#ff52bf, #f1f1f1, #1ed3ec);
animation: animate 1.2s linear infinite;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader span {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(#ff52bf, #f1f1f1, #1ed3ec);
}
.loader span:nth-child(1) {
filter: blur(5px);
}
.loader span:nth-child(2) {
filter: blur(10px);
}
.loader span:nth-child(3) {
filter: blur(25px);
}
.loader span:nth-child(4) {
filter: blur(50px);
}
.loader:after {
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: #201b27;
border-radius: 50%;
}
</style>
<script src="/index.js"></script>
<script src="https://unpkg.com/rescript-blurhash@0.4.0/dist/production.min.js"></script>
</head>
<body>
<div id="spinner">
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="loader-text">Downloading<br/>Gallery...</div>
</div>
</body>
</html>