lx/nexium-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

i also had ai do this btw

Browse Source
This commit is contained in:
copyrighttxt
2026-08-03 17:40:16 -04:00
committed by GitHub
parent 7c7085c038
commit 9d7913bf21
2 changed files with 59 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/home/home.html
+22 -39
View File
@@ -5,7 +5,7 @@
{% endblock %}
{% block content %}
<div id="main" class="home-page-shell">
<div class="home-page-container">
<div class="home-page-container container">
<!-- {% if not isEmailVerified: %}
<div class="alert p-2 alert-warning d-flex align-items-center">
<i class="bi bi-envelope-plus ms-2" style="font-size: 30px;"></i>
@@ -24,13 +24,13 @@
<a href="/settings/discord_link" class="ms-auto text-decoration-none me-2"><button class="btn btn-primary btn-sm">Link Discord</button></a>
</div>
{%endif%}
<section class="home-hero card-container">
<div class="home-hero-avatar-wrap">
<img class="home-hero-avatar" src="/Thumbs/Head.ashx?x=150&y=150&userId={{currentuser.id}}" alt="{{currentuser.username}}" />
</div>
<div class="home-hero-copy">
<div class="home-hero-subtle d-flex align-items-center">
<img class="rounded-5 overflow-hidden me-4 home-hero-avatar" src="/Thumbs/Head.ashx?x=150&y=150&userId={{currentuser.id}}" alt="{{currentuser.username}}"/>
<div class="mt-2">
<p class="home-kicker mb-1">Welcome back</p>
<h1 class="home-greeting mb-2"><span id="greetings"></span>, {{currentuser.username}}!</h1>
<h1 class="home-greeting mb-2">
<span id="greetings"></span>, {{currentuser.username}}!
</h1>
<div class="home-status-row">
{% if membershipValue == 1: %}
<span class="rbx-icon-bc"></span>
@@ -44,42 +44,31 @@
<span class="home-status-text">Your account and friends are the quickest places to jump back into the site.</span>
</div>
</div>
</section>
<section class="home-section card-container">
<div class="home-section-header">
<div>
<h4 class="home-section-title mb-1">Friends ({{friendcount}})</h4>
<p class="home-section-meta mb-0">People online and worth checking in on.</p>
</div>
<a class="home-section-link" href="/users/{{currentuser.id}}/friends">View all</a>
</div>
<div class="home-friends-strip friends-scroll">
</div>
<h4 class="home-section-title mt-4">Friends ( {{friendcount}} )</h4>
<p class="home-section-meta mb-2">People online and worth checking in on.</p>
<div class="w-100 p-2 d-flex flex-nowrap card-container friends-scroll home-soft-strip" style="min-height: 100px;">
{% for friend in friends %}
<a href="/users/{{friend.id}}/profile" class="home-friend-card">
<div class="image-container home-friend-avatar-frame">
<img class="home-friend-avatar" src="/Thumbs/Head.ashx?x=100&y=100&userId={{friend.id}}" alt="{{friend.username}}"/>
<a href="/users/{{friend.id}}/profile">
<div style="height: fit-content; width:90px;" class="me-3 home-friend-card">
<div class="image-container home-friend-avatar-frame">
<img class="rounded w-100 d-table home-friend-avatar" src="/Thumbs/Head.ashx?x=100&y=100&userId={{friend.id}}" style="margin: 0 auto;height: fit-content; max-width: 100px;" alt="{{friend.username}}"/>
{% if friend.isonline: %}<div class="status-icon {% if friend.ingame: %}status-icon-green{% endif %}"></div>{% endif %}
</div>
<p class="text-body w-100 text-center d-inline-block m-0 text-truncate" style="font-size: 12px;">{{friend.username}}</p>
</div>
<p class="text-body w-100 text-center d-inline-block m-0 text-truncate home-friend-name">{{friend.username}}</p>
</a>
{% endfor %}
{% if friendcount == 0: %}
<div class="home-empty-state">
<div class="home-empty-state home-empty-inline">
<p class="mb-0">You have no friends yet.</p>
<a href="/games" class="btn btn-sm btn-primary mt-2">Explore games</a>
</div>
{% endif %}
</div>
</section>
<section class="home-section card-container">
<div class="home-section-header">
<div>
<h4 class="home-section-title mb-1">Recently Played</h4>
<p class="home-section-meta mb-0">Pick up where you left off or try something new.</p>
</div>
<a class="home-section-link" href="/games">Browse games</a>
</div>
<div class="home-places-strip">
<h4 class="home-section-title mt-4">Recently Played</h4>
<p class="home-section-meta mb-2">Pick up where you left off or try something new.</p>
<div class="w-100 p-2 d-flex home-soft-strip" style="overflow-x: hidden;min-height: 100px;overflow-x: auto;">
{% for place in recentlyplayed %}
<a class="text-decoration-none" href="/games/{{place.id}}/">
<div class="me-3 overflow-hidden rounded place-card home-place-card">
@@ -108,13 +97,12 @@
</a>
{% endfor %}
{% if recentlyplayedcount == 0: %}
<div class="home-empty-state home-empty-wide">
<div class="home-empty-state home-empty-wide home-empty-inline">
<p class="mb-0">Looks like you haven’t played any games yet.</p>
<a class="btn btn-sm btn-primary mt-2" href="/games">Play something now</a>
</div>
{% endif %}
</div>
</section>
</div>
</div>
<script>
@@ -132,10 +120,5 @@
}
document.getElementById("greetings").textContent = greeting;
document.querySelectorAll(".home-place-vote-fill").forEach((fill) => {
const percentage = fill.dataset.likePercentage || 0;
fill.style.width = `${percentage}%`;
});
</script>
{% endblock %}
app/static/css/home.css
+37 -89
View File
@@ -5,48 +5,18 @@
.home-page-shell {
width: 100%;
padding: 1.5rem 1rem 2rem;
padding: 1.25rem 1rem 1.75rem;
}
.home-page-container {
width: 100%;
max-width: 1080px;
max-width: 980px;
margin: 0 auto;
display: grid;
gap: 1rem;
padding: 0 0.25rem;
}
.home-alert {
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.home-hero,
.home-section {
padding: 1rem 1.1rem;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
background: linear-gradient(180deg, rgba(20, 20, 20, 0.95), rgba(10, 10, 10, 0.98));
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}
.home-hero {
display: flex;
align-items: center;
gap: 1rem;
}
.home-hero-avatar-wrap {
position: relative;
flex: 0 0 auto;
}
.home-hero-avatar {
width: 88px;
height: 88px;
border-radius: 22px;
object-fit: cover;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
.home-hero-subtle {
padding: 0.5rem 0 0.75rem;
}
.home-kicker {
@@ -57,7 +27,7 @@
}
.home-greeting {
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-size: clamp(1.6rem, 2.4vw, 2.1rem);
font-weight: 700;
line-height: 1.05;
}
@@ -72,32 +42,13 @@
.home-status-text,
.home-section-meta {
color: var(--text-secondary, #9c9c9c);
font-size: 0.95rem;
}
.home-section-header {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.85rem;
font-size: 0.9rem;
}
.home-section-title {
font-size: 1.35rem;
font-size: 1.15rem;
line-height: 1.1;
margin-bottom: 0.15rem;
}
.home-section-link {
color: #4ea2ff;
text-decoration: none;
font-size: 0.92rem;
flex: 0 0 auto;
}
.home-section-link:hover {
text-decoration: underline;
margin-bottom: 0;
}
.card-container {
@@ -106,9 +57,14 @@
border-radius: 5px;
}
.home-soft-strip {
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.home-friends-strip {
display: flex;
gap: 0.85rem;
gap: 0.75rem;
align-items: flex-start;
min-height: 116px;
}
@@ -128,12 +84,7 @@
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 18px;
}
.home-friend-name {
font-size: 12px;
margin-top: 0.35rem !important;
border-radius: 16px;
}
.home-empty-state {
@@ -144,8 +95,8 @@
justify-content: center;
text-align: center;
color: var(--text-secondary, #9c9c9c);
border: 1px dashed rgba(255, 255, 255, 0.12);
border-radius: 16px;
border: 1px dashed rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 1rem;
flex: 1 1 auto;
}
@@ -154,25 +105,20 @@
width: 100%;
}
.home-places-strip {
display: flex;
gap: 0.85rem;
overflow-x: auto;
padding-bottom: 0.25rem;
scroll-snap-type: x proximity;
.home-empty-inline {
margin: 0.25rem 0;
}
.home-place-card {
width: 180px;
width: 170px;
flex: 0 0 auto;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
scroll-snap-align: start;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.07);
}
.home-place-thumb-wrap {
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.home-place-thumb {
@@ -184,16 +130,16 @@
.home-place-year {
font-size: 11px;
padding: 4px 6px;
padding: 3px 6px;
border-top-right-radius: 6px;
}
.home-place-copy {
min-height: 94px;
min-height: 90px;
}
.home-place-name {
font-size: 0.98rem;
font-size: 0.95rem;
line-height: 1.15;
line-clamp: 2;
display: -webkit-box;
@@ -204,17 +150,24 @@
.home-place-playing {
margin: 0;
font-size: 0.88rem;
font-size: 0.84rem;
}
.home-place-playing span {
font-size: 0.82rem;
font-size: 0.8rem;
}
.home-place-votes {
margin-top: auto;
}
.home-places-strip {
display: flex;
gap: 0.75rem;
overflow-x: auto;
padding-bottom: 0.25rem;
}
.status-icon {
position: absolute;
bottom : -8px;
@@ -256,15 +209,10 @@
padding: 1rem 0.75rem 1.5rem;
}
.home-hero {
.home-hero-subtle {
align-items: flex-start;
}
.home-section-header {
align-items: flex-start;
flex-direction: column;
}
.home-place-card {
width: 160px;
}