MigrateRepos
/
decentralized-video-chat
mirror of https://github.com/ianramzy/decentralized-video-chat.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Run prettier

This commit is contained in:
ian ramzy 2020-03-30 14:16:08 -04:00
parent d131909b8e
commit f9b94795e7
18 changed files with 4468 additions and 3669 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
public/chat.html
View File

@ -1,128 +1,139 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8" />
<title>Neon Chat</title> <title>Neon Chat</title>
<link rel="shortcut icon" href="/images/logo.svg"> <link rel="shortcut icon" href="/images/logo.svg" />
<link rel="stylesheet" href="../css/chat.css"> <link rel="stylesheet" href="../css/chat.css" />
<link rel="stylesheet" href="../css/snackbar.css"> <link rel="stylesheet" href="../css/snackbar.css" />
<script src="https://kit.fontawesome.com/9d7bb7e31a.js" crossorigin="anonymous"></script> <script
src="https://kit.fontawesome.com/9d7bb7e31a.js"
crossorigin="anonymous"
></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<meta property="og:title" content="Join your friends call - Neonchat"> <meta property="og:title" content="Join your friends call - Neonchat" />
<meta property="og:description" content="Click the link to join this chat room using Neonchat"> <meta
<meta property="og:image" content="https://neonchat.io/images/preview.png"> property="og:description"
<meta property="og:url" content="https://neonchat.io/"> content="Click the link to join this chat room using Neonchat"
/>
<meta
property="og:image"
content="https://neonchat.io/images/preview.png"
/>
<meta property="og:url" content="https://neonchat.io/" />
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"></script> <script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"
></script>
<script> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag() { function gtag() {
dataLayer.push(arguments); dataLayer.push(arguments);
} }
gtag('js', new Date()); gtag("js", new Date());
gtag('config', 'UA-162048272-1'); gtag("config", "UA-162048272-1");
</script> </script>
</head> </head>
<body> <body>
<div id="header">
<a href="/">
<div id="header"> <img src="/images/logo.svg" alt="Neon" width="48" height="48" />
<a href="/">
<img src="/images/logo.svg" alt="Neon" width="48" height="48">
<p>Neon Chat</p> <p>Neon Chat</p>
</a> </a>
</div>
<p id="remote-video-text"></p>
<video id="remote-video" autoplay ondblclick={openFullscreen()}></video>
<div id="moveable">
<p id="local-video-text">No webcam input</p>
<video id="local-video" autoplay muted></video>
</div>
<div id="entire-chat">
<form class="compose">
<textarea type="text" placeholder="Type a message"></textarea>
</form>
<div id="chat-zone">
<div class="chat-messages">
<!-- <div class="message-item customer">-->
<!-- <div class="message-bloc">-->
<!-- <div class="message">Have you tried this chat?</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="message-item moderator">-->
<!-- <div class="message-bloc">-->
<!-- <div class="message">Not yet! It looks awesome</div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div> </div>
</div>
<p id="remote-video-text"></p>
<video id="remote-video" autoplay ondblclick="{openFullscreen()}"></video>
<div id="moveable">
<p id="local-video-text">No webcam input</p>
<video id="local-video" autoplay muted></video>
</div>
<div class="multi-button"> <div id="entire-chat">
<div class="buttonContainer"> <form class="compose">
<textarea type="text" placeholder="Type a message"></textarea>
</form>
<div id="chat-zone">
<div class="chat-messages">
<!-- <div class="message-item customer">-->
<!-- <div class="message-bloc">-->
<!-- <div class="message">Have you tried this chat?</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="message-item moderator">-->
<!-- <div class="message-bloc">-->
<!-- <div class="message">Not yet! It looks awesome</div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</div>
<div class="multi-button">
<div class="buttonContainer">
<button class="hoverButton" onclick="{muteMicrophone()}"> <button class="hoverButton" onclick="{muteMicrophone()}">
<i id="mic-icon" class="fas fa-microphone fa-xs"></i> <i id="mic-icon" class="fas fa-microphone fa-xs"></i>
</button> </button>
<div class="HoverState" id="mic-text">Mute</div> <div class="HoverState" id="mic-text">Mute</div>
</div> </div>
<div class="buttonContainer"> <div class="buttonContainer">
<button class="hoverButton" onclick="{openFullscreen()}"> <button class="hoverButton" onclick="{openFullscreen()}">
<i class="fas fa-compress fa-xs"></i> <i class="fas fa-compress fa-xs"></i>
</button> </button>
<div class="HoverState">Fullscreen</div> <div class="HoverState">Fullscreen</div>
</div> </div>
<div class="buttonContainer"> <div class="buttonContainer">
<button class="hoverButton" onclick="{pauseVideo()}"> <button class="hoverButton" onclick="{pauseVideo()}">
<i class="fas fa-video fa-xs" id="video-icon"></i> <i class="fas fa-video fa-xs" id="video-icon"></i>
</button> </button>
<div class="HoverState" id="video-text">Pause Video</div> <div class="HoverState" id="video-text">Pause Video</div>
</div> </div>
<div class="buttonContainer"> <div class="buttonContainer">
<button class="hoverButton" id="share-button" onclick="{swap()}"> <button class="hoverButton" id="share-button" onclick="{swap()}">
<i id="swap-icon" class="fas fa-desktop fa-xs"></i> <i id="swap-icon" class="fas fa-desktop fa-xs"></i>
</button> </button>
<div class="HoverState" id="swap-text">Share Screen</div> <div class="HoverState" id="swap-text">Share Screen</div>
</div> </div>
<div class="buttonContainer"> <div class="buttonContainer">
<button class="hoverButton" onclick="{window.location.href = '/newroom'}"> <button
<i class="fas fa-phone-slash fa-xs"></i> class="hoverButton"
onclick="{window.location.href = '/newroom'}"
>
<i class="fas fa-phone-slash fa-xs"></i>
</button> </button>
<div class="HoverState">End Call</div> <div class="HoverState">End Call</div>
</div> </div>
<div class="buttonContainer"> <div class="buttonContainer">
<button class="hoverButton" onclick="{requestToggleCaptions()}"> <button class="hoverButton" onclick="{requestToggleCaptions()}">
<i class="fas fa-closed-captioning fa-xs"></i> <i class="fas fa-closed-captioning fa-xs"></i>
</button> </button>
<div class="HoverState" id="caption-text">Start Live Caption</div> <div class="HoverState" id="caption-text">Start Live Caption</div>
</div> </div>
<div class="buttonContainer"> <div class="buttonContainer">
<button class="hoverButton" onclick="{toggleChat()}"> <button class="hoverButton" onclick="{toggleChat()}">
<i id="chat-icon" class="fas fa-comment fa-xs"></i> <i id="chat-icon" class="fas fa-comment fa-xs"></i>
</button> </button>
<div class="HoverState" id="chat-text">Show Chat</div> <div class="HoverState" id="chat-text">Show Chat</div>
</div> </div>
<div class="buttonContainer"> <div class="buttonContainer">
<button class="hoverButton" id="pip-button" onclick="{togglePictureInPicture()}"> <button
<i class="fas fa-external-link-alt fa-xs"></i> class="hoverButton"
id="pip-button"
onclick="{togglePictureInPicture()}"
>
<i class="fas fa-external-link-alt fa-xs"></i>
</button> </button>
<div class="HoverState" id="pip-text">Enter Picture in Picture</div> <div class="HoverState" id="pip-text">Enter Picture in Picture</div>
</div>
</div> </div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="/socket.io/socket.io.js"></script> <script src="../js/snackbar.js"></script>
<script src="../js/snackbar.js"></script> <script src="../js/chat.js"></script>
<script src="../js/chat.js"></script> </body>
</body> </html>
</html>

460
public/css/chat.css
View File

@ -1,289 +1,276 @@
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:600|Heebo:400,500,700&display=swap"); @import url("https://fonts.googleapis.com/css?family=Fira+Sans:600|Heebo:400,500,700&display=swap");
/*Fade in page on load*/ /*Fade in page on load*/
@-webkit-keyframes fadeIn { @-webkit-keyframes fadeIn {
from { from {
opacity: 0; opacity: 0;
} }
to { to {
opacity: 1; opacity: 1;
} }
} }
@-moz-keyframes fadeIn { @-moz-keyframes fadeIn {
from { from {
opacity: 0; opacity: 0;
} }
to { to {
opacity: 1; opacity: 1;
} }
} }
@keyframes fadeIn { @keyframes fadeIn {
from { from {
opacity: 0; opacity: 0;
} }
to { to {
opacity: 1; opacity: 1;
} }
} }
/*Fade in page on load*/ /*Fade in page on load*/
body { body {
background: #16171B; background: #16171b;
margin: 0; margin: 0;
padding: 0; padding: 0;
opacity: 0; /* make things invisible upon start */ opacity: 0; /* make things invisible upon start */
-webkit-animation: fadeIn ease-in 1; -webkit-animation: fadeIn ease-in 1;
-moz-animation: fadeIn ease-in 1; -moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1; animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
-webkit-animation-duration: 0.3s; -webkit-animation-duration: 0.3s;
-moz-animation-duration: 0.3s; -moz-animation-duration: 0.3s;
animation-duration: 0.3s; animation-duration: 0.3s;
} }
video { video {
background: #16171a; background: #16171a;
} }
#header { #header {
position: absolute; position: absolute;
color: white; color: white;
font-family: "Fira Sans", sans-serif; font-family: "Fira Sans", sans-serif;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
top: 40px; top: 40px;
left: 80px; left: 80px;
margin-left: 30px; margin-left: 30px;
margin-top: 30px; margin-top: 30px;
-ms-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
float: left; float: left;
} }
#header p, img { #header p,
float: left; img {
padding: 7px; float: left;
padding: 7px;
} }
#header, a { #header,
color: white; a {
text-decoration: none; color: white;
text-decoration: none;
} }
#moveable { #moveable {
z-index: 100; z-index: 100;
position: absolute; position: absolute;
width: 15%; width: 15%;
cursor: move; cursor: move;
} }
#moveable p { #moveable p {
z-index: 101; z-index: 101;
position: absolute; position: absolute;
color: white; color: white;
font-family: "Heebo", sans-serif; font-family: "Heebo", sans-serif;
white-space: nowrap; white-space: nowrap;
top: 50%; top: 50%;
left: 50%; left: 50%;
-ms-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-weight: bold; font-weight: bold;
background: rgba(0, 0, 0, 0.12); background: rgba(0, 0, 0, 0.12);
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
} }
#local-video { #local-video {
width: 100%; width: 100%;
height: auto; height: auto;
border-radius: 20px; border-radius: 20px;
-webkit-transform: scaleX(-1); -webkit-transform: scaleX(-1);
transform: scaleX(-1); transform: scaleX(-1);
background: #16171a; background: #16171a;
} }
#remote-video-text { #remote-video-text {
/*padding: 0;*/ /*padding: 0;*/
margin: 0; margin: 0;
width: 60vw; width: 60vw;
position: absolute; position: absolute;
top: calc(80%); top: calc(80%);
left: 20vw; left: 20vw;
/*-ms-transform: translate(-50%, -90%);*/ /*-ms-transform: translate(-50%, -90%);*/
/*transform: translate(-50%, -90%);*/ /*transform: translate(-50%, -90%);*/
z-index: 1; z-index: 1;
color: white; color: white;
font-family: "Heebo", sans-serif; font-family: "Heebo", sans-serif;
font-size: 40px; font-size: 40px;
/*white-space: nowrap;*/ /*white-space: nowrap;*/
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
background: rgba(0, 0, 0, 0.20); background: rgba(0, 0, 0, 0.2);
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
} }
#remote-video { #remote-video {
padding: 0; padding: 0;
margin: 0; margin: 0;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
-ms-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 70%; width: 70%;
height: auto; height: auto;
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
border-radius: 10px;
background-image: url(../images/loader.gif);
background-size: 400px auto;
background-repeat: no-repeat;
background-position: center center;
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
border-radius: 10px;
background-image: url(../images/loader.gif);
background-size: 400px auto;
background-repeat: no-repeat;
background-position: center center;
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
} }
/*Neomorphic buttons*/ /*Neomorphic buttons*/
button { button {
border: none; border: none;
font-size: 1.5rem; font-size: 1.5rem;
transition: all .3s ease-in-out; transition: all 0.3s ease-in-out;
color: gray; color: gray;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
padding: 10px; padding: 10px;
} }
button:focus { button:focus {
outline: none; outline: none;
} }
button:hover { button:hover {
color: white; color: white;
border-radius: 100px; border-radius: 100px;
background: #16171a; background: #16171a;
} }
.multi-button { .multi-button {
position: absolute; position: absolute;
left: calc(7.5vw - 40px); left: calc(7.5vw - 40px);
top: 50%; top: 50%;
-ms-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%);
transform: translate(0%, -50%); transform: translate(0%, -50%);
z-index: 999;
z-index: 999; border-radius: 10px;
border-radius: 10px; background: #16171a;
background: #16171a; box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328; padding: 15px;
padding: 15px; display: grid;
display: grid; grid-gap: 0.5rem;
grid-gap: 0.5rem; width: 50px;
width: 50px;
} }
.HoverState { .HoverState {
color: white; color: white;
font-family: "Heebo", sans-serif; font-family: "Heebo", sans-serif;
position: absolute; position: absolute;
left: 70px; left: 70px;
white-space: nowrap; white-space: nowrap;
top: 0px; top: 0px;
font-weight: bold; font-weight: bold;
background: #16171a; background: #16171a;
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
} }
.buttonContainer { .buttonContainer {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
} }
/*Neomorphic buttons*/ /*Neomorphic buttons*/
/*simple chat*/ /*simple chat*/
#entire-chat { #entire-chat {
position: absolute; position: absolute;
height: 100%; height: 100%;
right: 0; right: 0;
width: 13vw; width: 13vw;
padding: 0; padding: 0;
} }
.compose { .compose {
width: 100%; width: 100%;
height: 10%; height: 10%;
overflow: scroll; overflow: scroll;
font-family: "Heebo", sans-serif; font-family: "Heebo", sans-serif;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
/*margin: 0;*/ /*margin: 0;*/
/*z-index: 1;*/ /*z-index: 1;*/
border-radius: 20px; border-radius: 20px;
/*box-shadow: 6px 6px 12px #b11882, -6px -6px 12px #292a30;*/ /*box-shadow: 6px 6px 12px #b11882, -6px -6px 12px #292a30;*/
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #292a30; box-shadow: 6px 6px 12px #030506, -6px -6px 12px #292a30;
margin: 20px; margin: 20px;
box-sizing: border-box; box-sizing: border-box;
padding: 16px; padding: 16px;
} }
.compose textarea::placeholder { .compose textarea::placeholder {
color: white; color: white;
} }
.compose textarea { .compose textarea {
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
border: none; border: none;
width: 100%; width: 100%;
height: 80%; height: 80%;
resize: none;
outline: none;
color: white;
/*background: #3a4150;*/
background-color: rgb(22, 23, 26);
/*box-shadow: 6px 6px 12px #111314, -6px -6px 12px #292a30;*/
resize: none;
outline: none;
color: white;
/*background: #3a4150;*/
background-color: rgb(22, 23, 26);
/*box-shadow: 6px 6px 12px #111314, -6px -6px 12px #292a30;*/
} }
#chat-zone { #chat-zone {
padding-top: 20px; padding-top: 20px;
box-sizing: border-box; box-sizing: border-box;
/*border: red 1px solid;*/ /*border: red 1px solid;*/
position: absolute; position: absolute;
height: calc(90% - 20px); height: calc(90% - 20px);
right: 0; right: 0;
width: 15vw; width: 15vw;
overflow: scroll; overflow: scroll;
/*overflow: -moz-scrollbars-none;*/ /*overflow: -moz-scrollbars-none;*/
/*-ms-overflow-style: none;*/ /*-ms-overflow-style: none;*/
/*-webkit-overflow-scrolling: touch;*/ /*-webkit-overflow-scrolling: touch;*/
font-family: "Heebo", sans-serif; font-family: "Heebo", sans-serif;
} }
/*#chat-zone::-webkit-scrollbar {*/ /*#chat-zone::-webkit-scrollbar {*/
@ -292,61 +279,56 @@ button:hover {
/*}*/ /*}*/
#chat-zone .chat-messages .message-item { #chat-zone .chat-messages .message-item {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: flex-end; justify-content: flex-end;
padding: 0 16px 4px; padding: 0 16px 4px;
margin-bottom: 20px; margin-bottom: 20px;
} }
#chat-zone .chat-messages .message-item.customer { #chat-zone .chat-messages .message-item.customer {
padding-left: 40px; padding-left: 40px;
} }
/*Your messages*/ /*Your messages*/
#chat-zone .message-item.moderator .message-bloc { #chat-zone .message-item.moderator .message-bloc {
background-color: rgb(22, 23, 26); background-color: rgb(22, 23, 26);
color: #fff; color: #fff;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 12px; padding: 12px;
max-width: 100%; max-width: 100%;
border-radius: 20px 20px 20px 5px; border-radius: 20px 20px 20px 5px;
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #23242a; box-shadow: 6px 6px 12px #030506, -6px -6px 12px #23242a;
} }
/*Recieved messages*/ /*Recieved messages*/
#chat-zone .message-item.customer .message-bloc { #chat-zone .message-item.customer .message-bloc {
background-color: rgb(42, 43, 47); background-color: rgb(42, 43, 47);
color: #fff; color: #fff;
border-radius: 20px 20px 5px 20px; border-radius: 20px 20px 5px 20px;
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #22232a; box-shadow: 6px 6px 12px #030506, -6px -6px 12px #22232a;
} }
#chat-zone .chat-messages .message-item.customer .message-bloc { #chat-zone .chat-messages .message-item.customer .message-bloc {
margin-left: auto; margin-left: auto;
} }
#chat-zone .chat-messages .message-item .message-bloc { #chat-zone .chat-messages .message-item .message-bloc {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 12px; padding: 12px;
max-width: 100%; max-width: 100%;
} }
.message { .message {
word-break: break-all; word-break: break-all;
} }
/*simple chat*/ /*simple chat*/

