Add stylesheet link to multiple HTML files and update CSS for improved styling

2025-09-09 18:28:21 -04:00
parent c3794b1dcd
commit 243a2a528d
6 changed files with 139 additions and 9 deletions
@@ -4,8 +4,8 @@
    "username": "miles",
    "password": "$2b$10$mzMpjAvMPw98uw/fDSv7NexPeJ/u80Y3WciyANVtxLYmzvQvpJPii",
    "subscribers": [
-      "miles",
-      "ma"
+      "ma",
+      "miles"
    ]
  },
  {
@@ -2,6 +2,7 @@
 <html>
 <head>
  <title>MiniTube</title>
+  <link rel="stylesheet" href="style.css">
  <script src="app.js" defer></script>
 </head>
 <body>
@@ -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;
+  }
 }
@@ -2,6 +2,7 @@
 <html>
 <head>
  <title>Upload Video - MiniTube</title>
+  <link rel="stylesheet" href="style.css">
  <script src="app.js" defer></script>
 </head>
 <body>
@@ -2,6 +2,7 @@
 <html>
 <head>
  <title>User Page</title>
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1 id="username"></h1>
@@ -2,6 +2,7 @@
 <html>
 <head>
  <title>Watch Video</title>
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1 id="videoTitle"></h1>