MigrateRepos
/
decentralized-video-chat
mirror of https://github.com/ianramzy/decentralized-video-chat.git
1
0
Fork 0
Code Issues Releases Wiki Activity

add buttons to chat

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 {
/*background: #ececec;*/
/*background: #16171B;*/
background: #16171B;
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:600|Heebo:400,500,700&display=swap");
.videos {
display: flex;
height: 100vh;
margin: 0;
padding: 0;
align-items: center;
padding: 0 50px;
/*padding: 0 50px;*/
}
body {
background: #16171B;
margin: 0;
padding: 0;
/*background: #ececec;*/
}
video {
@ -28,4 +36,33 @@ video {
#remote-video {
width: 70%;
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>
<body>
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
<div class="videos">
<video id="remote-video" height="500" autoplay ondblclick={this.requestFullscreen()}></video>
<video id="local-video" height="150" autoplay muted></video>
</div>
<video id="remote-video" height="500" autoplay
style="background-image: url(preview.gif);"
ondblclick={this.requestFullscreen()}></video>
<video id="local-video" height="150" autoplay muted></video>
<div style="position: absolute; left: 50%; margin-left:-200px; bottom: 0px; z-index: 1">
<div class="buttons">
<div class="center">
<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="/chat.js"></script>

7
public/landing/landing.html
View File

@ -9,13 +9,6 @@
<link rel="shortcut icon" href="images/logo.svg">
<style>
.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);
animation: pulse 4s infinite;
}