creations/profilePage
1
2
Fork 3
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

reformat the html for better seo?
All checks were successful
Code quality checks / biome (push) Successful in 9s
Details

Browse source
This commit is contained in:
creations 2025-05-03 07:28:23 -04:00
parent 167d989600
commit a4f139406c
Signed by: creations
GPG key ID: 8F553AA4320FC711
2 changed files with 62 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
public/css/index.css
View file

@ -85,6 +85,15 @@ body {
align-items: center; align-items: center;
} }
main {
width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.open-source-logo { .open-source-logo {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
@ -330,6 +339,17 @@ ul {
max-width: 700px; max-width: 700px;
} }
.activities-section {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 700px;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.activities { .activities {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

76
src/views/index.html
View file

@ -3,57 +3,65 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="View real-time Discord presence, activities, and badges with open-source integration." />
<meta name="color-scheme" content="dark" />
<title>Discord Presence</title> <title>Discord Presence</title>
<link rel="icon" id="site-icon" type="image/png" href="/public/favicon.png" />
<link rel="stylesheet" href="/public/css/index.css" /> <link rel="stylesheet" href="/public/css/index.css" />
<link rel="stylesheet" href="/public/css/root.css" /> <link rel="stylesheet" href="/public/css/root.css" />
<meta name="color-scheme" content="dark" />
<link rel="icon" id="site-icon" type="image/png" />
</head> </head>
<body> <body>
<div id="loading-overlay"> <div id="loading-overlay" role="status" aria-live="polite">
<div class="loading-spinner"></div> <div class="loading-spinner"></div>
</div> </div>
<a <header>
href="https://git.creations.works/creations/profilePage" <a
target="_blank" href="https://git.creations.works/creations/profilePage"
rel="noopener noreferrer" target="_blank"
> rel="noopener noreferrer"
<img title="View source code on Forgejo"
class="open-source-logo" >
src="/public/assets/forgejo_logo.svg" <img
alt="Forgejo Logo" class="open-source-logo"
style="opacity: 0.5" src="/public/assets/forgejo_logo.svg"
/> alt="Forgejo open-source logo"
</a> style="opacity: 0.5"
loading="lazy"
/>
</a>
</header>
<div class="user-card"> <main>
<div class="avatar-status-wrapper"> <section class="user-card">
<div class="avatar-wrapper"> <div class="avatar-status-wrapper">
<img class="avatar hidden" src="" /> <div class="avatar-wrapper">
<div class="status-indicator offline hidden"></div> <img class="avatar hidden"/>
</div> <div class="status-indicator offline hidden"></div>
<div class="user-info"> </div>
<div class="user-info-inner"> <div class="user-info">
<h1 class="username"></h1> <div class="user-info-inner">
<h1 class="username"></h1>
</div>
</div> </div>
</div> </div>
</div> </section>
</div>
<div id="badges" class="badges hidden"></div> <section id="badges" class="badges hidden" aria-label="User Badges"></section>
<h2 class="activity-header hidden">Activities</h2> <section aria-label="Discord Activities" class="activities-section">
<ul class="activities"></ul> <h2 class="activity-header hidden">Activities</h2>
<ul class="activities"></ul>
</section>
<section class="readme hidden"> <section class="readme hidden" aria-label="Profile README">
<div class="markdown-body"></div> <div class="markdown-body"></div>
</section> </section>
</main>
<script src="/public/js/index.js"></script> <script src="/public/js/index.js" type="module"></script>
</body> </body>
</html> </html>