Mostly audio stuff
This commit is contained in:
Dan
parent
bdd00ec9e8
commit
2f5f4dbea4
28 changed files with 811 additions and 710 deletions
|
|
@ -25,308 +25,13 @@
|
|||
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;
|
||||
}
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
</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>
|
||||
<div class="basement-wall">Coming soon...</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue