222 lines
4.0 KiB
HTML
222 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Under Construction</title>
|
|
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background:
|
|
radial-gradient(circle at top, #34204f 0%, #16111d 40%, #080808 100%);
|
|
color: #f6f2e8;
|
|
font-family:
|
|
"Palatino Linotype",
|
|
"Book Antiqua",
|
|
Georgia,
|
|
serif;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(circle at center,
|
|
rgba(120, 80, 255, 0.15),
|
|
transparent 70%);
|
|
animation: shimmer 8s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
z-index: 2;
|
|
text-align: center;
|
|
max-width: 900px;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.flavor {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.35rem;
|
|
font-size: 0.9rem;
|
|
color: #d6c8a7;
|
|
margin-bottom: 2rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font-size: clamp(2.5rem, 7vw, 5.5rem);
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
text-shadow:
|
|
0 0 12px rgba(255,255,255,0.2),
|
|
0 0 40px rgba(138, 92, 255, 0.25);
|
|
}
|
|
|
|
.subtitle {
|
|
margin-top: 2rem;
|
|
font-size: clamp(1rem, 2vw, 1.35rem);
|
|
line-height: 1.7;
|
|
color: #cfc6b8;
|
|
}
|
|
|
|
.subtitle strong {
|
|
color: white;
|
|
}
|
|
|
|
.mana-ring {
|
|
position: absolute;
|
|
width: 520px;
|
|
height: 520px;
|
|
animation: orbit 40s linear infinite;
|
|
pointer-events: none;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.mana {
|
|
position: absolute;
|
|
width: 70px;
|
|
height: 70px;
|
|
animation: pulse 3s ease-in-out infinite;
|
|
filter:
|
|
drop-shadow(0 0 12px rgba(255,255,255,0.25));
|
|
}
|
|
|
|
.w { top: 0; left: 50%; transform: translateX(-50%); }
|
|
.u { top: 23%; right: 0; }
|
|
.b { bottom: 10%; right: 15%; }
|
|
.r { bottom: 10%; left: 15%; }
|
|
.g { top: 23%; left: 0; }
|
|
|
|
.spark {
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 3px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.9);
|
|
animation: float 8s linear infinite;
|
|
}
|
|
|
|
.spark:nth-child(1) {
|
|
top: 15%;
|
|
left: 20%;
|
|
animation-duration: 12s;
|
|
}
|
|
|
|
.spark:nth-child(2) {
|
|
top: 80%;
|
|
left: 25%;
|
|
animation-duration: 9s;
|
|
}
|
|
|
|
.spark:nth-child(3) {
|
|
top: 70%;
|
|
left: 80%;
|
|
animation-duration: 15s;
|
|
}
|
|
|
|
.spark:nth-child(4) {
|
|
top: 25%;
|
|
left: 85%;
|
|
animation-duration: 10s;
|
|
}
|
|
|
|
.spark:nth-child(5) {
|
|
top: 50%;
|
|
left: 10%;
|
|
animation-duration: 14s;
|
|
}
|
|
|
|
@keyframes orbit {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%,100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.15);
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
from {
|
|
opacity: 0.3;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
from {
|
|
transform: translateY(0);
|
|
opacity: 0;
|
|
}
|
|
20% {
|
|
opacity: 1;
|
|
}
|
|
80% {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: translateY(-120px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="spark"></div>
|
|
<div class="spark"></div>
|
|
<div class="spark"></div>
|
|
<div class="spark"></div>
|
|
<div class="spark"></div>
|
|
|
|
<div class="mana-ring">
|
|
<img class="mana w" src="assets/mana/W.svg" alt="White Mana">
|
|
<img class="mana u" src="assets/mana/U.svg" alt="Blue Mana">
|
|
<img class="mana b" src="assets/mana/B.svg" alt="Black Mana">
|
|
<img class="mana r" src="assets/mana/R.svg" alt="Red Mana">
|
|
<img class="mana g" src="assets/mana/G.svg" alt="Green Mana">
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="flavor">
|
|
This spell has yet to resolve
|
|
</div>
|
|
|
|
<h1>
|
|
Magic is being woven into reality
|
|
</h1>
|
|
|
|
<div class="subtitle">
|
|
A new gathering place for every
|
|
<strong>Planeswalker</strong>
|
|
is currently coalescing between the planes.
|
|
Please stand by while the mana settles.
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|