3555
public/css/landing.css
View File

File diff suppressed because one or more lines are too long

127
public/css/snackbar.css
View File

@ -1,95 +1,96 @@
.snackbar-container { .snackbar-container {
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328; box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
transition: all .5s ease; transition: all 0.5s ease;
transition-property: top, right, bottom, left, opacity; transition-property: top, right, bottom, left, opacity;
font-family: "Heebo", sans-serif; font-family: "Heebo", sans-serif;
font-size: 14px; font-size: 14px;
min-height: 14px; min-height: 14px;
position: fixed; position: fixed;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: #b4b4b4; color: #b4b4b4;
line-height: 22px; line-height: 22px;
padding: 18px 24px; padding: 18px 24px;
bottom: -100px; bottom: -100px;
top: -100px; top: -100px;
opacity: 0; opacity: 0;
z-index: 9999 z-index: 9999;
} }
.snackbar-container .action { .snackbar-container .action {
background: inherit; background: inherit;
display: inline-block; display: inline-block;
border: none; border: none;
font-size: inherit; font-size: inherit;
text-transform: uppercase; text-transform: uppercase;
color: #4caf50; color: #4caf50;
margin: 0 0 0 24px; margin: 0 0 0 24px;
padding: 0; padding: 0;
min-width: min-content; min-width: min-content;
cursor: pointer cursor: pointer;
} }
@media (min-width: 640px) { @media (min-width: 640px) {
.snackbar-container { .snackbar-container {
min-width: 288px; min-width: 288px;
max-width: 568px; max-width: 568px;
display: inline-flex; display: inline-flex;
border-radius: 5px; border-radius: 5px;
margin: 24px margin: 24px;
} }
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.snackbar-container { .snackbar-container {
left: 0; left: 0;
right: 0; right: 0;
width: 100% width: 100%;
} }
} }
.snackbar-pos.bottom-center { .snackbar-pos.bottom-center {
top: auto !important; top: auto !important;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
transform: translate(-50%, 0) transform: translate(-50%, 0);
} }
.snackbar-pos.bottom-left { .snackbar-pos.bottom-left {
top: auto !important; top: auto !important;
bottom: 0; bottom: 0;
left: 0 left: 0;
} }
.snackbar-pos.bottom-right { .snackbar-pos.bottom-right {
top: auto !important; top: auto !important;
bottom: 0; bottom: 0;
right: 0 right: 0;
} }
.snackbar-pos.top-left { .snackbar-pos.top-left {
bottom: auto !important; bottom: auto !important;
top: 0; top: 0;
left: 0 left: 0;
} }
.snackbar-pos.top-center { .snackbar-pos.top-center {
bottom: auto !important; bottom: auto !important;
top: 0; top: 0;
left: 50%; left: 50%;
transform: translate(-50%, 0) transform: translate(-50%, 0);
} }
.snackbar-pos.top-right { .snackbar-pos.top-right {
bottom: auto !important; bottom: auto !important;
top: 0; top: 0;
right: 0 right: 0;
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.snackbar-pos.bottom-center, .snackbar-pos.top-center { .snackbar-pos.bottom-center,
left: 0; .snackbar-pos.top-center {
transform: none left: 0;
} transform: none;
}
} }

36
public/js/accordion.js
View File

@ -1,26 +1,28 @@
; (function () { (function () {
'use strict' "use strict";
const accordionEl = document.getElementsByClassName('accordion-header') const accordionEl = document.getElementsByClassName("accordion-header");
function openAccordion (parent, panel) { function openAccordion(parent, panel) {
parent.classList.add('is-active') parent.classList.add("is-active");
panel.style.maxHeight = panel.scrollHeight + 'px' panel.style.maxHeight = panel.scrollHeight + "px";
} }
function closeAccordion (parent, panel) { function closeAccordion(parent, panel) {
parent.classList.remove('is-active') parent.classList.remove("is-active");
panel.style.maxHeight = null panel.style.maxHeight = null;
} }
if (accordionEl.length > 0) { if (accordionEl.length > 0) {
for (let i = 0; i < accordionEl.length; i++) { for (let i = 0; i < accordionEl.length; i++) {
const el = accordionEl[i] const el = accordionEl[i];
const parent = el.parentNode const parent = el.parentNode;
const panel = el.nextElementSibling const panel = el.nextElementSibling;
parent.classList.contains('is-active') && openAccordion(parent, panel) parent.classList.contains("is-active") && openAccordion(parent, panel);
el.addEventListener('click', function () { el.addEventListener("click", function () {
parent.classList.contains('is-active') ? closeAccordion(parent, panel) : openAccordion(parent, panel) parent.classList.contains("is-active")
}) ? closeAccordion(parent, panel)
: openAccordion(parent, panel);
});
} }
} }
}()) })();

206
public/js/carousel.js
View File

@ -1,5 +1,5 @@
; (function () { (function () {
'use strict' "use strict";
// Swipe detector // Swipe detector
// https://gist.github.com/chrishaensel/e17c9f3838f246d75fe3bd19d6bb92e8#file-swipe-js // https://gist.github.com/chrishaensel/e17c9f3838f246d75fe3bd19d6bb92e8#file-swipe-js
@ -8,164 +8,188 @@
touchEndX: 0, touchEndX: 0,
minSwipePixels: 30, minSwipePixels: 30,
detectionZone: undefined, detectionZone: undefined,
swipeCallback: function () { }, swipeCallback: function () {},
init: function (detectionZone, callback) { init: function (detectionZone, callback) {
swipe.swipeCallback = callback swipe.swipeCallback = callback;
detectionZone.addEventListener('touchstart', function (event) { detectionZone.addEventListener(
swipe.touchStartX = event.changedTouches[0].screenX "touchstart",
}, false) function (event) {
detectionZone.addEventListener('touchend', function (event) { swipe.touchStartX = event.changedTouches[0].screenX;
swipe.touchEndX = event.changedTouches[0].screenX },
swipe.handleSwipeGesture() false
}, false) );
detectionZone.addEventListener(
"touchend",
function (event) {
swipe.touchEndX = event.changedTouches[0].screenX;
swipe.handleSwipeGesture();
},
false
);
}, },
handleSwipeGesture: function () { handleSwipeGesture: function () {
let direction, moved let direction, moved;
if (swipe.touchEndX <= swipe.touchStartX) { if (swipe.touchEndX <= swipe.touchStartX) {
moved = swipe.touchStartX - swipe.touchEndX moved = swipe.touchStartX - swipe.touchEndX;
direction = 'left' direction = "left";
} }
if (swipe.touchEndX >= swipe.touchStartX) { if (swipe.touchEndX >= swipe.touchStartX) {
moved = swipe.touchEndX - swipe.touchStartX moved = swipe.touchEndX - swipe.touchStartX;
direction = 'right' direction = "right";
} }
if (moved > swipe.minSwipePixels && direction !== 'undefined') { if (moved > swipe.minSwipePixels && direction !== "undefined") {
swipe.swipe(direction, moved) swipe.swipe(direction, moved);
} }
}, },
swipe: function (direction, movedPixels) { swipe: function (direction, movedPixels) {
let ret = {} let ret = {};
ret.direction = direction ret.direction = direction;
ret.movedPixels = movedPixels ret.movedPixels = movedPixels;
swipe.swipeCallback(ret) swipe.swipeCallback(ret);
} },
} };
const carousels = document.getElementsByClassName('carousel-items') const carousels = document.getElementsByClassName("carousel-items");
// Rotate the carousel forward or backward // Rotate the carousel forward or backward
function rotateCarousel(el, dir) { function rotateCarousel(el, dir) {
if (dir === undefined) { if (dir === undefined) {
dir = 'next' dir = "next";
} }
let currentItem = el.getElementsByClassName('carousel-item is-active')[0] let currentItem = el.getElementsByClassName("carousel-item is-active")[0];
let nextItem = (dir === 'next') ? currentItem.nextElementSibling : currentItem.previousElementSibling let nextItem =
let index = currentItem.getAttribute('data-carousel') dir === "next"
let currentBullet = el.parentNode.getElementsByClassName('carousel-bullet')[index] ? currentItem.nextElementSibling
let nextBullet = (dir === 'next') ? currentBullet.nextElementSibling : currentBullet.previousElementSibling : currentItem.previousElementSibling;
currentItem.classList.remove('is-active') let index = currentItem.getAttribute("data-carousel");
currentBullet.classList.remove('is-active') let currentBullet = el.parentNode.getElementsByClassName("carousel-bullet")[
index
];
let nextBullet =
dir === "next"
? currentBullet.nextElementSibling
: currentBullet.previousElementSibling;
currentItem.classList.remove("is-active");
currentBullet.classList.remove("is-active");
if (nextItem) { if (nextItem) {
nextItem.classList.add('is-active') nextItem.classList.add("is-active");
nextBullet.classList.add('is-active') nextBullet.classList.add("is-active");
} else { } else {
if (dir === 'next') { if (dir === "next") {
el.firstElementChild.classList.add('is-active') el.firstElementChild.classList.add("is-active");
el.parentNode.getElementsByClassName('carousel-bullets')[0].firstElementChild.classList.add('is-active') el.parentNode
.getElementsByClassName("carousel-bullets")[0]
.firstElementChild.classList.add("is-active");
} else { } else {
el.lastElementChild.classList.add('is-active') el.lastElementChild.classList.add("is-active");
el.parentNode.getElementsByClassName('carousel-bullets')[0].lastElementChild.classList.add('is-active') el.parentNode
.getElementsByClassName("carousel-bullets")[0]
.lastElementChild.classList.add("is-active");
} }
} }
} }
// Equal heights fix // Equal heights fix
function equalHeightCarousel(carousel, items) { function equalHeightCarousel(carousel, items) {
let taller = 0 let taller = 0;
let height let height;
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
items[0].parentNode.style.minHeight = taller + 'px' items[0].parentNode.style.minHeight = taller + "px";
items[i].classList.add('is-loading') items[i].classList.add("is-loading");
height = items[i].offsetHeight height = items[i].offsetHeight;
items[i].classList.remove('is-loading') items[i].classList.remove("is-loading");
if (height > taller) { if (height > taller) {
taller = height taller = height;
} }
} }
items[0].parentNode.style.minHeight = taller + 'px' items[0].parentNode.style.minHeight = taller + "px";
} }
// Clear autorotate // Clear autorotate
function clearAutorotate(autorotate) { function clearAutorotate(autorotate) {
if (autorotate) { if (autorotate) {
clearInterval(autorotate) clearInterval(autorotate);
} }
} }
if (carousels.length > 0) { if (carousels.length > 0) {
for (let i = 0; i < carousels.length; i++) { for (let i = 0; i < carousels.length; i++) {
let carousel = carousels[i] let carousel = carousels[i];
let items = carousel.getElementsByClassName('carousel-item') let items = carousel.getElementsByClassName("carousel-item");
let activeItem = 0 let activeItem = 0;
let autorotateTiming = carousel.getAttribute('data-autorotate') let autorotateTiming = carousel.getAttribute("data-autorotate");
// Generate bullets container // Generate bullets container
const bulletsContainer = document.createElement('div') const bulletsContainer = document.createElement("div");
bulletsContainer.className = 'carousel-bullets' bulletsContainer.className = "carousel-bullets";
carousel.parentNode.insertBefore(bulletsContainer, carousel.nextSibling) carousel.parentNode.insertBefore(bulletsContainer, carousel.nextSibling);
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
// Add data attributes // Add data attributes
items[i].setAttribute('data-carousel', i) items[i].setAttribute("data-carousel", i);
// Determine a new active item, if any // Determine a new active item, if any
if (items[i].classList.contains('is-active')) activeItem = i if (items[i].classList.contains("is-active")) activeItem = i;
// Generate bullets // Generate bullets
let bullet = document.createElement('button') let bullet = document.createElement("button");
bullet.className = 'carousel-bullet' bullet.className = "carousel-bullet";
bullet.setAttribute('data-bullet', i) bullet.setAttribute("data-bullet", i);
carousel.parentNode.getElementsByClassName('carousel-bullets')[0].appendChild(bullet) carousel.parentNode
.getElementsByClassName("carousel-bullets")[0]
.appendChild(bullet);
} }
// Add is-active class to first carousel item and bullet // Add is-active class to first carousel item and bullet
items[activeItem].classList.add('is-active') items[activeItem].classList.add("is-active");
let bullets = carousel.parentNode.getElementsByClassName('carousel-bullet') let bullets = carousel.parentNode.getElementsByClassName(
bullets[activeItem].classList.add('is-active') "carousel-bullet"
);
bullets[activeItem].classList.add("is-active");
// Equal height items // Equal height items
equalHeightCarousel(carousel, items) equalHeightCarousel(carousel, items);
window.addEventListener('resize', function () { window.addEventListener("resize", function () {
equalHeightCarousel(carousel, items) equalHeightCarousel(carousel, items);
}) });
// Autorotate // Autorotate
let autorotate = false let autorotate = false;
if (autorotateTiming) { if (autorotateTiming) {
autorotate = setInterval(function () { autorotate = setInterval(function () {
rotateCarousel(carousel, 'next') rotateCarousel(carousel, "next");
}, autorotateTiming) }, autorotateTiming);
} }
// Rotate by bullet click // Rotate by bullet click
for (let i = 0; i < bullets.length; i++) { for (let i = 0; i < bullets.length; i++) {
let bullet = bullets[i] let bullet = bullets[i];
bullet.addEventListener('click', function (e) { bullet.addEventListener("click", function (e) {
e.preventDefault() e.preventDefault();
// Do nothing if item is active // Do nothing if item is active
if (bullet.classList.contains('is-active')) { if (bullet.classList.contains("is-active")) {
return return;
} }
// Remove active classes // Remove active classes
for (let i = 0; i < bullets.length; i++) { for (let i = 0; i < bullets.length; i++) {
bullets[i].classList.remove('is-active') bullets[i].classList.remove("is-active");
} }
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
items[i].classList.remove('is-active') items[i].classList.remove("is-active");
} }
// Add active classes to corresponding items and bullets // Add active classes to corresponding items and bullets
let index = this.getAttribute('data-bullet') let index = this.getAttribute("data-bullet");
items[index].classList.add('is-active') items[index].classList.add("is-active");
this.classList.add('is-active') this.classList.add("is-active");
// Clear autorotate timing // Clear autorotate timing
clearAutorotate(autorotate) clearAutorotate(autorotate);
}) });
} }
// Rotate on swipe // Rotate on swipe
swipe.init(carousel, function (e) { swipe.init(carousel, function (e) {
if (e.direction === 'left') { if (e.direction === "left") {
rotateCarousel(carousel, 'next') rotateCarousel(carousel, "next");
} else if (e.direction === 'right') { } else if (e.direction === "right") {
rotateCarousel(carousel, 'prev') rotateCarousel(carousel, "prev");
} }
// Clear autorotate timing // Clear autorotate timing
clearAutorotate(autorotate) clearAutorotate(autorotate);
}) });
} }
} }
}()) })();

