Wip about page
This commit is contained in:
parent
1057bf80dc
commit
8c7a845884
3 changed files with 59 additions and 0 deletions
17
static/about.mts
Normal file
17
static/about.mts
Normal 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");
|
|
@ -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">  (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>
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue