Files
grass_touching_captcha/templates/achievements.jinja2

52 lines
2.3 KiB
Django/Jinja

{% extends "base.jinja2" %}
{% block title %}Grass Touching Achievements{% endblock %}
{% block body %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid d-flex justify-content-center">
<a class="navbar-brand" href="/">Grass Touching Captcha</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/info">Information</a></li>
<li class="nav-item"><a class="nav-link" href="/leaderboard">Leaderboard</a></li>
<li class="nav-item"><a class="nav-link" href="/submit_grasstouching">Submit Grass Touching</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="/achievements">Achievements</a></li>
<li class="nav-item"><a class="nav-link" href="/profile">Profile</a></li>
<li class="nav-item"><a class="nav-link" href="/logout">Logout</a></li>
</ul>
</div>
</div>
</nav>
<div class="container my-4">
<div class="row g-4">
{% for achievement in achievements %}
{% set unlocked = grass_touching_count >= achievement[0] %}
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="card h-100 {% if unlocked %}border-success shadow{% else %}border-secondary text-muted{% endif %}">
<div class="card-body">
<h5 class="card-title">
{% if unlocked %}
{{ achievement[1] }}
{% else %}
🔒 {{ achievement[1] }}
{% endif %}
</h5>
<h6 class="card-subtitle mb-2 {% if unlocked %}text-success{% else %}text-secondary{% endif %}">
You have to go outside {{ achievement[0] }} times to get this!
</h6>
<p class="card-text">{{ achievement[2] }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}