diff --git a/main.py b/main.py index 977b226..3994e79 100644 --- a/main.py +++ b/main.py @@ -63,4 +63,10 @@ async def read_dashboard(request: Request, db: Session = Depends(auth.get_db)): async def logout(request: Request): # Clear the session cookie request.session.clear() - return RedirectResponse(url="/") \ No newline at end of file + 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}) \ No newline at end of file diff --git a/static/overlay-bright-green.css b/static/overlay-bright-green.css new file mode 100644 index 0000000..8c3bdc3 --- /dev/null +++ b/static/overlay-bright-green.css @@ -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 */ +} \ No newline at end of file diff --git a/static/overlay-dark-purple.css b/static/overlay-dark-purple.css new file mode 100644 index 0000000..c71f688 --- /dev/null +++ b/static/overlay-dark-purple.css @@ -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 */ +} \ No newline at end of file diff --git a/templates/overlay-bright-green.html b/templates/overlay-bright-green.html new file mode 100644 index 0000000..64ec412 --- /dev/null +++ b/templates/overlay-bright-green.html @@ -0,0 +1,18 @@ + + + + + Chat Overlay - Bright Green + + + + + + +
+
Streamer: This is the bright green theme!
+
VerdantViewer: Looks so fresh and clean!
+
NightBot: Welcome to the channel!
+
+ + \ No newline at end of file diff --git a/templates/overlay-dark-purple.html b/templates/overlay-dark-purple.html new file mode 100644 index 0000000..7574998 --- /dev/null +++ b/templates/overlay-dark-purple.html @@ -0,0 +1,18 @@ + + + + + Chat Overlay - Dark Purple + + + + + + +
+
Streamer: This is the dark purple theme!
+
PurpleHaze: Very cool, feels like Twitch!
+
NightBot: Welcome to the channel!
+
+ + \ No newline at end of file diff --git a/templates/overlay.html b/templates/overlay.html new file mode 100644 index 0000000..61bda45 --- /dev/null +++ b/templates/overlay.html @@ -0,0 +1,42 @@ + + + + + Chat Overlay + + + + + + +
+
User123: This is an example chat message!
+
StreamFan: Looks great! Can't wait to use this.
+
AnotherViewer: Hello world!
+
+ + \ No newline at end of file