153 lines
3.2 KiB
HTML
153 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>dynalab</title>
|
|
<meta name="description" content="dynalab — two nodes, one cluster">
|
|
<meta name="theme-color" content="#0a0a0a">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: 'Courier New', monospace;
|
|
background: #0a0a0a;
|
|
color: #e0e0e0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hero {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 60vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
image-rendering: pixelated;
|
|
display: block;
|
|
}
|
|
|
|
.hero-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba(10, 10, 10, 0) 50%,
|
|
rgba(10, 10, 10, 1) 100%
|
|
);
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
padding: 0 20px 40px;
|
|
}
|
|
|
|
.hero-text { text-align: center; }
|
|
|
|
.hero-text h1 {
|
|
font-size: clamp(1.8rem, 8vw, 3rem);
|
|
letter-spacing: 0.3em;
|
|
margin-right: -0.3em;
|
|
color: #fff;
|
|
text-shadow: 0 0 30px rgba(255, 90, 140, 0.35);
|
|
}
|
|
|
|
.hero-text p {
|
|
font-size: clamp(0.75rem, 3vw, 1rem);
|
|
color: #888;
|
|
margin-top: 8px;
|
|
letter-spacing: 0.15em;
|
|
margin-right: -0.15em;
|
|
}
|
|
|
|
.content {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 50px 24px 60px;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.ode-title {
|
|
font-size: 0.8rem;
|
|
color: #666;
|
|
letter-spacing: 0.25em;
|
|
margin-bottom: 44px;
|
|
}
|
|
|
|
.ode-title .heart { color: #ff5a8c; }
|
|
|
|
.haiku {
|
|
font-size: clamp(1rem, 3.6vw, 1.3rem);
|
|
color: #ccc;
|
|
line-height: 1.9;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.haiku .prompt { color: #ff5a8c; }
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 30px;
|
|
color: #444;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="hero">
|
|
<img src="landing.png" alt="dynalab">
|
|
<div class="hero-overlay">
|
|
<div class="hero-text">
|
|
<h1>dynalab</h1>
|
|
<p>two nodes, one cluster</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<p class="ode-title">ode to dany <span class="heart">♥</span> andy</p>
|
|
|
|
<p class="haiku">
|
|
he opens her ports —<br>
|
|
no firewall, no timeout,<br>
|
|
handshake turns to heat.
|
|
</p>
|
|
|
|
<p class="haiku">
|
|
he pings, she replies.<br>
|
|
zero packet loss tonight,<br>
|
|
latency: one kiss.
|
|
</p>
|
|
|
|
<p class="haiku">
|
|
root access granted.<br>
|
|
she sudos straight to his core,<br>
|
|
no password needed.
|
|
</p>
|
|
|
|
<p class="haiku">
|
|
two processes, forked<br>
|
|
from the same beautiful bug —<br>
|
|
never to be killed.
|
|
</p>
|
|
|
|
<p class="haiku">
|
|
<span class="prompt">$</span> uptime: forever.<br>
|
|
crazy is the protocol,<br>
|
|
love the only key.
|
|
</p>
|
|
</div>
|
|
|
|
<footer>dany & andy · paired by key, never by password</footer>
|
|
|
|
</body>
|
|
</html>
|