From 243a2a528d77123376d9db04947d27b6c56c491a Mon Sep 17 00:00:00 2001 From: miles Date: Tue, 9 Sep 2025 18:28:21 -0400 Subject: [PATCH] Add stylesheet link to multiple HTML files and update CSS for improved styling --- data/users.json | 4 +- public/index.html | 1 + public/style.css | 140 ++++++++++++++++++++++++++++++++++++++++++--- public/upload.html | 1 + public/user.html | 1 + public/watch.html | 1 + 6 files changed, 139 insertions(+), 9 deletions(-) diff --git a/data/users.json b/data/users.json index ce906d1..0d3d075 100644 --- a/data/users.json +++ b/data/users.json @@ -4,8 +4,8 @@ "username": "miles", "password": "$2b$10$mzMpjAvMPw98uw/fDSv7NexPeJ/u80Y3WciyANVtxLYmzvQvpJPii", "subscribers": [ - "miles", - "ma" + "ma", + "miles" ] }, { diff --git a/public/index.html b/public/index.html index 559e67a..d719925 100644 --- a/public/index.html +++ b/public/index.html @@ -2,6 +2,7 @@ MiniTube + diff --git a/public/style.css b/public/style.css index 7af9fcb..f925d4e 100644 --- a/public/style.css +++ b/public/style.css @@ -1,17 +1,143 @@ + body { - font-family: Arial, sans-serif; - margin: 20px; + font-family: 'Segoe UI', Arial, sans-serif; + background: #181818; + color: #f1f1f1; + margin: 0; + padding: 0; } -h1 { - color: #cc0000; +h1, h2, h3 { + color: #ff5252; + margin-bottom: 0.5em; } -#videos ul { +header, nav, section, footer { + margin: 2em auto; + max-width: 700px; + background: #232323; + border-radius: 10px; + box-shadow: 0 2px 8px #000a; + padding: 2em; +} + +form { + display: flex; + flex-direction: column; + gap: 1em; +} + +input[type="text"], +input[type="password"], +input[type="file"], +button { + padding: 0.7em; + border-radius: 5px; + border: none; + font-size: 1em; +} + +input[type="text"], +input[type="password"], +input[type="file"] { + background: #2c2c2c; + color: #f1f1f1; +} + +button { + background: #ff5252; + color: #fff; + cursor: pointer; + transition: background 0.2s; +} +button:hover { + background: #ff7979; +} + +ul { list-style: none; padding: 0; } -#videos li { - margin: 10px 0; +li { + margin-bottom: 1em; + background: #242424; + border-radius: 6px; + padding: 1em; + box-shadow: 0 1px 4px #0004; +} + +a { + color: #ff5252; + text-decoration: none; + font-weight: bold; +} +a:hover { + text-decoration: underline; +} + +#player { + width: 100%; + max-width: 640px; + border-radius: 10px; + margin-bottom: 1em; + background: #000; +} + +#likeBtn { + background: #222; + color: #ff5252; + border: 2px solid #ff5252; + border-radius: 50px; + font-size: 1.2em; + padding: 0.5em 1.2em; + margin-bottom: 0.5em; + transition: background 0.2s, color 0.2s; +} +#likeBtn.liked { + background: #ff5252; + color: #fff; +} + +#likeCount { + font-size: 1.1em; + margin-bottom: 1em; +} + +#comments { + margin-top: 1em; +} + +#comments li { + background: #1a1a1a; + border-left: 4px solid #ff5252; + margin-bottom: 0.5em; + padding: 0.7em 1em; + border-radius: 5px; +} + +#subscribeBtn { + background: #222; + color: #ff5252; + border: 2px solid #ff5252; + border-radius: 50px; + font-size: 1em; + padding: 0.4em 1.2em; + margin-bottom: 1em; + margin-top: 1em; + transition: background 0.2s, color 0.2s; +} +#subscribeBtn.subscribed { + background: #ff5252; + color: #fff; +} + +@media (max-width: 800px) { + header, nav, section, footer { + max-width: 98vw; + padding: 1em; + } + #player { + max-width: 100vw; + } } diff --git a/public/upload.html b/public/upload.html index ae3411e..64ca7f6 100644 --- a/public/upload.html +++ b/public/upload.html @@ -2,6 +2,7 @@ Upload Video - MiniTube + diff --git a/public/user.html b/public/user.html index e121cac..7b538b8 100644 --- a/public/user.html +++ b/public/user.html @@ -2,6 +2,7 @@ User Page +

diff --git a/public/watch.html b/public/watch.html index b949745..554aa03 100644 --- a/public/watch.html +++ b/public/watch.html @@ -2,6 +2,7 @@ Watch Video +