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.
109 lines
4.1 KiB
HTML
109 lines
4.1 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 - Breathe</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,15 H942 Q950,15 950,23 V522 Q950,530 942,530 H23 Q15,530 15,522 V23 Q15,15 23,15Z M978,15 H1897 Q1905,15 1905,23 V522 Q1905,530 1897,530 H978 Q970,530 970,522 V23 Q970,15 978,15Z M23,550 H942 Q950,550 950,558 V1057 Q950,1065 942,1065 H23 Q15,1065 15,1057 V558 Q15,550 23,550Z M978,550 H1897 Q1905,550 1905,558 V1057 Q1905,1065 1897,1065 H978 Q970,1065 970,1057 V558 Q970,550 978,550Z");
|
|
}
|
|
|
|
.grid {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 1920px; height: 1080px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
gap: 20px;
|
|
padding: 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" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="6" result="blur"/>
|
|
<feMerge>
|
|
<feMergeNode in="blur"/>
|
|
<feMergeNode in="blur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
|
|
<div class="background"></div>
|
|
|
|
<div class="grid">
|
|
<div class="panel">
|
|
<svg class="border-svg" viewBox="0 0 935 515">
|
|
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
|
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
|
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" repeatCount="indefinite"/>
|
|
<animate attributeName="stroke-width" values="1;3;1" dur="8s" repeatCount="indefinite"/>
|
|
</rect>
|
|
</svg>
|
|
</div>
|
|
<div class="panel">
|
|
<svg class="border-svg" viewBox="0 0 935 515">
|
|
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
|
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
|
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" begin="-2s" repeatCount="indefinite"/>
|
|
<animate attributeName="stroke-width" values="1;3;1" dur="8s" begin="-2s" repeatCount="indefinite"/>
|
|
</rect>
|
|
</svg>
|
|
</div>
|
|
<div class="panel">
|
|
<svg class="border-svg" viewBox="0 0 935 515">
|
|
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
|
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
|
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" begin="-4s" repeatCount="indefinite"/>
|
|
<animate attributeName="stroke-width" values="1;3;1" dur="8s" begin="-4s" repeatCount="indefinite"/>
|
|
</rect>
|
|
</svg>
|
|
</div>
|
|
<div class="panel">
|
|
<svg class="border-svg" viewBox="0 0 935 515">
|
|
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#00d4ff" stroke-width="2"/>
|
|
<rect x="1" y="1" width="933" height="513" rx="7" fill="none" stroke="#80eaff" stroke-width="2" filter="url(#glow)">
|
|
<animate attributeName="stroke-opacity" values="0.2;1;0.2" dur="8s" begin="-6s" repeatCount="indefinite"/>
|
|
<animate attributeName="stroke-width" values="1;3;1" dur="8s" begin="-6s" repeatCount="indefinite"/>
|
|
</rect>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|