added neon landing page

This commit is contained in:
Ian Ramzy 2020-03-23 23:20:28 -04:00
parent 4ac088ad94
commit 7b3a3e9dd4
44 changed files with 4686 additions and 30 deletions

View File

@ -2,9 +2,9 @@
"name": "video-chat2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"main": "server.js",
"scripts": {
"start": "node index.js",
"start": "node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",

View File

@ -40,7 +40,6 @@
color: red;
}
</style>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--<div>-->
@ -60,6 +59,6 @@
<!--</div>-->
<script src="/socket.io/socket.io.js"></script>
<script src="/app.js"></script>
<script src="/chat.js"></script>
</body>
</html>

View File

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Landing</title>
</head>
<body>
<h1>Welcome to videochat</h1>
<h3>Click the button to get a disposable video chat room</h3>
<a href="/">Link</a>
</body>
</html>

3228
public/landing/css/style.css Executable file

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1 @@
<svg width="124" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M63.849 11.694c-1.023 0-1.76.326-2.507.657v7.507c.716.066 1.126.066 1.805.066 2.454 0 2.79-1.092 2.79-2.616v-3.585c0-1.125-.384-2.029-2.088-2.029zm-16.295-.41c-1.702 0-2.09.908-2.09 2.033v.631h4.179v-.631c0-1.125-.389-2.033-2.089-2.033zm-31.566 7.813c0 .89.432 1.352 1.386 1.352 1.022 0 1.628-.324 2.375-.657v-1.78h-2.237c-1.059 0-1.524.19-1.524 1.085zM79.7 11.694c-1.705 0-2.296.904-2.296 2.03v4.106c0 1.129.59 2.035 2.296 2.035 1.7 0 2.296-.906 2.296-2.035v-4.107c0-1.125-.596-2.029-2.296-2.029zM7.632 23.702H2.619V11.917H.115v-4.06H2.62v-2.44C2.62 2.104 4.033.134 8.05.134h3.345v4.062h-2.09c-1.565 0-1.668.568-1.668 1.627l-.006 2.033h3.787l-.443 4.06H7.632v11.786zm17.13.031h-4.177l-.18-1.026a9.802 9.802 0 01-4.734 1.192c-3.063 0-4.694-1.988-4.694-4.737 0-3.244 1.903-4.402 5.307-4.402h3.465v-.701c0-1.656-.196-2.142-2.817-2.142h-4.286l.419-4.06h4.685c5.751 0 7.012 1.764 7.012 6.235v9.641zm14.206-11.518c-2.6-.433-3.346-.528-4.597-.528-2.246 0-2.925.481-2.925 2.335v3.506c0 1.853.679 2.337 2.925 2.337 1.251 0 1.998-.097 4.597-.532v3.961c-2.277.496-3.76.627-5.014.627-5.381 0-7.52-2.75-7.52-6.72v-2.845c0-3.975 2.139-6.729 7.52-6.729 1.254 0 2.737.13 5.014.629v3.959zM54.654 17.2h-9.191v.328c0 1.853.68 2.337 2.925 2.337 2.02 0 3.252-.097 5.847-.532v3.961c-2.503.496-3.807.627-6.262.627-5.382 0-7.522-2.75-7.522-6.72v-3.253c0-3.475 1.587-6.32 7.102-6.32 5.515 0 7.101 2.812 7.101 6.32V17.2zm16.294.076c0 3.838-1.129 6.637-7.97 6.637-2.471 0-3.92-.21-6.647-.618V1.355l5.01-.813v7.675c1.084-.39 2.485-.59 3.76-.59 5.012 0 5.847 2.183 5.847 5.69v3.959zm16.063.083c0 3.311-1.407 6.523-7.295 6.523-5.891 0-7.325-3.212-7.325-6.523v-3.197c0-3.313 1.434-6.525 7.325-6.525 5.888 0 7.295 3.212 7.295 6.525v3.197zm16.052 0c0 3.311-1.41 6.523-7.296 6.523-5.891 0-7.325-3.212-7.325-6.523v-3.197c0-3.313 1.434-6.525 7.325-6.525 5.887 0 7.296 3.212 7.296 6.525v3.197zm16.472 6.343h-5.431l-4.594-7.448v7.448h-5.012V1.354l5.012-.812v14.387l4.594-7.073h5.431l-5.014 7.719 5.014 8.127zM95.75 11.694c-1.703 0-2.294.904-2.294 2.03v4.106c0 1.129.591 2.035 2.294 2.035 1.7 0 2.301-.906 2.301-2.035v-4.107c0-1.125-.601-2.029-2.301-2.029zm26.646 9.229c.844 0 1.516.668 1.516 1.503 0 .848-.672 1.51-1.522 1.51a1.511 1.511 0 01-1.532-1.51c0-.835.686-1.503 1.532-1.503h.006zm-.006.234c-.68 0-1.237.568-1.237 1.27 0 .713.557 1.274 1.243 1.274.687.007 1.235-.56 1.235-1.268s-.548-1.276-1.235-1.276h-.006zm-.288 2.144h-.275v-1.677c.144-.02.282-.04.488-.04.261 0 .432.054.537.127.101.074.156.187.156.347 0 .221-.15.354-.336.408v.013c.151.027.254.16.289.406.04.261.082.361.108.416h-.288c-.04-.055-.082-.208-.117-.429-.04-.213-.15-.293-.37-.293h-.192v.722zm0-.928h.2c.225 0 .417-.081.417-.289 0-.147-.11-.293-.418-.293-.09 0-.152.007-.2.013v.569z" fill="#6A6F82"/></svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.3 KiB

View File

@ -0,0 +1 @@
<svg width="125" height="39" xmlns="http://www.w3.org/2000/svg"><path d="M65.879 9.8a2.533 2.533 0 01-2.539 2.537 2.532 2.532 0 01-2.538-2.538 2.508 2.508 0 012.538-2.537c1.446.039 2.539 1.171 2.539 2.537zm-10.466 5.114v.624s-1.21-1.562-3.787-1.562c-4.256 0-7.576 3.24-7.576 7.73 0 4.45 3.28 7.73 7.576 7.73 2.616 0 3.787-1.601 3.787-1.601v.663c0 .313.235.546.547.546h3.163V14.365H55.96a.561.561 0 00-.547.549zm0 9.407c-.585.86-1.757 1.601-3.162 1.601-2.5 0-4.413-1.561-4.413-4.216 0-2.655 1.914-4.216 4.413-4.216 1.367 0 2.616.78 3.162 1.6v5.231zm6.053-9.954h3.749v14.678h-3.749V14.367zm55.998-.391c-2.578 0-3.788 1.562-3.788 1.562V7.301h-3.749v21.744h3.163a.558.558 0 00.547-.546v-.664s1.21 1.6 3.787 1.6c4.257 0 7.576-3.277 7.576-7.728 0-4.45-3.319-7.731-7.536-7.731zm-.625 11.907c-1.445 0-2.577-.741-3.163-1.6V19.05c.586-.78 1.835-1.6 3.163-1.6 2.499 0 4.412 1.561 4.412 4.216 0 2.654-1.913 4.216-4.412 4.216zm-8.864-5.543v8.744h-3.75V20.77c0-2.42-.78-3.396-2.888-3.396-1.132 0-2.304.585-3.047 1.445v10.228h-3.748v-14.68h2.967c.313 0 .547.274.547.548v.624c1.094-1.132 2.538-1.562 3.983-1.562 1.64 0 3.007.47 4.1 1.406 1.328 1.093 1.836 2.498 1.836 4.958zm-22.533-6.364c-2.576 0-3.787 1.562-3.787 1.562V7.301h-3.749v21.744h3.163a.559.559 0 00.547-.546v-.664s1.21 1.6 3.787 1.6c4.257 0 7.576-3.277 7.576-7.728.04-4.451-3.28-7.731-7.537-7.731zm-.625 11.907c-1.444 0-2.576-.741-3.162-1.6V19.05c.586-.78 1.835-1.6 3.162-1.6 2.5 0 4.413 1.561 4.413 4.216 0 2.654-1.913 4.216-4.413 4.216zM74.665 13.976c1.132 0 1.718.196 1.718.196v3.474s-3.124-1.055-5.076 1.171v10.267h-3.75V14.367h3.164c.312 0 .546.273.546.546v.625c.704-.82 2.227-1.562 3.398-1.562zM35.733 27.718c-.195-.468-.39-.976-.586-1.406-.313-.702-.625-1.366-.898-1.99l-.039-.04a406.922 406.922 0 00-8.63-17.644l-.117-.235c-.32-.608-.633-1.22-.937-1.835-.39-.703-.78-1.444-1.406-2.147C21.87.859 20.074 0 18.161 0c-1.953 0-3.71.86-4.998 2.342-.586.703-1.016 1.444-1.406 2.148a84.724 84.724 0 01-.936 1.835l-.118.234c-3.007 5.856-5.935 11.79-8.63 17.645l-.04.078c-.272.625-.585 1.289-.898 1.99-.195.43-.39.899-.585 1.406-.508 1.444-.664 2.81-.468 4.217a8.297 8.297 0 005.076 6.48c1.016.43 2.07.625 3.163.625.313 0 .703-.039 1.016-.078 1.288-.156 2.616-.585 3.905-1.327 1.6-.898 3.124-2.186 4.842-4.06 1.718 1.874 3.28 3.162 4.842 4.06 1.29.742 2.616 1.17 3.905 1.327.312.04.703.078 1.016.078 1.093 0 2.186-.195 3.162-.625 2.734-1.094 4.647-3.591 5.077-6.48.31-1.366.154-2.732-.353-4.177zm-17.611 2.03c-2.11-2.655-3.476-5.153-3.944-7.26-.195-.899-.235-1.68-.117-2.382a3.78 3.78 0 01.625-1.64c.742-1.054 1.991-1.718 3.436-1.718 1.445 0 2.734.625 3.437 1.718.312.468.547 1.015.625 1.64.117.703.078 1.522-.117 2.381-.47 2.069-1.837 4.568-3.945 7.26zm15.58 1.835a5.802 5.802 0 01-3.553 4.568c-.937.39-1.953.507-2.968.39-.976-.118-1.953-.43-2.967-1.015-1.406-.782-2.812-1.991-4.452-3.787 2.577-3.162 4.139-6.051 4.725-8.627a9.765 9.765 0 00.195-3.32 6.329 6.329 0 00-1.054-2.654c-1.212-1.757-3.242-2.771-5.507-2.771-2.264 0-4.295 1.054-5.505 2.771a6.335 6.335 0 00-1.055 2.655 8.107 8.107 0 00.195 3.319c.586 2.576 2.187 5.504 4.725 8.666-1.601 1.796-3.046 3.006-4.452 3.787-1.015.586-1.991.898-2.967 1.015a6.25 6.25 0 01-2.968-.39 5.802 5.802 0 01-3.553-4.568 6.457 6.457 0 01.351-3.045c.117-.39.313-.78.508-1.25.273-.624.585-1.288.898-1.951l.04-.078a425.627 425.627 0 018.59-17.528l.117-.235c.313-.585.625-1.21.937-1.795.313-.625.664-1.211 1.094-1.719.82-.936 1.913-1.444 3.124-1.444 1.21 0 2.304.508 3.124 1.444.43.51.78 1.095 1.093 1.719.313.585.626 1.21.937 1.795l.118.235a516.84 516.84 0 018.552 17.567v.039c.312.626.586 1.328.898 1.953.195.468.39.858.508 1.248.311 1.014.428 1.991.272 3.006z" fill="#6A6F82"/></svg>

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

