Stupid-Cat
/
c.stupid.cat
mirror of https://git.gay/doughmination/c.stupid.cat.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Rework Discord: dedicated /discord page + Lanyard friend cards, top-left nav, drop corner badges, merge player.css (#2)

This commit is contained in:
Clove 2026-06-16 09:47:29 +01:00
parent daf71d0363
commit fb91d15607
11 changed files with 1056 additions and 1141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
88x31/index.html
View File

@ -47,14 +47,13 @@
<a class="nav-link" data-href="/">Link Center</a>
<a class="nav-link" data-href="/cool-people">Cool People</a>
<a class="nav-link" data-href="/dev-info">Dev Info</a>
<a class="nav-link" data-href="/discord">Discord</a>
<a class="nav-link" data-href="/discord-bots">Discord Bots</a>
<a class="nav-link" data-href="/music">Music</a>
<a class="nav-link selected" data-href="/88x31">88x31</a>
</nav>
</header>
<div id="now-playing"></div>
<div class="hub">
<header class="hub-header">
<h1>88x31 Buttons</h1>
@ -80,29 +79,8 @@
</section>
</div>
<aside class="badges" aria-label="System badges">
<span class="badge">
<img class="badge-icon" src="/assets/misc/amd.svg" alt="">
AMD Purist
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/arch.svg" alt="">
I use arch btw
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/debian.svg" alt="">
Debian Professional
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/apple.svg" alt="">
Apple Ecosystem Enthusiast
</span>
</aside>
<script src="/js/cat.js" data-cat="/assets/oneko/classics/classic.png"></script>
<script src="/js/nav.js"></script>
<script src="/js/now-playing.js" data-user="1464890289922641993"></script>
<script src="/js/flavors.js"></script>
<script src="/js/dev-mode.js"></script>
<script src="/js/terminal.js"></script>

98
cool-people/index.html
View File

@ -47,116 +47,30 @@
<a class="nav-link" data-href="/">Link Center</a>
<a class="nav-link selected" data-href="/cool-people">Cool People</a>
<a class="nav-link" data-href="/dev-info">Dev Info</a>
<a class="nav-link" data-href="/discord">Discord</a>
<a class="nav-link" data-href="/discord-bots">Discord Bots</a>
<a class="nav-link" data-href="/music">Music</a>
<a class="nav-link" data-href="/88x31">88x31</a>
</nav>
</header>
<div id="now-playing"></div>
<div class="hub">
<div class="hub friends-wrap">
<header class="hub-header">
<h1>Cool People</h1>
<p class="tagline">This is where people I know can be put up on my site, click their profiles for their
pages</p>
</header>
<!-- Girlfriend -->
<section class="section">
<h2 class="section-title">Fiancée</h2>
<div class="friend-grid">
<a class="friend">
<img class="friend-pfp wife" src="/assets/friends/ari.png">
<span class="friend-name wife">Aria</span>
</a>
</div>
</section>
<!-- Close Friends -->
<section class="section">
<h2 class="section-title">Close Friends</h2>
<div class="friend-grid">
<a class="friend">
<img class="friend-pfp close" src="/assets/friends/ria.png">
<span class="friend-name close">Ria</span>
</a>
<a class="friend" href="https://cammy-the-cat.com" target="_blank" rel="noopener">
<img class="friend-pfp close" src="/assets/friends/camilla.png">
<span class="friend-name close">Camilla</span>
</a>
<a class="friend">
<img class="friend-pfp close" src="/assets/friends/saphie.png">
<span class="friend-name close">Saphie</span>
</a>
<a class="friend" href="https://a.stupid.cat" target="_blank" rel="noopener">
<img class="friend-pfp close" src="/assets/friends/meowhem.png">
<span class="friend-name close">Ari</span>
</a>
</div>
</section>
<section class="section">
<h2 class="section-title">Friends</h2>
<div class="friend-grid">
<a class="friend">
<img class="friend-pfp" src="/assets/friends/meme.png">
<span class="friend-name">Memeancia</span>
</a>
<a class="friend">
<img class="friend-pfp" src="/assets/friends/n.png">
<span class="friend-name">N</span>
</a>
<a class="friend">
<img class="friend-pfp" src="/assets/friends/lylla.png">
<span class="friend-name">Lylla</span>
</a>
<a class="friend">
<img class="friend-pfp" src="/assets/friends/simon.png">
<span class="friend-name">Simon</span>
</a>
</div>
</section>
<section class="section">
<h2 class="section-title">Other Peeps</h2>
<p class="section-subtitle">You can request to be added here!</p>
<a class="friend" href="https://aureal.dev/" target="_blank" rel="noopener">
<img class="friend-pfp known" src="/assets/friends/aureal.gif">
<span class="friend-name known">Aureal</span>
</a>
</section>
<!-- Cards are rendered by friends.js from the FRIENDS config -->
<div id="friends-root"></div>
</div>
<aside class="badges" aria-label="System badges">
<span class="badge">
<img class="badge-icon" src="/assets/misc/amd.svg" alt="">
AMD Purist
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/arch.svg" alt="">
I use arch btw
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/debian.svg" alt="">
Debian Professional
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/apple.svg" alt="">
Apple Ecosystem Enthusiast
</span>
</aside>
<script src="/js/cat.js" data-cat="/assets/oneko/classics/classic.png"></script>
<script src="/js/nav.js"></script>
<script src="/js/now-playing.js" data-user="1464890289922641993"></script>
<script src="/js/flavors.js"></script>
<script src="/js/dev-mode.js"></script>
<script src="/js/terminal.js"></script>
<script src="/js/site-switcher.js"></script>
<script src="/js/friends.js"></script>
</body>
</html>
</html>

