added changelog
This commit is contained in:
parent
33fdb9af12
commit
341dd400a4
38
index.html
38
index.html
@ -3,12 +3,13 @@
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="icon" href="/icon.jpg"/>
|
||||
<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>Guams - Home</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="title-bar">
|
||||
<div class="title-bar window-border">
|
||||
<div class="title-bar-text">Guams - Home</div>
|
||||
<div class="title-bar-controls">
|
||||
<button class="title-bar-button">
|
||||
@ -22,19 +23,38 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="banner-div">
|
||||
<div class="window-border">
|
||||
<div class="banner-div window-border">
|
||||
<img src="/src/img/banner_about.png">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content window-border">
|
||||
<div class="left-panel">
|
||||
<div class="navigation">
|
||||
<span id="nav-title">Navigation</span>
|
||||
<a class="navbar-link" href="/">Home</a>
|
||||
<a class="navbar-link" href="./about.html">My projects</a>
|
||||
<a class="navbar-link" href="https://abonentendeur.guams.fr">My blog</a>
|
||||
</div>
|
||||
<div class="changelog-panel">
|
||||
<div class="title-bar window-border">
|
||||
<div class="title-bar-text">Changelog</div>
|
||||
<div class="title-bar-controls">
|
||||
<button class="title-bar-button">
|
||||
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button">
|
||||
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button">
|
||||
<img alt="close button" src="/src/img/close.svg" aria-hidden="true">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="changelog-content">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="presentation">
|
||||
<h1>Welcome to my website</h1>
|
||||
<span>Hi, I'm <strong>Guams</strong>, a french developer.</span>
|
||||
@ -45,11 +65,17 @@
|
||||
<span>
|
||||
On my free time I share my thoughts on the works I play or read on my
|
||||
<a class="hypertext-link" target="_blank" href="https://abonentendeur.guams.fr">blog.</a>
|
||||
</span>
|
||||
</span><br><br>
|
||||
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque doloribus ipsum quod rerum. Aliquid architecto asperiores debitis doloremque excepturi exercitationem facilis fugiat, nisi non possimus rem sit totam ut veniam.</span>
|
||||
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque doloribus ipsum quod rerum. Aliquid architecto asperiores debitis doloremque excepturi exercitationem facilis fugiat, nisi non possimus rem sit totam ut veniam.</span>
|
||||
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque doloribus ipsum quod rerum. Aliquid architecto asperiores debitis doloremque excepturi exercitationem facilis fugiat, nisi non possimus rem sit totam ut veniam.</span>
|
||||
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque doloribus ipsum quod rerum. Aliquid architecto asperiores debitis doloremque excepturi exercitationem facilis fugiat, nisi non possimus rem sit totam ut veniam.</span>
|
||||
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque doloribus ipsum quod rerum. Aliquid architecto asperiores debitis doloremque excepturi exercitationem facilis fugiat, nisi non possimus rem sit totam ut veniam.</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
<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>
|
||||
</html>
|
||||
|
||||
28
src/gitea.js
Normal file
28
src/gitea.js
Normal file
@ -0,0 +1,28 @@
|
||||
let xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.open("GET", 'https://gitea.guams.fr/api/v1/repos/Guams/guams_homepage/commits?sha=main');
|
||||
xhr.send();
|
||||
|
||||
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");
|
||||
const span = document.createElement("span");
|
||||
h2.innerText = new Date(commit.created).toLocaleDateString();
|
||||
span.innerText = commit.commit.message;
|
||||
li.appendChild(h2);
|
||||
li.appendChild(span);
|
||||
ul.appendChild(li);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
xhr.onerror = function () {
|
||||
console.error("Network error with gitea");
|
||||
};
|
||||
@ -1,9 +1,29 @@
|
||||
* {
|
||||
font-family: ms ui gothic, sans-serif;
|
||||
font-family: 'M PLUS 1p', sans-serif;
|
||||
/*font-family: ms ui gothic, sans-serif;*/
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.window-border {
|
||||
box-shadow: inset -1px -1px #404040, inset 1px 1px #DFDFDF,
|
||||
inset -2px -2px #7F7F7F, inset 2px 2px #FFFFFF,
|
||||
inset -3px -3px #C3C3C3, inset 3px 3px #C3C3C3,
|
||||
inset -4px -4px #C3C3C3, inset 4px 4px #C3C3C3;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.changelog-panel {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
cursor: url('/src/img/cursor.png'), default;
|
||||
display: flex;
|
||||
@ -14,7 +34,6 @@ body {
|
||||
|
||||
|
||||
.banner-div {
|
||||
box-shadow: inset -1px -1px #404040, inset 1px 1px #DFDFDF, inset -2px -2px #7F7F7F, inset 2px 2px #FFFFFF, inset -3px -3px #C3C3C3, inset 3px 3px #C3C3C3, inset -4px -4px #C3C3C3, inset 4px 4px #C3C3C3;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: 200px;
|
||||
@ -34,7 +53,6 @@ main {
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
box-shadow: inset -1px -1px #404040, inset 1px 1px #DFDFDF, inset -2px -2px #7F7F7F, inset 2px 2px #FFFFFF, inset -3px -3px #C3C3C3, inset 3px 3px #C3C3C3, inset -4px -4px #C3C3C3, inset 4px 4px #C3C3C3;
|
||||
align-items: center;
|
||||
background: #131862;
|
||||
display: flex;
|
||||
@ -42,6 +60,35 @@ main {
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
#changelog-content > li {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
#changelog-content {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
word-break: break-word;
|
||||
box-sizing: border-box;
|
||||
max-height: 160px;
|
||||
scrollbar-color: #a2a2a2 #ffffff;
|
||||
scrollbar-width: thin;
|
||||
box-shadow:
|
||||
inset -1px -1px #404040,
|
||||
inset 1px -1px #DFDFDF,
|
||||
inset -2px -2px #7F7F7F,
|
||||
inset 2px -2px #FFFFFF,
|
||||
inset -3px -3px #C3C3C3,
|
||||
inset 3px -3px #C3C3C3,
|
||||
inset -4px -4px #C3C3C3,
|
||||
inset 4px -4px #C3C3C3,
|
||||
inset -5px -5px #FFFFFF,
|
||||
inset 5px -5px #808080,
|
||||
inset -6px -6px #DFDFDF,
|
||||
inset 6px -6px #000000;
|
||||
padding: 7px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.title-bar-button {
|
||||
background: silver;
|
||||
border: none;
|
||||
@ -52,16 +99,11 @@ main {
|
||||
text-shadow: 0 0 #222;
|
||||
}
|
||||
|
||||
.header {
|
||||
box-shadow: inset -1px -1px #404040, inset 1px 1px #DFDFDF, inset -2px -2px #7F7F7F, inset 2px 2px #FFFFFF, inset -3px -3px #C3C3C3, inset 3px 3px #C3C3C3, inset -4px -4px #C3C3C3, inset 4px 4px #C3C3C3;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
color: white;
|
||||
box-shadow: inset -1px -1px #404040, inset 1px 1px #DFDFDF, inset -2px -2px #7F7F7F, inset 2px 2px #FFFFFF, inset -3px -3px #C3C3C3, inset 3px 3px #C3C3C3, inset -4px -4px #C3C3C3, inset 4px 4px #C3C3C3;
|
||||
background-color: #2e4482;
|
||||
padding: 7px;
|
||||
}
|
||||
@ -85,7 +127,6 @@ li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #546bab;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -123,5 +164,6 @@ h1 {
|
||||
.presentation {
|
||||
width: 80%;
|
||||
padding: 7px;
|
||||
min-width: 70%;
|
||||
text-align: center;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user