Add AI Virus Deflection story to homepage and new agent briefing page

Give the public homepage a themed breach-alert hero and add a /briefing
page with the full mission narrative, both linking into the existing
game dashboard flow.
This commit is contained in:
Frank
2026-07-04 23:00:31 +02:00
parent 7dbb738da8
commit 839113c356
4 changed files with 143 additions and 6 deletions
+48 -6
View File
@@ -1,12 +1,54 @@
{% extends 'layout/site.html.twig' %}
{% block title %}{{ 'home.title'|trans({'%site%': ('site.name'|trans)}) }}{% endblock %}
{% block title %}AI Virus Deflection | {{ 'site.name'|trans }}{% endblock %}
{% block stylesheets %}
{{ parent() }}
<style>
.breach-hero {
background: linear-gradient(135deg, #0d1f26 0%, #16323f 100%);
color: #e6f2f5;
border-radius: .75rem;
overflow: hidden;
}
.breach-hero img {
filter: drop-shadow(0 0 25px rgba(47, 143, 174, .55));
}
.breach-hero .badge-alert {
letter-spacing: .08em;
animation: breach-blink 1.6s infinite;
}
@keyframes breach-blink {
0%, 100% { opacity: 1; }
50% { opacity: .35; }
}
</style>
{% endblock %}
{% block body %}
<div class="text-center py-5">
<img src="{{ asset('images/logo.png') }}" alt="{{ 'site.name'|trans }}" height="140" class="mb-4">
<h1 class="display-5 fw-bold">{{ 'home.h1'|trans({'%site%': ('site.name'|trans)}) }}</h1>
<p class="lead col-lg-8 mx-auto text-secondary">{{ 'home.description'|trans }}</p>
<a href="{{ path('game_dashboard') }}" class="btn btn-primary btn-lg mt-3">{{ 'link.enter_game'|trans }}</a>
<div class="breach-hero p-4 p-md-5 mb-5">
<div class="row align-items-center g-4">
<div class="col-lg-7">
<span class="badge bg-danger badge-alert mb-3">&#9888; SYSTEM BREACH DETECTED</span>
<h1 class="display-6 fw-bold">The mainframe has been compromised.</h1>
<p class="lead" style="color: #a9c6cf;">
An AI virus is loose in the network and it's decoding classified files &mdash; hunting for the
names of every undercover agent in the field. You and two fellow agents have one shot to shut
it down before the countdown ends.
</p>
<div class="d-flex flex-wrap gap-3 mt-4">
<a href="{{ path('website_intro') }}" class="btn btn-outline-light btn-lg">Read the Briefing</a>
<a href="{{ path('game_dashboard') }}" class="btn btn-primary btn-lg">{{ 'link.enter_game'|trans }}</a>
</div>
</div>
<div class="col-lg-5 text-center">
<img src="{{ asset('images/AI_virus.png') }}" alt="AI Virus" class="img-fluid" style="max-height: 260px;">
</div>
</div>
</div>
<div class="text-center py-4">
<img src="{{ asset('images/logo.png') }}" alt="{{ 'site.name'|trans }}" height="100" class="mb-3">
<p class="col-lg-8 mx-auto text-secondary">{{ 'home.description'|trans }}</p>
</div>
{% endblock %}