1332
css/main.css
View File

File diff suppressed because it is too large Load Diff

511
css/player.css
View File

@ -1,511 +0,0 @@
html[data-theme="mocha"] {
color-scheme: dark;
--rosewater: #f5e0dc; --flamingo: #f2cdcd; --pink: #f5c2e7;
--accent-rgb: 245, 194, 231;
--mauve: #cba6f7; --red: #f38ba8; --maroon: #eba0ac; --peach: #fab387;
--yellow: #f9e2af; --green: #a6e3a1; --teal: #94e2d5; --sky: #89dceb;
--saphire: #74c7ec; --blue: #89b4fa; --lavender: #b4befe;
--text: #cdd6f4; --subtext-0: #a6adc8; --subtext-1: #bac2de;
--overlay-0: #6c7086; --overlay-1: #7f849c; --overlay-2: #9399b2;
--surface-0: #313244; --surface-1: #45475a; --surface-2: #585b70;
--base: #1e1e2e; --mantle: #181825; --crust: #11111b;
}
html[data-theme="macchiato"] {
color-scheme: dark;
--rosewater: #f4dbd6; --flamingo: #f0c6c6; --pink: #f5bde6;
--accent-rgb: 245, 189, 230;
--mauve: #c6a0f6; --red: #ed8796; --maroon: #ee99a0; --peach: #f5a97f;
--yellow: #eed49f; --green: #a6da95; --teal: #8bd5ca; --sky: #91d7e3;
--saphire: #7dc4e4; --blue: #8aadf4; --lavender: #b7bdf8;
--text: #cad3f5; --subtext-0: #a5adcb; --subtext-1: #b8c0e0;
--overlay-0: #6e738d; --overlay-1: #8087a2; --overlay-2: #939ab7;
--surface-0: #363a4f; --surface-1: #494d64; --surface-2: #5b6078;
--base: #24273a; --mantle: #1e2030; --crust: #181926;
}
html[data-theme="frappe"] {
color-scheme: dark;
--rosewater: #f2d5cf; --flamingo: #eebebe; --pink: #f4b8e4;
--accent-rgb: 244, 184, 228;
--mauve: #ca9ee6; --red: #e78284; --maroon: #ea999c; --peach: #ef9f76;
--yellow: #e5c890; --green: #a6d189; --teal: #81c8be; --sky: #99d1db;
--saphire: #85c1dc; --blue: #8caaee; --lavender: #babbf1;
--text: #c6d0f5; --subtext-0: #a5adce; --subtext-1: #b5bfe2;
--overlay-0: #737994; --overlay-1: #838ba7; --overlay-2: #949cbb;
--surface-0: #414559; --surface-1: #51576d; --surface-2: #626880;
--base: #303446; --mantle: #292c3c; --crust: #232634;
}
html[data-theme="latte"] {
color-scheme: light;
--rosewater: #dc8a78; --flamingo: #dd7878; --pink: #ea76cb;
--accent-rgb: 234, 118, 203;
--mauve: #8839ef; --red: #d20f39; --maroon: #e64553; --peach: #fe640b;
--yellow: #df8e1d; --green: #40a02b; --teal: #179299; --sky: #04a5e5;
--saphire: #209fb5; --blue: #1e66f5; --lavender: #7287fd;
--text: #4c4f69; --subtext-0: #6c6f85; --subtext-1: #5c5f77;
--overlay-0: #9ca0b0; --overlay-1: #8c8fa1; --overlay-2: #7c7f93;
--surface-0: #ccd0da; --surface-1: #bcc0cc; --surface-2: #acb0be;
--base: #eff1f5; --mantle: #e6e9ef; --crust: #dce0e8;
}
/* =====================================================================
* 2. STANDALONE PAGE STAGE
* Only the dedicated /api pages use .api-stage; it centers a single
* card on a Catppuccin gradient. The homepage never sets data-theme
* or .api-stage, so its fixed top-left card is untouched.
* ===================================================================== */
html[data-theme] body.api-body {
margin: 0;
min-height: 100vh;
font-family: 'Comic Code', ui-monospace, system-ui, sans-serif;
color: var(--text);
background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
}
.api-stage {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
/* On the stage, the card sits in flow & centered instead of fixed. */
.api-stage .presence-card {
position: static;
margin: 0;
max-width: 320px;
width: 100%;
}
.api-empty {
text-align: center;
color: var(--subtext-0);
font-size: 0.9rem;
max-width: 420px;
line-height: 1.5;
}
.api-empty a { color: rgb(var(--accent-rgb)); }
/* =====================================================================
* 3. PRESENCE CARD (unified Discord-style profile pill)
* Lifted verbatim from main.css §13 so the card is self-contained.
* ===================================================================== */
.presence-card {
--np-accent: 245, 194, 231;
position: fixed;
top: 1rem;
left: 1rem;
z-index: 6;
width: max-content;
max-width: 280px;
background: var(--surface-0);
border: 1px solid var(--surface-1);
border-radius: 16px;
box-shadow: 0 8px 26px -12px rgba(17, 17, 27, 0.7);
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.presence-card[hidden] { display: none; }
.presence-card.has-accent {
border-color: rgba(var(--np-accent), 0.5);
box-shadow: 0 8px 26px -12px rgba(var(--np-accent), 0.6);
}
/* ---- header (always visible) ---- */
.pc-head {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.7rem;
}
.pc-avatar {
position: relative;
width: 40px;
height: 40px;
flex-shrink: 0;
}
.pc-av-img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
display: block;
}
/* avatar decoration / frame overlay (Discord cosmetic) */
.pc-av-deco {
position: absolute;
top: 50%;
left: 50%;
width: 54px;
height: 54px;
transform: translate(-50%, -50%);
pointer-events: none;
}
.pc-av-deco[hidden] { display: none; }
.pc-status {
position: absolute;
right: -1px;
bottom: -1px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2.5px solid var(--surface-0);
background: var(--overlay-0);
}
.presence-card[data-status="online"] .pc-status { background: var(--green); }
.presence-card[data-status="idle"] .pc-status { background: var(--yellow); }
.presence-card[data-status="dnd"] .pc-status { background: var(--red); }
.presence-card[data-status="offline"] .pc-status { background: var(--overlay-0); }
.pc-id {
display: flex;
flex-direction: column;
gap: 0.05rem;
min-width: 0;
}
.pc-name {
font-size: 0.92rem;
font-weight: 700;
color: rgb(var(--accent-rgb));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.5s ease;
}
.pc-user {
font-size: 0.7rem;
color: var(--subtext-0);
white-space: nowrap;
}
.pc-user:empty { display: none; }
/* ---- expandable sections ---- */
.pc-sections {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 0 0.6rem 0.6rem;
transition: opacity 0.2s ease;
}
.presence-card:not(.has-sections) .pc-sections { display: none; }
.pc-row {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.4rem 0.5rem;
border-radius: 10px;
background: var(--mantle);
border: 1px solid transparent;
color: var(--text);
text-decoration: none;
transition: border-color 0.15s ease, transform 0.15s ease;
}
a.pc-row:hover,
.pc-row--stack:hover {
border-color: rgba(var(--np-accent), 0.55);
transform: translateX(2px);
}
.pc-row-text {
display: flex;
flex-direction: column;
gap: 0.04rem;
min-width: 0;
}
.pc-row-kind {
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--subtext-0);
}
.pc-row-title {
font-size: 0.8rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.pc-row-sub {
font-size: 0.7rem;
color: var(--subtext-0);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.pc-row-title:empty, .pc-row-sub:empty { display: none; }
.pc-row-elapsed {
font-size: 0.62rem;
color: var(--subtext-0);
margin-top: 0.1rem;
}
.pc-row-elapsed:empty { display: none; }
/* artwork / icons */
.pc-art,
.pc-row-ic-img {
width: 38px;
height: 38px;
border-radius: 7px;
object-fit: cover;
flex-shrink: 0;
}
.pc-row-ic.pc-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
margin: 0 0.5rem;
background: rgb(var(--accent-rgb));
}
.pc-dev .pc-row-ic.pc-dot { background: var(--blue); border-radius: 2px; }
.pc-game .pc-row-ic.pc-dot { background: var(--green); }
.pc-stream .pc-row-ic.pc-dot{ background: var(--mauve); }
/* custom status */
.pc-custom {
background: transparent;
border: none;
padding: 0.1rem 0.5rem;
gap: 0.4rem;
align-items: flex-start;
}
.pc-emoji { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.05rem; }
.pc-custom-text {
font-size: 0.74rem;
color: var(--subtext-0);
max-width: 230px;
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.35;
}
/* spotify progress */
.pc-spotify .pc-row-title { color: var(--green); }
.pc-progress {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin-top: 0.25rem;
width: 180px;
}
.pc-bar {
height: 4px;
border-radius: 999px;
background: var(--surface-1);
overflow: hidden;
}
.pc-fill {
display: block;
height: 100%;
width: 0;
border-radius: 999px;
background: rgb(var(--np-accent));
}
.pc-times {
display: flex;
justify-content: space-between;
font-size: 0.58rem;
color: var(--subtext-0);
font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
.presence-card { max-width: calc(100vw - 2rem); }
.api-stage .presence-card { max-width: 100%; }
}
/* ---- extended Lanyard fields ---- */
.pc-name-row {
display: flex;
align-items: center;
gap: 0.35rem;
min-width: 0;
}
.pc-name-row .pc-name { min-width: 0; }
/* gradient display name (display_name_styles) */
.pc-name.is-gradient {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* server tag chip (primary_guild) */
.pc-tag {
display: inline-flex;
align-items: center;
gap: 0.2rem;
flex-shrink: 0;
padding: 0.05rem 0.35rem;
border-radius: 6px;
background: var(--surface-2);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--text);
}
.pc-tag[hidden] { display: none; }
.pc-tag-badge { width: 14px; height: 14px; display: block; }
/* username + active-platform indicators */
.pc-sub-row {
display: flex;
align-items: center;
gap: 0.35rem;
}
.pc-platforms {
display: inline-flex;
align-items: center;
gap: 0.2rem;
color: var(--subtext-0);
}
.pc-plat { width: 12px; height: 12px; display: inline-flex; }
.pc-plat svg { width: 12px; height: 12px; display: block; }
/* KV meta line (location, etc.) */
.pc-meta {
display: flex;
align-items: center;
gap: 0.25rem;
margin-top: 0.1rem;
font-size: 0.66rem;
color: var(--subtext-0);
}
.pc-meta[hidden] { display: none; }
.pc-pin { font-size: 0.7rem; line-height: 1; }
/* stacked rows (activity rows that carry buttons) */
.pc-row--stack {
flex-direction: column;
align-items: stretch;
gap: 0.4rem;
}
.pc-row-link {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
color: var(--text);
text-decoration: none;
}
/* activity icon with small corner badge (assets.small_image) */
.pc-ic-wrap {
position: relative;
flex-shrink: 0;
width: 38px;
height: 38px;
}
.pc-ic-wrap .pc-row-ic-img { width: 38px; height: 38px; }
.pc-ic-badge {
position: absolute;
right: -3px;
bottom: -3px;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--mantle);
object-fit: cover;
}
/* activity buttons (labels from presence) */
.pc-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.pc-btn {
font-size: 0.66rem;
padding: 0.22rem 0.55rem;
border-radius: 6px;
background: var(--surface-1);
color: var(--text);
text-decoration: none;
border: 1px solid transparent;
transition: border-color 0.15s ease, background 0.15s ease;
}
.pc-btn:hover {
border-color: rgb(var(--np-accent));
background: var(--surface-2);
}
/* profile badges */
.pc-badges {
display: inline-flex;
align-items: center;
gap: 0.2rem;
flex-wrap: wrap;
margin-top: 0.15rem;
}
.pc-badges:empty { display: none; }
.pc-badge { width: 16px; height: 16px; display: block; }
.pc-badge-link { display: inline-flex; line-height: 0; }
/* wishlist star + panel */
.pc-star {
margin-left: auto;
align-self: flex-start;
background: none;
border: none;
cursor: pointer;
font-size: 0.95rem;
line-height: 1;
color: var(--subtext-0);
padding: 0.1rem 0.15rem;
transition: color 0.15s ease, transform 0.15s ease;
}
.pc-star:hover { color: rgb(var(--accent-rgb)); transform: scale(1.12); }
.pc-star.on { color: var(--yellow); }
.pc-wishlist { display: none; }
.presence-card.show-wishlist .pc-wishlist {
display: block;
border-top: 1px solid var(--surface-1);
margin: 0 0.6rem;
padding: 0.6rem 0 0.7rem;
}
.pc-wishlist-title {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--subtext-0);
margin-bottom: 0.45rem;
}
.pc-wl-item {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.25rem 0.4rem;
border-radius: 8px;
text-decoration: none;
color: var(--text);
}
a.pc-wl-item:hover { background: var(--mantle); }
.pc-wl-ic { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; }
.pc-wl-name { font-size: 0.8rem; }
.pc-wl-empty { font-size: 0.78rem; color: var(--subtext-0); margin: 0; }
/* Discord profile gradient (Catppuccin is the fallback) */
.presence-card.has-profile-grad {
background: linear-gradient(180deg, rgb(var(--pc-grad-1-rgb)) 0%, rgb(var(--pc-grad-2-rgb)) 100%);
}
.presence-card.has-profile-grad:not(.has-accent) {
border-color: rgba(var(--pc-grad-1-rgb), 0.6);
}
.presence-card.has-profile-grad .pc-row { background: rgba(17, 17, 27, 0.55); }

