informaticker/elia-li-website
1
0
Fork 0
mirror of https://github.com/informaticker/elia-li-website.git synced 2024-11-24 02:31:59 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

remove generative ml elements

Browse Source
This commit is contained in:
elijah 2024-07-30 17:56:41 +02:00
parent e77c5c2c42
commit b58856db6c
3 changed files with 170 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
assets/api.js
View File

@ -1,104 +0,0 @@
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
});
async function fetchTemperature() {
const response = await fetch('https://language.apis.zhr1.infra.elia.network/v2/infra/temperature');
return response.text();
}
async function fetchAndDisplay() {
const responseDiv = document.querySelector('.response');
const statsDiv = document.querySelector('.stats');
let buffer = "";
let charCount = 0;
let startTime = performance.now();
let initialText = responseDiv.textContent;
const eraseDelay = 100;
const printDelay = 50;
const statsEraseDelay = 15;
const statsPrintDelay = 30;
let lastTemperature = "...";
let lastTemperatureUpdateTime = 0;
const response = await fetch('https://language.apis.zhr1.infra.elia.network/v2/text/generate');
const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8');
while (initialText.length > 0) {
initialText = initialText.slice(0, -1);
responseDiv.textContent = initialText;
await new Promise(resolve => setTimeout(resolve, eraseDelay));
}
async function updateStatsAndTemperature() {
statsDiv.style.display = 'block';
let currentTime = (performance.now() - startTime) / 1000;
let charsPerSecond = charCount / currentTime;
if (currentTime - lastTemperatureUpdateTime >= 3) {
try {
lastTemperature = await fetchTemperature();
lastTemperatureUpdateTime = currentTime;
} catch (error) {
lastTemperature = "...";
}
}
statsDiv.textContent = `${charsPerSecond.toFixed(1)} chars/s, ${charCount} chars, ${currentTime.toFixed(1)}s, Temp: ${lastTemperature}°C`;
}
async function appendTextSmoothly(textPart) {
buffer += textPart;
while (buffer.length > 0) {
let pos = buffer.indexOf('**');
if (pos === 0) {
let endPos = buffer.indexOf('**', 2);
if (endPos !== -1) {
responseDiv.innerHTML += '<b>' + buffer.substring(2, endPos) + '</b>';
buffer = buffer.slice(endPos + 2);
} else {
break;
}
} else {
let nextPos = pos !== -1 ? pos : buffer.length;
for (let i = 0; i < nextPos; i++) {
responseDiv.innerHTML += buffer[i];
await new Promise(resolve => setTimeout(resolve, printDelay));
charCount++;
await updateStatsAndTemperature();
}
buffer = buffer.slice(nextPos);
}
}
}
while (true) {
const { value, done } = await reader.read();
if (done) {
if (buffer) {
responseDiv.innerHTML += buffer;
}
break;
}
const text = decoder.decode(value, { stream: true });
await appendTextSmoothly(text);
}
let statsText = statsDiv.textContent;
while (statsText.length > 0) {
statsText = statsText.slice(0, -1);
statsDiv.textContent = statsText;
await new Promise(resolve => setTimeout(resolve, statsEraseDelay));
}
await new Promise(resolve => setTimeout(resolve, 200));
const message = '// credit to hartnett media \\\\';
let messageIndex = 0;
while (messageIndex < message.length) {
statsDiv.textContent += message[messageIndex];
messageIndex++;
await new Promise(resolve => setTimeout(resolve, statsPrintDelay));
}
}
document.addEventListener('DOMContentLoaded', fetchAndDisplay);
console.log(`　　　　　 ___
　　　　 ／イ フ
　　　　| _ _|
　 　 / ミ__xノ
　 /　　 　 |
　　 /　 ヽ　　ﾉ
│　 | | |　　 　
／￣|　　| | |　　
| (￣ヽ_ヽ_)_)　
＼二つ`);
console.log("hello");

190
assets/style.css
View File