1141
public/js/chat.js
View File

File diff suppressed because it is too large Load Diff

492
public/js/landing.js
View File

@ -1,196 +1,340 @@
!function () { !(function () {
"use strict"; "use strict";
const e = document.getElementsByClassName("accordion-header"); const e = document.getElementsByClassName("accordion-header");
function t(e, t) { function t(e, t) {
e.classList.add("is-active"), t.style.maxHeight = t.scrollHeight + "px" e.classList.add("is-active"), (t.style.maxHeight = t.scrollHeight + "px");
} }
function n(e, t) { function n(e, t) {
e.classList.remove("is-active"), t.style.maxHeight = null e.classList.remove("is-active"), (t.style.maxHeight = null);
} }
if (e.length > 0) for (let i = 0; i < e.length; i++) { if (e.length > 0)
const s = e[i], a = s.parentNode, l = s.nextElementSibling; for (let i = 0; i < e.length; i++) {
a.classList.contains("is-active") && t(a, l), s.addEventListener("click", function () { const s = e[i],
a.classList.contains("is-active") ? n(a, l) : t(a, l) a = s.parentNode,
}) l = s.nextElementSibling;
} a.classList.contains("is-active") && t(a, l),
}(), function () { s.addEventListener("click", function () {
"use strict"; a.classList.contains("is-active") ? n(a, l) : t(a, l);
let e = { });
touchStartX: 0, touchEndX: 0, minSwipePixels: 30, detectionZone: void 0, swipeCallback: function () {
}, init: function (t, n) {
e.swipeCallback = n, t.addEventListener("touchstart", function (t) {
e.touchStartX = t.changedTouches[0].screenX
}, !1), t.addEventListener("touchend", function (t) {
e.touchEndX = t.changedTouches[0].screenX, e.handleSwipeGesture()
}, !1)
}, handleSwipeGesture: function () {
let t, n;
e.touchEndX <= e.touchStartX && (n = e.touchStartX - e.touchEndX, t = "left"), e.touchEndX >= e.touchStartX && (n = e.touchEndX - e.touchStartX, t = "right"), n > e.minSwipePixels && "undefined" !== t && e.swipe(t, n)
}, swipe: function (t, n) {
let i = {};
i.direction = t, i.movedPixels = n, e.swipeCallback(i)
} }
}; })(),
const t = document.getElementsByClassName("carousel-items"); (function () {
"use strict";
let e = {
touchStartX: 0,
touchEndX: 0,
minSwipePixels: 30,
detectionZone: void 0,
swipeCallback: function () {},
init: function (t, n) {
(e.swipeCallback = n),
t.addEventListener(
"touchstart",
function (t) {
e.touchStartX = t.changedTouches[0].screenX;
},
!1
),
t.addEventListener(
"touchend",
function (t) {
(e.touchEndX = t.changedTouches[0].screenX),
e.handleSwipeGesture();
},
!1
);
},
handleSwipeGesture: function () {
let t, n;
e.touchEndX <= e.touchStartX &&
((n = e.touchStartX - e.touchEndX), (t = "left")),
e.touchEndX >= e.touchStartX &&
((n = e.touchEndX - e.touchStartX), (t = "right")),
n > e.minSwipePixels && "undefined" !== t && e.swipe(t, n);
},
swipe: function (t, n) {
let i = {};
(i.direction = t), (i.movedPixels = n), e.swipeCallback(i);
},
};
const t = document.getElementsByClassName("carousel-items");
function n(e, t) { function n(e, t) {
void 0 === t && (t = "next"); void 0 === t && (t = "next");
let n = e.getElementsByClassName("carousel-item is-active")[0], let n = e.getElementsByClassName("carousel-item is-active")[0],
i = "next" === t ? n.nextElementSibling : n.previousElementSibling, s = n.getAttribute("data-carousel"), i = "next" === t ? n.nextElementSibling : n.previousElementSibling,
s = n.getAttribute("data-carousel"),
a = e.parentNode.getElementsByClassName("carousel-bullet")[s], a = e.parentNode.getElementsByClassName("carousel-bullet")[s],
l = "next" === t ? a.nextElementSibling : a.previousElementSibling; l = "next" === t ? a.nextElementSibling : a.previousElementSibling;
n.classList.remove("is-active"), a.classList.remove("is-active"), i ? (i.classList.add("is-active"), l.classList.add("is-active")) : "next" === t ? (e.firstElementChild.classList.add("is-active"), e.parentNode.getElementsByClassName("carousel-bullets")[0].firstElementChild.classList.add("is-active")) : (e.lastElementChild.classList.add("is-active"), e.parentNode.getElementsByClassName("carousel-bullets")[0].lastElementChild.classList.add("is-active")) n.classList.remove("is-active"),
} a.classList.remove("is-active"),
i
function i(e, t) { ? (i.classList.add("is-active"), l.classList.add("is-active"))
let n, i = 0; : "next" === t
for (let e = 0; e < t.length; e++) t[0].parentNode.style.minHeight = i + "px", t[e].classList.add("is-loading"), n = t[e].offsetHeight, t[e].classList.remove("is-loading"), n > i && (i = n); ? (e.firstElementChild.classList.add("is-active"),
t[0].parentNode.style.minHeight = i + "px" e.parentNode
} .getElementsByClassName("carousel-bullets")[0]
.firstElementChild.classList.add("is-active"))
function s(e) { : (e.lastElementChild.classList.add("is-active"),
e && clearInterval(e) e.parentNode
} .getElementsByClassName("carousel-bullets")[0]
.lastElementChild.classList.add("is-active"));
if (t.length > 0) for (let a = 0; a < t.length; a++) {
let l = t[a], c = l.getElementsByClassName("carousel-item"), o = 0, r = l.getAttribute("data-autorotate");
const d = document.createElement("div");
d.className = "carousel-bullets", l.parentNode.insertBefore(d, l.nextSibling);
for (let e = 0; e < c.length; e++) {
c[e].setAttribute("data-carousel", e), c[e].classList.contains("is-active") && (o = e);
let t = document.createElement("button");
t.className = "carousel-bullet", t.setAttribute("data-bullet", e), l.parentNode.getElementsByClassName("carousel-bullets")[0].appendChild(t)
} }
c[o].classList.add("is-active");
let u = l.parentNode.getElementsByClassName("carousel-bullet"); function i(e, t) {
u[o].classList.add("is-active"), i(0, c), window.addEventListener("resize", function () { let n,
i(0, c) i = 0;
}); for (let e = 0; e < t.length; e++)
let m = !1; (t[0].parentNode.style.minHeight = i + "px"),
r && (m = setInterval(function () { t[e].classList.add("is-loading"),
n(l, "next") (n = t[e].offsetHeight),
}, r)); t[e].classList.remove("is-loading"),
for (let e = 0; e < u.length; e++) { n > i && (i = n);
let t = u[e]; t[0].parentNode.style.minHeight = i + "px";
t.addEventListener("click", function (e) {
if (e.preventDefault(), t.classList.contains("is-active")) return;
for (let e = 0; e < u.length; e++) u[e].classList.remove("is-active");
for (let e = 0; e < c.length; e++) c[e].classList.remove("is-active");
let n = this.getAttribute("data-bullet");
c[n].classList.add("is-active"), this.classList.add("is-active"), s(m)
})
} }
e.init(l, function (e) {
"left" === e.direction ? n(l, "next") : "right" === e.direction && n(l, "prev"), s(m)
})
}
}(), function () {
"use strict";
document.documentElement.classList.remove("no-js"), document.documentElement.classList.add("js"), window.addEventListener("load", function () {
document.body.classList.add("is-loaded")
})
}(), function () {
"use strict";
const e = document.getElementById("header-nav-toggle"), t = document.getElementById("header-nav");
e && (e.addEventListener("click", function () {
document.body.classList.toggle("off-nav-is-active"), t.classList.toggle("is-active"), t.style.maxHeight ? t.style.maxHeight = null : t.style.maxHeight = t.scrollHeight + "px", "true" === this.getAttribute("aria-expanded") ? this.setAttribute("aria-expanded", "false") : this.setAttribute("aria-expanded", "true")
}), document.addEventListener("click", function (n) {
n.target === t || n.target === e || t.contains(n.target) || (document.body.classList.remove("off-nav-is-active"), t.classList.remove("is-active"), t.style.maxHeight = null, e.setAttribute("aria-expanded", "false"))
}))
}(), function () {
"use strict";
const e = document.getElementsByClassName("modal"), t = document.getElementsByClassName("modal-trigger");
function n() { function s(e) {
document.body.classList.remove("modal-is-active"); e && clearInterval(e);
for (let t = 0; t < e.length; t++) e[t].classList.remove("is-active")
}
if (e.length > 0 && t.length > 0) for (let e = 0; e < t.length; e++) {
let n = t[e], i = document.getElementById(n.getAttribute("aria-controls"));
i && (n.hasAttribute("data-video") && (null !== i.querySelector("iframe") ? i.querySelector("iframe").setAttribute("src", n.getAttribute("data-video")) : null !== i.querySelector("video") && i.querySelector("video").setAttribute("src", n.getAttribute("data-video"))), n.addEventListener("click", function (e) {
var t;
e.preventDefault(), n.hasAttribute("aria-controls") && (t = i) && (document.body.classList.add("modal-is-active"), t.classList.add("is-active"))
}))
}
document.addEventListener("click", function (e) {
(e.target.classList.contains("modal") || e.target.classList.contains("modal-close-trigger")) && (e.preventDefault(), n())
}), document.addEventListener("keydown", function (e) {
27 === (e || window.event).keyCode && n()
})
}(), function () {
"use strict";
const e = document.getElementById("pricing-toggle");
function t() {
const t = document.getElementsByClassName("pricing-switchable");
if (e.checked) for (let e = 0; e < t.length; e++) t[e].innerHTML = t[e].getAttribute("data-pricing-yearly"); else for (let e = 0; e < t.length; e++) t[e].innerHTML = t[e].getAttribute("data-pricing-monthly")
}
e && (window.addEventListener("load", t), e.addEventListener("change", t))
}(), function () {
"use strict";
const e = document.querySelectorAll("[class*=reveal-]");
let t = window.innerHeight;
function n(e, t) {
var n = 0;
return function () {
var i = (new Date).getTime();
if (!(i - n < e)) return n = i, t.apply(void 0, arguments)
} }
}
function i() { if (t.length > 0)
for (let i = 0; i < e.length; i++) { for (let a = 0; a < t.length; a++) {
let s = e[i], a = s.getAttribute("data-reveal-delay"), let l = t[a],
l = s.getAttribute("data-reveal-offset") ? s.getAttribute("data-reveal-offset") : "200", c = l.getElementsByClassName("carousel-item"),
c = s.getAttribute("data-reveal-container") ? s.closest(s.getAttribute("data-reveal-container")) : s; o = 0,
n = l, c.getBoundingClientRect().top <= t - n && !s.classList.contains("is-revealed") && (a && 0 !== a ? setTimeout(function () { r = l.getAttribute("data-autorotate");
s.classList.add("is-revealed") const d = document.createElement("div");
}, a) : s.classList.add("is-revealed")) (d.className = "carousel-bullets"),
l.parentNode.insertBefore(d, l.nextSibling);
for (let e = 0; e < c.length; e++) {
c[e].setAttribute("data-carousel", e),
c[e].classList.contains("is-active") && (o = e);
let t = document.createElement("button");
(t.className = "carousel-bullet"),
t.setAttribute("data-bullet", e),
l.parentNode
.getElementsByClassName("carousel-bullets")[0]
.appendChild(t);
}
c[o].classList.add("is-active");
let u = l.parentNode.getElementsByClassName("carousel-bullet");
u[o].classList.add("is-active"),
i(0, c),
window.addEventListener("resize", function () {
i(0, c);
});
let m = !1;
r &&
(m = setInterval(function () {
n(l, "next");
}, r));
for (let e = 0; e < u.length; e++) {
let t = u[e];
t.addEventListener("click", function (e) {
if ((e.preventDefault(), t.classList.contains("is-active"))) return;
for (let e = 0; e < u.length; e++)
u[e].classList.remove("is-active");
for (let e = 0; e < c.length; e++)
c[e].classList.remove("is-active");
let n = this.getAttribute("data-bullet");
c[n].classList.add("is-active"),
this.classList.add("is-active"),
s(m);
});
}
e.init(l, function (e) {
"left" === e.direction
? n(l, "next")
: "right" === e.direction && n(l, "prev"),
s(m);
});
}
})(),
(function () {
"use strict";
document.documentElement.classList.remove("no-js"),
document.documentElement.classList.add("js"),
window.addEventListener("load", function () {
document.body.classList.add("is-loaded");
});
})(),
(function () {
"use strict";
const e = document.getElementById("header-nav-toggle"),
t = document.getElementById("header-nav");
e &&
(e.addEventListener("click", function () {
document.body.classList.toggle("off-nav-is-active"),
t.classList.toggle("is-active"),
t.style.maxHeight
? (t.style.maxHeight = null)
: (t.style.maxHeight = t.scrollHeight + "px"),
"true" === this.getAttribute("aria-expanded")
? this.setAttribute("aria-expanded", "false")
: this.setAttribute("aria-expanded", "true");
}),
document.addEventListener("click", function (n) {
n.target === t ||
n.target === e ||
t.contains(n.target) ||
(document.body.classList.remove("off-nav-is-active"),
t.classList.remove("is-active"),
(t.style.maxHeight = null),
e.setAttribute("aria-expanded", "false"));
}));
})(),
(function () {
"use strict";
const e = document.getElementsByClassName("modal"),
t = document.getElementsByClassName("modal-trigger");
function n() {
document.body.classList.remove("modal-is-active");
for (let t = 0; t < e.length; t++) e[t].classList.remove("is-active");
} }
var n;
!function () {
if (e.length > document.querySelectorAll("[class*=reveal-].is-revealed").length) return;
window.removeEventListener("load", i), window.removeEventListener("scroll", s), window.removeEventListener("resize", a)
}()
}
function s() { if (e.length > 0 && t.length > 0)
n(30, i()) for (let e = 0; e < t.length; e++) {
} let n = t[e],
i = document.getElementById(n.getAttribute("aria-controls"));
i &&
(n.hasAttribute("data-video") &&
(null !== i.querySelector("iframe")
? i
.querySelector("iframe")
.setAttribute("src", n.getAttribute("data-video"))
: null !== i.querySelector("video") &&
i
.querySelector("video")
.setAttribute("src", n.getAttribute("data-video"))),
n.addEventListener("click", function (e) {
var t;
e.preventDefault(),
n.hasAttribute("aria-controls") &&
(t = i) &&
(document.body.classList.add("modal-is-active"),
t.classList.add("is-active"));
}));
}
document.addEventListener("click", function (e) {
(e.target.classList.contains("modal") ||
e.target.classList.contains("modal-close-trigger")) &&
(e.preventDefault(), n());
}),
document.addEventListener("keydown", function (e) {
27 === (e || window.event).keyCode && n();
});
})(),
(function () {
"use strict";
const e = document.getElementById("pricing-toggle");
function a() { function t() {
t = window.innerHeight, n(30, i()) const t = document.getElementsByClassName("pricing-switchable");
} if (e.checked)
for (let e = 0; e < t.length; e++)
t[e].innerHTML = t[e].getAttribute("data-pricing-yearly");
else
for (let e = 0; e < t.length; e++)
t[e].innerHTML = t[e].getAttribute("data-pricing-monthly");
}
e.length > 0 && document.body.classList.contains("has-animations") && (window.addEventListener("load", i), window.addEventListener("scroll", s), window.addEventListener("resize", a)) e && (window.addEventListener("load", t), e.addEventListener("change", t));
}(), function () { })(),
"use strict"; (function () {
const e = document.getElementsByClassName("smooth-scroll"), t = (e, n, i, s, a) => { "use strict";
const l = n - e; const e = document.querySelectorAll("[class*=reveal-]");
let c = l / i; let t = window.innerHeight;
const o = function (e) {
return e < .5 ? 2 * e * e : (4 - 2 * e) * e - 1 function n(e, t) {
}(c = Math.min(c, 1)); var n = 0;
window.scroll(0, a + s * o), l < i && window.requestAnimationFrame(n => { return function () {
const l = n || (new Date).getTime(); var i = new Date().getTime();
t(e, l, i, s, a) if (!(i - n < e)) return (n = i), t.apply(void 0, arguments);
}) };
}; }
if (e.length > 0) for (let n = 0; n < e.length; n++) {
e[n].addEventListener("click", function (e) { function i() {
e.preventDefault(); for (let i = 0; i < e.length; i++) {
const n = e.target.closest(".smooth-scroll"), i = n.href.split("#")[1], s = document.getElementById(i), let s = e[i],
a = n.getAttribute("data-duration") || 1e3; a = s.getAttribute("data-reveal-delay"),
s && window.requestAnimationFrame(e => { l = s.getAttribute("data-reveal-offset")
const n = e || (new Date).getTime(), i = n, l = window.pageYOffset, c = s.getBoundingClientRect().top; ? s.getAttribute("data-reveal-offset")
t(i, n, a, c, l) : "200",
}) c = s.getAttribute("data-reveal-container")
}) ? s.closest(s.getAttribute("data-reveal-container"))
} : s;
}(); (n = l),
c.getBoundingClientRect().top <= t - n &&
!s.classList.contains("is-revealed") &&
(a && 0 !== a
? setTimeout(function () {
s.classList.add("is-revealed");
}, a)
: s.classList.add("is-revealed"));
}
var n;
!(function () {
if (
e.length >
document.querySelectorAll("[class*=reveal-].is-revealed").length
)
return;
window.removeEventListener("load", i),
window.removeEventListener("scroll", s),
window.removeEventListener("resize", a);
})();
}
function s() {
n(30, i());
}
function a() {
(t = window.innerHeight), n(30, i());
}
e.length > 0 &&
document.body.classList.contains("has-animations") &&
(window.addEventListener("load", i),
window.addEventListener("scroll", s),
window.addEventListener("resize", a));
})(),
(function () {
"use strict";
const e = document.getElementsByClassName("smooth-scroll"),
t = (e, n, i, s, a) => {
const l = n - e;
let c = l / i;
const o = (function (e) {
return e < 0.5 ? 2 * e * e : (4 - 2 * e) * e - 1;
})((c = Math.min(c, 1)));
window.scroll(0, a + s * o),
l < i &&
window.requestAnimationFrame((n) => {
const l = n || new Date().getTime();
t(e, l, i, s, a);
});
};
if (e.length > 0)
for (let n = 0; n < e.length; n++) {
e[n].addEventListener("click", function (e) {
e.preventDefault();
const n = e.target.closest(".smooth-scroll"),
i = n.href.split("#")[1],
s = document.getElementById(i),
a = n.getAttribute("data-duration") || 1e3;
s &&
window.requestAnimationFrame((e) => {
const n = e || new Date().getTime(),
i = n,
l = window.pageYOffset,
c = s.getBoundingClientRect().top;
t(i, n, a, c, l);
});
});
}
})();

