added changelog
This commit is contained in:
parent
33fdb9af12
commit
341dd400a4
38
index.html
38
index.html
@ -3,12 +3,13 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="icon" href="/icon.jpg"/>
|
<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"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>Guams - Home</title>
|
<title>Guams - Home</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
<div class="title-bar">
|
<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">
|
||||||
<button class="title-bar-button">
|
<button class="title-bar-button">
|
||||||
@ -22,19 +23,38 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="header">
|
<div class="window-border">
|
||||||
<div class="banner-div">
|
<div class="banner-div window-border">
|
||||||
<img src="/src/img/banner_about.png">
|
<img src="/src/img/banner_about.png">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content window-border">
|
||||||
|
<div class="left-panel">
|
||||||
<div class="navigation">
|
<div class="navigation">
|
||||||
<span id="nav-title">Navigation</span>
|
<span id="nav-title">Navigation</span>
|
||||||
<a class="navbar-link" href="/">Home</a>
|
<a class="navbar-link" href="/">Home</a>
|
||||||
<a class="navbar-link" href="./about.html">My projects</a>
|
<a class="navbar-link" href="./about.html">My projects</a>
|
||||||
<a class="navbar-link" href="https://abonentendeur.guams.fr">My blog</a>
|
<a class="navbar-link" href="https://abonentendeur.guams.fr">My blog</a>
|
||||||
</div>
|
</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">
|
<div class="presentation">
|
||||||
<h1>Welcome to my website</h1>
|
<h1>Welcome to my website</h1>
|
||||||
<span>Hi, I'm <strong>Guams</strong>, a french developer.</span>
|
<span>Hi, I'm <strong>Guams</strong>, a french developer.</span>
|
||||||
@ -45,11 +65,17 @@
|
|||||||
<span>
|
<span>
|
||||||
On my free time I share my thoughts on the works I play or read on my
|
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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
<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>
|
||||||
</html>
|
</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;
|
margin: 0;
|
||||||
font-size: 16px;
|
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 {
|
body {
|
||||||
cursor: url('/src/img/cursor.png'), default;
|
cursor: url('/src/img/cursor.png'), default;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -14,7 +34,6 @@ body {
|
|||||||
|
|
||||||
|
|
||||||
.banner-div {
|
.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;
|
display: block;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
@ -34,7 +53,6 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.title-bar {
|
.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;
|
align-items: center;
|
||||||
background: #131862;
|
background: #131862;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -42,6 +60,35 @@ main {
|
|||||||
padding: 7px;
|
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 {
|
.title-bar-button {
|
||||||
background: silver;
|
background: silver;
|
||||||
border: none;
|
border: none;
|
||||||
@ -52,16 +99,11 @@ main {
|
|||||||
text-shadow: 0 0 #222;
|
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 {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-between;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
color: white;
|
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;
|
background-color: #2e4482;
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
}
|
}
|
||||||
@ -85,7 +127,6 @@ li {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: #546bab;
|
background-color: #546bab;
|
||||||
width: 20%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
@ -123,5 +164,6 @@ h1 {
|
|||||||
.presentation {
|
.presentation {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
|
min-width: 70%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user