MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2025-02-22 16:05:03 +08:00
Code Issues Releases Wiki Activity

add buttons to chat

Browse Source
This commit is contained in:
ian ramzy 2020-03-24 17:34:57 -04:00
parent 09f3138c9b
commit 017d3cd238
3 changed files with 55 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
public/chat.css
View File

@ -1,12 +1,20 @@
body { @import url("https://fonts.googleapis.com/css?family=Fira+Sans:600|Heebo:400,500,700&display=swap");
/*background: #ececec;*/
/*background: #16171B;*/
background: #16171B; .videos {
display: flex; display: flex;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
padding: 0;
align-items: center; align-items: center;
padding: 0 50px; /*padding: 0 50px;*/
}
body {
background: #16171B;
margin: 0;
padding: 0;
/*background: #ececec;*/
} }
video { video {
@ -28,4 +36,33 @@ video {
#remote-video { #remote-video {
width: 70%; width: 70%;
height: auto height: auto
}
.buttons {
width: 520px;
bottom: 0px;
position: absolute;
left: 50%;
}
.round-button {
display:block;
width:100px;
height:60px;
line-height:60px;
border-radius: 4px;
background: #292B32;
text-align:center;
text-decoration: none;
color: white;
transition: 0.2s;
margin: 20px;
font-family: "Heebo", sans-serif;
font-weight: 400;
float:left;
}
.round-button:hover {
background: #3d3f47;
} }

20
public/chat.html
View File

@ -8,16 +8,22 @@
</head> </head>
<body> <body>
<div class="spinner">
<div class="double-bounce1"></div> <div class="videos">
<div class="double-bounce2"></div> <video id="remote-video" height="500" autoplay ondblclick={this.requestFullscreen()}></video>
<video id="local-video" height="150" autoplay muted></video>
</div> </div>
<video id="remote-video" height="500" autoplay <div style="position: absolute; left: 50%; margin-left:-200px; bottom: 0px; z-index: 1">
style="background-image: url(preview.gif);" <div class="buttons">
ondblclick={this.requestFullscreen()}></video> <div class="center">
<video id="local-video" height="150" autoplay muted></video> <a href="http://example.com" class="round-button">Back</a>
<a href="http://example.com" class="round-button">Fullscreen</a>
<a href="http://example.com" class="round-button">Mute</a>
</div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script src="/chat.js"></script> <script src="/chat.js"></script>

7
public/landing/landing.html
View File

@ -9,13 +9,6 @@
<link rel="shortcut icon" href="images/logo.svg"> <link rel="shortcut icon" href="images/logo.svg">
<style> <style>
.pulse { .pulse {
/*margin:100px;*/
/*display: block;*/
/*width: 22px;*/
/*height: 22px;*/
/*border-radius: 50%;*/
/*background: #cca92c;*/
/*cursor: pointer;*/
box-shadow: 0 0 0 rgba(120, 120, 120, 0.4); box-shadow: 0 0 0 rgba(120, 120, 120, 0.4);
animation: pulse 4s infinite; animation: pulse 4s infinite;
} }