From e1a1ab706fc839bfea9c57d1edefbe35ff15b076 Mon Sep 17 00:00:00 2001
From: ShakedAp <shaked.apter123@gmail.com>
Date: Sun, 25 Jun 2023 12:06:13 +0300
Subject: [PATCH] Added css for the main page, added user panel

Created src/main.css that contains src/main.html css design
Updated login.html for clearer actions
Changed main.html for to a new layout for the css, added watching user panel
---
 src/login.html |  4 ++--
 src/main.css   | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++
 src/main.html  | 28 ++++++++++++++++------
 3 files changed, 86 insertions(+), 9 deletions(-)
 create mode 100644 src/main.css
diff --git a/src/login.html b/src/login.html
index cee8f34..179e500 100644
--- a/src/login.html
+++ b/src/login.html
@@ -12,8 +12,8 @@
       <h1> Login To Watch-Together Server</h1>
         <div class="form">
           <form action="/login" method="post" class="login-form">
-            <input type="text" placeholder="username" name="username"/>
-            <input type="password" placeholder="password" name="password"/>
+            <input type="text" placeholder="your username" name="username"/>
+            <input type="password" placeholder="server password" name="password"/>
             <button>login</button>
           </form>
         </div>
diff --git a/src/main.css b/src/main.css
new file mode 100644
index 0000000..6124b2f
--- /dev/null
+++ b/src/main.css
@@ -0,0 +1,63 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:300);
+
+body {
+    background-color: gray;
+    font-family: "Roboto", sans-serif;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+header {
+    text-align: center;
+    font-size: 2rem;
+}
+
+.video-wrapper {
+    margin-top: 20px;
+    position: relative;
+    width: 100%;
+    padding-bottom: 56.25%; /* 16:9 aspect ratio for responsive video */
+}
+
+video {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 10px;
+    border: 2px solid black;
+}
+
+.user-list {
+    margin-top: 20px;
+}
+
+.user-list h2 {
+    margin-bottom: 10px;
+    font-size: 1.5rem;
+    color: #333;
+}
+
+.user-list ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.user-list li {
+    margin-bottom: 5px;
+    padding: 10px;
+    background-color: #f0f0f0;
+    border-radius: 5px;
+}
+
+.user-list li:hover {
+    background-color: #e0e0e0;
+}
+
+.user-list li:last-child {
+    margin-bottom: 0;
+}
\ No newline at end of file
diff --git a/src/main.html b/src/main.html
index 97869af..d70ce74 100644
--- a/src/main.html
+++ b/src/main.html
@@ -3,15 +3,29 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="main.css">
     <script defer type="text/javascript" src="client.js"></script>
     <title>Client</title>
 </head>
 <body>
-    Client page!
-    <br/>    
-    <video id="videoPlayer" width="650" controls disablePictureInPicture controlsList="nodownload noplaybackrate" muted>
-        <source src="/video" type="video/mp4" />
-    </video>
+    <div class="container">
+        <header>
+            <h1>Watch-Together</h1>
+        </header>
+        <div class="video-wrapper">
+            <video id="videoPlayer" controls disablePictureInPicture controlsList="nodownload noplaybackrate" muted>
+                <source src="/video" type="video/mp4" />
+            </video>
+        </div>
+        <div class="user-list">
+            <h2>People Watching:</h2>
+            <ul>
+                <li>User 1</li>
+                <li>User 2</li>
+                <li>User 3</li>
+                <!-- Add more list items for additional users -->
+            </ul>
+        </div>
+    </div>
 </body>
-
-</html>
\ No newline at end of file
+</html>
