Frank
8554f04735
Overlay a rotated CSS badge on the homepage hero and briefing page image instead of baking it into the PNG, so it's easy to remove once the game ships.
80 lines
3.0 KiB
Twig
80 lines
3.0 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; }
|
|
}
|
|
.dev-watermark-wrap {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.dev-watermark-badge {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(-12deg);
|
|
background: rgba(220, 53, 69, .85);
|
|
color: #fff;
|
|
font-weight: 800;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
padding: .35rem 1.25rem;
|
|
border: 2px solid rgba(255, 255, 255, .85);
|
|
border-radius: .25rem;
|
|
font-size: .9rem;
|
|
white-space: nowrap;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
|
|
pointer-events: none;
|
|
}
|
|
</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">
|
|
<div class="dev-watermark-wrap">
|
|
<img src="{{ asset('images/AI_virus.png') }}" alt="AI Virus" class="img-fluid" style="max-height: 260px;">
|
|
<span class="dev-watermark-badge">In Development</span>
|
|
</div>
|
|
</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 %}
|