Private
Public Access
1
0

chg: usr: improve the gfx on homepage - implement login/register and activation for authentication - and add the first version of profile page #4

This commit is contained in:
2026-04-11 20:45:51 +02:00
parent eff849549b
commit 6b3e19b063
43 changed files with 3375 additions and 1806 deletions

View File

@@ -15,6 +15,28 @@
<section
class="hero{% if app.request.attributes.get('_route') != 'MineSeekerBundle_homepage' %} hero--compact{% endif %}">
<div class="hero-auth">
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
<a href="{{ path('MineSeekerBundle_profile') }}" class="hero-auth-btn hero-auth-btn--profile">
<i class="fa fa-user-circle"></i>
{{ app.user.username }}
</a>
<form method="post" action="{{ path('MineSeekerBundle_logout') }}">
<input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}"/>
<button type="submit" class="hero-auth-btn hero-auth-btn--out">
<i class="fa fa-sign-out"></i> Sign out
</button>
</form>
{% else %}
<a href="{{ path('MineSeekerBundle_login') }}" class="hero-auth-btn">
<i class="fa fa-sign-in"></i> Sign in
</a>
<a href="{{ path('MineSeekerBundle_register') }}" class="hero-auth-btn hero-auth-btn--register">
<i class="fa fa-user-plus"></i> Register
</a>
{% endif %}
</div>
<a class="hero-logo" href="{{ path('MineSeekerBundle_homepage') }}">
<img src="{{ asset('images/mine-logo-txt.png') }}" alt="MineSeeker"/>
</a>
@@ -22,12 +44,7 @@
<div class="hero-body">
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
<p class="hero-sub">
{% if app.user.facebookId is defined and app.user.facebookId is not null %}
<img class="hero-avatar"
src="http://graph.facebook.com/{{ app.user.facebookId }}/picture?type=square&width=80&height=80"
alt=""/>
{% endif %}
Welcome back, <strong>{{ app.user.realName is not null ? app.user.realName : app.user.username }}</strong>
Welcome back, <strong>{{ app.user.username }}</strong>
</p>
<h1>Ready for another round?</h1>
{% else %}
@@ -41,17 +58,82 @@
{% endblock %}
{% block body %}
<section class="feature-block">
<div class="feature-block__inner">
<div class="feature-block__visual feature-block__visual--stats">
<i class="fa fa-bar-chart"></i>
<i class="fa fa-trophy"></i>
<i class="fa fa-history"></i>
</div>
<div class="feature-block__text">
<p class="feature-block__label">For registered players</p>
<h2 class="feature-block__title">Track your legacy</h2>
<p class="feature-block__body">
Create a free account and every game you play gets recorded.
Watch your win rate climb, revisit past battles, and prove your dominance
on the board — one detonation at a time.
</p>
{% if not is_granted("IS_AUTHENTICATED_REMEMBERED") %}
<a href="{{ path('MineSeekerBundle_register') }}" class="feature-block__cta">
<i class="fa fa-user-plus"></i> Create free account
</a>
{% endif %}
</div>
</div>
</section>
<section class="feature-block feature-block--reverse feature-block--msn">
<div class="feature-block__inner">
<div class="feature-block__visual feature-block__visual--msn">
<img src="{{ asset('images/msn-logo.png') }}" alt="MSN Messenger" class="msn-logo"/>
<img src="{{ asset('images/msn-minesweeper.png') }}" alt="MSN Messenger Minesweeper" class="msn-screenshot"/>
</div>
<div class="feature-block__text">
<p class="feature-block__label">Our inspiration</p>
<h2 class="feature-block__title">Born from a legend</h2>
<p class="feature-block__body">
Remember the minesweeper hidden inside Microsoft's MSN Messenger?
That tiny two-player gem sparked countless friendships and rivalries
in the early 2000s. We loved it — so we rebuilt it for today.
Real-time, multiplayer, and no MSN account required.
</p>
</div>
</div>
</section>
<div class="tech-section">
<p class="tech-label">Built with</p>
<div class="tech-logos">
<img src="{{ asset('images/technologies/symfony.svg') }}" alt="Symfony"/>
<img src="{{ asset('images/technologies/howler.svg') }}" alt="Howler.js"/>
<img src="{{ asset('images/technologies/tanstack-query.svg') }}" alt="TanStack Query"/>
<img src="{{ asset('images/technologies/mercure.svg') }}" alt="Mercure"/>
<img src="{{ asset('images/technologies/vite.svg') }}" alt="Vite"/>
<img src="{{ asset('images/technologies/bun.svg') }}" alt="Bun"/>
<img src="{{ asset('images/technologies/phpstorm.svg') }}" alt="PHPStorm"/>
<a href="https://symfony.com" target="_blank" rel="noopener" class="tech-link">
<img src="{{ asset('images/technologies/symfony.svg') }}" alt="Symfony"/>
</a>
<a href="https://howlerjs.com" target="_blank" rel="noopener" class="tech-link">
<img src="{{ asset('images/technologies/howler.svg') }}" alt="Howler.js"/>
</a>
<a href="https://tanstack.com/query" target="_blank" rel="noopener" class="tech-link">
<img src="{{ asset('images/technologies/tanstack-query.svg') }}" alt="TanStack Query"/>
</a>
<a href="https://mercure.rocks" target="_blank" rel="noopener" class="tech-link">
<img src="{{ asset('images/technologies/mercure.svg') }}" alt="Mercure"/>
</a>
<a href="https://vitejs.dev" target="_blank" rel="noopener" class="tech-link">
<img src="{{ asset('images/technologies/vite.svg') }}" alt="Vite"/>
</a>
<a href="https://bun.sh" target="_blank" rel="noopener" class="tech-link">
<img src="{{ asset('images/technologies/bun.svg') }}" alt="Bun"/>
</a>
<a href="https://www.jetbrains.com/phpstorm" target="_blank" rel="noopener" class="tech-link">
<img src="{{ asset('images/technologies/phpstorm.svg') }}" alt="PHPStorm"/>
</a>
<a href="https://archlinux.org" target="_blank" rel="noopener" class="tech-link">
<img src="{{ asset('images/technologies/archlinux.svg') }}" alt="Arch Linux"/>
</a>
</div>
<p class="tech-oss">
<i class="fa fa-heart"></i>
This game would not exist without the incredible open-source community. <br>
Thank you to every contributor, maintainer, and creator behind these projects.
</p>
</div>
{% endblock %}