66
dev-info/index.html
View File

@ -42,13 +42,12 @@
<body>
<div id="now-playing"></div>
<header class="nav">
<nav class="nav-links">
<a class="nav-link" data-href="/">Link Center</a>
<a class="nav-link" data-href="/cool-people">Cool People</a>
<a class="nav-link selected" data-href="/dev-info">Dev Info</a>
<a class="nav-link" data-href="/discord">Discord</a>
<a class="nav-link" data-href="/discord-bots">Discord Bots</a>
<a class="nav-link" data-href="/music">Music</a>
<a class="nav-link" data-href="/88x31">88x31</a>
@ -192,6 +191,49 @@
</dl>
</details>
<details class="waka-section about-setup" id="about-setup">
<summary class="section-title">Setup &amp; Badges</summary>
<p class="hw-intro">The little flags I used to fly in the corner — now with the context behind them. ✨</p>
<div class="about-badges">
<span class="badge">
<img class="badge-icon" src="/assets/misc/amd.svg" alt="">
AMD Purist
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/arch.svg" alt="">
I use arch btw
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/debian.svg" alt="">
Debian Professional
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/apple.svg" alt="">
Apple Ecosystem Enthusiast
</span>
</div>
<dl class="hw-list about-list">
<div class="hw-row">
<dt>AMD Purist</dt>
<dd>Team Red top to bottom — Ryzen on the CPU, Radeon on the GPU. No green in this rig.</dd>
</div>
<div class="hw-row">
<dt>Arch btw</dt>
<dd>Daily driver is Arch Linux: rolling release, built up from the ground exactly how I like it.</dd>
</div>
<div class="hw-row">
<dt>Debian Pro</dt>
<dd>Where stability matters — servers and bots — Debian does the heavy lifting.</dd>
</div>
<div class="hw-row">
<dt>Apple Ecosystem</dt>
<dd>The phone/tablet/watch side of life lives on Apple, so the whole stack stays in sync.</dd>
</div>
</dl>
<!-- hidden pokéball: find & click it to unlock the Pokémon cats -->
<img id="pokeball-secret" src="/assets/misc/pokeball.svg" alt="" aria-hidden="true">
</details>
<div id="contrib"></div>
<div id="waka-content" hidden>
@ -229,28 +271,8 @@
</div>
</main>
<aside class="badges" aria-label="System badges">
<span class="badge">
<img class="badge-icon" src="/assets/misc/amd.svg" alt="">
AMD Purist
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/arch.svg" alt="">
I use arch btw
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/debian.svg" alt="">
Debian Professional
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/apple.svg" alt="">
Apple Ecosystem Enthusiast
</span>
</aside>
<script src="/js/cat.js" data-cat="/assets/oneko/classics/classic.png"></script>
<script src="/js/nav.js"></script>
<script src="/js/now-playing.js" data-user="1464890289922641993"></script>
<script src="/js/flavors.js"></script>
<script src="/js/dev-mode.js"></script>
<script src="/js/dev-info.js"></script>