@ -0,0 +1 @@
<svg width="150" height="31" xmlns="http://www.w3.org/2000/svg"><g fill="#6A6F82" fill-rule="evenodd"><path d="M150 14.514v-2.647h-3.295V7.75l-.11.034-3.095.945-.061.019v3.118h-4.884V10.13c0-.81.181-1.428.538-1.841.355-.408.863-.615 1.51-.615.465 0 .947.11 1.431.325l.122.054V5.265l-.057-.021c-.452-.162-1.068-.244-1.83-.244-.96 0-1.834.209-2.596.622a4.432 4.432 0 00-1.78 1.757c-.419.751-.631 1.618-.631 2.578v1.91h-2.294v2.647h2.294v11.153h3.293V14.514h4.884v7.088c0 2.919 1.38 4.398 4.1 4.398a6.78 6.78 0 001.4-.155c.488-.105.822-.21 1.018-.322l.043-.026v-2.672l-.134.089a2.309 2.309 0 01-.662.288 2.52 2.52 0 01-.65.11c-.638 0-1.11-.171-1.402-.51-.296-.34-.446-.938-.446-1.773v-6.515H150zm-24.387 8.799c-1.195 0-2.137-.396-2.801-1.175-.669-.783-1.007-1.9-1.007-3.317 0-1.464.338-2.61 1.007-3.406.664-.791 1.598-1.193 2.775-1.193 1.142 0 2.05.383 2.702 1.14.654.762.986 1.898.986 3.379 0 1.498-.312 2.65-.928 3.42-.612.764-1.531 1.152-2.734 1.152zm.147-11.779c-2.28 0-4.092.667-5.383 1.982-1.291 1.315-1.945 3.136-1.945 5.41 0 2.161.638 3.9 1.898 5.165 1.26 1.267 2.975 1.908 5.096 1.908 2.21 0 3.986-.676 5.277-2.009 1.29-1.332 1.945-3.135 1.945-5.356 0-2.195-.614-3.946-1.825-5.204-1.211-1.258-2.915-1.896-5.063-1.896zm-12.638 0c-1.551 0-2.834.396-3.815 1.177-.986.785-1.486 1.815-1.486 3.062 0 .647.108 1.223.32 1.711.214.49.545.921.985 1.283.436.359 1.11.735 2.001 1.117.75.308 1.31.569 1.665.774.347.201.594.404.733.6.135.193.204.457.204.783 0 .927-.696 1.378-2.128 1.378-.53 0-1.136-.11-1.8-.329a6.769 6.769 0 01-1.844-.932l-.136-.098v3.164l.05.023c.466.215 1.053.396 1.746.538a9.423 9.423 0 001.864.215c1.684 0 3.04-.398 4.028-1.183.996-.79 1.5-1.845 1.5-3.135 0-.93-.271-1.728-.807-2.37-.531-.639-1.454-1.225-2.74-1.743-1.026-.41-1.683-.751-1.954-1.013-.261-.253-.394-.61-.394-1.063 0-.401.164-.723.5-.983.339-.262.81-.395 1.401-.395.55 0 1.11.087 1.669.256a5.4 5.4 0 011.457.674l.134.092v-3.001l-.051-.022c-.378-.162-.875-.3-1.48-.412a9.05 9.05 0 00-1.622-.168zM99.236 23.313c-1.195 0-2.138-.396-2.802-1.175-.668-.783-1.006-1.899-1.006-3.317 0-1.464.338-2.61 1.007-3.406.664-.791 1.597-1.193 2.774-1.193 1.142 0 2.05.383 2.702 1.14.655.762.987 1.898.987 3.379 0 1.498-.313 2.65-.929 3.42-.611.764-1.53 1.152-2.733 1.152zm.147-11.779c-2.281 0-4.093.667-5.384 1.982-1.29 1.315-1.945 3.136-1.945 5.41 0 2.162.64 3.9 1.9 5.165C95.213 25.358 96.927 26 99.048 26c2.21 0 3.986-.676 5.277-2.009 1.29-1.332 1.945-3.135 1.945-5.356 0-2.195-.614-3.946-1.825-5.204-1.212-1.258-2.916-1.896-5.063-1.896zm-12.328 2.723v-2.39h-3.253v13.8h3.253v-7.06c0-1.2.273-2.186.811-2.93.531-.737 1.24-1.11 2.104-1.11.293 0 .622.049.978.144.353.095.608.198.759.306l.136.099v-3.273l-.052-.022c-.303-.129-.732-.194-1.274-.194-.818 0-1.55.263-2.176.779-.55.453-.947 1.075-1.251 1.85h-.035zm-9.079-2.723c-1.492 0-2.823.32-3.955.95a6.4 6.4 0 00-2.61 2.676c-.594 1.143-.896 2.478-.896 3.966 0 1.304.293 2.5.871 3.555a6.114 6.114 0 002.435 2.456c1.035.573 2.231.863 3.556.863 1.546 0 2.866-.309 3.924-.917l.043-.024v-2.974l-.137.1a6.12 6.12 0 01-1.591.826c-.575.2-1.1.302-1.56.302-1.276 0-2.3-.399-3.044-1.185-.746-.786-1.123-1.891-1.123-3.281 0-1.4.394-2.533 1.17-3.369.775-.833 1.802-1.256 3.052-1.256 1.069 0 2.11.361 3.096 1.075l.137.098v-3.133l-.044-.025c-.371-.207-.877-.378-1.505-.508a9.008 9.008 0 00-1.819-.195zm-9.701.333h-3.253v13.8h3.253v-13.8zm-1.593-5.879c-.536 0-1.003.182-1.386.542a1.787 1.787 0 00-.581 1.354c0 .529.193.975.575 1.327.379.351.847.529 1.392.529a2.01 2.01 0 001.398-.528 1.73 1.73 0 00.582-1.328c0-.518-.19-.969-.566-1.339-.375-.37-.851-.557-1.414-.557zm-8.117 4.86v14.819h3.32V6.41H57.29l-5.84 14.302L45.782 6.41H41v19.256h3.12v-14.82h.107l5.985 14.82h2.354l5.892-14.818h.107z" fill-rule="nonzero"/><path d="M15 14H0V0h15zm17 0H17V0h15zM15 31H0V17h15zm17 0H17V17h15z"/></g></svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