44
public/js/mobile-menu.js
View File

@ -1,28 +1,34 @@
;(function () { (function () {
'use strict' "use strict";
const navToggle = document.getElementById('header-nav-toggle') const navToggle = document.getElementById("header-nav-toggle");
const mainNav = document.getElementById('header-nav') const mainNav = document.getElementById("header-nav");
if (navToggle) { if (navToggle) {
// Open menu // Open menu
navToggle.addEventListener('click', function () { navToggle.addEventListener("click", function () {
document.body.classList.toggle('off-nav-is-active') document.body.classList.toggle("off-nav-is-active");
mainNav.classList.toggle('is-active') mainNav.classList.toggle("is-active");
if (mainNav.style.maxHeight) { if (mainNav.style.maxHeight) {
mainNav.style.maxHeight = null mainNav.style.maxHeight = null;
} else { } else {
mainNav.style.maxHeight = mainNav.scrollHeight + 'px' mainNav.style.maxHeight = mainNav.scrollHeight + "px";
} }
this.getAttribute('aria-expanded') === 'true' ? this.setAttribute('aria-expanded', 'false') : this.setAttribute('aria-expanded', 'true') this.getAttribute("aria-expanded") === "true"
}) ? this.setAttribute("aria-expanded", "false")
: this.setAttribute("aria-expanded", "true");
});
// Close menu // Close menu
document.addEventListener('click', function (e) { document.addEventListener("click", function (e) {
if (e.target !== mainNav && e.target !== navToggle && !mainNav.contains(e.target)) { if (
document.body.classList.remove('off-nav-is-active') e.target !== mainNav &&
mainNav.classList.remove('is-active') e.target !== navToggle &&
mainNav.style.maxHeight = null !mainNav.contains(e.target)
navToggle.setAttribute('aria-expanded', 'false') ) {
document.body.classList.remove("off-nav-is-active");
mainNav.classList.remove("is-active");
mainNav.style.maxHeight = null;
navToggle.setAttribute("aria-expanded", "false");
} }
}) });
} }
}()) })();

73
public/js/modal.js
View File

@ -1,56 +1,65 @@
;(function () { (function () {
'use strict' "use strict";
const modals = document.getElementsByClassName('modal') const modals = document.getElementsByClassName("modal");
const modalTriggers = document.getElementsByClassName('modal-trigger') const modalTriggers = document.getElementsByClassName("modal-trigger");
function openModal (el) { function openModal(el) {
if (el) { if (el) {
document.body.classList.add('modal-is-active') document.body.classList.add("modal-is-active");
el.classList.add('is-active') el.classList.add("is-active");
} }
} }
function closeModals () { function closeModals() {
document.body.classList.remove('modal-is-active') document.body.classList.remove("modal-is-active");
for (let i = 0; i < modals.length; i++) { for (let i = 0; i < modals.length; i++) {
modals[i].classList.remove('is-active') modals[i].classList.remove("is-active");
} }
} }
if (modals.length > 0 && modalTriggers.length > 0) { if (modals.length > 0 && modalTriggers.length > 0) {
for (let i = 0; i < modalTriggers.length; i++) { for (let i = 0; i < modalTriggers.length; i++) {
let modalTrigger = modalTriggers[i] let modalTrigger = modalTriggers[i];
let modal = document.getElementById(modalTrigger.getAttribute('aria-controls')) let modal = document.getElementById(
modalTrigger.getAttribute("aria-controls")
);
if (modal) { if (modal) {
// Modal video // Modal video
if (modalTrigger.hasAttribute('data-video')) { if (modalTrigger.hasAttribute("data-video")) {
if (modal.querySelector('iframe') !== null) { if (modal.querySelector("iframe") !== null) {
modal.querySelector('iframe').setAttribute('src', modalTrigger.getAttribute('data-video')) modal
} else if (modal.querySelector('video') !== null) { .querySelector("iframe")
modal.querySelector('video').setAttribute('src', modalTrigger.getAttribute('data-video')) .setAttribute("src", modalTrigger.getAttribute("data-video"));
} else if (modal.querySelector("video") !== null) {
modal
.querySelector("video")
.setAttribute("src", modalTrigger.getAttribute("data-video"));
} }
} }
modalTrigger.addEventListener('click', function (e) { modalTrigger.addEventListener("click", function (e) {
e.preventDefault() e.preventDefault();
if (modalTrigger.hasAttribute('aria-controls')) { if (modalTrigger.hasAttribute("aria-controls")) {
openModal(modal) openModal(modal);
} }
}) });
} }
} }
} }
document.addEventListener('click', function (e) { document.addEventListener("click", function (e) {
if (e.target.classList.contains('modal') || e.target.classList.contains('modal-close-trigger')) { if (
e.preventDefault() e.target.classList.contains("modal") ||
closeModals() e.target.classList.contains("modal-close-trigger")
) {
e.preventDefault();
closeModals();
} }
}) });
document.addEventListener('keydown', function (event) { document.addEventListener("keydown", function (event) {
var e = event || window.event var e = event || window.event;
if (e.keyCode === 27) { if (e.keyCode === 27) {
closeModals() closeModals();
} }
}) });
}()) })();

