Wip about page

This commit is contained in:
CenTdemeern1 2025-02-13 03:24:59 +01:00
parent da67b54f6e
commit bf963c4ab8
3 changed files with 59 additions and 0 deletions

17
static/about.mts Normal file
View file

@ -0,0 +1,17 @@
import { findImageOrFail } from "./dom.mjs";
async function populateUser(selector: string, origin: string, userId: string) {
const avatarImage = findImageOrFail(document.body, selector);
const userData = await fetch(`https://${origin}/api/users/show`, {
method: "POST",
body: JSON.stringify({
userId,
})
}).then(r => r.json());
if (userData.avatarUrl) {
avatarImage.src = userData.avatarUrl;
}
}
populateUser("#charlotteAvatar", "eepy.moe", "9xt2s326nxev039h");
populateUser("#kioAvatar", "kitsunes.club", "9810gvfne3");

View file

@ -11,6 +11,7 @@
<body>
<script type="module" src="/static/crossroad.mjs"></script>
<script type="module" src="/static/about.mjs"></script>
<div class="flex-vcenter">
<dialog id="mainDialog" class="half-width half-height">
<header class="separator-bottom margin-large-bottom">
@ -120,6 +121,31 @@ Unchecking this is not recommended, and this option only exists for exceptional
<button type="reset" class="close">Cancel</button>
</form>
</dialog>
<dialog id="about" class="half-width-max half-height-max">
<center>
<div class="flex-row wfit-content">
<h1>About FeDirect</h1>
<p class="margin-auto-top">&ThickSpace;(v0.1-alpha)</p>
</div>
<p class="margin-none-top wrap-balance">
FeDirect links the Fediverse together by allowing you to create generic links that
link people to their native instance!
</p>
<h2>About Nekomata</h2>
<div class="circlingMembers">
<center class="member">
<img id="charlotteAvatar" alt="Charlotte's avatar" />
Charlotte
@CenTdemeern1@eepy.moe
</center>
<center class="member">
<img id="kioAvatar" alt="Charlotte's avatar" />
Kio
@Kio@kitsunes.club
</center>
</div>
</center>
</dialog>
<dialog id="spinner"><span class="spinner"></span></dialog>
</body>

View file

@ -63,6 +63,10 @@ abbr[title] {
/* Generic styling properties */
.wrap-balance {
text-wrap: balance;
}
.align-start {
text-align: start;
}
@ -139,6 +143,14 @@ abbr[title] {
min-height: 50%;
}
.half-width-max {
max-width: 50%;
}
.half-height-max {
max-height: 50%;
}
.full-width {
min-width: 100%;
}
@ -163,6 +175,10 @@ abbr[title] {
margin-top: auto;
}
.margin-none-top {
margin-top: 0;
}
.margin-large-bottom {
margin-bottom: var(--large);
}