@ -0,0 +1 @@
<svg width="113" height="30" xmlns="http://www.w3.org/2000/svg"><g fill="#6A6F82"><path d="M0 5h3.94v8.21h8.31V5h3.946v20.153H12.25V16.77H3.94v8.383H0V5zm28.678 13.589c0 1.687-1.465 3.06-3.264 3.06-1.799 0-3.264-1.373-3.264-3.06V9.912h-3.736v8.677c0 3.62 3.14 6.564 7 6.564s7-2.945 7-6.564V9.912h-3.736v8.677zm14.167-8.575c-1.854 0-3.147.504-4.397 1.655V5H34.7v12.359c0 4.626 3.567 7.794 7.573 7.794 4.454 0 8.357-3.225 8.357-7.57 0-4.29-3.599-7.57-7.784-7.57zm.093 11.886c-2.54 0-4.483-1.99-4.483-4.317s1.943-4.317 4.483-4.317c2.152 0 4.096 1.99 4.096 4.317S45.09 21.9 42.938 21.9zm13.987-11c0-1.768 1.256-2.328 2.63-2.328 1.107 0 2.572.785 3.527 1.738l2.451-2.69c-1.225-1.543-3.705-2.608-5.738-2.608-4.066 0-6.995 2.215-6.995 5.888 0 6.812 8.938 4.652 8.938 8.466 0 1.176-1.225 2.214-2.63 2.214-2.212 0-2.93-1.009-3.946-2.074l-2.72 2.634c1.734 1.991 3.886 3 6.457 3 3.856 0 6.964-2.242 6.964-5.747 0-7.569-8.938-5.214-8.938-8.493zm18.808-1.084c-4.007 0-7.573 3.167-7.573 7.794V30h3.748v-6.7c1.25 1.15 2.543 1.655 4.397 1.655 4.185 0 7.785-3.28 7.785-7.57 0-4.345-3.904-7.569-8.357-7.569zm.666 11.887c-2.54 0-4.483-1.992-4.483-4.318 0-2.327 1.943-4.317 4.483-4.317 2.152 0 4.095 1.99 4.095 4.317 0 2.326-1.943 4.318-4.095 4.318zm35.285.197c-2.211 0-2.84-.897-2.84-2.27v-6.084h3.438v-3.083h-3.437V6.397l-3.795 1.598v12.391c0 3.168 2.33 4.767 5.527 4.767.479 0 1.137-.03 1.496-.112l.927-3.196c-.418.027-.897.055-1.316.055z"/><path d="M100.964 13.775c-.714-1.105-1.718-1.99-2.974-2.658a8.595 8.595 0 00-3.009-.937V6.67c1.097-.42 1.778-1.346 1.778-2.428 0-1.474-1.315-2.668-2.952-2.668-1.639 0-2.976 1.194-2.976 2.668 0 1.082.641 2.009 1.738 2.428v3.513a9.297 9.297 0 00-2.618.738c-1.697-1.16-7.262-4.962-10.517-7.183.078-.25.137-.509.137-.781C79.57 1.323 78.1 0 76.285 0S73 1.323 73 2.956c0 1.632 1.47 2.956 3.287 2.956a3.53 3.53 0 001.686-.43l.687.468 9.44 6.117c-.5.412-.964.88-1.336 1.407-.753 1.072-1.214 2.252-1.214 3.538v.269c0 .903.191 1.756.516 2.557a6.56 6.56 0 001.223 1.91l-3.133 2.825c-.927-.31-1.97-.104-2.668.527a2.16 2.16 0 00-.743 1.615c0 .61.264 1.184.744 1.615a2.67 2.67 0 001.796.67 2.674 2.674 0 001.797-.67 2.16 2.16 0 00.743-1.615c0-.236-.04-.466-.117-.685l3.238-2.913c.444.276.924.508 1.44.708a9.221 9.221 0 003.366.637h.225a8.651 8.651 0 003.842-.874c1.269-.62 2.262-1.468 3.012-2.55.754-1.086 1.169-2.285 1.169-3.604v-.066c0-1.298-.334-2.496-1.036-3.593zm-3.956 6.11c-.879.879-1.89 1.42-3.031 1.42h-.188c-.653 0-1.29-.162-1.915-.457a4.292 4.292 0 01-1.678-1.374c-.452-.576-.698-1.205-.698-1.87V17.4c0-.655.14-1.277.492-1.863A4.23 4.23 0 0191.552 14a4.133 4.133 0 012.163-.587h.074c.716 0 1.394.127 2.034.422a4.181 4.181 0 011.598 1.307c.401.565.64 1.174.717 1.837.012.138.018.28.018.414 0 .9-.383 1.735-1.148 2.492z"/></g></svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -0,0 +1 @@
<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-63.9%" y="-63.9%" width="227.8%" height="227.8%" filterUnits="objectBoundingBox" id="a"><feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0862745098 0 0 0 0 0.0901960784 0 0 0 0 0.105882353 0 0 0 0.32 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#a)" fill="#FFF"><path d="M28 25h19l-3 6H25z"/><path opacity=".64" d="M28 33h19l-3 6H25z"/><path d="M28 41h19l-3 6H25z"/></g></svg>

After

Width:  |  Height:  |  Size: 718 B

View File

@ -0,0 +1 @@
<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-63.9%" y="-63.9%" width="227.8%" height="227.8%" filterUnits="objectBoundingBox" id="a"><feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0862745098 0 0 0 0 0.0901960784 0 0 0 0 0.105882353 0 0 0 0.32 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#a)" fill="#FFF"><rect x="24" y="24" width="14" height="17" rx="1"/><path d="M46.859 31.168L40.3 29.393l-.522 1.931 5.6 1.514-3.399 12.548-11.584-3.131-.521 1.931 12.55 3.393a1 1 0 001.226-.705l3.913-14.48a1 1 0 00-.704-1.226z" opacity=".64"/></g></svg>

After

Width:  |  Height:  |  Size: 840 B

View File

@ -0,0 +1 @@
<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-63.9%" y="-63.9%" width="227.8%" height="227.8%" filterUnits="objectBoundingBox" id="a"><feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0862745098 0 0 0 0 0.0901960784 0 0 0 0 0.105882353 0 0 0 0.32 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#a)" fill="#FFF"><path d="M33 34h-7a1 1 0 01-1-1v-7a1 1 0 011-1h7a1 1 0 011 1v7a1 1 0 01-1 1zm0 13h-7a1 1 0 01-1-1v-7a1 1 0 011-1h7a1 1 0 011 1v7a1 1 0 01-1 1zm4-21h10v2H37z"/><path opacity=".64" d="M37 31h10v2H37zm0 8h10v2H37z"/><path d="M37 44h10v2H37z"/></g></svg>

After

Width:  |  Height:  |  Size: 854 B

View File

