Added: Temporary overlay text and 2 css layouts.

2025-11-17 03:04:19 +01:00
parent 0c00ff7ee0
commit d72e27ad2e
6 changed files with 135 additions and 1 deletions
--- a/templates/overlay.html
+++ b/templates/overlay.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Chat Overlay</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+    <style>
+        body {
+            background-color: transparent;
+            color: white;
+            font-family: 'Inter', sans-serif;
+            font-size: 16px;
+            margin: 0;
+            padding: 10px;
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+        }
+        .chat-container {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        .chat-message {
+            padding: 4px 8px;
+            background-color: rgba(0, 0, 0, 0.4);
+            border-radius: 4px;
+        }
+        .username {
+            font-weight: 800;
+            color: #a970ff; /* A nice purple for usernames */
+        }
+    </style>
+</head>
+<body>
+    <div class="chat-container">
+        <div class="chat-message"><span class="username">User123:</span> This is an example chat message!</div>
+        <div class="chat-message"><span class="username">StreamFan:</span> Looks great! Can't wait to use this.</div>
+        <div class="chat-message"><span class="username">AnotherViewer:</span> Hello world!</div>
+    </div>
+</body>
+</html>