ramforth/MultiChatOverlay
3
2
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Added: Temporary overlay text and 2 css layouts.

Browse Source
This commit is contained in:
ramforth
2025-11-17 03:04:19 +01:00
parent 0c00ff7ee0
commit d72e27ad2e
6 changed files with 135 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
main.py
View File

@@ -64,3 +64,9 @@ async def logout(request: Request):
# Clear the session cookie
request.session.clear()
return RedirectResponse(url="/")
@app.get("/overlay/{user_id}")
async def read_overlay(request: Request, user_id: int):
# This endpoint serves the overlay page.
# For now, it just renders the template with placeholder text.
return templates.TemplateResponse("overlay.html", {"request": request})

26
static/overlay-bright-green.css Normal file
View File

@@ -0,0 +1,26 @@
body {
background-color: transparent;
color: #1a1a1a; /* Dark text for readability on light backgrounds */
font-family: 'Inter', sans-serif;
font-size: 18px;
margin: 0;
padding: 10px;
font-weight: 600;
-webkit-text-stroke: 0.5px white; /* White outline for text */
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}
.chat-container {
display: flex;
flex-direction: column;
gap: 8px;
}
.chat-message {
padding: 5px 10px;
background-color: rgba(240, 240, 240, 0.5); /* Semi-transparent light background */
border-radius: 5px;
border-left: 3px solid #00ff7f; /* Spring green accent */
}
.username {
font-weight: 800;
color: #008000; /* Dark green for usernames */
}

24
static/overlay-dark-purple.css Normal file
View File

@@ -0,0 +1,24 @@
body {
background-color: transparent;
color: #e6edf3; /* Light text for dark backgrounds */
font-family: 'Inter', sans-serif;
font-size: 16px;
margin: 0;
padding: 10px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
}
.chat-container {
display: flex;
flex-direction: column;
gap: 8px;
}
.chat-message {
padding: 4px 8px;
background-color: rgba(22, 27, 34, 0.6); /* Semi-transparent dark background */
border-radius: 4px;
border-left: 3px solid #9146FF; /* Twitch purple accent */
}
.username {
font-weight: 800;
color: #a970ff; /* Lighter purple for usernames */
}

18
templates/overlay-bright-green.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat Overlay - Bright Green</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">
<link rel="stylesheet" href="/static/overlay-bright-green.css">
</head>
<body>
<div class="chat-container">
<div class="chat-message"><span class="username">Streamer:</span> This is the bright green theme!</div>
<div class="chat-message"><span class="username">VerdantViewer:</span> Looks so fresh and clean!</div>
<div class="chat-message"><span class="username">NightBot:</span> Welcome to the channel!</div>
</div>
</body>
</html>

18
templates/overlay-dark-purple.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat Overlay - Dark Purple</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">
<link rel="stylesheet" href="/static/overlay-dark-purple.css">
</head>
<body>
<div class="chat-container">
<div class="chat-message"><span class="username">Streamer:</span> This is the dark purple theme!</div>
<div class="chat-message"><span class="username">PurpleHaze:</span> Very cool, feels like Twitch!</div>
<div class="chat-message"><span class="username">NightBot:</span> Welcome to the channel!</div>
</div>
</body>
</html>

42
templates/overlay.html Normal file
View File

@@ -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>