@ -0,0 +1 @@
<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-63.9%" y="-63.9%" width="227.8%" height="227.8%" filterUnits="objectBoundingBox" id="a"><feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0862745098 0 0 0 0 0.0901960784 0 0 0 0 0.105882353 0 0 0 0.32 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#a)" fill="#FFF"><path d="M48 36a2.99 2.99 0 00-2-2.816v-3.368A2.993 2.993 0 1042.184 26h-3.368a2.982 2.982 0 00-5.632 0h-3.368A2.993 2.993 0 1026 29.816v3.368a2.982 2.982 0 000 5.632v3.368A2.993 2.993 0 1029.816 46h3.368a2.982 2.982 0 005.632 0h3.368A2.993 2.993 0 1046 42.184v-3.368A2.99 2.99 0 0048 36zm-4 2.816v3.368c-.848.3-1.515.968-1.816 1.816h-3.368a2.982 2.982 0 00-5.632 0h-3.368A2.987 2.987 0 0028 42.184v-3.368a2.982 2.982 0 000-5.632v-3.368A2.987 2.987 0 0029.816 28h3.368a2.982 2.982 0 005.632 0h3.368c.3.848.968 1.515 1.816 1.816v3.368a2.982 2.982 0 000 5.632z"/><circle opacity=".64" cx="36" cy="36" r="3"/></g></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1 @@
<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-63.9%" y="-63.9%" width="227.8%" height="227.8%" filterUnits="objectBoundingBox" id="a"><feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0862745098 0 0 0 0 0.0901960784 0 0 0 0 0.105882353 0 0 0 0.32 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#a)" fill="#FFF"><path d="M35.406 24.132l-10.82 5.055a.42.42 0 00.001.764l10.905 5.018c.322.148.694.148 1.016 0l10.905-5.018a.42.42 0 00.002-.764l-10.821-5.055a1.403 1.403 0 00-1.188 0z"/><path d="M47.415 35.676l-2.235-1.044a1.216 1.216 0 00-1.023-.003l-7.649 3.52a1.216 1.216 0 01-1.016 0l-7.65-3.52a1.216 1.216 0 00-1.022.003l-2.235 1.044a.42.42 0 00.002.764l10.905 5.017a1.21 1.21 0 001.016 0l10.905-5.017a.42.42 0 00.002-.764z" opacity=".64"/><path d="M47.415 42.108l-2.235-1.044a1.216 1.216 0 00-1.023-.003l-7.649 3.519a1.216 1.216 0 01-1.016 0l-7.65-3.52a1.216 1.216 0 00-1.022.003l-2.235 1.045a.42.42 0 00.002.763l10.905 5.018c.322.148.694.148 1.016 0l10.905-5.018a.42.42 0 00.002-.763z"/></g></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1 @@
<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-63.9%" y="-63.9%" width="227.8%" height="227.8%" filterUnits="objectBoundingBox" id="a"><feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0862745098 0 0 0 0 0.0901960784 0 0 0 0 0.105882353 0 0 0 0.32 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#a)" fill="#FFF"><path d="M33 47c.008-7.729 6.271-13.992 14-14 .444.004.888.03 1.329.08a11.993 11.993 0 10-15.248 15.249c-.05-.441-.077-.885-.081-1.329z"/><path d="M47 35a11.92 11.92 0 00-11.844 13.844l13.688-13.688c-.61-.1-1.226-.151-1.844-.156z" opacity=".64"/></g></svg>

After

Width:  |  Height:  |  Size: 860 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 151 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 151 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 215 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 215 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 187 KiB

1
public/landing/images/logo.svg Executable file
View File

@ -0,0 +1 @@
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient cx="44.286%" cy="100%" fx="44.286%" fy="100%" r="120.709%" gradientTransform="matrix(0 -.82759 1 0 -.557 1.367)" id="a"><stop stop-color="#376DF9" offset="0%"/><stop stop-color="#D262B4" offset="46.208%"/><stop stop-color="#FF8D74" offset="77.058%"/><stop stop-color="#FFD4CA" offset="100%"/></radialGradient><radialGradient cx="44.286%" cy="0%" fx="44.286%" fy="0%" r="120.709%" gradientTransform="matrix(0 .82759 -1 0 .443 -.367)" id="c"><stop stop-color="#376DF9" offset="0%"/><stop stop-color="#D262B4" offset="46.208%"/><stop stop-color="#FF8D74" offset="77.058%"/><stop stop-color="#FFD4CA" offset="100%"/></radialGradient><path d="M20 29c8-6.915 12-12.582 12-17 0-6.627-5.373-12-12-12S8 5.373 8 12c0 4.418 4 10.085 12 17z" id="b"/><path d="M12 32c8-6.915 12-12.582 12-17 0-6.627-5.373-12-12-12S0 8.373 0 15c0 4.418 4 10.085 12 17z" id="d"/></defs><g fill="none" fill-rule="evenodd"><use fill="url(#a)" opacity=".88" xlink:href="#b"/><use fill="url(#c)" opacity=".48" transform="matrix(1 0 0 -1 0 35)" xlink:href="#d"/></g></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

View File

@ -0,0 +1 @@
<svg width="712" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="e"><stop stop-color="#FFF" stop-opacity=".32" offset="0%"/><stop stop-color="#FFF" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="77.999%" y1="9.763%" x2="24.434%" y2="90.469%" id="h"><stop stop-color="#12141D" stop-opacity=".72" offset="0%"/><stop stop-color="#12141D" offset="100%"/></linearGradient><filter x="-70%" y="-50%" width="240%" height="240%" filterUnits="objectBoundingBox" id="f"><feOffset dy="16" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="16" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0862745098 0 0 0 0 0.0901960784 0 0 0 0 0.105882353 0 0 0 0.24 0" in="shadowBlurOuter1"/></filter><filter x="-466.7%" y="-250%" width="1033.3%" height="800%" filterUnits="objectBoundingBox" id="i"><feOffset dy="16" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="16" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.062745098 0 0 0 0 0.0862745098 0 0 0 0 0.254901961 0 0 0 0.24 0" in="shadowBlurOuter1"/></filter><rect id="a" x="0" y="0" width="712" height="400" rx="2"/><rect id="b" x="0" y="0" width="712" height="400" rx="2"/><radialGradient cx="14.004%" cy="20.714%" fx="14.004%" fy="20.714%" r="204.167%" gradientTransform="matrix(.4898 .4898 -.1074 .34029 .094 .068)" id="c"><stop stop-color="#376DF9" offset="0%"/><stop stop-color="#FF5FA6" offset="61.018%"/><stop stop-color="#FFC55A" stop-opacity="0" offset="100%"/></radialGradient><circle id="g" cx="40" cy="40" r="40"/><path d="M48 40a.999.999 0 00-.427-.82l-10-7A1 1 0 0036 33v14a.999.999 0 001.573.82l10-7A.995.995 0 0048 40c0 .001 0 .001 0 0z" id="j"/></defs><g fill="none" fill-rule="evenodd"><use fill="#292B32" xlink:href="#a"/><mask id="d" fill="#fff"><use xlink:href="#b"/></mask><use fill="url(#c)" xlink:href="#b"/><g mask="url(#d)" stroke="url(#e)" stroke-width="1.5"><path d="M332.302 106c42.692 0 77.302 34.609 77.302 77.302 0 42.693-34.61 77.302-77.302 77.302-42.693 0-77.302-34.609-77.302-77.302C255 140.609 289.609 106 332.302 106z"/><path d="M336.986 109.306c42.692 0 77.302 34.609 77.302 77.302 0 42.693-34.61 77.302-77.302 77.302-42.693 0-77.302-34.61-77.302-77.302 0-42.693 34.61-77.302 77.302-77.302z"/><path d="M341.672 112.614c42.693 0 77.302 34.609 77.302 77.302 0 42.693-34.61 77.302-77.302 77.302-42.692 0-77.302-34.61-77.302-77.302 0-42.693 34.61-77.302 77.302-77.302z"/><path d="M346.356 115.92c42.693 0 77.302 34.609 77.302 77.302 0 42.693-34.61 77.302-77.302 77.302-42.692 0-77.302-34.61-77.302-77.302 0-42.693 34.61-77.302 77.302-77.302z"/><path d="M351.042 119.228c42.692 0 77.302 34.609 77.302 77.302 0 42.693-34.61 77.302-77.302 77.302-42.692 0-77.302-34.609-77.302-77.302 0-42.693 34.61-77.302 77.302-77.302z"/><path d="M355.726 122.534c42.693 0 77.302 34.609 77.302 77.302 0 42.693-34.61 77.302-77.302 77.302-42.693 0-77.302-34.61-77.302-77.302 0-42.693 34.609-77.302 77.302-77.302z"/><path d="M360.412 125.842c42.692 0 77.302 34.609 77.302 77.302 0 42.693-34.61 77.302-77.302 77.302-42.693 0-77.302-34.61-77.302-77.302 0-42.693 34.609-77.302 77.302-77.302z"/><path d="M365.096 129.148c42.693 0 77.302 34.609 77.302 77.302 0 42.693-34.609 77.302-77.302 77.302-42.693 0-77.302-34.609-77.302-77.302 0-42.693 34.609-77.302 77.302-77.302z"/><path d="M369.782 132.456c42.692 0 77.302 34.61 77.302 77.302 0 42.693-34.61 77.302-77.302 77.302-42.693 0-77.302-34.609-77.302-77.302 0-42.693 34.609-77.302 77.302-77.302z"/><path d="M374.466 135.762c42.693 0 77.302 34.609 77.302 77.302 0 42.693-34.609 77.302-77.302 77.302-42.693 0-77.302-34.61-77.302-77.302 0-42.693 34.61-77.302 77.302-77.302z"/><path d="M379.152 139.07c42.692 0 77.302 34.609 77.302 77.302 0 42.693-34.61 77.302-77.302 77.302-42.693 0-77.302-34.61-77.302-77.302 0-42.693 34.61-77.302 77.302-77.302z"/></g><g transform="translate(316 160)"><use fill="#000" filter="url(#f)" xlink:href="#g"/><use fill="url(#h)" xlink:href="#g"/></g><g transform="translate(316 160)"><use fill="#000" filter="url(#i)" xlink:href="#j"/><use fill="#6991FA" xlink:href="#j"/></g></g></svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