@ -1,140 +1,122 @@
@font-face { @font-face {
font-family: 'workbench'; font-family: "workbench";
src: url('../assets/font.woff2') format('woff2'); src: url("../assets/font.woff2") format("woff2");
} }
body, html { body,
margin: 0; html {
padding: 0; margin: 0;
width: 100%; padding: 0;
height: 100%; width: 100%;
font-family: 'workbench', sans-serif; height: 100%;
overflow: hidden; font-family: "workbench", sans-serif;
user-select: none; overflow: hidden;
-webkit-user-select: none; user-select: none;
-moz-user-select: none; -webkit-user-select: none;
-ms-user-select: none; -moz-user-select: none;
-ms-user-select: none;
} }
#background-video { #background-video {
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
min-width: 100%; min-width: 100%;
min-height: 101%; min-height: 101%;
width: auto; width: auto;
height: auto; height: auto;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: -1; z-index: 0;
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
} }
.navbar { .navbar {
background: none; background: none;
padding: 1rem; padding: 1rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
pointer-events: none; pointer-events: none;
position: relative; /* Added this line */
z-index: 1; /* Added this line */
} }
.logo { .logo {
font-size: 1.5rem; font-size: 1.5rem;
color: #db7bdb; color: #db7bdb;
text-shadow: 0 0 10px #db7bdb; text-shadow: 0 0 10px #db7bdb;
} }
.nav-links { .nav-links {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.nav-links li { .nav-links li {
margin-right: 20px; margin-right: 20px;
} }
.nav-links a { .nav-links a {
font-size: 1.2rem; font-size: 1.2rem;
color: #db7bdb; color: #db7bdb;
text-decoration: none; text-decoration: none;
transition: color 0.2s ease; transition: color 0.2s ease;
text-shadow: 0 0 3px #db7bdb; text-shadow: 0 0 3px #db7bdb;
pointer-events: initial; pointer-events: initial;
letter-spacing: 1px; letter-spacing: 1px;
} }
.nav-links a:hover { .nav-links a:hover {
color: #d6afd6; color: #d6afd6;
} }
.response { .credits {
text-align: center; position: absolute;
font-size: 2rem; bottom: 0.5%;
color: #783F8E; left: 50%;
text-shadow: 0 0 10px #783F8E; transform: translateX(-50%);
position: absolute; font-size: 1rem;
top: 50%; color: rgba(128, 128, 128, 0.5);
left: 50%; pointer-events: none;
transform: translate(-50%, -50%); white-space: nowrap;
width: 100%; display: none;
pointer-events: none; animation: fadeIn 1.5s;
}
.response b {
text-shadow:
2px 2px 30px #9847b8,
-2px -2px 30px #9847b8;
color: #7f5191;
}
.stats {
position: absolute;
bottom: 0.5%;
left: 50%;
transform: translateX(-50%);
font-size: 1rem;
color: rgba(128, 128, 128, 0.5);
pointer-events: none;
white-space: nowrap;
display: none;
animation: fadeIn 1.5s;
bottom: 1%;
} }
@keyframes fadeIn { @keyframes fadeIn {
from { opacity: 0; } from {
to { opacity: 1; } opacity: 0;
}
to {
opacity: 1;
}
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.navbar { .navbar {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.nav-links { .nav-links {
margin-top: 1rem; margin-top: 1rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
width: 100%; width: 100%;
} }
.logo { .logo {
display: none; display: none;
} }
.nav-links li { .nav-links li {
margin: 0 10px; margin: 0 10px;
text-align: center; text-align: center;
} }
.response {
font-size: 1.5rem !important;
}
} }

138
index.html
View File

@ -1,59 +1,85 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="elia's website"> <meta name="title" content="elia's website" />
<meta name="description" content="hello"> <meta name="description" content="hello" />
<meta name="keywords" content="ich, hasse, mein, leben"> <meta name="keywords" content="ich, hasse, mein, leben" />
<meta name="author" content="elia"> <meta name="author" content="elia" />
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png"> <link
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png"> rel="apple-touch-icon"
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png"> sizes="180x180"
<link rel="manifest" href="icons/site.webmanifest"> href="icons/apple-touch-icon.png"
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#33ccffaf"> />
<link rel="shortcut icon" href="icons/favicon.ico"> <link
<meta name="msapplication-TileColor" content="#33ccff"> rel="icon"
<meta name="msapplication-config" content="icons/browserconfig.xml"> type="image/png"
<meta name="theme-color" content="#33ccff"> sizes="32x32"
<meta property="og:title" content="elia's website"> href="icons/favicon-32x32.png"
<meta property="og:description" content="hello"> />
<meta property="og:url" content="https://elia's website"> <link
<meta property="og:site_name" content="elia's website"> rel="icon"
<meta property="og:image" content="https://elia.li/icons/favicon-32x32.png"> type="image/png"
<meta property="twitter:title" content="elia's website"> sizes="16x16"
<meta property="twitter:description" content="hello"> href="icons/favicon-16x16.png"
<meta property="twitter:card" content="summary_large_image"> />
<meta property="twitter:image" content="https://elia.li/icons/favicon-32x32.png"> <link rel="manifest" href="icons/site.webmanifest" />
<link rel="icon" type="image/png" href="favicon.png"> <link
<link rel="stylesheet" href="assets/style.css"> rel="mask-icon"
<title>elia's website</title> href="icons/safari-pinned-tab.svg"
</head> color="#33ccffaf"
<body> />
<video autoplay muted loop id="background-video"> <link rel="shortcut icon" href="icons/favicon.ico" />
<source src="assets/background.mp4" type="video/mp4"> <meta name="msapplication-TileColor" content="#33ccff" />
Your browser does not support HTML5 video. <meta name="msapplication-config" content="icons/browserconfig.xml" />
</video> <meta name="theme-color" content="#33ccff" />
<nav class="navbar"> <meta property="og:title" content="elia's website" />
<div class="logo"> <meta property="og:description" content="hello" />
<span>elia.li</span> <meta property="og:url" content="https://elia's website" />
<meta property="og:site_name" content="elia's website" />
<meta
property="og:image"
content="https://elia.li/icons/favicon-32x32.png"
/>
<meta property="twitter:title" content="elia's website" />
<meta property="twitter:description" content="hello" />
<meta property="twitter:card" content="summary_large_image" />
<meta
property="twitter:image"
content="https://elia.li/icons/favicon-32x32.png"
/>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="assets/style.css" />
<title>elia's website</title>
</head>
<body>
<video autoplay muted loop id="background-video">
<source src="assets/background.mp4" type="video/mp4" />
Your browser does not support HTML5 video.
</video>
<nav class="navbar">
<div class="logo">
<span>elia.li</span>
</div>
<ul class="nav-links">
<li><a href="https://elia.network">network</a></li>
<li><a href="https://github.com/informaticker">github</a></li>
<li><a href="mailto:me@elia.li">mail</a></li>
<li>
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
>imprint</a
>
</li>
</ul>
</nav>
<div id="credits" class="credits">
<span>// credit to hartnett media \\</span>
</div> </div>
<ul class="nav-links"> <script>
<li><a href="https://elia.network">network</a></li> document.addEventListener("DOMContentLoaded", () => {
<li><a href="https://github.com/informaticker">github</a></li> document.getElementById("credits").style.display = "block";
<li><a href="mailto:me@elia.li">mail</a></li> });
<li><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">imprint</a></li> </script>
</ul> </body>
</nav>
<div id="response" class="response">
<span></span>
</div>
<div id="stats" class="stats">
<span id="charsPerSecond">0 chars/s</span>
<span id="totalChars">0 chars</span>
<span id="totalTime">0.0s</span>
<span id="temperature">Temp: ...</span>
</div>
</body>
<script src="assets/api.js"></script>
</html> </html>