added some javascript interactions with the page
This commit is contained in:
parent
3e585fb7c9
commit
ee86ea5a07
10
index.html
10
index.html
@ -2,13 +2,16 @@
|
|||||||
<html lang="fr" id="html">
|
<html lang="fr" id="html">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<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">
|
<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"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>Home</title>
|
<title>Home</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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 window-border">
|
||||||
<div class="title-bar-text">Guams - Home</div>
|
<div class="title-bar-text">Guams - Home</div>
|
||||||
<div class="title-bar-controls">
|
<div class="title-bar-controls">
|
||||||
@ -18,7 +21,7 @@
|
|||||||
<button class="title-bar-button maximize-button">
|
<button class="title-bar-button maximize-button">
|
||||||
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
|
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
|
||||||
</button>
|
</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">
|
<img alt="close button" src="/src/img/close.svg" aria-hidden="true">
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -117,4 +120,5 @@
|
|||||||
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3.8.1/tsparticles.bundle.min.js"></script>
|
<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 type="module" src="/src/main.js"></script>
|
||||||
<script src="/src/gitea.js"></script>
|
<script src="/src/gitea.js"></script>
|
||||||
|
<script src="/src/window.js"></script>
|
||||||
</html>
|
</html>
|
||||||
|
@ -2,13 +2,16 @@
|
|||||||
<html lang="fr" id="html">
|
<html lang="fr" id="html">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<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">
|
<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"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>My projects</title>
|
<title>My projects</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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 window-border">
|
||||||
<div class="title-bar-text">Guams - My projects</div>
|
<div class="title-bar-text">Guams - My projects</div>
|
||||||
<div class="title-bar-controls">
|
<div class="title-bar-controls">
|
||||||
@ -18,7 +21,7 @@
|
|||||||
<button class="title-bar-button maximize-button">
|
<button class="title-bar-button maximize-button">
|
||||||
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
|
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
|
||||||
</button>
|
</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">
|
<img alt="close button" src="/src/img/close.svg" aria-hidden="true">
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -141,4 +144,5 @@
|
|||||||
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3.8.1/tsparticles.bundle.min.js"></script>
|
<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 type="module" src="/src/main.js"></script>
|
||||||
<script src="/src/gitea.js"></script>
|
<script src="/src/gitea.js"></script>
|
||||||
|
<script src="/src/window.js"></script>
|
||||||
</html>
|
</html>
|
||||||
|
BIN
public/icon.jpg
BIN
public/icon.jpg
Binary file not shown.
Before Width: | Height: | Size: 78 KiB |
BIN
public/icon.png
Normal file
BIN
public/icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 218 KiB |
@ -7,9 +7,6 @@ xhr.onload = () => {
|
|||||||
if (xhr.status === 200) {
|
if (xhr.status === 200) {
|
||||||
commits = JSON.parse(xhr.response);
|
commits = JSON.parse(xhr.response);
|
||||||
commits.forEach(commit => {
|
commits.forEach(commit => {
|
||||||
console.log(new Date(commit.created));
|
|
||||||
console.log(commit.commit.message);
|
|
||||||
|
|
||||||
const ul = document.getElementById("changelog-content");
|
const ul = document.getElementById("changelog-content");
|
||||||
const li = document.createElement("li");
|
const li = document.createElement("li");
|
||||||
const h2 = document.createElement("h2");
|
const h2 = document.createElement("h2");
|
||||||
|
@ -45,6 +45,19 @@ body {
|
|||||||
background: rgba(0, 0, 0, 0.5);
|
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 {
|
main {
|
||||||
margin: 16px 0;
|
margin: 16px 0;
|
||||||
width: 850px;
|
width: 850px;
|
||||||
|
10
src/window.js
Normal file
10
src/window.js
Normal 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'
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user