26
public/landing/js/accordion.js Executable file
View File

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

171
public/landing/js/carousel.js Executable file
View File

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

9
public/landing/js/main.js Executable file
View File

@ -0,0 +1,9 @@
;(function () {
'use strict'
document.documentElement.classList.remove('no-js')
document.documentElement.classList.add('js')
window.addEventListener('load', function () {
document.body.classList.add('is-loaded')
})
}())

1
public/landing/js/main.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

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

56
public/landing/js/modal.js Executable file
View File

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

View File

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

View File

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

View File

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

327
public/landing/landing.html Executable file
View File

@ -0,0 +1,327 @@
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Neon Chat</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body class="has-animations">
<div class="body-wrap">
<header class="site-header reveal-from-top">
<div class="container">
<div class="site-header-inner">
<div class="brand"><h1 class="m-0"><a href="landing.html"><img src="images/logo.svg" alt="Neon"
width="32"
height="32"></a></h1></div>
<button id="header-nav-toggle" class="header-nav-toggle" aria-controls="primary-menu"
aria-expanded="false"><span class="screen-reader">Menu</span> <span class="hamburger"><span
class="hamburger-inner"></span></span></button>
<!-- <nav id="header-nav" class="header-nav">-->
<!-- <div class="header-nav-inner">-->
<!-- <ul class="list-reset text-xxs header-nav-right">-->
<!-- <li><a href="additional.html">Secondary page</a></li>-->
<!-- </ul>-->
<!-- <ul class="list-reset header-nav-right">-->
<!-- <li><a class="button button-primary button-sm" href="signup.html">Sign up</a></li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </nav>-->
</div>
</div>
</header>
<main class="site-content">
<section class="hero section illustration-section-01">
<div class="container">
<div class="hero-inner section-inner">
<div class="split-wrap invert-mobile">
<div class="split-item">
<div class="hero-content split-item-content center-content-mobile"><h1
class="mt-0 mb-16 reveal-from-bottom" data-reveal-delay="150">The most advanced
video chat ever created.</h1>
<p class="mt-0 mb-32 reveal-from-bottom" data-reveal-delay="300">Decentralized video
calling provides real-time HD quality and latency simply
not available with traditional technology.</p>
<div class="reveal-from-bottom" data-reveal-delay="450"><a
class="button button-primary button-wide-mobile" href="/">Try now</a>
</div>
</div>
<style>@media (min-width: 641px) {
.hero .split-wrap .split-item {
min-height: 492px
}
}</style>
</div>
</div>
</div>
</div>
</section>
<div>
<!-- <section class="clients section reveal-fade">-->
<!-- <div class="container">-->
<!-- <div class="clients-inner section-inner has-top-divider has-bottom-divider">-->
<!-- <ul class="list-reset">-->
<!-- <li class="reveal-from-top"><img src="images/clients-01.svg" alt="Clients 01"></li>-->
<!-- <li class="reveal-from-bottom" data-reveal-delay="150"><img src="images/clients-02.svg"-->
<!-- alt="Clients 02"></li>-->
<!-- <li class="reveal-from-top" data-reveal-delay="300"><img src="images/clients-03.svg"-->
<!-- alt="Clients 03"></li>-->
<!-- <li class="reveal-from-bottom" data-reveal-delay="450"><img src="images/clients-04.svg"-->
<!-- alt="Clients 04"></li>-->
<!-- <li class="reveal-from-top" data-reveal-delay="600"><img src="images/clients-05.svg"-->
<!-- alt="Clients 05"></li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
<!-- Video-->
<!-- <section class="section center-content">-->
<!-- <div class="container">-->
<!-- <div class="section-inner">-->
<!-- <div class="section-header reveal-from-bottom">-->
<!-- <div class="container-xs"><h2 class="mt-0 mb-16">Built exclusively for you</h2>-->
<!-- <p class="m-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore-->
<!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa-->
<!-- qui.</p></div>-->
<!-- </div>-->
<!-- <div class="reveal-from-bottom"><a class="modal-trigger" aria-controls="modal-01"-->
<!-- data-video="https://player.vimeo.com/video/174002812"-->
<!-- href="#"><img src="images/video-placeholder.svg" alt="Video"-->
<!-- width="712" height="400"></a></div>-->
<!-- <div id="modal-01" class="modal modal-video">-->
<!-- <div class="modal-inner">-->
<!-- <div class="responsive-video">-->
<!-- <iframe src="#" frameborder="0" webkitallowfullscreen mozallowfullscreen-->
<!-- allowfullscreen></iframe>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
<!-- End Video-->
</div>
<section class="features-tiles section center-content">
<div class="container">
<div class="features-tiles-inner section-inner has-top-divider">
<div class="section-header">
<div class="container-xs"><h2 class="mt-0 mb-16">Build up the whole picture</h2>
<p class="m-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa
qui.</p></div>
</div>
<div class="tiles-wrap">
<div class="tiles-item reveal-from-right">
<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">Generate Leads</h4>
<p class="m-0 text-sm">Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat.</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">Generate Leads</h4>
<p class="m-0 text-sm">Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat.</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">Generate Leads</h4>
<p class="m-0 text-sm">Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat.</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">Generate Leads</h4>
<p class="m-0 text-sm">Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat.</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">Generate Leads</h4>
<p class="m-0 text-sm">Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat.</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">Generate Leads</h4>
<p class="m-0 text-sm">Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat.</p></div>
</div>
</div>
</div>
</div>
<a class="button button-primary button-wide-mobile" href="/">Try now</a>
</div>
</section>
<div>
<!-- <section class="testimonial section">-->
<!-- <div class="container">-->
<!-- <div class="testimonial-inner section-inner has-top-divider">-->
<!-- <div class="section-header center-content">-->
<!-- <div class="container-xs"><h2 class="mt-0 mb-16">Don't take our word for it</h2>-->
<!-- <p class="m-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore-->
<!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa-->
<!-- qui.</p></div>-->
<!-- </div>-->
<!-- <div class="tiles-wrap">-->
<!-- <div class="tiles-item reveal-from-right" data-reveal-delay="200">-->
<!-- <div class="tiles-item-inner">-->
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
<!-- class="testimonial-item-name text-color-high">Roman Level</span> <span-->
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="tiles-item reveal-from-bottom">-->
<!-- <div class="tiles-item-inner">-->
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
<!-- class="testimonial-item-name text-color-high">Diana Rynzhuk</span> <span-->
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="tiles-item reveal-from-left" data-reveal-delay="200">-->
<!-- <div class="tiles-item-inner">-->
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
<!-- class="testimonial-item-name text-color-high">Ben Stafford</span> <span-->
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
<!-- <section class="cta section center-content-mobile reveal-from-bottom">-->
<!-- <div class="container">-->
<!-- <div class="cta-inner section-inner cta-split">-->
<!-- <div class="cta-slogan"><h3 class="m-0">For previewing layouts and visual?</h3></div>-->
<!-- <div class="cta-action">-->
<!-- <div class="has-icon-right"><label for="newsletter"-->
<!-- class="form-label screen-reader">Subscribe</label> <input-->
<!-- id="newsletter" class="form-input" type="email" placeholder="Your best email">-->
<!-- <svg width="16" height="12" xmlns="http://www.w3.org/2000/svg">-->
<!-- <path d="M9 5H1c-.6 0-1 .4-1 1s.4 1 1 1h8v5l7-6-7-6v5z" fill="#376DF9"-->
<!-- fill-rule="nonzero"/>-->
<!-- </svg>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
</div>
</main>
<footer class="site-footer center-content-mobile">
<div class="container">
<div class="site-footer-inner">
<div class="footer-top space-between text-xxs">
<div class="brand"><a href="landing.html"><img src="images/logo.svg" alt="Neon" width="32"
height="32"></a>
</div>
<!-- <div class="footer-social">-->
<!-- <ul class="list-reset">-->
<!-- <li><a href="#">-->
<!-- <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">-->
<!-- <title>Facebook</title>-->
<!-- <path d="M6.023 16L6 9H3V6h3V4c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V6H13l-1 3H9.28v7H6.023z"/>-->
<!-- </svg>-->
<!-- </a></li>-->
<!-- <li><a href="#">-->
<!-- <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">-->
<!-- <title>Twitter</title>-->
<!-- <path d="M16 3c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4C.7 7.7 1.8 9 3.3 9.3c-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4C15 4.3 15.6 3.7 16 3z"/>-->
<!-- </svg>-->
<!-- </a></li>-->
<!-- <li><a href="#">-->
<!-- <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">-->
<!-- <title>Instagram</title>-->
<!-- <g>-->
<!-- <circle cx="12.145" cy="3.892" r="1"/>-->
<!-- <path d="M8 12c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4zm0-6c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z"/>-->
<!-- <path d="M12 16H4c-2.056 0-4-1.944-4-4V4c0-2.056 1.944-4 4-4h8c2.056 0 4 1.944 4 4v8c0 2.056-1.944 4-4 4zM4 2c-.935 0-2 1.065-2 2v8c0 .953 1.047 2 2 2h8c.935 0 2-1.065 2-2V4c0-.935-1.065-2-2-2H4z"/>-->
<!-- </g>-->
<!-- </svg>-->
<!-- </a></li>-->
<!-- </ul>-->
<!-- </div>-->
</div>
<div class="footer-bottom space-between text-xxs invert-order-desktop">
<nav class="footer-nav">
<ul class="list-reset">
<li><a href="https://ianramzy.com">Another Project 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>
</footer>
</div>
<script src="js/main.min.js"></script>
</body>
</html>

