generated from ztimson/template
ztimson
5018311990
All checks were successful
Build and publish / Build Container (push) Successful in 1m28s
159 lines
4.3 KiB
HTML
159 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>NetNavi</title>
|
|
<link rel="icon" href="/favicon.png"/>
|
|
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<meta name="theme-color" content="{{THEME_PRIMARY}}">
|
|
<meta property="og:title" content="NetNavi">
|
|
<meta name="apple-mobile-web-app-title" content="NetNavi">
|
|
<meta property="og:site_name" content="NetNavi">
|
|
<meta name="description" content="Network Navigation Program">
|
|
<meta property="og:description" content="Network Navigation Program">
|
|
<meta property="og:image" content="/banner?size=1200x630">
|
|
<meta property="og:logo" content="/favicon?size=180">
|
|
<meta name="apple-touch-icon" content="/favicon.png">
|
|
<meta name="apple-touch-startup-image" content="/favicon.png">
|
|
<meta property="og:url" content="{{PUBLIC_URL}}">
|
|
<meta property="og:type" content="website">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
|
|
<link rel="manifest" href="/manifest.json">
|
|
|
|
<script src="https://cdn.socket.io/4.6.0/socket.io.min.js"></script>
|
|
|
|
<style>
|
|
* {
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font-family: 'Courier New', monospace;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
*, button, input {
|
|
cursor: url('/assets/cursor.png'), auto !important;
|
|
}
|
|
|
|
body {
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
background: black;
|
|
transition: 1s;
|
|
}
|
|
|
|
.digital-background {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes scanline {
|
|
0% { transform: translateY(-100%); }
|
|
50% { transform: translateY(100%); }
|
|
100% { transform: translateY(100%); }
|
|
}
|
|
|
|
.scanline {
|
|
animation: scanline 11s linear infinite;
|
|
}
|
|
|
|
@keyframes up-down {
|
|
0% { transform: translateY(0); }
|
|
50% { transform: translateY(-50px); }
|
|
100% { transform: translateY(0); }
|
|
}
|
|
|
|
.up-down {
|
|
animation: up-down 31s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes left-right {
|
|
0% { transform: translateX(0); }
|
|
50% { transform: translateX(-50px); }
|
|
100% { transform: translateX(0); }
|
|
}
|
|
|
|
.left-right {
|
|
animation: left-right 37s ease-in-out infinite;
|
|
}
|
|
|
|
#avatar {
|
|
position:fixed;
|
|
height: 110%;
|
|
width: auto;
|
|
|
|
}
|
|
|
|
@media (orientation: landscape) {
|
|
left:0;
|
|
bottom: 0;
|
|
transform: translateY(20%);
|
|
}
|
|
|
|
@media (orientation: portrait) {
|
|
left: 50%;
|
|
bottom: 50%;
|
|
transform: translate(-50%, 50%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<svg class="digital-background" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse">
|
|
<path d="M 50 0 L 0 0 0 50" fill="none" stroke="#ffffffaa" stroke-width="0.5"/>
|
|
</pattern>
|
|
<pattern id="gridL" width="200" height="200" patternUnits="userSpaceOnUse">
|
|
<path d="M 200 0 L 0 0 0 200" fill="none" stroke="#ffffffaa" stroke-width="1"/>
|
|
</pattern>
|
|
<linearGradient id="bg-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#0a0a0a;stop-opacity:0.7" />
|
|
<stop offset="100%" style="stop-color:#1a1a2e;stop-opacity:0.7" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Background gradient -->
|
|
<rect width="100%" height="100%" fill="url(#bg-gradient)"/>
|
|
<!-- Digital grid -->
|
|
<rect class="up-down" width="100%" height="120%" fill="url(#grid)"/>
|
|
<rect class="left-right" width="120%" height="100%" fill="url(#gridL)"/>
|
|
</svg>
|
|
|
|
<avatar-component id="avatar"></avatar-component>
|
|
|
|
<svg class="digital-background" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Scanline effect -->
|
|
<rect class="scanline" width="100%" height="8" fill="#ffffff22"/>
|
|
</svg>
|
|
|
|
<llm-component id="llm"></llm-component>
|
|
|
|
<script type="module">
|
|
import Navi from './navi.mjs';
|
|
|
|
const navi = window.navi = new Navi();
|
|
navi.init().then(async () => {
|
|
document.body.style.background = navi.theme.accent;
|
|
});
|
|
</script>
|
|
<script type="module" src="/components/avatar.mjs"></script>
|
|
<script type="module" src="/components/llm.mjs"></script>
|
|
</body>
|
|
</html>
|