26
discord-bots/index.html
View File

@ -42,13 +42,12 @@
<body>
<div id="now-playing"></div>
<header class="nav">
<nav class="nav-links">
<a class="nav-link" data-href="/">Link Center</a>
<a class="nav-link" data-href="/cool-people">Cool People</a>
<a class="nav-link" data-href="/dev-info">Dev Info</a>
<a class="nav-link" data-href="/discord">Discord</a>
<a class="nav-link selected" data-href="/discord-bots">Discord Bots</a>
<a class="nav-link" data-href="/music">Music</a>
<a class="nav-link" data-href="/88x31">88x31</a>
@ -177,31 +176,8 @@
</section>
</main>
<aside class="badges" aria-label="System badges">
<span class="badge">
<img class="badge-icon" src="/assets/misc/amd.svg" alt="">
AMD Purist
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/arch.svg" alt="">
I use arch btw
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/debian.svg" alt="">
Debian Professional
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/apple.svg" alt="">
Apple Ecosystem Enthusiast
</span>
<!-- hidden pokéball: find & click it to unlock the Pokémon cats -->
<img id="pokeball-secret" src="/assets/misc/pokeball.svg" alt="" aria-hidden="true">
</aside>
<script src="/js/cat.js" data-cat="/assets/oneko/classics/classic.png"></script>
<script src="/js/nav.js"></script>
<script src="/js/now-playing.js" data-user="1464890289922641993"></script>
<script src="/js/flavors.js"></script>
<script src="/js/dev-mode.js"></script>
<script src="/js/site-switcher.js"></script>

