lib.itmens/common/templates/503.html

217 lines
17 KiB
HTML
Raw Normal View History

2025-02-06 19:17:53 +00:00
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
<!DOCTYPE html>
2025-02-06 19:17:53 +00:00
<html lang="{{ LANGUAGE_CODE }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2024-05-19 16:32:59 -04:00
<title>☃ NeoDB is being renovated...</title>
</head>
<body>
<div class="pl">
<div class="pl__outer-ring"></div>
<div class="pl__inner-ring">
2024-05-19 16:32:59 -04:00
<center>NeoDB is being renovated...</center>
</div>
<div class="pl__track-cover"></div>
<div class="pl__ball">
<div class="pl__ball-texture"></div>
<div class="pl__ball-outer-shadow"></div>
<div class="pl__ball-inner-shadow"></div>
<div class="pl__ball-side-shadows"></div>
</div>
</div>
<style>
2023-01-07 12:00:09 -05:00
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
background-color: hsl(223, 90%, 95%);
font: 1em/1.5 sans-serif;
height: 100vh;
display: grid;
place-items: center;
}
center {
text-shadow: 0 25px 13px #fff, 0 2px 8px #eee, 0 2px 20px #ddd;
color: #666;
font-size: 1.2em;
font-family: sans-serif;
}
.pl,
.pl__ball,
.pl__ball-inner-shadow,
.pl__ball-side-shadows,
.pl__ball-texture,
.pl__inner-ring,
.pl__outer-ring,
.pl__track-cover {
border-radius: 50%;
}
.pl {
position: relative;
width: 16em;
height: 16em;
}
.pl__ball,
.pl__ball-inner-shadow,
.pl__ball-outer-shadow,
.pl__ball-side-shadows,
.pl__ball-texture,
.pl__ball-texture:before,
.pl__inner-ring,
.pl__outer-ring,
.pl__track-cover {
position: absolute;
}
.pl__ball,
.pl__ball-inner-shadow,
.pl__ball-outer-shadow,
.pl__ball-texture:before,
.pl__track-cover {
animation: ball 12s linear infinite;
}
.pl__ball {
top: calc(50% - 1.25em);
left: calc(50% - 1.25em);
transform: rotate(0) translateY(-6.5em);
width: 2.5em;
height: 2.5em;
}
.pl__ball-inner-shadow {
animation-name: ballInnerShadow;
box-shadow:
0 0.1em 0.2em hsla(0, 0%, 0%, 0.3),
0 0 0.2em hsla(0, 0%, 0%, 0.1) inset,
0 -1em 0.5em hsla(0, 0%, 0%, 0.15) inset;
width: 100%;
height: 100%;
}
.pl__ball-outer-shadow {
animation-name: ballOuterShadow;
background-image: linear-gradient(hsla(0, 0%, 0%, 0.15),hsla(0, 0%, 0%, 0));
border-radius: 0 0 50% 50% / 0 0 100% 100%;
filter: blur(2px);
top: 50%;
left: 0;
width: 100%;
height: 250%;
transform: rotate(20deg);
transform-origin: 50% 0;
z-index: -2;
}
.pl__ball-side-shadows {
background-color: hsla(0, 0%, 0%, 0.1);
filter: blur(2px);
width: 100%;
height: 100%;
transform: scale(0.75,1.1);
z-index: -1;
}
.pl__ball-texture {
overflow: hidden;
width: 100%;
height: 100%;
transform: translate3d(0,0,0);
}
.pl__ball-texture:before {
animation-name: ballTexture;
animation-duration: 1.5s;
background: url(data:image/jpeg;base64,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
content: "";
display: block;
filter: brightness(1.05);
top: 0;
right: 0;
width: 200%;
height: 100%;
}
.pl__inner-ring {
box-shadow:
0 -0.25em 0.5em hsla(0, 0%, 100%, 0.4),
0 0.5em 0.75em hsla(0, 0%, 100%, 0.4) inset,
0 0.5em 0.375em hsla(0, 0%, 0%, 0.15),
0 -0.5em 0.75em hsla(0, 0%, 0%, 0.15) inset;
top: 2.375em;
left: 2.375em;
width: calc(100% - 4.75em);
height: calc(100% - 4.75em);
}
.pl__outer-ring {
box-shadow:
0 -0.45em 0.375em hsla(0, 0%, 0%, 0.15),
0 0.5em 0.75em hsla(0, 0%, 0%, 0.15) inset,
0 0.25em 0.5em hsla(0, 0%, 100%, 0.4),
0 -0.5em 0.75em hsla(0, 0%, 100%, 0.4) inset;
top: 0.75em;
left: 0.75em;
width: calc(100% - 1.5em);
height: calc(100% - 1.5em);
}
.pl__track-cover {
animation-name: trackCover;
background-image: conic-gradient(hsla(223, 90%, 95%, 1) 210deg, hsla(223, 90%, 95%, 0) 270deg);
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
}
/* Animations */
@keyframes ball {
from {
transform: rotate(0) translateY(-6.5em);
}
50% {
transform: rotate(180deg) translateY(-6em);
}
to {
transform: rotate(360deg) translateY(-6.5em);
}
}
@keyframes ballInnerShadow {
from {
transform: rotate(0);
}
to {
transform: rotate(-360deg);
}
}
@keyframes ballOuterShadow {
from {
transform: rotate(20deg);
}
to {
transform: rotate(-340deg);
}
}
@keyframes ballTexture {
from {
transform: translateX(0);
}
to {
transform: translateX(50%);
}
}
@keyframes trackCover {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
</style>
<!-- CSS from https://jonkantner.com -->
</body>
</html>