128
public/js/newroom.js
View File

@ -1,16 +1,124 @@
var adjectives = ["small", "big", "large", "smelly", "new", "happy", "shiny", "old", "clean", "nice", "bad", "cool", var adjectives = [
"hot", "cold", "warm", "hungry", "slow", "fast", "red", "white", "black", "blue", "green", "basic", "strong", "small",
"cute", "poor", "nice", "huge", "rare", "lucky", "weak", "tall", "short", "tiny", "great", "long", "single", "rich", "big",
"young", "dirty", "fresh", "brown", "dark", "crazy", "sad", "loud", "brave", "calm", "silly", "smart"]; "large",
"smelly",
"new",
"happy",
"shiny",
"old",
"clean",
"nice",
"bad",
"cool",
"hot",
"cold",
"warm",
"hungry",
"slow",
"fast",
"red",
"white",
"black",
"blue",
"green",
"basic",
"strong",
"cute",
"poor",
"nice",
"huge",
"rare",
"lucky",
"weak",
"tall",
"short",
"tiny",
"great",
"long",
"single",
"rich",
"young",
"dirty",
"fresh",
"brown",
"dark",
"crazy",
"sad",
"loud",
"brave",
"calm",
"silly",
"smart",
];
var nouns = ["dog", "bat", "wrench", "apple", "pear", "ghost", "cat", "wolf", "squid", "goat", "snail", "hat", var nouns = [
"sock", "plum", "bear", "snake", "turtle", "horse", "spoon", "fork", "spider", "tree", "chair", "table", "dog",
"couch", "towel", "panda", "bread", "grape", "cake", "brick", "rat", "mouse", "bird", "oven", "phone", "photo", "bat",
"frog", "bear", "camel", "sheep", "shark", "tiger", "zebra", "duck", "eagle", "fish", "kitten", "lobster", "monkey", "wrench",
"owl", "puppy", "pig", "rabbit", "fox", "whale", "beaver", "gorilla", "lizard", "parrot", "sloth", "swan"]; "apple",
"pear",
"ghost",
"cat",
"wolf",
"squid",
"goat",
"snail",
"hat",
"sock",
"plum",
"bear",
"snake",
"turtle",
"horse",
"spoon",
"fork",
"spider",
"tree",
"chair",
"table",
"couch",
"towel",
"panda",
"bread",
"grape",
"cake",
"brick",
"rat",
"mouse",
"bird",
"oven",
"phone",
"photo",
"frog",
"bear",
"camel",
"sheep",
"shark",
"tiger",
"zebra",
"duck",
"eagle",
"fish",
"kitten",
"lobster",
"monkey",
"owl",
"puppy",
"pig",
"rabbit",
"fox",
"whale",
"beaver",
"gorilla",
"lizard",
"parrot",
"sloth",
"swan",
];
var adjective = adjectives[Math.floor(Math.random() * adjectives.length)]; var adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
var noun = nouns[Math.floor(Math.random() * nouns.length)]; var noun = nouns[Math.floor(Math.random() * nouns.length)];
noun = noun.charAt(0).toUpperCase() + noun.substring(1); noun = noun.charAt(0).toUpperCase() + noun.substring(1);
adjective = adjective.charAt(0).toUpperCase() + adjective.substring(1); adjective = adjective.charAt(0).toUpperCase() + adjective.substring(1);
document.getElementById('input-01').value = adjective + noun; document.getElementById("input-01").value = adjective + noun;

24
public/js/pricing-switcher.js
View File

@ -1,22 +1,26 @@
;(function () { (function () {
'use strict' "use strict";
const pricingToggle = document.getElementById('pricing-toggle') const pricingToggle = document.getElementById("pricing-toggle");
if (pricingToggle) { if (pricingToggle) {
window.addEventListener('load', pricingSwitch) window.addEventListener("load", pricingSwitch);
pricingToggle.addEventListener('change', pricingSwitch) pricingToggle.addEventListener("change", pricingSwitch);
} }
function pricingSwitch () { function pricingSwitch() {
const switchables = document.getElementsByClassName('pricing-switchable') const switchables = document.getElementsByClassName("pricing-switchable");
if (pricingToggle.checked) { if (pricingToggle.checked) {
for (let i = 0; i < switchables.length; i++) { for (let i = 0; i < switchables.length; i++) {
switchables[i].innerHTML = switchables[i].getAttribute('data-pricing-yearly') switchables[i].innerHTML = switchables[i].getAttribute(
"data-pricing-yearly"
);
} }
} else { } else {
for (let i = 0; i < switchables.length; i++) { for (let i = 0; i < switchables.length; i++) {
switchables[i].innerHTML = switchables[i].getAttribute('data-pricing-monthly') switchables[i].innerHTML = switchables[i].getAttribute(
"data-pricing-monthly"
);
} }
} }
} }
}()) })();

90
public/js/scroll-reveal.js
View File

@ -1,62 +1,76 @@
;(function () { (function () {
'use strict' "use strict";
const revealEl = document.querySelectorAll('[class*=reveal-]') const revealEl = document.querySelectorAll("[class*=reveal-]");
let viewportHeight = window.innerHeight let viewportHeight = window.innerHeight;
function throttle (delay, fn) { function throttle(delay, fn) {
var lastCall = 0 var lastCall = 0;
return function () { return function () {
var now = new Date().getTime() var now = new Date().getTime();
if (now - lastCall < delay) { if (now - lastCall < delay) {
return return;
} }
lastCall = now lastCall = now;
return fn.apply(void 0, arguments) return fn.apply(void 0, arguments);
} };
} }
function elementIsVisible (el, offset) { function elementIsVisible(el, offset) {
return (el.getBoundingClientRect().top <= viewportHeight - offset) return el.getBoundingClientRect().top <= viewportHeight - offset;
} }
function revealElements () { function revealElements() {
for (let i = 0; i < revealEl.length; i++) { for (let i = 0; i < revealEl.length; i++) {
let el = revealEl[i] let el = revealEl[i];
let revealDelay = el.getAttribute('data-reveal-delay') let revealDelay = el.getAttribute("data-reveal-delay");
let revealOffset = (el.getAttribute('data-reveal-offset') ? el.getAttribute('data-reveal-offset') : '200') let revealOffset = el.getAttribute("data-reveal-offset")
let listenedEl = (el.getAttribute('data-reveal-container') ? el.closest(el.getAttribute('data-reveal-container')) : el) ? el.getAttribute("data-reveal-offset")
if (elementIsVisible(listenedEl, revealOffset) && !el.classList.contains('is-revealed')) { : "200";
let listenedEl = el.getAttribute("data-reveal-container")
? el.closest(el.getAttribute("data-reveal-container"))
: el;
if (
elementIsVisible(listenedEl, revealOffset) &&
!el.classList.contains("is-revealed")
) {
if (revealDelay && revealDelay !== 0) { if (revealDelay && revealDelay !== 0) {
setTimeout(function () { setTimeout(function () {
el.classList.add('is-revealed') el.classList.add("is-revealed");
}, revealDelay) }, revealDelay);
} else { } else {
el.classList.add('is-revealed') el.classList.add("is-revealed");
} }
} }
} }
revealDone() revealDone();
} }
function revealScroll () { function revealScroll() {
throttle(30, revealElements()) throttle(30, revealElements());
} }
function revealResize () { function revealResize() {
viewportHeight = window.innerHeight viewportHeight = window.innerHeight;
throttle(30, revealElements()) throttle(30, revealElements());
} }
function revealDone () { function revealDone() {
if (revealEl.length > document.querySelectorAll('[class*=reveal-].is-revealed').length) return if (
window.removeEventListener('load', revealElements) revealEl.length >
window.removeEventListener('scroll', revealScroll) document.querySelectorAll("[class*=reveal-].is-revealed").length
window.removeEventListener('resize', revealResize) )
return;
window.removeEventListener("load", revealElements);
window.removeEventListener("scroll", revealScroll);
window.removeEventListener("resize", revealResize);
} }
if (revealEl.length > 0 && document.body.classList.contains('has-animations')) { if (
window.addEventListener('load', revealElements) revealEl.length > 0 &&
window.addEventListener('scroll', revealScroll) document.body.classList.contains("has-animations")
window.addEventListener('resize', revealResize) ) {
window.addEventListener("load", revealElements);
window.addEventListener("scroll", revealScroll);
window.addEventListener("resize", revealResize);
} }
}()) })();

80
public/js/smooth-scroll.js
View File

@ -1,51 +1,69 @@
;(function () { (function () {
'use strict' "use strict";
const smoothScrollLinks = document.getElementsByClassName('smooth-scroll') const smoothScrollLinks = document.getElementsByClassName("smooth-scroll");
const easeInOutQuad = function (t) { const easeInOutQuad = function (t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
} };
const scrollToEl = (startTime, currentTime, duration, scrollEndElemTop, startScrollOffset) => { const scrollToEl = (
const runtime = currentTime - startTime startTime,
let progress = runtime / duration currentTime,
duration,
scrollEndElemTop,
startScrollOffset
) => {
const runtime = currentTime - startTime;
let progress = runtime / duration;
progress = Math.min(progress, 1) progress = Math.min(progress, 1);
const ease = easeInOutQuad(progress) const ease = easeInOutQuad(progress);
window.scroll(0, startScrollOffset + (scrollEndElemTop * ease)) window.scroll(0, startScrollOffset + scrollEndElemTop * ease);
if (runtime < duration) { if (runtime < duration) {
window.requestAnimationFrame((timestamp) => { window.requestAnimationFrame((timestamp) => {
const currentTime = timestamp || new Date().getTime() const currentTime = timestamp || new Date().getTime();
scrollToEl(startTime, currentTime, duration, scrollEndElemTop, startScrollOffset) scrollToEl(
}) startTime,
currentTime,
duration,
scrollEndElemTop,
startScrollOffset
);
});
} }
} };
if (smoothScrollLinks.length > 0) { if (smoothScrollLinks.length > 0) {
for (let i = 0; i < smoothScrollLinks.length; i++) { for (let i = 0; i < smoothScrollLinks.length; i++) {
const smoothScrollLink = smoothScrollLinks[i] const smoothScrollLink = smoothScrollLinks[i];
smoothScrollLink.addEventListener('click', function (e) { smoothScrollLink.addEventListener("click", function (e) {
e.preventDefault() e.preventDefault();
const link = e.target.closest('.smooth-scroll') const link = e.target.closest(".smooth-scroll");
const targetId = link.href.split('#')[1] const targetId = link.href.split("#")[1];
const target = document.getElementById(targetId) const target = document.getElementById(targetId);
const duration = link.getAttribute('data-duration') || 1000 const duration = link.getAttribute("data-duration") || 1000;
if (!target) return if (!target) return;
window.requestAnimationFrame((timestamp) => { window.requestAnimationFrame((timestamp) => {
const stamp = timestamp || new Date().getTime() const stamp = timestamp || new Date().getTime();
const start = stamp const start = stamp;
const startScrollOffset = window.pageYOffset const startScrollOffset = window.pageYOffset;
const scrollEndElemTop = target.getBoundingClientRect().top const scrollEndElemTop = target.getBoundingClientRect().top;
scrollToEl(start, stamp, duration, scrollEndElemTop, startScrollOffset) scrollToEl(
}) start,
}) stamp,
duration,
scrollEndElemTop,
startScrollOffset
);
});
});
} }
} }
}()) })();

331
public/js/snackbar.js
View File

