mirror of
https://github.com/ianramzy/decentralized-video-chat.git
synced 2024-11-23 10:39:20 +08:00
small pretty changes
This commit is contained in:
Ian Ramzy
parent
94f536c5c9
commit
09f3138c9b
31
public/chat.css
Normal file
31
public/chat.css
Normal file
@ -0,0 +1,31 @@
|
||||
body {
|
||||
/*background: #ececec;*/
|
||||
/*background: #16171B;*/
|
||||
background: #16171B;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
video {
|
||||
background: #292B32;
|
||||
/*background: white;*/
|
||||
margin: 0 5%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
padding: 0;
|
||||
/*box-shadow: rgba(118, 143, 255, 0.4) 0px 16px 24px 0px;*/
|
||||
|
||||
}
|
||||
|
||||
#local-video {
|
||||
width: 20%;
|
||||
height: auto
|
||||
}
|
||||
|
||||
#remote-video {
|
||||
width: 70%;
|
||||
height: auto
|
||||
}
|
||||
@ -2,62 +2,23 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>Decentralized Video Chat</title>
|
||||
<link rel="shortcut icon" href="https://img.icons8.com/pastel-glyph/2x/worldwide-location.png">
|
||||
<style>
|
||||
body {
|
||||
background: #ececec;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
padding: 0 50px;
|
||||
}
|
||||
video {
|
||||
background: white;
|
||||
margin: 0 5%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
padding: 0;
|
||||
box-shadow:rgba(118, 143, 255, 0.4) 0px 16px 24px 0px;
|
||||
|
||||
}
|
||||
#local-video{
|
||||
width:20%;
|
||||
height: auto
|
||||
}
|
||||
#remote-video{
|
||||
width:70%;
|
||||
height: auto
|
||||
}
|
||||
div#logs p {
|
||||
margin: 0;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
div#logs p.error {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<title>Neon Chat</title>
|
||||
<link rel="shortcut icon" href="landing/images/logo.svg">
|
||||
<link rel="stylesheet" href="chat.css">
|
||||
</head>
|
||||
<body>
|
||||
<!--<div>-->
|
||||
<!-- <button id="get-video">Share Webcam</button>-->
|
||||
<!-- <button id="get-screen">Share Screen</button>-->
|
||||
<!-- <button id="call" disabled="disabled">Call</button>-->
|
||||
<!-- <button id="will-call">Will Call</button>-->
|
||||
<!--</div>-->
|
||||
|
||||
<div class="spinner">
|
||||
<div class="double-bounce1"></div>
|
||||
<div class="double-bounce2"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<video id="remote-video" height="500" autoplay ondblclick={this.requestFullscreen()}></video>
|
||||
<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>
|
||||
|
||||
|
||||
<!--<p>Log messages:</p>-->
|
||||
<!--<div id="logs">-->
|
||||
<!--</div>-->
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/chat.js"></script>
|
||||
</body>
|
||||
|
||||
@ -7,6 +7,48 @@
|
||||
<title>Neon Chat</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<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;
|
||||
}
|
||||
.pulse:hover {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@-webkit-keyframes pulse {
|
||||
0% {
|
||||
-webkit-box-shadow: 0 0 0 0 rgba(120, 120, 120, 0.4);
|
||||
}
|
||||
70% {
|
||||
-webkit-box-shadow: 0 0 0 15px rgba(120, 120, 120, 0);
|
||||
}
|
||||
100% {
|
||||
-webkit-box-shadow: 0 0 0 0 rgba(120, 120, 120, 0);
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
-moz-box-shadow: 0 0 0 0 rgba(120, 120, 120, 0.4);
|
||||
box-shadow: 0 0 0 0 rgba(120, 120, 120, 0.4);
|
||||
}
|
||||
70% {
|
||||
-moz-box-shadow: 0 0 0 10px rgba(120, 120, 120, 0);
|
||||
box-shadow: 0 0 0 15px rgba(120, 120, 120, 0);
|
||||
}
|
||||
100% {
|
||||
-moz-box-shadow: 0 0 0 0 rgba(120, 120, 120, 0);
|
||||
box-shadow: 0 0 0 0 rgba(120, 120, 120, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="has-animations">
|
||||
<div class="body-wrap">
|
||||
@ -45,7 +87,9 @@
|
||||
calling provides real-time HD quality and latency simply
|
||||
not available with traditional technology.</p>
|
||||
<div class="reveal-from-bottom" data-reveal-delay="450"><a
|
||||
class="button button-primary button-wide-mobile" href="/">Try now</a>
|
||||
class="button button-primary button-wide-mobile pulse"
|
||||
style="border:0; background: linear-gradient(100deg, #376DF9 0, #FF5FA0 75%, #FFC55A 100%);"
|
||||
href="/">Try now</a>
|
||||
</div>
|
||||
</div>
|
||||
<style>@media (min-width: 641px) {
|
||||
@ -205,10 +249,12 @@
|
||||
<div class="container">
|
||||
<div class="section-inner has-top-divider">
|
||||
<div class="container-xs">
|
||||
<div class="section-header center-content"><h2 class="m-0">Tired of the old ways of
|
||||
<div class="section-header center-content"><h2 class="m-0">Tired of the old way of
|
||||
chatting? </h2></div>
|
||||
<div class="center-content">
|
||||
<a class="button button-primary button-wide-mobile" href="/">Try now</a>
|
||||
<a class="button button-primary button-wide-mobile pulse"
|
||||
style="border:0; background: linear-gradient(100deg, #376DF9 0, #FF5FA0 75%, #FFC55A 100%);"
|
||||
href="/">Try now</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
BIN
public/preview.gif
Normal file
BIN
public/preview.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Loading…
Reference in New Issue
Block a user