You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
4.7 KiB
HTML
118 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1920, height=1080">
|
|
<title>TomorrowLAN Quad Stream Overlay - Gap Wave</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
font-family: 'Segoe UI', 'Arial', sans-serif;
|
|
}
|
|
|
|
.background {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 1920px; height: 1080px;
|
|
background: url('bg.png') center center / cover no-repeat;
|
|
z-index: 0;
|
|
clip-path: path(evenodd, "M0,0 H1920 V1080 H0Z M23,91 H787 Q795,91 795,99 V522 Q795,530 787,530 H23 Q15,530 15,522 V99 Q15,91 23,91Z M1133,91 H1897 Q1905,91 1905,99 V522 Q1905,530 1897,530 H1133 Q1125,530 1125,522 V99 Q1125,91 1133,91Z M23,626 H787 Q795,626 795,634 V1057 Q795,1065 787,1065 H23 Q15,1065 15,1057 V634 Q15,626 23,626Z M1133,626 H1897 Q1905,626 1905,634 V1057 Q1905,1065 1897,1065 H1133 Q1125,1065 1125,1057 V634 Q1125,626 1133,626Z");
|
|
}
|
|
|
|
.grid {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 1920px; height: 1080px;
|
|
display: grid;
|
|
grid-template-columns: 780px 780px;
|
|
grid-template-rows: 439px 439px;
|
|
gap: 96px 330px;
|
|
padding: 91px 15px 15px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.panel {
|
|
position: relative;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
}
|
|
|
|
.border-svg {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
overflow: visible;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<svg style="position:absolute;width:0;height:0">
|
|
<defs>
|
|
<filter id="glow-dim" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="4" result="blur"/>
|
|
<feMerge>
|
|
<feMergeNode in="blur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="glow-bright" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="10" result="blur"/>
|
|
<feMerge>
|
|
<feMergeNode in="blur"/>
|
|
<feMergeNode in="blur"/>
|
|
<feMergeNode in="blur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
|
|
<div class="background"></div>
|
|
|
|
<!-- Wave: panels light up one after another in sequence 1→2→3→4→1... -->
|
|
<div class="grid">
|
|
<div class="panel">
|
|
<svg class="border-svg" viewBox="0 0 780 439">
|
|
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
|
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
|
<animate attributeName="stroke-opacity" values="0;0;1;1;0;0;0;0;0" dur="12s" repeatCount="indefinite"/>
|
|
<animate attributeName="stroke-width" values="1;1;4;4;1;1;1;1;1" dur="12s" repeatCount="indefinite"/>
|
|
</rect>
|
|
</svg>
|
|
</div>
|
|
<div class="panel">
|
|
<svg class="border-svg" viewBox="0 0 780 439">
|
|
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
|
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
|
<animate attributeName="stroke-opacity" values="0;0;0;0;1;1;0;0;0" dur="12s" repeatCount="indefinite"/>
|
|
<animate attributeName="stroke-width" values="1;1;1;1;4;4;1;1;1" dur="12s" repeatCount="indefinite"/>
|
|
</rect>
|
|
</svg>
|
|
</div>
|
|
<div class="panel">
|
|
<svg class="border-svg" viewBox="0 0 780 439">
|
|
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
|
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
|
<animate attributeName="stroke-opacity" values="0;0;0;0;0;0;1;1;0" dur="12s" repeatCount="indefinite"/>
|
|
<animate attributeName="stroke-width" values="1;1;1;1;1;1;4;4;1" dur="12s" repeatCount="indefinite"/>
|
|
</rect>
|
|
</svg>
|
|
</div>
|
|
<div class="panel">
|
|
<svg class="border-svg" viewBox="0 0 780 439">
|
|
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#00d4ff" stroke-width="2" filter="url(#glow-dim)"/>
|
|
<rect x="1" y="1" width="778" height="437" rx="7" fill="none" stroke="#80eaff" stroke-width="3" filter="url(#glow-bright)">
|
|
<animate attributeName="stroke-opacity" values="1;0;0;0;0;0;0;0;1" dur="12s" repeatCount="indefinite"/>
|
|
<animate attributeName="stroke-width" values="4;1;1;1;1;1;1;1;4" dur="12s" repeatCount="indefinite"/>
|
|
</rect>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|