CaZzzer/anistream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added css for the main page, added user panel

Browse Source 
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
This commit is contained in:
ShakedAp 2023-06-25 12:06:13 +03:00
parent 1e6a3f87c2
commit e1a1ab706f
3 changed files with 86 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/login.html
View File

@ -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>

63
src/main.css Normal file
View File

@ -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;
}

28
src/main.html
View File

@ -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>
</html>