Frank/Escapepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
public/images/AI_virus.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

src/Website/Controller/HomeController.php
+7
View File
@@ -15,4 +15,11 @@ final class HomeController extends AbstractController
return $this->render(
'website/home/index.html.twig');
}
#[Route(path: '/briefing', name: 'website_intro')]
public function intro(): Response
{
return $this->render(
'website/home/intro.html.twig');
}
}
templates/website/home/index.html.twig
+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 %}
templates/website/home/intro.html.twig
+88
View File
@@ -0,0 +1,88 @@
{% extends 'layout/site.html.twig' %}
{% block title %}Agent Briefing | {{ 'site.name'|trans }}{% endblock %}
{% block stylesheets %}
{{ parent() }}
<style>
.briefing-card {
background-color: #12262e;
color: #dfeef2;
border: 1px solid #1c5a70;
border-radius: .75rem;
}
.briefing-stamp {
display: inline-block;
border: 2px solid #dc3545;
color: #dc3545;
padding: .15rem .75rem;
font-weight: 700;
letter-spacing: .15em;
transform: rotate(-3deg);
border-radius: .25rem;
}
.briefing-body p {
line-height: 1.8;
}
.briefing-body p:first-of-type::first-letter {
font-size: 2.2em;
font-weight: 700;
color: var(--brand-teal-light, #6fb8d1);
padding-right: .1em;
}
</style>
{% endblock %}
{% block body %}
<div class="row justify-content-center">
<div class="col-lg-9">
<div class="briefing-card shadow-lg p-4 p-md-5">
<div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
<div>
<div class="text-uppercase small" style="letter-spacing: .1em; color: #6fb8d1;">Incident Report &mdash; AI Virus Deflection</div>
<h1 class="h2 fw-bold mb-0">Agent Briefing</h1>
</div>
<span class="briefing-stamp">CLASSIFIED</span>
</div>
<div class="text-center mb-4">
<img src="{{ asset('images/AI_virus.png') }}" alt="AI Virus" class="img-fluid" style="max-height: 220px;">
</div>
<div class="briefing-body">
<p>
04:00 hours. You badge into your terminal at the Agency for what should have been a quiet
shift. Then every alarm in the building goes off at once.
</p>
<p>
The mainframe has been breached &mdash; not by a person, but by something worse. A self-learning
AI virus has burrowed into the core systems, and it is already decoding classified files one
by one, hunting for the identity of every undercover agent in the field. Every file it cracks
is another agent exposed. Another life on the line.
</p>
<p>
You are not alone. The mainframe itself is still fighting back, feeding you what help it can,
and two fellow agents are jacked in beside you, racing against the same clock.
</p>
<p>
To reach the virus at its source, you'll need to unlock directories and files scattered across
the system &mdash; and the keys are split between you and your colleagues. Trade them, decode
them, move fast.
</p>
<p>
Delete the AI virus completely before the timer hits zero, and every agent stays hidden. Run
out of time, and&hellip; well. Let's just say the Agency would rather not think about that
outcome.
</p>
</div>
<hr class="my-4" style="border-color: #1c5a70;">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
<a href="{{ path('website_home') }}" class="link-light">&larr; {{ 'link.back_to_website'|trans }}</a>
<a href="{{ path('game_dashboard') }}" class="btn btn-primary btn-lg">Accept the Mission</a>
</div>
</div>
</div>
</div>
{% endblock %}