justlog/web/index.html
2023-11-02 01:50:27 -03:00

108 lines
No EOL
2.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#090A0B" />
<title>justlog</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<style>
:root {
--bg: #11111120;
--bg-bright: #11111120;
--bg-brighter: #3d414620;
--bg-dark: #121416;
--theme: #00CC66;
--theme-bright: #00FF80;
--theme2: #2980b9;
--theme2-bright: #3498db;
--text: #F5F5F5;
--text-dark: #616161;
--danger: #e74c3c;
}
html {
background-image: linear-gradient(
to bottom,
rgba(11, 11, 11, 0.8),
rgba(11, 11, 11, 0.8 )
),
url(https://zzls.xyz/assets/bgs/bgtile3.gif);
margin: 0;
padding: 0;
/* background: var(--bg); */
font-family: Helvetica, Arial, sans-serif;
height: 100%;
width: 100%;
/* filter: invert(0.99); */
}
* {
box-sizing: border-box;
}
/* https://systemspace.dimden.dev/res/css/scanlines.css
/* Scanlines */
body:before {
content: "";
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1000;
background-image: url(https://zzls.xyz/assets/bgs/overlay.png);
background-repeat: all;
background-position: 0px 0px;
animation-name: Static;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: steps(4);
opacity: 0.3;
/* box-shadow: inset 0px 0px 10em rgba(0, 0, 0, 0); */
}
body:after {
content: "";
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1000;
background-image: url(https://zzls.xyz/assets/bgs/overlay2.png);
background-repeat: all;
background-position: 0px 0px;
animation-name: Static;
animation-duration: 0.8s;
animation-iteration-count: infinite;
animation-timing-function: steps(4);
opacity: 0.3;
}
@keyframes Static {
0% {
background-position: 0px 0px;
}
100% {
background-position: 0px 4px;
}
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>