118 lines
4.5 KiB
Text
118 lines
4.5 KiB
Text
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head data-user-id="<%= user.id %>" data-instance-uri="<%= instance %>">
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><%= title %></title>
|
|
|
|
<link rel="stylesheet" href="/public/css/index.css">
|
|
<script src="/public/js/index.js" defer></script>
|
|
|
|
<meta name="color-scheme" content="dark">
|
|
</head>
|
|
<body>
|
|
<div class="user-card">
|
|
<div class="avatar-status-wrapper">
|
|
<div class="avatar-wrapper">
|
|
<img class="avatar" src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>" alt="Avatar">
|
|
<% if (user.avatar_decoration_data) { %>
|
|
<img class="decoration" src="https://cdn.discordapp.com/avatar-decoration-presets/<%= user.avatar_decoration_data.asset %>" alt="Decoration">
|
|
<% } %>
|
|
<% if (platform.mobile) { %>
|
|
<svg class="platform-icon mobile-only" viewBox="0 0 1000 1500" fill="#43a25a" aria-label="Mobile" width="17" height="17">
|
|
<path d="M 187 0 L 813 0 C 916.277 0 1000 83.723 1000 187 L 1000 1313 C 1000 1416.277 916.277 1500 813 1500 L 187 1500 C 83.723 1500 0 1416.277 0 1313 L 0 187 C 0 83.723 83.723 0 187 0 Z M 125 1000 L 875 1000 L 875 250 L 125 250 Z M 500 1125 C 430.964 1125 375 1180.964 375 1250 C 375 1319.036 430.964 1375 500 1375 C 569.036 1375 625 1319.036 625 1250 C 625 1180.964 569.036 1125 500 1125 Z"/>
|
|
</svg>
|
|
<% } else { %>
|
|
<div class="status-indicator <%= status %>"></div>
|
|
<% } %>
|
|
</div>
|
|
<div class="user-info">
|
|
<h1><%= username %></h1>
|
|
<% if (activities.length && activities[0].type === 4) {
|
|
const emoji = activities[0].emoji;
|
|
const isCustom = emoji?.id;
|
|
const emojiUrl = isCustom
|
|
? `https://cdn.discordapp.com/emojis/${emoji.id}.${emoji.animated ? "gif" : "png"}`
|
|
: null;
|
|
%>
|
|
<p class="custom-status">
|
|
<% if (isCustom && emojiUrl) { %>
|
|
<img src="<%= emojiUrl %>" alt="<%= emoji.name %>" class="custom-emoji">
|
|
<% } else if (emoji?.name) { %>
|
|
<%= emoji.name %>
|
|
<% } %>
|
|
<%= activities[0].state %>
|
|
</p>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<% const filtered = activities.filter(a => a.type !== 4); %>
|
|
<% if (filtered.length > 0) { %>
|
|
<h2>Activities</h2>
|
|
<ul class="activities">
|
|
<% filtered.forEach(activity => {
|
|
const start = activity.timestamps?.start;
|
|
const end = activity.timestamps?.end;
|
|
const now = Date.now();
|
|
const elapsed = start ? now - start : 0;
|
|
const total = (start && end) ? end - start : null;
|
|
const progress = (total && elapsed > 0) ? Math.min(100, Math.floor((elapsed / total) * 100)) : null;
|
|
|
|
const img = activity.assets?.large_image;
|
|
let art = null;
|
|
if (img?.includes("https")) {
|
|
const clean = img.split("/https/")[1];
|
|
if (clean) art = `https://${clean}`;
|
|
} else if (img?.startsWith("spotify:")) {
|
|
art = `https://i.scdn.co/image/${img.split(":")[1]}`;
|
|
} else if (img) {
|
|
art = `https://cdn.discordapp.com/app-assets/${activity.application_id}/${img}.png`;
|
|
}
|
|
%>
|
|
<li class="activity">
|
|
<% if (art) { %>
|
|
<img class="activity-art" src="<%= art %>" alt="Art">
|
|
<% } %>
|
|
|
|
<div class="activity-content">
|
|
<div class="activity-header <%= progress !== null ? 'no-timestamp' : '' %>">
|
|
<span class="activity-name"><%= activity.name %></span>
|
|
|
|
<% if (start && progress === null) { %>
|
|
<div class="activity-timestamp" data-start="<%= start %>">
|
|
<% const started = new Date(start); %>
|
|
<span>
|
|
Since: <%= started.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' }) %> <span class="elapsed"></span>
|
|
</span>
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
|
|
<% if (activity.details) { %>
|
|
<div class="activity-detail"><%= activity.details %></div>
|
|
<% } %>
|
|
<% if (activity.state) { %>
|
|
<div class="activity-detail"><%= activity.state %></div>
|
|
<% } %>
|
|
|
|
<% if (progress !== null) { %>
|
|
<div class="progress-bar" data-start="<%= start %>" data-end="<%= end %>">
|
|
<div class="progress-fill" style="width: <%= progress %>%"></div>
|
|
</div>
|
|
|
|
<% if (start && end) { %>
|
|
<div class="progress-time-labels" data-start="<%= start %>" data-end="<%= end %>">
|
|
<span class="progress-current">--:--</span>
|
|
<span class="progress-total"><%= Math.floor((end - start) / 60000) %>:<%= String(Math.floor(((end - start) % 60000) / 1000)).padStart(2, "0") %></span>
|
|
</div>
|
|
<% } %>
|
|
<% } %>
|
|
</div>
|
|
</li>
|
|
<% }) %>
|
|
</ul>
|
|
<% } %>
|
|
</body>
|
|
</html>
|