332 lines
8.5 KiB
HTML
332 lines
8.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Basement Window</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
|
|
font-family: "Courier New", monospace;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.basement-wall {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
|
|
box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8);
|
|
position: relative;
|
|
}
|
|
|
|
.window-frame {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 16/9;
|
|
background: #3a3a3a;
|
|
border: 20px solid #2a2520;
|
|
box-shadow:
|
|
inset 0 0 20px rgba(0, 0, 0, 0.8),
|
|
0 10px 40px rgba(0, 0, 0, 0.9);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.window-frame::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -20px;
|
|
border: 5px solid #1a1510;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Cityscape view */
|
|
.cityscape {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
background: linear-gradient(
|
|
180deg,
|
|
#1a2332 0%,
|
|
#2a3a52 30%,
|
|
#4a5a72 60%,
|
|
#6a7a92 100%
|
|
);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Sky with slight gradient */
|
|
.sky {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 40%;
|
|
background: linear-gradient(
|
|
180deg,
|
|
#0a0f1a 0%,
|
|
#1a2a3a 50%,
|
|
#2a3a52 100%
|
|
);
|
|
}
|
|
|
|
/* Buildings container */
|
|
.buildings {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 60%;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-around;
|
|
gap: 20px;
|
|
padding: 0 40px;
|
|
}
|
|
|
|
.building {
|
|
position: relative;
|
|
background: linear-gradient(180deg, #1a1a2e 0%, #0a0a1e 100%);
|
|
box-shadow:
|
|
inset -2px 0 10px rgba(0, 0, 0, 0.5),
|
|
0 0 20px rgba(255, 200, 100, 0.1);
|
|
animation: buildingGlow 4s ease-in-out infinite;
|
|
}
|
|
|
|
.building:nth-child(1) {
|
|
width: 80px;
|
|
height: 280px;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.building:nth-child(2) {
|
|
width: 60px;
|
|
height: 200px;
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
.building:nth-child(3) {
|
|
width: 90px;
|
|
height: 320px;
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.building:nth-child(4) {
|
|
width: 70px;
|
|
height: 240px;
|
|
animation-delay: 1.5s;
|
|
}
|
|
|
|
.building:nth-child(5) {
|
|
width: 85px;
|
|
height: 300px;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
/* Building windows */
|
|
.building-windows {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
padding: 15px 10px;
|
|
height: 100%;
|
|
}
|
|
|
|
.window-light {
|
|
background: #ffd700;
|
|
opacity: 0;
|
|
box-shadow: 0 0 10px #ffd700;
|
|
animation: windowFlicker 3s ease-in-out infinite;
|
|
}
|
|
|
|
.window-light:nth-child(odd) {
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
.window-light:nth-child(3n) {
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.window-light:nth-child(4n) {
|
|
animation-delay: 1.5s;
|
|
}
|
|
|
|
@keyframes windowFlicker {
|
|
0%,
|
|
100% {
|
|
opacity: 0.3;
|
|
}
|
|
50% {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
@keyframes buildingGlow {
|
|
0%,
|
|
100% {
|
|
box-shadow:
|
|
inset -2px 0 10px rgba(0, 0, 0, 0.5),
|
|
0 0 20px rgba(255, 200, 100, 0.1);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
inset -2px 0 10px rgba(0, 0, 0, 0.5),
|
|
0 0 30px rgba(255, 200, 100, 0.2);
|
|
}
|
|
}
|
|
|
|
/* Dirt and grime on window */
|
|
.window-grime {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(
|
|
circle at 20% 30%,
|
|
rgba(50, 40, 30, 0.2) 0%,
|
|
transparent 40%
|
|
),
|
|
radial-gradient(
|
|
circle at 80% 60%,
|
|
rgba(40, 35, 25, 0.15) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
circle at 50% 80%,
|
|
rgba(45, 38, 28, 0.18) 0%,
|
|
transparent 45%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 6;
|
|
}
|
|
|
|
/* Glass reflection */
|
|
.glass-reflection {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(255, 255, 255, 0.1) 0%,
|
|
transparent 30%,
|
|
transparent 70%,
|
|
rgba(255, 255, 255, 0.05) 100%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 7;
|
|
}
|
|
|
|
/* Ambient light from city */
|
|
.ambient-light {
|
|
position: absolute;
|
|
bottom: -50px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 200%;
|
|
height: 200px;
|
|
background: radial-gradient(
|
|
ellipse at center,
|
|
rgba(255, 200, 100, 0.2) 0%,
|
|
transparent 70%
|
|
);
|
|
filter: blur(40px);
|
|
animation: ambientPulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes ambientPulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.5;
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="basement-wall">
|
|
<div class="window-frame">
|
|
<!-- Cityscape -->
|
|
<div class="cityscape">
|
|
<div class="sky"></div>
|
|
<div class="buildings">
|
|
<div class="building">
|
|
<div class="building-windows">
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
</div>
|
|
</div>
|
|
<div class="building">
|
|
<div class="building-windows">
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
</div>
|
|
</div>
|
|
<div class="building">
|
|
<div class="building-windows">
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
</div>
|
|
</div>
|
|
<div class="building">
|
|
<div class="building-windows">
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
</div>
|
|
</div>
|
|
<div class="building">
|
|
<div class="building-windows">
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
<div class="window-light"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ambient-light"></div>
|
|
</div>
|
|
|
|
<!-- Window effects -->
|
|
<div class="window-grime"></div>
|
|
<div class="glass-reflection"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|