generated from ztimson/template
Home screen update
All checks were successful
Build and publish / Build Container (push) Successful in 1m28s
All checks were successful
Build and publish / Build Container (push) Successful in 1m28s
This commit is contained in:
@@ -1,14 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>NetNavi v1.0.0</title>
|
||||
<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>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.3.2/pixi.min.js"></script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
@@ -33,28 +49,110 @@
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background: black;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
position: absolute;
|
||||
.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>
|
||||
<div id="game"></div>
|
||||
<jukebox-component id="jukebox"></jukebox-component>
|
||||
<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';
|
||||
|
||||
window.navi = new Navi();
|
||||
const navi = window.navi = new Navi();
|
||||
navi.init().then(async () => {
|
||||
document.body.style.background = navi.theme.accent;
|
||||
});
|
||||
</script>
|
||||
<script type="module" src="/components/jukebox.mjs"></script>
|
||||
<script type="module" src="/components/avatar.mjs"></script>
|
||||
<script type="module" src="/components/llm.mjs"></script>
|
||||
<script type="module" src="/components/world.mjs"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user