marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-02-09 21:13:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: polish demo page interactions

Browse source
This commit is contained in:
Marco Allegretti 2026-02-02 11:44:51 +01:00
parent 6881c12c16
commit d2650fba57
1 changed files with 827 additions and 808 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
frontend/src/pages/demo.astro
View file

@ -28,6 +28,10 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
</div> </div>
` : ''} ` : ''}
<div class="demo-status-banner" id="demo-status">
<p>Loading demo status...</p>
</div>
<section class="demo-intro"> <section class="demo-intro">
<div class="intro-content"> <div class="intro-content">
<h2>Why a Demo Instance?</h2> <h2>Why a Demo Instance?</h2>
@ -56,7 +60,7 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
</p> </p>
<div class="community-cards" id="community-cards"> <div class="community-cards" id="community-cards">
<div class="community-card ui-card ui-card-pad-lg ui-card-interactive"> <a href="/demo?enter=1&next=/communities/aurora" class="community-card ui-card ui-card-pad-lg ui-card-interactive">
<div class="card-header"> <div class="card-header">
<h3>Aurora Framework</h3> <h3>Aurora Framework</h3>
<span class="card-tag">Open Source Project</span> <span class="card-tag">Open Source Project</span>
@ -69,10 +73,10 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
<div class="card-stats" id="stats-aurora"> <div class="card-stats" id="stats-aurora">
<span class="loading-text">Loading...</span> <span class="loading-text">Loading...</span>
</div> </div>
<a href="/demo?enter=1&next=/communities/aurora" class="card-link">Explore Aurora →</a> <span class="card-link">Explore Aurora →</span>
</div> </a>
<div class="community-card ui-card ui-card-pad-lg ui-card-interactive"> <a href="/demo?enter=1&next=/communities/civic-commons" class="community-card ui-card ui-card-pad-lg ui-card-interactive">
<div class="card-header"> <div class="card-header">
<h3>Civic Commons Network</h3> <h3>Civic Commons Network</h3>
<span class="card-tag">Political Movement</span> <span class="card-tag">Political Movement</span>
@ -85,10 +89,10 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
<div class="card-stats" id="stats-civic-commons"> <div class="card-stats" id="stats-civic-commons">
<span class="loading-text">Loading...</span> <span class="loading-text">Loading...</span>
</div> </div>
<a href="/demo?enter=1&next=/communities/civic-commons" class="card-link">Explore Civic Commons →</a> <span class="card-link">Explore Civic Commons →</span>
</div> </a>
<div class="community-card ui-card ui-card-pad-lg ui-card-interactive"> <a href="/demo?enter=1&next=/communities/makers" class="community-card ui-card ui-card-pad-lg ui-card-interactive">
<div class="card-header"> <div class="card-header">
<h3>Regional Makers Collective</h3> <h3>Regional Makers Collective</h3>
<span class="card-tag">Federation</span> <span class="card-tag">Federation</span>
@ -101,8 +105,8 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
<div class="card-stats" id="stats-makers"> <div class="card-stats" id="stats-makers">
<span class="loading-text">Loading...</span> <span class="loading-text">Loading...</span>
</div> </div>
<a href="/demo?enter=1&next=/communities/makers" class="card-link">Explore Makers →</a> <span class="card-link">Explore Makers →</span>
</div> </a>
</div> </div>
</section> </section>
@ -128,21 +132,21 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
vote on proposals, create delegations, and see the member experience firsthand. vote on proposals, create delegations, and see the member experience firsthand.
</p> </p>
<div class="demo-accounts"> <div class="demo-accounts">
<button class="demo-login-btn ui-card ui-card-soft" data-username="contributor"> <button class="demo-login-btn ui-card ui-card-soft ui-card-interactive" data-username="contributor">
<div class="btn-icon">👤</div> <div class="btn-icon">👤</div>
<div class="btn-info"> <div class="btn-info">
<strong>Contributor</strong> <strong>Contributor</strong>
<span>Standard member - can vote and participate</span> <span>Standard member - can vote and participate</span>
</div> </div>
</button> </button>
<button class="demo-login-btn ui-card ui-card-soft" data-username="moderator"> <button class="demo-login-btn ui-card ui-card-soft ui-card-interactive" data-username="moderator">
<div class="btn-icon">🛡️</div> <div class="btn-icon">🛡️</div>
<div class="btn-info"> <div class="btn-info">
<strong>Moderator</strong> <strong>Moderator</strong>
<span>Can moderate content and view logs</span> <span>Can moderate content and view logs</span>
</div> </div>
</button> </button>
<button class="demo-login-btn ui-card ui-card-soft" data-username="observer"> <button class="demo-login-btn ui-card ui-card-soft ui-card-interactive" data-username="observer">
<div class="btn-icon">👁️</div> <div class="btn-icon">👁️</div>
<div class="btn-info"> <div class="btn-info">
<strong>Observer</strong> <strong>Observer</strong>
@ -376,6 +380,17 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.community-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.community-card:hover {
color: inherit;
}
.card-stats { .card-stats {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
@ -652,6 +667,10 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
text-decoration: underline; text-decoration: underline;
} }
.community-card:hover .card-link {
text-decoration: underline;
}
.loading-text { .loading-text {
color: var(--color-text-muted); color: var(--color-text-muted);
font-style: italic; font-style: italic;