Frank
839113c356
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.
55 lines
2.1 KiB
Twig
55 lines
2.1 KiB
Twig
{% extends 'layout/site.html.twig' %}
|
|
|
|
{% 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="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">⚠ 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 — 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 %}
|