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
189
public/chat.html
189
public/chat.html
@ -1,128 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Neon Chat</title>
|
||||
<link rel="shortcut icon" href="/images/logo.svg">
|
||||
<link rel="stylesheet" href="../css/chat.css">
|
||||
<link rel="stylesheet" href="../css/snackbar.css">
|
||||
<script src="https://kit.fontawesome.com/9d7bb7e31a.js" crossorigin="anonymous"></script>
|
||||
<link rel="shortcut icon" href="/images/logo.svg" />
|
||||
<link rel="stylesheet" href="../css/chat.css" />
|
||||
<link rel="stylesheet" href="../css/snackbar.css" />
|
||||
<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/jqueryui/1.11.4/jquery-ui.min.js"></script>
|
||||
<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 property="og:image" content="https://neonchat.io/images/preview.png">
|
||||
<meta property="og:url" content="https://neonchat.io/">
|
||||
<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
|
||||
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 -->
|
||||
<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>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-162048272-1');
|
||||
gtag("js", new Date());
|
||||
gtag("config", "UA-162048272-1");
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div id="header">
|
||||
<a href="/">
|
||||
<img src="/images/logo.svg" alt="Neon" width="48" height="48">
|
||||
</head>
|
||||
<body>
|
||||
<div id="header">
|
||||
<a href="/">
|
||||
<img src="/images/logo.svg" alt="Neon" width="48" height="48" />
|
||||
<p>Neon Chat</p>
|
||||
</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>
|
||||
</a>
|
||||
</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 class="buttonContainer">
|
||||
<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 class="multi-button">
|
||||
<div class="buttonContainer">
|
||||
<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>
|
||||
<div class="HoverState" id="mic-text">Mute</div>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<button class="hoverButton" onclick="{openFullscreen()}">
|
||||
<i class="fas fa-compress fa-xs"></i>
|
||||
<i class="fas fa-compress fa-xs"></i>
|
||||
</button>
|
||||
<div class="HoverState">Fullscreen</div>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<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>
|
||||
<div class="HoverState" id="video-text">Pause Video</div>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<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>
|
||||
<div class="HoverState" id="swap-text">Share Screen</div>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<button class="hoverButton" onclick="{window.location.href = '/newroom'}">
|
||||
<i class="fas fa-phone-slash fa-xs"></i>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<button
|
||||
class="hoverButton"
|
||||
onclick="{window.location.href = '/newroom'}"
|
||||
>
|
||||
<i class="fas fa-phone-slash fa-xs"></i>
|
||||
</button>
|
||||
<div class="HoverState">End Call</div>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<button class="hoverButton" onclick="{requestToggleCaptions()}">
|
||||
<i class="fas fa-closed-captioning fa-xs"></i>
|
||||
<i class="fas fa-closed-captioning fa-xs"></i>
|
||||
</button>
|
||||
<div class="HoverState" id="caption-text">Start Live Caption</div>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<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>
|
||||
<div class="HoverState" id="chat-text">Show Chat</div>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<button class="hoverButton" id="pip-button" onclick="{togglePictureInPicture()}">
|
||||
<i class="fas fa-external-link-alt fa-xs"></i>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<button
|
||||
class="hoverButton"
|
||||
id="pip-button"
|
||||
onclick="{togglePictureInPicture()}"
|
||||
>
|
||||
<i class="fas fa-external-link-alt fa-xs"></i>
|
||||
</button>
|
||||
<div class="HoverState" id="pip-text">Enter Picture in Picture</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="../js/snackbar.js"></script>
|
||||
<script src="../js/chat.js"></script>
|
||||
</body>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="../js/snackbar.js"></script>
|
||||
<script src="../js/chat.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,289 +1,276 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:600|Heebo:400,500,700&display=swap");
|
||||
|
||||
|
||||
/*Fade in page on load*/
|
||||
@-webkit-keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*Fade in page on load*/
|
||||
|
||||
|
||||
body {
|
||||
background: #16171B;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0; /* make things invisible upon start */
|
||||
-webkit-animation: fadeIn ease-in 1;
|
||||
-moz-animation: fadeIn ease-in 1;
|
||||
animation: fadeIn ease-in 1;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-duration: 0.3s;
|
||||
-moz-animation-duration: 0.3s;
|
||||
animation-duration: 0.3s;
|
||||
background: #16171b;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0; /* make things invisible upon start */
|
||||
-webkit-animation: fadeIn ease-in 1;
|
||||
-moz-animation: fadeIn ease-in 1;
|
||||
animation: fadeIn ease-in 1;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-duration: 0.3s;
|
||||
-moz-animation-duration: 0.3s;
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
|
||||
|
||||
video {
|
||||
background: #16171a;
|
||||
background: #16171a;
|
||||
}
|
||||
|
||||
#header {
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
top: 40px;
|
||||
left: 80px;
|
||||
margin-left: 30px;
|
||||
margin-top: 30px;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
float: left;
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
top: 40px;
|
||||
left: 80px;
|
||||
margin-left: 30px;
|
||||
margin-top: 30px;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
float: left;
|
||||
}
|
||||
|
||||
#header p, img {
|
||||
float: left;
|
||||
padding: 7px;
|
||||
#header p,
|
||||
img {
|
||||
float: left;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
#header, a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
#header,
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
#moveable {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
width: 15%;
|
||||
cursor: move;
|
||||
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
width: 15%;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
||||
#moveable p {
|
||||
z-index: 101;
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-family: "Heebo", sans-serif;
|
||||
white-space: nowrap;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
font-weight: bold;
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
z-index: 101;
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-family: "Heebo", sans-serif;
|
||||
white-space: nowrap;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
font-weight: bold;
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#local-video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 20px;
|
||||
-webkit-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
background: #16171a;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 20px;
|
||||
-webkit-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
background: #16171a;
|
||||
}
|
||||
|
||||
#remote-video-text {
|
||||
/*padding: 0;*/
|
||||
margin: 0;
|
||||
width: 60vw;
|
||||
position: absolute;
|
||||
top: calc(80%);
|
||||
left: 20vw;
|
||||
/*-ms-transform: translate(-50%, -90%);*/
|
||||
/*transform: translate(-50%, -90%);*/
|
||||
z-index: 1;
|
||||
/*padding: 0;*/
|
||||
margin: 0;
|
||||
width: 60vw;
|
||||
position: absolute;
|
||||
top: calc(80%);
|
||||
left: 20vw;
|
||||
/*-ms-transform: translate(-50%, -90%);*/
|
||||
/*transform: translate(-50%, -90%);*/
|
||||
z-index: 1;
|
||||
|
||||
color: white;
|
||||
font-family: "Heebo", sans-serif;
|
||||
font-size: 40px;
|
||||
/*white-space: nowrap;*/
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
background: rgba(0, 0, 0, 0.20);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
font-family: "Heebo", sans-serif;
|
||||
font-size: 40px;
|
||||
/*white-space: nowrap;*/
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#remote-video {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
width: 70%;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
width: 70%;
|
||||
height: auto;
|
||||
|
||||
max-height: 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;
|
||||
max-height: 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;
|
||||
}
|
||||
|
||||
|
||||
/*Neomorphic buttons*/
|
||||
button {
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
transition: all .3s ease-in-out;
|
||||
color: gray;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
transition: all 0.3s ease-in-out;
|
||||
color: gray;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
color: white;
|
||||
border-radius: 100px;
|
||||
background: #16171a;
|
||||
color: white;
|
||||
border-radius: 100px;
|
||||
background: #16171a;
|
||||
}
|
||||
|
||||
.multi-button {
|
||||
position: absolute;
|
||||
left: calc(7.5vw - 40px);
|
||||
top: 50%;
|
||||
-ms-transform: translate(0%, -50%);
|
||||
transform: translate(0%, -50%);
|
||||
position: absolute;
|
||||
left: calc(7.5vw - 40px);
|
||||
top: 50%;
|
||||
-ms-transform: translate(0%, -50%);
|
||||
transform: translate(0%, -50%);
|
||||
|
||||
|
||||
z-index: 999;
|
||||
border-radius: 10px;
|
||||
background: #16171a;
|
||||
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
|
||||
padding: 15px;
|
||||
display: grid;
|
||||
grid-gap: 0.5rem;
|
||||
width: 50px;
|
||||
z-index: 999;
|
||||
border-radius: 10px;
|
||||
background: #16171a;
|
||||
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
|
||||
padding: 15px;
|
||||
display: grid;
|
||||
grid-gap: 0.5rem;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.HoverState {
|
||||
color: white;
|
||||
font-family: "Heebo", sans-serif;
|
||||
position: absolute;
|
||||
left: 70px;
|
||||
white-space: nowrap;
|
||||
top: 0px;
|
||||
font-weight: bold;
|
||||
background: #16171a;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
font-family: "Heebo", sans-serif;
|
||||
position: absolute;
|
||||
left: 70px;
|
||||
white-space: nowrap;
|
||||
top: 0px;
|
||||
font-weight: bold;
|
||||
background: #16171a;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.buttonContainer {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/*Neomorphic buttons*/
|
||||
|
||||
|
||||
/*simple chat*/
|
||||
|
||||
#entire-chat {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
width: 13vw;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
width: 13vw;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.compose {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
overflow: scroll;
|
||||
font-family: "Heebo", sans-serif;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
/*margin: 0;*/
|
||||
/*z-index: 1;*/
|
||||
border-radius: 20px;
|
||||
/*box-shadow: 6px 6px 12px #b11882, -6px -6px 12px #292a30;*/
|
||||
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #292a30;
|
||||
margin: 20px;
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
overflow: scroll;
|
||||
font-family: "Heebo", sans-serif;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
/*margin: 0;*/
|
||||
/*z-index: 1;*/
|
||||
border-radius: 20px;
|
||||
/*box-shadow: 6px 6px 12px #b11882, -6px -6px 12px #292a30;*/
|
||||
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #292a30;
|
||||
margin: 20px;
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.compose textarea::placeholder {
|
||||
color: white;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.compose textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
border: none;
|
||||
width: 100%;
|
||||
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;*/
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
border: none;
|
||||
width: 100%;
|
||||
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;*/
|
||||
}
|
||||
|
||||
|
||||
#chat-zone {
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
/*border: red 1px solid;*/
|
||||
position: absolute;
|
||||
height: calc(90% - 20px);
|
||||
right: 0;
|
||||
width: 15vw;
|
||||
overflow: scroll;
|
||||
/*overflow: -moz-scrollbars-none;*/
|
||||
/*-ms-overflow-style: none;*/
|
||||
/*-webkit-overflow-scrolling: touch;*/
|
||||
font-family: "Heebo", sans-serif;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
/*border: red 1px solid;*/
|
||||
position: absolute;
|
||||
height: calc(90% - 20px);
|
||||
right: 0;
|
||||
width: 15vw;
|
||||
overflow: scroll;
|
||||
/*overflow: -moz-scrollbars-none;*/
|
||||
/*-ms-overflow-style: none;*/
|
||||
/*-webkit-overflow-scrolling: touch;*/
|
||||
font-family: "Heebo", sans-serif;
|
||||
}
|
||||
|
||||
/*#chat-zone::-webkit-scrollbar {*/
|
||||
@ -292,61 +279,56 @@ button:hover {
|
||||
/*}*/
|
||||
|
||||
#chat-zone .chat-messages .message-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
padding: 0 16px 4px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
padding: 0 16px 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
#chat-zone .chat-messages .message-item.customer {
|
||||
padding-left: 40px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
|
||||
/*Your messages*/
|
||||
#chat-zone .message-item.moderator .message-bloc {
|
||||
background-color: rgb(22, 23, 26);
|
||||
color: #fff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
max-width: 100%;
|
||||
border-radius: 20px 20px 20px 5px;
|
||||
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #23242a;
|
||||
|
||||
background-color: rgb(22, 23, 26);
|
||||
color: #fff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
max-width: 100%;
|
||||
border-radius: 20px 20px 20px 5px;
|
||||
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #23242a;
|
||||
}
|
||||
|
||||
|
||||
/*Recieved messages*/
|
||||
#chat-zone .message-item.customer .message-bloc {
|
||||
background-color: rgb(42, 43, 47);
|
||||
color: #fff;
|
||||
border-radius: 20px 20px 5px 20px;
|
||||
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #22232a;
|
||||
|
||||
background-color: rgb(42, 43, 47);
|
||||
color: #fff;
|
||||
border-radius: 20px 20px 5px 20px;
|
||||
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #22232a;
|
||||
}
|
||||
|
||||
#chat-zone .chat-messages .message-item.customer .message-bloc {
|
||||
margin-left: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#chat-zone .chat-messages .message-item .message-bloc {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.message {
|
||||
word-break: break-all;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/*simple chat*/
|
||||
File diff suppressed because one or more lines are too long
@ -1,95 +1,96 @@
|
||||
.snackbar-container {
|
||||
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
|
||||
transition: all .5s ease;
|
||||
transition-property: top, right, bottom, left, opacity;
|
||||
font-family: "Heebo", sans-serif;
|
||||
font-size: 14px;
|
||||
min-height: 14px;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #b4b4b4;
|
||||
line-height: 22px;
|
||||
padding: 18px 24px;
|
||||
bottom: -100px;
|
||||
top: -100px;
|
||||
opacity: 0;
|
||||
z-index: 9999
|
||||
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
|
||||
transition: all 0.5s ease;
|
||||
transition-property: top, right, bottom, left, opacity;
|
||||
font-family: "Heebo", sans-serif;
|
||||
font-size: 14px;
|
||||
min-height: 14px;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #b4b4b4;
|
||||
line-height: 22px;
|
||||
padding: 18px 24px;
|
||||
bottom: -100px;
|
||||
top: -100px;
|
||||
opacity: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.snackbar-container .action {
|
||||
background: inherit;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
text-transform: uppercase;
|
||||
color: #4caf50;
|
||||
margin: 0 0 0 24px;
|
||||
padding: 0;
|
||||
min-width: min-content;
|
||||
cursor: pointer
|
||||
background: inherit;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
text-transform: uppercase;
|
||||
color: #4caf50;
|
||||
margin: 0 0 0 24px;
|
||||
padding: 0;
|
||||
min-width: min-content;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.snackbar-container {
|
||||
min-width: 288px;
|
||||
max-width: 568px;
|
||||
display: inline-flex;
|
||||
border-radius: 5px;
|
||||
margin: 24px
|
||||
}
|
||||
.snackbar-container {
|
||||
min-width: 288px;
|
||||
max-width: 568px;
|
||||
display: inline-flex;
|
||||
border-radius: 5px;
|
||||
margin: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.snackbar-container {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%
|
||||
}
|
||||
.snackbar-container {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.snackbar-pos.bottom-center {
|
||||
top: auto !important;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0)
|
||||
top: auto !important;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.snackbar-pos.bottom-left {
|
||||
top: auto !important;
|
||||
bottom: 0;
|
||||
left: 0
|
||||
top: auto !important;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.snackbar-pos.bottom-right {
|
||||
top: auto !important;
|
||||
bottom: 0;
|
||||
right: 0
|
||||
top: auto !important;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.snackbar-pos.top-left {
|
||||
bottom: auto !important;
|
||||
top: 0;
|
||||
left: 0
|
||||
bottom: auto !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.snackbar-pos.top-center {
|
||||
bottom: auto !important;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0)
|
||||
bottom: auto !important;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.snackbar-pos.top-right {
|
||||
bottom: auto !important;
|
||||
top: 0;
|
||||
right: 0
|
||||
bottom: auto !important;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.snackbar-pos.bottom-center, .snackbar-pos.top-center {
|
||||
left: 0;
|
||||
transform: none
|
||||
}
|
||||
.snackbar-pos.bottom-center,
|
||||
.snackbar-pos.top-center {
|
||||
left: 0;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,26 +1,28 @@
|
||||
; (function () {
|
||||
'use strict'
|
||||
const accordionEl = document.getElementsByClassName('accordion-header')
|
||||
(function () {
|
||||
"use strict";
|
||||
const accordionEl = document.getElementsByClassName("accordion-header");
|
||||
|
||||
function openAccordion (parent, panel) {
|
||||
parent.classList.add('is-active')
|
||||
panel.style.maxHeight = panel.scrollHeight + 'px'
|
||||
function openAccordion(parent, panel) {
|
||||
parent.classList.add("is-active");
|
||||
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||
}
|
||||
|
||||
function closeAccordion (parent, panel) {
|
||||
parent.classList.remove('is-active')
|
||||
panel.style.maxHeight = null
|
||||
function closeAccordion(parent, panel) {
|
||||
parent.classList.remove("is-active");
|
||||
panel.style.maxHeight = null;
|
||||
}
|
||||
|
||||
if (accordionEl.length > 0) {
|
||||
for (let i = 0; i < accordionEl.length; i++) {
|
||||
const el = accordionEl[i]
|
||||
const parent = el.parentNode
|
||||
const panel = el.nextElementSibling
|
||||
parent.classList.contains('is-active') && openAccordion(parent, panel)
|
||||
el.addEventListener('click', function () {
|
||||
parent.classList.contains('is-active') ? closeAccordion(parent, panel) : openAccordion(parent, panel)
|
||||
})
|
||||
const el = accordionEl[i];
|
||||
const parent = el.parentNode;
|
||||
const panel = el.nextElementSibling;
|
||||
parent.classList.contains("is-active") && openAccordion(parent, panel);
|
||||
el.addEventListener("click", function () {
|
||||
parent.classList.contains("is-active")
|
||||
? closeAccordion(parent, panel)
|
||||
: openAccordion(parent, panel);
|
||||
});
|
||||
}
|
||||
}
|
||||
}())
|
||||
})();
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
; (function () {
|
||||
'use strict'
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
// Swipe detector
|
||||
// https://gist.github.com/chrishaensel/e17c9f3838f246d75fe3bd19d6bb92e8#file-swipe-js
|
||||
@ -8,164 +8,188 @@
|
||||
touchEndX: 0,
|
||||
minSwipePixels: 30,
|
||||
detectionZone: undefined,
|
||||
swipeCallback: function () { },
|
||||
swipeCallback: function () {},
|
||||
|
||||
init: function (detectionZone, callback) {
|
||||
swipe.swipeCallback = callback
|
||||
detectionZone.addEventListener('touchstart', function (event) {
|
||||
swipe.touchStartX = event.changedTouches[0].screenX
|
||||
}, false)
|
||||
detectionZone.addEventListener('touchend', function (event) {
|
||||
swipe.touchEndX = event.changedTouches[0].screenX
|
||||
swipe.handleSwipeGesture()
|
||||
}, false)
|
||||
swipe.swipeCallback = callback;
|
||||
detectionZone.addEventListener(
|
||||
"touchstart",
|
||||
function (event) {
|
||||
swipe.touchStartX = event.changedTouches[0].screenX;
|
||||
},
|
||||
false
|
||||
);
|
||||
detectionZone.addEventListener(
|
||||
"touchend",
|
||||
function (event) {
|
||||
swipe.touchEndX = event.changedTouches[0].screenX;
|
||||
swipe.handleSwipeGesture();
|
||||
},
|
||||
false
|
||||
);
|
||||
},
|
||||
|
||||
handleSwipeGesture: function () {
|
||||
let direction, moved
|
||||
let direction, moved;
|
||||
if (swipe.touchEndX <= swipe.touchStartX) {
|
||||
moved = swipe.touchStartX - swipe.touchEndX
|
||||
direction = 'left'
|
||||
moved = swipe.touchStartX - swipe.touchEndX;
|
||||
direction = "left";
|
||||
}
|
||||
if (swipe.touchEndX >= swipe.touchStartX) {
|
||||
moved = swipe.touchEndX - swipe.touchStartX
|
||||
direction = 'right'
|
||||
moved = swipe.touchEndX - swipe.touchStartX;
|
||||
direction = "right";
|
||||
}
|
||||
if (moved > swipe.minSwipePixels && direction !== 'undefined') {
|
||||
swipe.swipe(direction, moved)
|
||||
if (moved > swipe.minSwipePixels && direction !== "undefined") {
|
||||
swipe.swipe(direction, moved);
|
||||
}
|
||||
},
|
||||
|
||||
swipe: function (direction, movedPixels) {
|
||||
let ret = {}
|
||||
ret.direction = direction
|
||||
ret.movedPixels = movedPixels
|
||||
swipe.swipeCallback(ret)
|
||||
}
|
||||
}
|
||||
let ret = {};
|
||||
ret.direction = direction;
|
||||
ret.movedPixels = movedPixels;
|
||||
swipe.swipeCallback(ret);
|
||||
},
|
||||
};
|
||||
|
||||
const carousels = document.getElementsByClassName('carousel-items')
|
||||
const carousels = document.getElementsByClassName("carousel-items");
|
||||
|
||||
// Rotate the carousel forward or backward
|
||||
function rotateCarousel(el, dir) {
|
||||
if (dir === undefined) {
|
||||
dir = 'next'
|
||||
dir = "next";
|
||||
}
|
||||
let currentItem = el.getElementsByClassName('carousel-item is-active')[0]
|
||||
let nextItem = (dir === 'next') ? currentItem.nextElementSibling : currentItem.previousElementSibling
|
||||
let index = currentItem.getAttribute('data-carousel')
|
||||
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')
|
||||
let currentItem = el.getElementsByClassName("carousel-item is-active")[0];
|
||||
let nextItem =
|
||||
dir === "next"
|
||||
? currentItem.nextElementSibling
|
||||
: currentItem.previousElementSibling;
|
||||
let index = currentItem.getAttribute("data-carousel");
|
||||
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) {
|
||||
nextItem.classList.add('is-active')
|
||||
nextBullet.classList.add('is-active')
|
||||
nextItem.classList.add("is-active");
|
||||
nextBullet.classList.add("is-active");
|
||||
} else {
|
||||
if (dir === 'next') {
|
||||
el.firstElementChild.classList.add('is-active')
|
||||
el.parentNode.getElementsByClassName('carousel-bullets')[0].firstElementChild.classList.add('is-active')
|
||||
if (dir === "next") {
|
||||
el.firstElementChild.classList.add("is-active");
|
||||
el.parentNode
|
||||
.getElementsByClassName("carousel-bullets")[0]
|
||||
.firstElementChild.classList.add("is-active");
|
||||
} else {
|
||||
el.lastElementChild.classList.add('is-active')
|
||||
el.parentNode.getElementsByClassName('carousel-bullets')[0].lastElementChild.classList.add('is-active')
|
||||
el.lastElementChild.classList.add("is-active");
|
||||
el.parentNode
|
||||
.getElementsByClassName("carousel-bullets")[0]
|
||||
.lastElementChild.classList.add("is-active");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Equal heights fix
|
||||
function equalHeightCarousel(carousel, items) {
|
||||
let taller = 0
|
||||
let height
|
||||
let taller = 0;
|
||||
let height;
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
items[0].parentNode.style.minHeight = taller + 'px'
|
||||
items[i].classList.add('is-loading')
|
||||
height = items[i].offsetHeight
|
||||
items[i].classList.remove('is-loading')
|
||||
items[0].parentNode.style.minHeight = taller + "px";
|
||||
items[i].classList.add("is-loading");
|
||||
height = items[i].offsetHeight;
|
||||
items[i].classList.remove("is-loading");
|
||||
if (height > taller) {
|
||||
taller = height
|
||||
taller = height;
|
||||
}
|
||||
}
|
||||
items[0].parentNode.style.minHeight = taller + 'px'
|
||||
items[0].parentNode.style.minHeight = taller + "px";
|
||||
}
|
||||
|
||||
// Clear autorotate
|
||||
function clearAutorotate(autorotate) {
|
||||
if (autorotate) {
|
||||
clearInterval(autorotate)
|
||||
clearInterval(autorotate);
|
||||
}
|
||||
}
|
||||
|
||||
if (carousels.length > 0) {
|
||||
for (let i = 0; i < carousels.length; i++) {
|
||||
let carousel = carousels[i]
|
||||
let items = carousel.getElementsByClassName('carousel-item')
|
||||
let activeItem = 0
|
||||
let autorotateTiming = carousel.getAttribute('data-autorotate')
|
||||
let carousel = carousels[i];
|
||||
let items = carousel.getElementsByClassName("carousel-item");
|
||||
let activeItem = 0;
|
||||
let autorotateTiming = carousel.getAttribute("data-autorotate");
|
||||
// Generate bullets container
|
||||
const bulletsContainer = document.createElement('div')
|
||||
bulletsContainer.className = 'carousel-bullets'
|
||||
carousel.parentNode.insertBefore(bulletsContainer, carousel.nextSibling)
|
||||
const bulletsContainer = document.createElement("div");
|
||||
bulletsContainer.className = "carousel-bullets";
|
||||
carousel.parentNode.insertBefore(bulletsContainer, carousel.nextSibling);
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
// Add data attributes
|
||||
items[i].setAttribute('data-carousel', i)
|
||||
items[i].setAttribute("data-carousel", i);
|
||||
// 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
|
||||
let bullet = document.createElement('button')
|
||||
bullet.className = 'carousel-bullet'
|
||||
bullet.setAttribute('data-bullet', i)
|
||||
carousel.parentNode.getElementsByClassName('carousel-bullets')[0].appendChild(bullet)
|
||||
let bullet = document.createElement("button");
|
||||
bullet.className = "carousel-bullet";
|
||||
bullet.setAttribute("data-bullet", i);
|
||||
carousel.parentNode
|
||||
.getElementsByClassName("carousel-bullets")[0]
|
||||
.appendChild(bullet);
|
||||
}
|
||||
// Add is-active class to first carousel item and bullet
|
||||
items[activeItem].classList.add('is-active')
|
||||
let bullets = carousel.parentNode.getElementsByClassName('carousel-bullet')
|
||||
bullets[activeItem].classList.add('is-active')
|
||||
items[activeItem].classList.add("is-active");
|
||||
let bullets = carousel.parentNode.getElementsByClassName(
|
||||
"carousel-bullet"
|
||||
);
|
||||
bullets[activeItem].classList.add("is-active");
|
||||
// Equal height items
|
||||
equalHeightCarousel(carousel, items)
|
||||
window.addEventListener('resize', function () {
|
||||
equalHeightCarousel(carousel, items)
|
||||
})
|
||||
equalHeightCarousel(carousel, items);
|
||||
window.addEventListener("resize", function () {
|
||||
equalHeightCarousel(carousel, items);
|
||||
});
|
||||
// Autorotate
|
||||
let autorotate = false
|
||||
let autorotate = false;
|
||||
if (autorotateTiming) {
|
||||
autorotate = setInterval(function () {
|
||||
rotateCarousel(carousel, 'next')
|
||||
}, autorotateTiming)
|
||||
rotateCarousel(carousel, "next");
|
||||
}, autorotateTiming);
|
||||
}
|
||||
// Rotate by bullet click
|
||||
for (let i = 0; i < bullets.length; i++) {
|
||||
let bullet = bullets[i]
|
||||
bullet.addEventListener('click', function (e) {
|
||||
e.preventDefault()
|
||||
let bullet = bullets[i];
|
||||
bullet.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
// Do nothing if item is active
|
||||
if (bullet.classList.contains('is-active')) {
|
||||
return
|
||||
if (bullet.classList.contains("is-active")) {
|
||||
return;
|
||||
}
|
||||
// Remove active classes
|
||||
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++) {
|
||||
items[i].classList.remove('is-active')
|
||||
items[i].classList.remove("is-active");
|
||||
}
|
||||
// Add active classes to corresponding items and bullets
|
||||
let index = this.getAttribute('data-bullet')
|
||||
items[index].classList.add('is-active')
|
||||
this.classList.add('is-active')
|
||||
let index = this.getAttribute("data-bullet");
|
||||
items[index].classList.add("is-active");
|
||||
this.classList.add("is-active");
|
||||
// Clear autorotate timing
|
||||
clearAutorotate(autorotate)
|
||||
})
|
||||
clearAutorotate(autorotate);
|
||||
});
|
||||
}
|
||||
// Rotate on swipe
|
||||
swipe.init(carousel, function (e) {
|
||||
if (e.direction === 'left') {
|
||||
rotateCarousel(carousel, 'next')
|
||||
} else if (e.direction === 'right') {
|
||||
rotateCarousel(carousel, 'prev')
|
||||
if (e.direction === "left") {
|
||||
rotateCarousel(carousel, "next");
|
||||
} else if (e.direction === "right") {
|
||||
rotateCarousel(carousel, "prev");
|
||||
}
|
||||
// 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";
|
||||
const e = document.getElementsByClassName("accordion-header");
|
||||
|
||||
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) {
|
||||
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++) {
|
||||
const s = e[i], a = s.parentNode, l = s.nextElementSibling;
|
||||
a.classList.contains("is-active") && t(a, l), s.addEventListener("click", function () {
|
||||
a.classList.contains("is-active") ? n(a, l) : t(a, l)
|
||||
})
|
||||
}
|
||||
}(), 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)
|
||||
if (e.length > 0)
|
||||
for (let i = 0; i < e.length; i++) {
|
||||
const s = e[i],
|
||||
a = s.parentNode,
|
||||
l = s.nextElementSibling;
|
||||
a.classList.contains("is-active") && t(a, l),
|
||||
s.addEventListener("click", function () {
|
||||
a.classList.contains("is-active") ? n(a, l) : t(a, l);
|
||||
});
|
||||
}
|
||||
};
|
||||
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) {
|
||||
void 0 === t && (t = "next");
|
||||
let n = e.getElementsByClassName("carousel-item is-active")[0],
|
||||
i = "next" === t ? n.nextElementSibling : n.previousElementSibling, s = n.getAttribute("data-carousel"),
|
||||
function n(e, t) {
|
||||
void 0 === t && (t = "next");
|
||||
let n = e.getElementsByClassName("carousel-item is-active")[0],
|
||||
i = "next" === t ? n.nextElementSibling : n.previousElementSibling,
|
||||
s = n.getAttribute("data-carousel"),
|
||||
a = e.parentNode.getElementsByClassName("carousel-bullet")[s],
|
||||
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"))
|
||||
}
|
||||
|
||||
function i(e, t) {
|
||||
let n, i = 0;
|
||||
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);
|
||||
t[0].parentNode.style.minHeight = i + "px"
|
||||
}
|
||||
|
||||
function s(e) {
|
||||
e && clearInterval(e)
|
||||
}
|
||||
|
||||
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)
|
||||
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"));
|
||||
}
|
||||
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)
|
||||
})
|
||||
|
||||
function i(e, t) {
|
||||
let n,
|
||||
i = 0;
|
||||
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);
|
||||
t[0].parentNode.style.minHeight = i + "px";
|
||||
}
|
||||
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")
|
||||
}
|
||||
|
||||
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 s(e) {
|
||||
e && clearInterval(e);
|
||||
}
|
||||
}
|
||||
|
||||
function i() {
|
||||
for (let i = 0; i < e.length; i++) {
|
||||
let s = e[i], a = s.getAttribute("data-reveal-delay"),
|
||||
l = s.getAttribute("data-reveal-offset") ? s.getAttribute("data-reveal-offset") : "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"))
|
||||
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");
|
||||
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() {
|
||||
n(30, i())
|
||||
}
|
||||
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 a() {
|
||||
t = window.innerHeight, n(30, i())
|
||||
}
|
||||
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.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 < .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)
|
||||
})
|
||||
})
|
||||
}
|
||||
}();
|
||||
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() {
|
||||
for (let i = 0; i < e.length; i++) {
|
||||
let s = e[i],
|
||||
a = s.getAttribute("data-reveal-delay"),
|
||||
l = s.getAttribute("data-reveal-offset")
|
||||
? s.getAttribute("data-reveal-offset")
|
||||
: "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 () {
|
||||
'use strict'
|
||||
const navToggle = document.getElementById('header-nav-toggle')
|
||||
const mainNav = document.getElementById('header-nav')
|
||||
(function () {
|
||||
"use strict";
|
||||
const navToggle = document.getElementById("header-nav-toggle");
|
||||
const mainNav = document.getElementById("header-nav");
|
||||
|
||||
if (navToggle) {
|
||||
// Open menu
|
||||
navToggle.addEventListener('click', function () {
|
||||
document.body.classList.toggle('off-nav-is-active')
|
||||
mainNav.classList.toggle('is-active')
|
||||
navToggle.addEventListener("click", function () {
|
||||
document.body.classList.toggle("off-nav-is-active");
|
||||
mainNav.classList.toggle("is-active");
|
||||
if (mainNav.style.maxHeight) {
|
||||
mainNav.style.maxHeight = null
|
||||
mainNav.style.maxHeight = null;
|
||||
} 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
|
||||
document.addEventListener('click', function (e) {
|
||||
if (e.target !== mainNav && e.target !== navToggle && !mainNav.contains(e.target)) {
|
||||
document.body.classList.remove('off-nav-is-active')
|
||||
mainNav.classList.remove('is-active')
|
||||
mainNav.style.maxHeight = null
|
||||
navToggle.setAttribute('aria-expanded', 'false')
|
||||
document.addEventListener("click", function (e) {
|
||||
if (
|
||||
e.target !== mainNav &&
|
||||
e.target !== navToggle &&
|
||||
!mainNav.contains(e.target)
|
||||
) {
|
||||
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 () {
|
||||
'use strict'
|
||||
const modals = document.getElementsByClassName('modal')
|
||||
const modalTriggers = document.getElementsByClassName('modal-trigger')
|
||||
(function () {
|
||||
"use strict";
|
||||
const modals = document.getElementsByClassName("modal");
|
||||
const modalTriggers = document.getElementsByClassName("modal-trigger");
|
||||
|
||||
function openModal (el) {
|
||||
function openModal(el) {
|
||||
if (el) {
|
||||
document.body.classList.add('modal-is-active')
|
||||
el.classList.add('is-active')
|
||||
document.body.classList.add("modal-is-active");
|
||||
el.classList.add("is-active");
|
||||
}
|
||||
}
|
||||
|
||||
function closeModals () {
|
||||
document.body.classList.remove('modal-is-active')
|
||||
function closeModals() {
|
||||
document.body.classList.remove("modal-is-active");
|
||||
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) {
|
||||
for (let i = 0; i < modalTriggers.length; i++) {
|
||||
let modalTrigger = modalTriggers[i]
|
||||
let modal = document.getElementById(modalTrigger.getAttribute('aria-controls'))
|
||||
let modalTrigger = modalTriggers[i];
|
||||
let modal = document.getElementById(
|
||||
modalTrigger.getAttribute("aria-controls")
|
||||
);
|
||||
if (modal) {
|
||||
// Modal video
|
||||
if (modalTrigger.hasAttribute('data-video')) {
|
||||
if (modal.querySelector('iframe') !== null) {
|
||||
modal.querySelector('iframe').setAttribute('src', modalTrigger.getAttribute('data-video'))
|
||||
} else if (modal.querySelector('video') !== null) {
|
||||
modal.querySelector('video').setAttribute('src', modalTrigger.getAttribute('data-video'))
|
||||
if (modalTrigger.hasAttribute("data-video")) {
|
||||
if (modal.querySelector("iframe") !== null) {
|
||||
modal
|
||||
.querySelector("iframe")
|
||||
.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) {
|
||||
e.preventDefault()
|
||||
if (modalTrigger.hasAttribute('aria-controls')) {
|
||||
openModal(modal)
|
||||
modalTrigger.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
if (modalTrigger.hasAttribute("aria-controls")) {
|
||||
openModal(modal);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('click', function (e) {
|
||||
if (e.target.classList.contains('modal') || e.target.classList.contains('modal-close-trigger')) {
|
||||
e.preventDefault()
|
||||
closeModals()
|
||||
document.addEventListener("click", function (e) {
|
||||
if (
|
||||
e.target.classList.contains("modal") ||
|
||||
e.target.classList.contains("modal-close-trigger")
|
||||
) {
|
||||
e.preventDefault();
|
||||
closeModals();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function (event) {
|
||||
var e = event || window.event
|
||||
document.addEventListener("keydown", function (event) {
|
||||
var e = event || window.event;
|
||||
if (e.keyCode === 27) {
|
||||
closeModals()
|
||||
closeModals();
|
||||
}
|
||||
})
|
||||
}())
|
||||
});
|
||||
})();
|
||||
|
||||
@ -1,16 +1,124 @@
|
||||
var adjectives = ["small", "big", "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 adjectives = [
|
||||
"small",
|
||||
"big",
|
||||
"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",
|
||||
"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 nouns = [
|
||||
"dog",
|
||||
"bat",
|
||||
"wrench",
|
||||
"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 noun = nouns[Math.floor(Math.random() * nouns.length)];
|
||||
noun = noun.charAt(0).toUpperCase() + noun.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 () {
|
||||
'use strict'
|
||||
const pricingToggle = document.getElementById('pricing-toggle')
|
||||
(function () {
|
||||
"use strict";
|
||||
const pricingToggle = document.getElementById("pricing-toggle");
|
||||
|
||||
if (pricingToggle) {
|
||||
window.addEventListener('load', pricingSwitch)
|
||||
pricingToggle.addEventListener('change', pricingSwitch)
|
||||
window.addEventListener("load", pricingSwitch);
|
||||
pricingToggle.addEventListener("change", pricingSwitch);
|
||||
}
|
||||
|
||||
function pricingSwitch () {
|
||||
const switchables = document.getElementsByClassName('pricing-switchable')
|
||||
function pricingSwitch() {
|
||||
const switchables = document.getElementsByClassName("pricing-switchable");
|
||||
if (pricingToggle.checked) {
|
||||
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 {
|
||||
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 () {
|
||||
'use strict'
|
||||
const revealEl = document.querySelectorAll('[class*=reveal-]')
|
||||
let viewportHeight = window.innerHeight
|
||||
(function () {
|
||||
"use strict";
|
||||
const revealEl = document.querySelectorAll("[class*=reveal-]");
|
||||
let viewportHeight = window.innerHeight;
|
||||
|
||||
function throttle (delay, fn) {
|
||||
var lastCall = 0
|
||||
function throttle(delay, fn) {
|
||||
var lastCall = 0;
|
||||
return function () {
|
||||
var now = new Date().getTime()
|
||||
var now = new Date().getTime();
|
||||
if (now - lastCall < delay) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
lastCall = now
|
||||
return fn.apply(void 0, arguments)
|
||||
}
|
||||
lastCall = now;
|
||||
return fn.apply(void 0, arguments);
|
||||
};
|
||||
}
|
||||
|
||||
function elementIsVisible (el, offset) {
|
||||
return (el.getBoundingClientRect().top <= viewportHeight - offset)
|
||||
function elementIsVisible(el, offset) {
|
||||
return el.getBoundingClientRect().top <= viewportHeight - offset;
|
||||
}
|
||||
|
||||
function revealElements () {
|
||||
function revealElements() {
|
||||
for (let i = 0; i < revealEl.length; i++) {
|
||||
let el = revealEl[i]
|
||||
let revealDelay = el.getAttribute('data-reveal-delay')
|
||||
let revealOffset = (el.getAttribute('data-reveal-offset') ? el.getAttribute('data-reveal-offset') : '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')) {
|
||||
let el = revealEl[i];
|
||||
let revealDelay = el.getAttribute("data-reveal-delay");
|
||||
let revealOffset = el.getAttribute("data-reveal-offset")
|
||||
? el.getAttribute("data-reveal-offset")
|
||||
: "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) {
|
||||
setTimeout(function () {
|
||||
el.classList.add('is-revealed')
|
||||
}, revealDelay)
|
||||
el.classList.add("is-revealed");
|
||||
}, revealDelay);
|
||||
} else {
|
||||
el.classList.add('is-revealed')
|
||||
el.classList.add("is-revealed");
|
||||
}
|
||||
}
|
||||
}
|
||||
revealDone()
|
||||
revealDone();
|
||||
}
|
||||
|
||||
function revealScroll () {
|
||||
throttle(30, revealElements())
|
||||
function revealScroll() {
|
||||
throttle(30, revealElements());
|
||||
}
|
||||
|
||||
function revealResize () {
|
||||
viewportHeight = window.innerHeight
|
||||
throttle(30, revealElements())
|
||||
function revealResize() {
|
||||
viewportHeight = window.innerHeight;
|
||||
throttle(30, revealElements());
|
||||
}
|
||||
|
||||
function revealDone () {
|
||||
if (revealEl.length > document.querySelectorAll('[class*=reveal-].is-revealed').length) return
|
||||
window.removeEventListener('load', revealElements)
|
||||
window.removeEventListener('scroll', revealScroll)
|
||||
window.removeEventListener('resize', revealResize)
|
||||
function revealDone() {
|
||||
if (
|
||||
revealEl.length >
|
||||
document.querySelectorAll("[class*=reveal-].is-revealed").length
|
||||
)
|
||||
return;
|
||||
window.removeEventListener("load", revealElements);
|
||||
window.removeEventListener("scroll", revealScroll);
|
||||
window.removeEventListener("resize", revealResize);
|
||||
}
|
||||
|
||||
if (revealEl.length > 0 && document.body.classList.contains('has-animations')) {
|
||||
window.addEventListener('load', revealElements)
|
||||
window.addEventListener('scroll', revealScroll)
|
||||
window.addEventListener('resize', revealResize)
|
||||
if (
|
||||
revealEl.length > 0 &&
|
||||
document.body.classList.contains("has-animations")
|
||||
) {
|
||||
window.addEventListener("load", revealElements);
|
||||
window.addEventListener("scroll", revealScroll);
|
||||
window.addEventListener("resize", revealResize);
|
||||
}
|
||||
}())
|
||||
})();
|
||||
|
||||
@ -1,51 +1,69 @@
|
||||
;(function () {
|
||||
'use strict'
|
||||
const smoothScrollLinks = document.getElementsByClassName('smooth-scroll')
|
||||
(function () {
|
||||
"use strict";
|
||||
const smoothScrollLinks = document.getElementsByClassName("smooth-scroll");
|
||||
|
||||
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 runtime = currentTime - startTime
|
||||
let progress = runtime / duration
|
||||
const scrollToEl = (
|
||||
startTime,
|
||||
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) {
|
||||
window.requestAnimationFrame((timestamp) => {
|
||||
const currentTime = timestamp || new Date().getTime()
|
||||
scrollToEl(startTime, currentTime, duration, scrollEndElemTop, startScrollOffset)
|
||||
})
|
||||
const currentTime = timestamp || new Date().getTime();
|
||||
scrollToEl(
|
||||
startTime,
|
||||
currentTime,
|
||||
duration,
|
||||
scrollEndElemTop,
|
||||
startScrollOffset
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (smoothScrollLinks.length > 0) {
|
||||
for (let i = 0; i < smoothScrollLinks.length; i++) {
|
||||
const smoothScrollLink = smoothScrollLinks[i]
|
||||
const smoothScrollLink = smoothScrollLinks[i];
|
||||
|
||||
smoothScrollLink.addEventListener('click', function (e) {
|
||||
e.preventDefault()
|
||||
const link = e.target.closest('.smooth-scroll')
|
||||
const targetId = link.href.split('#')[1]
|
||||
const target = document.getElementById(targetId)
|
||||
const duration = link.getAttribute('data-duration') || 1000
|
||||
smoothScrollLink.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
const link = e.target.closest(".smooth-scroll");
|
||||
const targetId = link.href.split("#")[1];
|
||||
const target = document.getElementById(targetId);
|
||||
const duration = link.getAttribute("data-duration") || 1000;
|
||||
|
||||
if (!target) return
|
||||
if (!target) return;
|
||||
|
||||
window.requestAnimationFrame((timestamp) => {
|
||||
const stamp = timestamp || new Date().getTime()
|
||||
const start = stamp
|
||||
const stamp = timestamp || new Date().getTime();
|
||||
const start = stamp;
|
||||
|
||||
const startScrollOffset = window.pageYOffset
|
||||
const scrollEndElemTop = target.getBoundingClientRect().top
|
||||
const startScrollOffset = window.pageYOffset;
|
||||
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
|
||||
*/
|
||||
|
||||
(function(root, factory) {
|
||||
'use strict';
|
||||
(function (root, factory) {
|
||||
"use strict";
|
||||
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define([], function() {
|
||||
return (root.Snackbar = factory());
|
||||
});
|
||||
} else if (typeof module === 'object' && module.exports) {
|
||||
module.exports = root.Snackbar = factory();
|
||||
} else {
|
||||
root.Snackbar = factory();
|
||||
if (typeof define === "function" && define.amd) {
|
||||
define([], function () {
|
||||
return (root.Snackbar = factory());
|
||||
});
|
||||
} else if (typeof module === "object" && module.exports) {
|
||||
module.exports = root.Snackbar = factory();
|
||||
} else {
|
||||
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;
|
||||
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.snackbar = document.createElement("div");
|
||||
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;
|
||||
|
||||
Snackbar.show = function($options) {
|
||||
var options = Extend(true, $defaults, $options);
|
||||
if (options.showSecondButton) {
|
||||
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;
|
||||
setTimeout(
|
||||
function() {
|
||||
var $parent = this.parentElement;
|
||||
if ($parent)
|
||||
// possible null if too many/fast Snackbars
|
||||
$parent.removeChild(this);
|
||||
}.bind(Snackbar.current),
|
||||
500
|
||||
);
|
||||
// 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.snackbar = document.createElement('div');
|
||||
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;
|
||||
Snackbar.current = Snackbar.snackbar;
|
||||
|
||||
if (options.showSecondButton) {
|
||||
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);
|
||||
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 () {
|
||||
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() {
|
||||
if (Snackbar.current) {
|
||||
Snackbar.current.style.opacity = 0;
|
||||
}
|
||||
};
|
||||
for (; i < length; i++) {
|
||||
var obj = arguments[i];
|
||||
merge(obj);
|
||||
}
|
||||
|
||||
// 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;
|
||||
return extended;
|
||||
};
|
||||
|
||||
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];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
for (; i < length; i++) {
|
||||
var obj = arguments[i];
|
||||
merge(obj);
|
||||
}
|
||||
|
||||
return extended;
|
||||
};
|
||||
|
||||
return Snackbar;
|
||||
return Snackbar;
|
||||
});
|
||||
|
||||
@ -1,341 +1,469 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>Neon Chat</title>
|
||||
<link rel="stylesheet" href="css/landing.css">
|
||||
<link rel="shortcut icon" href="images/logo.svg">
|
||||
<meta property="og:title" content="Neonchat - Decentralized video calls">
|
||||
<meta property="og:description" content="Decentralized video
|
||||
<link rel="stylesheet" href="css/landing.css" />
|
||||
<link rel="shortcut icon" href="images/logo.svg" />
|
||||
<meta property="og:title" content="Neonchat - Decentralized video calls" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Decentralized video
|
||||
calling provides real-time HD quality and latency simply
|
||||
not available with traditional technology.">
|
||||
<meta property="og:image" content="https://neonchat.io/images/preview.png">
|
||||
<meta property="og:url" content="https://neonchat.io/">
|
||||
not available with traditional technology."
|
||||
/>
|
||||
<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 -->
|
||||
<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>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-162048272-1');
|
||||
gtag("js", new Date());
|
||||
gtag("config", "UA-162048272-1");
|
||||
</script>
|
||||
</head>
|
||||
<body class="has-animations">
|
||||
<div class="body-wrap">
|
||||
<header class="site-header reveal-from-top">
|
||||
</head>
|
||||
<body class="has-animations">
|
||||
<div class="body-wrap">
|
||||
<header class="site-header reveal-from-top">
|
||||
<div class="container">
|
||||
<div class="site-header-inner">
|
||||
<div class="brand">
|
||||
<h1 class="m-0"><a href="/"><img src="images/logo.svg" alt="Neon"
|
||||
width="32"
|
||||
height="32"></a>
|
||||
</h1>
|
||||
</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 class="site-header-inner">
|
||||
<div class="brand">
|
||||
<h1 class="m-0">
|
||||
<a href="/"
|
||||
><img src="images/logo.svg" alt="Neon" width="32" height="32"
|
||||
/></a>
|
||||
</h1>
|
||||
</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>
|
||||
</header>
|
||||
<main class="site-content">
|
||||
</header>
|
||||
<main class="site-content">
|
||||
<section class="hero section illustration-section-01">
|
||||
<div class="container">
|
||||
<div class="hero-inner section-inner">
|
||||
<div class="split-wrap invert-mobile">
|
||||
<div class="split-item">
|
||||
<div class="hero-content split-item-content center-content-mobile"><h1
|
||||
class="mt-0 mb-16 reveal-from-bottom" data-reveal-delay="150">Neon Chat.<br>The most
|
||||
advanced
|
||||
video chat ever created.</h1>
|
||||
<p class="mt-0 mb-32 reveal-from-bottom" data-reveal-delay="300">Decentralized video
|
||||
calling provides quality and latency simply
|
||||
not available with traditional technology.</p>
|
||||
<div class="reveal-from-bottom" data-reveal-delay="450"><a
|
||||
class="button button-primary button-wide-mobile pulse"
|
||||
style="border:0; background: linear-gradient(100deg, #376DF9 0, #FF5FA0 75%, #FFC55A 100%);"
|
||||
href="/newroom">Try now</a>
|
||||
</div>
|
||||
</div>
|
||||
<style>@media (min-width: 641px) {
|
||||
.hero .split-wrap .split-item {
|
||||
min-height: 492px
|
||||
}
|
||||
}</style>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="hero-inner section-inner">
|
||||
<div class="split-wrap invert-mobile">
|
||||
<div class="split-item">
|
||||
<div
|
||||
class="hero-content split-item-content center-content-mobile"
|
||||
>
|
||||
<h1
|
||||
class="mt-0 mb-16 reveal-from-bottom"
|
||||
data-reveal-delay="150"
|
||||
>
|
||||
Neon Chat.<br />The most advanced video chat ever created.
|
||||
</h1>
|
||||
<p
|
||||
class="mt-0 mb-32 reveal-from-bottom"
|
||||
data-reveal-delay="300"
|
||||
>
|
||||
Decentralized video calling provides quality and latency
|
||||
simply not available with traditional technology.
|
||||
</p>
|
||||
<div class="reveal-from-bottom" data-reveal-delay="450">
|
||||
<a
|
||||
class="button button-primary button-wide-mobile pulse"
|
||||
style="
|
||||
border: 0;
|
||||
background: linear-gradient(
|
||||
100deg,
|
||||
#376df9 0,
|
||||
#ff5fa0 75%,
|
||||
#ffc55a 100%
|
||||
);
|
||||
"
|
||||
href="/newroom"
|
||||
>Try now</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
@media (min-width: 641px) {
|
||||
.hero .split-wrap .split-item {
|
||||
min-height: 492px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div>
|
||||
<!-- <section class="clients section reveal-fade">-->
|
||||
<!-- <div class="container">-->
|
||||
<!-- <div class="clients-inner section-inner has-top-divider has-bottom-divider">-->
|
||||
<!-- <ul class="list-reset">-->
|
||||
<!-- <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"-->
|
||||
<!-- alt="Clients 02"></li>-->
|
||||
<!-- <li class="reveal-from-top" data-reveal-delay="300"><img src="images/clients-03.svg"-->
|
||||
<!-- alt="Clients 03"></li>-->
|
||||
<!-- <li class="reveal-from-bottom" data-reveal-delay="450"><img src="images/clients-04.svg"-->
|
||||
<!-- alt="Clients 04"></li>-->
|
||||
<!-- <li class="reveal-from-top" data-reveal-delay="600"><img src="images/clients-05.svg"-->
|
||||
<!-- alt="Clients 05"></li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
<!-- <section class="clients section reveal-fade">-->
|
||||
<!-- <div class="container">-->
|
||||
<!-- <div class="clients-inner section-inner has-top-divider has-bottom-divider">-->
|
||||
<!-- <ul class="list-reset">-->
|
||||
<!-- <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"-->
|
||||
<!-- alt="Clients 02"></li>-->
|
||||
<!-- <li class="reveal-from-top" data-reveal-delay="300"><img src="images/clients-03.svg"-->
|
||||
<!-- alt="Clients 03"></li>-->
|
||||
<!-- <li class="reveal-from-bottom" data-reveal-delay="450"><img src="images/clients-04.svg"-->
|
||||
<!-- alt="Clients 04"></li>-->
|
||||
<!-- <li class="reveal-from-top" data-reveal-delay="600"><img src="images/clients-05.svg"-->
|
||||
<!-- alt="Clients 05"></li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
|
||||
<!-- Video-->
|
||||
<!-- <section class="section center-content">-->
|
||||
<!-- <div class="container">-->
|
||||
<!-- <div class="section-inner">-->
|
||||
<!-- <div class="section-header reveal-from-bottom">-->
|
||||
<!-- <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-->
|
||||
<!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa-->
|
||||
<!-- qui.</p></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="reveal-from-bottom"><a class="modal-trigger" aria-controls="modal-01"-->
|
||||
<!-- data-video="https://player.vimeo.com/video/174002812"-->
|
||||
<!-- href="#"><img src="images/video-placeholder.svg" alt="Video"-->
|
||||
<!-- width="712" height="400"></a></div>-->
|
||||
<!-- <div id="modal-01" class="modal modal-video">-->
|
||||
<!-- <div class="modal-inner">-->
|
||||
<!-- <div class="responsive-video">-->
|
||||
<!-- <iframe src="#" frameborder="0" webkitallowfullscreen mozallowfullscreen-->
|
||||
<!-- allowfullscreen></iframe>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
<!-- End Video-->
|
||||
<!-- Video-->
|
||||
<!-- <section class="section center-content">-->
|
||||
<!-- <div class="container">-->
|
||||
<!-- <div class="section-inner">-->
|
||||
<!-- <div class="section-header reveal-from-bottom">-->
|
||||
<!-- <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-->
|
||||
<!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa-->
|
||||
<!-- qui.</p></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="reveal-from-bottom"><a class="modal-trigger" aria-controls="modal-01"-->
|
||||
<!-- data-video="https://player.vimeo.com/video/174002812"-->
|
||||
<!-- href="#"><img src="images/video-placeholder.svg" alt="Video"-->
|
||||
<!-- width="712" height="400"></a></div>-->
|
||||
<!-- <div id="modal-01" class="modal modal-video">-->
|
||||
<!-- <div class="modal-inner">-->
|
||||
<!-- <div class="responsive-video">-->
|
||||
<!-- <iframe src="#" frameborder="0" webkitallowfullscreen mozallowfullscreen-->
|
||||
<!-- allowfullscreen></iframe>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
<!-- End Video-->
|
||||
</div>
|
||||
|
||||
<section class="features-tiles section center-content">
|
||||
<div class="container">
|
||||
<div class="features-tiles-inner section-inner has-top-divider">
|
||||
<div class="section-header">
|
||||
<div class="container-xs reveal-from-bottom" data-reveal-delay="650"><h2 class="mt-0 mb-16">See
|
||||
the whole picture</h2>
|
||||
<p class="m-0">Neon Chat is built radically different. We ditched slow bulky servers,
|
||||
opting for decentralized peer to peer calling. Maximum video quality and
|
||||
lowest latency. Its good, trust us.</p></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 class="container">
|
||||
<div class="features-tiles-inner section-inner has-top-divider">
|
||||
<div class="section-header">
|
||||
<div
|
||||
class="container-xs reveal-from-bottom"
|
||||
data-reveal-delay="650"
|
||||
>
|
||||
<h2 class="mt-0 mb-16">See the whole picture</h2>
|
||||
<p class="m-0">
|
||||
Neon Chat is built radically different. We ditched slow
|
||||
bulky servers, opting for decentralized peer to peer
|
||||
calling. Maximum video quality and lowest latency. Its good,
|
||||
trust us.
|
||||
</p>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-inner has-top-divider">
|
||||
<div class="container-xs">
|
||||
<div class="section-header center-content"><h2 class="m-0">Tired of the old way of
|
||||
chatting? </h2></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 class="container">
|
||||
<div class="section-inner has-top-divider">
|
||||
<div class="container-xs">
|
||||
<div class="section-header center-content">
|
||||
<h2 class="m-0">Tired of the old way of chatting?</h2>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<div>
|
||||
<!-- <section class="testimonial section">-->
|
||||
<!-- <div class="container">-->
|
||||
<!-- <div class="testimonial-inner section-inner has-top-divider">-->
|
||||
<!-- <div class="section-header center-content">-->
|
||||
<!-- <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-->
|
||||
<!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa-->
|
||||
<!-- qui.</p></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="tiles-wrap">-->
|
||||
<!-- <div class="tiles-item reveal-from-right" data-reveal-delay="200">-->
|
||||
<!-- <div class="tiles-item-inner">-->
|
||||
<!-- <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.-->
|
||||
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
|
||||
<!-- 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-->
|
||||
<!-- 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>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="tiles-item reveal-from-bottom">-->
|
||||
<!-- <div class="tiles-item-inner">-->
|
||||
<!-- <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.-->
|
||||
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
|
||||
<!-- 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-->
|
||||
<!-- 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>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="tiles-item reveal-from-left" data-reveal-delay="200">-->
|
||||
<!-- <div class="tiles-item-inner">-->
|
||||
<!-- <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.-->
|
||||
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
|
||||
<!-- 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-->
|
||||
<!-- 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>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
<!-- <section class="testimonial section">-->
|
||||
<!-- <div class="container">-->
|
||||
<!-- <div class="testimonial-inner section-inner has-top-divider">-->
|
||||
<!-- <div class="section-header center-content">-->
|
||||
<!-- <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-->
|
||||
<!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa-->
|
||||
<!-- qui.</p></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="tiles-wrap">-->
|
||||
<!-- <div class="tiles-item reveal-from-right" data-reveal-delay="200">-->
|
||||
<!-- <div class="tiles-item-inner">-->
|
||||
<!-- <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.-->
|
||||
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
|
||||
<!-- 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-->
|
||||
<!-- 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>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="tiles-item reveal-from-bottom">-->
|
||||
<!-- <div class="tiles-item-inner">-->
|
||||
<!-- <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.-->
|
||||
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
|
||||
<!-- 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-->
|
||||
<!-- 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>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="tiles-item reveal-from-left" data-reveal-delay="200">-->
|
||||
<!-- <div class="tiles-item-inner">-->
|
||||
<!-- <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.-->
|
||||
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
|
||||
<!-- 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-->
|
||||
<!-- 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>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
|
||||
<!-- <section class="cta section center-content-mobile reveal-from-bottom">-->
|
||||
<!-- <div class="container">-->
|
||||
<!-- <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-action">-->
|
||||
<!-- <div class="has-icon-right"><label for="newsletter"-->
|
||||
<!-- class="form-label screen-reader">Subscribe</label> <input-->
|
||||
<!-- id="newsletter" class="form-input" type="email" placeholder="Your best email">-->
|
||||
<!-- <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"-->
|
||||
<!-- fill-rule="nonzero"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
<!-- <section class="cta section center-content-mobile reveal-from-bottom">-->
|
||||
<!-- <div class="container">-->
|
||||
<!-- <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-action">-->
|
||||
<!-- <div class="has-icon-right"><label for="newsletter"-->
|
||||
<!-- class="form-label screen-reader">Subscribe</label> <input-->
|
||||
<!-- id="newsletter" class="form-input" type="email" placeholder="Your best email">-->
|
||||
<!-- <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"-->
|
||||
<!-- fill-rule="nonzero"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<footer class="site-footer center-content-mobile">
|
||||
</main>
|
||||
<footer class="site-footer center-content-mobile">
|
||||
<div class="container">
|
||||
<div class="site-footer-inner">
|
||||
<div class="footer-top space-between text-xxs">
|
||||
<div class="brand">
|
||||
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32"></a>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<div><a href="https://github.com/ianramzy/decentralized-video-chat">
|
||||
<svg 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>
|
||||
</ul>
|
||||
</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 class="site-footer-inner">
|
||||
<div class="footer-top space-between text-xxs">
|
||||
<div class="brand">
|
||||
<a href="/"
|
||||
><img src="images/logo.svg" alt="Neon" width="32" height="32"
|
||||
/></a>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<div>
|
||||
<a
|
||||
href="https://github.com/ianramzy/decentralized-video-chat"
|
||||
>
|
||||
<svg
|
||||
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
|
||||
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>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/landing.js"></script>
|
||||
</body>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/landing.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,124 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>Neon Chat</title>
|
||||
<link rel="stylesheet" href="css/landing.css">
|
||||
<link rel="shortcut icon" href="images/logo.svg">
|
||||
<meta property="og:title" content="Neonchat - Decentralized video calls">
|
||||
<meta property="og:description" content="Decentralized video
|
||||
<link rel="stylesheet" href="css/landing.css" />
|
||||
<link rel="shortcut icon" href="images/logo.svg" />
|
||||
<meta property="og:title" content="Neonchat - Decentralized video calls" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Decentralized video
|
||||
calling provides real-time HD quality and latency simply
|
||||
not available with traditional technology.">
|
||||
<meta property="og:image" content="https://neonchat.io/images/preview.png">
|
||||
<meta property="og:url" content="https://neonchat.io/">
|
||||
not available with traditional technology."
|
||||
/>
|
||||
<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 -->
|
||||
<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>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-162048272-1');
|
||||
gtag("js", new Date());
|
||||
gtag("config", "UA-162048272-1");
|
||||
</script>
|
||||
</head>
|
||||
<body class="has-animations">
|
||||
<div class="body-wrap">
|
||||
<header class="site-header reveal-from-top">
|
||||
</head>
|
||||
<body class="has-animations">
|
||||
<div class="body-wrap">
|
||||
<header class="site-header reveal-from-top">
|
||||
<div class="container">
|
||||
<div class="site-header-inner">
|
||||
<div class="brand"><h1 class="m-0"><a href="/"><img src="images/logo.svg" alt="Neon"
|
||||
width="32"
|
||||
height="32"></a></h1></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 class="site-header-inner">
|
||||
<div class="brand">
|
||||
<h1 class="m-0">
|
||||
<a href="/"
|
||||
><img src="images/logo.svg" alt="Neon" width="32" height="32"
|
||||
/></a>
|
||||
</h1>
|
||||
</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>
|
||||
</header>
|
||||
<main class="site-content">
|
||||
|
||||
</header>
|
||||
<main class="site-content">
|
||||
<section class="hero section illustration-section-01">
|
||||
<div class="container">
|
||||
<div class="hero-inner section-inner">
|
||||
<div class="split-wrap invert-mobile">
|
||||
<div class="split-item">
|
||||
<div class="hero-content split-item-content center-content-mobile">
|
||||
<h1 class="mt-0 mb-16 reveal-from-bottom" data-reveal-delay="150">
|
||||
Get room. <br> Share URL. <br> Start chatting.</h1>
|
||||
<p class="mt-0 mb-32 reveal-from-bottom" data-reveal-delay="300">
|
||||
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 class="container">
|
||||
<div class="hero-inner section-inner">
|
||||
<div class="split-wrap invert-mobile">
|
||||
<div class="split-item">
|
||||
<div
|
||||
class="hero-content split-item-content center-content-mobile"
|
||||
>
|
||||
<h1
|
||||
class="mt-0 mb-16 reveal-from-bottom"
|
||||
data-reveal-delay="150"
|
||||
>
|
||||
Get room. <br />
|
||||
Share URL. <br />
|
||||
Start chatting.
|
||||
</h1>
|
||||
<p
|
||||
class="mt-0 mb-32 reveal-from-bottom"
|
||||
data-reveal-delay="300"
|
||||
>
|
||||
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>
|
||||
</section>
|
||||
|
||||
<section class="cta section center-content-mobile reveal-from-bottom">
|
||||
<div class="container">
|
||||
<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-action">
|
||||
<div class="mb-24" style="margin-top: 30px">
|
||||
<label class="form-label screen-reader" for="input-01">This is a label</label>
|
||||
<div class="form-group-desktop">
|
||||
<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 class="container">
|
||||
<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-action">
|
||||
<div class="mb-24" style="margin-top: 30px;">
|
||||
<label class="form-label screen-reader" for="input-01"
|
||||
>This is a label</label
|
||||
>
|
||||
<div class="form-group-desktop">
|
||||
<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>
|
||||
</section>
|
||||
|
||||
|
||||
</main>
|
||||
<footer class="site-footer center-content-mobile">
|
||||
</main>
|
||||
<footer class="site-footer center-content-mobile">
|
||||
<div class="container">
|
||||
<div class="site-footer-inner">
|
||||
<div class="footer-top space-between text-xxs">
|
||||
<div class="brand">
|
||||
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32"></a>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<div><a href="https://github.com/ianramzy/decentralized-video-chat">
|
||||
<svg 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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="site-footer-inner">
|
||||
<div class="footer-top space-between text-xxs">
|
||||
<div class="brand">
|
||||
<a href="/"
|
||||
><img src="images/logo.svg" alt="Neon" width="32" height="32"
|
||||
/></a>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<div>
|
||||
<a
|
||||
href="https://github.com/ianramzy/decentralized-video-chat"
|
||||
>
|
||||
<svg
|
||||
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 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>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer-copyright">© 2020 Neon Chat, all rights reserved</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>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer-copyright">
|
||||
© 2020 Neon Chat, all rights reserved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/landing.js"></script>
|
||||
<script src="js/newroom.js"></script>
|
||||
</body>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/landing.js"></script>
|
||||
<script src="js/newroom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
169
server.js
169
server.js
@ -1,114 +1,111 @@
|
||||
require('dotenv').config();
|
||||
var sslRedirect = require('heroku-ssl-redirect');
|
||||
var twilio = require('twilio')(process.env.TWILIO_ACCOUNT_SID, process.env.TWILIO_AUTH_TOKEN);
|
||||
var express = require('express');
|
||||
require("dotenv").config();
|
||||
var sslRedirect = require("heroku-ssl-redirect");
|
||||
var twilio = require("twilio")(
|
||||
process.env.TWILIO_ACCOUNT_SID,
|
||||
process.env.TWILIO_AUTH_TOKEN
|
||||
);
|
||||
var express = require("express");
|
||||
var app = express();
|
||||
var http = require('http').createServer(app);
|
||||
var io = require('socket.io')(http);
|
||||
var path = require('path');
|
||||
var public = path.join(__dirname, 'public');
|
||||
var http = require("http").createServer(app);
|
||||
var io = require("socket.io")(http);
|
||||
var path = require("path");
|
||||
var public = path.join(__dirname, "public");
|
||||
|
||||
// enable ssl redirect
|
||||
app.use(sslRedirect());
|
||||
|
||||
|
||||
app.get('/', function (req, res) {
|
||||
res.sendFile(path.join(public, 'landing.html'));
|
||||
app.get("/", function (req, res) {
|
||||
res.sendFile(path.join(public, "landing.html"));
|
||||
});
|
||||
|
||||
app.get('/newroom', function (req, res) {
|
||||
res.sendFile(path.join(public, 'newroom.html'));
|
||||
app.get("/newroom", function (req, res) {
|
||||
res.sendFile(path.join(public, "newroom.html"));
|
||||
});
|
||||
|
||||
app.get('/room/*', function (req, res) {
|
||||
res.sendFile(path.join(public, 'chat.html'));
|
||||
app.get("/room/*", function (req, res) {
|
||||
res.sendFile(path.join(public, "chat.html"));
|
||||
});
|
||||
|
||||
app.use(express.static('public'));
|
||||
|
||||
app.use(express.static("public"));
|
||||
|
||||
function logIt(msg, room) {
|
||||
console.log(room + ": " + msg)
|
||||
console.log(room + ": " + msg);
|
||||
}
|
||||
|
||||
// When a socket connects, set up the specific listeners we will use.
|
||||
io.on('connection', function (socket) {
|
||||
// When a client tries to join a room, only allow them if they are first or
|
||||
// second in the room. Otherwise it is full.
|
||||
socket.on('join', function (room) {
|
||||
logIt('A client joined the room', room);
|
||||
var clients = io.sockets.adapter.rooms[room];
|
||||
var numClients = typeof clients !== 'undefined' ? clients.length : 0;
|
||||
if (numClients === 0) {
|
||||
socket.join(room);
|
||||
} else if (numClients === 1) {
|
||||
socket.join(room);
|
||||
// When the client is second to join the room, both clients are ready.
|
||||
logIt('Broadcasting ready message', room);
|
||||
socket.broadcast.to(room).emit('willInitiateCall', room);
|
||||
socket.emit('ready', room).to(room);
|
||||
socket.broadcast.to(room).emit('ready', room);
|
||||
} else {
|
||||
logIt("room already full", room);
|
||||
socket.emit('full', room);
|
||||
}
|
||||
io.on("connection", function (socket) {
|
||||
// When a client tries to join a room, only allow them if they are first or
|
||||
// second in the room. Otherwise it is full.
|
||||
socket.on("join", function (room) {
|
||||
logIt("A client joined the room", room);
|
||||
var clients = io.sockets.adapter.rooms[room];
|
||||
var numClients = typeof clients !== "undefined" ? clients.length : 0;
|
||||
if (numClients === 0) {
|
||||
socket.join(room);
|
||||
} else if (numClients === 1) {
|
||||
socket.join(room);
|
||||
// When the client is second to join the room, both clients are ready.
|
||||
logIt("Broadcasting ready message", room);
|
||||
socket.broadcast.to(room).emit("willInitiateCall", room);
|
||||
socket.emit("ready", room).to(room);
|
||||
socket.broadcast.to(room).emit("ready", room);
|
||||
} else {
|
||||
logIt("room already 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
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
});
|
||||
// Relay candidate messages
|
||||
socket.on("candidate", function (candidate, room) {
|
||||
logIt("Received candidate. Broadcasting...", room);
|
||||
socket.broadcast.to(room).emit("candidate", candidate);
|
||||
});
|
||||
|
||||
// Relay candidate messages
|
||||
socket.on('candidate', function (candidate, room) {
|
||||
logIt('Received candidate. Broadcasting...', room);
|
||||
socket.broadcast.to(room).emit('candidate', candidate);
|
||||
});
|
||||
// Relay offers
|
||||
socket.on("offer", function (offer, room) {
|
||||
logIt("Received offer. Broadcasting...", room);
|
||||
socket.broadcast.to(room).emit("offer", offer);
|
||||
});
|
||||
|
||||
// Relay offers
|
||||
socket.on('offer', function (offer, room) {
|
||||
logIt('Received offer. Broadcasting...', room);
|
||||
socket.broadcast.to(room).emit('offer', offer);
|
||||
});
|
||||
// Relay answers
|
||||
socket.on("answer", function (answer, room) {
|
||||
logIt("Received answer. Broadcasting...", room);
|
||||
socket.broadcast.to(room).emit("answer", answer);
|
||||
});
|
||||
|
||||
// Relay answers
|
||||
socket.on('answer', function (answer, room) {
|
||||
logIt('Received answer. Broadcasting...', room);
|
||||
socket.broadcast.to(room).emit('answer', answer);
|
||||
});
|
||||
|
||||
// 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("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);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
var port = process.env.PORT || 3000;
|
||||
http.listen(port, function () {
|
||||
console.log("http://localhost:" + port);
|
||||
console.log("http://localhost:" + port);
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user