23
index.html
View File

@ -46,14 +46,13 @@
<a class="nav-link selected" data-href="/">Link Center</a>
<a class="nav-link" data-href="/cool-people">Cool People</a>
<a class="nav-link" data-href="/dev-info">Dev Info</a>
<a class="nav-link" data-href="/discord">Discord</a>
<a class="nav-link" data-href="/discord-bots">Discord Bots</a>
<a class="nav-link" data-href="/music">Music</a>
<a class="nav-link" data-href="/88x31">88x31</a>
</nav>
</header>
<div id="now-playing"></div>
<main class="hub">
<header class="hub-header">
<img class="pfp" src="/assets/favicon/avatar.png" alt="Clove Twilight avatar">
@ -63,30 +62,10 @@
<div class="terminal" id="terminal"></div>
</main>
<aside class="badges" aria-label="System badges">
<span class="badge">
<img class="badge-icon" src="/assets/misc/amd.svg" alt="">
AMD Purist
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/arch.svg" alt="">
I use arch btw
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/debian.svg" alt="">
Debian Professional
</span>
<span class="badge">
<img class="badge-icon" src="/assets/misc/apple.svg" alt="">
Apple Ecosystem Enthusiast
</span>
</aside>
<div id="visitor-counter" aria-label="Visitor count"></div>
<script src="/js/cat.js" data-cat="/assets/oneko/classics/classic.png"></script>
<script src="/js/nav.js"></script>
<script src="/js/now-playing.js" data-user="1464890289922641993"></script>
<script src="/js/flavors.js"></script>
<script src="/js/dev-mode.js"></script>
<script src="/js/terminal.js"></script>