View File

@ -0,0 +1,559 @@
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Neon Template</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body class="has-animations">
<div class="body-wrap">
<header class="site-header">
<div class="container">
<div class="site-header-inner">
<div class="brand"><h1 class="m-0"><a href="../landing.html"><img src="../images/logo.svg" alt="Neon" width="32"
height="32"></a></h1></div>
<button id="header-nav-toggle" class="header-nav-toggle" aria-controls="primary-menu"
aria-expanded="false"><span class="screen-reader">Menu</span> <span class="hamburger"><span
class="hamburger-inner"></span></span></button>
<nav id="header-nav" class="header-nav">
<div class="header-nav-inner">
<ul class="list-reset text-xxs header-nav-right">
<li><a href="additional.html">Secondary page</a></li>
</ul>
<ul class="list-reset header-nav-right">
<li><a class="button button-primary button-sm" href="signup.html">Sign up</a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<main class="site-content">
<section class="pricing section illustration-section-02">
<div class="container">
<div class="pricing-inner section-inner">
<div class="section-header center-content reveal-from-bottom">
<div class="container-xs"><h1 class="m-0">Engage Your Visitors with a beautiful template</h1>
</div>
</div>
<div class="pricing-switcher center-content reveal-from-top"><label class="form-switch"><input
id="pricing-toggle" type="checkbox" name="pricing-toggle" checked="checked"> <span
class="form-switch-icon"></span> <span>Billed Monthly</span>
<span>Billed Annually</span></label></div>
<div class="tiles-wrap">
<div class="tiles-item reveal-from-right" data-reveal-delay="400">
<div class="tiles-item-inner">
<div class="pricing-item-content">
<div class="pricing-item-header pb-24 mb-24">
<div class="pricing-item-price mb-4"><span
class="pricing-item-price-currency h3">$</span><span
class="pricing-item-price-amount h1 pricing-switchable"
data-pricing-monthly="34" data-pricing-yearly="27">27</span><span
class="text-sm">/m</span></div>
<div class="text-xs text-color-low">Lorem ipsum is a common text</div>
</div>
<div class="pricing-item-features mb-40">
<div class="pricing-item-features-title h6 text-xs text-color-high mb-24">Whats
included
</div>
<ul class="pricing-item-features-list list-reset text-xs mb-32">
<li class="is-checked">Excepteur sint occaecat velit</li>
<li class="is-checked">Excepteur sint occaecat velit</li>
<li class="is-checked">Excepteur sint occaecat velit</li>
<li>Excepteur sint occaecat velit</li>
<li>Excepteur sint occaecat velit</li>
</ul>
</div>
</div>
<div class="pricing-item-cta mb-8"><a class="button button-primary button-block"
href="#">Start free trial</a></div>
</div>
</div>
<div class="tiles-item reveal-from-bottom" data-reveal-delay="200">
<div class="tiles-item-inner">
<div class="pricing-item-content">
<div class="pricing-item-header pb-24 mb-24">
<div class="pricing-item-price mb-4"><span
class="pricing-item-price-currency h3">$</span><span
class="pricing-item-price-amount h1 pricing-switchable"
data-pricing-monthly="54" data-pricing-yearly="47">47</span><span
class="text-sm">/m</span></div>
<div class="text-xs text-color-low">Lorem ipsum is a common text</div>
</div>
<div class="pricing-item-features mb-40">
<div class="pricing-item-features-title h6 text-xs text-color-high mb-24">Whats
included
</div>
<ul class="pricing-item-features-list list-reset text-xs mb-32">
<li class="is-checked">Excepteur sint occaecat velit</li>
<li class="is-checked">Excepteur sint occaecat velit</li>
<li class="is-checked">Excepteur sint occaecat velit</li>
<li class="is-checked">Excepteur sint occaecat velit</li>
<li>Excepteur sint occaecat velit</li>
</ul>
</div>
</div>
<div class="pricing-item-cta mb-8"><a class="button button-primary button-block"
href="#">Start free trial</a></div>
</div>
</div>
<div class="tiles-item reveal-from-left" data-reveal-delay="400">
<div class="tiles-item-inner">
<div class="pricing-item-content">
<div class="pricing-item-header pb-24 mb-24">
<div class="pricing-item-price mb-4"><span
class="pricing-item-price-currency h3">$</span><span
class="pricing-item-price-amount h1 pricing-switchable"
data-pricing-monthly="74" data-pricing-yearly="67">67</span><span
class="text-sm">/m</span></div>
<div class="text-xs text-color-low">Lorem ipsum is a common text</div>
</div>
<div class="pricing-item-features mb-40">
<div class="pricing-item-features-title h6 text-xs text-color-high mb-24">Whats
included
</div>
<ul class="pricing-item-features-list list-reset text-xs mb-32">
<li class="is-checked">Excepteur sint occaecat velit</li>
<li class="is-checked">Excepteur sint occaecat velit</li>
<li class="is-checked">Excepteur sint occaecat velit</li>
<li class="is-checked">Excepteur sint occaecat velit</li>
<li class="is-checked">Excepteur sint occaecat velit</li>
</ul>
</div>
</div>
<div class="pricing-item-cta mb-8"><a class="button button-primary button-block"
href="#">Start free trial</a></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="team section center-content">
<div class="container">
<div class="team-inner section-inner has-top-divider">
<div class="section-header center-content reveal-from-bottom">
<div class="container-xs"><h2 class="mt-0 mb-16">Meet the team - Lorem ipsum is placeholder
text.</h2>
<p class="m-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa
qui.</p></div>
</div>
<div class="tiles-wrap">
<div class="tiles-item reveal-from-bottom">
<div class="tiles-item-inner">
<div class="team-item-header">
<div class="team-item-image mb-24"><img src="../images/team-member-01.jpg"
alt="Team member 01" width="180"
height="180"></div>
</div>
<div class="team-item-content"><h5 class="team-item-name mt-0 mb-4">Markus Hasinika</h5>
<div class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8">Founder &
CEO
</div>
<p class="m-0 text-sm">Magnis dis parturient montes nascetur. Quam quisque id diam
vel quam ultricies leo integer.</p></div>
</div>
</div>
<div class="tiles-item reveal-from-bottom" data-reveal-delay="200">
<div class="tiles-item-inner">
<div class="team-item-header">
<div class="team-item-image mb-24"><img src="../images/team-member-02.jpg"
alt="Team member 02" width="180"
height="180"></div>
</div>
<div class="team-item-content"><h5 class="team-item-name mt-0 mb-4">Diana Stafford</h5>
<div class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8">Founder &
CEO
</div>
<p class="m-0 text-sm">Magnis dis parturient montes nascetur. Quam quisque id diam
vel quam ultricies leo integer.</p></div>
</div>
</div>
<div class="tiles-item reveal-from-bottom" data-reveal-delay="400">
<div class="tiles-item-inner">
<div class="team-item-header">
<div class="team-item-image mb-24"><img src="../images/team-member-03.jpg"
alt="Team member 03" width="180"
height="180"></div>
</div>
<div class="team-item-content"><h5 class="team-item-name mt-0 mb-4">Patricia
Collins</h5>
<div class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8">Founder &
CEO
</div>
<p class="m-0 text-sm">Magnis dis parturient montes nascetur. Quam quisque id diam
vel quam ultricies leo integer.</p></div>
</div>
</div>
<div class="tiles-item reveal-from-bottom">
<div class="tiles-item-inner">
<div class="team-item-header">
<div class="team-item-image mb-24"><img src="../images/team-member-04.jpg"
alt="Team member 04" width="180"
height="180"></div>
</div>
<div class="team-item-content"><h5 class="team-item-name mt-0 mb-4">Anton Klenkov</h5>
<div class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8">Founder &
CEO
</div>
<p class="m-0 text-sm">Magnis dis parturient montes nascetur. Quam quisque id diam
vel quam ultricies leo integer.</p></div>
</div>
</div>
<div class="tiles-item reveal-from-bottom" data-reveal-delay="200">
<div class="tiles-item-inner">
<div class="team-item-header">
<div class="team-item-image mb-24"><img src="../images/team-member-05.jpg"
alt="Team member 05" width="180"
height="180"></div>
</div>
<div class="team-item-content"><h5 class="team-item-name mt-0 mb-4">Nick Kornilov</h5>
<div class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8">Founder &
CEO
</div>
<p class="m-0 text-sm">Magnis dis parturient montes nascetur. Quam quisque id diam
vel quam ultricies leo integer.</p></div>
</div>
</div>
<div class="tiles-item reveal-from-bottom" data-reveal-delay="400">
<div class="tiles-item-inner">
<div class="team-item-header">
<div class="team-item-image mb-24"><img src="../images/team-member-06.jpg"
alt="Team member 01" width="180"
height="180"></div>
</div>
<div class="team-item-content"><h5 class="team-item-name mt-0 mb-4">Andrea Engler</h5>
<div class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8">Founder &
CEO
</div>
<p class="m-0 text-sm">Magnis dis parturient montes nascetur. Quam quisque id diam
vel quam ultricies leo integer.</p></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="features-split section">
<div class="container">
<div class="features-split-inner section-inner has-top-divider">
<div class="section-header center-content">
<div class="container-xs"><h2 class="mt-0 mb-16">Features - Lorem ipsum is placeholder
text.</h2>
<p class="m-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa
qui.</p></div>
</div>
<div class="split-wrap invert-mobile">
<div class="split-item">
<div class="split-item-content center-content-mobile reveal-from-right"
data-reveal-container=".split-item"><h3 class="mt-0 mb-12">Data-driven insights</h3>
<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua — Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="split-item-image split-item-image-fill reveal-from-left"
data-reveal-container=".split-item"><img src="../images/features-split-image-01.svg"
alt="Features split image 01" width="528"
height="396"></div>
</div>
<div class="split-item">
<div class="split-item-content center-content-mobile reveal-from-left"
data-reveal-container=".split-item"><h3 class="mt-0 mb-12">Data-driven insights</h3>
<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua — Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="split-item-image split-item-image-fill reveal-from-right"
data-reveal-container=".split-item"><img src="../images/features-split-image-02.svg"
alt="Features split image 02" width="528"
height="396"></div>
</div>
<div class="split-item">
<div class="split-item-content center-content-mobile reveal-from-right"
data-reveal-container=".split-item"><h3 class="mt-0 mb-12">Data-driven insights</h3>
<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua — Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="split-item-image split-item-image-fill reveal-from-left"
data-reveal-container=".split-item"><img src="../images/features-split-image-01.svg"
alt="Features split image 03" width="528"
height="396"></div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-inner has-top-divider">
<div class="container-xs"><h2 class="mt-0">Lorem ipsum is placeholder text commonly used in the
graphic.</h2>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<figure><img class="image-larger" src="../images/image-placeholder.svg" alt="Image placeholder"
width="712" height="400">
<figcaption class="text-color-low">A super-nice image <span role="img"
aria-label="smile">😀</span>
</figcaption>
</figure>
<h4>Flexibility</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur.</li>
<li>Lorem ipsum dolor sit amet, consectetur.</li>
<li>Lorem ipsum dolor sit amet, consectetur.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris.</p></div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-inner has-top-divider">
<div class="container-xs">
<div class="section-header center-content"><h2 class="m-0">Modal - Lorem ipsum is placeholder
text commonly used.</h2></div>
<div class="center-content"><a class="button button-primary modal-trigger"
aria-controls="modal-01" href="#">Open modal</a></div>
<div id="modal-01" class="modal">
<div class="modal-inner">
<button class="modal-close modal-close-trigger" aria-label="close"></button>
<div class="modal-content">
<div class="center-content"><h3 class="mt-16 mb-12">Join our newsletter</h3>
<p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod.</p></div>
<form style="max-width:320px;margin:0 auto">
<div class="mb-12"><input class="form-input" type="email" id="modal-input"
placeholder="Your best email"></div>
<button class="button button-primary button-block">Subscribe</button>
</form>
<div class="center-content mt-24"><a
class="text-xxs fw-500 tt-u modal-close-trigger" aria-label="close"
href="#0">No thanks!</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section center-content">
<div class="container">
<div class="section-inner has-top-divider">
<div class="container-xs">
<div class="section-header"><h2 class="m-0">Buttons - Lorem ipsum is placeholder text commonly
used.</h2></div>
<div class="button-group"><a class="button button-primary button-wide-mobile" href="#">Get
started now</a> <a class="button button-secondary button-wide-mobile" href="#">Get started
now</a></div>
<div class="button-group"><a class="button button-dark button-wide-mobile" href="#">Get started
now</a> <a class="button button-wide-mobile" href="#">Get started now</a></div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-inner has-top-divider">
<div class="container-xs">
<div class="section-header center-content"><h2 class="m-0">Input forms - Lorem ipsum is
placeholder text commonly used.</h2></div>
<form style="max-width:420px;margin:0 auto">
<div class="mb-24"><label class="form-label screen-reader" for="input-01">This is a
label</label>
<div class="form-group-desktop"><input class="form-input" type="email" id="input-01"
placeholder="Your best email">
<button class="button button-primary">Early access</button>
</div>
</div>
<div class="mb-24"><label class="form-label screen-reader" for="input-02">This is a
label</label>
<div class="form-group-desktop"><input class="form-input" type="email" id="input-02"
placeholder="Your best email"
value="hello@cruip.com">
<button class="button button-primary is-loading">Early access</button>
</div>
</div>
<div class="mb-24"><label class="form-label screen-reader" for="input-03">This is a
label</label>
<div class="form-group-desktop"><input class="form-input form-error" type="email"
id="input-03" placeholder="Your best email">
<button class="button button-primary">Early access</button>
</div>
<div class="form-hint text-color-error">Something is wrong.</div>
</div>
<div class="mb-24"><label class="form-label screen-reader" for="input-04">This is a
label</label>
<div class="form-group-desktop"><input class="form-input form-success" type="email"
id="input-04" placeholder="Your best email">
<button class="button button-primary">Early access</button>
</div>
<div class="form-hint text-color-success">Youve done it.</div>
</div>
</form>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-inner has-top-divider">
<div class="container-xs">
<div class="section-header center-content"><h2 class="m-0">FAQ - Lorem ipsum is placeholder text
commonly used.</h2></div>
<ul class="accordion list-reset mb-0">
<li class="is-active">
<div class="accordion-header text-sm"><span class="h6 m-0">Nisi porta lorem mollis aliquam ut.</span>
<div class="accordion-icon"></div>
</div>
<div class="accordion-content text-xs"><p>Lorem ipsum is placeholder text commonly used
in the graphic, print, and publishing industries for previewing layouts and visual
mockups.</p></div>
</li>
<li>
<div class="accordion-header text-sm"><span class="h6 m-0">Nisi porta lorem mollis aliquam ut.</span>
<div class="accordion-icon"></div>
</div>
<div class="accordion-content text-xs"><p>Lorem ipsum is placeholder text commonly used
in the graphic, print, and publishing industries for previewing layouts and visual
mockups.</p></div>
</li>
<li>
<div class="accordion-header text-sm"><span class="h6 m-0">Nisi porta lorem mollis aliquam ut.</span>
<div class="accordion-icon"></div>
</div>
<div class="accordion-content text-xs"><p>Lorem ipsum is placeholder text commonly used
in the graphic, print, and publishing industries for previewing layouts and visual
mockups.</p></div>
</li>
<li>
<div class="accordion-header text-sm"><span class="h6 m-0">Nisi porta lorem mollis aliquam ut.</span>
<div class="accordion-icon"></div>
</div>
<div class="accordion-content text-xs"><p>Lorem ipsum is placeholder text commonly used
in the graphic, print, and publishing industries for previewing layouts and visual
mockups.</p></div>
</li>
<li>
<div class="accordion-header text-sm"><span class="h6 m-0">Nisi porta lorem mollis aliquam ut.</span>
<div class="accordion-icon"></div>
</div>
<div class="accordion-content text-xs"><p>Lorem ipsum is placeholder text commonly used
in the graphic, print, and publishing industries for previewing layouts and visual
mockups.</p></div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="cta section center-content-mobile reveal-from-bottom">
<div class="container">
<div class="cta-inner section-inner cta-split">
<div class="cta-slogan"><h3 class="m-0">For previewing layouts and visual?</h3></div>
<div class="cta-action">
<div class="has-icon-right"><label for="newsletter"
class="form-label screen-reader">Subscribe</label> <input
id="newsletter" class="form-input" type="text" placeholder="Username">
<svg width="16" height="12" xmlns="http://www.w3.org/2000/svg">
<path d="M9 5H1c-.6 0-1 .4-1 1s.4 1 1 1h8v5l7-6-7-6v5z" fill="#376DF9"
fill-rule="nonzero"/>
</svg>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="site-footer-inner has-top-divider">
<div class="footer-top text-xxs">
<div class="footer-blocks">
<div class="footer-block">
<div class="brand mb-16"><a href="../landing.html"><img src="../images/logo.svg" alt="Neon"
width="32" height="32"></a></div>
<div class="footer-copyright">&copy; 2019 Neon, all rights reserved</div>
</div>
<div class="footer-block">
<div class="footer-block-title">Company</div>
<ul class="list-reset mb-0">
<li><a href="#">Dummy text used</a></li>
<li><a href="#">The purpose of lorem</a></li>
<li><a href="#">Filler text can be very useful</a></li>
<li><a href="#">Be on design</a></li>
</ul>
</div>
<div class="footer-block">
<div class="footer-block-title">Uses cases</div>
<ul class="list-reset mb-0">
<li><a href="#">Consectetur adipiscing</a></li>
<li><a href="#">Lorem Ipsum is place</a></li>
<li><a href="#">Excepteur sint</a></li>
<li><a href="#">Occaecat cupidatat</a></li>
</ul>
</div>
<div class="footer-block">
<div class="footer-block-title">Docs</div>
<ul class="list-reset mb-0">
<li><a href="#">The purpose of lorem</a></li>
<li><a href="#">Dummy text used</a></li>
<li><a href="#">Excepteur sint</a></li>
<li><a href="#">Occaecat cupidatat</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom space-between center-content-mobile text-xxs">
<nav class="footer-nav">
<ul class="list-reset mb-0">
<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-social">
<ul class="list-reset">
<li><a href="#">
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<title>LinkedIn</title>
<path d="M15.3 0H.7C.3 0 0 .3 0 .7v14.7c0 .3.3.6.7.6h14.7c.4 0 .7-.3.7-.7V.7c-.1-.4-.4-.7-.8-.7zM4.7 13.6H2.4V6h2.4v7.6h-.1zM3.6 5c-.8 0-1.4-.7-1.4-1.4 0-.8.6-1.4 1.4-1.4.8 0 1.4.6 1.4 1.4-.1.7-.7 1.4-1.4 1.4zm10 8.6h-2.4V9.9c0-.9 0-2-1.2-2s-1.4 1-1.4 2v3.8H6.2V6h2.3v1c.3-.6 1.1-1.2 2.2-1.2 2.4 0 2.8 1.6 2.8 3.6v4.2h.1z"/>
</svg>
</a></li>
<li><a href="#">
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<title>Pinterest</title>
<path d="M8 0C3.6 0 0 3.6 0 8c0 3.4 2.1 6.3 5.1 7.4-.1-.6-.1-1.6 0-2.3.1-.6.9-4 .9-4s-.2-.4-.2-1.1c0-1.1.7-2 1.5-2 .7 0 1 .5 1 1.1 0 .7-.4 1.7-.7 2.7-.2.8.4 1.4 1.2 1.4 1.4 0 2.5-1.5 2.5-3.7 0-1.9-1.4-3.3-3.3-3.3-2.3 0-3.6 1.7-3.6 3.5 0 .7.3 1.4.6 1.8v.4c-.1.3-.2.8-.2.9 0 .1-.1.2-.3.1-1-.5-1.6-1.9-1.6-3.1C2.9 5.3 4.7 3 8.2 3c2.8 0 4.9 2 4.9 4.6 0 2.8-1.7 5-4.2 5-.8 0-1.6-.4-1.8-.9 0 0-.4 1.5-.5 1.9-.2.7-.7 1.6-1 2.1.8.2 1.6.3 2.4.3 4.4 0 8-3.6 8-8s-3.6-8-8-8z"/>
</svg>
</a></li>
<li><a href="#">
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<title>GitHub</title>
<path d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"/>
</svg>
</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</div>
<script src="../js/main.min.js"></script>
</body>
</html>

