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
+