mirror of
https://github.com/ianramzy/decentralized-video-chat.git
synced 2024-11-01 07:59:21 +08:00
add logo to top right
This commit is contained in:
parent
a58dcb706b
commit
dd61e5386f
@ -28,6 +28,11 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="header">
|
||||
<img src="/images/logo.svg" alt="Neon" width="48" height="48">
|
||||
<p>Neon Chat</p>
|
||||
</div>
|
||||
|
||||
<p id="remote-video-text">Waiting for peer to connect...</p>
|
||||
<video id="remote-video" autoplay ondblclick={openFullscreen()}></video>
|
||||
|
||||
|
@ -1,9 +1,27 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:600|Heebo:400,500,700&display=swap");
|
||||
|
||||
|
||||
/*Fade in page on load*/
|
||||
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
/*Fade in page on load*/
|
||||
|
||||
|
||||
body {
|
||||
background: #16171B;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity:0; /* make things invisible upon start */
|
||||
-webkit-animation:fadeIn ease-in 1;
|
||||
-moz-animation:fadeIn ease-in 1;
|
||||
animation:fadeIn ease-in 1;
|
||||
-webkit-animation-fill-mode:forwards;
|
||||
-moz-animation-fill-mode:forwards;
|
||||
animation-fill-mode:forwards;
|
||||
-webkit-animation-duration:0.3s;
|
||||
-moz-animation-duration:0.3s;
|
||||
animation-duration:0.3s;
|
||||
}
|
||||
|
||||
|
||||
@ -11,6 +29,27 @@ video {
|
||||
background: #16171a;
|
||||
}
|
||||
|
||||
#header {
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
top: 40px;
|
||||
left: 80px;
|
||||
margin-left: 30px;
|
||||
margin-top: 30px;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
float: left;
|
||||
}
|
||||
|
||||
#header p, img {
|
||||
float: left;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
|
||||
#moveable {
|
||||
z-index: 100;
|
||||
right: 14px;
|
||||
@ -35,7 +74,6 @@ video {
|
||||
background: rgba(0, 0, 0, 0.38);
|
||||
padding: 10px;
|
||||
transition: 0.5s;
|
||||
|
||||
}
|
||||
|
||||
#local-video {
|
||||
@ -137,3 +175,9 @@ button:hover {
|
||||
}
|
||||
|
||||
/*Neomorphic buttons*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -420,11 +420,8 @@ function switchStreamHelper(stream) {
|
||||
}
|
||||
|
||||
|
||||
// auto get media
|
||||
VideoChat.requestMediaStream();
|
||||
|
||||
|
||||
$("#moveable").draggable({containment: 'window'});
|
||||
|
||||
|
||||
setInterval(() => console.log(VideoChat.remoteVideo.srcObject), 2000);
|
||||
// auto get media
|
||||
VideoChat.requestMediaStream();
|
||||
|
Loading…
Reference in New Issue
Block a user