62
public/landing/later/login.html Executable file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Neon Template</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="body-wrap">
<header class="site-header">
<div class="container">
<div class="site-header-inner">
<div class="brand"><h1 class="m-0"><a href="../landing.html"><img src="../images/logo.svg" alt="Neon" width="32"
height="32"></a></h1></div>
</div>
</div>
</header>
<main class="site-content">
<section class="signin section illustration-section-01">
<div class="container-xs">
<div class="signin-inner section-inner">
<div class="section-header center-content"><h1 class="m-0">Welcome back. We exist to make
entrepreneurship easier.</h1></div>
<div class="tiles-wrap">
<div class="tiles-item">
<div class="tiles-item-inner">
<form>
<fieldset>
<div class="mb-12"><label class="form-label screen-reader"
for="email">Email</label> <input id="email"
class="form-input"
type="email"
placeholder="Email"
required></div>
<div class="mb-12"><label class="form-label screen-reader" for="password">Password</label>
<input id="password" class="form-input" type="password"
placeholder="Password" required></div>
<div class="mt-24 mb-32">
<button class="button button-primary button-block">Sign in</button>
</div>
<div class="signin-footer mb-32"><label class="form-checkbox"><input
type="checkbox" id="remember">Remember me</label> <a
class="func-link text-xs" href="#">Forgot password?</a></div>
</fieldset>
</form>
<div class="signin-bottom has-top-divider">
<div class="pt-32 text-xs center-content text-color-low">Don't you have an account?
<a class="func-link" href="signup.html">Sign up</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
<script src="../js/main.min.js"></script>
</body>
</html>

