diff --git a/index.html b/index.html index ad6205d..a3b607a 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,13 @@ + Guams - Home
-
+
Guams - Home
-
-
+ diff --git a/src/gitea.js b/src/gitea.js new file mode 100644 index 0000000..a9e157b --- /dev/null +++ b/src/gitea.js @@ -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"); +}; \ No newline at end of file diff --git a/src/style.css b/src/style.css index c0ac94d..25c5be9 100644 --- a/src/style.css +++ b/src/style.css @@ -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; } \ No newline at end of file