mirror of
https://github.com/ianramzy/decentralized-video-chat.git
synced 2024-11-23 10:39:20 +08:00
Run prettier
This commit is contained in:
ian ramzy
parent
d131909b8e
commit
f9b94795e7
191
public/chat.html
191
public/chat.html
@ -1,128 +1,139 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8" />
|
||||||
<title>Neon Chat</title>
|
<title>Neon Chat</title>
|
||||||
<link rel="shortcut icon" href="/images/logo.svg">
|
<link rel="shortcut icon" href="/images/logo.svg" />
|
||||||
<link rel="stylesheet" href="../css/chat.css">
|
<link rel="stylesheet" href="../css/chat.css" />
|
||||||
<link rel="stylesheet" href="../css/snackbar.css">
|
<link rel="stylesheet" href="../css/snackbar.css" />
|
||||||
<script src="https://kit.fontawesome.com/9d7bb7e31a.js" crossorigin="anonymous"></script>
|
<script
|
||||||
|
src="https://kit.fontawesome.com/9d7bb7e31a.js"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
></script>
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
|
||||||
<meta property="og:title" content="Join your friends call - Neonchat">
|
<meta property="og:title" content="Join your friends call - Neonchat" />
|
||||||
<meta property="og:description" content="Click the link to join this chat room using Neonchat">
|
<meta
|
||||||
<meta property="og:image" content="https://neonchat.io/images/preview.png">
|
property="og:description"
|
||||||
<meta property="og:url" content="https://neonchat.io/">
|
content="Click the link to join this chat room using Neonchat"
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
property="og:image"
|
||||||
|
content="https://neonchat.io/images/preview.png"
|
||||||
|
/>
|
||||||
|
<meta property="og:url" content="https://neonchat.io/" />
|
||||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"></script>
|
<script
|
||||||
|
async
|
||||||
|
src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"
|
||||||
|
></script>
|
||||||
<script>
|
<script>
|
||||||
window.dataLayer = window.dataLayer || [];
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
|
||||||
function gtag() {
|
function gtag() {
|
||||||
dataLayer.push(arguments);
|
dataLayer.push(arguments);
|
||||||
}
|
}
|
||||||
|
|
||||||
gtag('js', new Date());
|
gtag("js", new Date());
|
||||||
gtag('config', 'UA-162048272-1');
|
gtag("config", "UA-162048272-1");
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="header">
|
||||||
|
<a href="/">
|
||||||
<div id="header">
|
<img src="/images/logo.svg" alt="Neon" width="48" height="48" />
|
||||||
<a href="/">
|
|
||||||
<img src="/images/logo.svg" alt="Neon" width="48" height="48">
|
|
||||||
<p>Neon Chat</p>
|
<p>Neon Chat</p>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<p id="remote-video-text"></p>
|
|
||||||
<video id="remote-video" autoplay ondblclick={openFullscreen()}></video>
|
|
||||||
<div id="moveable">
|
|
||||||
<p id="local-video-text">No webcam input</p>
|
|
||||||
<video id="local-video" autoplay muted></video>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="entire-chat">
|
|
||||||
<form class="compose">
|
|
||||||
<textarea type="text" placeholder="Type a message"></textarea>
|
|
||||||
</form>
|
|
||||||
<div id="chat-zone">
|
|
||||||
<div class="chat-messages">
|
|
||||||
|
|
||||||
<!-- <div class="message-item customer">-->
|
|
||||||
<!-- <div class="message-bloc">-->
|
|
||||||
<!-- <div class="message">Have you tried this chat?</div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
|
|
||||||
<!-- <div class="message-item moderator">-->
|
|
||||||
<!-- <div class="message-bloc">-->
|
|
||||||
<!-- <div class="message">Not yet! It looks awesome</div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<p id="remote-video-text"></p>
|
||||||
|
<video id="remote-video" autoplay ondblclick="{openFullscreen()}"></video>
|
||||||
|
<div id="moveable">
|
||||||
|
<p id="local-video-text">No webcam input</p>
|
||||||
|
<video id="local-video" autoplay muted></video>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="multi-button">
|
<div id="entire-chat">
|
||||||
<div class="buttonContainer">
|
<form class="compose">
|
||||||
|
<textarea type="text" placeholder="Type a message"></textarea>
|
||||||
|
</form>
|
||||||
|
<div id="chat-zone">
|
||||||
|
<div class="chat-messages">
|
||||||
|
<!-- <div class="message-item customer">-->
|
||||||
|
<!-- <div class="message-bloc">-->
|
||||||
|
<!-- <div class="message">Have you tried this chat?</div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
|
||||||
|
<!-- <div class="message-item moderator">-->
|
||||||
|
<!-- <div class="message-bloc">-->
|
||||||
|
<!-- <div class="message">Not yet! It looks awesome</div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="multi-button">
|
||||||
|
<div class="buttonContainer">
|
||||||
<button class="hoverButton" onclick="{muteMicrophone()}">
|
<button class="hoverButton" onclick="{muteMicrophone()}">
|
||||||
<i id="mic-icon" class="fas fa-microphone fa-xs"></i>
|
<i id="mic-icon" class="fas fa-microphone fa-xs"></i>
|
||||||
</button>
|
</button>
|
||||||
<div class="HoverState" id="mic-text">Mute</div>
|
<div class="HoverState" id="mic-text">Mute</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttonContainer">
|
<div class="buttonContainer">
|
||||||
<button class="hoverButton" onclick="{openFullscreen()}">
|
<button class="hoverButton" onclick="{openFullscreen()}">
|
||||||
<i class="fas fa-compress fa-xs"></i>
|
<i class="fas fa-compress fa-xs"></i>
|
||||||
</button>
|
</button>
|
||||||
<div class="HoverState">Fullscreen</div>
|
<div class="HoverState">Fullscreen</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttonContainer">
|
<div class="buttonContainer">
|
||||||
<button class="hoverButton" onclick="{pauseVideo()}">
|
<button class="hoverButton" onclick="{pauseVideo()}">
|
||||||
<i class="fas fa-video fa-xs" id="video-icon"></i>
|
<i class="fas fa-video fa-xs" id="video-icon"></i>
|
||||||
</button>
|
</button>
|
||||||
<div class="HoverState" id="video-text">Pause Video</div>
|
<div class="HoverState" id="video-text">Pause Video</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttonContainer">
|
<div class="buttonContainer">
|
||||||
<button class="hoverButton" id="share-button" onclick="{swap()}">
|
<button class="hoverButton" id="share-button" onclick="{swap()}">
|
||||||
<i id="swap-icon" class="fas fa-desktop fa-xs"></i>
|
<i id="swap-icon" class="fas fa-desktop fa-xs"></i>
|
||||||
</button>
|
</button>
|
||||||
<div class="HoverState" id="swap-text">Share Screen</div>
|
<div class="HoverState" id="swap-text">Share Screen</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttonContainer">
|
<div class="buttonContainer">
|
||||||
<button class="hoverButton" onclick="{window.location.href = '/newroom'}">
|
<button
|
||||||
<i class="fas fa-phone-slash fa-xs"></i>
|
class="hoverButton"
|
||||||
|
onclick="{window.location.href = '/newroom'}"
|
||||||
|
>
|
||||||
|
<i class="fas fa-phone-slash fa-xs"></i>
|
||||||
</button>
|
</button>
|
||||||
<div class="HoverState">End Call</div>
|
<div class="HoverState">End Call</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttonContainer">
|
<div class="buttonContainer">
|
||||||
<button class="hoverButton" onclick="{requestToggleCaptions()}">
|
<button class="hoverButton" onclick="{requestToggleCaptions()}">
|
||||||
<i class="fas fa-closed-captioning fa-xs"></i>
|
<i class="fas fa-closed-captioning fa-xs"></i>
|
||||||
</button>
|
</button>
|
||||||
<div class="HoverState" id="caption-text">Start Live Caption</div>
|
<div class="HoverState" id="caption-text">Start Live Caption</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttonContainer">
|
<div class="buttonContainer">
|
||||||
<button class="hoverButton" onclick="{toggleChat()}">
|
<button class="hoverButton" onclick="{toggleChat()}">
|
||||||
<i id="chat-icon" class="fas fa-comment fa-xs"></i>
|
<i id="chat-icon" class="fas fa-comment fa-xs"></i>
|
||||||
</button>
|
</button>
|
||||||
<div class="HoverState" id="chat-text">Show Chat</div>
|
<div class="HoverState" id="chat-text">Show Chat</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttonContainer">
|
<div class="buttonContainer">
|
||||||
<button class="hoverButton" id="pip-button" onclick="{togglePictureInPicture()}">
|
<button
|
||||||
<i class="fas fa-external-link-alt fa-xs"></i>
|
class="hoverButton"
|
||||||
|
id="pip-button"
|
||||||
|
onclick="{togglePictureInPicture()}"
|
||||||
|
>
|
||||||
|
<i class="fas fa-external-link-alt fa-xs"></i>
|
||||||
</button>
|
</button>
|
||||||
<div class="HoverState" id="pip-text">Enter Picture in Picture</div>
|
<div class="HoverState" id="pip-text">Enter Picture in Picture</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<script src="/socket.io/socket.io.js"></script>
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
<script src="../js/snackbar.js"></script>
|
||||||
<script src="../js/snackbar.js"></script>
|
<script src="../js/chat.js"></script>
|
||||||
<script src="../js/chat.js"></script>
|
</body>
|
||||||
</body>
|
</html>
|
||||||
</html>
|
|
||||||
|
|||||||
@ -1,289 +1,276 @@
|
|||||||
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:600|Heebo:400,500,700&display=swap");
|
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:600|Heebo:400,500,700&display=swap");
|
||||||
|
|
||||||
|
|
||||||
/*Fade in page on load*/
|
/*Fade in page on load*/
|
||||||
@-webkit-keyframes fadeIn {
|
@-webkit-keyframes fadeIn {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@-moz-keyframes fadeIn {
|
@-moz-keyframes fadeIn {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Fade in page on load*/
|
/*Fade in page on load*/
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: #16171B;
|
background: #16171b;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
opacity: 0; /* make things invisible upon start */
|
opacity: 0; /* make things invisible upon start */
|
||||||
-webkit-animation: fadeIn ease-in 1;
|
-webkit-animation: fadeIn ease-in 1;
|
||||||
-moz-animation: fadeIn ease-in 1;
|
-moz-animation: fadeIn ease-in 1;
|
||||||
animation: fadeIn ease-in 1;
|
animation: fadeIn ease-in 1;
|
||||||
-webkit-animation-fill-mode: forwards;
|
-webkit-animation-fill-mode: forwards;
|
||||||
-moz-animation-fill-mode: forwards;
|
-moz-animation-fill-mode: forwards;
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
-webkit-animation-duration: 0.3s;
|
-webkit-animation-duration: 0.3s;
|
||||||
-moz-animation-duration: 0.3s;
|
-moz-animation-duration: 0.3s;
|
||||||
animation-duration: 0.3s;
|
animation-duration: 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
video {
|
video {
|
||||||
background: #16171a;
|
background: #16171a;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: white;
|
color: white;
|
||||||
font-family: "Fira Sans", sans-serif;
|
font-family: "Fira Sans", sans-serif;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
top: 40px;
|
top: 40px;
|
||||||
left: 80px;
|
left: 80px;
|
||||||
margin-left: 30px;
|
margin-left: 30px;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
-ms-transform: translate(-50%, -50%);
|
-ms-transform: translate(-50%, -50%);
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header p, img {
|
#header p,
|
||||||
float: left;
|
img {
|
||||||
padding: 7px;
|
float: left;
|
||||||
|
padding: 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header, a {
|
#header,
|
||||||
color: white;
|
a {
|
||||||
text-decoration: none;
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#moveable {
|
#moveable {
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 15%;
|
width: 15%;
|
||||||
cursor: move;
|
cursor: move;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#moveable p {
|
#moveable p {
|
||||||
z-index: 101;
|
z-index: 101;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: white;
|
color: white;
|
||||||
font-family: "Heebo", sans-serif;
|
font-family: "Heebo", sans-serif;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
-ms-transform: translate(-50%, -50%);
|
-ms-transform: translate(-50%, -50%);
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background: rgba(0, 0, 0, 0.12);
|
background: rgba(0, 0, 0, 0.12);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#local-video {
|
#local-video {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
-webkit-transform: scaleX(-1);
|
-webkit-transform: scaleX(-1);
|
||||||
transform: scaleX(-1);
|
transform: scaleX(-1);
|
||||||
background: #16171a;
|
background: #16171a;
|
||||||
}
|
}
|
||||||
|
|
||||||
#remote-video-text {
|
#remote-video-text {
|
||||||
/*padding: 0;*/
|
/*padding: 0;*/
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 60vw;
|
width: 60vw;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(80%);
|
top: calc(80%);
|
||||||
left: 20vw;
|
left: 20vw;
|
||||||
/*-ms-transform: translate(-50%, -90%);*/
|
/*-ms-transform: translate(-50%, -90%);*/
|
||||||
/*transform: translate(-50%, -90%);*/
|
/*transform: translate(-50%, -90%);*/
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
color: white;
|
color: white;
|
||||||
font-family: "Heebo", sans-serif;
|
font-family: "Heebo", sans-serif;
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
/*white-space: nowrap;*/
|
/*white-space: nowrap;*/
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
background: rgba(0, 0, 0, 0.20);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#remote-video {
|
#remote-video {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
-ms-transform: translate(-50%, -50%);
|
-ms-transform: translate(-50%, -50%);
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
width: 70%;
|
width: 70%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
||||||
border-radius: 10px;
|
|
||||||
background-image: url(../images/loader.gif);
|
|
||||||
background-size: 400px auto;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center center;
|
|
||||||
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
|
|
||||||
|
|
||||||
|
border-radius: 10px;
|
||||||
|
background-image: url(../images/loader.gif);
|
||||||
|
background-size: 400px auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*Neomorphic buttons*/
|
/*Neomorphic buttons*/
|
||||||
button {
|
button {
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
transition: all .3s ease-in-out;
|
transition: all 0.3s ease-in-out;
|
||||||
color: gray;
|
color: gray;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:focus {
|
button:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
color: white;
|
color: white;
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
background: #16171a;
|
background: #16171a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.multi-button {
|
.multi-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: calc(7.5vw - 40px);
|
left: calc(7.5vw - 40px);
|
||||||
top: 50%;
|
top: 50%;
|
||||||
-ms-transform: translate(0%, -50%);
|
-ms-transform: translate(0%, -50%);
|
||||||
transform: translate(0%, -50%);
|
transform: translate(0%, -50%);
|
||||||
|
|
||||||
|
z-index: 999;
|
||||||
z-index: 999;
|
border-radius: 10px;
|
||||||
border-radius: 10px;
|
background: #16171a;
|
||||||
background: #16171a;
|
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
|
||||||
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
|
padding: 15px;
|
||||||
padding: 15px;
|
display: grid;
|
||||||
display: grid;
|
grid-gap: 0.5rem;
|
||||||
grid-gap: 0.5rem;
|
width: 50px;
|
||||||
width: 50px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.HoverState {
|
.HoverState {
|
||||||
color: white;
|
color: white;
|
||||||
font-family: "Heebo", sans-serif;
|
font-family: "Heebo", sans-serif;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 70px;
|
left: 70px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background: #16171a;
|
background: #16171a;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttonContainer {
|
.buttonContainer {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Neomorphic buttons*/
|
/*Neomorphic buttons*/
|
||||||
|
|
||||||
|
|
||||||
/*simple chat*/
|
/*simple chat*/
|
||||||
|
|
||||||
#entire-chat {
|
#entire-chat {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 13vw;
|
width: 13vw;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.compose {
|
.compose {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 10%;
|
height: 10%;
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
font-family: "Heebo", sans-serif;
|
font-family: "Heebo", sans-serif;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
/*margin: 0;*/
|
/*margin: 0;*/
|
||||||
/*z-index: 1;*/
|
/*z-index: 1;*/
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
/*box-shadow: 6px 6px 12px #b11882, -6px -6px 12px #292a30;*/
|
/*box-shadow: 6px 6px 12px #b11882, -6px -6px 12px #292a30;*/
|
||||||
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #292a30;
|
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #292a30;
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.compose textarea::placeholder {
|
.compose textarea::placeholder {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.compose textarea {
|
.compose textarea {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
border: none;
|
border: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 80%;
|
height: 80%;
|
||||||
|
|
||||||
resize: none;
|
|
||||||
outline: none;
|
|
||||||
color: white;
|
|
||||||
/*background: #3a4150;*/
|
|
||||||
background-color: rgb(22, 23, 26);
|
|
||||||
/*box-shadow: 6px 6px 12px #111314, -6px -6px 12px #292a30;*/
|
|
||||||
|
|
||||||
|
|
||||||
|
resize: none;
|
||||||
|
outline: none;
|
||||||
|
color: white;
|
||||||
|
/*background: #3a4150;*/
|
||||||
|
background-color: rgb(22, 23, 26);
|
||||||
|
/*box-shadow: 6px 6px 12px #111314, -6px -6px 12px #292a30;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#chat-zone {
|
#chat-zone {
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
/*border: red 1px solid;*/
|
/*border: red 1px solid;*/
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: calc(90% - 20px);
|
height: calc(90% - 20px);
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 15vw;
|
width: 15vw;
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
/*overflow: -moz-scrollbars-none;*/
|
/*overflow: -moz-scrollbars-none;*/
|
||||||
/*-ms-overflow-style: none;*/
|
/*-ms-overflow-style: none;*/
|
||||||
/*-webkit-overflow-scrolling: touch;*/
|
/*-webkit-overflow-scrolling: touch;*/
|
||||||
font-family: "Heebo", sans-serif;
|
font-family: "Heebo", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*#chat-zone::-webkit-scrollbar {*/
|
/*#chat-zone::-webkit-scrollbar {*/
|
||||||
@ -292,61 +279,56 @@ button:hover {
|
|||||||
/*}*/
|
/*}*/
|
||||||
|
|
||||||
#chat-zone .chat-messages .message-item {
|
#chat-zone .chat-messages .message-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
padding: 0 16px 4px;
|
padding: 0 16px 4px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#chat-zone .chat-messages .message-item.customer {
|
#chat-zone .chat-messages .message-item.customer {
|
||||||
padding-left: 40px;
|
padding-left: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*Your messages*/
|
/*Your messages*/
|
||||||
#chat-zone .message-item.moderator .message-bloc {
|
#chat-zone .message-item.moderator .message-bloc {
|
||||||
background-color: rgb(22, 23, 26);
|
background-color: rgb(22, 23, 26);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-radius: 20px 20px 20px 5px;
|
border-radius: 20px 20px 20px 5px;
|
||||||
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #23242a;
|
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #23242a;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*Recieved messages*/
|
/*Recieved messages*/
|
||||||
#chat-zone .message-item.customer .message-bloc {
|
#chat-zone .message-item.customer .message-bloc {
|
||||||
background-color: rgb(42, 43, 47);
|
background-color: rgb(42, 43, 47);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 20px 20px 5px 20px;
|
border-radius: 20px 20px 5px 20px;
|
||||||
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #22232a;
|
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #22232a;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat-zone .chat-messages .message-item.customer .message-bloc {
|
#chat-zone .chat-messages .message-item.customer .message-bloc {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat-zone .chat-messages .message-item .message-bloc {
|
#chat-zone .chat-messages .message-item .message-bloc {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*simple chat*/
|
/*simple chat*/
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -1,95 +1,96 @@
|
|||||||
.snackbar-container {
|
.snackbar-container {
|
||||||
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
|
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
|
||||||
transition: all .5s ease;
|
transition: all 0.5s ease;
|
||||||
transition-property: top, right, bottom, left, opacity;
|
transition-property: top, right, bottom, left, opacity;
|
||||||
font-family: "Heebo", sans-serif;
|
font-family: "Heebo", sans-serif;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
min-height: 14px;
|
min-height: 14px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: #b4b4b4;
|
color: #b4b4b4;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
padding: 18px 24px;
|
padding: 18px 24px;
|
||||||
bottom: -100px;
|
bottom: -100px;
|
||||||
top: -100px;
|
top: -100px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 9999
|
z-index: 9999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar-container .action {
|
.snackbar-container .action {
|
||||||
background: inherit;
|
background: inherit;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #4caf50;
|
color: #4caf50;
|
||||||
margin: 0 0 0 24px;
|
margin: 0 0 0 24px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
min-width: min-content;
|
min-width: min-content;
|
||||||
cursor: pointer
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
.snackbar-container {
|
.snackbar-container {
|
||||||
min-width: 288px;
|
min-width: 288px;
|
||||||
max-width: 568px;
|
max-width: 568px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
margin: 24px
|
margin: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
.snackbar-container {
|
.snackbar-container {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 100%
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar-pos.bottom-center {
|
.snackbar-pos.bottom-center {
|
||||||
top: auto !important;
|
top: auto !important;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, 0)
|
transform: translate(-50%, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar-pos.bottom-left {
|
.snackbar-pos.bottom-left {
|
||||||
top: auto !important;
|
top: auto !important;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar-pos.bottom-right {
|
.snackbar-pos.bottom-right {
|
||||||
top: auto !important;
|
top: auto !important;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar-pos.top-left {
|
.snackbar-pos.top-left {
|
||||||
bottom: auto !important;
|
bottom: auto !important;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar-pos.top-center {
|
.snackbar-pos.top-center {
|
||||||
bottom: auto !important;
|
bottom: auto !important;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, 0)
|
transform: translate(-50%, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar-pos.top-right {
|
.snackbar-pos.top-right {
|
||||||
bottom: auto !important;
|
bottom: auto !important;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
.snackbar-pos.bottom-center, .snackbar-pos.top-center {
|
.snackbar-pos.bottom-center,
|
||||||
left: 0;
|
.snackbar-pos.top-center {
|
||||||
transform: none
|
left: 0;
|
||||||
}
|
transform: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,26 +1,28 @@
|
|||||||
; (function () {
|
(function () {
|
||||||
'use strict'
|
"use strict";
|
||||||
const accordionEl = document.getElementsByClassName('accordion-header')
|
const accordionEl = document.getElementsByClassName("accordion-header");
|
||||||
|
|
||||||
function openAccordion (parent, panel) {
|
function openAccordion(parent, panel) {
|
||||||
parent.classList.add('is-active')
|
parent.classList.add("is-active");
|
||||||
panel.style.maxHeight = panel.scrollHeight + 'px'
|
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeAccordion (parent, panel) {
|
function closeAccordion(parent, panel) {
|
||||||
parent.classList.remove('is-active')
|
parent.classList.remove("is-active");
|
||||||
panel.style.maxHeight = null
|
panel.style.maxHeight = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (accordionEl.length > 0) {
|
if (accordionEl.length > 0) {
|
||||||
for (let i = 0; i < accordionEl.length; i++) {
|
for (let i = 0; i < accordionEl.length; i++) {
|
||||||
const el = accordionEl[i]
|
const el = accordionEl[i];
|
||||||
const parent = el.parentNode
|
const parent = el.parentNode;
|
||||||
const panel = el.nextElementSibling
|
const panel = el.nextElementSibling;
|
||||||
parent.classList.contains('is-active') && openAccordion(parent, panel)
|
parent.classList.contains("is-active") && openAccordion(parent, panel);
|
||||||
el.addEventListener('click', function () {
|
el.addEventListener("click", function () {
|
||||||
parent.classList.contains('is-active') ? closeAccordion(parent, panel) : openAccordion(parent, panel)
|
parent.classList.contains("is-active")
|
||||||
})
|
? closeAccordion(parent, panel)
|
||||||
|
: openAccordion(parent, panel);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}())
|
})();
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
; (function () {
|
(function () {
|
||||||
'use strict'
|
"use strict";
|
||||||
|
|
||||||
// Swipe detector
|
// Swipe detector
|
||||||
// https://gist.github.com/chrishaensel/e17c9f3838f246d75fe3bd19d6bb92e8#file-swipe-js
|
// https://gist.github.com/chrishaensel/e17c9f3838f246d75fe3bd19d6bb92e8#file-swipe-js
|
||||||
@ -8,164 +8,188 @@
|
|||||||
touchEndX: 0,
|
touchEndX: 0,
|
||||||
minSwipePixels: 30,
|
minSwipePixels: 30,
|
||||||
detectionZone: undefined,
|
detectionZone: undefined,
|
||||||
swipeCallback: function () { },
|
swipeCallback: function () {},
|
||||||
|
|
||||||
init: function (detectionZone, callback) {
|
init: function (detectionZone, callback) {
|
||||||
swipe.swipeCallback = callback
|
swipe.swipeCallback = callback;
|
||||||
detectionZone.addEventListener('touchstart', function (event) {
|
detectionZone.addEventListener(
|
||||||
swipe.touchStartX = event.changedTouches[0].screenX
|
"touchstart",
|
||||||
}, false)
|
function (event) {
|
||||||
detectionZone.addEventListener('touchend', function (event) {
|
swipe.touchStartX = event.changedTouches[0].screenX;
|
||||||
swipe.touchEndX = event.changedTouches[0].screenX
|
},
|
||||||
swipe.handleSwipeGesture()
|
false
|
||||||
}, false)
|
);
|
||||||
|
detectionZone.addEventListener(
|
||||||
|
"touchend",
|
||||||
|
function (event) {
|
||||||
|
swipe.touchEndX = event.changedTouches[0].screenX;
|
||||||
|
swipe.handleSwipeGesture();
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
handleSwipeGesture: function () {
|
handleSwipeGesture: function () {
|
||||||
let direction, moved
|
let direction, moved;
|
||||||
if (swipe.touchEndX <= swipe.touchStartX) {
|
if (swipe.touchEndX <= swipe.touchStartX) {
|
||||||
moved = swipe.touchStartX - swipe.touchEndX
|
moved = swipe.touchStartX - swipe.touchEndX;
|
||||||
direction = 'left'
|
direction = "left";
|
||||||
}
|
}
|
||||||
if (swipe.touchEndX >= swipe.touchStartX) {
|
if (swipe.touchEndX >= swipe.touchStartX) {
|
||||||
moved = swipe.touchEndX - swipe.touchStartX
|
moved = swipe.touchEndX - swipe.touchStartX;
|
||||||
direction = 'right'
|
direction = "right";
|
||||||
}
|
}
|
||||||
if (moved > swipe.minSwipePixels && direction !== 'undefined') {
|
if (moved > swipe.minSwipePixels && direction !== "undefined") {
|
||||||
swipe.swipe(direction, moved)
|
swipe.swipe(direction, moved);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
swipe: function (direction, movedPixels) {
|
swipe: function (direction, movedPixels) {
|
||||||
let ret = {}
|
let ret = {};
|
||||||
ret.direction = direction
|
ret.direction = direction;
|
||||||
ret.movedPixels = movedPixels
|
ret.movedPixels = movedPixels;
|
||||||
swipe.swipeCallback(ret)
|
swipe.swipeCallback(ret);
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
|
|
||||||
const carousels = document.getElementsByClassName('carousel-items')
|
const carousels = document.getElementsByClassName("carousel-items");
|
||||||
|
|
||||||
// Rotate the carousel forward or backward
|
// Rotate the carousel forward or backward
|
||||||
function rotateCarousel(el, dir) {
|
function rotateCarousel(el, dir) {
|
||||||
if (dir === undefined) {
|
if (dir === undefined) {
|
||||||
dir = 'next'
|
dir = "next";
|
||||||
}
|
}
|
||||||
let currentItem = el.getElementsByClassName('carousel-item is-active')[0]
|
let currentItem = el.getElementsByClassName("carousel-item is-active")[0];
|
||||||
let nextItem = (dir === 'next') ? currentItem.nextElementSibling : currentItem.previousElementSibling
|
let nextItem =
|
||||||
let index = currentItem.getAttribute('data-carousel')
|
dir === "next"
|
||||||
let currentBullet = el.parentNode.getElementsByClassName('carousel-bullet')[index]
|
? currentItem.nextElementSibling
|
||||||
let nextBullet = (dir === 'next') ? currentBullet.nextElementSibling : currentBullet.previousElementSibling
|
: currentItem.previousElementSibling;
|
||||||
currentItem.classList.remove('is-active')
|
let index = currentItem.getAttribute("data-carousel");
|
||||||
currentBullet.classList.remove('is-active')
|
let currentBullet = el.parentNode.getElementsByClassName("carousel-bullet")[
|
||||||
|
index
|
||||||
|
];
|
||||||
|
let nextBullet =
|
||||||
|
dir === "next"
|
||||||
|
? currentBullet.nextElementSibling
|
||||||
|
: currentBullet.previousElementSibling;
|
||||||
|
currentItem.classList.remove("is-active");
|
||||||
|
currentBullet.classList.remove("is-active");
|
||||||
if (nextItem) {
|
if (nextItem) {
|
||||||
nextItem.classList.add('is-active')
|
nextItem.classList.add("is-active");
|
||||||
nextBullet.classList.add('is-active')
|
nextBullet.classList.add("is-active");
|
||||||
} else {
|
} else {
|
||||||
if (dir === 'next') {
|
if (dir === "next") {
|
||||||
el.firstElementChild.classList.add('is-active')
|
el.firstElementChild.classList.add("is-active");
|
||||||
el.parentNode.getElementsByClassName('carousel-bullets')[0].firstElementChild.classList.add('is-active')
|
el.parentNode
|
||||||
|
.getElementsByClassName("carousel-bullets")[0]
|
||||||
|
.firstElementChild.classList.add("is-active");
|
||||||
} else {
|
} else {
|
||||||
el.lastElementChild.classList.add('is-active')
|
el.lastElementChild.classList.add("is-active");
|
||||||
el.parentNode.getElementsByClassName('carousel-bullets')[0].lastElementChild.classList.add('is-active')
|
el.parentNode
|
||||||
|
.getElementsByClassName("carousel-bullets")[0]
|
||||||
|
.lastElementChild.classList.add("is-active");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Equal heights fix
|
// Equal heights fix
|
||||||
function equalHeightCarousel(carousel, items) {
|
function equalHeightCarousel(carousel, items) {
|
||||||
let taller = 0
|
let taller = 0;
|
||||||
let height
|
let height;
|
||||||
for (let i = 0; i < items.length; i++) {
|
for (let i = 0; i < items.length; i++) {
|
||||||
items[0].parentNode.style.minHeight = taller + 'px'
|
items[0].parentNode.style.minHeight = taller + "px";
|
||||||
items[i].classList.add('is-loading')
|
items[i].classList.add("is-loading");
|
||||||
height = items[i].offsetHeight
|
height = items[i].offsetHeight;
|
||||||
items[i].classList.remove('is-loading')
|
items[i].classList.remove("is-loading");
|
||||||
if (height > taller) {
|
if (height > taller) {
|
||||||
taller = height
|
taller = height;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
items[0].parentNode.style.minHeight = taller + 'px'
|
items[0].parentNode.style.minHeight = taller + "px";
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clear autorotate
|
// Clear autorotate
|
||||||
function clearAutorotate(autorotate) {
|
function clearAutorotate(autorotate) {
|
||||||
if (autorotate) {
|
if (autorotate) {
|
||||||
clearInterval(autorotate)
|
clearInterval(autorotate);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (carousels.length > 0) {
|
if (carousels.length > 0) {
|
||||||
for (let i = 0; i < carousels.length; i++) {
|
for (let i = 0; i < carousels.length; i++) {
|
||||||
let carousel = carousels[i]
|
let carousel = carousels[i];
|
||||||
let items = carousel.getElementsByClassName('carousel-item')
|
let items = carousel.getElementsByClassName("carousel-item");
|
||||||
let activeItem = 0
|
let activeItem = 0;
|
||||||
let autorotateTiming = carousel.getAttribute('data-autorotate')
|
let autorotateTiming = carousel.getAttribute("data-autorotate");
|
||||||
// Generate bullets container
|
// Generate bullets container
|
||||||
const bulletsContainer = document.createElement('div')
|
const bulletsContainer = document.createElement("div");
|
||||||
bulletsContainer.className = 'carousel-bullets'
|
bulletsContainer.className = "carousel-bullets";
|
||||||
carousel.parentNode.insertBefore(bulletsContainer, carousel.nextSibling)
|
carousel.parentNode.insertBefore(bulletsContainer, carousel.nextSibling);
|
||||||
for (let i = 0; i < items.length; i++) {
|
for (let i = 0; i < items.length; i++) {
|
||||||
// Add data attributes
|
// Add data attributes
|
||||||
items[i].setAttribute('data-carousel', i)
|
items[i].setAttribute("data-carousel", i);
|
||||||
// Determine a new active item, if any
|
// Determine a new active item, if any
|
||||||
if (items[i].classList.contains('is-active')) activeItem = i
|
if (items[i].classList.contains("is-active")) activeItem = i;
|
||||||
// Generate bullets
|
// Generate bullets
|
||||||
let bullet = document.createElement('button')
|
let bullet = document.createElement("button");
|
||||||
bullet.className = 'carousel-bullet'
|
bullet.className = "carousel-bullet";
|
||||||
bullet.setAttribute('data-bullet', i)
|
bullet.setAttribute("data-bullet", i);
|
||||||
carousel.parentNode.getElementsByClassName('carousel-bullets')[0].appendChild(bullet)
|
carousel.parentNode
|
||||||
|
.getElementsByClassName("carousel-bullets")[0]
|
||||||
|
.appendChild(bullet);
|
||||||
}
|
}
|
||||||
// Add is-active class to first carousel item and bullet
|
// Add is-active class to first carousel item and bullet
|
||||||
items[activeItem].classList.add('is-active')
|
items[activeItem].classList.add("is-active");
|
||||||
let bullets = carousel.parentNode.getElementsByClassName('carousel-bullet')
|
let bullets = carousel.parentNode.getElementsByClassName(
|
||||||
bullets[activeItem].classList.add('is-active')
|
"carousel-bullet"
|
||||||
|
);
|
||||||
|
bullets[activeItem].classList.add("is-active");
|
||||||
// Equal height items
|
// Equal height items
|
||||||
equalHeightCarousel(carousel, items)
|
equalHeightCarousel(carousel, items);
|
||||||
window.addEventListener('resize', function () {
|
window.addEventListener("resize", function () {
|
||||||
equalHeightCarousel(carousel, items)
|
equalHeightCarousel(carousel, items);
|
||||||
})
|
});
|
||||||
// Autorotate
|
// Autorotate
|
||||||
let autorotate = false
|
let autorotate = false;
|
||||||
if (autorotateTiming) {
|
if (autorotateTiming) {
|
||||||
autorotate = setInterval(function () {
|
autorotate = setInterval(function () {
|
||||||
rotateCarousel(carousel, 'next')
|
rotateCarousel(carousel, "next");
|
||||||
}, autorotateTiming)
|
}, autorotateTiming);
|
||||||
}
|
}
|
||||||
// Rotate by bullet click
|
// Rotate by bullet click
|
||||||
for (let i = 0; i < bullets.length; i++) {
|
for (let i = 0; i < bullets.length; i++) {
|
||||||
let bullet = bullets[i]
|
let bullet = bullets[i];
|
||||||
bullet.addEventListener('click', function (e) {
|
bullet.addEventListener("click", function (e) {
|
||||||
e.preventDefault()
|
e.preventDefault();
|
||||||
// Do nothing if item is active
|
// Do nothing if item is active
|
||||||
if (bullet.classList.contains('is-active')) {
|
if (bullet.classList.contains("is-active")) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
// Remove active classes
|
// Remove active classes
|
||||||
for (let i = 0; i < bullets.length; i++) {
|
for (let i = 0; i < bullets.length; i++) {
|
||||||
bullets[i].classList.remove('is-active')
|
bullets[i].classList.remove("is-active");
|
||||||
}
|
}
|
||||||
for (let i = 0; i < items.length; i++) {
|
for (let i = 0; i < items.length; i++) {
|
||||||
items[i].classList.remove('is-active')
|
items[i].classList.remove("is-active");
|
||||||
}
|
}
|
||||||
// Add active classes to corresponding items and bullets
|
// Add active classes to corresponding items and bullets
|
||||||
let index = this.getAttribute('data-bullet')
|
let index = this.getAttribute("data-bullet");
|
||||||
items[index].classList.add('is-active')
|
items[index].classList.add("is-active");
|
||||||
this.classList.add('is-active')
|
this.classList.add("is-active");
|
||||||
// Clear autorotate timing
|
// Clear autorotate timing
|
||||||
clearAutorotate(autorotate)
|
clearAutorotate(autorotate);
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
// Rotate on swipe
|
// Rotate on swipe
|
||||||
swipe.init(carousel, function (e) {
|
swipe.init(carousel, function (e) {
|
||||||
if (e.direction === 'left') {
|
if (e.direction === "left") {
|
||||||
rotateCarousel(carousel, 'next')
|
rotateCarousel(carousel, "next");
|
||||||
} else if (e.direction === 'right') {
|
} else if (e.direction === "right") {
|
||||||
rotateCarousel(carousel, 'prev')
|
rotateCarousel(carousel, "prev");
|
||||||
}
|
}
|
||||||
// Clear autorotate timing
|
// Clear autorotate timing
|
||||||
clearAutorotate(autorotate)
|
clearAutorotate(autorotate);
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}())
|
})();
|
||||||
|
|||||||
1141
public/js/chat.js
1141
public/js/chat.js
File diff suppressed because it is too large
Load Diff
@ -1,196 +1,340 @@
|
|||||||
!function () {
|
!(function () {
|
||||||
"use strict";
|
"use strict";
|
||||||
const e = document.getElementsByClassName("accordion-header");
|
const e = document.getElementsByClassName("accordion-header");
|
||||||
|
|
||||||
function t(e, t) {
|
function t(e, t) {
|
||||||
e.classList.add("is-active"), t.style.maxHeight = t.scrollHeight + "px"
|
e.classList.add("is-active"), (t.style.maxHeight = t.scrollHeight + "px");
|
||||||
}
|
}
|
||||||
|
|
||||||
function n(e, t) {
|
function n(e, t) {
|
||||||
e.classList.remove("is-active"), t.style.maxHeight = null
|
e.classList.remove("is-active"), (t.style.maxHeight = null);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (e.length > 0) for (let i = 0; i < e.length; i++) {
|
if (e.length > 0)
|
||||||
const s = e[i], a = s.parentNode, l = s.nextElementSibling;
|
for (let i = 0; i < e.length; i++) {
|
||||||
a.classList.contains("is-active") && t(a, l), s.addEventListener("click", function () {
|
const s = e[i],
|
||||||
a.classList.contains("is-active") ? n(a, l) : t(a, l)
|
a = s.parentNode,
|
||||||
})
|
l = s.nextElementSibling;
|
||||||
}
|
a.classList.contains("is-active") && t(a, l),
|
||||||
}(), function () {
|
s.addEventListener("click", function () {
|
||||||
"use strict";
|
a.classList.contains("is-active") ? n(a, l) : t(a, l);
|
||||||
let e = {
|
});
|
||||||
touchStartX: 0, touchEndX: 0, minSwipePixels: 30, detectionZone: void 0, swipeCallback: function () {
|
|
||||||
}, init: function (t, n) {
|
|
||||||
e.swipeCallback = n, t.addEventListener("touchstart", function (t) {
|
|
||||||
e.touchStartX = t.changedTouches[0].screenX
|
|
||||||
}, !1), t.addEventListener("touchend", function (t) {
|
|
||||||
e.touchEndX = t.changedTouches[0].screenX, e.handleSwipeGesture()
|
|
||||||
}, !1)
|
|
||||||
}, handleSwipeGesture: function () {
|
|
||||||
let t, n;
|
|
||||||
e.touchEndX <= e.touchStartX && (n = e.touchStartX - e.touchEndX, t = "left"), e.touchEndX >= e.touchStartX && (n = e.touchEndX - e.touchStartX, t = "right"), n > e.minSwipePixels && "undefined" !== t && e.swipe(t, n)
|
|
||||||
}, swipe: function (t, n) {
|
|
||||||
let i = {};
|
|
||||||
i.direction = t, i.movedPixels = n, e.swipeCallback(i)
|
|
||||||
}
|
}
|
||||||
};
|
})(),
|
||||||
const t = document.getElementsByClassName("carousel-items");
|
(function () {
|
||||||
|
"use strict";
|
||||||
|
let e = {
|
||||||
|
touchStartX: 0,
|
||||||
|
touchEndX: 0,
|
||||||
|
minSwipePixels: 30,
|
||||||
|
detectionZone: void 0,
|
||||||
|
swipeCallback: function () {},
|
||||||
|
init: function (t, n) {
|
||||||
|
(e.swipeCallback = n),
|
||||||
|
t.addEventListener(
|
||||||
|
"touchstart",
|
||||||
|
function (t) {
|
||||||
|
e.touchStartX = t.changedTouches[0].screenX;
|
||||||
|
},
|
||||||
|
!1
|
||||||
|
),
|
||||||
|
t.addEventListener(
|
||||||
|
"touchend",
|
||||||
|
function (t) {
|
||||||
|
(e.touchEndX = t.changedTouches[0].screenX),
|
||||||
|
e.handleSwipeGesture();
|
||||||
|
},
|
||||||
|
!1
|
||||||
|
);
|
||||||
|
},
|
||||||
|
handleSwipeGesture: function () {
|
||||||
|
let t, n;
|
||||||
|
e.touchEndX <= e.touchStartX &&
|
||||||
|
((n = e.touchStartX - e.touchEndX), (t = "left")),
|
||||||
|
e.touchEndX >= e.touchStartX &&
|
||||||
|
((n = e.touchEndX - e.touchStartX), (t = "right")),
|
||||||
|
n > e.minSwipePixels && "undefined" !== t && e.swipe(t, n);
|
||||||
|
},
|
||||||
|
swipe: function (t, n) {
|
||||||
|
let i = {};
|
||||||
|
(i.direction = t), (i.movedPixels = n), e.swipeCallback(i);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const t = document.getElementsByClassName("carousel-items");
|
||||||
|
|
||||||
function n(e, t) {
|
function n(e, t) {
|
||||||
void 0 === t && (t = "next");
|
void 0 === t && (t = "next");
|
||||||
let n = e.getElementsByClassName("carousel-item is-active")[0],
|
let n = e.getElementsByClassName("carousel-item is-active")[0],
|
||||||
i = "next" === t ? n.nextElementSibling : n.previousElementSibling, s = n.getAttribute("data-carousel"),
|
i = "next" === t ? n.nextElementSibling : n.previousElementSibling,
|
||||||
|
s = n.getAttribute("data-carousel"),
|
||||||
a = e.parentNode.getElementsByClassName("carousel-bullet")[s],
|
a = e.parentNode.getElementsByClassName("carousel-bullet")[s],
|
||||||
l = "next" === t ? a.nextElementSibling : a.previousElementSibling;
|
l = "next" === t ? a.nextElementSibling : a.previousElementSibling;
|
||||||
n.classList.remove("is-active"), a.classList.remove("is-active"), i ? (i.classList.add("is-active"), l.classList.add("is-active")) : "next" === t ? (e.firstElementChild.classList.add("is-active"), e.parentNode.getElementsByClassName("carousel-bullets")[0].firstElementChild.classList.add("is-active")) : (e.lastElementChild.classList.add("is-active"), e.parentNode.getElementsByClassName("carousel-bullets")[0].lastElementChild.classList.add("is-active"))
|
n.classList.remove("is-active"),
|
||||||
}
|
a.classList.remove("is-active"),
|
||||||
|
i
|
||||||
function i(e, t) {
|
? (i.classList.add("is-active"), l.classList.add("is-active"))
|
||||||
let n, i = 0;
|
: "next" === t
|
||||||
for (let e = 0; e < t.length; e++) t[0].parentNode.style.minHeight = i + "px", t[e].classList.add("is-loading"), n = t[e].offsetHeight, t[e].classList.remove("is-loading"), n > i && (i = n);
|
? (e.firstElementChild.classList.add("is-active"),
|
||||||
t[0].parentNode.style.minHeight = i + "px"
|
e.parentNode
|
||||||
}
|
.getElementsByClassName("carousel-bullets")[0]
|
||||||
|
.firstElementChild.classList.add("is-active"))
|
||||||
function s(e) {
|
: (e.lastElementChild.classList.add("is-active"),
|
||||||
e && clearInterval(e)
|
e.parentNode
|
||||||
}
|
.getElementsByClassName("carousel-bullets")[0]
|
||||||
|
.lastElementChild.classList.add("is-active"));
|
||||||
if (t.length > 0) for (let a = 0; a < t.length; a++) {
|
|
||||||
let l = t[a], c = l.getElementsByClassName("carousel-item"), o = 0, r = l.getAttribute("data-autorotate");
|
|
||||||
const d = document.createElement("div");
|
|
||||||
d.className = "carousel-bullets", l.parentNode.insertBefore(d, l.nextSibling);
|
|
||||||
for (let e = 0; e < c.length; e++) {
|
|
||||||
c[e].setAttribute("data-carousel", e), c[e].classList.contains("is-active") && (o = e);
|
|
||||||
let t = document.createElement("button");
|
|
||||||
t.className = "carousel-bullet", t.setAttribute("data-bullet", e), l.parentNode.getElementsByClassName("carousel-bullets")[0].appendChild(t)
|
|
||||||
}
|
}
|
||||||
c[o].classList.add("is-active");
|
|
||||||
let u = l.parentNode.getElementsByClassName("carousel-bullet");
|
function i(e, t) {
|
||||||
u[o].classList.add("is-active"), i(0, c), window.addEventListener("resize", function () {
|
let n,
|
||||||
i(0, c)
|
i = 0;
|
||||||
});
|
for (let e = 0; e < t.length; e++)
|
||||||
let m = !1;
|
(t[0].parentNode.style.minHeight = i + "px"),
|
||||||
r && (m = setInterval(function () {
|
t[e].classList.add("is-loading"),
|
||||||
n(l, "next")
|
(n = t[e].offsetHeight),
|
||||||
}, r));
|
t[e].classList.remove("is-loading"),
|
||||||
for (let e = 0; e < u.length; e++) {
|
n > i && (i = n);
|
||||||
let t = u[e];
|
t[0].parentNode.style.minHeight = i + "px";
|
||||||
t.addEventListener("click", function (e) {
|
|
||||||
if (e.preventDefault(), t.classList.contains("is-active")) return;
|
|
||||||
for (let e = 0; e < u.length; e++) u[e].classList.remove("is-active");
|
|
||||||
for (let e = 0; e < c.length; e++) c[e].classList.remove("is-active");
|
|
||||||
let n = this.getAttribute("data-bullet");
|
|
||||||
c[n].classList.add("is-active"), this.classList.add("is-active"), s(m)
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
e.init(l, function (e) {
|
|
||||||
"left" === e.direction ? n(l, "next") : "right" === e.direction && n(l, "prev"), s(m)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}(), function () {
|
|
||||||
"use strict";
|
|
||||||
document.documentElement.classList.remove("no-js"), document.documentElement.classList.add("js"), window.addEventListener("load", function () {
|
|
||||||
document.body.classList.add("is-loaded")
|
|
||||||
})
|
|
||||||
}(), function () {
|
|
||||||
"use strict";
|
|
||||||
const e = document.getElementById("header-nav-toggle"), t = document.getElementById("header-nav");
|
|
||||||
e && (e.addEventListener("click", function () {
|
|
||||||
document.body.classList.toggle("off-nav-is-active"), t.classList.toggle("is-active"), t.style.maxHeight ? t.style.maxHeight = null : t.style.maxHeight = t.scrollHeight + "px", "true" === this.getAttribute("aria-expanded") ? this.setAttribute("aria-expanded", "false") : this.setAttribute("aria-expanded", "true")
|
|
||||||
}), document.addEventListener("click", function (n) {
|
|
||||||
n.target === t || n.target === e || t.contains(n.target) || (document.body.classList.remove("off-nav-is-active"), t.classList.remove("is-active"), t.style.maxHeight = null, e.setAttribute("aria-expanded", "false"))
|
|
||||||
}))
|
|
||||||
}(), function () {
|
|
||||||
"use strict";
|
|
||||||
const e = document.getElementsByClassName("modal"), t = document.getElementsByClassName("modal-trigger");
|
|
||||||
|
|
||||||
function n() {
|
function s(e) {
|
||||||
document.body.classList.remove("modal-is-active");
|
e && clearInterval(e);
|
||||||
for (let t = 0; t < e.length; t++) e[t].classList.remove("is-active")
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.length > 0 && t.length > 0) for (let e = 0; e < t.length; e++) {
|
|
||||||
let n = t[e], i = document.getElementById(n.getAttribute("aria-controls"));
|
|
||||||
i && (n.hasAttribute("data-video") && (null !== i.querySelector("iframe") ? i.querySelector("iframe").setAttribute("src", n.getAttribute("data-video")) : null !== i.querySelector("video") && i.querySelector("video").setAttribute("src", n.getAttribute("data-video"))), n.addEventListener("click", function (e) {
|
|
||||||
var t;
|
|
||||||
e.preventDefault(), n.hasAttribute("aria-controls") && (t = i) && (document.body.classList.add("modal-is-active"), t.classList.add("is-active"))
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
document.addEventListener("click", function (e) {
|
|
||||||
(e.target.classList.contains("modal") || e.target.classList.contains("modal-close-trigger")) && (e.preventDefault(), n())
|
|
||||||
}), document.addEventListener("keydown", function (e) {
|
|
||||||
27 === (e || window.event).keyCode && n()
|
|
||||||
})
|
|
||||||
}(), function () {
|
|
||||||
"use strict";
|
|
||||||
const e = document.getElementById("pricing-toggle");
|
|
||||||
|
|
||||||
function t() {
|
|
||||||
const t = document.getElementsByClassName("pricing-switchable");
|
|
||||||
if (e.checked) for (let e = 0; e < t.length; e++) t[e].innerHTML = t[e].getAttribute("data-pricing-yearly"); else for (let e = 0; e < t.length; e++) t[e].innerHTML = t[e].getAttribute("data-pricing-monthly")
|
|
||||||
}
|
|
||||||
|
|
||||||
e && (window.addEventListener("load", t), e.addEventListener("change", t))
|
|
||||||
}(), function () {
|
|
||||||
"use strict";
|
|
||||||
const e = document.querySelectorAll("[class*=reveal-]");
|
|
||||||
let t = window.innerHeight;
|
|
||||||
|
|
||||||
function n(e, t) {
|
|
||||||
var n = 0;
|
|
||||||
return function () {
|
|
||||||
var i = (new Date).getTime();
|
|
||||||
if (!(i - n < e)) return n = i, t.apply(void 0, arguments)
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function i() {
|
if (t.length > 0)
|
||||||
for (let i = 0; i < e.length; i++) {
|
for (let a = 0; a < t.length; a++) {
|
||||||
let s = e[i], a = s.getAttribute("data-reveal-delay"),
|
let l = t[a],
|
||||||
l = s.getAttribute("data-reveal-offset") ? s.getAttribute("data-reveal-offset") : "200",
|
c = l.getElementsByClassName("carousel-item"),
|
||||||
c = s.getAttribute("data-reveal-container") ? s.closest(s.getAttribute("data-reveal-container")) : s;
|
o = 0,
|
||||||
n = l, c.getBoundingClientRect().top <= t - n && !s.classList.contains("is-revealed") && (a && 0 !== a ? setTimeout(function () {
|
r = l.getAttribute("data-autorotate");
|
||||||
s.classList.add("is-revealed")
|
const d = document.createElement("div");
|
||||||
}, a) : s.classList.add("is-revealed"))
|
(d.className = "carousel-bullets"),
|
||||||
|
l.parentNode.insertBefore(d, l.nextSibling);
|
||||||
|
for (let e = 0; e < c.length; e++) {
|
||||||
|
c[e].setAttribute("data-carousel", e),
|
||||||
|
c[e].classList.contains("is-active") && (o = e);
|
||||||
|
let t = document.createElement("button");
|
||||||
|
(t.className = "carousel-bullet"),
|
||||||
|
t.setAttribute("data-bullet", e),
|
||||||
|
l.parentNode
|
||||||
|
.getElementsByClassName("carousel-bullets")[0]
|
||||||
|
.appendChild(t);
|
||||||
|
}
|
||||||
|
c[o].classList.add("is-active");
|
||||||
|
let u = l.parentNode.getElementsByClassName("carousel-bullet");
|
||||||
|
u[o].classList.add("is-active"),
|
||||||
|
i(0, c),
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
i(0, c);
|
||||||
|
});
|
||||||
|
let m = !1;
|
||||||
|
r &&
|
||||||
|
(m = setInterval(function () {
|
||||||
|
n(l, "next");
|
||||||
|
}, r));
|
||||||
|
for (let e = 0; e < u.length; e++) {
|
||||||
|
let t = u[e];
|
||||||
|
t.addEventListener("click", function (e) {
|
||||||
|
if ((e.preventDefault(), t.classList.contains("is-active"))) return;
|
||||||
|
for (let e = 0; e < u.length; e++)
|
||||||
|
u[e].classList.remove("is-active");
|
||||||
|
for (let e = 0; e < c.length; e++)
|
||||||
|
c[e].classList.remove("is-active");
|
||||||
|
let n = this.getAttribute("data-bullet");
|
||||||
|
c[n].classList.add("is-active"),
|
||||||
|
this.classList.add("is-active"),
|
||||||
|
s(m);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
e.init(l, function (e) {
|
||||||
|
"left" === e.direction
|
||||||
|
? n(l, "next")
|
||||||
|
: "right" === e.direction && n(l, "prev"),
|
||||||
|
s(m);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})(),
|
||||||
|
(function () {
|
||||||
|
"use strict";
|
||||||
|
document.documentElement.classList.remove("no-js"),
|
||||||
|
document.documentElement.classList.add("js"),
|
||||||
|
window.addEventListener("load", function () {
|
||||||
|
document.body.classList.add("is-loaded");
|
||||||
|
});
|
||||||
|
})(),
|
||||||
|
(function () {
|
||||||
|
"use strict";
|
||||||
|
const e = document.getElementById("header-nav-toggle"),
|
||||||
|
t = document.getElementById("header-nav");
|
||||||
|
e &&
|
||||||
|
(e.addEventListener("click", function () {
|
||||||
|
document.body.classList.toggle("off-nav-is-active"),
|
||||||
|
t.classList.toggle("is-active"),
|
||||||
|
t.style.maxHeight
|
||||||
|
? (t.style.maxHeight = null)
|
||||||
|
: (t.style.maxHeight = t.scrollHeight + "px"),
|
||||||
|
"true" === this.getAttribute("aria-expanded")
|
||||||
|
? this.setAttribute("aria-expanded", "false")
|
||||||
|
: this.setAttribute("aria-expanded", "true");
|
||||||
|
}),
|
||||||
|
document.addEventListener("click", function (n) {
|
||||||
|
n.target === t ||
|
||||||
|
n.target === e ||
|
||||||
|
t.contains(n.target) ||
|
||||||
|
(document.body.classList.remove("off-nav-is-active"),
|
||||||
|
t.classList.remove("is-active"),
|
||||||
|
(t.style.maxHeight = null),
|
||||||
|
e.setAttribute("aria-expanded", "false"));
|
||||||
|
}));
|
||||||
|
})(),
|
||||||
|
(function () {
|
||||||
|
"use strict";
|
||||||
|
const e = document.getElementsByClassName("modal"),
|
||||||
|
t = document.getElementsByClassName("modal-trigger");
|
||||||
|
|
||||||
|
function n() {
|
||||||
|
document.body.classList.remove("modal-is-active");
|
||||||
|
for (let t = 0; t < e.length; t++) e[t].classList.remove("is-active");
|
||||||
}
|
}
|
||||||
var n;
|
|
||||||
!function () {
|
|
||||||
if (e.length > document.querySelectorAll("[class*=reveal-].is-revealed").length) return;
|
|
||||||
window.removeEventListener("load", i), window.removeEventListener("scroll", s), window.removeEventListener("resize", a)
|
|
||||||
}()
|
|
||||||
}
|
|
||||||
|
|
||||||
function s() {
|
if (e.length > 0 && t.length > 0)
|
||||||
n(30, i())
|
for (let e = 0; e < t.length; e++) {
|
||||||
}
|
let n = t[e],
|
||||||
|
i = document.getElementById(n.getAttribute("aria-controls"));
|
||||||
|
i &&
|
||||||
|
(n.hasAttribute("data-video") &&
|
||||||
|
(null !== i.querySelector("iframe")
|
||||||
|
? i
|
||||||
|
.querySelector("iframe")
|
||||||
|
.setAttribute("src", n.getAttribute("data-video"))
|
||||||
|
: null !== i.querySelector("video") &&
|
||||||
|
i
|
||||||
|
.querySelector("video")
|
||||||
|
.setAttribute("src", n.getAttribute("data-video"))),
|
||||||
|
n.addEventListener("click", function (e) {
|
||||||
|
var t;
|
||||||
|
e.preventDefault(),
|
||||||
|
n.hasAttribute("aria-controls") &&
|
||||||
|
(t = i) &&
|
||||||
|
(document.body.classList.add("modal-is-active"),
|
||||||
|
t.classList.add("is-active"));
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
document.addEventListener("click", function (e) {
|
||||||
|
(e.target.classList.contains("modal") ||
|
||||||
|
e.target.classList.contains("modal-close-trigger")) &&
|
||||||
|
(e.preventDefault(), n());
|
||||||
|
}),
|
||||||
|
document.addEventListener("keydown", function (e) {
|
||||||
|
27 === (e || window.event).keyCode && n();
|
||||||
|
});
|
||||||
|
})(),
|
||||||
|
(function () {
|
||||||
|
"use strict";
|
||||||
|
const e = document.getElementById("pricing-toggle");
|
||||||
|
|
||||||
function a() {
|
function t() {
|
||||||
t = window.innerHeight, n(30, i())
|
const t = document.getElementsByClassName("pricing-switchable");
|
||||||
}
|
if (e.checked)
|
||||||
|
for (let e = 0; e < t.length; e++)
|
||||||
|
t[e].innerHTML = t[e].getAttribute("data-pricing-yearly");
|
||||||
|
else
|
||||||
|
for (let e = 0; e < t.length; e++)
|
||||||
|
t[e].innerHTML = t[e].getAttribute("data-pricing-monthly");
|
||||||
|
}
|
||||||
|
|
||||||
e.length > 0 && document.body.classList.contains("has-animations") && (window.addEventListener("load", i), window.addEventListener("scroll", s), window.addEventListener("resize", a))
|
e && (window.addEventListener("load", t), e.addEventListener("change", t));
|
||||||
}(), function () {
|
})(),
|
||||||
"use strict";
|
(function () {
|
||||||
const e = document.getElementsByClassName("smooth-scroll"), t = (e, n, i, s, a) => {
|
"use strict";
|
||||||
const l = n - e;
|
const e = document.querySelectorAll("[class*=reveal-]");
|
||||||
let c = l / i;
|
let t = window.innerHeight;
|
||||||
const o = function (e) {
|
|
||||||
return e < .5 ? 2 * e * e : (4 - 2 * e) * e - 1
|
function n(e, t) {
|
||||||
}(c = Math.min(c, 1));
|
var n = 0;
|
||||||
window.scroll(0, a + s * o), l < i && window.requestAnimationFrame(n => {
|
return function () {
|
||||||
const l = n || (new Date).getTime();
|
var i = new Date().getTime();
|
||||||
t(e, l, i, s, a)
|
if (!(i - n < e)) return (n = i), t.apply(void 0, arguments);
|
||||||
})
|
};
|
||||||
};
|
}
|
||||||
if (e.length > 0) for (let n = 0; n < e.length; n++) {
|
|
||||||
e[n].addEventListener("click", function (e) {
|
function i() {
|
||||||
e.preventDefault();
|
for (let i = 0; i < e.length; i++) {
|
||||||
const n = e.target.closest(".smooth-scroll"), i = n.href.split("#")[1], s = document.getElementById(i),
|
let s = e[i],
|
||||||
a = n.getAttribute("data-duration") || 1e3;
|
a = s.getAttribute("data-reveal-delay"),
|
||||||
s && window.requestAnimationFrame(e => {
|
l = s.getAttribute("data-reveal-offset")
|
||||||
const n = e || (new Date).getTime(), i = n, l = window.pageYOffset, c = s.getBoundingClientRect().top;
|
? s.getAttribute("data-reveal-offset")
|
||||||
t(i, n, a, c, l)
|
: "200",
|
||||||
})
|
c = s.getAttribute("data-reveal-container")
|
||||||
})
|
? s.closest(s.getAttribute("data-reveal-container"))
|
||||||
}
|
: s;
|
||||||
}();
|
(n = l),
|
||||||
|
c.getBoundingClientRect().top <= t - n &&
|
||||||
|
!s.classList.contains("is-revealed") &&
|
||||||
|
(a && 0 !== a
|
||||||
|
? setTimeout(function () {
|
||||||
|
s.classList.add("is-revealed");
|
||||||
|
}, a)
|
||||||
|
: s.classList.add("is-revealed"));
|
||||||
|
}
|
||||||
|
var n;
|
||||||
|
!(function () {
|
||||||
|
if (
|
||||||
|
e.length >
|
||||||
|
document.querySelectorAll("[class*=reveal-].is-revealed").length
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
window.removeEventListener("load", i),
|
||||||
|
window.removeEventListener("scroll", s),
|
||||||
|
window.removeEventListener("resize", a);
|
||||||
|
})();
|
||||||
|
}
|
||||||
|
|
||||||
|
function s() {
|
||||||
|
n(30, i());
|
||||||
|
}
|
||||||
|
|
||||||
|
function a() {
|
||||||
|
(t = window.innerHeight), n(30, i());
|
||||||
|
}
|
||||||
|
|
||||||
|
e.length > 0 &&
|
||||||
|
document.body.classList.contains("has-animations") &&
|
||||||
|
(window.addEventListener("load", i),
|
||||||
|
window.addEventListener("scroll", s),
|
||||||
|
window.addEventListener("resize", a));
|
||||||
|
})(),
|
||||||
|
(function () {
|
||||||
|
"use strict";
|
||||||
|
const e = document.getElementsByClassName("smooth-scroll"),
|
||||||
|
t = (e, n, i, s, a) => {
|
||||||
|
const l = n - e;
|
||||||
|
let c = l / i;
|
||||||
|
const o = (function (e) {
|
||||||
|
return e < 0.5 ? 2 * e * e : (4 - 2 * e) * e - 1;
|
||||||
|
})((c = Math.min(c, 1)));
|
||||||
|
window.scroll(0, a + s * o),
|
||||||
|
l < i &&
|
||||||
|
window.requestAnimationFrame((n) => {
|
||||||
|
const l = n || new Date().getTime();
|
||||||
|
t(e, l, i, s, a);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
if (e.length > 0)
|
||||||
|
for (let n = 0; n < e.length; n++) {
|
||||||
|
e[n].addEventListener("click", function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const n = e.target.closest(".smooth-scroll"),
|
||||||
|
i = n.href.split("#")[1],
|
||||||
|
s = document.getElementById(i),
|
||||||
|
a = n.getAttribute("data-duration") || 1e3;
|
||||||
|
s &&
|
||||||
|
window.requestAnimationFrame((e) => {
|
||||||
|
const n = e || new Date().getTime(),
|
||||||
|
i = n,
|
||||||
|
l = window.pageYOffset,
|
||||||
|
c = s.getBoundingClientRect().top;
|
||||||
|
t(i, n, a, c, l);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|||||||
@ -1,28 +1,34 @@
|
|||||||
;(function () {
|
(function () {
|
||||||
'use strict'
|
"use strict";
|
||||||
const navToggle = document.getElementById('header-nav-toggle')
|
const navToggle = document.getElementById("header-nav-toggle");
|
||||||
const mainNav = document.getElementById('header-nav')
|
const mainNav = document.getElementById("header-nav");
|
||||||
|
|
||||||
if (navToggle) {
|
if (navToggle) {
|
||||||
// Open menu
|
// Open menu
|
||||||
navToggle.addEventListener('click', function () {
|
navToggle.addEventListener("click", function () {
|
||||||
document.body.classList.toggle('off-nav-is-active')
|
document.body.classList.toggle("off-nav-is-active");
|
||||||
mainNav.classList.toggle('is-active')
|
mainNav.classList.toggle("is-active");
|
||||||
if (mainNav.style.maxHeight) {
|
if (mainNav.style.maxHeight) {
|
||||||
mainNav.style.maxHeight = null
|
mainNav.style.maxHeight = null;
|
||||||
} else {
|
} else {
|
||||||
mainNav.style.maxHeight = mainNav.scrollHeight + 'px'
|
mainNav.style.maxHeight = mainNav.scrollHeight + "px";
|
||||||
}
|
}
|
||||||
this.getAttribute('aria-expanded') === 'true' ? this.setAttribute('aria-expanded', 'false') : this.setAttribute('aria-expanded', 'true')
|
this.getAttribute("aria-expanded") === "true"
|
||||||
})
|
? this.setAttribute("aria-expanded", "false")
|
||||||
|
: this.setAttribute("aria-expanded", "true");
|
||||||
|
});
|
||||||
// Close menu
|
// Close menu
|
||||||
document.addEventListener('click', function (e) {
|
document.addEventListener("click", function (e) {
|
||||||
if (e.target !== mainNav && e.target !== navToggle && !mainNav.contains(e.target)) {
|
if (
|
||||||
document.body.classList.remove('off-nav-is-active')
|
e.target !== mainNav &&
|
||||||
mainNav.classList.remove('is-active')
|
e.target !== navToggle &&
|
||||||
mainNav.style.maxHeight = null
|
!mainNav.contains(e.target)
|
||||||
navToggle.setAttribute('aria-expanded', 'false')
|
) {
|
||||||
|
document.body.classList.remove("off-nav-is-active");
|
||||||
|
mainNav.classList.remove("is-active");
|
||||||
|
mainNav.style.maxHeight = null;
|
||||||
|
navToggle.setAttribute("aria-expanded", "false");
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
}())
|
})();
|
||||||
|
|||||||
@ -1,56 +1,65 @@
|
|||||||
;(function () {
|
(function () {
|
||||||
'use strict'
|
"use strict";
|
||||||
const modals = document.getElementsByClassName('modal')
|
const modals = document.getElementsByClassName("modal");
|
||||||
const modalTriggers = document.getElementsByClassName('modal-trigger')
|
const modalTriggers = document.getElementsByClassName("modal-trigger");
|
||||||
|
|
||||||
function openModal (el) {
|
function openModal(el) {
|
||||||
if (el) {
|
if (el) {
|
||||||
document.body.classList.add('modal-is-active')
|
document.body.classList.add("modal-is-active");
|
||||||
el.classList.add('is-active')
|
el.classList.add("is-active");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeModals () {
|
function closeModals() {
|
||||||
document.body.classList.remove('modal-is-active')
|
document.body.classList.remove("modal-is-active");
|
||||||
for (let i = 0; i < modals.length; i++) {
|
for (let i = 0; i < modals.length; i++) {
|
||||||
modals[i].classList.remove('is-active')
|
modals[i].classList.remove("is-active");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (modals.length > 0 && modalTriggers.length > 0) {
|
if (modals.length > 0 && modalTriggers.length > 0) {
|
||||||
for (let i = 0; i < modalTriggers.length; i++) {
|
for (let i = 0; i < modalTriggers.length; i++) {
|
||||||
let modalTrigger = modalTriggers[i]
|
let modalTrigger = modalTriggers[i];
|
||||||
let modal = document.getElementById(modalTrigger.getAttribute('aria-controls'))
|
let modal = document.getElementById(
|
||||||
|
modalTrigger.getAttribute("aria-controls")
|
||||||
|
);
|
||||||
if (modal) {
|
if (modal) {
|
||||||
// Modal video
|
// Modal video
|
||||||
if (modalTrigger.hasAttribute('data-video')) {
|
if (modalTrigger.hasAttribute("data-video")) {
|
||||||
if (modal.querySelector('iframe') !== null) {
|
if (modal.querySelector("iframe") !== null) {
|
||||||
modal.querySelector('iframe').setAttribute('src', modalTrigger.getAttribute('data-video'))
|
modal
|
||||||
} else if (modal.querySelector('video') !== null) {
|
.querySelector("iframe")
|
||||||
modal.querySelector('video').setAttribute('src', modalTrigger.getAttribute('data-video'))
|
.setAttribute("src", modalTrigger.getAttribute("data-video"));
|
||||||
|
} else if (modal.querySelector("video") !== null) {
|
||||||
|
modal
|
||||||
|
.querySelector("video")
|
||||||
|
.setAttribute("src", modalTrigger.getAttribute("data-video"));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
modalTrigger.addEventListener('click', function (e) {
|
modalTrigger.addEventListener("click", function (e) {
|
||||||
e.preventDefault()
|
e.preventDefault();
|
||||||
if (modalTrigger.hasAttribute('aria-controls')) {
|
if (modalTrigger.hasAttribute("aria-controls")) {
|
||||||
openModal(modal)
|
openModal(modal);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('click', function (e) {
|
document.addEventListener("click", function (e) {
|
||||||
if (e.target.classList.contains('modal') || e.target.classList.contains('modal-close-trigger')) {
|
if (
|
||||||
e.preventDefault()
|
e.target.classList.contains("modal") ||
|
||||||
closeModals()
|
e.target.classList.contains("modal-close-trigger")
|
||||||
|
) {
|
||||||
|
e.preventDefault();
|
||||||
|
closeModals();
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
document.addEventListener('keydown', function (event) {
|
document.addEventListener("keydown", function (event) {
|
||||||
var e = event || window.event
|
var e = event || window.event;
|
||||||
if (e.keyCode === 27) {
|
if (e.keyCode === 27) {
|
||||||
closeModals()
|
closeModals();
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}())
|
})();
|
||||||
|
|||||||
@ -1,16 +1,124 @@
|
|||||||
var adjectives = ["small", "big", "large", "smelly", "new", "happy", "shiny", "old", "clean", "nice", "bad", "cool",
|
var adjectives = [
|
||||||
"hot", "cold", "warm", "hungry", "slow", "fast", "red", "white", "black", "blue", "green", "basic", "strong",
|
"small",
|
||||||
"cute", "poor", "nice", "huge", "rare", "lucky", "weak", "tall", "short", "tiny", "great", "long", "single", "rich",
|
"big",
|
||||||
"young", "dirty", "fresh", "brown", "dark", "crazy", "sad", "loud", "brave", "calm", "silly", "smart"];
|
"large",
|
||||||
|
"smelly",
|
||||||
|
"new",
|
||||||
|
"happy",
|
||||||
|
"shiny",
|
||||||
|
"old",
|
||||||
|
"clean",
|
||||||
|
"nice",
|
||||||
|
"bad",
|
||||||
|
"cool",
|
||||||
|
"hot",
|
||||||
|
"cold",
|
||||||
|
"warm",
|
||||||
|
"hungry",
|
||||||
|
"slow",
|
||||||
|
"fast",
|
||||||
|
"red",
|
||||||
|
"white",
|
||||||
|
"black",
|
||||||
|
"blue",
|
||||||
|
"green",
|
||||||
|
"basic",
|
||||||
|
"strong",
|
||||||
|
"cute",
|
||||||
|
"poor",
|
||||||
|
"nice",
|
||||||
|
"huge",
|
||||||
|
"rare",
|
||||||
|
"lucky",
|
||||||
|
"weak",
|
||||||
|
"tall",
|
||||||
|
"short",
|
||||||
|
"tiny",
|
||||||
|
"great",
|
||||||
|
"long",
|
||||||
|
"single",
|
||||||
|
"rich",
|
||||||
|
"young",
|
||||||
|
"dirty",
|
||||||
|
"fresh",
|
||||||
|
"brown",
|
||||||
|
"dark",
|
||||||
|
"crazy",
|
||||||
|
"sad",
|
||||||
|
"loud",
|
||||||
|
"brave",
|
||||||
|
"calm",
|
||||||
|
"silly",
|
||||||
|
"smart",
|
||||||
|
];
|
||||||
|
|
||||||
var nouns = ["dog", "bat", "wrench", "apple", "pear", "ghost", "cat", "wolf", "squid", "goat", "snail", "hat",
|
var nouns = [
|
||||||
"sock", "plum", "bear", "snake", "turtle", "horse", "spoon", "fork", "spider", "tree", "chair", "table",
|
"dog",
|
||||||
"couch", "towel", "panda", "bread", "grape", "cake", "brick", "rat", "mouse", "bird", "oven", "phone", "photo",
|
"bat",
|
||||||
"frog", "bear", "camel", "sheep", "shark", "tiger", "zebra", "duck", "eagle", "fish", "kitten", "lobster", "monkey",
|
"wrench",
|
||||||
"owl", "puppy", "pig", "rabbit", "fox", "whale", "beaver", "gorilla", "lizard", "parrot", "sloth", "swan"];
|
"apple",
|
||||||
|
"pear",
|
||||||
|
"ghost",
|
||||||
|
"cat",
|
||||||
|
"wolf",
|
||||||
|
"squid",
|
||||||
|
"goat",
|
||||||
|
"snail",
|
||||||
|
"hat",
|
||||||
|
"sock",
|
||||||
|
"plum",
|
||||||
|
"bear",
|
||||||
|
"snake",
|
||||||
|
"turtle",
|
||||||
|
"horse",
|
||||||
|
"spoon",
|
||||||
|
"fork",
|
||||||
|
"spider",
|
||||||
|
"tree",
|
||||||
|
"chair",
|
||||||
|
"table",
|
||||||
|
"couch",
|
||||||
|
"towel",
|
||||||
|
"panda",
|
||||||
|
"bread",
|
||||||
|
"grape",
|
||||||
|
"cake",
|
||||||
|
"brick",
|
||||||
|
"rat",
|
||||||
|
"mouse",
|
||||||
|
"bird",
|
||||||
|
"oven",
|
||||||
|
"phone",
|
||||||
|
"photo",
|
||||||
|
"frog",
|
||||||
|
"bear",
|
||||||
|
"camel",
|
||||||
|
"sheep",
|
||||||
|
"shark",
|
||||||
|
"tiger",
|
||||||
|
"zebra",
|
||||||
|
"duck",
|
||||||
|
"eagle",
|
||||||
|
"fish",
|
||||||
|
"kitten",
|
||||||
|
"lobster",
|
||||||
|
"monkey",
|
||||||
|
"owl",
|
||||||
|
"puppy",
|
||||||
|
"pig",
|
||||||
|
"rabbit",
|
||||||
|
"fox",
|
||||||
|
"whale",
|
||||||
|
"beaver",
|
||||||
|
"gorilla",
|
||||||
|
"lizard",
|
||||||
|
"parrot",
|
||||||
|
"sloth",
|
||||||
|
"swan",
|
||||||
|
];
|
||||||
|
|
||||||
var adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
|
var adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
|
||||||
var noun = nouns[Math.floor(Math.random() * nouns.length)];
|
var noun = nouns[Math.floor(Math.random() * nouns.length)];
|
||||||
noun = noun.charAt(0).toUpperCase() + noun.substring(1);
|
noun = noun.charAt(0).toUpperCase() + noun.substring(1);
|
||||||
adjective = adjective.charAt(0).toUpperCase() + adjective.substring(1);
|
adjective = adjective.charAt(0).toUpperCase() + adjective.substring(1);
|
||||||
document.getElementById('input-01').value = adjective + noun;
|
document.getElementById("input-01").value = adjective + noun;
|
||||||
|
|||||||
@ -1,22 +1,26 @@
|
|||||||
;(function () {
|
(function () {
|
||||||
'use strict'
|
"use strict";
|
||||||
const pricingToggle = document.getElementById('pricing-toggle')
|
const pricingToggle = document.getElementById("pricing-toggle");
|
||||||
|
|
||||||
if (pricingToggle) {
|
if (pricingToggle) {
|
||||||
window.addEventListener('load', pricingSwitch)
|
window.addEventListener("load", pricingSwitch);
|
||||||
pricingToggle.addEventListener('change', pricingSwitch)
|
pricingToggle.addEventListener("change", pricingSwitch);
|
||||||
}
|
}
|
||||||
|
|
||||||
function pricingSwitch () {
|
function pricingSwitch() {
|
||||||
const switchables = document.getElementsByClassName('pricing-switchable')
|
const switchables = document.getElementsByClassName("pricing-switchable");
|
||||||
if (pricingToggle.checked) {
|
if (pricingToggle.checked) {
|
||||||
for (let i = 0; i < switchables.length; i++) {
|
for (let i = 0; i < switchables.length; i++) {
|
||||||
switchables[i].innerHTML = switchables[i].getAttribute('data-pricing-yearly')
|
switchables[i].innerHTML = switchables[i].getAttribute(
|
||||||
|
"data-pricing-yearly"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
for (let i = 0; i < switchables.length; i++) {
|
for (let i = 0; i < switchables.length; i++) {
|
||||||
switchables[i].innerHTML = switchables[i].getAttribute('data-pricing-monthly')
|
switchables[i].innerHTML = switchables[i].getAttribute(
|
||||||
|
"data-pricing-monthly"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}())
|
})();
|
||||||
|
|||||||
@ -1,62 +1,76 @@
|
|||||||
;(function () {
|
(function () {
|
||||||
'use strict'
|
"use strict";
|
||||||
const revealEl = document.querySelectorAll('[class*=reveal-]')
|
const revealEl = document.querySelectorAll("[class*=reveal-]");
|
||||||
let viewportHeight = window.innerHeight
|
let viewportHeight = window.innerHeight;
|
||||||
|
|
||||||
function throttle (delay, fn) {
|
function throttle(delay, fn) {
|
||||||
var lastCall = 0
|
var lastCall = 0;
|
||||||
return function () {
|
return function () {
|
||||||
var now = new Date().getTime()
|
var now = new Date().getTime();
|
||||||
if (now - lastCall < delay) {
|
if (now - lastCall < delay) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
lastCall = now
|
lastCall = now;
|
||||||
return fn.apply(void 0, arguments)
|
return fn.apply(void 0, arguments);
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function elementIsVisible (el, offset) {
|
function elementIsVisible(el, offset) {
|
||||||
return (el.getBoundingClientRect().top <= viewportHeight - offset)
|
return el.getBoundingClientRect().top <= viewportHeight - offset;
|
||||||
}
|
}
|
||||||
|
|
||||||
function revealElements () {
|
function revealElements() {
|
||||||
for (let i = 0; i < revealEl.length; i++) {
|
for (let i = 0; i < revealEl.length; i++) {
|
||||||
let el = revealEl[i]
|
let el = revealEl[i];
|
||||||
let revealDelay = el.getAttribute('data-reveal-delay')
|
let revealDelay = el.getAttribute("data-reveal-delay");
|
||||||
let revealOffset = (el.getAttribute('data-reveal-offset') ? el.getAttribute('data-reveal-offset') : '200')
|
let revealOffset = el.getAttribute("data-reveal-offset")
|
||||||
let listenedEl = (el.getAttribute('data-reveal-container') ? el.closest(el.getAttribute('data-reveal-container')) : el)
|
? el.getAttribute("data-reveal-offset")
|
||||||
if (elementIsVisible(listenedEl, revealOffset) && !el.classList.contains('is-revealed')) {
|
: "200";
|
||||||
|
let listenedEl = el.getAttribute("data-reveal-container")
|
||||||
|
? el.closest(el.getAttribute("data-reveal-container"))
|
||||||
|
: el;
|
||||||
|
if (
|
||||||
|
elementIsVisible(listenedEl, revealOffset) &&
|
||||||
|
!el.classList.contains("is-revealed")
|
||||||
|
) {
|
||||||
if (revealDelay && revealDelay !== 0) {
|
if (revealDelay && revealDelay !== 0) {
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
el.classList.add('is-revealed')
|
el.classList.add("is-revealed");
|
||||||
}, revealDelay)
|
}, revealDelay);
|
||||||
} else {
|
} else {
|
||||||
el.classList.add('is-revealed')
|
el.classList.add("is-revealed");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
revealDone()
|
revealDone();
|
||||||
}
|
}
|
||||||
|
|
||||||
function revealScroll () {
|
function revealScroll() {
|
||||||
throttle(30, revealElements())
|
throttle(30, revealElements());
|
||||||
}
|
}
|
||||||
|
|
||||||
function revealResize () {
|
function revealResize() {
|
||||||
viewportHeight = window.innerHeight
|
viewportHeight = window.innerHeight;
|
||||||
throttle(30, revealElements())
|
throttle(30, revealElements());
|
||||||
}
|
}
|
||||||
|
|
||||||
function revealDone () {
|
function revealDone() {
|
||||||
if (revealEl.length > document.querySelectorAll('[class*=reveal-].is-revealed').length) return
|
if (
|
||||||
window.removeEventListener('load', revealElements)
|
revealEl.length >
|
||||||
window.removeEventListener('scroll', revealScroll)
|
document.querySelectorAll("[class*=reveal-].is-revealed").length
|
||||||
window.removeEventListener('resize', revealResize)
|
)
|
||||||
|
return;
|
||||||
|
window.removeEventListener("load", revealElements);
|
||||||
|
window.removeEventListener("scroll", revealScroll);
|
||||||
|
window.removeEventListener("resize", revealResize);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (revealEl.length > 0 && document.body.classList.contains('has-animations')) {
|
if (
|
||||||
window.addEventListener('load', revealElements)
|
revealEl.length > 0 &&
|
||||||
window.addEventListener('scroll', revealScroll)
|
document.body.classList.contains("has-animations")
|
||||||
window.addEventListener('resize', revealResize)
|
) {
|
||||||
|
window.addEventListener("load", revealElements);
|
||||||
|
window.addEventListener("scroll", revealScroll);
|
||||||
|
window.addEventListener("resize", revealResize);
|
||||||
}
|
}
|
||||||
}())
|
})();
|
||||||
|
|||||||
@ -1,51 +1,69 @@
|
|||||||
;(function () {
|
(function () {
|
||||||
'use strict'
|
"use strict";
|
||||||
const smoothScrollLinks = document.getElementsByClassName('smooth-scroll')
|
const smoothScrollLinks = document.getElementsByClassName("smooth-scroll");
|
||||||
|
|
||||||
const easeInOutQuad = function (t) {
|
const easeInOutQuad = function (t) {
|
||||||
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
|
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
|
||||||
}
|
};
|
||||||
|
|
||||||
const scrollToEl = (startTime, currentTime, duration, scrollEndElemTop, startScrollOffset) => {
|
const scrollToEl = (
|
||||||
const runtime = currentTime - startTime
|
startTime,
|
||||||
let progress = runtime / duration
|
currentTime,
|
||||||
|
duration,
|
||||||
|
scrollEndElemTop,
|
||||||
|
startScrollOffset
|
||||||
|
) => {
|
||||||
|
const runtime = currentTime - startTime;
|
||||||
|
let progress = runtime / duration;
|
||||||
|
|
||||||
progress = Math.min(progress, 1)
|
progress = Math.min(progress, 1);
|
||||||
|
|
||||||
const ease = easeInOutQuad(progress)
|
const ease = easeInOutQuad(progress);
|
||||||
|
|
||||||
window.scroll(0, startScrollOffset + (scrollEndElemTop * ease))
|
window.scroll(0, startScrollOffset + scrollEndElemTop * ease);
|
||||||
if (runtime < duration) {
|
if (runtime < duration) {
|
||||||
window.requestAnimationFrame((timestamp) => {
|
window.requestAnimationFrame((timestamp) => {
|
||||||
const currentTime = timestamp || new Date().getTime()
|
const currentTime = timestamp || new Date().getTime();
|
||||||
scrollToEl(startTime, currentTime, duration, scrollEndElemTop, startScrollOffset)
|
scrollToEl(
|
||||||
})
|
startTime,
|
||||||
|
currentTime,
|
||||||
|
duration,
|
||||||
|
scrollEndElemTop,
|
||||||
|
startScrollOffset
|
||||||
|
);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
if (smoothScrollLinks.length > 0) {
|
if (smoothScrollLinks.length > 0) {
|
||||||
for (let i = 0; i < smoothScrollLinks.length; i++) {
|
for (let i = 0; i < smoothScrollLinks.length; i++) {
|
||||||
const smoothScrollLink = smoothScrollLinks[i]
|
const smoothScrollLink = smoothScrollLinks[i];
|
||||||
|
|
||||||
smoothScrollLink.addEventListener('click', function (e) {
|
smoothScrollLink.addEventListener("click", function (e) {
|
||||||
e.preventDefault()
|
e.preventDefault();
|
||||||
const link = e.target.closest('.smooth-scroll')
|
const link = e.target.closest(".smooth-scroll");
|
||||||
const targetId = link.href.split('#')[1]
|
const targetId = link.href.split("#")[1];
|
||||||
const target = document.getElementById(targetId)
|
const target = document.getElementById(targetId);
|
||||||
const duration = link.getAttribute('data-duration') || 1000
|
const duration = link.getAttribute("data-duration") || 1000;
|
||||||
|
|
||||||
if (!target) return
|
if (!target) return;
|
||||||
|
|
||||||
window.requestAnimationFrame((timestamp) => {
|
window.requestAnimationFrame((timestamp) => {
|
||||||
const stamp = timestamp || new Date().getTime()
|
const stamp = timestamp || new Date().getTime();
|
||||||
const start = stamp
|
const start = stamp;
|
||||||
|
|
||||||
const startScrollOffset = window.pageYOffset
|
const startScrollOffset = window.pageYOffset;
|
||||||
const scrollEndElemTop = target.getBoundingClientRect().top
|
const scrollEndElemTop = target.getBoundingClientRect().top;
|
||||||
|
|
||||||
scrollToEl(start, stamp, duration, scrollEndElemTop, startScrollOffset)
|
scrollToEl(
|
||||||
})
|
start,
|
||||||
})
|
stamp,
|
||||||
|
duration,
|
||||||
|
scrollEndElemTop,
|
||||||
|
startScrollOffset
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}())
|
})();
|
||||||
|
|||||||
@ -7,181 +7,186 @@
|
|||||||
* https://github.com/polonel/Snackbar/blob/master/LICENSE
|
* https://github.com/polonel/Snackbar/blob/master/LICENSE
|
||||||
*/
|
*/
|
||||||
|
|
||||||
(function(root, factory) {
|
(function (root, factory) {
|
||||||
'use strict';
|
"use strict";
|
||||||
|
|
||||||
if (typeof define === 'function' && define.amd) {
|
if (typeof define === "function" && define.amd) {
|
||||||
define([], function() {
|
define([], function () {
|
||||||
return (root.Snackbar = factory());
|
return (root.Snackbar = factory());
|
||||||
});
|
});
|
||||||
} else if (typeof module === 'object' && module.exports) {
|
} else if (typeof module === "object" && module.exports) {
|
||||||
module.exports = root.Snackbar = factory();
|
module.exports = root.Snackbar = factory();
|
||||||
} else {
|
} else {
|
||||||
root.Snackbar = factory();
|
root.Snackbar = factory();
|
||||||
|
}
|
||||||
|
})(this, function () {
|
||||||
|
var Snackbar = {};
|
||||||
|
|
||||||
|
Snackbar.current = null;
|
||||||
|
var $defaults = {
|
||||||
|
text: "Default Text",
|
||||||
|
textColor: "#FFFFFF",
|
||||||
|
width: "auto",
|
||||||
|
showAction: true,
|
||||||
|
actionText: "Dismiss",
|
||||||
|
actionTextAria: "Dismiss, Description for Screen Readers",
|
||||||
|
alertScreenReader: false,
|
||||||
|
actionTextColor: "#4CAF50",
|
||||||
|
showSecondButton: false,
|
||||||
|
secondButtonText: "",
|
||||||
|
secondButtonAria: "Description for Screen Readers",
|
||||||
|
secondButtonTextColor: "#4CAF50",
|
||||||
|
backgroundColor: "#323232",
|
||||||
|
pos: "bottom-left",
|
||||||
|
duration: 5000,
|
||||||
|
customClass: "",
|
||||||
|
onActionClick: function (element) {
|
||||||
|
element.style.opacity = 0;
|
||||||
|
},
|
||||||
|
onSecondButtonClick: function (element) {},
|
||||||
|
onClose: function (element) {},
|
||||||
|
};
|
||||||
|
|
||||||
|
Snackbar.show = function ($options) {
|
||||||
|
var options = Extend(true, $defaults, $options);
|
||||||
|
|
||||||
|
if (Snackbar.current) {
|
||||||
|
Snackbar.current.style.opacity = 0;
|
||||||
|
setTimeout(
|
||||||
|
function () {
|
||||||
|
var $parent = this.parentElement;
|
||||||
|
if ($parent)
|
||||||
|
// possible null if too many/fast Snackbars
|
||||||
|
$parent.removeChild(this);
|
||||||
|
}.bind(Snackbar.current),
|
||||||
|
500
|
||||||
|
);
|
||||||
}
|
}
|
||||||
})(this, function() {
|
|
||||||
var Snackbar = {};
|
|
||||||
|
|
||||||
Snackbar.current = null;
|
Snackbar.snackbar = document.createElement("div");
|
||||||
var $defaults = {
|
Snackbar.snackbar.className = "snackbar-container " + options.customClass;
|
||||||
text: 'Default Text',
|
Snackbar.snackbar.style.width = options.width;
|
||||||
textColor: '#FFFFFF',
|
var $p = document.createElement("p");
|
||||||
width: 'auto',
|
$p.style.margin = 0;
|
||||||
showAction: true,
|
$p.style.padding = 0;
|
||||||
actionText: 'Dismiss',
|
$p.style.color = options.textColor;
|
||||||
actionTextAria: 'Dismiss, Description for Screen Readers',
|
$p.style.fontSize = "14px";
|
||||||
alertScreenReader: false,
|
$p.style.fontWeight = 300;
|
||||||
actionTextColor: '#4CAF50',
|
$p.style.lineHeight = "1em";
|
||||||
showSecondButton: false,
|
$p.innerHTML = options.text;
|
||||||
secondButtonText: '',
|
Snackbar.snackbar.appendChild($p);
|
||||||
secondButtonAria: 'Description for Screen Readers',
|
Snackbar.snackbar.style.background = options.backgroundColor;
|
||||||
secondButtonTextColor: '#4CAF50',
|
|
||||||
backgroundColor: '#323232',
|
|
||||||
pos: 'bottom-left',
|
|
||||||
duration: 5000,
|
|
||||||
customClass: '',
|
|
||||||
onActionClick: function(element) {
|
|
||||||
element.style.opacity = 0;
|
|
||||||
},
|
|
||||||
onSecondButtonClick: function(element) {},
|
|
||||||
onClose: function(element) {}
|
|
||||||
};
|
|
||||||
|
|
||||||
Snackbar.show = function($options) {
|
if (options.showSecondButton) {
|
||||||
var options = Extend(true, $defaults, $options);
|
var secondButton = document.createElement("button");
|
||||||
|
secondButton.className = "action";
|
||||||
|
secondButton.innerHTML = options.secondButtonText;
|
||||||
|
secondButton.setAttribute("aria-label", options.secondButtonAria);
|
||||||
|
secondButton.style.color = options.secondButtonTextColor;
|
||||||
|
secondButton.addEventListener("click", function () {
|
||||||
|
options.onSecondButtonClick(Snackbar.snackbar);
|
||||||
|
});
|
||||||
|
Snackbar.snackbar.appendChild(secondButton);
|
||||||
|
}
|
||||||
|
|
||||||
if (Snackbar.current) {
|
if (options.showAction) {
|
||||||
|
var actionButton = document.createElement("button");
|
||||||
|
actionButton.className = "action";
|
||||||
|
actionButton.innerHTML = options.actionText;
|
||||||
|
actionButton.setAttribute("aria-label", options.actionTextAria);
|
||||||
|
actionButton.style.color = options.actionTextColor;
|
||||||
|
actionButton.addEventListener("click", function () {
|
||||||
|
options.onActionClick(Snackbar.snackbar);
|
||||||
|
});
|
||||||
|
Snackbar.snackbar.appendChild(actionButton);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.duration) {
|
||||||
|
setTimeout(
|
||||||
|
function () {
|
||||||
|
if (Snackbar.current === this) {
|
||||||
Snackbar.current.style.opacity = 0;
|
Snackbar.current.style.opacity = 0;
|
||||||
setTimeout(
|
// When natural remove event occurs let's move the snackbar to its origins
|
||||||
function() {
|
Snackbar.current.style.top = "-100px";
|
||||||
var $parent = this.parentElement;
|
Snackbar.current.style.bottom = "-100px";
|
||||||
if ($parent)
|
}
|
||||||
// possible null if too many/fast Snackbars
|
}.bind(Snackbar.snackbar),
|
||||||
$parent.removeChild(this);
|
options.duration
|
||||||
}.bind(Snackbar.current),
|
);
|
||||||
500
|
}
|
||||||
);
|
|
||||||
|
if (options.alertScreenReader) {
|
||||||
|
Snackbar.snackbar.setAttribute("role", "alert");
|
||||||
|
}
|
||||||
|
|
||||||
|
Snackbar.snackbar.addEventListener(
|
||||||
|
"transitionend",
|
||||||
|
function (event, elapsed) {
|
||||||
|
if (event.propertyName === "opacity" && this.style.opacity === "0") {
|
||||||
|
if (typeof options.onClose === "function") options.onClose(this);
|
||||||
|
|
||||||
|
this.parentElement.removeChild(this);
|
||||||
|
if (Snackbar.current === this) {
|
||||||
|
Snackbar.current = null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}.bind(Snackbar.snackbar)
|
||||||
|
);
|
||||||
|
|
||||||
Snackbar.snackbar = document.createElement('div');
|
Snackbar.current = Snackbar.snackbar;
|
||||||
Snackbar.snackbar.className = 'snackbar-container ' + options.customClass;
|
|
||||||
Snackbar.snackbar.style.width = options.width;
|
|
||||||
var $p = document.createElement('p');
|
|
||||||
$p.style.margin = 0;
|
|
||||||
$p.style.padding = 0;
|
|
||||||
$p.style.color = options.textColor;
|
|
||||||
$p.style.fontSize = '14px';
|
|
||||||
$p.style.fontWeight = 300;
|
|
||||||
$p.style.lineHeight = '1em';
|
|
||||||
$p.innerHTML = options.text;
|
|
||||||
Snackbar.snackbar.appendChild($p);
|
|
||||||
Snackbar.snackbar.style.background = options.backgroundColor;
|
|
||||||
|
|
||||||
if (options.showSecondButton) {
|
document.body.appendChild(Snackbar.snackbar);
|
||||||
var secondButton = document.createElement('button');
|
var $bottom = getComputedStyle(Snackbar.snackbar).bottom;
|
||||||
secondButton.className = 'action';
|
var $top = getComputedStyle(Snackbar.snackbar).top;
|
||||||
secondButton.innerHTML = options.secondButtonText;
|
Snackbar.snackbar.style.opacity = 1;
|
||||||
secondButton.setAttribute('aria-label', options.secondButtonAria);
|
Snackbar.snackbar.className =
|
||||||
secondButton.style.color = options.secondButtonTextColor;
|
"snackbar-container " +
|
||||||
secondButton.addEventListener('click', function() {
|
options.customClass +
|
||||||
options.onSecondButtonClick(Snackbar.snackbar);
|
" snackbar-pos " +
|
||||||
});
|
options.pos;
|
||||||
Snackbar.snackbar.appendChild(secondButton);
|
};
|
||||||
|
|
||||||
|
Snackbar.close = function () {
|
||||||
|
if (Snackbar.current) {
|
||||||
|
Snackbar.current.style.opacity = 0;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Pure JS Extend
|
||||||
|
// http://gomakethings.com/vanilla-javascript-version-of-jquery-extend/
|
||||||
|
var Extend = function () {
|
||||||
|
var extended = {};
|
||||||
|
var deep = false;
|
||||||
|
var i = 0;
|
||||||
|
var length = arguments.length;
|
||||||
|
|
||||||
|
if (Object.prototype.toString.call(arguments[0]) === "[object Boolean]") {
|
||||||
|
deep = arguments[0];
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
|
||||||
|
var merge = function (obj) {
|
||||||
|
for (var prop in obj) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(obj, prop)) {
|
||||||
|
if (
|
||||||
|
deep &&
|
||||||
|
Object.prototype.toString.call(obj[prop]) === "[object Object]"
|
||||||
|
) {
|
||||||
|
extended[prop] = Extend(true, extended[prop], obj[prop]);
|
||||||
|
} else {
|
||||||
|
extended[prop] = obj[prop];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
if (options.showAction) {
|
|
||||||
var actionButton = document.createElement('button');
|
|
||||||
actionButton.className = 'action';
|
|
||||||
actionButton.innerHTML = options.actionText;
|
|
||||||
actionButton.setAttribute('aria-label', options.actionTextAria);
|
|
||||||
actionButton.style.color = options.actionTextColor;
|
|
||||||
actionButton.addEventListener('click', function() {
|
|
||||||
options.onActionClick(Snackbar.snackbar);
|
|
||||||
});
|
|
||||||
Snackbar.snackbar.appendChild(actionButton);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (options.duration) {
|
|
||||||
setTimeout(
|
|
||||||
function() {
|
|
||||||
if (Snackbar.current === this) {
|
|
||||||
Snackbar.current.style.opacity = 0;
|
|
||||||
// When natural remove event occurs let's move the snackbar to its origins
|
|
||||||
Snackbar.current.style.top = '-100px';
|
|
||||||
Snackbar.current.style.bottom = '-100px';
|
|
||||||
}
|
|
||||||
}.bind(Snackbar.snackbar),
|
|
||||||
options.duration
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (options.alertScreenReader) {
|
|
||||||
Snackbar.snackbar.setAttribute('role', 'alert');
|
|
||||||
}
|
|
||||||
|
|
||||||
Snackbar.snackbar.addEventListener(
|
|
||||||
'transitionend',
|
|
||||||
function(event, elapsed) {
|
|
||||||
if (event.propertyName === 'opacity' && this.style.opacity === '0') {
|
|
||||||
if (typeof(options.onClose) === 'function')
|
|
||||||
options.onClose(this);
|
|
||||||
|
|
||||||
this.parentElement.removeChild(this);
|
|
||||||
if (Snackbar.current === this) {
|
|
||||||
Snackbar.current = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}.bind(Snackbar.snackbar)
|
|
||||||
);
|
|
||||||
|
|
||||||
Snackbar.current = Snackbar.snackbar;
|
|
||||||
|
|
||||||
document.body.appendChild(Snackbar.snackbar);
|
|
||||||
var $bottom = getComputedStyle(Snackbar.snackbar).bottom;
|
|
||||||
var $top = getComputedStyle(Snackbar.snackbar).top;
|
|
||||||
Snackbar.snackbar.style.opacity = 1;
|
|
||||||
Snackbar.snackbar.className =
|
|
||||||
'snackbar-container ' + options.customClass + ' snackbar-pos ' + options.pos;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
Snackbar.close = function() {
|
for (; i < length; i++) {
|
||||||
if (Snackbar.current) {
|
var obj = arguments[i];
|
||||||
Snackbar.current.style.opacity = 0;
|
merge(obj);
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
// Pure JS Extend
|
return extended;
|
||||||
// http://gomakethings.com/vanilla-javascript-version-of-jquery-extend/
|
};
|
||||||
var Extend = function() {
|
|
||||||
var extended = {};
|
|
||||||
var deep = false;
|
|
||||||
var i = 0;
|
|
||||||
var length = arguments.length;
|
|
||||||
|
|
||||||
if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') {
|
return Snackbar;
|
||||||
deep = arguments[0];
|
|
||||||
i++;
|
|
||||||
}
|
|
||||||
|
|
||||||
var merge = function(obj) {
|
|
||||||
for (var prop in obj) {
|
|
||||||
if (Object.prototype.hasOwnProperty.call(obj, prop)) {
|
|
||||||
if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') {
|
|
||||||
extended[prop] = Extend(true, extended[prop], obj[prop]);
|
|
||||||
} else {
|
|
||||||
extended[prop] = obj[prop];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
for (; i < length; i++) {
|
|
||||||
var obj = arguments[i];
|
|
||||||
merge(obj);
|
|
||||||
}
|
|
||||||
|
|
||||||
return extended;
|
|
||||||
};
|
|
||||||
|
|
||||||
return Snackbar;
|
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,341 +1,469 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" class="no-js">
|
<html lang="en" class="no-js">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
<title>Neon Chat</title>
|
<title>Neon Chat</title>
|
||||||
<link rel="stylesheet" href="css/landing.css">
|
<link rel="stylesheet" href="css/landing.css" />
|
||||||
<link rel="shortcut icon" href="images/logo.svg">
|
<link rel="shortcut icon" href="images/logo.svg" />
|
||||||
<meta property="og:title" content="Neonchat - Decentralized video calls">
|
<meta property="og:title" content="Neonchat - Decentralized video calls" />
|
||||||
<meta property="og:description" content="Decentralized video
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content="Decentralized video
|
||||||
calling provides real-time HD quality and latency simply
|
calling provides real-time HD quality and latency simply
|
||||||
not available with traditional technology.">
|
not available with traditional technology."
|
||||||
<meta property="og:image" content="https://neonchat.io/images/preview.png">
|
/>
|
||||||
<meta property="og:url" content="https://neonchat.io/">
|
<meta
|
||||||
|
property="og:image"
|
||||||
|
content="https://neonchat.io/images/preview.png"
|
||||||
|
/>
|
||||||
|
<meta property="og:url" content="https://neonchat.io/" />
|
||||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"></script>
|
<script
|
||||||
|
async
|
||||||
|
src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"
|
||||||
|
></script>
|
||||||
<script>
|
<script>
|
||||||
window.dataLayer = window.dataLayer || [];
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
|
||||||
function gtag() {
|
function gtag() {
|
||||||
dataLayer.push(arguments);
|
dataLayer.push(arguments);
|
||||||
}
|
}
|
||||||
|
|
||||||
gtag('js', new Date());
|
gtag("js", new Date());
|
||||||
gtag('config', 'UA-162048272-1');
|
gtag("config", "UA-162048272-1");
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body class="has-animations">
|
<body class="has-animations">
|
||||||
<div class="body-wrap">
|
<div class="body-wrap">
|
||||||
<header class="site-header reveal-from-top">
|
<header class="site-header reveal-from-top">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="site-header-inner">
|
<div class="site-header-inner">
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
<h1 class="m-0"><a href="/"><img src="images/logo.svg" alt="Neon"
|
<h1 class="m-0">
|
||||||
width="32"
|
<a href="/"
|
||||||
height="32"></a>
|
><img src="images/logo.svg" alt="Neon" width="32" height="32"
|
||||||
</h1>
|
/></a>
|
||||||
</div>
|
</h1>
|
||||||
<button id="header-nav-toggle" class="header-nav-toggle" aria-controls="primary-menu"
|
|
||||||
aria-expanded="false"><span class="screen-reader">Menu</span> <span class="hamburger"><span
|
|
||||||
class="hamburger-inner"></span></span></button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<button
|
||||||
|
id="header-nav-toggle"
|
||||||
|
class="header-nav-toggle"
|
||||||
|
aria-controls="primary-menu"
|
||||||
|
aria-expanded="false"
|
||||||
|
>
|
||||||
|
<span class="screen-reader">Menu</span>
|
||||||
|
<span class="hamburger"
|
||||||
|
><span class="hamburger-inner"></span
|
||||||
|
></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main class="site-content">
|
<main class="site-content">
|
||||||
<section class="hero section illustration-section-01">
|
<section class="hero section illustration-section-01">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="hero-inner section-inner">
|
<div class="hero-inner section-inner">
|
||||||
<div class="split-wrap invert-mobile">
|
<div class="split-wrap invert-mobile">
|
||||||
<div class="split-item">
|
<div class="split-item">
|
||||||
<div class="hero-content split-item-content center-content-mobile"><h1
|
<div
|
||||||
class="mt-0 mb-16 reveal-from-bottom" data-reveal-delay="150">Neon Chat.<br>The most
|
class="hero-content split-item-content center-content-mobile"
|
||||||
advanced
|
>
|
||||||
video chat ever created.</h1>
|
<h1
|
||||||
<p class="mt-0 mb-32 reveal-from-bottom" data-reveal-delay="300">Decentralized video
|
class="mt-0 mb-16 reveal-from-bottom"
|
||||||
calling provides quality and latency simply
|
data-reveal-delay="150"
|
||||||
not available with traditional technology.</p>
|
>
|
||||||
<div class="reveal-from-bottom" data-reveal-delay="450"><a
|
Neon Chat.<br />The most advanced video chat ever created.
|
||||||
class="button button-primary button-wide-mobile pulse"
|
</h1>
|
||||||
style="border:0; background: linear-gradient(100deg, #376DF9 0, #FF5FA0 75%, #FFC55A 100%);"
|
<p
|
||||||
href="/newroom">Try now</a>
|
class="mt-0 mb-32 reveal-from-bottom"
|
||||||
</div>
|
data-reveal-delay="300"
|
||||||
</div>
|
>
|
||||||
<style>@media (min-width: 641px) {
|
Decentralized video calling provides quality and latency
|
||||||
.hero .split-wrap .split-item {
|
simply not available with traditional technology.
|
||||||
min-height: 492px
|
</p>
|
||||||
}
|
<div class="reveal-from-bottom" data-reveal-delay="450">
|
||||||
}</style>
|
<a
|
||||||
</div>
|
class="button button-primary button-wide-mobile pulse"
|
||||||
|
style="
|
||||||
|
border: 0;
|
||||||
|
background: linear-gradient(
|
||||||
|
100deg,
|
||||||
|
#376df9 0,
|
||||||
|
#ff5fa0 75%,
|
||||||
|
#ffc55a 100%
|
||||||
|
);
|
||||||
|
"
|
||||||
|
href="/newroom"
|
||||||
|
>Try now</a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
@media (min-width: 641px) {
|
||||||
|
.hero .split-wrap .split-item {
|
||||||
|
min-height: 492px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<!-- <section class="clients section reveal-fade">-->
|
<!-- <section class="clients section reveal-fade">-->
|
||||||
<!-- <div class="container">-->
|
<!-- <div class="container">-->
|
||||||
<!-- <div class="clients-inner section-inner has-top-divider has-bottom-divider">-->
|
<!-- <div class="clients-inner section-inner has-top-divider has-bottom-divider">-->
|
||||||
<!-- <ul class="list-reset">-->
|
<!-- <ul class="list-reset">-->
|
||||||
<!-- <li class="reveal-from-top"><img src="images/clients-01.svg" alt="Clients 01"></li>-->
|
<!-- <li class="reveal-from-top"><img src="images/clients-01.svg" alt="Clients 01"></li>-->
|
||||||
<!-- <li class="reveal-from-bottom" data-reveal-delay="150"><img src="images/clients-02.svg"-->
|
<!-- <li class="reveal-from-bottom" data-reveal-delay="150"><img src="images/clients-02.svg"-->
|
||||||
<!-- alt="Clients 02"></li>-->
|
<!-- alt="Clients 02"></li>-->
|
||||||
<!-- <li class="reveal-from-top" data-reveal-delay="300"><img src="images/clients-03.svg"-->
|
<!-- <li class="reveal-from-top" data-reveal-delay="300"><img src="images/clients-03.svg"-->
|
||||||
<!-- alt="Clients 03"></li>-->
|
<!-- alt="Clients 03"></li>-->
|
||||||
<!-- <li class="reveal-from-bottom" data-reveal-delay="450"><img src="images/clients-04.svg"-->
|
<!-- <li class="reveal-from-bottom" data-reveal-delay="450"><img src="images/clients-04.svg"-->
|
||||||
<!-- alt="Clients 04"></li>-->
|
<!-- alt="Clients 04"></li>-->
|
||||||
<!-- <li class="reveal-from-top" data-reveal-delay="600"><img src="images/clients-05.svg"-->
|
<!-- <li class="reveal-from-top" data-reveal-delay="600"><img src="images/clients-05.svg"-->
|
||||||
<!-- alt="Clients 05"></li>-->
|
<!-- alt="Clients 05"></li>-->
|
||||||
<!-- </ul>-->
|
<!-- </ul>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </section>-->
|
<!-- </section>-->
|
||||||
|
|
||||||
<!-- Video-->
|
<!-- Video-->
|
||||||
<!-- <section class="section center-content">-->
|
<!-- <section class="section center-content">-->
|
||||||
<!-- <div class="container">-->
|
<!-- <div class="container">-->
|
||||||
<!-- <div class="section-inner">-->
|
<!-- <div class="section-inner">-->
|
||||||
<!-- <div class="section-header reveal-from-bottom">-->
|
<!-- <div class="section-header reveal-from-bottom">-->
|
||||||
<!-- <div class="container-xs"><h2 class="mt-0 mb-16">Built exclusively for you</h2>-->
|
<!-- <div class="container-xs"><h2 class="mt-0 mb-16">Built exclusively for you</h2>-->
|
||||||
<!-- <p class="m-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore-->
|
<!-- <p class="m-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore-->
|
||||||
<!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa-->
|
<!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa-->
|
||||||
<!-- qui.</p></div>-->
|
<!-- qui.</p></div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- <div class="reveal-from-bottom"><a class="modal-trigger" aria-controls="modal-01"-->
|
<!-- <div class="reveal-from-bottom"><a class="modal-trigger" aria-controls="modal-01"-->
|
||||||
<!-- data-video="https://player.vimeo.com/video/174002812"-->
|
<!-- data-video="https://player.vimeo.com/video/174002812"-->
|
||||||
<!-- href="#"><img src="images/video-placeholder.svg" alt="Video"-->
|
<!-- href="#"><img src="images/video-placeholder.svg" alt="Video"-->
|
||||||
<!-- width="712" height="400"></a></div>-->
|
<!-- width="712" height="400"></a></div>-->
|
||||||
<!-- <div id="modal-01" class="modal modal-video">-->
|
<!-- <div id="modal-01" class="modal modal-video">-->
|
||||||
<!-- <div class="modal-inner">-->
|
<!-- <div class="modal-inner">-->
|
||||||
<!-- <div class="responsive-video">-->
|
<!-- <div class="responsive-video">-->
|
||||||
<!-- <iframe src="#" frameborder="0" webkitallowfullscreen mozallowfullscreen-->
|
<!-- <iframe src="#" frameborder="0" webkitallowfullscreen mozallowfullscreen-->
|
||||||
<!-- allowfullscreen></iframe>-->
|
<!-- allowfullscreen></iframe>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </section>-->
|
<!-- </section>-->
|
||||||
<!-- End Video-->
|
<!-- End Video-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="features-tiles section center-content">
|
<section class="features-tiles section center-content">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="features-tiles-inner section-inner has-top-divider">
|
<div class="features-tiles-inner section-inner has-top-divider">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<div class="container-xs reveal-from-bottom" data-reveal-delay="650"><h2 class="mt-0 mb-16">See
|
<div
|
||||||
the whole picture</h2>
|
class="container-xs reveal-from-bottom"
|
||||||
<p class="m-0">Neon Chat is built radically different. We ditched slow bulky servers,
|
data-reveal-delay="650"
|
||||||
opting for decentralized peer to peer calling. Maximum video quality and
|
>
|
||||||
lowest latency. Its good, trust us.</p></div>
|
<h2 class="mt-0 mb-16">See the whole picture</h2>
|
||||||
</div>
|
<p class="m-0">
|
||||||
<div class="tiles-wrap">
|
Neon Chat is built radically different. We ditched slow
|
||||||
<div class="tiles-item reveal-from-right">
|
bulky servers, opting for decentralized peer to peer
|
||||||
<div class="tiles-item-inner">
|
calling. Maximum video quality and lowest latency. Its good,
|
||||||
<div class="features-tiles-item-header">
|
trust us.
|
||||||
<div class="features-tiles-item-image mb-16"><img
|
</p>
|
||||||
src="images/feature-tile-icon-01.svg" alt="Feature tile icon 01" width="72"
|
|
||||||
height="72"></div>
|
|
||||||
</div>
|
|
||||||
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">Lowest Latency</h4>
|
|
||||||
<p class="m-0 text-sm">Breakthrough peer to peer WebRTC technology means your
|
|
||||||
video goes directly to the other person without a server. No middleman. No
|
|
||||||
extra stops.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tiles-item reveal-from-left">
|
|
||||||
<div class="tiles-item-inner">
|
|
||||||
<div class="features-tiles-item-header">
|
|
||||||
<div class="features-tiles-item-image mb-16"><img
|
|
||||||
src="images/feature-tile-icon-02.svg" alt="Feature tile icon 02" width="72"
|
|
||||||
height="72"></div>
|
|
||||||
</div>
|
|
||||||
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">Best Video Quality</h4>
|
|
||||||
<p class="m-0 text-sm">State of the art VP9 video compression combined with our
|
|
||||||
custom scaling optimization means your calls have never looked better.</p></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tiles-item reveal-from-right">
|
|
||||||
<div class="tiles-item-inner">
|
|
||||||
<div class="features-tiles-item-header">
|
|
||||||
<div class="features-tiles-item-image mb-16"><img
|
|
||||||
src="images/feature-tile-icon-03.svg" alt="Feature tile icon 03" width="72"
|
|
||||||
height="72"></div>
|
|
||||||
</div>
|
|
||||||
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">Total Privacy</h4>
|
|
||||||
<p class="m-0 text-sm">Each chat room is single use, with data
|
|
||||||
kept between you and your friend. Your data is yours to keep.</p></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tiles-item reveal-from-left">
|
|
||||||
<div class="tiles-item-inner">
|
|
||||||
<div class="features-tiles-item-header">
|
|
||||||
<div class="features-tiles-item-image mb-16"><img
|
|
||||||
src="images/feature-tile-icon-04.svg" alt="Feature tile icon 04" width="72"
|
|
||||||
height="72"></div>
|
|
||||||
</div>
|
|
||||||
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">No Download Required</h4>
|
|
||||||
<p class="m-0 text-sm">No download means you can get back to what matters most. Just
|
|
||||||
open Neon Chats in Chrome or Firefox.</p></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tiles-item reveal-from-right">
|
|
||||||
<div class="tiles-item-inner">
|
|
||||||
<div class="features-tiles-item-header">
|
|
||||||
<div class="features-tiles-item-image mb-16"><img
|
|
||||||
src="images/feature-tile-icon-05.svg" alt="Feature tile icon 05" width="72"
|
|
||||||
height="72"></div>
|
|
||||||
</div>
|
|
||||||
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">No Server Needed</h4>
|
|
||||||
<p class="m-0 text-sm">Calls are entirely between you and your friend.
|
|
||||||
Decentralized from any server. Data never leaves the browser. Cool right?</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tiles-item reveal-from-left">
|
|
||||||
<div class="tiles-item-inner">
|
|
||||||
<div class="features-tiles-item-header">
|
|
||||||
<div class="features-tiles-item-image mb-16"><img
|
|
||||||
src="images/feature-tile-icon-06.svg" alt="Feature tile icon 06" width="72"
|
|
||||||
height="72"></div>
|
|
||||||
</div>
|
|
||||||
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">Maximum Security</h4>
|
|
||||||
<p class="m-0 text-sm">End to end state of the art encryption means your calls are
|
|
||||||
exactly that. Your calls.</p></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tiles-wrap">
|
||||||
|
<div class="tiles-item reveal-from-right">
|
||||||
|
<div class="tiles-item-inner">
|
||||||
|
<div class="features-tiles-item-header">
|
||||||
|
<div class="features-tiles-item-image mb-16">
|
||||||
|
<img
|
||||||
|
src="images/feature-tile-icon-01.svg"
|
||||||
|
alt="Feature tile icon 01"
|
||||||
|
width="72"
|
||||||
|
height="72"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="features-tiles-item-content">
|
||||||
|
<h4 class="mt-0 mb-8">Lowest Latency</h4>
|
||||||
|
<p class="m-0 text-sm">
|
||||||
|
Breakthrough peer to peer WebRTC technology means your
|
||||||
|
video goes directly to the other person without a
|
||||||
|
server. No middleman. No extra stops.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tiles-item reveal-from-left">
|
||||||
|
<div class="tiles-item-inner">
|
||||||
|
<div class="features-tiles-item-header">
|
||||||
|
<div class="features-tiles-item-image mb-16">
|
||||||
|
<img
|
||||||
|
src="images/feature-tile-icon-02.svg"
|
||||||
|
alt="Feature tile icon 02"
|
||||||
|
width="72"
|
||||||
|
height="72"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="features-tiles-item-content">
|
||||||
|
<h4 class="mt-0 mb-8">Best Video Quality</h4>
|
||||||
|
<p class="m-0 text-sm">
|
||||||
|
State of the art VP9 video compression combined with our
|
||||||
|
custom scaling optimization means your calls have never
|
||||||
|
looked better.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tiles-item reveal-from-right">
|
||||||
|
<div class="tiles-item-inner">
|
||||||
|
<div class="features-tiles-item-header">
|
||||||
|
<div class="features-tiles-item-image mb-16">
|
||||||
|
<img
|
||||||
|
src="images/feature-tile-icon-03.svg"
|
||||||
|
alt="Feature tile icon 03"
|
||||||
|
width="72"
|
||||||
|
height="72"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="features-tiles-item-content">
|
||||||
|
<h4 class="mt-0 mb-8">Total Privacy</h4>
|
||||||
|
<p class="m-0 text-sm">
|
||||||
|
Each chat room is single use, with data kept between you
|
||||||
|
and your friend. Your data is yours to keep.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tiles-item reveal-from-left">
|
||||||
|
<div class="tiles-item-inner">
|
||||||
|
<div class="features-tiles-item-header">
|
||||||
|
<div class="features-tiles-item-image mb-16">
|
||||||
|
<img
|
||||||
|
src="images/feature-tile-icon-04.svg"
|
||||||
|
alt="Feature tile icon 04"
|
||||||
|
width="72"
|
||||||
|
height="72"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="features-tiles-item-content">
|
||||||
|
<h4 class="mt-0 mb-8">No Download Required</h4>
|
||||||
|
<p class="m-0 text-sm">
|
||||||
|
No download means you can get back to what matters most.
|
||||||
|
Just open Neon Chats in Chrome or Firefox.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tiles-item reveal-from-right">
|
||||||
|
<div class="tiles-item-inner">
|
||||||
|
<div class="features-tiles-item-header">
|
||||||
|
<div class="features-tiles-item-image mb-16">
|
||||||
|
<img
|
||||||
|
src="images/feature-tile-icon-05.svg"
|
||||||
|
alt="Feature tile icon 05"
|
||||||
|
width="72"
|
||||||
|
height="72"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="features-tiles-item-content">
|
||||||
|
<h4 class="mt-0 mb-8">No Server Needed</h4>
|
||||||
|
<p class="m-0 text-sm">
|
||||||
|
Calls are entirely between you and your friend.
|
||||||
|
Decentralized from any server. Data never leaves the
|
||||||
|
browser. Cool right?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tiles-item reveal-from-left">
|
||||||
|
<div class="tiles-item-inner">
|
||||||
|
<div class="features-tiles-item-header">
|
||||||
|
<div class="features-tiles-item-image mb-16">
|
||||||
|
<img
|
||||||
|
src="images/feature-tile-icon-06.svg"
|
||||||
|
alt="Feature tile icon 06"
|
||||||
|
width="72"
|
||||||
|
height="72"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="features-tiles-item-content">
|
||||||
|
<h4 class="mt-0 mb-8">Maximum Security</h4>
|
||||||
|
<p class="m-0 text-sm">
|
||||||
|
End to end state of the art encryption means your calls
|
||||||
|
are exactly that. Your calls.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<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 way of
|
<div class="section-header center-content">
|
||||||
chatting? </h2></div>
|
<h2 class="m-0">Tired of the old way of chatting?</h2>
|
||||||
<div class="center-content">
|
|
||||||
<a class="button button-primary button-wide-mobile pulse"
|
|
||||||
style="border:0; background: linear-gradient(100deg, #376DF9 0, #FF5FA0 75%, #FFC55A 100%);"
|
|
||||||
href="/newroom">Try now</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="center-content">
|
||||||
|
<a
|
||||||
|
class="button button-primary button-wide-mobile pulse"
|
||||||
|
style="
|
||||||
|
border: 0;
|
||||||
|
background: linear-gradient(
|
||||||
|
100deg,
|
||||||
|
#376df9 0,
|
||||||
|
#ff5fa0 75%,
|
||||||
|
#ffc55a 100%
|
||||||
|
);
|
||||||
|
"
|
||||||
|
href="/newroom"
|
||||||
|
>Try now</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<!-- <section class="testimonial section">-->
|
<!-- <section class="testimonial section">-->
|
||||||
<!-- <div class="container">-->
|
<!-- <div class="container">-->
|
||||||
<!-- <div class="testimonial-inner section-inner has-top-divider">-->
|
<!-- <div class="testimonial-inner section-inner has-top-divider">-->
|
||||||
<!-- <div class="section-header center-content">-->
|
<!-- <div class="section-header center-content">-->
|
||||||
<!-- <div class="container-xs"><h2 class="mt-0 mb-16">Don't take our word for it</h2>-->
|
<!-- <div class="container-xs"><h2 class="mt-0 mb-16">Don't take our word for it</h2>-->
|
||||||
<!-- <p class="m-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore-->
|
<!-- <p class="m-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore-->
|
||||||
<!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa-->
|
<!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa-->
|
||||||
<!-- qui.</p></div>-->
|
<!-- qui.</p></div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- <div class="tiles-wrap">-->
|
<!-- <div class="tiles-wrap">-->
|
||||||
<!-- <div class="tiles-item reveal-from-right" data-reveal-delay="200">-->
|
<!-- <div class="tiles-item reveal-from-right" data-reveal-delay="200">-->
|
||||||
<!-- <div class="tiles-item-inner">-->
|
<!-- <div class="tiles-item-inner">-->
|
||||||
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
|
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
|
||||||
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
|
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
|
||||||
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
|
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
|
||||||
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
|
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
|
||||||
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
|
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
|
||||||
<!-- class="testimonial-item-name text-color-high">Roman Level</span> <span-->
|
<!-- class="testimonial-item-name text-color-high">Roman Level</span> <span-->
|
||||||
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
|
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- <div class="tiles-item reveal-from-bottom">-->
|
<!-- <div class="tiles-item reveal-from-bottom">-->
|
||||||
<!-- <div class="tiles-item-inner">-->
|
<!-- <div class="tiles-item-inner">-->
|
||||||
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
|
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
|
||||||
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
|
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
|
||||||
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
|
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
|
||||||
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
|
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
|
||||||
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
|
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
|
||||||
<!-- class="testimonial-item-name text-color-high">Diana Rynzhuk</span> <span-->
|
<!-- class="testimonial-item-name text-color-high">Diana Rynzhuk</span> <span-->
|
||||||
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
|
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- <div class="tiles-item reveal-from-left" data-reveal-delay="200">-->
|
<!-- <div class="tiles-item reveal-from-left" data-reveal-delay="200">-->
|
||||||
<!-- <div class="tiles-item-inner">-->
|
<!-- <div class="tiles-item-inner">-->
|
||||||
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
|
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
|
||||||
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
|
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
|
||||||
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
|
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
|
||||||
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
|
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
|
||||||
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
|
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
|
||||||
<!-- class="testimonial-item-name text-color-high">Ben Stafford</span> <span-->
|
<!-- class="testimonial-item-name text-color-high">Ben Stafford</span> <span-->
|
||||||
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
|
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </section>-->
|
<!-- </section>-->
|
||||||
|
|
||||||
<!-- <section class="cta section center-content-mobile reveal-from-bottom">-->
|
<!-- <section class="cta section center-content-mobile reveal-from-bottom">-->
|
||||||
<!-- <div class="container">-->
|
<!-- <div class="container">-->
|
||||||
<!-- <div class="cta-inner section-inner cta-split">-->
|
<!-- <div class="cta-inner section-inner cta-split">-->
|
||||||
<!-- <div class="cta-slogan"><h3 class="m-0">For previewing layouts and visual?</h3></div>-->
|
<!-- <div class="cta-slogan"><h3 class="m-0">For previewing layouts and visual?</h3></div>-->
|
||||||
<!-- <div class="cta-action">-->
|
<!-- <div class="cta-action">-->
|
||||||
<!-- <div class="has-icon-right"><label for="newsletter"-->
|
<!-- <div class="has-icon-right"><label for="newsletter"-->
|
||||||
<!-- class="form-label screen-reader">Subscribe</label> <input-->
|
<!-- class="form-label screen-reader">Subscribe</label> <input-->
|
||||||
<!-- id="newsletter" class="form-input" type="email" placeholder="Your best email">-->
|
<!-- id="newsletter" class="form-input" type="email" placeholder="Your best email">-->
|
||||||
<!-- <svg width="16" height="12" xmlns="http://www.w3.org/2000/svg">-->
|
<!-- <svg width="16" height="12" xmlns="http://www.w3.org/2000/svg">-->
|
||||||
<!-- <path d="M9 5H1c-.6 0-1 .4-1 1s.4 1 1 1h8v5l7-6-7-6v5z" fill="#376DF9"-->
|
<!-- <path d="M9 5H1c-.6 0-1 .4-1 1s.4 1 1 1h8v5l7-6-7-6v5z" fill="#376DF9"-->
|
||||||
<!-- fill-rule="nonzero"/>-->
|
<!-- fill-rule="nonzero"/>-->
|
||||||
<!-- </svg>-->
|
<!-- </svg>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </section>-->
|
<!-- </section>-->
|
||||||
</div>
|
</div>
|
||||||
|
</main>
|
||||||
</main>
|
<footer class="site-footer center-content-mobile">
|
||||||
<footer class="site-footer center-content-mobile">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="site-footer-inner">
|
<div class="site-footer-inner">
|
||||||
<div class="footer-top space-between text-xxs">
|
<div class="footer-top space-between text-xxs">
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32"></a>
|
<a href="/"
|
||||||
</div>
|
><img src="images/logo.svg" alt="Neon" width="32" height="32"
|
||||||
<div class="footer-social">
|
/></a>
|
||||||
<div><a href="https://github.com/ianramzy/decentralized-video-chat">
|
</div>
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
<div class="footer-social">
|
||||||
<title>GitHub</title>
|
<div>
|
||||||
<path d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"/>
|
<a
|
||||||
</svg>
|
href="https://github.com/ianramzy/decentralized-video-chat"
|
||||||
</a></div>
|
>
|
||||||
</ul>
|
<svg
|
||||||
</div>
|
width="16"
|
||||||
</div>
|
height="16"
|
||||||
<div class="footer-bottom space-between text-xxs invert-order-desktop">
|
viewBox="0 0 16 16"
|
||||||
<nav class="footer-nav">
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<ul class="list-reset">
|
>
|
||||||
<li><a href="https://ianramzy.com">Made with ❤️ by Ian Ramzy</a></li>
|
<title>GitHub</title>
|
||||||
<!-- <li><a href="#">Contact</a></li>-->
|
<path
|
||||||
<!-- <li><a href="#">About us</a></li>-->
|
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
|
||||||
<!-- <li><a href="#">FAQ's</a></li>-->
|
/>
|
||||||
<!-- <li><a href="#">Support</a></li>-->
|
</svg>
|
||||||
</ul>
|
</a>
|
||||||
</nav>
|
|
||||||
<div class="footer-copyright">© 2020 Neon Chat, all rights reserved</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="footer-bottom space-between text-xxs invert-order-desktop"
|
||||||
|
>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<ul class="list-reset">
|
||||||
|
<li>
|
||||||
|
<a href="https://ianramzy.com">Made with ❤️ by Ian Ramzy</a>
|
||||||
|
</li>
|
||||||
|
<!-- <li><a href="#">Contact</a></li>-->
|
||||||
|
<!-- <li><a href="#">About us</a></li>-->
|
||||||
|
<!-- <li><a href="#">FAQ's</a></li>-->
|
||||||
|
<!-- <li><a href="#">Support</a></li>-->
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="footer-copyright">
|
||||||
|
© 2020 Neon Chat, all rights reserved
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
<script src="js/landing.js"></script>
|
<script src="js/landing.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,124 +1,186 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" class="no-js">
|
<html lang="en" class="no-js">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
<title>Neon Chat</title>
|
<title>Neon Chat</title>
|
||||||
<link rel="stylesheet" href="css/landing.css">
|
<link rel="stylesheet" href="css/landing.css" />
|
||||||
<link rel="shortcut icon" href="images/logo.svg">
|
<link rel="shortcut icon" href="images/logo.svg" />
|
||||||
<meta property="og:title" content="Neonchat - Decentralized video calls">
|
<meta property="og:title" content="Neonchat - Decentralized video calls" />
|
||||||
<meta property="og:description" content="Decentralized video
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content="Decentralized video
|
||||||
calling provides real-time HD quality and latency simply
|
calling provides real-time HD quality and latency simply
|
||||||
not available with traditional technology.">
|
not available with traditional technology."
|
||||||
<meta property="og:image" content="https://neonchat.io/images/preview.png">
|
/>
|
||||||
<meta property="og:url" content="https://neonchat.io/">
|
<meta
|
||||||
|
property="og:image"
|
||||||
|
content="https://neonchat.io/images/preview.png"
|
||||||
|
/>
|
||||||
|
<meta property="og:url" content="https://neonchat.io/" />
|
||||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"></script>
|
<script
|
||||||
|
async
|
||||||
|
src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"
|
||||||
|
></script>
|
||||||
<script>
|
<script>
|
||||||
window.dataLayer = window.dataLayer || [];
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
|
||||||
function gtag() {
|
function gtag() {
|
||||||
dataLayer.push(arguments);
|
dataLayer.push(arguments);
|
||||||
}
|
}
|
||||||
|
|
||||||
gtag('js', new Date());
|
gtag("js", new Date());
|
||||||
gtag('config', 'UA-162048272-1');
|
gtag("config", "UA-162048272-1");
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body class="has-animations">
|
<body class="has-animations">
|
||||||
<div class="body-wrap">
|
<div class="body-wrap">
|
||||||
<header class="site-header reveal-from-top">
|
<header class="site-header reveal-from-top">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="site-header-inner">
|
<div class="site-header-inner">
|
||||||
<div class="brand"><h1 class="m-0"><a href="/"><img src="images/logo.svg" alt="Neon"
|
<div class="brand">
|
||||||
width="32"
|
<h1 class="m-0">
|
||||||
height="32"></a></h1></div>
|
<a href="/"
|
||||||
<button id="header-nav-toggle" class="header-nav-toggle" aria-controls="primary-menu"
|
><img src="images/logo.svg" alt="Neon" width="32" height="32"
|
||||||
aria-expanded="false"><span class="screen-reader">Menu</span> <span class="hamburger"><span
|
/></a>
|
||||||
class="hamburger-inner"></span></span></button>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
<button
|
||||||
|
id="header-nav-toggle"
|
||||||
|
class="header-nav-toggle"
|
||||||
|
aria-controls="primary-menu"
|
||||||
|
aria-expanded="false"
|
||||||
|
>
|
||||||
|
<span class="screen-reader">Menu</span>
|
||||||
|
<span class="hamburger"
|
||||||
|
><span class="hamburger-inner"></span
|
||||||
|
></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main class="site-content">
|
<main class="site-content">
|
||||||
|
|
||||||
<section class="hero section illustration-section-01">
|
<section class="hero section illustration-section-01">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="hero-inner section-inner">
|
<div class="hero-inner section-inner">
|
||||||
<div class="split-wrap invert-mobile">
|
<div class="split-wrap invert-mobile">
|
||||||
<div class="split-item">
|
<div class="split-item">
|
||||||
<div class="hero-content split-item-content center-content-mobile">
|
<div
|
||||||
<h1 class="mt-0 mb-16 reveal-from-bottom" data-reveal-delay="150">
|
class="hero-content split-item-content center-content-mobile"
|
||||||
Get room. <br> Share URL. <br> Start chatting.</h1>
|
>
|
||||||
<p class="mt-0 mb-32 reveal-from-bottom" data-reveal-delay="300">
|
<h1
|
||||||
Each chat has its own disposable URL. Just get a room and share your custom link.
|
class="mt-0 mb-16 reveal-from-bottom"
|
||||||
It's really that easy.
|
data-reveal-delay="150"
|
||||||
</p>
|
>
|
||||||
</div>
|
Get room. <br />
|
||||||
<style>@media (min-width: 641px) {
|
Share URL. <br />
|
||||||
.hero .split-wrap .split-item {
|
Start chatting.
|
||||||
min-height: 492px
|
</h1>
|
||||||
}
|
<p
|
||||||
}</style>
|
class="mt-0 mb-32 reveal-from-bottom"
|
||||||
</div>
|
data-reveal-delay="300"
|
||||||
</div>
|
>
|
||||||
|
Each chat has its own disposable URL. Just get a room and
|
||||||
|
share your custom link. It's really that easy.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
@media (min-width: 641px) {
|
||||||
|
.hero .split-wrap .split-item {
|
||||||
|
min-height: 492px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="cta section center-content-mobile reveal-from-bottom">
|
<section class="cta section center-content-mobile reveal-from-bottom">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="cta-inner section-inner cta-split">
|
<div class="cta-inner section-inner cta-split">
|
||||||
<div class="cta-slogan"><h3 class="m-0">Pick a room name.<br> How about this one?</h3></div>
|
<div class="cta-slogan">
|
||||||
<div class="cta-action">
|
<h3 class="m-0">
|
||||||
<div class="mb-24" style="margin-top: 30px">
|
Pick a room name.<br />
|
||||||
<label class="form-label screen-reader" for="input-01">This is a label</label>
|
How about this one?
|
||||||
<div class="form-group-desktop">
|
</h3>
|
||||||
<input class="form-input" type="text" id="input-01" value="PurpleSquid">
|
</div>
|
||||||
<button class="button button-primary pulse"
|
<div class="cta-action">
|
||||||
onclick="{window.location.href = '/room/' + document.getElementById('input-01').value}">
|
<div class="mb-24" style="margin-top: 30px;">
|
||||||
Go To My Room
|
<label class="form-label screen-reader" for="input-01"
|
||||||
</button>
|
>This is a label</label
|
||||||
</div>
|
>
|
||||||
</div>
|
<div class="form-group-desktop">
|
||||||
</div>
|
<input
|
||||||
|
class="form-input"
|
||||||
|
type="text"
|
||||||
|
id="input-01"
|
||||||
|
value="PurpleSquid"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
class="button button-primary pulse"
|
||||||
|
onclick="{window.location.href = '/room/' + document.getElementById('input-01').value}"
|
||||||
|
>
|
||||||
|
Go To My Room
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer class="site-footer center-content-mobile">
|
||||||
</main>
|
|
||||||
<footer class="site-footer center-content-mobile">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="site-footer-inner">
|
<div class="site-footer-inner">
|
||||||
<div class="footer-top space-between text-xxs">
|
<div class="footer-top space-between text-xxs">
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32"></a>
|
<a href="/"
|
||||||
</div>
|
><img src="images/logo.svg" alt="Neon" width="32" height="32"
|
||||||
<div class="footer-social">
|
/></a>
|
||||||
<div><a href="https://github.com/ianramzy/decentralized-video-chat">
|
</div>
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
<div class="footer-social">
|
||||||
<title>GitHub</title>
|
<div>
|
||||||
<path d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"/>
|
<a
|
||||||
</svg>
|
href="https://github.com/ianramzy/decentralized-video-chat"
|
||||||
</a></div>
|
>
|
||||||
</ul>
|
<svg
|
||||||
</div>
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<title>GitHub</title>
|
||||||
|
<path
|
||||||
|
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-bottom space-between text-xxs invert-order-desktop">
|
</div>
|
||||||
<nav class="footer-nav">
|
<div
|
||||||
<ul class="list-reset">
|
class="footer-bottom space-between text-xxs invert-order-desktop"
|
||||||
<li><a href="https://ianramzy.com">Made with ❤️ by Ian Ramzy</a></li>
|
>
|
||||||
</ul>
|
<nav class="footer-nav">
|
||||||
</nav>
|
<ul class="list-reset">
|
||||||
<div class="footer-copyright">© 2020 Neon Chat, all rights reserved</div>
|
<li>
|
||||||
|
<a href="https://ianramzy.com">Made with ❤️ by Ian Ramzy</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="footer-copyright">
|
||||||
|
© 2020 Neon Chat, all rights reserved
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</footer>
|
||||||
</footer>
|
</div>
|
||||||
</div>
|
<script src="js/landing.js"></script>
|
||||||
<script src="js/landing.js"></script>
|
<script src="js/newroom.js"></script>
|
||||||
<script src="js/newroom.js"></script>
|
</body>
|
||||||
</body>
|
</html>
|
||||||
</html>
|
|
||||||
|
|||||||
169
server.js
169
server.js
@ -1,114 +1,111 @@
|
|||||||
require('dotenv').config();
|
require("dotenv").config();
|
||||||
var sslRedirect = require('heroku-ssl-redirect');
|
var sslRedirect = require("heroku-ssl-redirect");
|
||||||
var twilio = require('twilio')(process.env.TWILIO_ACCOUNT_SID, process.env.TWILIO_AUTH_TOKEN);
|
var twilio = require("twilio")(
|
||||||
var express = require('express');
|
process.env.TWILIO_ACCOUNT_SID,
|
||||||
|
process.env.TWILIO_AUTH_TOKEN
|
||||||
|
);
|
||||||
|
var express = require("express");
|
||||||
var app = express();
|
var app = express();
|
||||||
var http = require('http').createServer(app);
|
var http = require("http").createServer(app);
|
||||||
var io = require('socket.io')(http);
|
var io = require("socket.io")(http);
|
||||||
var path = require('path');
|
var path = require("path");
|
||||||
var public = path.join(__dirname, 'public');
|
var public = path.join(__dirname, "public");
|
||||||
|
|
||||||
// enable ssl redirect
|
// enable ssl redirect
|
||||||
app.use(sslRedirect());
|
app.use(sslRedirect());
|
||||||
|
|
||||||
|
app.get("/", function (req, res) {
|
||||||
app.get('/', function (req, res) {
|
res.sendFile(path.join(public, "landing.html"));
|
||||||
res.sendFile(path.join(public, 'landing.html'));
|
|
||||||
});
|
});
|
||||||
|
|
||||||
app.get('/newroom', function (req, res) {
|
app.get("/newroom", function (req, res) {
|
||||||
res.sendFile(path.join(public, 'newroom.html'));
|
res.sendFile(path.join(public, "newroom.html"));
|
||||||
});
|
});
|
||||||
|
|
||||||
app.get('/room/*', function (req, res) {
|
app.get("/room/*", function (req, res) {
|
||||||
res.sendFile(path.join(public, 'chat.html'));
|
res.sendFile(path.join(public, "chat.html"));
|
||||||
});
|
});
|
||||||
|
|
||||||
app.use(express.static('public'));
|
app.use(express.static("public"));
|
||||||
|
|
||||||
|
|
||||||
function logIt(msg, room) {
|
function logIt(msg, room) {
|
||||||
console.log(room + ": " + msg)
|
console.log(room + ": " + msg);
|
||||||
}
|
}
|
||||||
|
|
||||||
// When a socket connects, set up the specific listeners we will use.
|
// When a socket connects, set up the specific listeners we will use.
|
||||||
io.on('connection', function (socket) {
|
io.on("connection", function (socket) {
|
||||||
// When a client tries to join a room, only allow them if they are first or
|
// When a client tries to join a room, only allow them if they are first or
|
||||||
// second in the room. Otherwise it is full.
|
// second in the room. Otherwise it is full.
|
||||||
socket.on('join', function (room) {
|
socket.on("join", function (room) {
|
||||||
logIt('A client joined the room', room);
|
logIt("A client joined the room", room);
|
||||||
var clients = io.sockets.adapter.rooms[room];
|
var clients = io.sockets.adapter.rooms[room];
|
||||||
var numClients = typeof clients !== 'undefined' ? clients.length : 0;
|
var numClients = typeof clients !== "undefined" ? clients.length : 0;
|
||||||
if (numClients === 0) {
|
if (numClients === 0) {
|
||||||
socket.join(room);
|
socket.join(room);
|
||||||
} else if (numClients === 1) {
|
} else if (numClients === 1) {
|
||||||
socket.join(room);
|
socket.join(room);
|
||||||
// When the client is second to join the room, both clients are ready.
|
// When the client is second to join the room, both clients are ready.
|
||||||
logIt('Broadcasting ready message', room);
|
logIt("Broadcasting ready message", room);
|
||||||
socket.broadcast.to(room).emit('willInitiateCall', room);
|
socket.broadcast.to(room).emit("willInitiateCall", room);
|
||||||
socket.emit('ready', room).to(room);
|
socket.emit("ready", room).to(room);
|
||||||
socket.broadcast.to(room).emit('ready', room);
|
socket.broadcast.to(room).emit("ready", room);
|
||||||
} else {
|
} else {
|
||||||
logIt("room already full", room);
|
logIt("room already full", room);
|
||||||
socket.emit('full', room);
|
socket.emit("full", room);
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// When receiving the token message, use the Twilio REST API to request an
|
||||||
|
// token to get ephemeral credentials to use the TURN server.
|
||||||
|
socket.on("token", function (room) {
|
||||||
|
logIt("Received token request", room);
|
||||||
|
twilio.tokens.create(function (err, response) {
|
||||||
|
if (err) {
|
||||||
|
logIt(err, room);
|
||||||
|
} else {
|
||||||
|
logIt("Token generated. Returning it to the browser client", room);
|
||||||
|
socket.emit("token", response).to(room);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// When receiving the token message, use the Twilio REST API to request an
|
// Relay candidate messages
|
||||||
// token to get ephemeral credentials to use the TURN server.
|
socket.on("candidate", function (candidate, room) {
|
||||||
socket.on('token', function (room) {
|
logIt("Received candidate. Broadcasting...", room);
|
||||||
logIt('Received token request', room);
|
socket.broadcast.to(room).emit("candidate", candidate);
|
||||||
twilio.tokens.create(function (err, response) {
|
});
|
||||||
if (err) {
|
|
||||||
logIt(err, room);
|
|
||||||
} else {
|
|
||||||
logIt('Token generated. Returning it to the browser client', room);
|
|
||||||
socket.emit('token', response).to(room);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Relay candidate messages
|
// Relay offers
|
||||||
socket.on('candidate', function (candidate, room) {
|
socket.on("offer", function (offer, room) {
|
||||||
logIt('Received candidate. Broadcasting...', room);
|
logIt("Received offer. Broadcasting...", room);
|
||||||
socket.broadcast.to(room).emit('candidate', candidate);
|
socket.broadcast.to(room).emit("offer", offer);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Relay offers
|
// Relay answers
|
||||||
socket.on('offer', function (offer, room) {
|
socket.on("answer", function (answer, room) {
|
||||||
logIt('Received offer. Broadcasting...', room);
|
logIt("Received answer. Broadcasting...", room);
|
||||||
socket.broadcast.to(room).emit('offer', offer);
|
socket.broadcast.to(room).emit("answer", answer);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Relay answers
|
// Relay answers
|
||||||
socket.on('answer', function (answer, room) {
|
socket.on("sendCaptions", function (captions, room) {
|
||||||
logIt('Received answer. Broadcasting...', room);
|
// logIt(captions, room);
|
||||||
socket.broadcast.to(room).emit('answer', answer);
|
socket.broadcast.to(room).emit("recieveCaptions", captions);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Relay answers
|
|
||||||
socket.on('sendCaptions', function (captions, room) {
|
|
||||||
// logIt(captions, room);
|
|
||||||
socket.broadcast.to(room).emit('recieveCaptions', captions);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Relay answers
|
|
||||||
socket.on('requestToggleCaptions', function (room) {
|
|
||||||
logIt("requesting captions", room);
|
|
||||||
socket.broadcast.to(room).emit('requestToggleCaptions');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Relay chat messages
|
|
||||||
socket.on('chat message', function(msg, room){
|
|
||||||
socket.broadcast.to(room).emit('chat message', msg);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
// Relay answers
|
||||||
|
socket.on("requestToggleCaptions", function (room) {
|
||||||
|
logIt("requesting captions", room);
|
||||||
|
socket.broadcast.to(room).emit("requestToggleCaptions");
|
||||||
|
});
|
||||||
|
|
||||||
|
// Relay chat messages
|
||||||
|
socket.on("chat message", function (msg, room) {
|
||||||
|
socket.broadcast.to(room).emit("chat message", msg);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
var port = process.env.PORT || 3000;
|
var port = process.env.PORT || 3000;
|
||||||
http.listen(port, function () {
|
http.listen(port, function () {
|
||||||
console.log("http://localhost:" + port);
|
console.log("http://localhost:" + port);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user