View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Neon Template</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="body-wrap">
<header class="site-header">
<div class="container">
<div class="site-header-inner">
<div class="brand"><h1 class="m-0"><a href="../landing.html"><img src="../images/logo.svg" alt="Neon" width="32"
height="32"></a></h1></div>
</div>
</div>
</header>
<main class="site-content">
<section class="signin section illustration-section-01">
<div class="container-xs">
<div class="signin-inner section-inner">
<div class="section-header center-content"><h1 class="m-0">Welcome. We exist to make
entrepreneurship easier.</h1></div>
<div class="tiles-wrap">
<div class="tiles-item">
<div class="tiles-item-inner">
<form>
<fieldset>
<div class="mb-12"><label class="form-label screen-reader" for="name">Full
name</label> <input id="name" class="form-input" type="name"
placeholder="Full name" required></div>
<div class="mb-12"><label class="form-label screen-reader"
for="email">Email</label> <input id="email"
class="form-input"
type="email"
placeholder="Email"
required></div>
<div class="mb-12"><label class="form-label screen-reader" for="password">Password</label>
<input id="password" class="form-input" type="password"
placeholder="Password" required></div>
<div class="mt-24 mb-32">
<button class="button button-primary button-block">Sign up</button>
</div>
</fieldset>
</form>
<div class="signin-bottom has-top-divider">
<div class="pt-32 text-xs center-content text-color-low">Already have an account? <a
class="func-link" href="login.html">Login</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
<script src="../js/main.min.js"></script>
</body>
</html>

View File

@ -1,12 +0,0 @@
/*html, body {*/
/* width: 100%;*/
/* height: 100%;*/
/* margin: 0;*/
/* padding: 0;*/
/* background-color: #DCECFE;*/
/* background: -webkit-linear-gradient(-450deg, transparent, rgba(0, 0, 0, 0.05)) repeat-y, -webkit-linear-gradient(-450deg, transparent, rgba(0, 0, 0, 0.05)) repeat-y, -webkit-linear-gradient(-450deg, transparent, rgba(0, 0, 0, 0.05)) repeat-y, -webkit-linear-gradient(-450deg, transparent, rgba(0, 0, 0, 0.05)) repeat-y, -webkit-linear-gradient(-450deg, transparent, rgba(0, 0, 0, 0.05)) repeat-y, -webkit-linear-gradient(-390deg, #DCECFE 0%, #F5E1EE 100%) no-repeat;*/
/* background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.05)) repeat-y, linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.05)) repeat-y, linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.05)) repeat-y, linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.05)) repeat-y, linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.05)) repeat-y, linear-gradient(120deg, #DCECFE 0%, #F5E1EE 100%) no-repeat;*/
/* background-position: 10%, 30%, 50%, 70%, 90%, 0;*/
/* background-size: 2px auto, 2px auto, 2px auto, 2px auto, 2px auto, 100% auto;*/
/* background-attachment: fixed;*/
/*}*/

View File

@ -15,7 +15,7 @@ app.get('/', function (req, res) {
});
app.get('/landing', function (req, res) {
res.sendFile(path.join(public, 'landing.html'));
res.sendFile(path.join(public, 'landing/landing.html'));
});
function log(msg, room) {