added some javascript interactions with the page

This commit is contained in:
guams 2025-06-15 00:16:04 +02:00
parent 3e585fb7c9
commit ee86ea5a07
7 changed files with 37 additions and 9 deletions

View File

@ -2,13 +2,16 @@
<html lang="fr" id="html">
<head>
<meta charset="UTF-8"/>
<link rel="icon" href="/icon.jpg"/>
<link rel="icon" href="/icon.png"/>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Home</title>
</head>
<body>
<main>
<main id="closed-main">
<h1>Look what you've done !</h1>
</main>
<main class="main">
<div class="title-bar window-border">
<div class="title-bar-text">Guams - Home</div>
<div class="title-bar-controls">
@ -18,7 +21,7 @@
<button class="title-bar-button maximize-button">
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
</button>
<button class="title-bar-button close-button">
<button class="title-bar-button close-button" onclick="closeWindow('main')">
<img alt="close button" src="/src/img/close.svg" aria-hidden="true">
</button>
</div>
@ -117,4 +120,5 @@
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3.8.1/tsparticles.bundle.min.js"></script>
<script type="module" src="/src/main.js"></script>
<script src="/src/gitea.js"></script>
<script src="/src/window.js"></script>
</html>

View File

@ -2,13 +2,16 @@
<html lang="fr" id="html">
<head>
<meta charset="UTF-8"/>
<link rel="icon" href="/icon.jpg"/>
<link rel="icon" href="/icon.png"/>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>My projects</title>
</head>
<body>
<main>
<main id="closed-main">
<h1>Look what you've done !</h1>
</main>
<main class="main">
<div class="title-bar window-border">
<div class="title-bar-text">Guams - My projects</div>
<div class="title-bar-controls">
@ -18,7 +21,7 @@
<button class="title-bar-button maximize-button">
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
</button>
<button class="title-bar-button close-button">
<button class="title-bar-button close-button" onclick="closeWindow('main')">
<img alt="close button" src="/src/img/close.svg" aria-hidden="true">
</button>
</div>
@ -141,4 +144,5 @@
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3.8.1/tsparticles.bundle.min.js"></script>
<script type="module" src="/src/main.js"></script>
<script src="/src/gitea.js"></script>
<script src="/src/window.js"></script>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 78 KiB

BIN
public/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 218 KiB

View File

@ -7,9 +7,6 @@ xhr.onload = () => {
if (xhr.status === 200) {
commits = JSON.parse(xhr.response);
commits.forEach(commit => {
console.log(new Date(commit.created));
console.log(commit.commit.message);
const ul = document.getElementById("changelog-content");
const li = document.createElement("li");
const h2 = document.createElement("h2");

View File

@ -45,6 +45,19 @@ body {
background: rgba(0, 0, 0, 0.5);
}
#closed-main > h1 {
font-size: 50px;
}
#closed-main {
display: none;
color: white;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
main {
margin: 16px 0;
width: 850px;

10
src/window.js Normal file
View File

@ -0,0 +1,10 @@
function closeWindow(windowClass) {
const elements = document.querySelectorAll(`.${windowClass}`);
elements.forEach(el => {
el.style.display = 'none';
});
if (windowClass === 'main') {
const newMain = document.getElementById("closed-main");
newMain.style.display = 'block'
}
}