@ -7,181 +7,186 @@
* https://github.com/polonel/Snackbar/blob/master/LICENSE * https://github.com/polonel/Snackbar/blob/master/LICENSE
*/ */
(function(root, factory) { (function (root, factory) {
'use strict'; "use strict";
if (typeof define === 'function' && define.amd) { if (typeof define === "function" && define.amd) {
define([], function() { define([], function () {
return (root.Snackbar = factory()); return (root.Snackbar = factory());
}); });
} else if (typeof module === 'object' && module.exports) { } else if (typeof module === "object" && module.exports) {
module.exports = root.Snackbar = factory(); module.exports = root.Snackbar = factory();
} else { } else {
root.Snackbar = factory(); root.Snackbar = factory();
}
})(this, function () {
var Snackbar = {};
Snackbar.current = null;
var $defaults = {
text: "Default Text",
textColor: "#FFFFFF",
width: "auto",
showAction: true,
actionText: "Dismiss",
actionTextAria: "Dismiss, Description for Screen Readers",
alertScreenReader: false,
actionTextColor: "#4CAF50",
showSecondButton: false,
secondButtonText: "",
secondButtonAria: "Description for Screen Readers",
secondButtonTextColor: "#4CAF50",
backgroundColor: "#323232",
pos: "bottom-left",
duration: 5000,
customClass: "",
onActionClick: function (element) {
element.style.opacity = 0;
},
onSecondButtonClick: function (element) {},
onClose: function (element) {},
};
Snackbar.show = function ($options) {
var options = Extend(true, $defaults, $options);
if (Snackbar.current) {
Snackbar.current.style.opacity = 0;
setTimeout(
function () {
var $parent = this.parentElement;
if ($parent)
// possible null if too many/fast Snackbars
$parent.removeChild(this);
}.bind(Snackbar.current),
500
);
} }
})(this, function() {
var Snackbar = {};
Snackbar.current = null; Snackbar.snackbar = document.createElement("div");
var $defaults = { Snackbar.snackbar.className = "snackbar-container " + options.customClass;
text: 'Default Text', Snackbar.snackbar.style.width = options.width;
textColor: '#FFFFFF', var $p = document.createElement("p");
width: 'auto', $p.style.margin = 0;
showAction: true, $p.style.padding = 0;
actionText: 'Dismiss', $p.style.color = options.textColor;
actionTextAria: 'Dismiss, Description for Screen Readers', $p.style.fontSize = "14px";
alertScreenReader: false, $p.style.fontWeight = 300;
actionTextColor: '#4CAF50', $p.style.lineHeight = "1em";
showSecondButton: false, $p.innerHTML = options.text;
secondButtonText: '', Snackbar.snackbar.appendChild($p);
secondButtonAria: 'Description for Screen Readers', Snackbar.snackbar.style.background = options.backgroundColor;
secondButtonTextColor: '#4CAF50',
backgroundColor: '#323232',
pos: 'bottom-left',
duration: 5000,
customClass: '',
onActionClick: function(element) {
element.style.opacity = 0;
},
onSecondButtonClick: function(element) {},
onClose: function(element) {}
};
Snackbar.show = function($options) { if (options.showSecondButton) {
var options = Extend(true, $defaults, $options); var secondButton = document.createElement("button");
secondButton.className = "action";
secondButton.innerHTML = options.secondButtonText;
secondButton.setAttribute("aria-label", options.secondButtonAria);
secondButton.style.color = options.secondButtonTextColor;
secondButton.addEventListener("click", function () {
options.onSecondButtonClick(Snackbar.snackbar);
});
Snackbar.snackbar.appendChild(secondButton);
}
if (Snackbar.current) { if (options.showAction) {
var actionButton = document.createElement("button");
actionButton.className = "action";
actionButton.innerHTML = options.actionText;
actionButton.setAttribute("aria-label", options.actionTextAria);
actionButton.style.color = options.actionTextColor;
actionButton.addEventListener("click", function () {
options.onActionClick(Snackbar.snackbar);
});
Snackbar.snackbar.appendChild(actionButton);
}
if (options.duration) {
setTimeout(
function () {
if (Snackbar.current === this) {
Snackbar.current.style.opacity = 0; Snackbar.current.style.opacity = 0;
setTimeout( // When natural remove event occurs let's move the snackbar to its origins
function() { Snackbar.current.style.top = "-100px";
var $parent = this.parentElement; Snackbar.current.style.bottom = "-100px";
if ($parent) }
// possible null if too many/fast Snackbars }.bind(Snackbar.snackbar),
$parent.removeChild(this); options.duration
}.bind(Snackbar.current), );
500 }
);
if (options.alertScreenReader) {
Snackbar.snackbar.setAttribute("role", "alert");
}
Snackbar.snackbar.addEventListener(
"transitionend",
function (event, elapsed) {
if (event.propertyName === "opacity" && this.style.opacity === "0") {
if (typeof options.onClose === "function") options.onClose(this);
this.parentElement.removeChild(this);
if (Snackbar.current === this) {
Snackbar.current = null;
}
} }
}.bind(Snackbar.snackbar)
);
Snackbar.snackbar = document.createElement('div'); Snackbar.current = Snackbar.snackbar;
Snackbar.snackbar.className = 'snackbar-container ' + options.customClass;
Snackbar.snackbar.style.width = options.width;
var $p = document.createElement('p');
$p.style.margin = 0;
$p.style.padding = 0;
$p.style.color = options.textColor;
$p.style.fontSize = '14px';
$p.style.fontWeight = 300;
$p.style.lineHeight = '1em';
$p.innerHTML = options.text;
Snackbar.snackbar.appendChild($p);
Snackbar.snackbar.style.background = options.backgroundColor;
if (options.showSecondButton) { document.body.appendChild(Snackbar.snackbar);
var secondButton = document.createElement('button'); var $bottom = getComputedStyle(Snackbar.snackbar).bottom;
secondButton.className = 'action'; var $top = getComputedStyle(Snackbar.snackbar).top;
secondButton.innerHTML = options.secondButtonText; Snackbar.snackbar.style.opacity = 1;
secondButton.setAttribute('aria-label', options.secondButtonAria); Snackbar.snackbar.className =
secondButton.style.color = options.secondButtonTextColor; "snackbar-container " +
secondButton.addEventListener('click', function() { options.customClass +
options.onSecondButtonClick(Snackbar.snackbar); " snackbar-pos " +
}); options.pos;
Snackbar.snackbar.appendChild(secondButton); };
Snackbar.close = function () {
if (Snackbar.current) {
Snackbar.current.style.opacity = 0;
}
};
// Pure JS Extend
// http://gomakethings.com/vanilla-javascript-version-of-jquery-extend/
var Extend = function () {
var extended = {};
var deep = false;
var i = 0;
var length = arguments.length;
if (Object.prototype.toString.call(arguments[0]) === "[object Boolean]") {
deep = arguments[0];
i++;
}
var merge = function (obj) {
for (var prop in obj) {
if (Object.prototype.hasOwnProperty.call(obj, prop)) {
if (
deep &&
Object.prototype.toString.call(obj[prop]) === "[object Object]"
) {
extended[prop] = Extend(true, extended[prop], obj[prop]);
} else {
extended[prop] = obj[prop];
}
} }
}
if (options.showAction) {
var actionButton = document.createElement('button');
actionButton.className = 'action';
actionButton.innerHTML = options.actionText;
actionButton.setAttribute('aria-label', options.actionTextAria);
actionButton.style.color = options.actionTextColor;
actionButton.addEventListener('click', function() {
options.onActionClick(Snackbar.snackbar);
});
Snackbar.snackbar.appendChild(actionButton);
}
if (options.duration) {
setTimeout(
function() {
if (Snackbar.current === this) {
Snackbar.current.style.opacity = 0;
// When natural remove event occurs let's move the snackbar to its origins
Snackbar.current.style.top = '-100px';
Snackbar.current.style.bottom = '-100px';
}
}.bind(Snackbar.snackbar),
options.duration
);
}
if (options.alertScreenReader) {
Snackbar.snackbar.setAttribute('role', 'alert');
}
Snackbar.snackbar.addEventListener(
'transitionend',
function(event, elapsed) {
if (event.propertyName === 'opacity' && this.style.opacity === '0') {
if (typeof(options.onClose) === 'function')
options.onClose(this);
this.parentElement.removeChild(this);
if (Snackbar.current === this) {
Snackbar.current = null;
}
}
}.bind(Snackbar.snackbar)
);
Snackbar.current = Snackbar.snackbar;
document.body.appendChild(Snackbar.snackbar);
var $bottom = getComputedStyle(Snackbar.snackbar).bottom;
var $top = getComputedStyle(Snackbar.snackbar).top;
Snackbar.snackbar.style.opacity = 1;
Snackbar.snackbar.className =
'snackbar-container ' + options.customClass + ' snackbar-pos ' + options.pos;
}; };
Snackbar.close = function() { for (; i < length; i++) {
if (Snackbar.current) { var obj = arguments[i];
Snackbar.current.style.opacity = 0; merge(obj);
} }
};
// Pure JS Extend return extended;
// http://gomakethings.com/vanilla-javascript-version-of-jquery-extend/ };
var Extend = function() {
var extended = {};
var deep = false;
var i = 0;
var length = arguments.length;
if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') { return Snackbar;
deep = arguments[0];
i++;
}
var merge = function(obj) {
for (var prop in obj) {
if (Object.prototype.hasOwnProperty.call(obj, prop)) {
if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') {
extended[prop] = Extend(true, extended[prop], obj[prop]);
} else {
extended[prop] = obj[prop];
}
}
}
};
for (; i < length; i++) {
var obj = arguments[i];
merge(obj);
}
return extended;
};
return Snackbar;
}); });

732
public/landing.html
View File