33
js/dev-mode.js
View File

@ -26,7 +26,7 @@
var css = `
.dev-mode-badge {
position: fixed;
top: 1rem;
bottom: 1rem;
left: 1rem;
z-index: 6;
display: inline-flex;
@ -70,35 +70,8 @@
'<span class="dev-mode-pulse" aria-hidden="true"></span>' +
"<span>Dev Mode</span>";
document.body.appendChild(badge);
var np = document.getElementById("now-playing");
function reposition() {
var gap = 8; // px below the widget
var rect = np ? np.getBoundingClientRect() : null;
// A fixed element has no offsetParent, so judge visibility by its
// rendered size instead.
var visible = np && !np.hidden && rect.height > 0 && rect.width > 0;
if (visible) {
badge.style.top = (rect.bottom + gap) + "px";
badge.style.left = rect.left + "px";
} else {
badge.style.top = ""; // back to the 1rem default
badge.style.left = "";
}
}
reposition();
window.addEventListener("resize", reposition);
if (np) {
if (window.ResizeObserver) new ResizeObserver(reposition).observe(np);
// now-playing.js toggles [hidden] / inline styles when presence loads.
new MutationObserver(reposition).observe(np, {
attributes: true,
attributeFilter: ["hidden", "style", "class"]
});
}
// The badge is now a simple fixed pill in the bottom-left corner — it no
// longer trails the presence widget, so there's nothing else to position.
}
if (document.body) {

4
js/flavors.js
View File

@ -38,7 +38,9 @@
topbar.className = "topbar";
document.body.insertBefore(topbar, document.body.firstChild);
const np = document.getElementById("now-playing");
if (np) topbar.appendChild(np);
// Don't hijack the presence card when it's the centerpiece of the
// dedicated /discord page (it lives inside .presence-stage there).
if (np && !np.closest(".presence-stage")) topbar.appendChild(np);
}
topbar.appendChild(bar);

79
js/now-playing.js
View File

@ -37,6 +37,7 @@
card.className = "presence-card";
card.hidden = true;
card.innerHTML =
'<img class="pc-banner" alt="" referrerpolicy="no-referrer" hidden>' +
'<div class="pc-head">' +
'<span class="pc-avatar">' +
'<img class="pc-av-img" alt="" referrerpolicy="no-referrer" crossorigin="anonymous">' +
@ -50,6 +51,7 @@
'</span>' +
'<span class="pc-sub-row">' +
'<span class="pc-user"></span>' +
'<span class="pc-pronouns" hidden></span>' +
'<span class="pc-platforms" aria-hidden="true"></span>' +
'</span>' +
'<span class="pc-meta" hidden></span>' +
@ -57,6 +59,8 @@
'</span>' +
'<button class="pc-star" type="button" aria-label="show wishlist" title="wishlist">★</button>' +
'</div>' +
'<div class="pc-bio" hidden></div>' +
'<div class="pc-connections" hidden></div>' +
'<div class="pc-sections"></div>' +
'<div class="pc-wishlist" id="pc-wishlist"></div>';
mount.replaceWith(card);
@ -72,6 +76,10 @@
const sections = card.querySelector(".pc-sections");
const starBtn = card.querySelector(".pc-star");
const wishlistEl = card.querySelector(".pc-wishlist");
const bannerEl = card.querySelector(".pc-banner");
const bioEl = card.querySelector(".pc-bio");
const connectionsEl = card.querySelector(".pc-connections");
const pronounsEl = card.querySelector(".pc-pronouns");
// ---- wishlist (revealed by the star) ------------------------------------
let wishlistItems = null;
@ -226,6 +234,64 @@
card.style.setProperty("--pc-grad-2-rgb", rgbTriplet(colors[1]));
card.classList.add("has-profile-grad");
}
// ---- banner / bio / connected accounts (extras for the /discord page) ---
function bannerUrl(id, hash) {
if (!id || !hash) return null;
const ext = String(hash).startsWith("a_") ? "gif" : "png";
return proxyImg("https://cdn.discordapp.com/banners/" + id + "/" + hash + "." + ext + "?size=600", { w: 600 });
}
function applyBanner(url, fallbackColor) {
if (!bannerEl) return;
if (url) {
bannerEl.src = url;
bannerEl.hidden = false;
bannerEl.onerror = function () { bannerEl.hidden = true; card.classList.remove("has-banner"); };
card.classList.add("has-banner");
} else if (fallbackColor) {
bannerEl.hidden = true;
card.style.setProperty("--pc-banner-color", fallbackColor);
card.classList.add("has-banner-color");
}
}
function renderBio(text) {
if (!bioEl) return;
if (text && String(text).trim()) {
bioEl.textContent = String(text).trim();
bioEl.hidden = false;
} else {
bioEl.hidden = true;
}
}
// Best-effort profile links for the common connection types.
const CONNECTION_URLS = {
github: function (n) { return "https://github.com/" + n; },
twitter: function (n) { return "https://twitter.com/" + n; },
twitch: function (n) { return "https://twitch.tv/" + n; },
youtube: function (n, id) { return "https://youtube.com/channel/" + id; },
spotify: function (n, id) { return "https://open.spotify.com/user/" + id; },
steam: function (n, id) { return "https://steamcommunity.com/profiles/" + id; },
reddit: function (n) { return "https://reddit.com/user/" + n; },
instagram: function (n) { return "https://instagram.com/" + n; },
domain: function (n) { return "https://" + n; },
bluesky: function (n) { return "https://bsky.app/profile/" + n; }
};
function renderConnections(accounts) {
if (!connectionsEl) return;
const list = (accounts || []).filter(function (a) { return a && a.name; });
if (!list.length) { connectionsEl.hidden = true; return; }
connectionsEl.innerHTML = list.map(function (a) {
const maker = CONNECTION_URLS[a.type];
const url = maker ? maker(a.name, a.id) : null;
const inner = '<span class="pc-conn-type">' + esc(a.type) + "</span>" +
'<span class="pc-conn-name">' + esc(a.name) + "</span>" +
(a.verified ? '<span class="pc-conn-check" title="Verified">✓</span>' : "");
return url
? '<a class="pc-conn" href="' + esc(url) + '" target="_blank" rel="noopener">' + inner + "</a>"
: '<span class="pc-conn">' + inner + "</span>";
}).join("");
connectionsEl.hidden = false;
}
function loadDstn() {
fetch("https://dcdn.dstn.to/profile/" + DISCORD_USER_ID)
.then(function (r) { return r.ok ? r.json() : null; })
@ -235,6 +301,19 @@
if (j.user_profile && Array.isArray(j.user_profile.theme_colors)) {
applyProfileGradient(j.user_profile.theme_colors);
}
const u = j.user || {};
const prof = j.user_profile || {};
applyBanner(
bannerUrl(u.id || DISCORD_USER_ID, prof.banner || u.banner),
u.banner_color || (typeof u.accent_color === "number" ? intToHex(u.accent_color) : null)
);
renderBio(prof.bio || u.bio);
renderConnections(j.connected_accounts);
if (pronounsEl) {
const pr = prof.pronouns || u.pronouns;
if (pr) { pronounsEl.textContent = pr; pronounsEl.hidden = false; }
else pronounsEl.hidden = true;
}
})
.catch(function () {});
}

1
music/index.html
View File

@ -32,6 +32,7 @@
<a class="nav-link" data-href="/">Link Center</a>
<a class="nav-link" data-href="/cool-people">Cool People</a>
<a class="nav-link" data-href="/dev-info">Dev Info</a>
<a class="nav-link" data-href="/discord">Discord</a>
<a class="nav-link" data-href="/discord-bots">Discord Bots</a>
<a class="nav-link selected" data-href="/music">Music</a>
<a class="nav-link" data-href="/88x31">88x31</a>