546 lines
18 KiB
Plaintext
546 lines
18 KiB
Plaintext
@{
|
||
ViewData["Title"] = "Recovered Evidence";
|
||
}
|
||
|
||
<div class="container reckoning-evidence-page my-5">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<nav aria-label="breadcrumb">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item"><a asp-controller="Home" asp-action="Index">Home</a></li>
|
||
<li class="breadcrumb-item"><a asp-controller="TheAlphaFlame" asp-action="Index">The Alpha Flame</a></li>
|
||
<li class="breadcrumb-item"><a asp-controller="Reckoning" asp-action="Index">Reckoning</a></li>
|
||
<li class="breadcrumb-item"><a asp-controller="Reckoning" asp-action="Extras">Extras</a></li>
|
||
<li class="breadcrumb-item active text-white" aria-current="page">Investigation</li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
<section class="evidence-hero">
|
||
<div class="evidence-hero-inner">
|
||
<p class="case-label">Restricted Companion Material</p>
|
||
|
||
<h1 class="evidence-title">Recovered Evidence</h1>
|
||
|
||
<p class="evidence-lead">
|
||
Some things in <em>The Alpha Flame: Reckoning</em> were hidden in plain sight.
|
||
A line dismissed too quickly. A voice half-heard. A question no one wanted to answer.
|
||
</p>
|
||
|
||
<p class="evidence-copy">
|
||
Below are fragments recovered from the world behind the book. Some are useful.
|
||
Some are distractions. Choose the three pieces that tell the truth, then tell me who
|
||
you think is not who they appear to be.
|
||
</p>
|
||
|
||
<p class="evidence-warning">
|
||
Spoilers ahead. This section is intended for readers who have finished <em>Reckoning</em>.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="evidence-grid">
|
||
|
||
<div class="evidence-card tape-card" data-evidence-id="tape1">
|
||
<h3>Tape One</h3>
|
||
<audio controls preload="metadata">
|
||
<source src="/audio/investigation/tape-1.mp3" type="audio/mpeg" />
|
||
</audio>
|
||
<label>
|
||
<input type="checkbox" class="evidence-check" value="tape1" />
|
||
Select evidence
|
||
</label>
|
||
</div>
|
||
|
||
<div class="evidence-card tape-card" data-evidence-id="tape2">
|
||
<h3>Tape Two</h3>
|
||
<audio controls preload="metadata">
|
||
<source src="/audio/investigation/tape-2.mp3" type="audio/mpeg" />
|
||
</audio>
|
||
<label>
|
||
<input type="checkbox" class="evidence-check" value="tape2" />
|
||
Select evidence
|
||
</label>
|
||
</div>
|
||
|
||
<div class="evidence-card tape-card" data-evidence-id="tape3">
|
||
<h3>Tape Three</h3>
|
||
<audio controls preload="metadata">
|
||
<source src="/audio/investigation/tape-3.mp3" type="audio/mpeg" />
|
||
</audio>
|
||
<label>
|
||
<input type="checkbox" class="evidence-check" value="tape3" />
|
||
Select evidence
|
||
</label>
|
||
</div>
|
||
|
||
<div class="evidence-card" data-evidence-id="poem">
|
||
<h3>Recovered Verse</h3>
|
||
<responsive-image src="poem.png" class="evidence-img" alt="Recovered poem" display-width-percentage="50"></responsive-image>
|
||
<label>
|
||
<input type="checkbox" class="evidence-check" value="poem" />
|
||
Select evidence
|
||
</label>
|
||
</div>
|
||
|
||
<div class="evidence-card" data-evidence-id="notes">
|
||
<h3>Handwritten Notes</h3>
|
||
<responsive-image src="hand-written-note.png" class="evidence-img" alt="Hand written note" display-width-percentage="50"></responsive-image>
|
||
<label>
|
||
<input type="checkbox" class="evidence-check" value="notes" />
|
||
Select evidence
|
||
</label>
|
||
</div>
|
||
|
||
<div class="evidence-card" data-evidence-id="ledger">
|
||
<h3>Ledger Page</h3>
|
||
<responsive-image src="ledger.png" class="evidence-img" alt="Ledger" display-width-percentage="50"></responsive-image>
|
||
<label>
|
||
<input type="checkbox" class="evidence-check" value="ledger" />
|
||
Select evidence
|
||
</label>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="evidence-actions">
|
||
<button type="button" id="checkEvidenceBtn" class="btn btn-dark">
|
||
Check Evidence
|
||
</button>
|
||
<p id="evidenceMessage" class="evidence-message"></p>
|
||
</div>
|
||
|
||
<section id="theorySection" class="theory-section d-none">
|
||
<h2>Someone is not who they appear to be.</h2>
|
||
|
||
<p class="theory-hint">
|
||
The question was asked once... and no one listened.
|
||
</p>
|
||
|
||
<form asp-action="SubmitTheory" method="post" class="theory-form">
|
||
@Html.AntiForgeryToken()
|
||
|
||
<div class="mb-4">
|
||
<label class="form-label">Who do you think it is?</label>
|
||
|
||
<div class="theory-options">
|
||
<label><input type="radio" name="Suspect" value="Barbara" required /> Barbara</label>
|
||
<label><input type="radio" name="Suspect" value="Dylan" /> Dylan</label>
|
||
<label><input type="radio" name="Suspect" value="Gareth" /> Gareth</label>
|
||
<label><input type="radio" name="Suspect" value="Graham" /> Graham</label>
|
||
<label><input type="radio" name="Suspect" value="Rebecca" /> Rebecca</label>
|
||
<label><input type="radio" name="Suspect" value="Rick" /> Rick</label>
|
||
<label><input type="radio" name="Suspect" value="Simon" /> Simon</label>
|
||
<label><input type="radio" name="Suspect" value="Sophie" /> Sophie</label>
|
||
<label><input type="radio" name="Suspect" value="Yvonne" /> Yvonne</label>
|
||
<label><input type="radio" name="Suspect" value="Other" /> Someone else</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<label for="Reason" class="form-label">What made you think that?</label>
|
||
<textarea id="Reason" name="Reason" class="form-control" rows="5" required></textarea>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<label for="EmailAddress" class="form-label">Email address</label>
|
||
<input id="EmailAddress" name="EmailAddress" type="email" class="form-control" required />
|
||
<small class="form-text">
|
||
Needed so I can contact winners when Redemption is released.
|
||
</small>
|
||
</div>
|
||
|
||
<div class="form-check mb-4">
|
||
<input id="MarketingOptIn" name="MarketingOptIn" type="checkbox" class="form-check-input" value="true" />
|
||
<label for="MarketingOptIn" class="form-check-label">
|
||
I would like updates about future releases and extras.
|
||
</label>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-dark">
|
||
Submit Theory
|
||
</button>
|
||
</form>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
@section Meta {
|
||
<style>
|
||
.reckoning-evidence-page {
|
||
max-width: 1180px;
|
||
color: #2b2118;
|
||
}
|
||
|
||
.evidence-title {
|
||
text-align: center;
|
||
font-weight: 800;
|
||
margin-bottom: 1rem;
|
||
color: #ffffff;
|
||
letter-spacing: .03em;
|
||
}
|
||
|
||
.evidence-intro {
|
||
max-width: 760px;
|
||
margin: 0 auto 2rem auto;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
font-size: 1.05rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.evidence-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(260px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
@@media (max-width: 991px) {
|
||
.evidence-grid {
|
||
grid-template-columns: repeat(2, minmax(240px, 1fr));
|
||
}
|
||
}
|
||
|
||
@@media (max-width: 575px) {
|
||
.evidence-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.evidence-card {
|
||
background: #f3ead8;
|
||
color: #2b2118;
|
||
border: 1px solid #d3c1a2;
|
||
border-radius: .75rem;
|
||
padding: 1.25rem;
|
||
box-shadow: 0 8px 18px rgba(40, 28, 18, 0.18);
|
||
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.evidence-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: .75rem;
|
||
background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 35%), radial-gradient(circle at top right, rgba(92,64,38,.08), transparent 45%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.evidence-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 26px rgba(40, 28, 18, 0.25);
|
||
border-color: #aa8152;
|
||
}
|
||
|
||
.evidence-card.selected {
|
||
outline: 3px solid #8b5e34;
|
||
box-shadow: 0 0 0 5px rgba(139, 94, 52, .18), 0 12px 26px rgba(40, 28, 18, 0.25);
|
||
}
|
||
|
||
.evidence-card h3 {
|
||
font-size: 1.15rem;
|
||
font-weight: 800;
|
||
margin-bottom: 1rem;
|
||
color: #3b2a1c;
|
||
text-transform: uppercase;
|
||
letter-spacing: .04em;
|
||
}
|
||
|
||
.evidence-card audio {
|
||
width: 100%;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.evidence-card.tape-card {
|
||
min-height: 360px;
|
||
background: linear-gradient(rgba(35, 25, 18, .18), rgba(35, 25, 18, .7)), url('/images/cassette-bg.png') center / cover no-repeat;
|
||
color: #f7efe2;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.evidence-card.tape-card h3,
|
||
.evidence-card.tape-card label {
|
||
color: #f7efe2;
|
||
text-shadow: 0 1px 2px rgba(0,0,0,.8);
|
||
}
|
||
|
||
.evidence-card.tape-card audio {
|
||
margin-top: auto;
|
||
margin-bottom: 1rem;
|
||
filter: sepia(.25) contrast(1.05);
|
||
}
|
||
|
||
.evidence-card.tape-card::before {
|
||
background: radial-gradient(circle at center, rgba(255,255,255,.08), transparent 55%), linear-gradient(135deg, rgba(255,255,255,.12), transparent 45%);
|
||
}
|
||
|
||
.evidence-img {
|
||
width: 100%;
|
||
height: 230px;
|
||
object-fit: cover;
|
||
border-radius: .45rem;
|
||
margin-bottom: 1rem;
|
||
border: 6px solid #efe2c7;
|
||
box-shadow: 0 6px 14px rgba(0,0,0,.22);
|
||
background: #e6d4b4;
|
||
}
|
||
|
||
.evidence-card label {
|
||
display: flex;
|
||
gap: .55rem;
|
||
align-items: center;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
color: #3b2a1c;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.evidence-card input[type="checkbox"] {
|
||
accent-color: #8b5e34;
|
||
}
|
||
|
||
.evidence-actions {
|
||
text-align: center;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.evidence-message {
|
||
display: block;
|
||
width: fit-content;
|
||
max-width: 720px;
|
||
margin: 1.25rem auto 0 auto;
|
||
padding: .85rem 1.2rem;
|
||
font-weight: 800;
|
||
color: #fff4dc;
|
||
background: rgba(43, 33, 24, 0.95);
|
||
border: 1px solid #d3a45f;
|
||
border-radius: .6rem;
|
||
box-shadow: 0 8px 24px rgba(0,0,0,.35);
|
||
text-shadow: 0 1px 2px rgba(0,0,0,.8);
|
||
}
|
||
|
||
.evidence-message {
|
||
opacity: 0;
|
||
transform: translateY(6px);
|
||
transition: all .25s ease;
|
||
}
|
||
|
||
.evidence-message:not(:empty) {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.evidence-message:empty {
|
||
display: none;
|
||
}
|
||
|
||
.theory-section {
|
||
margin-top: 3rem;
|
||
padding: 2rem;
|
||
border-radius: .75rem;
|
||
background: #2b2118;
|
||
color: #f3ead8;
|
||
border: 1px solid #7d5a39;
|
||
box-shadow: 0 14px 35px rgba(0,0,0,0.28);
|
||
}
|
||
|
||
.theory-section h2 {
|
||
font-weight: 800;
|
||
margin-bottom: 1rem;
|
||
color: #fff4dc;
|
||
}
|
||
|
||
.theory-hint {
|
||
font-size: 1.1rem;
|
||
color: #d9c29e;
|
||
margin-bottom: 2rem;
|
||
font-style: italic;
|
||
}
|
||
|
||
.theory-options {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: .75rem;
|
||
}
|
||
|
||
.theory-options label {
|
||
background: #3a2b20;
|
||
border: 1px solid #7d5a39;
|
||
color: #f3ead8;
|
||
padding: .75rem;
|
||
border-radius: .5rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.theory-options label:hover {
|
||
background: #463426;
|
||
}
|
||
|
||
.theory-options input[type="radio"],
|
||
.theory-form input[type="checkbox"] {
|
||
accent-color: #d3a45f;
|
||
}
|
||
|
||
.theory-form .form-control {
|
||
border-radius: .5rem;
|
||
border-color: #c8b18e;
|
||
background: #fffaf0;
|
||
color: #2b2118;
|
||
}
|
||
|
||
.theory-form .form-text {
|
||
color: #d6c7b5;
|
||
}
|
||
|
||
.btn-dark {
|
||
background: #2b2118;
|
||
border-color: #2b2118;
|
||
}
|
||
|
||
.btn-dark:hover {
|
||
background: #5b3a24;
|
||
border-color: #5b3a24;
|
||
}
|
||
|
||
.d-none {
|
||
display: none !important;
|
||
}
|
||
|
||
.evidence-hero {
|
||
max-width: 920px;
|
||
margin: 0 auto 2.5rem auto;
|
||
padding: 1.5rem;
|
||
border-radius: 1.1rem;
|
||
background: linear-gradient(rgba(30, 24, 18, .86), rgba(30, 24, 18, .92)), radial-gradient(circle at top left, rgba(211, 164, 95, .25), transparent 45%);
|
||
border: 1px solid rgba(211, 164, 95, .55);
|
||
box-shadow: 0 18px 45px rgba(0,0,0,.35);
|
||
}
|
||
|
||
.evidence-hero-inner {
|
||
padding: 2rem;
|
||
border: 1px solid rgba(243, 234, 216, .22);
|
||
border-radius: .85rem;
|
||
background: rgba(0,0,0,.16);
|
||
text-align: center;
|
||
}
|
||
|
||
.case-label {
|
||
display: inline-block;
|
||
margin-bottom: .85rem;
|
||
padding: .35rem .75rem;
|
||
border: 1px solid rgba(211, 164, 95, .8);
|
||
color: #d3a45f;
|
||
text-transform: uppercase;
|
||
letter-spacing: .12em;
|
||
font-size: .75rem;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.evidence-title {
|
||
color: #fff4dc;
|
||
font-size: clamp(2rem, 4vw, 3.25rem);
|
||
margin-bottom: 1rem;
|
||
text-shadow: 0 3px 10px rgba(0,0,0,.75);
|
||
}
|
||
|
||
.evidence-lead {
|
||
color: #f3ead8;
|
||
font-size: 1.18rem;
|
||
line-height: 1.65;
|
||
max-width: 760px;
|
||
margin: 0 auto 1rem auto;
|
||
}
|
||
|
||
.evidence-copy {
|
||
color: #dbc8aa;
|
||
font-size: 1rem;
|
||
line-height: 1.6;
|
||
max-width: 760px;
|
||
margin: 0 auto 1.25rem auto;
|
||
}
|
||
|
||
.evidence-warning {
|
||
display: inline-block;
|
||
margin: .5rem auto 0 auto;
|
||
padding: .55rem .85rem;
|
||
background: rgba(91, 36, 31, .72);
|
||
border: 1px solid rgba(255, 210, 170, .35);
|
||
border-radius: .5rem;
|
||
color: #ffe6cf;
|
||
font-size: .92rem;
|
||
font-weight: 700;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
const correctEvidence = ["tape1", "poem", "notes"];
|
||
const checks = Array.from(document.querySelectorAll(".evidence-check"));
|
||
const button = document.getElementById("checkEvidenceBtn");
|
||
const message = document.getElementById("evidenceMessage");
|
||
const theorySection = document.getElementById("theorySection");
|
||
|
||
function updateCards() {
|
||
checks.forEach(check => {
|
||
const card = check.closest(".evidence-card");
|
||
card.classList.toggle("selected", check.checked);
|
||
});
|
||
}
|
||
|
||
checks.forEach(check => {
|
||
check.addEventListener("change", function () {
|
||
const selected = checks.filter(c => c.checked);
|
||
|
||
if (selected.length > 3) {
|
||
check.checked = false;
|
||
message.textContent = "Choose only three pieces.";
|
||
} else {
|
||
message.textContent = "";
|
||
}
|
||
|
||
updateCards();
|
||
});
|
||
});
|
||
|
||
button.addEventListener("click", function () {
|
||
const selected = checks
|
||
.filter(c => c.checked)
|
||
.map(c => c.value);
|
||
|
||
if (selected.length !== 3) {
|
||
message.textContent = "Choose exactly three pieces of evidence.";
|
||
return;
|
||
}
|
||
|
||
const matched = selected.filter(x => correctEvidence.includes(x)).length;
|
||
const allCorrect = correctEvidence.every(x => selected.includes(x));
|
||
|
||
if (allCorrect) {
|
||
message.textContent = "Now you’re seeing it the right way.";
|
||
button.classList.add("d-none");
|
||
|
||
setTimeout(() => {
|
||
theorySection.classList.remove("d-none");
|
||
}, 900);
|
||
|
||
setTimeout(() => {
|
||
theorySection.scrollIntoView({ behavior: "smooth", block: "start" });
|
||
}, 1700);
|
||
|
||
return;
|
||
}
|
||
|
||
if (matched === 2) {
|
||
message.textContent = "Close... but something doesn’t belong.";
|
||
return;
|
||
}
|
||
|
||
message.textContent = "You’re choosing what stands out... not what matters.";
|
||
});
|
||
});
|
||
</script>
|
||
} |