Lost page
This commit is contained in:
127
templates/game/lost.html.twig
Normal file
127
templates/game/lost.html.twig
Normal file
@@ -0,0 +1,127 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Game Lost - {{ session.game.name }}{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<style>
|
||||
body {
|
||||
background-color: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.card {
|
||||
background-color: #2d2d2d;
|
||||
border-color: #444;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.form-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
.story-container {
|
||||
font-style: italic;
|
||||
border-left: 4px solid #dc3545;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.donation-section {
|
||||
background-color: #333;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.form-range::-webkit-slider-runnable-track {
|
||||
background-color: #444;
|
||||
}
|
||||
.form-range::-moz-range-track {
|
||||
background-color: #444;
|
||||
}
|
||||
.form-range::-webkit-slider-thumb {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
.form-range::-moz-range-thumb {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="container mt-5 mb-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow-lg">
|
||||
<div class="card-header bg-danger text-white">
|
||||
<h3 class="card-title mb-0">Game Over - Time's Up!</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>{{ session.game.name }}</h4>
|
||||
<hr>
|
||||
|
||||
<div class="story-container">
|
||||
<p>
|
||||
The screens flickered one last time before going completely dark. The hum of the servers ceased, replaced by an eerie silence.
|
||||
The server seems to have shut itself down before the AI virus could complete its task in decoding the undercover agents.
|
||||
</p>
|
||||
<p>
|
||||
In the days after some people are arrested for sabotaging the agency, but in the end nobody is convicted for the actions.
|
||||
Lets hope the agents which were undercover are safe and the information needed is still saved to put the other criminals behind bars.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="donation-section">
|
||||
<h5>Support the Developer</h5>
|
||||
<p>If you enjoyed the experience (even if you lost!), please consider a small donation to help me create more games.</p>
|
||||
<a href="https://www.paypal.com/donate?hosted_button_id=X9X8KB6R6GMRU" target="_blank" class="btn btn-primary">
|
||||
<i class="bi bi-paypal"></i> Donate via PayPal
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="feedback-form mt-4">
|
||||
<h5>Feedback</h5>
|
||||
<form method="post">
|
||||
<div class="mb-3">
|
||||
<label for="difficulty" class="form-label">How would you rate the difficulty? (<span id="difficulty-val">5</span>/10)</label>
|
||||
<input type="range" class="form-range" min="1" max="10" step="1" id="difficulty" name="difficulty" value="5" oninput="document.getElementById('difficulty-val').innerText = this.value">
|
||||
<div class="d-flex justify-content-between mt-1">
|
||||
<small class="text-muted">Absolutely not</small>
|
||||
-
|
||||
<small class="text-muted">Absolutely</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="entertaining" class="form-label">How entertaining was it? (<span id="entertaining-val">5</span>/10)</label>
|
||||
<input type="range" class="form-range" min="1" max="10" step="1" id="entertaining" name="entertaining" value="5" oninput="document.getElementById('entertaining-val').innerText = this.value">
|
||||
<div class="d-flex justify-content-between mt-1">
|
||||
<small class="text-muted">Absolutely not</small>
|
||||
-
|
||||
<small class="text-muted">Absolutely</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="theme" class="form-label">How was the theme? (<span id="theme-val">5</span>/10)</label>
|
||||
<input type="range" class="form-range" min="1" max="10" step="1" id="theme" name="theme" value="5" oninput="document.getElementById('theme-val').innerText = this.value">
|
||||
<div class="d-flex justify-content-between mt-1">
|
||||
<small class="text-muted">Absolutely not</small>
|
||||
-
|
||||
<small class="text-muted">Absolutely</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="feedback" class="form-label">Additional Feedback</label>
|
||||
<textarea class="form-control" id="feedback" name="feedback" rows="4" placeholder="Tell us more about your experience..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
<button type="submit" class="btn btn-success">Submit Feedback & Return to Dashboard</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user