mirror of
https://github.com/ianramzy/decentralized-video-chat.git
synced 2024-11-23 18:49:21 +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>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<title>Decentralized Video Chat</title>
|
<title>Neon Chat</title>
|
||||||
<link rel="shortcut icon" href="https://img.icons8.com/pastel-glyph/2x/worldwide-location.png">
|
<link rel="shortcut icon" href="landing/images/logo.svg">
|
||||||
<style>
|
<link rel="stylesheet" href="chat.css">
|
||||||
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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!--<div>-->
|
|
||||||
<!-- <button id="get-video">Share Webcam</button>-->
|
<div class="spinner">
|
||||||
<!-- <button id="get-screen">Share Screen</button>-->
|
<div class="double-bounce1"></div>
|
||||||
<!-- <button id="call" disabled="disabled">Call</button>-->
|
<div class="double-bounce2"></div>
|
||||||
<!-- <button id="will-call">Will Call</button>-->
|
</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>
|
<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="/socket.io/socket.io.js"></script>
|
||||||
<script src="/chat.js"></script>
|
<script src="/chat.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -7,6 +7,48 @@
|
|||||||
<title>Neon Chat</title>
|
<title>Neon Chat</title>
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
<link rel="shortcut icon" href="images/logo.svg">
|
<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>
|
</head>
|
||||||
<body class="has-animations">
|
<body class="has-animations">
|
||||||
<div class="body-wrap">
|
<div class="body-wrap">
|
||||||
@ -45,7 +87,9 @@
|
|||||||
calling provides real-time HD quality and latency simply
|
calling provides real-time HD quality and latency simply
|
||||||
not available with traditional technology.</p>
|
not available with traditional technology.</p>
|
||||||
<div class="reveal-from-bottom" data-reveal-delay="450"><a
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<style>@media (min-width: 641px) {
|
<style>@media (min-width: 641px) {
|
||||||
@ -205,10 +249,12 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-inner has-top-divider">
|
<div class="section-inner has-top-divider">
|
||||||
<div class="container-xs">
|
<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>
|
chatting? </h2></div>
|
||||||
<div class="center-content">
|
<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>
|
||||||
</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