[ADD]Webpages for OBS browser source

N15RA · Nov 14, 2023 · 794e6ac · 794e6ac
1 parent 4c6f3a6
commit 794e6ac
Show file tree

Hide file tree

Showing 2 changed files with 161 additions and 0 deletions.
diff --git a/title.html b/title.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            * {
+                background: #2A2E31;
+                color: #E7FF6E;
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            }
+            body {
+                margin: 0;
+                width: 100%;
+                height: 100%;
+            }
+            footer {
+                position: absolute;
+                right: 3vw;
+                top: 85vh;
+                text-align: right;
+            }
+            #title {
+                position: absolute;
+                left: 5vw;
+                top: 30vh;
+                width: 90vw;
+                height: max-content;
+                font-size: 9em;
+                overflow-wrap: break-word;
+            }
+            #nisra {
+                display: inline-flex;
+                align-items: center;
+                font-size: 3em;
+                font-weight: bold;
+                margin-bottom: 1vh;
+            }
+            #loader {
+                border: 0.5rem solid #E7FF6E;
+                border-top: 0.5rem solid #E7FF6E00;
+                border-radius: 50%;
+                margin-right: 1rem;
+                width: 2rem;
+                height: 2rem;
+                animation: spin 2s linear infinite;
+            }
+            #loadernote {
+                font-size: 1.5em;
+            }
+
+            @keyframes spin {
+                0% { transform: rotate(0deg); }
+                100% { transform: rotate(360deg); }
+            }
+        </style>
+        <script>
+            window.onload = function(){
+                var openingParam = new URL(window.location.href).searchParams.get("opening");
+                var loadernoteParam = new URL(window.location.href).searchParams.get("loadernote");
+
+                document.getElementById("title").innerText = new URL(window.location.href).searchParams.get("title");
+                document.getElementById("loader").style.display = (function(){
+                    if (openingParam == "true") return "";
+                    else return "none";
+                })();
+                document.getElementById("loadernote").innerText = (function(){
+                    if (loadernoteParam != undefined) return loadernoteParam;
+                    else if (openingParam == 'true') return "如果甜甜圈卡住請告知我們 <(_ _)>";
+                    else return "";
+                })();
+            }
+        </script>
+    </head>
+    <body>
+        <div id="title">titleNotFound</div>
+    </body>
+    <footer>
+        <div id="nisra">
+            <div id="loader"></div>
+            #N15RA
+        </div>
+
+        <div id="loadernote"></div>
+    </footer>
+</html>
diff --git a/video.html b/video.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            * {
+                color: #E7FF6E;
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            }
+            body {
+                margin: 0;
+                width: 100%;
+                height: 100%;
+            }
+            #title {
+                position: absolute;
+                left: 3vw;
+                bottom: 88vh;
+                width: 90vw;
+                height: 8vh;
+                font-size: 5em;
+                overflow-wrap: break-word;
+            }
+            #video {
+                position: absolute;
+                left: 3vw;
+                bottom: 3vw;
+                width: 78vw;
+                height: 78vh;
+                border-radius: calc(min(1vh, 1vw));
+                box-shadow: 0 0 0 3vw #2A2E31;
+                z-index: -999;
+            }
+            #speakercam {
+                position: absolute;
+                right: 3vw;
+                bottom: 3vw;
+                width: 13vw;
+                height: 13vw;
+                border-radius: calc(min(1vh, 1vw));
+                box-shadow: 0 0 0 3vw #2A2E31;
+                z-index: -999;
+            }
+            #speaker {
+                position: absolute;
+                right: 3vw;
+                bottom: calc(13vw + 1.25em + 1em);
+                max-width: 13vw;
+                font-size: 2.25em;
+                text-align: right;
+                overflow-wrap: break-word;
+                font-weight: bold;
+                vertical-align:text-bottom;
+            }
+            #background {
+                position: absolute;
+                background-color: #2A2E31;
+                z-index: -999;
+            }
+        </style>
+        <script>
+            window.onload = function(){
+                document.getElementById("title").innerText = new URL(window.location.href).searchParams.get("title");
+                document.getElementById("speaker").innerText = "@" + new URL(window.location.href).searchParams.get("speaker");
+            }
+        </script>
+    </head>
+    <body>
+        <div id="title">titleNotFound</div>
+        <div id="speakercam"></div>
+        <div id="speaker">@</div>
+        <div id="video"></div>
+
+        <div id="background" style="top: 0; left:0; width: 100vw; height: 16vh;"></div>
+        <div id="background" style="top: 0; right:0; width: 17vw; height: calc(100vh - 16vw)"></div>
+        <div id="background" style="bottom: 0; right:0; width: 100vw; height: 3vw;"></div>
+    </body>
+</html>