Main upload
This commit is contained in:
Sorata-Senpai
commit
85bf4efce7
497
assets/css/style.css
Normal file
497
assets/css/style.css
Normal file
@ -0,0 +1,497 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Source+Sans+Pro:wght@400;700&display=swap");
|
||||
h1,
|
||||
.headline-1,
|
||||
.heading-1 {
|
||||
font-size: 6rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.015625em;
|
||||
line-height: 6rem;
|
||||
}
|
||||
|
||||
h2,
|
||||
.headline-2,
|
||||
.heading-2 {
|
||||
font-size: 3.75rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.0083333333em;
|
||||
line-height: 3.75rem;
|
||||
}
|
||||
|
||||
h3,
|
||||
.headline-3,
|
||||
.heading-3 {
|
||||
font-size: 3rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
line-height: 3.125rem;
|
||||
}
|
||||
|
||||
h4,
|
||||
.headline-4,
|
||||
.heading-4 {
|
||||
font-size: 2.125rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.0073529412em;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
h5,
|
||||
.headline-5,
|
||||
.heading-5 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
h6,
|
||||
.headline-6,
|
||||
.heading-6 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.125em;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.subtitle-1 {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.009375em;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.subtitle-2 {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.0071428571em;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
|
||||
.body-1 {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.03125em;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.body-2 {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.0178571429em;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.0892857143em;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.0333333333em;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.overline {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1666666667em;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
aki-button,
|
||||
*[aki-button],
|
||||
*.aki-button {
|
||||
background-color: #ffc107;
|
||||
border: none;
|
||||
border-radius: 0.125rem;
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
}
|
||||
aki-button:hover:not(:active),
|
||||
*[aki-button]:hover:not(:active),
|
||||
*.aki-button:hover:not(:active) {
|
||||
filter: invert(0.15);
|
||||
}
|
||||
aki-button:active,
|
||||
*[aki-button]:active,
|
||||
*.aki-button:active {
|
||||
background: #121212;
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
aki-card,
|
||||
*.aki-card,
|
||||
*[aki-card] {
|
||||
background: #121212;
|
||||
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
border-radius: 0.125rem;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 0.0178571429em;
|
||||
line-height: 1.25rem;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
max-width: calc(25rem - 3rem);
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
aki-card aki-card-title *.aki-card-title,
|
||||
aki-card *[aki-card-title],
|
||||
*.aki-card aki-card-title *.aki-card-title,
|
||||
*.aki-card *[aki-card-title],
|
||||
*[aki-card] aki-card-title *.aki-card-title,
|
||||
*[aki-card] *[aki-card-title] {
|
||||
font-family: "Source Sans Pro", sans-serif;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.009375em;
|
||||
line-height: 1.75rem;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
aki-card.elevated-card,
|
||||
*.aki-card.elevated-card,
|
||||
*[aki-card].elevated-card {
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
[aki-divider],
|
||||
.aki-divider {
|
||||
background: #fff;
|
||||
border: none;
|
||||
height: 0.0625rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
aki-toolbar,
|
||||
*[aki-toolbar],
|
||||
*.aki-toolbar {
|
||||
align-items: center;
|
||||
background-color: #121212;
|
||||
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
max-height: 5.5rem;
|
||||
min-width: 20rem;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
aki-toolbar a,
|
||||
*[aki-toolbar] a,
|
||||
*.aki-toolbar a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
aki-toolbar nav,
|
||||
*[aki-toolbar] nav,
|
||||
*.aki-toolbar nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
aki-toolbar nav a,
|
||||
*[aki-toolbar] nav a,
|
||||
*.aki-toolbar nav a {
|
||||
border-bottom: 0.25rem solid #121212;
|
||||
cursor: pointer;
|
||||
padding: 1rem;
|
||||
letter-spacing: 0.0178571429em;
|
||||
line-height: 1.25rem;
|
||||
transition: 0.25s ease-in-out;
|
||||
}
|
||||
aki-toolbar nav a:hover,
|
||||
*[aki-toolbar] nav a:hover,
|
||||
*.aki-toolbar nav a:hover {
|
||||
filter: invert(0.2);
|
||||
}
|
||||
aki-toolbar nav a[active],
|
||||
*[aki-toolbar] nav a[active],
|
||||
*.aki-toolbar nav a[active] {
|
||||
border-bottom: 0.25rem solid #ffc107;
|
||||
}
|
||||
|
||||
.text1 {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.text2 {
|
||||
font-family: "Source Sans Pro", sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: "Source Sans Pro", sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
header .left,
|
||||
header .center,
|
||||
header .right {
|
||||
align-items: inherit;
|
||||
display: inherit;
|
||||
height: calc(100% - 2rem);
|
||||
padding: 1rem;
|
||||
}
|
||||
header .left .logo {
|
||||
display: block;
|
||||
filter: invert(1);
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
}
|
||||
header .left .title {
|
||||
font-size: 1.75rem;
|
||||
letter-spacing: 0.03125em;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
header .left .title span:last-child {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
@media (max-width: 64em) {
|
||||
header .left .title span:first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 48em) {
|
||||
header .left .title {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 48em) {
|
||||
header .left {
|
||||
flex: 1 1 auto;
|
||||
padding: 0 !important;
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
header .center {
|
||||
flex: 1 1 auto;
|
||||
justify-content: center;
|
||||
}
|
||||
header .center button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
padding: 0;
|
||||
}
|
||||
header .center button img {
|
||||
display: block;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
@media (max-width: 48em) {
|
||||
header .center {
|
||||
flex: initial;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
header .right .dropdown-button {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 64em) {
|
||||
header .right.dropdown {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-width: 4rem;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
header .right.dropdown:hover .dropdown-content {
|
||||
background: #121212;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
right: 0;
|
||||
top: 5.5rem;
|
||||
}
|
||||
header .right.dropdown .dropdown-button {
|
||||
display: initial;
|
||||
}
|
||||
header .right.dropdown .dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
@media (max-width: 48em) {
|
||||
header .right {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
}
|
||||
main .bg-video {
|
||||
background-color: #fff;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: -99;
|
||||
}
|
||||
main .bg-video .wrapper {
|
||||
background-color: #282828;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -98;
|
||||
}
|
||||
main .bg-video .wrapper video {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
main .bg-video .overlay {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(10px);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
main #router-outlet {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
bottom: 0;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
font-size: 0.625rem;
|
||||
left: 0;
|
||||
padding: 0.5rem 1.5rem;
|
||||
position: absolute;
|
||||
width: calc(100% - 1.5rem * 2);
|
||||
}
|
||||
@media (max-width: 48em) {
|
||||
footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ffc107;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div[overlay-menu-content] {
|
||||
background-color: #ffc107;
|
||||
bottom: 0;
|
||||
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
|
||||
color: #000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 5.5rem;
|
||||
width: 10rem;
|
||||
z-index: 99;
|
||||
}
|
||||
div[overlay-menu-content] a {
|
||||
color: inherit;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 0.5rem 0.5rem 0.5rem 1rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
div[overlay-menu-content] a:first-child {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
div[overlay-menu-content] .disclaimer {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
font-size: 0.625rem;
|
||||
padding: 0.5rem 0.5rem 0.5rem 1rem;
|
||||
}
|
||||
div[overlay-menu-content][opened] {
|
||||
left: 0rem;
|
||||
}
|
||||
div[overlay-menu-content][closed] {
|
||||
left: -10rem;
|
||||
}
|
||||
|
||||
.view {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.view[home] [aki-button] {
|
||||
font-size: 1.25rem;
|
||||
letter-spacing: 0.009375em;
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
.view[home] .tagline {
|
||||
bottom: 4rem;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
right: 4rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.view[home] .tagline div {
|
||||
font-size: 1.25rem;
|
||||
text-align: right;
|
||||
}
|
||||
.view[home] .tagline div:first-child {
|
||||
font-size: 3rem;
|
||||
text-align: initial;
|
||||
}
|
||||
@media (max-width: 48em), (max-height: 30rem) {
|
||||
.view[home] .tagline {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.view[download] a {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.view[features] [aki-card] {
|
||||
margin: 0 1rem 1.5rem;
|
||||
max-width: 40rem;
|
||||
}
|
||||
.view[features] [aki-card]:first-child {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.view[community] a {
|
||||
font-size: 1.25rem;
|
||||
letter-spacing: 0.009375em;
|
||||
margin-top: 1.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
1
assets/css/style.css.map
Normal file
1
assets/css/style.css.map
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../scss/utils/theme.scss","../scss/utils/typography.scss","../scss/components/aki-button.scss","../scss/utils/elevation.scss","../scss/components/aki-card.scss","../scss/components/aki-divider.scss","../scss/components/aki-toolbar.scss","../scss/style.scss"],"names":[],"mappings":"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","file":"style.css"}
|
||||
BIN
assets/img/icons/baseline_menu_white_24dp.png
Normal file
BIN
assets/img/icons/baseline_menu_white_24dp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 B |
BIN
assets/img/logo.png
Normal file
BIN
assets/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
88
assets/js/akiNavigatorTemplate.js
Normal file
88
assets/js/akiNavigatorTemplate.js
Normal file
@ -0,0 +1,88 @@
|
||||
'use strict';
|
||||
|
||||
class AkiNavigatorTemplate {
|
||||
constructor(mode) {
|
||||
this._header = undefined;
|
||||
this._templates = undefined;
|
||||
this._routerOutlet = undefined;
|
||||
this._mode = mode;
|
||||
|
||||
this._onExec();
|
||||
}
|
||||
|
||||
_onExec() {
|
||||
console.log('Navigating using mode:', this._mode);
|
||||
|
||||
this._getReferences();
|
||||
this._getTemplates();
|
||||
|
||||
window.addEventListener('hashchange', () => this.displayView(window.location.hash.substr(1)));
|
||||
|
||||
if (!window.location.hash) {
|
||||
this._mode === 'fetch' ? this.displayView('home') : this.displayView('home');
|
||||
} else {
|
||||
this.displayView(window.location.hash.substr(1));
|
||||
}
|
||||
}
|
||||
|
||||
_getReferences() {
|
||||
this._header = document.querySelector('header');
|
||||
this._routerOutlet = document.querySelector('#router-outlet');
|
||||
}
|
||||
|
||||
_getTemplates() {
|
||||
this._templates = [].slice.call(document.getElementsByTagName('template'));
|
||||
}
|
||||
|
||||
_viewModeAction() {
|
||||
if (this._mode === 'fetch') {
|
||||
this.fetchView(window.location.hash.substr(1))
|
||||
} else {
|
||||
this.setView(window.location.hash.substr(1));
|
||||
}
|
||||
}
|
||||
|
||||
_removeChildren(element) {
|
||||
let count = element.childNodes.length;
|
||||
|
||||
while (count--) {
|
||||
element.removeChild(element.lastChild);
|
||||
}
|
||||
}
|
||||
|
||||
_setView(view) {
|
||||
const template = this._templates.filter(template => template.id === `template-${view}`)[0];
|
||||
this._removeChildren(this._routerOutlet);
|
||||
this._routerOutlet.appendChild(template.content.cloneNode(true));
|
||||
}
|
||||
|
||||
async _fetchView(view) {
|
||||
const response = await fetch(`templates/${view}.html`);
|
||||
const text = await response.text();
|
||||
|
||||
this._removeChildren(this._routerOutlet);
|
||||
this._routerOutlet.innerHTML = text; // innerHTML gets the job done.
|
||||
}
|
||||
|
||||
displayView(view) {
|
||||
if (this._mode === 'fetch') {
|
||||
this._fetchView(view);
|
||||
} else {
|
||||
this._setView(view);
|
||||
}
|
||||
|
||||
const activeLinks = document.querySelectorAll('a[active]');
|
||||
const newActiveLinks = document.querySelectorAll(`a[href='#${view}']`);
|
||||
|
||||
if (activeLinks.length > 0) {
|
||||
activeLinks.forEach(link => {
|
||||
link.removeAttribute('active')
|
||||
});
|
||||
}
|
||||
|
||||
newActiveLinks.forEach(newLink => newLink.setAttribute('active', ''));
|
||||
|
||||
// FIXME: history push is fucked rn.
|
||||
// window.history.pushState(null, `${view}`, `#${view}`);
|
||||
}
|
||||
}
|
||||
57
assets/js/akiSideMenu.js
Normal file
57
assets/js/akiSideMenu.js
Normal file
@ -0,0 +1,57 @@
|
||||
/**
|
||||
* This script will handle the layout changes
|
||||
* when you go from chad computer screen
|
||||
* to shitty mobile screen.
|
||||
*
|
||||
* Author: Atomos821
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
const defaultFontSize = 16; // unit: px.
|
||||
const matchValue = 48; // unit: em.
|
||||
|
||||
function sideMenu(bool) {
|
||||
const nav = document.querySelector('header nav');
|
||||
const overlay = document.querySelector('div[overlay-menu-content]');
|
||||
|
||||
if (!bool) {
|
||||
// Restore nav to initial state.
|
||||
nav.removeAttribute('style');
|
||||
nav.querySelectorAll('a').forEach(link => link.removeAttribute('style'));
|
||||
nav.querySelector('button[aki-menu]').removeAttribute('style');
|
||||
|
||||
if (overlay.hasAttribute('opened')) {
|
||||
overlay.removeAttribute('opened');
|
||||
overlay.setAttribute('closed', null);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
nav.style.justifyContent = 'flex-start';
|
||||
nav.querySelector('button[aki-menu]').style.display = 'block';
|
||||
nav.querySelectorAll('a').forEach(link => link.style.display = 'none');
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles the side menu, either displaying or hiding it,
|
||||
* depending on the attributes of the overlay menu.
|
||||
*/
|
||||
function toggleMenu() {
|
||||
const overlay = document.querySelector('div[overlay-menu-content]');
|
||||
|
||||
if (overlay.hasAttribute('opened')) {
|
||||
overlay.removeAttribute('opened');
|
||||
overlay.setAttribute('closed', null);
|
||||
} else {
|
||||
overlay.removeAttribute('closed');
|
||||
overlay.setAttribute('opened', null);
|
||||
}
|
||||
}
|
||||
|
||||
// "Plz don't look sempai~ !!!" ｏ(≧▼≦○〃
|
||||
let widthMatch = window.matchMedia(`(max-width: ${matchValue}em)`);
|
||||
widthMatch.addEventListener('change', matchedMedia => (matchedMedia.matches || window.innerWidth <= (matchValue * defaultFontSize)) ? sideMenu(true) : sideMenu(false));
|
||||
widthMatch.dispatchEvent(new Event("change")); // Force event on page load.
|
||||
document.querySelector('header nav button[aki-menu]').addEventListener('click', () => toggleMenu());
|
||||
25
assets/scss/components/aki-button.scss
Normal file
25
assets/scss/components/aki-button.scss
Normal file
@ -0,0 +1,25 @@
|
||||
aki-button,
|
||||
*[aki-button],
|
||||
*.aki-button {
|
||||
background-color: $accent;
|
||||
border: none;
|
||||
border-radius: .125rem;
|
||||
box-shadow: $elevation-z2;
|
||||
color: $on-accent;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
padding: .5rem 1rem;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
// transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1),box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover:not(:active) {
|
||||
filter: invert(.15);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $primary;
|
||||
box-shadow: $elevation-z8;
|
||||
color: $on-primary;
|
||||
}
|
||||
}
|
||||
32
assets/scss/components/aki-card.scss
Normal file
32
assets/scss/components/aki-card.scss
Normal file
@ -0,0 +1,32 @@
|
||||
aki-card,
|
||||
*.aki-card,
|
||||
*[aki-card] {
|
||||
background: $primary;
|
||||
box-shadow: $elevation-z1;
|
||||
border-radius: .125rem;
|
||||
color: $on-primary;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: .875rem;
|
||||
letter-spacing: .0178571429em;
|
||||
line-height: 1.25rem;
|
||||
font-family: $font-open-sans, sans-serif;
|
||||
max-width: calc(25rem - 3rem);
|
||||
padding: 1.25rem 1.5rem;
|
||||
|
||||
aki-card-title
|
||||
*.aki-card-title,
|
||||
*[aki-card-title] {
|
||||
font-family: $font-source-sans-pro, sans-serif;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .009375em;
|
||||
line-height: 1.75rem;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&.elevated-card {
|
||||
box-shadow: $elevation-z8;
|
||||
}
|
||||
}
|
||||
7
assets/scss/components/aki-divider.scss
Normal file
7
assets/scss/components/aki-divider.scss
Normal file
@ -0,0 +1,7 @@
|
||||
[aki-divider],
|
||||
.aki-divider {
|
||||
background: $on-primary;
|
||||
border: none;
|
||||
height: .0625rem;
|
||||
width: 100%;
|
||||
}
|
||||
45
assets/scss/components/aki-toolbar.scss
Normal file
45
assets/scss/components/aki-toolbar.scss
Normal file
@ -0,0 +1,45 @@
|
||||
aki-toolbar,
|
||||
*[aki-toolbar],
|
||||
*.aki-toolbar {
|
||||
align-items: center;
|
||||
background-color: $primary;
|
||||
// box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
||||
box-shadow: $elevation-z4;
|
||||
color: $on-primary;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
max-height: 5.5rem;
|
||||
min-width: 20rem;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
a {
|
||||
color: $on-primary;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
border-bottom: .25rem solid $primary;
|
||||
cursor: pointer;
|
||||
padding: 1rem;
|
||||
letter-spacing: .0178571429em;
|
||||
line-height: 1.25rem;
|
||||
transition: .25s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
filter: invert(.2);
|
||||
}
|
||||
|
||||
&[active] {
|
||||
border-bottom: .25rem solid $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
324
assets/scss/style.scss
Normal file
324
assets/scss/style.scss
Normal file
@ -0,0 +1,324 @@
|
||||
@import './utils/theme.scss';
|
||||
@import './utils/elevation.scss';
|
||||
@import './utils/typography.scss';
|
||||
|
||||
@import './components/aki-button.scss';
|
||||
@import './components/aki-card.scss';
|
||||
@import './components/aki-divider.scss';
|
||||
@import './components/aki-toolbar.scss';
|
||||
|
||||
.text1 {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.text2 {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
header {
|
||||
|
||||
.left,
|
||||
.center,
|
||||
.right {
|
||||
align-items: inherit;
|
||||
display: inherit;
|
||||
height: calc(100% - 2rem);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.left {
|
||||
.logo {
|
||||
display: block;
|
||||
filter: invert(1);
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.75rem;
|
||||
letter-spacing: .03125em;
|
||||
margin-left: 1rem;
|
||||
|
||||
span:last-child {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
@media (max-width: #{$bp-medium}) {
|
||||
span:first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: #{$bp-small}) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: #{$bp-small}) {
|
||||
flex: 1 1 auto;
|
||||
padding: 0 !important;
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
flex: 1 1 auto;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: none; // hidden by default
|
||||
padding: 0;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: #{$bp-small}) {
|
||||
flex: initial;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.dropdown-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: #{$bp-medium}) {
|
||||
&.dropdown {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-width: 4rem;
|
||||
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover .dropdown-content {
|
||||
// display: block;
|
||||
background: $primary;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
right: 0;
|
||||
top: 5.5rem;
|
||||
}
|
||||
|
||||
.dropdown-button {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: #{$bp-small}) {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
|
||||
.bg-video {
|
||||
background-color: $background;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: -99;
|
||||
|
||||
.wrapper {
|
||||
background-color: $secondary;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -98;
|
||||
|
||||
video {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(10px);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#router-outlet {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
bottom: 0;
|
||||
color: rgba(255, 255, 255, .25);
|
||||
font-size: .625rem;
|
||||
left: 0;
|
||||
padding: .5rem 1.5rem;
|
||||
position: absolute;
|
||||
width: calc(100% - 1.5rem * 2);
|
||||
|
||||
@media (max-width: #{$bp-small}) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $accent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div[overlay-menu-content] {
|
||||
background-color: $accent;
|
||||
bottom: 0;
|
||||
box-shadow: $elevation-z16;
|
||||
color: $on-accent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 5.5rem; // header height
|
||||
width: 10rem;
|
||||
z-index: 99;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
margin-bottom: .5rem;
|
||||
padding: .5rem .5rem .5rem 1rem;
|
||||
text-decoration: none;
|
||||
|
||||
&:first-child {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
color: rgba($on-accent, .5);
|
||||
font-size: .625rem;
|
||||
padding: .5rem .5rem .5rem 1rem;
|
||||
}
|
||||
|
||||
&[opened] {
|
||||
left: 0rem;
|
||||
}
|
||||
|
||||
&[closed] {
|
||||
left: -10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.view {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
padding: 0 1rem;
|
||||
|
||||
&[home] {
|
||||
[aki-button] {
|
||||
font-size: 1.25rem;
|
||||
letter-spacing: 0.009375em;
|
||||
padding: .75rem 1.5rem;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
bottom: 4rem;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
right: 4rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
div {
|
||||
font-size: 1.25rem;
|
||||
text-align: right;
|
||||
|
||||
&:first-child {
|
||||
font-size: 3rem;
|
||||
text-align: initial;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: #{$bp-small}),
|
||||
(max-height: 30rem) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[download] {
|
||||
a {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[features] {
|
||||
// Lazy mobile features view "fix"
|
||||
// justify-content: flex-start;
|
||||
|
||||
[aki-card] {
|
||||
margin: 0 1rem 1.5rem;
|
||||
max-width: 40rem;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[community] {
|
||||
a {
|
||||
font-size: 1.25rem;
|
||||
letter-spacing: 0.009375em;
|
||||
margin-top: 1.5rem;
|
||||
padding: .75rem 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
25
assets/scss/utils/elevation.scss
Normal file
25
assets/scss/utils/elevation.scss
Normal file
@ -0,0 +1,25 @@
|
||||
$elevation-z0: 0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);
|
||||
$elevation-z1: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
|
||||
$elevation-z2: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
|
||||
$elevation-z3: 0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12);
|
||||
$elevation-z4: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
|
||||
$elevation-z5: 0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12);
|
||||
$elevation-z6: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
|
||||
$elevation-z7: 0 4px 5px -2px rgba(0,0,0,.2),0 7px 10px 1px rgba(0,0,0,.14),0 2px 16px 1px rgba(0,0,0,.12);
|
||||
$elevation-z8: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
|
||||
$elevation-z9: 0 5px 6px -3px rgba(0,0,0,.2),0 9px 12px 1px rgba(0,0,0,.14),0 3px 16px 2px rgba(0,0,0,.12);
|
||||
$elevation-z10: 0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12);
|
||||
$elevation-z11: 0 6px 7px -4px rgba(0,0,0,.2),0 11px 15px 1px rgba(0,0,0,.14),0 4px 20px 3px rgba(0,0,0,.12);
|
||||
$elevation-z12: 0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12);
|
||||
$elevation-z13: 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
|
||||
$elevation-z14: 0 7px 9px -4px rgba(0,0,0,.2),0 14px 21px 2px rgba(0,0,0,.14),0 5px 26px 4px rgba(0,0,0,.12);
|
||||
$elevation-z15: 0 8px 9px -5px rgba(0,0,0,.2),0 15px 22px 2px rgba(0,0,0,.14),0 6px 28px 5px rgba(0,0,0,.12);
|
||||
$elevation-z16: 0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);
|
||||
$elevation-z17: 0 8px 11px -5px rgba(0,0,0,.2),0 17px 26px 2px rgba(0,0,0,.14),0 6px 32px 5px rgba(0,0,0,.12);
|
||||
$elevation-z18: 0 9px 11px -5px rgba(0,0,0,.2),0 18px 28px 2px rgba(0,0,0,.14),0 7px 34px 6px rgba(0,0,0,.12);
|
||||
$elevation-z19: 0 9px 12px -6px rgba(0,0,0,.2),0 19px 29px 2px rgba(0,0,0,.14),0 7px 36px 6px rgba(0,0,0,.12);
|
||||
$elevation-z20: 0 10px 13px -6px rgba(0,0,0,.2),0 20px 31px 3px rgba(0,0,0,.14),0 8px 38px 7px rgba(0,0,0,.12);
|
||||
$elevation-z21: 0 10px 13px -6px rgba(0,0,0,.2),0 21px 33px 3px rgba(0,0,0,.14),0 8px 40px 7px rgba(0,0,0,.12);
|
||||
$elevation-z22: 0 10px 14px -6px rgba(0,0,0,.2),0 22px 35px 3px rgba(0,0,0,.14),0 8px 42px 7px rgba(0,0,0,.12);
|
||||
$elevation-z23: 0 11px 14px -7px rgba(0,0,0,.2),0 23px 36px 3px rgba(0,0,0,.14),0 9px 44px 8px rgba(0,0,0,.12);
|
||||
$elevation-z24: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);
|
||||
35
assets/scss/utils/theme.scss
Normal file
35
assets/scss/utils/theme.scss
Normal file
@ -0,0 +1,35 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Source+Sans+Pro:wght@400;700&display=swap');
|
||||
|
||||
$background: #fff;
|
||||
$on-background: #000;
|
||||
|
||||
$primary: #121212;
|
||||
$on-primary: #fff;
|
||||
|
||||
$secondary: #282828;
|
||||
$on-secondary: #fff;
|
||||
|
||||
$accent: #ffc107;
|
||||
$on-accent: #000;
|
||||
|
||||
$font-source-sans-pro: 'Source Sans Pro';
|
||||
$font-open-sans: 'Open Sans';
|
||||
$base-font-size: 16px;
|
||||
$base-line-height: 1.5;
|
||||
|
||||
$border-radius: .125rem; // for 16px base size = 2px border radius.
|
||||
|
||||
// == Breakpoints
|
||||
$bp-small: 48em; // 768px
|
||||
$bp-medium: 64em; // 1024px
|
||||
$bp-large: 85.375em; // 1366px
|
||||
$bp-xlarge: 120em; // 1920px
|
||||
$bp-xxlarge: 160em; // 2560px
|
||||
|
||||
// == Media Queries
|
||||
$mq-small: "(min-width: #{$bp-small})";
|
||||
$mq-medium: "(min-width: #{$bp-medium})";
|
||||
$mq-large: "(min-width: #{$bp-large})";
|
||||
$mq-xlarge: "(min-width: #{$bp-xlarge})";
|
||||
$mq-xxlarge: "(min-width: #{$bp-xxlarge})";
|
||||
$mq-retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
|
||||
103
assets/scss/utils/typography.scss
Normal file
103
assets/scss/utils/typography.scss
Normal file
@ -0,0 +1,103 @@
|
||||
// == Typography
|
||||
h1,
|
||||
.headline-1,
|
||||
.heading-1 {
|
||||
font-size: 6rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: -.015625em;
|
||||
line-height: 6rem;
|
||||
}
|
||||
|
||||
h2,
|
||||
.headline-2,
|
||||
.heading-2 {
|
||||
font-size: 3.75rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: -.0083333333em;
|
||||
line-height: 3.75rem;
|
||||
}
|
||||
|
||||
h3,
|
||||
.headline-3,
|
||||
.heading-3 {
|
||||
font-size: 3rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
line-height: 3.125rem;
|
||||
}
|
||||
|
||||
h4,
|
||||
.headline-4,
|
||||
.heading-4 {
|
||||
font-size: 2.125rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: .0073529412em;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
h5,
|
||||
.headline-5,
|
||||
.heading-5 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
h6,
|
||||
.headline-6,
|
||||
.heading-6 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: .125em;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.subtitle-1 {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: .009375em;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.subtitle-2 {
|
||||
font-size: .875rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: .0071428571em;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
|
||||
.body-1 {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: .03125em;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.body-2 {
|
||||
font-size: .875rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: .0178571429em;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: .875rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: .0892857143em;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: .75rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: .0333333333em;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.overline {
|
||||
font-size: .75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: .1666666667em;
|
||||
line-height: 2rem;
|
||||
}
|
||||
BIN
assets/video/background.mp4
Normal file
BIN
assets/video/background.mp4
Normal file
Binary file not shown.
77
index.html
Normal file
77
index.html
Normal file
@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SPT-AKI</title>
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header aki-toolbar>
|
||||
<a class="left" href="#home">
|
||||
<img class="logo" src="./assets/img/logo.png">
|
||||
<span class="title text2">
|
||||
<span>SPT-AKI</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<nav class="text2 center">
|
||||
<a href="#home" active>Home</a>
|
||||
<a href="#download">Download</a>
|
||||
<a href="#features">Features</a>
|
||||
<a href="#community">Community</a>
|
||||
<button aki-menu>
|
||||
<img src="./assets/img/icons/baseline_menu_white_24dp.png" alt="menu">
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<nav class="text2 right dropdown">
|
||||
<div class="dropdown-button">...</div>
|
||||
<div class="dropdown-content">
|
||||
<a href="https://docs.sp-tarkov.com">Docs</a>
|
||||
<a href="https://mods.sp-tarkov.com">Workshop</a>
|
||||
<a href="https://dev.sp-tarkov.com">Gitea</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="bg-video">
|
||||
<div class="wrapper">
|
||||
<video autoplay muted loop>
|
||||
<source src="./assets/video/background.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<div class="overlay"></div>
|
||||
</div>
|
||||
|
||||
<div id="router-outlet">
|
||||
<!-- This is where the magic happens -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>Project AKI is not affiliated with Battlestate Games Ltd. in any way.</footer>
|
||||
|
||||
<div class="text2" overlay-menu-content closed>
|
||||
<a href="#home" active>Home</a>
|
||||
<a href="#download">Download</a>
|
||||
<a href="#features">Features</a>
|
||||
<a href="#community">Community</a>
|
||||
<hr aki-divider>
|
||||
<span class="disclaimer text1">SPT-AKI is not affiliated with Battlestate Games Ltd. in any way.</span>
|
||||
</div>
|
||||
|
||||
<!-- Templates - START -->
|
||||
<!-- Templates - END -->
|
||||
|
||||
<script src="./assets/js/akiSideMenu.js"></script>
|
||||
<script src="./assets/js/akiNavigatorTemplate.js"></script>
|
||||
<script>
|
||||
const akiNavigatorTemplate = new AkiNavigatorTemplate('fetch');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
15
templates/community.html
Normal file
15
templates/community.html
Normal file
@ -0,0 +1,15 @@
|
||||
<div class="view" community>
|
||||
<div aki-card>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor diam sit amet sapien
|
||||
porttitor, id ultricies lectus finibus. Vestibulum egestas nibh et neque fringilla pulvinar. Cras
|
||||
bibendum gravida risus id convallis.
|
||||
</p>
|
||||
<p>
|
||||
Vestibulum lobortis tristique dolor, pretium iaculis erat
|
||||
gravida in. Duis congue elementum justo. Aliquam nec porta odio. Donec turpis nulla, commodo id
|
||||
consectetur vel, varius vel tellus. Nulla commodo eleifend sem non cursus.
|
||||
</p>
|
||||
</div>
|
||||
<a href="https://www.guilded.gg/senkospub/" target="_blank" class="text2" aki-button>Join us on Guilded</a>
|
||||
</div>
|
||||
11
templates/download.html
Normal file
11
templates/download.html
Normal file
@ -0,0 +1,11 @@
|
||||
<div class="view" download>
|
||||
<div aki-card>
|
||||
<div aki-card-title class="text2 heading-5">Download SP-Tarkov</div>
|
||||
<div aki-card-content>
|
||||
<p>AKI for runtime 0.12.7.xxxx: <a href="./apps/archives/latest.txt" target="_blank" class="text2">Download</a></p>
|
||||
<hr aki-divider>
|
||||
<p>Project AKI will only provide support for its latest version.</p>
|
||||
<p>When a new version of EFT is released, we'll update AKI as soon as possible. Please be patient.</p>
|
||||
</div>
|
||||
</akit-card>
|
||||
</div>
|
||||
29
templates/features.html
Normal file
29
templates/features.html
Normal file
@ -0,0 +1,29 @@
|
||||
<div class="view" features>
|
||||
<div aki-card>
|
||||
<div aki-card-title>Lorem ipsum dolor sit amet</div>
|
||||
<div aki-card-content>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit hendrerit
|
||||
ultricies. Nulla iaculis convallis elit. Nullam imperdiet, eros nec posuere commodo, sapien dui auctor
|
||||
risus, at vehicula lectus turpis ut orci. Sed placerat diam imperdiet, hendrerit mi at, tincidunt mauris. In
|
||||
hendrerit mattis nisi ac fringilla. In vestibulum nibh justo.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div aki-card>
|
||||
<div aki-card-title>Aenean ultrices</div>
|
||||
<div aki-card-content>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consequat eros vitae
|
||||
convallis mollis. Sed ac mi vitae urna ultrices bibendum in ut turpis. Aenean ultrices orci eget quam dictum
|
||||
maximus. Curabitur et odio vel felis eleifend volutpat eget id erat. Pellentesque ultrices, enim blandit
|
||||
efficitur pulvinar, dolor.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div aki-card>
|
||||
<div aki-card-title>Proin porta ultricies</div>
|
||||
<div aki-card-content>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta ultricies vestibulum.
|
||||
Sed consequat tempor ligula, et lacinia nisl gravida blandit. In hac habitasse.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
8
templates/home.html
Normal file
8
templates/home.html
Normal file
@ -0,0 +1,8 @@
|
||||
<div class="view" home>
|
||||
<a href="./#download" class="text2" aki-button>Get Started</a>
|
||||
|
||||
<div class="tagline">
|
||||
<div class="text2">Escaping From Online</div>
|
||||
<div class="text1">And making it a true single player experience</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user