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:
@@ -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 %}
|
||||
|
||||
|
||||
83
templates/Security/login.html.twig
Normal file
83
templates/Security/login.html.twig
Normal file
@@ -0,0 +1,83 @@
|
||||
{% extends 'Game/index.html.twig' %}
|
||||
|
||||
{% block title %} - Sign In{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="auth-page">
|
||||
|
||||
{% for message in app.flashes('success') %}
|
||||
<div class="auth-flash auth-flash--success">
|
||||
<i class="fa fa-check-circle"></i> {{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% for message in app.flashes('error') %}
|
||||
<div class="auth-flash auth-flash--error">
|
||||
<i class="fa fa-exclamation-triangle"></i> {{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div class="auth-card">
|
||||
<h2 class="auth-title">Sign In</h2>
|
||||
<p class="auth-sub">Welcome back, commander</p>
|
||||
|
||||
{% if error %}
|
||||
<div class="auth-error">
|
||||
<i class="fa fa-exclamation-triangle"></i>
|
||||
{{ error.messageKey|trans(error.messageData, 'security') }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form class="auth-form" method="post" action="{{ path('MineSeekerBundle_login') }}">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"/>
|
||||
|
||||
<div class="auth-field">
|
||||
<label for="username" class="auth-label">Username</label>
|
||||
<div class="auth-input-wrap">
|
||||
<i class="fa fa-user auth-input-icon"></i>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="_username"
|
||||
class="auth-input"
|
||||
value="{{ last_username }}"
|
||||
autocomplete="username"
|
||||
autofocus
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="auth-field">
|
||||
<label for="password" class="auth-label">Password</label>
|
||||
<div class="auth-input-wrap">
|
||||
<i class="fa fa-lock auth-input-icon"></i>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="_password"
|
||||
class="auth-input"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="auth-remember">
|
||||
<input type="checkbox" name="_remember_me"/>
|
||||
<span>Remember me</span>
|
||||
</label>
|
||||
|
||||
<button type="submit" class="auth-submit">
|
||||
<i class="fa fa-sign-in"></i> Sign In
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="auth-switch">
|
||||
No account yet?
|
||||
<a href="{{ path('MineSeekerBundle_register') }}">Create one</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
110
templates/Security/profile.html.twig
Normal file
110
templates/Security/profile.html.twig
Normal file
@@ -0,0 +1,110 @@
|
||||
{% extends 'Game/index.html.twig' %}
|
||||
|
||||
{% block title %} - Profile{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="profile-page">
|
||||
|
||||
<div class="profile-header">
|
||||
<div class="profile-avatar">
|
||||
{{ app.user.username|slice(0, 2)|upper }}
|
||||
</div>
|
||||
<div class="profile-info">
|
||||
<h1 class="profile-name">{{ app.user.username }}</h1>
|
||||
{% if app.user.email %}
|
||||
<p class="profile-email">
|
||||
<i class="fa fa-envelope"></i>
|
||||
{{ app.user.email }}
|
||||
</p>
|
||||
{% endif %}
|
||||
<p class="profile-role">
|
||||
<i class="fa fa-shield"></i> Registered commander
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-stats">
|
||||
<div class="profile-stat">
|
||||
<i class="fa fa-gamepad profile-stat__icon"></i>
|
||||
<span class="profile-stat__value">{{ stats.total }}</span>
|
||||
<span class="profile-stat__label">Games played</span>
|
||||
</div>
|
||||
<div class="profile-stat profile-stat--win">
|
||||
<i class="fa fa-trophy profile-stat__icon"></i>
|
||||
<span class="profile-stat__value">{{ stats.wins }}</span>
|
||||
<span class="profile-stat__label">Victories</span>
|
||||
</div>
|
||||
<div class="profile-stat profile-stat--loss">
|
||||
<i class="fa fa-flag profile-stat__icon"></i>
|
||||
<span class="profile-stat__value">{{ stats.losses }}</span>
|
||||
<span class="profile-stat__label">Defeats</span>
|
||||
</div>
|
||||
<div class="profile-stat profile-stat--bomb">
|
||||
<i class="fa fa-bomb profile-stat__icon"></i>
|
||||
<span class="profile-stat__value">{{ stats.bombs }}</span>
|
||||
<span class="profile-stat__label">Mines hit</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if recent|length > 0 %}
|
||||
<div class="profile-section">
|
||||
<h2 class="profile-section__title">
|
||||
<i class="fa fa-history"></i> Recent battles
|
||||
</h2>
|
||||
<div class="profile-games">
|
||||
{% for game in recent %}
|
||||
{% set is_red = game.red and game.red.id == app.user.id %}
|
||||
{% set my_points = is_red ? game.redPoints : game.bluePoints %}
|
||||
{% set opp_points = is_red ? game.bluePoints : game.redPoints %}
|
||||
{% set opp = is_red ? game.blue : game.red %}
|
||||
{% set opp_anon = is_red ? game.blueAnon : game.redAnon %}
|
||||
|
||||
{% set result = 'draw' %}
|
||||
{% if game.resign == (is_red ? 'red' : 'blue') %}
|
||||
{% set result = 'loss' %}
|
||||
{% elseif game.resign == (is_red ? 'blue' : 'red') %}
|
||||
{% set result = 'win' %}
|
||||
{% elseif my_points is not null and opp_points is not null %}
|
||||
{% if my_points > opp_points %}
|
||||
{% set result = 'win' %}
|
||||
{% elseif my_points < opp_points %}
|
||||
{% set result = 'loss' %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<div class="profile-game profile-game--{{ result }}">
|
||||
<span class="profile-game__badge">
|
||||
{{ result == 'win' ? 'W' : (result == 'loss' ? 'L' : 'D') }}
|
||||
</span>
|
||||
<span class="profile-game__score">
|
||||
{{ my_points ?? '—' }} : {{ opp_points ?? '—' }}
|
||||
</span>
|
||||
<span class="profile-game__vs">vs</span>
|
||||
<span class="profile-game__opponent">
|
||||
{% if opp %}
|
||||
{{ opp.username }}
|
||||
{% elseif opp_anon %}
|
||||
{{ opp_anon.userName }}
|
||||
{% else %}
|
||||
Guest
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="profile-game__color">
|
||||
<i class="fa fa-circle" style="color: {{ is_red ? '#c0392b' : '#2980b9' }}"></i>
|
||||
</span>
|
||||
<span class="profile-game__date">
|
||||
{{ game.updated ? game.updated|date('Y-m-d') : '' }}
|
||||
</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="profile-empty">
|
||||
<i class="fa fa-inbox"></i>
|
||||
<p>No games recorded yet. <a href="{{ path('MineSeekerBundle_gamePlay') }}">Start playing!</a></p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
120
templates/Security/register.html.twig
Normal file
120
templates/Security/register.html.twig
Normal file
@@ -0,0 +1,120 @@
|
||||
{% extends 'Game/index.html.twig' %}
|
||||
|
||||
{% block title %} - Register{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="auth-page">
|
||||
|
||||
{% for email in app.flashes('verify_email') %}
|
||||
<div class="auth-card auth-card--sent">
|
||||
<div class="auth-sent-icon"><i class="fa fa-envelope-o"></i></div>
|
||||
<h2 class="auth-title">Check your inbox</h2>
|
||||
<p class="auth-sub">We sent an activation link to</p>
|
||||
<p class="auth-sent-email">{{ email }}</p>
|
||||
<p class="auth-sent-note">
|
||||
Click the link in the email to activate your account.<br>
|
||||
The link expires in <strong>24 hours</strong>.
|
||||
</p>
|
||||
<a href="{{ path('MineSeekerBundle_login') }}" class="auth-submit" style="text-decoration:none; margin-top:16px;">
|
||||
Go to Sign In
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
|
||||
<div class="auth-card">
|
||||
<h2 class="auth-title">Create Account</h2>
|
||||
<p class="auth-sub">Join the battle — no subscription required</p>
|
||||
|
||||
<form class="auth-form" method="post" action="{{ path('MineSeekerBundle_register') }}">
|
||||
|
||||
<div class="auth-field">
|
||||
<label for="username" class="auth-label">Username</label>
|
||||
<div class="auth-input-wrap">
|
||||
<i class="fa fa-user auth-input-icon"></i>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="_username"
|
||||
class="auth-input{% if errors.username is defined %} auth-input--error{% endif %}"
|
||||
value="{{ last_username }}"
|
||||
autocomplete="username"
|
||||
autofocus
|
||||
required
|
||||
minlength="3"
|
||||
/>
|
||||
</div>
|
||||
{% if errors.username is defined %}
|
||||
<p class="auth-field-error"><i class="fa fa-exclamation-circle"></i> {{ errors.username }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="auth-field">
|
||||
<label for="email" class="auth-label">Email</label>
|
||||
<div class="auth-input-wrap">
|
||||
<i class="fa fa-envelope auth-input-icon"></i>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="_email"
|
||||
class="auth-input{% if errors.email is defined %} auth-input--error{% endif %}"
|
||||
value="{{ last_email }}"
|
||||
autocomplete="email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{% if errors.email is defined %}
|
||||
<p class="auth-field-error"><i class="fa fa-exclamation-circle"></i> {{ errors.email }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="auth-field">
|
||||
<label for="password" class="auth-label">Password</label>
|
||||
<div class="auth-input-wrap">
|
||||
<i class="fa fa-lock auth-input-icon"></i>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="_password"
|
||||
class="auth-input{% if errors.password is defined %} auth-input--error{% endif %}"
|
||||
autocomplete="new-password"
|
||||
required
|
||||
minlength="6"
|
||||
/>
|
||||
</div>
|
||||
{% if errors.password is defined %}
|
||||
<p class="auth-field-error"><i class="fa fa-exclamation-circle"></i> {{ errors.password }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="auth-field">
|
||||
<label for="password_confirm" class="auth-label">Confirm Password</label>
|
||||
<div class="auth-input-wrap">
|
||||
<i class="fa fa-lock auth-input-icon"></i>
|
||||
<input
|
||||
type="password"
|
||||
id="password_confirm"
|
||||
name="_password_confirm"
|
||||
class="auth-input{% if errors.password_confirm is defined %} auth-input--error{% endif %}"
|
||||
autocomplete="new-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{% if errors.password_confirm is defined %}
|
||||
<p class="auth-field-error"><i class="fa fa-exclamation-circle"></i> {{ errors.password_confirm }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<button type="submit" class="auth-submit">
|
||||
<i class="fa fa-user-plus"></i> Create Account
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="auth-switch">
|
||||
Already have an account?
|
||||
<a href="{{ path('MineSeekerBundle_login') }}">Sign in</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -1,39 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="Cache-control" content="max-age=1209600;public">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="keywords" content="game,mineseeker,mine,seeker,laszlolang.com">
|
||||
<meta name="robots" content="index,follow">
|
||||
<meta name="revisit-after" content="2 days">
|
||||
<meta name="resource-type" content="document">
|
||||
<meta name="country" content="Hungary">
|
||||
<meta name="description" content="This is a new minesweeper, multiplayer game.">
|
||||
<meta name="content-language" content="hu,hun,hungarian">
|
||||
{% block metas %}{% endblock %}
|
||||
<title>MineSeeker{% block title %}{% endblock %}</title>
|
||||
{% block stylesheets %}{% endblock %}
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="Cache-control" content="max-age=1209600;public">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="keywords" content="game,mineseeker,mine,seeker,laszlolang.com">
|
||||
<meta name="robots" content="index,follow">
|
||||
<meta name="revisit-after" content="2 days">
|
||||
<meta name="resource-type" content="document">
|
||||
<meta name="country" content="Hungary">
|
||||
<meta name="description" content="This is a new minesweeper, multiplayer game.">
|
||||
<meta name="content-language" content="hu,hun,hungarian">
|
||||
{% block metas %}{% endblock %}
|
||||
<title>MineSeeker{% block title %}{% endblock %}</title>
|
||||
{% block stylesheets %}{% endblock %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img src="{{ asset('/images/beta-logo-png-2.png') }}" alt="Beta version" class="mine-beta">
|
||||
{% block bodyTop %}{% endblock %}
|
||||
|
||||
{% block bodyTop %}{% endblock %}
|
||||
<header>
|
||||
{% block header %}{% endblock %}
|
||||
</header>
|
||||
<main>
|
||||
{% block body %}{% endblock %}
|
||||
</main>
|
||||
<footer>
|
||||
{% block footer %}{% endblock %}
|
||||
</footer>
|
||||
|
||||
<header>
|
||||
{% block header %}{% endblock %}
|
||||
</header>
|
||||
<main>
|
||||
{% block body %}{% endblock %}
|
||||
</main>
|
||||
<footer>
|
||||
{% block footer %}{% endblock %}
|
||||
</footer>
|
||||
|
||||
{% block javascripts %}{% endblock %}
|
||||
{% block javascripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
103
templates/emails/activation.html.twig
Normal file
103
templates/emails/activation.html.twig
Normal file
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<title>Activate your MineSeeker account</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0; padding: 0;
|
||||
background: #07090d;
|
||||
font-family: Arial, sans-serif;
|
||||
color: #ffffff;
|
||||
}
|
||||
.wrapper {
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
.logo {
|
||||
text-align: center;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.logo img {
|
||||
width: 200px;
|
||||
}
|
||||
.card {
|
||||
background: #0f1923;
|
||||
border: 1px solid rgba(35, 111, 135, 0.25);
|
||||
border-radius: 10px;
|
||||
padding: 40px 36px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1px;
|
||||
margin: 0 0 10px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.sub {
|
||||
font-size: 14px;
|
||||
color: rgba(149, 207, 245, 0.7);
|
||||
margin: 0 0 28px;
|
||||
}
|
||||
p {
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
line-height: 1.7;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
background: linear-gradient(to bottom, #ad0a05, #f67d52);
|
||||
color: #ffffff !important;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
padding: 16px 48px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.fallback {
|
||||
margin-top: 24px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
word-break: break-all;
|
||||
}
|
||||
.fallback a { color: rgba(149, 207, 245, 0.5); }
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 32px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="logo">
|
||||
<img src="{{ absolute_url(asset('images/mine-logo-txt.png')) }}" alt="MineSeeker"/>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h1>One step to go</h1>
|
||||
<p class="sub">Activate your account, commander</p>
|
||||
<p>
|
||||
Hi <strong>{{ username }}</strong>,<br>
|
||||
Thanks for registering on MineSeeker. Click the button below to verify your
|
||||
email address and activate your account.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn" href="{{ activation_url }}">Activate account</a>
|
||||
</p>
|
||||
<p class="fallback">
|
||||
If the button doesn't work, copy and paste this link into your browser:<br>
|
||||
<a href="{{ activation_url }}">{{ activation_url }}</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer">
|
||||
© {{ "now"|date("Y") }} MineSeeker • This link expires in 24 hours.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user