Wip about page
This commit is contained in:
parent
da67b54f6e
commit
bf963c4ab8
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>
|
<body>
|
||||||
<script type="module" src="/static/crossroad.mjs"></script>
|
<script type="module" src="/static/crossroad.mjs"></script>
|
||||||
|
<script type="module" src="/static/about.mjs"></script>
|
||||||
<div class="flex-vcenter">
|
<div class="flex-vcenter">
|
||||||
<dialog id="mainDialog" class="half-width half-height">
|
<dialog id="mainDialog" class="half-width half-height">
|
||||||
<header class="separator-bottom margin-large-bottom">
|
<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>
|
<button type="reset" class="close">Cancel</button>
|
||||||
</form>
|
</form>
|
||||||
</dialog>
|
</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>
|
<dialog id="spinner"><span class="spinner"></span></dialog>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
@ -63,6 +63,10 @@ abbr[title] {
|
||||||
|
|
||||||
/* Generic styling properties */
|
/* Generic styling properties */
|
||||||
|
|
||||||
|
.wrap-balance {
|
||||||
|
text-wrap: balance;
|
||||||
|
}
|
||||||
|
|
||||||
.align-start {
|
.align-start {
|
||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
@ -139,6 +143,14 @@ abbr[title] {
|
||||||
min-height: 50%;
|
min-height: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.half-width-max {
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.half-height-max {
|
||||||
|
max-height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
.full-width {
|
.full-width {
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -163,6 +175,10 @@ abbr[title] {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.margin-none-top {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.margin-large-bottom {
|
.margin-large-bottom {
|
||||||
margin-bottom: var(--large);
|
margin-bottom: var(--large);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue