added neon landing page
This commit is contained in:
Ian Ramzy
parent
4ac088ad94
commit
7b3a3e9dd4
|
|
@ -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": "",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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)
|
||||
})
|
||||
}
|
||||
}
|
||||
}())
|
||||
|
|
@ -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)
|
||||
})
|
||||
}
|
||||
}
|
||||
}())
|
||||
|
|
@ -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')
|
||||
})
|
||||
}())
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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')
|
||||
}
|
||||
})
|
||||
}
|
||||
}())
|
||||
|
|
@ -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()
|
||||
}
|
||||
})
|
||||
}())
|
||||
|
|
@ -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')
|
||||
}
|
||||
}
|
||||
}
|
||||
}())
|
||||
|
|
@ -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)
|
||||
}
|
||||
}())
|
||||
|
|
@ -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)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}())
|
||||
|
|
@ -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">© 2020 Neon Chat, all rights reserved</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/main.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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">What’s
|
||||
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">What’s
|
||||
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">What’s
|
||||
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">You’ve 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">© 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;*/
|
||||
/*}*/
|
||||
|
|
@ -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) {
|
||||
Loading…
Reference in New Issue