@ -1,341 +1,469 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="no-js"> <html lang="en" class="no-js">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Neon Chat</title> <title>Neon Chat</title>
<link rel="stylesheet" href="css/landing.css"> <link rel="stylesheet" href="css/landing.css" />
<link rel="shortcut icon" href="images/logo.svg"> <link rel="shortcut icon" href="images/logo.svg" />
<meta property="og:title" content="Neonchat - Decentralized video calls"> <meta property="og:title" content="Neonchat - Decentralized video calls" />
<meta property="og:description" content="Decentralized video <meta
property="og:description"
content="Decentralized video
calling provides real-time HD quality and latency simply calling provides real-time HD quality and latency simply
not available with traditional technology."> not available with traditional technology."
<meta property="og:image" content="https://neonchat.io/images/preview.png"> />
<meta property="og:url" content="https://neonchat.io/"> <meta
property="og:image"
content="https://neonchat.io/images/preview.png"
/>
<meta property="og:url" content="https://neonchat.io/" />
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"></script> <script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"
></script>
<script> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag() { function gtag() {
dataLayer.push(arguments); dataLayer.push(arguments);
} }
gtag('js', new Date()); gtag("js", new Date());
gtag('config', 'UA-162048272-1'); gtag("config", "UA-162048272-1");
</script> </script>
</head> </head>
<body class="has-animations"> <body class="has-animations">
<div class="body-wrap"> <div class="body-wrap">
<header class="site-header reveal-from-top"> <header class="site-header reveal-from-top">
<div class="container"> <div class="container">
<div class="site-header-inner"> <div class="site-header-inner">
<div class="brand"> <div class="brand">
<h1 class="m-0"><a href="/"><img src="images/logo.svg" alt="Neon" <h1 class="m-0">
width="32" <a href="/"
height="32"></a> ><img src="images/logo.svg" alt="Neon" width="32" height="32"
</h1> /></a>
</div> </h1>
<button id="header-nav-toggle" class="header-nav-toggle" aria-controls="primary-menu"
aria-expanded="false"><span class="screen-reader">Menu</span> <span class="hamburger"><span
class="hamburger-inner"></span></span></button>
</div> </div>
<button
id="header-nav-toggle"
class="header-nav-toggle"
aria-controls="primary-menu"
aria-expanded="false"
>
<span class="screen-reader">Menu</span>
<span class="hamburger"
><span class="hamburger-inner"></span
></span>
</button>
</div>
</div> </div>
</header> </header>
<main class="site-content"> <main class="site-content">
<section class="hero section illustration-section-01"> <section class="hero section illustration-section-01">
<div class="container"> <div class="container">
<div class="hero-inner section-inner"> <div class="hero-inner section-inner">
<div class="split-wrap invert-mobile"> <div class="split-wrap invert-mobile">
<div class="split-item"> <div class="split-item">
<div class="hero-content split-item-content center-content-mobile"><h1 <div
class="mt-0 mb-16 reveal-from-bottom" data-reveal-delay="150">Neon Chat.<br>The most class="hero-content split-item-content center-content-mobile"
advanced >
video chat ever created.</h1> <h1
<p class="mt-0 mb-32 reveal-from-bottom" data-reveal-delay="300">Decentralized video class="mt-0 mb-16 reveal-from-bottom"
calling provides quality and latency simply data-reveal-delay="150"
not available with traditional technology.</p> >
<div class="reveal-from-bottom" data-reveal-delay="450"><a Neon Chat.<br />The most advanced video chat ever created.
class="button button-primary button-wide-mobile pulse" </h1>
style="border:0; background: linear-gradient(100deg, #376DF9 0, #FF5FA0 75%, #FFC55A 100%);" <p
href="/newroom">Try now</a> class="mt-0 mb-32 reveal-from-bottom"
</div> data-reveal-delay="300"
</div> >
<style>@media (min-width: 641px) { Decentralized video calling provides quality and latency
.hero .split-wrap .split-item { simply not available with traditional technology.
min-height: 492px </p>
} <div class="reveal-from-bottom" data-reveal-delay="450">
}</style> <a
</div> class="button button-primary button-wide-mobile pulse"
style="
border: 0;
background: linear-gradient(
100deg,
#376df9 0,
#ff5fa0 75%,
#ffc55a 100%
);
"
href="/newroom"
>Try now</a
>
</div> </div>
</div>
<style>
@media (min-width: 641px) {
.hero .split-wrap .split-item {
min-height: 492px;
}
}
</style>
</div> </div>
</div>
</div> </div>
</div>
</section> </section>
<div> <div>
<!-- <section class="clients section reveal-fade">--> <!-- <section class="clients section reveal-fade">-->
<!-- <div class="container">--> <!-- <div class="container">-->
<!-- <div class="clients-inner section-inner has-top-divider has-bottom-divider">--> <!-- <div class="clients-inner section-inner has-top-divider has-bottom-divider">-->
<!-- <ul class="list-reset">--> <!-- <ul class="list-reset">-->
<!-- <li class="reveal-from-top"><img src="images/clients-01.svg" alt="Clients 01"></li>--> <!-- <li class="reveal-from-top"><img src="images/clients-01.svg" alt="Clients 01"></li>-->
<!-- <li class="reveal-from-bottom" data-reveal-delay="150"><img src="images/clients-02.svg"--> <!-- <li class="reveal-from-bottom" data-reveal-delay="150"><img src="images/clients-02.svg"-->
<!-- alt="Clients 02"></li>--> <!-- alt="Clients 02"></li>-->
<!-- <li class="reveal-from-top" data-reveal-delay="300"><img src="images/clients-03.svg"--> <!-- <li class="reveal-from-top" data-reveal-delay="300"><img src="images/clients-03.svg"-->
<!-- alt="Clients 03"></li>--> <!-- alt="Clients 03"></li>-->
<!-- <li class="reveal-from-bottom" data-reveal-delay="450"><img src="images/clients-04.svg"--> <!-- <li class="reveal-from-bottom" data-reveal-delay="450"><img src="images/clients-04.svg"-->
<!-- alt="Clients 04"></li>--> <!-- alt="Clients 04"></li>-->
<!-- <li class="reveal-from-top" data-reveal-delay="600"><img src="images/clients-05.svg"--> <!-- <li class="reveal-from-top" data-reveal-delay="600"><img src="images/clients-05.svg"-->
<!-- alt="Clients 05"></li>--> <!-- alt="Clients 05"></li>-->
<!-- </ul>--> <!-- </ul>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </section>--> <!-- </section>-->
<!-- Video--> <!-- Video-->
<!-- <section class="section center-content">--> <!-- <section class="section center-content">-->
<!-- <div class="container">--> <!-- <div class="container">-->
<!-- <div class="section-inner">--> <!-- <div class="section-inner">-->
<!-- <div class="section-header reveal-from-bottom">--> <!-- <div class="section-header reveal-from-bottom">-->
<!-- <div class="container-xs"><h2 class="mt-0 mb-16">Built exclusively for you</h2>--> <!-- <div class="container-xs"><h2 class="mt-0 mb-16">Built exclusively for you</h2>-->
<!-- <p class="m-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore--> <!-- <p class="m-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore-->
<!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa--> <!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa-->
<!-- qui.</p></div>--> <!-- qui.</p></div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="reveal-from-bottom"><a class="modal-trigger" aria-controls="modal-01"--> <!-- <div class="reveal-from-bottom"><a class="modal-trigger" aria-controls="modal-01"-->
<!-- data-video="https://player.vimeo.com/video/174002812"--> <!-- data-video="https://player.vimeo.com/video/174002812"-->
<!-- href="#"><img src="images/video-placeholder.svg" alt="Video"--> <!-- href="#"><img src="images/video-placeholder.svg" alt="Video"-->
<!-- width="712" height="400"></a></div>--> <!-- width="712" height="400"></a></div>-->
<!-- <div id="modal-01" class="modal modal-video">--> <!-- <div id="modal-01" class="modal modal-video">-->
<!-- <div class="modal-inner">--> <!-- <div class="modal-inner">-->
<!-- <div class="responsive-video">--> <!-- <div class="responsive-video">-->
<!-- <iframe src="#" frameborder="0" webkitallowfullscreen mozallowfullscreen--> <!-- <iframe src="#" frameborder="0" webkitallowfullscreen mozallowfullscreen-->
<!-- allowfullscreen></iframe>--> <!-- allowfullscreen></iframe>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </section>--> <!-- </section>-->
<!-- End Video--> <!-- End Video-->
</div> </div>
<section class="features-tiles section center-content"> <section class="features-tiles section center-content">
<div class="container"> <div class="container">
<div class="features-tiles-inner section-inner has-top-divider"> <div class="features-tiles-inner section-inner has-top-divider">
<div class="section-header"> <div class="section-header">
<div class="container-xs reveal-from-bottom" data-reveal-delay="650"><h2 class="mt-0 mb-16">See <div
the whole picture</h2> class="container-xs reveal-from-bottom"
<p class="m-0">Neon Chat is built radically different. We ditched slow bulky servers, data-reveal-delay="650"
opting for decentralized peer to peer calling. Maximum video quality and >
lowest latency. Its good, trust us.</p></div> <h2 class="mt-0 mb-16">See the whole picture</h2>
</div> <p class="m-0">
<div class="tiles-wrap"> Neon Chat is built radically different. We ditched slow
<div class="tiles-item reveal-from-right"> bulky servers, opting for decentralized peer to peer
<div class="tiles-item-inner"> calling. Maximum video quality and lowest latency. Its good,
<div class="features-tiles-item-header"> trust us.
<div class="features-tiles-item-image mb-16"><img </p>
src="images/feature-tile-icon-01.svg" alt="Feature tile icon 01" width="72"
height="72"></div>
</div>
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">Lowest Latency</h4>
<p class="m-0 text-sm">Breakthrough peer to peer WebRTC technology means your
video goes directly to the other person without a server. No middleman. No
extra stops.</p>
</div>
</div>
</div>
<div class="tiles-item reveal-from-left">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16"><img
src="images/feature-tile-icon-02.svg" alt="Feature tile icon 02" width="72"
height="72"></div>
</div>
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">Best Video Quality</h4>
<p class="m-0 text-sm">State of the art VP9 video compression combined with our
custom scaling optimization means your calls have never looked better.</p></div>
</div>
</div>
<div class="tiles-item reveal-from-right">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16"><img
src="images/feature-tile-icon-03.svg" alt="Feature tile icon 03" width="72"
height="72"></div>
</div>
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">Total Privacy</h4>
<p class="m-0 text-sm">Each chat room is single use, with data
kept between you and your friend. Your data is yours to keep.</p></div>
</div>
</div>
<div class="tiles-item reveal-from-left">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16"><img
src="images/feature-tile-icon-04.svg" alt="Feature tile icon 04" width="72"
height="72"></div>
</div>
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">No Download Required</h4>
<p class="m-0 text-sm">No download means you can get back to what matters most. Just
open Neon Chats in Chrome or Firefox.</p></div>
</div>
</div>
<div class="tiles-item reveal-from-right">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16"><img
src="images/feature-tile-icon-05.svg" alt="Feature tile icon 05" width="72"
height="72"></div>
</div>
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">No Server Needed</h4>
<p class="m-0 text-sm">Calls are entirely between you and your friend.
Decentralized from any server. Data never leaves the browser. Cool right?</p>
</div>
</div>
</div>
<div class="tiles-item reveal-from-left">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16"><img
src="images/feature-tile-icon-06.svg" alt="Feature tile icon 06" width="72"
height="72"></div>
</div>
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">Maximum Security</h4>
<p class="m-0 text-sm">End to end state of the art encryption means your calls are
exactly that. Your calls.</p></div>
</div>
</div>
</div>
</div> </div>
</div>
<div class="tiles-wrap">
<div class="tiles-item reveal-from-right">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-01.svg"
alt="Feature tile icon 01"
width="72"
height="72"
/>
</div>
</div>
<div class="features-tiles-item-content">
<h4 class="mt-0 mb-8">Lowest Latency</h4>
<p class="m-0 text-sm">
Breakthrough peer to peer WebRTC technology means your
video goes directly to the other person without a
server. No middleman. No extra stops.
</p>
</div>
</div>
</div>
<div class="tiles-item reveal-from-left">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-02.svg"
alt="Feature tile icon 02"
width="72"
height="72"
/>
</div>
</div>
<div class="features-tiles-item-content">
<h4 class="mt-0 mb-8">Best Video Quality</h4>
<p class="m-0 text-sm">
State of the art VP9 video compression combined with our
custom scaling optimization means your calls have never
looked better.
</p>
</div>
</div>
</div>
<div class="tiles-item reveal-from-right">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-03.svg"
alt="Feature tile icon 03"
width="72"
height="72"
/>
</div>
</div>
<div class="features-tiles-item-content">
<h4 class="mt-0 mb-8">Total Privacy</h4>
<p class="m-0 text-sm">
Each chat room is single use, with data kept between you
and your friend. Your data is yours to keep.
</p>
</div>
</div>
</div>
<div class="tiles-item reveal-from-left">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-04.svg"
alt="Feature tile icon 04"
width="72"
height="72"
/>
</div>
</div>
<div class="features-tiles-item-content">
<h4 class="mt-0 mb-8">No Download Required</h4>
<p class="m-0 text-sm">
No download means you can get back to what matters most.
Just open Neon Chats in Chrome or Firefox.
</p>
</div>
</div>
</div>
<div class="tiles-item reveal-from-right">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-05.svg"
alt="Feature tile icon 05"
width="72"
height="72"
/>
</div>
</div>
<div class="features-tiles-item-content">
<h4 class="mt-0 mb-8">No Server Needed</h4>
<p class="m-0 text-sm">
Calls are entirely between you and your friend.
Decentralized from any server. Data never leaves the
browser. Cool right?
</p>
</div>
</div>
</div>
<div class="tiles-item reveal-from-left">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-06.svg"
alt="Feature tile icon 06"
width="72"
height="72"
/>
</div>
</div>
<div class="features-tiles-item-content">
<h4 class="mt-0 mb-8">Maximum Security</h4>
<p class="m-0 text-sm">
End to end state of the art encryption means your calls
are exactly that. Your calls.
</p>
</div>
</div>
</div>
</div>
</div> </div>
</div>
</section> </section>
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<div class="section-inner has-top-divider"> <div class="section-inner has-top-divider">
<div class="container-xs"> <div class="container-xs">
<div class="section-header center-content"><h2 class="m-0">Tired of the old way of <div class="section-header center-content">
chatting? </h2></div> <h2 class="m-0">Tired of the old way of chatting?</h2>
<div class="center-content">
<a class="button button-primary button-wide-mobile pulse"
style="border:0; background: linear-gradient(100deg, #376DF9 0, #FF5FA0 75%, #FFC55A 100%);"
href="/newroom">Try now</a>
</div>
</div>
</div> </div>
<div class="center-content">
<a
class="button button-primary button-wide-mobile pulse"
style="
border: 0;
background: linear-gradient(
100deg,
#376df9 0,
#ff5fa0 75%,
#ffc55a 100%
);
"
href="/newroom"
>Try now</a
>
</div>
</div>
</div> </div>
</div>
</section> </section>
<div> <div>
<!-- <section class="testimonial section">--> <!-- <section class="testimonial section">-->
<!-- <div class="container">--> <!-- <div class="container">-->
<!-- <div class="testimonial-inner section-inner has-top-divider">--> <!-- <div class="testimonial-inner section-inner has-top-divider">-->
<!-- <div class="section-header center-content">--> <!-- <div class="section-header center-content">-->
<!-- <div class="container-xs"><h2 class="mt-0 mb-16">Don't take our word for it</h2>--> <!-- <div class="container-xs"><h2 class="mt-0 mb-16">Don't take our word for it</h2>-->
<!-- <p class="m-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore--> <!-- <p class="m-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore-->
<!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa--> <!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa-->
<!-- qui.</p></div>--> <!-- qui.</p></div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="tiles-wrap">--> <!-- <div class="tiles-wrap">-->
<!-- <div class="tiles-item reveal-from-right" data-reveal-delay="200">--> <!-- <div class="tiles-item reveal-from-right" data-reveal-delay="200">-->
<!-- <div class="tiles-item-inner">--> <!-- <div class="tiles-item-inner">-->
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in--> <!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.--> <!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt--> <!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>--> <!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span--> <!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
<!-- class="testimonial-item-name text-color-high">Roman Level</span> <span--> <!-- class="testimonial-item-name text-color-high">Roman Level</span> <span-->
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>--> <!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="tiles-item reveal-from-bottom">--> <!-- <div class="tiles-item reveal-from-bottom">-->
<!-- <div class="tiles-item-inner">--> <!-- <div class="tiles-item-inner">-->
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in--> <!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.--> <!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt--> <!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>--> <!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span--> <!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
<!-- class="testimonial-item-name text-color-high">Diana Rynzhuk</span> <span--> <!-- class="testimonial-item-name text-color-high">Diana Rynzhuk</span> <span-->
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>--> <!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="tiles-item reveal-from-left" data-reveal-delay="200">--> <!-- <div class="tiles-item reveal-from-left" data-reveal-delay="200">-->
<!-- <div class="tiles-item-inner">--> <!-- <div class="tiles-item-inner">-->
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in--> <!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.--> <!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt--> <!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>--> <!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span--> <!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
<!-- class="testimonial-item-name text-color-high">Ben Stafford</span> <span--> <!-- class="testimonial-item-name text-color-high">Ben Stafford</span> <span-->
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>--> <!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </section>--> <!-- </section>-->
<!-- <section class="cta section center-content-mobile reveal-from-bottom">--> <!-- <section class="cta section center-content-mobile reveal-from-bottom">-->
<!-- <div class="container">--> <!-- <div class="container">-->
<!-- <div class="cta-inner section-inner cta-split">--> <!-- <div class="cta-inner section-inner cta-split">-->
<!-- <div class="cta-slogan"><h3 class="m-0">For previewing layouts and visual?</h3></div>--> <!-- <div class="cta-slogan"><h3 class="m-0">For previewing layouts and visual?</h3></div>-->
<!-- <div class="cta-action">--> <!-- <div class="cta-action">-->
<!-- <div class="has-icon-right"><label for="newsletter"--> <!-- <div class="has-icon-right"><label for="newsletter"-->
<!-- class="form-label screen-reader">Subscribe</label> <input--> <!-- class="form-label screen-reader">Subscribe</label> <input-->
<!-- id="newsletter" class="form-input" type="email" placeholder="Your best email">--> <!-- id="newsletter" class="form-input" type="email" placeholder="Your best email">-->
<!-- <svg width="16" height="12" xmlns="http://www.w3.org/2000/svg">--> <!-- <svg width="16" height="12" xmlns="http://www.w3.org/2000/svg">-->
<!-- <path d="M9 5H1c-.6 0-1 .4-1 1s.4 1 1 1h8v5l7-6-7-6v5z" fill="#376DF9"--> <!-- <path d="M9 5H1c-.6 0-1 .4-1 1s.4 1 1 1h8v5l7-6-7-6v5z" fill="#376DF9"-->
<!-- fill-rule="nonzero"/>--> <!-- fill-rule="nonzero"/>-->
<!-- </svg>--> <!-- </svg>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </section>--> <!-- </section>-->
</div> </div>
</main>
</main> <footer class="site-footer center-content-mobile">
<footer class="site-footer center-content-mobile">
<div class="container"> <div class="container">
<div class="site-footer-inner"> <div class="site-footer-inner">
<div class="footer-top space-between text-xxs"> <div class="footer-top space-between text-xxs">
<div class="brand"> <div class="brand">
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32"></a> <a href="/"
</div> ><img src="images/logo.svg" alt="Neon" width="32" height="32"
<div class="footer-social"> /></a>
<div><a href="https://github.com/ianramzy/decentralized-video-chat"> </div>
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <div class="footer-social">
<title>GitHub</title> <div>
<path d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"/> <a
</svg> href="https://github.com/ianramzy/decentralized-video-chat"
</a></div> >
</ul> <svg
</div> width="16"
</div> height="16"
<div class="footer-bottom space-between text-xxs invert-order-desktop"> viewBox="0 0 16 16"
<nav class="footer-nav"> xmlns="http://www.w3.org/2000/svg"
<ul class="list-reset"> >
<li><a href="https://ianramzy.com">Made with ❤️ by Ian Ramzy</a></li> <title>GitHub</title>
<!-- <li><a href="#">Contact</a></li>--> <path
<!-- <li><a href="#">About us</a></li>--> d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
<!-- <li><a href="#">FAQ's</a></li>--> />
<!-- <li><a href="#">Support</a></li>--> </svg>
</ul> </a>
</nav>
<div class="footer-copyright">&copy; 2020 Neon Chat, all rights reserved</div>
</div> </div>
</div>
</div> </div>
<div
class="footer-bottom space-between text-xxs invert-order-desktop"
>
<nav class="footer-nav">
<ul class="list-reset">
<li>
<a href="https://ianramzy.com">Made with ❤️ by Ian Ramzy</a>
</li>
<!-- <li><a href="#">Contact</a></li>-->
<!-- <li><a href="#">About us</a></li>-->
<!-- <li><a href="#">FAQ's</a></li>-->
<!-- <li><a href="#">Support</a></li>-->
</ul>
</nav>
<div class="footer-copyright">
&copy; 2020 Neon Chat, all rights reserved
</div>
</div>
</div>
</div> </div>
</footer> </footer>
</div> </div>
<script src="js/landing.js"></script> <script src="js/landing.js"></script>
</body> </body>
</html> </html>

