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