258
public/newroom.html
View File

@ -1,124 +1,186 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="no-js"> <html lang="en" class="no-js">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Neon Chat</title> <title>Neon Chat</title>
<link rel="stylesheet" href="css/landing.css"> <link rel="stylesheet" href="css/landing.css" />
<link rel="shortcut icon" href="images/logo.svg"> <link rel="shortcut icon" href="images/logo.svg" />
<meta property="og:title" content="Neonchat - Decentralized video calls"> <meta property="og:title" content="Neonchat - Decentralized video calls" />
<meta property="og:description" content="Decentralized video <meta
property="og:description"
content="Decentralized video
calling provides real-time HD quality and latency simply calling provides real-time HD quality and latency simply
not available with traditional technology."> not available with traditional technology."
<meta property="og:image" content="https://neonchat.io/images/preview.png"> />
<meta property="og:url" content="https://neonchat.io/"> <meta
property="og:image"
content="https://neonchat.io/images/preview.png"
/>
<meta property="og:url" content="https://neonchat.io/" />
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"></script> <script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"
></script>
<script> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag() { function gtag() {
dataLayer.push(arguments); dataLayer.push(arguments);
} }
gtag('js', new Date()); gtag("js", new Date());
gtag('config', 'UA-162048272-1'); gtag("config", "UA-162048272-1");
</script> </script>
</head> </head>
<body class="has-animations"> <body class="has-animations">
<div class="body-wrap"> <div class="body-wrap">
<header class="site-header reveal-from-top"> <header class="site-header reveal-from-top">
<div class="container"> <div class="container">
<div class="site-header-inner"> <div class="site-header-inner">
<div class="brand"><h1 class="m-0"><a href="/"><img src="images/logo.svg" alt="Neon" <div class="brand">
width="32" <h1 class="m-0">
height="32"></a></h1></div> <a href="/"
<button id="header-nav-toggle" class="header-nav-toggle" aria-controls="primary-menu" ><img src="images/logo.svg" alt="Neon" width="32" height="32"
aria-expanded="false"><span class="screen-reader">Menu</span> <span class="hamburger"><span /></a>
class="hamburger-inner"></span></span></button> </h1>
</div> </div>
<button
id="header-nav-toggle"
class="header-nav-toggle"
aria-controls="primary-menu"
aria-expanded="false"
>
<span class="screen-reader">Menu</span>
<span class="hamburger"
><span class="hamburger-inner"></span
></span>
</button>
</div>
</div> </div>
</header> </header>
<main class="site-content"> <main class="site-content">
<section class="hero section illustration-section-01"> <section class="hero section illustration-section-01">
<div class="container"> <div class="container">
<div class="hero-inner section-inner"> <div class="hero-inner section-inner">
<div class="split-wrap invert-mobile"> <div class="split-wrap invert-mobile">
<div class="split-item"> <div class="split-item">
<div class="hero-content split-item-content center-content-mobile"> <div
<h1 class="mt-0 mb-16 reveal-from-bottom" data-reveal-delay="150"> class="hero-content split-item-content center-content-mobile"
Get room. <br> Share URL. <br> Start chatting.</h1> >
<p class="mt-0 mb-32 reveal-from-bottom" data-reveal-delay="300"> <h1
Each chat has its own disposable URL. Just get a room and share your custom link. class="mt-0 mb-16 reveal-from-bottom"
It's really that easy. data-reveal-delay="150"
</p> >
</div> Get room. <br />
<style>@media (min-width: 641px) { Share URL. <br />
.hero .split-wrap .split-item { Start chatting.
min-height: 492px </h1>
} <p
}</style> class="mt-0 mb-32 reveal-from-bottom"
</div> data-reveal-delay="300"
</div> >
Each chat has its own disposable URL. Just get a room and
share your custom link. It's really that easy.
</p>
</div>
<style>
@media (min-width: 641px) {
.hero .split-wrap .split-item {
min-height: 492px;
}
}
</style>
</div> </div>
</div>
</div> </div>
</div>
</section> </section>
<section class="cta section center-content-mobile reveal-from-bottom"> <section class="cta section center-content-mobile reveal-from-bottom">
<div class="container"> <div class="container">
<div class="cta-inner section-inner cta-split"> <div class="cta-inner section-inner cta-split">
<div class="cta-slogan"><h3 class="m-0">Pick a room name.<br> How about this one?</h3></div> <div class="cta-slogan">
<div class="cta-action"> <h3 class="m-0">
<div class="mb-24" style="margin-top: 30px"> Pick a room name.<br />
<label class="form-label screen-reader" for="input-01">This is a label</label> How about this one?
<div class="form-group-desktop"> </h3>
<input class="form-input" type="text" id="input-01" value="PurpleSquid"> </div>
<button class="button button-primary pulse" <div class="cta-action">
onclick="{window.location.href = '/room/' + document.getElementById('input-01').value}"> <div class="mb-24" style="margin-top: 30px;">
Go To My Room <label class="form-label screen-reader" for="input-01"
</button> >This is a label</label
</div> >
</div> <div class="form-group-desktop">
</div> <input
class="form-input"
type="text"
id="input-01"
value="PurpleSquid"
/>
<button
class="button button-primary pulse"
onclick="{window.location.href = '/room/' + document.getElementById('input-01').value}"
>
Go To My Room
</button>
</div>
</div> </div>
</div>
</div> </div>
</div>
</section> </section>
</main>
<footer class="site-footer center-content-mobile">
</main>
<footer class="site-footer center-content-mobile">
<div class="container"> <div class="container">
<div class="site-footer-inner"> <div class="site-footer-inner">
<div class="footer-top space-between text-xxs"> <div class="footer-top space-between text-xxs">
<div class="brand"> <div class="brand">
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32"></a> <a href="/"
</div> ><img src="images/logo.svg" alt="Neon" width="32" height="32"
<div class="footer-social"> /></a>
<div><a href="https://github.com/ianramzy/decentralized-video-chat"> </div>
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <div class="footer-social">
<title>GitHub</title> <div>
<path d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"/> <a
</svg> href="https://github.com/ianramzy/decentralized-video-chat"
</a></div> >
</ul> <svg
</div> width="16"
height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<title>GitHub</title>
<path
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
/>
</svg>
</a>
</div> </div>
</div>
</div> </div>
<div class="footer-bottom space-between text-xxs invert-order-desktop"> </div>
<nav class="footer-nav"> <div
<ul class="list-reset"> class="footer-bottom space-between text-xxs invert-order-desktop"
<li><a href="https://ianramzy.com">Made with ❤️ by Ian Ramzy</a></li> >
</ul> <nav class="footer-nav">
</nav> <ul class="list-reset">
<div class="footer-copyright">&copy; 2020 Neon Chat, all rights reserved</div> <li>
<a href="https://ianramzy.com">Made with ❤️ by Ian Ramzy</a>
</li>
</ul>
</nav>
<div class="footer-copyright">
&copy; 2020 Neon Chat, all rights reserved
</div> </div>
</div>
</div> </div>
</div> </footer>
</footer> </div>
</div> <script src="js/landing.js"></script>
<script src="js/landing.js"></script> <script src="js/newroom.js"></script>
<script src="js/newroom.js"></script> </body>
</body> </html>
</html>

169
server.js
View File

@ -1,114 +1,111 @@
require('dotenv').config(); require("dotenv").config();
var sslRedirect = require('heroku-ssl-redirect'); var sslRedirect = require("heroku-ssl-redirect");
var twilio = require('twilio')(process.env.TWILIO_ACCOUNT_SID, process.env.TWILIO_AUTH_TOKEN); var twilio = require("twilio")(
var express = require('express'); process.env.TWILIO_ACCOUNT_SID,
process.env.TWILIO_AUTH_TOKEN
);
var express = require("express");
var app = express(); var app = express();
var http = require('http').createServer(app); var http = require("http").createServer(app);
var io = require('socket.io')(http); var io = require("socket.io")(http);
var path = require('path'); var path = require("path");
var public = path.join(__dirname, 'public'); var public = path.join(__dirname, "public");
// enable ssl redirect // enable ssl redirect
app.use(sslRedirect()); app.use(sslRedirect());
app.get("/", function (req, res) {
app.get('/', function (req, res) { res.sendFile(path.join(public, "landing.html"));
res.sendFile(path.join(public, 'landing.html'));
}); });
app.get('/newroom', function (req, res) { app.get("/newroom", function (req, res) {
res.sendFile(path.join(public, 'newroom.html')); res.sendFile(path.join(public, "newroom.html"));
}); });
app.get('/room/*', function (req, res) { app.get("/room/*", function (req, res) {
res.sendFile(path.join(public, 'chat.html')); res.sendFile(path.join(public, "chat.html"));
}); });
app.use(express.static('public')); app.use(express.static("public"));
function logIt(msg, room) { function logIt(msg, room) {
console.log(room + ": " + msg) console.log(room + ": " + msg);
} }
// When a socket connects, set up the specific listeners we will use. // When a socket connects, set up the specific listeners we will use.
io.on('connection', function (socket) { io.on("connection", function (socket) {
// When a client tries to join a room, only allow them if they are first or // When a client tries to join a room, only allow them if they are first or
// second in the room. Otherwise it is full. // second in the room. Otherwise it is full.
socket.on('join', function (room) { socket.on("join", function (room) {
logIt('A client joined the room', room); logIt("A client joined the room", room);
var clients = io.sockets.adapter.rooms[room]; var clients = io.sockets.adapter.rooms[room];
var numClients = typeof clients !== 'undefined' ? clients.length : 0; var numClients = typeof clients !== "undefined" ? clients.length : 0;
if (numClients === 0) { if (numClients === 0) {
socket.join(room); socket.join(room);
} else if (numClients === 1) { } else if (numClients === 1) {
socket.join(room); socket.join(room);
// When the client is second to join the room, both clients are ready. // When the client is second to join the room, both clients are ready.
logIt('Broadcasting ready message', room); logIt("Broadcasting ready message", room);
socket.broadcast.to(room).emit('willInitiateCall', room); socket.broadcast.to(room).emit("willInitiateCall", room);
socket.emit('ready', room).to(room); socket.emit("ready", room).to(room);
socket.broadcast.to(room).emit('ready', room); socket.broadcast.to(room).emit("ready", room);
} else { } else {
logIt("room already full", room); logIt("room already full", room);
socket.emit('full', room); socket.emit("full", room);
} }
});
// When receiving the token message, use the Twilio REST API to request an
// token to get ephemeral credentials to use the TURN server.
socket.on("token", function (room) {
logIt("Received token request", room);
twilio.tokens.create(function (err, response) {
if (err) {
logIt(err, room);
} else {
logIt("Token generated. Returning it to the browser client", room);
socket.emit("token", response).to(room);
}
}); });
});
// When receiving the token message, use the Twilio REST API to request an // Relay candidate messages
// token to get ephemeral credentials to use the TURN server. socket.on("candidate", function (candidate, room) {
socket.on('token', function (room) { logIt("Received candidate. Broadcasting...", room);
logIt('Received token request', room); socket.broadcast.to(room).emit("candidate", candidate);
twilio.tokens.create(function (err, response) { });
if (err) {
logIt(err, room);
} else {
logIt('Token generated. Returning it to the browser client', room);
socket.emit('token', response).to(room);
}
});
});
// Relay candidate messages // Relay offers
socket.on('candidate', function (candidate, room) { socket.on("offer", function (offer, room) {
logIt('Received candidate. Broadcasting...', room); logIt("Received offer. Broadcasting...", room);
socket.broadcast.to(room).emit('candidate', candidate); socket.broadcast.to(room).emit("offer", offer);
}); });
// Relay offers // Relay answers
socket.on('offer', function (offer, room) { socket.on("answer", function (answer, room) {
logIt('Received offer. Broadcasting...', room); logIt("Received answer. Broadcasting...", room);
socket.broadcast.to(room).emit('offer', offer); socket.broadcast.to(room).emit("answer", answer);
}); });
// Relay answers // Relay answers
socket.on('answer', function (answer, room) { socket.on("sendCaptions", function (captions, room) {
logIt('Received answer. Broadcasting...', room); // logIt(captions, room);
socket.broadcast.to(room).emit('answer', answer); socket.broadcast.to(room).emit("recieveCaptions", captions);
}); });
// Relay answers
socket.on('sendCaptions', function (captions, room) {
// logIt(captions, room);
socket.broadcast.to(room).emit('recieveCaptions', captions);
});
// Relay answers
socket.on('requestToggleCaptions', function (room) {
logIt("requesting captions", room);
socket.broadcast.to(room).emit('requestToggleCaptions');
});
// Relay chat messages
socket.on('chat message', function(msg, room){
socket.broadcast.to(room).emit('chat message', msg);
});
// Relay answers
socket.on("requestToggleCaptions", function (room) {
logIt("requesting captions", room);
socket.broadcast.to(room).emit("requestToggleCaptions");
});
// Relay chat messages
socket.on("chat message", function (msg, room) {
socket.broadcast.to(room).emit("chat message", msg);
});
}); });
var port = process.env.PORT || 3000; var port = process.env.PORT || 3000;
http.listen(port, function () { http.listen(port, function () {
console.log("http://localhost:" + port); console.log("http://localhost:" + port);
}); });