<div style="display:flex; flex-direction:column; align-items:center; gap:4px;">
<h1>Characters</h1>
<h3>Click on a portrait to learn more about this character</h3>
<!-- Grid of portraits -->
<div style="display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; width:100%; max-width:1200px; overflow:visible;">
<a data-passage="ColonelWinZIP" class="char suspect" data-name="Colonel Win-ZIP" title="Colonel Win-ZIP">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Cmd%20Win%20Zip.png" alt="Colonel Win-ZIP">
</a>
<a data-passage="ClippordButler" class="char suspect" data-name="Clippord - The Butler" title="Clippord - The Butler">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Clippy%20the%20Butler.png" alt="Clippord - The Butler">
</a>
<a data-passage="Detective" class="char detective" data-name="Detective (You)" title="Detective (You)">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Detective.png" alt="Detective (You)">
</a>
<a data-passage="EweAn" class="char suspect" data-name="Ewe-an" title="Ewe-an">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Ewe-an.png" alt="Ewe-an">
</a>
<a data-passage="HUSCarWilde" class="char normal" data-name="HUScar Wilde" title="HUScar Wilde">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/HUS-car%20Wilde.png" alt="HUScar Wilde">
</a>
<a data-passage="JaySonJnr" class="char suspect" data-name="Jay Son Jnr." title="Jay Son Jnr.">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Jay%20Son%20Jnr.png" alt="Jay Son Jnr.">
</a>
<a data-passage="LexyCon" class="char suspect" data-name="Dr. Lexy Con" title="Dr. Lexy Con">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Lexi%20Con.png" alt="Dr. Lexy Con">
</a>
<a data-passage="MerryLoopwell" class="char suspect" data-name="Merry Loopwell" title="Merry Loopwell">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Merry%20Loopwell.png" alt="Merry Loopwell">
</a>
<a data-passage="MPEGgy" class="char suspect" data-name="MPEG-gy" title="MPEG-gy">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/MPEG-gy.png" alt="MPEG-gy">
</a>
<a data-passage="SirRegex" class="char victim" data-name="Sir Regex Metadata IV" title="Sir Regex Metadata IV">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Sir%20Regex%20Metadata%20IV.png" alt="Sir Regex Metadata IV">
</a>
<a data-passage="TIFFani" class="char suspect" data-name="TIFFani" title="TIFFani">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/TIFFani.png" alt="TIFFani">
</a>
<a data-passage="VicarVector" class="char suspect" data-name="Vicar Vector" title="Vicar Vector">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/vicar.png" alt="Vicar Vector">
</a>
</div>
</div>
<style>
/* Card/link wrapper */
.char {
position: relative;
display: block;
text-decoration: none;
cursor: pointer;
}
/* Portrait */
.char img {
width: 100%;
height: auto;
border-radius: 6px;
border: 4px solid transparent; /* base thickness */
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Roles (border colors) */
.char.detective img { border-color: #ffffff; }
.char.victim img { border-color: #3b82f6; } /* blue */
.char.normal img { border-color: #22c55e; } /* green */
.char.suspect img { border-color: #ef4444; } /* red */
/* Hover: slight zoom + color glow */
.char:hover img {
transform: scale(1.04);
}
/* Per-role glow (soft, matching border) */
.char.detective:hover img {
box-shadow:
0 0 0 2px rgba(255,255,255,0.7),
0 0 12px rgba(255,255,255,0.7),
0 0 20px rgba(255,255,255,0.5);
}
.char.victim:hover img {
box-shadow:
0 0 0 2px rgba(59,130,246,0.6),
0 0 12px rgba(59,130,246,0.6),
0 0 20px rgba(59,130,246,0.45);
}
.char.normal:hover img {
box-shadow:
0 0 0 2px rgba(34,197,94,0.6),
0 0 12px rgba(34,197,94,0.6),
0 0 20px rgba(34,197,94,0.45);
}
.char.suspect:hover img {
box-shadow:
0 0 0 2px rgba(239,68,68,0.6),
0 0 12px rgba(239,68,68,0.6),
0 0 20px rgba(239,68,68,0.45);
}
/* Tooltip */
.char::after {
content: attr(data-name);
position: absolute;
bottom: -24px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.78);
color: #fff;
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
opacity: 0;
pointer-events: none;
transition: opacity .15s ease;
white-space: nowrap;
}
.char:hover::after { opacity: 1; }
</style><div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Clippy%20the%20Butler.png" alt="Clippy - The Butler">
</div>
<div class="char-text">
<h2>Clippy - The Butler</h2>
<p><b>Occupation:</b> Butler of Metadata Manor</p>
<p><b>Favourite Location:</b> The grand hall, hovering politely in the corner</p>
<p><b>Quote:</b> "Need help picking the perfect murder weapon? I am here to assist you"</p>
<p><b>Hobby:</b> Polishing the floppy disk tray</p>
<p><b>Village Reputation:</b> Helpful… until he isn’t</p>
<p><b>Pet Peeve:</b> All messes</p>
<div class="start-menu">
<button class="button" data-passage="Start">Go back to start</button>
<button class="button" data-passage="Characters">Go back to characters</button>
</div>
</div>
</div>
<style>
.character-page {
display: flex;
align-items: flex-start;
gap:16px; /* spacing between image & text */
max-width: 900px;
margin: 0 auto;
}
.character-page .char-image img {
width: 220px;
height: auto;
border-radius: 8px;
}
/* Text column */
.character-page .char-text {
flex: 1;
text-align: left;
line-height: 1.3; /* tighter line spacing */
}
.character-page .char-text h2 {
margin: 0 0 2px 0; /* only a small gap under heading */
font-size: 1.6em;
text-align: left;
}
.character-page .char-text p {
margin: 4px 0; /* tiny gap between paragraphs */
text-align: left;
}
</style><div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Cmd%20Win%20Zip.png" alt="Colonel Win-ZIP">
</div>
<div class="char-text">
<h2>Colonel Win-ZIP</h2>
<p><b>Occupation:</b> Retired military man, obsessed with effiency</p>
<p><b>Favourite Location:</b> The .PUB, where he lectures on “properly compressed banter”</p>
<p><b>Quote:</b> “Tighten it up!”</p>
<p><b>Hobby:</b> Folding maps until they’re the size of postage stamps</p>
<p><b>Village Reputation:</b> Grumpy but respected</p>
<p><b>Pet Peeve:</b> Unnecessary expansion</p>
<div class="start-menu">
<button class="button" data-passage="Start">Go back to start</button>
<button class="button" data-passage="Characters">Go back to characters</button>
</div>
</div>
</div>
<style>
.character-page {
display: flex;
align-items: flex-start;
gap:16px; /* spacing between image & text */
max-width: 900px;
margin: 0 auto;
}
.character-page .char-image img {
width: 220px;
height: auto;
border-radius: 8px;
}
/* Text column */
.character-page .char-text {
flex: 1;
text-align: left;
line-height: 1.3; /* tighter line spacing */
}
.character-page .char-text h2 {
margin: 0 0 2px 0; /* only a small gap under heading */
font-size: 1.6em;
text-align: left;
}
.character-page .char-text p {
margin: 4px 0; /* tiny gap between paragraphs */
text-align: left;
}
</style>Well that was nice. You can't help get the niggling feeling that you have narrowly missed out on some sort of harrowing adventure but oh well. There are emails to reply to, a book launch to attend, and that metadata isn't just going to write itself now is it.
You settle back into the tedium of everyday life with a contendedly safe yawn.
<div class="start-menu">
<button class="button" data-passage="End credits">End credits</button>
</div><div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Detective.png" alt="Detective (You)">
</div>
<div class="char-text">
<h2>Detective (You)</h2>
<p><b>Occupation:</b> Consultant in digital preservation & amateur sleuth</p>
<p><b>Favourite Location:</b> Metadata Manor’s dusty archives</p>
<p><b>Quote:</b> “This could be important evidence.”</p>
<p><b>Hobby:</b> Listening to true-crime podcasts at double speed</p>
<p><b>Village Reputation:</b> A bit mysterious, but welcomed - for now</p>
<p><b>Pet Peeve:</b> Sticky notes with no metadata</p>
<div class="start-menu">
<button class="button" data-passage="Start">Go back to start</button>
<button class="button" data-passage="Characters">Go back to characters</button>
</div>
</div>
</div>
<style>
.character-page {
display: flex;
align-items: flex-start;
gap:16px; /* spacing between image & text */
max-width: 900px;
margin: 0 auto;
}
.character-page .char-image img {
width: 220px;
height: auto;
border-radius: 8px;
}
/* Text column */
.character-page .char-text {
flex: 1;
text-align: left;
line-height: 1.3; /* tighter line spacing */
}
.character-page .char-text h2 {
margin: 0 0 2px 0; /* only a small gap under heading */
font-size: 1.6em;
text-align: left;
}
.character-page .char-text p {
margin: 4px 0; /* tiny gap between paragraphs */
text-align: left;
}
</style>Upon arriving at Metadata Manor you are welcomed by Clippy the Butler in the foyer. The butler looks very upset.
"Welcome, welcome, you must be $player_name!! Sir Regex and I were expecting you, but not under these gloomy circumstances."
Clippy explains that Sir Regex was found dead in the study that afternoon. The body has been removed by authorities for examination, but because of the heavy snow there is no longer any access to the little village of Checksum-On-The Wold and they can’t possibly get to you until the roads have cleared.
You, a life long Agatha Christie fan, are stuck in the village for three days with no escape, and with a murderer close by your side.
You decided to help the butler and try to figure out what has happened.
<div class="start-menu">
<button class="button" data-passage="Talk to Clippy">Talk to Clippy</button>
</div><div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Ewe-an.png" alt="Ewe-an">
</div>
<div class="char-text">
<h2>Ewe-an</h2>
<p><b>Occupation:</b> Keeper of the village RAMs</p>
<p><b>Favourite Location:</b> An open field</p>
<p><b>Quote:</b> “They all wander off eventually.”</p>
<p><b>Hobby:</b> Knitting scarves with binary patterns.</p>
<p><b>Village Reputation:</b> Gentle, but a bit absent-minded</p>
<p><b>Pet Peeve:</b> Stray colons in his log files</p>
<div class="start-menu">
<button class="button" data-passage="Start">Go back to start</button>
<button class="button" data-passage="Characters">Go back to characters</button>
</div>
</div>
</div>
<style>
.character-page {
display: flex;
align-items: flex-start;
gap:16px; /* spacing between image & text */
max-width: 900px;
margin: 0 auto;
}
.character-page .char-image img {
width: 220px;
height: auto;
border-radius: 8px;
}
/* Text column */
.character-page .char-text {
flex: 1;
text-align: left;
line-height: 1.3; /* tighter line spacing */
}
.character-page .char-text h2 {
margin: 0 0 2px 0; /* only a small gap under heading */
font-size: 1.6em;
text-align: left;
}
.character-page .char-text p {
margin: 4px 0; /* tiny gap between paragraphs */
text-align: left;
}
</style>You find yourself in a Victorian style study.
Luckily it has been tidied a bit, after the unfortunate event.
There is a letter on the desk. And what is that over there, between the books, you wonder. Go see if there is anything to explore in this room.
<div style="position: relative; display: inline-block;">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/The_Study_with_feet.png" alt="The study" width="800">
Done exploring this room?
<div class="start-menu">
<button class="button" data-passage="See the map">See the map</button>
</div>
<!-- Invisible hotspot linking to Letter on desk -->
<a data-passage="Letter on desk"
style="position: absolute;
left: 250px;
top: 350px;
width: 120px;
height: 80px;
display: block;">
</a>
<!-- Invisible hotspot linking to XML family tree -->
<a data-passage="XML family tree"
style="position: absolute;
left: 550px;
top: 50px;
width: 120px;
height: 80px;
display: block;">
</a>You enter the drawing room. A police officer stands by the fireplace, his uniform dimly lit by the glow of the lamps.
As you approach, he hands you a <span class="note-link" onclick="showNote()">note</span>.
<!-- Image + invisible hotspot -->
<div style="position: relative; display: inline-block;">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Files.png" alt="Case Files" width="800">
<div class="start-menu">
<button class="button" data-passage="See the map">See the map</button>
</div>
<!-- Hidden pop-up note -->
<div id="note-popup" class="note-popup" style="display:none;">
<div class="note-content">
<p>Detective,</p>
<p>I’ve compiled some files on all the people of interest in this case. They’re waiting for you on the desk. Just click on a file to get the information about that person.</p>
<p>– Officer T. Constable</p>
<button class="close-button" onclick="closeNote()">Close</button>
</div>
</div>
<!-- Invisible hotspot triggering character popup -->
<a class="hotspot" onclick="showColonel()"
style="position: absolute;
left: 100px;
top: 140px;
width: 180px;
height: 130px;
display: block;
cursor: pointer;">
</a>
</div>
<!-- Invisible hotspot triggering character popup -->
<a class="hotspot" onclick="showClippy()"
style="position: absolute;
left: 1160px;
top: 370px;
width: 180px;
height: 130px;
display: block;
cursor: pointer;">
</a>
</div>
<!-- Invisible hotspot triggering character popup -->
<a class="hotspot" onclick="showEwean()"
style="position: absolute;
left: 1360px;
top: 370px;
width: 180px;
height: 130px;
display: block;
cursor: pointer;">
</a>
</div>
<!-- Invisible hotspot triggering character popup -->
<a class="hotspot" onclick="showHuscar()"
style="position: absolute;
left: 940px;
top: 520px;
width: 180px;
height: 130px;
display: block;
cursor: pointer;">
</a>
</div>
<!-- Invisible hotspot triggering character popup -->
<a class="hotspot" onclick="showJay()"
style="position: absolute;
left: 1150px;
top: 520px;
width: 180px;
height: 130px;
display: block;
cursor: pointer;">
</a>
</div>
<!-- Invisible hotspot triggering character popup -->
<a class="hotspot" onclick="showLexy()"
style="position: absolute;
left: 1370px;
top: 520px;
width: 180px;
height: 130px;
display: block;
cursor: pointer;">
</a>
</div>
<!-- Invisible hotspot triggering character popup -->
<a class="hotspot" onclick="showMerry()"
style="position: absolute;
left: 930px;
top: 690px;
width: 180px;
height: 130px;
display: block;
cursor: pointer;">
</a>
</div>
<!-- Invisible hotspot triggering character popup -->
<a class="hotspot" onclick="showMpeggy()"
style="position: absolute;
left: 1150px;
top: 690px;
width: 190px;
height: 130px;
display: block;
cursor: pointer;">
</a>
</div>
<!-- Invisible hotspot triggering character popup -->
<a class="hotspot" onclick="showTiffani()"
style="position: absolute;
left: 1380px;
top: 690px;
width: 180px;
height: 130px;
display: block;
cursor: pointer;">
</a>
</div>
<!-- Invisible hotspot triggering character popup -->
<a class="hotspot" onclick="showVicar()"
style="position: absolute;
left: 1150px;
top: 860px;
width: 210px;
height: 150px;
display: block;
cursor: pointer;">
</a>
</div>
<!-- Hidden character popup -->
<div id="colonel-popup" class="note-popup" style="display:none;">
<div class="note-content">
<div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Cmd%20Win%20Zip.png" alt="Colonel Win-ZIP">
</div>
<div class="char-text">
<h2>Colonel Win-ZIP</h2>
<p><b>Occupation:</b> Retired military man, obsessed with efficiency</p>
<p><b>Favourite Location:</b> The .PUB, where he lectures on “properly compressed banter”</p>
<p><b>Quote:</b> “Tighten it up!”</p>
<p><b>Hobby:</b> Folding maps until they’re the size of postage stamps</p>
<p><b>Village Reputation:</b> Grumpy but respected</p>
<p><b>Pet Peeve:</b> Unnecessary expansion</p>
</div>
</div>
<button class="close-button" onclick="closeColonel()">Close</button>
</div>
</div>
<!-- Hidden character popup -->
<div id="clippy-popup" class="note-popup" style="display:none;">
<div class="note-content">
<div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Clippy%20the%20Butler.png" alt="Clippy - The Butler">
</div>
<div class="char-text">
<h2>Clippy - The Butler</h2>
<p><b>Occupation:</b> Butler of Metadata Manor</p>
<p><b>Favourite Location:</b>The grand hall, hovering politely in the corner</p>
<p><b>Quote:</b> “Tighten it up!”</p>
<p><b>Hobby:</b> Polishing the floppy disk tray</p>
<p><b>Village Reputation:</b> Helpful… until he isn’t</p>
<p><b>Pet Peeve:</b> All messes</p>
</div>
</div>
<button class="close-button" onclick="closeClippy()">Close</button>
</div>
</div>
<!-- Hidden character popup -->
<div id="ewean-popup" class="note-popup" style="display:none;">
<div class="note-content">
<div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Ewe-an.png" alt="Ewe-an">
</div>
<div class="char-text">
<h2>Ewe-an</h2>
<p><b>Occupation:</b> Keeper of the village RAMs</p>
<p><b>Favourite Location:</b>An open field</p>
<p><b>Quote:</b> “They all wander off eventually.”</p>
<p><b>Hobby:</b> Knitting scarves with binary patterns</p>
<p><b>Village Reputation:</b> Gentle, but a bit absent-minded</p>
<p><b>Pet Peeve:</b> Stray colons in his log files</p>
</div>
</div>
<button class="close-button" onclick="closeEwean()">Close</button>
</div>
</div>
<!-- Hidden character popup -->
<div id="huscar-popup" class="note-popup" style="display:none;">
<div class="note-content">
<div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/HUS-car%20Wilde.png" alt="HUScar Wilde">
</div>
<div class="char-text">
<h2>HUScar Wilde</h2>
<p><b>Occupation:</b> Hedge-cutter, or so they say</p>
<p><b>Favourite Location:</b>The Manor gardens, where the hedges whisper in patterns</p>
<p><b>Quote:</b> Rarely speaks - when he does, it sounds like static</p>
<p><b>Hobby:</b> Cutting hedges into ASCII art</p>
<p><b>Village Reputation:</b> Best not spoken of</p>
<p><b>Pet Peeve:</b> Overgrown shrubs</p>
</div>
</div>
<button class="close-button" onclick="closeHuscar()">Close</button>
</div>
</div>
<!-- Hidden character popup -->
<div id="jay-popup" class="note-popup" style="display:none;">
<div class="note-content">
<div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Jay%20Son%20Jnr.png" alt="Jay Son Jnr.">
</div>
<div class="char-text">
<h2>Jay Son Jnr.</h2>
<p><b>Occupation:</b> Proprietor of The .PUB</p>
<p><b>Favourite Location:</b>Behind the bar, furiously rearranging bottles</p>
<p><b>Quote:</b> “You’ll need to nest that order properly.”</p>
<p><b>Hobby:</b> Rearranging drink menus into JSON trees</p>
<p><b>Village Reputation:</b> Charismatic but unstable</p>
<p><b>Pet Peeve:</b> Missing brackets</p>
</div>
</div>
<button class="close-button" onclick="closeJay()">Close</button>
</div>
</div>
<!-- Hidden character popup -->
<div id="lexy-popup" class="note-popup" style="display:none;">
<div class="note-content">
<div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Lexi%20Con.png" alt="Dr. Lexy Con">
</div>
<div class="char-text">
<h2>Dr. Lexy Con</h2>
<p><b>Occupation:</b> Scholar in the Manor library</p>
<p><b>Favourite Location:</b> A shadowy library corner, where pages whisper</p>
<p><b>Quote:</b>“Shhh… Garamond is speaking."</p>
<p><b>Hobby:</b> Stitching letters into strange ligatures.</p>
<p><b>Village Reputation:</b> Eccentric and unsettling</p>
<p><b>Pet Peeve:</b> Not embedded fonts</p>
</div>
</div>
<button class="close-button" onclick="closeLexy()">Close</button>
</div>
</div>
<!-- Hidden character popup -->
<div id="merry-popup" class="note-popup" style="display:none;">
<div class="note-content">
<div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Merry%20Loopwell.png" alt="Merry Loopwell">
</div>
<div class="char-text">
<h2>Merry Loopwell</h2>
<p><b>Occupation:</b> Owner of The Charming GIF Shop</p>
<p><b>Favourite Location:</b> The stock room</p>
<p><b>Quote:</b> “And again, and again, and again…”</p>
<p><b>Hobby:</b> Collecting perpetual-motion toys</p>
<p><b>Village Reputation:</b> Sweet, predictable, sometimes eerie</p>
<p><b>Pet Peeve:</b> Things that don’t loop smoothly</p>
</div>
</div>
<button class="close-button" onclick="closeMerry()">Close</button>
</div>
</div>
<!-- Hidden character popup -->
<div id="mpeggy-popup" class="note-popup" style="display:none;">
<div class="note-content">
<div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/MPEG-gy.png" alt="MPEG-gy">
</div>
<div class="char-text">
<h2>MPEG-gy</h2>
<p><b>Occupation:</b> Runs the Plaintext Post Office</p>
<p><b>Favourite Location:</b> The Post Office counter, humming while she sorts</p>
<p><b>Quote:</b> “Oh, I heard about that…”</p>
<p><b>Hobby:</b> Singing gossip as if it were hymnals</p>
<p><b>Village Reputation:</b> Cheerful but cutting</p>
<p><b>Pet Peeve:</b> Letters without stamps</p>
</div>
</div>
<button class="close-button" onclick="closeMpeggy()">Close</button>
</div>
</div>
<!-- Hidden character popup -->
<div id="tiffani-popup" class="note-popup" style="display:none;">
<div class="note-content">
<div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/TIFFani.png" alt="TIFFani">
</div>
<div class="char-text">
<h2>TIFFani</h2>
<p><b>Occupation:</b> Tea room hostess at the Nibble and Byte</p>
<p><b>Favourite Location:</b> The tearoom’s back kitchen, where the layers never quite match</p>
<p><b>Quote:</b> "Tea always has layers, darling"</p>
<p><b>Hobby:</b> Stacking pastries higher than physics should allow</p>
<p><b>Village Reputation:</b> Sweet but slightly uncanny</p>
<p><b>Pet Peeve:</b> Misaligned saucers</p>
</div>
</div>
<button class="close-button" onclick="closeTiffani()">Close</button>
</div>
</div>
<!-- Hidden character popup -->
<div id="vicar-popup" class="note-popup" style="display:none;">
<div class="note-content">
<div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/vicar.png" alt="Vicar Vector">
</div>
<div class="char-text">
<h2>Vicar Vector</h2>
<p><b>Occupation:</b> Preacher at St Mary of the Lossless</p>
<p><b>Favourite Location:</b>The pulpit, where words scale endlessly</p>
<p><b>Quote:</b> “The eternal line endures.”</p>
<p><b>Hobby:</b> Resizing hymn sheets until unreadable</p>
<p><b>Village Reputation:</b> Inspiring yet confusing</p>
<p><b>Pet Peeve:</b> Misaligned margins</p>
</div>
</div>
<button class="close-button" onclick="closeVicar()">Close</button>
</div>
</div>
<script>
function showNote() {
document.getElementById("note-popup").style.display = "flex";
}
function closeNote() {
document.getElementById("note-popup").style.display = "none";
}
function showColonel() {
document.getElementById("colonel-popup").style.display = "flex";
}
function closeColonel() {
document.getElementById("colonel-popup").style.display = "none";
}
function showClippy() {
document.getElementById("clippy-popup").style.display = "flex";
}
function closeClippy() {
document.getElementById("clippy-popup").style.display = "none";
}
function showEwean() {
document.getElementById("ewean-popup").style.display = "flex";
}
function closeEwean() {
document.getElementById("ewean-popup").style.display = "none";
}
function showHuscar() {
document.getElementById("huscar-popup").style.display = "flex";
}
function closeHuscar() {
document.getElementById("huscar-popup").style.display = "none";
}
function showJay() {
document.getElementById("jay-popup").style.display = "flex";
}
function closeJay() {
document.getElementById("jay-popup").style.display = "none";
}
function showLexy() {
document.getElementById("lexy-popup").style.display = "flex";
}
function closeLexy() {
document.getElementById("lexy-popup").style.display = "none";
}
function showMerry() {
document.getElementById("merry-popup").style.display = "flex";
}
function closeMerry() {
document.getElementById("merry-popup").style.display = "none";
}
function showMpeggy() {
document.getElementById("mpeggy-popup").style.display = "flex";
}
function closeMpeggy() {
document.getElementById("mpeggy-popup").style.display = "none";
}
function showTiffani() {
document.getElementById("tiffani-popup").style.display = "flex";
}
function closeTiffani() {
document.getElementById("tiffani-popup").style.display = "none";
}
function showVicar() {
document.getElementById("vicar-popup").style.display = "flex";
}
function closeVicar() {
document.getElementById("vicar-popup").style.display = "none";
}
</script>
<style>
/* Clickable word */
.note-link {
color: #f0d98c;
text-decoration: underline;
cursor: pointer;
transition: color 0.2s ease;
}
.note-link:hover {
color: #fff4b8;
}
/* Popup overlay shared by both note & character */
.note-popup {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
/* Popup content box */
.note-content {
background: #fdf5e6;
color: #222;
padding: 2rem;
border: 2px solid #bfa76f;
border-radius: 10px;
box-shadow: 0 0 25px rgba(0,0,0,0.6);
max-width: 700px;
font-family: "Courier New", monospace;
position: relative;
animation: fadeIn 0.3s ease;
}
/* Close button */
.close-button {
background: #bfa76f;
border: none;
color: #fff;
padding: 0.5rem 1rem;
margin-top: 1rem;
border-radius: 5px;
cursor: pointer;
font-family: inherit;
transition: background 0.2s ease;
}
.close-button:hover {
background: #a18f5f;
}
/* Character profile layout */
.character-page {
display: flex;
align-items: flex-start;
gap: 16px;
max-width: 900px;
margin: 0 auto;
}
.character-page .char-image img {
width: 220px;
height: auto;
border-radius: 8px;
}
.character-page .char-text {
flex: 1;
text-align: left;
line-height: 1.3;
}
.character-page .char-text h2 {
margin: 0 0 2px 0;
font-size: 1.6em;
text-align: left;
}
.character-page .char-text p {
margin: 4px 0;
text-align: left;
}
/* Animation */
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
</style>You've walked into the library. On your way in, you notice a trash bin and a folded paper next to it that you pick up. It reads:
"x-fmt/453".
Now what does that have to mean?
Then, you notice a dim light on a desk. It appears the computer is still on. You have a look and see a website named "the PRONOM registry" is opened. You decide to see if you can find the weird number.
<div style="position: relative; display: inline-block;">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/The_Library_Computer.png" alt="The library computer" width="800">
<!-- Invisible hotspot linking to an external webpage -->
<a href="https://www.nationalarchives.gov.uk/PRONOM/BasicSearch/proBasicSearch.aspx?status=new"
target="_blank"
rel="noopener noreferrer"
style="position: absolute;
left: 180px;
top: 300px;
width: 300px;
height: 265px;
display: block;
background-color: rgba(0,0,0,0);">
</a>
<i>Player instruction: Click the computer screen. You will be redirected to the PRONOM registry in a new tab. Done searching? Go back to this tab in your browser, to continue the game.</i>
Done exploring this room?
<div class="start-menu">
<button class="button" data-passage="See the map">See the map</button>
</div>
<style>
/* remove external link icon down for this one hotspot */
a[href^="http"]::after {
content: none
}
</style><div class="start-menu">
<button class="button" data-passage="See the map">See the map</button>
</div><div class="letter-style">
Holmes of Hard Drives 🔍💾,
I can’t believe you caught the Bit-Rot Bandit 😱🦹♂️! My floppy disks feel safe again 💿💚. Please sign my RAID array 🙌🖊️🖥️.
— Starstruck Sysadmin 🤩🖥️
</div>
<div class="start-menu">
<button class="button" data-passage="Try and get back to sleep">Read more fan mail</button>
<button class="button" data-passage="Continue with your day">Continue with your day</button>
</div><div class="letter-style">
Dear Legendary Archivist 🏆📂,
Since you solved the Phantom File Format case 👻🗂️, I’ve been telling strangers at bus stops about you 🚌📢. They seem concerned 😅🤷♀️.
— Enthusiastic but Socially Awkward 🤪💌
</div>
<div class="start-menu">
<button class="button" data-passage="Try and get back to sleep">Read more fan mail</button>
<button class="button" data-passage="Continue with your day">Continue with your day</button>
</div><div class="letter-style">
O Wise One of the Checksum 🧙♂️🧮,
You made the Missing Metadata mystery look easy 😎🔍. My cat 🐈 and I both cried 😭💾. Please never retire 🙏🕰️.
— Crying But Backed Up 💦💽
</div>
<div class="start-menu">
<button class="button" data-passage="Try and get back to sleep">Read more fan mail</button>
<button class="button" data-passage="Continue with your day">Continue with your day</button>
</div><div class="letter-style">
Great Digital Sleuth 🌟💾🕵️♂️,
When you stopped the Cold Storage Conspiracy 🥶🗂️🤫, you saved not just files but dreams 🌈💤. I still have chills (and checksums) ❄️✅.
— Eternally Archived 🙌💜
</div>
<div class="start-menu">
<button class="button" data-passage="Try and get back to sleep">Read more fan mail</button>
<button class="button" data-passage="Continue with your day">Continue with your day</button>
</div><div class="letter-style">
My Dearest Detective 💖🔍,
Because of you, my family photos are now in three geographically dispersed backups 🌍📸💾💾💾. I named my baby after you 👶✨.
— Sincerely, Redundant Parent 🍼🥰
</div>
<div class="start-menu">
<button class="button" data-passage="Try and get back to sleep">Read more fan mail</button>
<button class="button" data-passage="Continue with your day">Continue with your day</button>
</div><div class="letter-style">
Dear Hero 🦸♂️🔐,
I was locked out of my email for six years 📧⏳. You cracked the Forgotten Password Vault 🗝️💻. You’re basically Gandalf with a YubiKey 🧙♂️🔑⚡.
— Amazed and Logged In 😭🎉
</div>
<div class="start-menu">
<button class="button" data-passage="Try and get back to sleep">Read more fan mail</button>
<button class="button" data-passage="Continue with your day">Continue with your day</button>
</div>As you finish reading, the edges of the letter begin to flicker — like a corrupted PDF trying to render a missing font. For a moment, the words shimmer, rearranging themselves slightly:
“Before you read this, I may… gone… Troublesome… checksum… HUS-car Wild…”
The flicker lasts only a few seconds, but long enough to make you wonder if the letter itself is trying to update its own metadata, or warn you of something unspeakably digital lurking nearby.
It’s almost as if the letter is alive — a haunted data object, flickering between states, waiting for you to act before it disappears completely.
You jump in the car and start driving despite the frosty roads you know that it is imperative that you get to Checksum-on-the-Wold in time.
<div class="start-menu">
<button class="button" data-passage="Make way to the village">Make way to the village</button>
</div>It’s been a long day of checksum chases and metadata mysteries. With a weary sigh, you sink back into your chair and gaze fondly into your lukewarm, bitstream-brewed chamomile tea — perfectly formatted for long-term preservation (unlike your energy levels).
Just as you begin to drift into a pleasant state of data refresh... thump.
Was that a corrupted WAV file echoing through the hallway? Or something far less… backed up?
What do you do?
<div class="start-menu"> <button class="button" data-passage="Go and investigate">Run a forensic analysis (a.k.a. go and investigate)</button> <button class="button" data-passage="Head to bed, the chamomile tea has really kicked in">Initiate sleep mode — the chamomile tea checksum has verified</button> </div>As you peer nervously around the corner, your heart performing an unscheduled backup, you see—at first glance—nothing out of the ordinary.
Just your faithful doormat, embossed with its usual friendly greeting:
<div class="doormat-style"> Welcome But Please Migrate Your Shoes First </div>
But then you notice it.
Resting neatly in the middle, perfectly aligned as if digitally deposited, is an envelope. Its edges are crisp—too crisp. Almost… freshly rendered.
It’s stamped with today’s date and, unmistakably, $player_name in firm archival ink.
<div class="letter-style"> Extremely urgent! No, really — this isn’t one of those fake “priority metadata” notices. Seriously, open me. </div>
The air hums faintly, like a hard drive spinning up in the dark. Somewhere, a faint giggle of corrupted data trails off into silence.
<div class="start-menu"> <button class="button" data-passage="Read the letter">Read the letter</button> </div>!Day 1
text
<div style="position: relative; display: inline-block;">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Manor%20map%20day%201%20and%202.png" alt="Map" width="800">
<!-- Invisible hotspot linking to library -->
<a data-passage="Explore the Library"
style="position: absolute;
left: 15px;
top: 110px;
width: 180px;
height: 95px;
display: block;">
</a>
<!-- Invisible hotspot linking to Skull-ery -->
<a data-passage="Explore The Skull-ery"
style="position: absolute;
left: 210px;
top: 110px;
width: 180px;
height: 95px;
display: block;">
</a>
<!-- Invisible hotspot linking to Graphics Room -->
<a data-passage="Explore the Graphics Room"
style="position: absolute;
left: 405px;
top: 110px;
width: 180px;
height: 95px;
display: block;">
</a>
<!-- Invisible hotspot linking to Study -->
<a data-passage="Explore The Study"
style="position: absolute;
left: 600px;
top: 110px;
width: 180px;
height: 95px;
display: block;">
</a>
</div>text
<div class="start-menu">
<button class="button" data-passage="Sleep">Count some RAMs</button>
</div><div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/HUS-car%20Wilde.png" alt="HUScar Wilde">
</div>
<div class="char-text">
<h2>HUScar Wilde</h2>
<p><b>Occupation:</b> Hedge-cutter, or so they say</p>
<p><b>Favourite Location:</b> The Manor gardens, where the hedges whisper in patterns</p>
<p><b>Quote:</b> Rarely speaks - when he does, it sounds like static</p>
<p><b>Hobby:</b> Cutting hedges into ASCII art</p>
<p><b>Village Reputation:</b> Best not spoken of</p>
<p><b>Pet Peeve:</b> Overgrown shrubs</p>
<div class="start-menu">
<button class="button" data-passage="Start">Go back to start</button>
<button class="button" data-passage="Characters">Go back to characters</button>
</div>
</div>
</div>
<style>
.character-page {
display: flex;
align-items: flex-start;
gap:16px; /* spacing between image & text */
max-width: 900px;
margin: 0 auto;
}
.character-page .char-image img {
width: 220px;
height: auto;
border-radius: 8px;
}
/* Text column */
.character-page .char-text {
flex: 1;
text-align: left;
line-height: 1.3; /* tighter line spacing */
}
.character-page .char-text h2 {
margin: 0 0 2px 0; /* only a small gap under heading */
font-size: 1.6em;
text-align: left;
}
.character-page .char-text p {
margin: 4px 0; /* tiny gap between paragraphs */
text-align: left;
}
</style>You have a strange dream — or perhaps a corrupted premonition file — that someone, somewhere in the network, desperately needs your help. But the metadata is incomplete, and you can’t quite resolve the identifier…
In the dream, there’s demonic laughter echoing across a brightly coloured village high street. The shop signs flicker like glitchy GIFs, and a peculiar figure is meticulously trimming hedges into the shape of QR codes — scanning for something… or someone.
You jolt awake, checksum unverified. A single leaf lies on the floor beside your desk — impossible, since your home environment is strictly plant-free and climate-controlled.
Do you…
<div class="start-menu"> <button class="button" data-passage="Try and get back to sleep">Attempt a system restore (try and get back to sleep)</button> <button class="button" data-passage="Go and investigate">Run a manual recovery process (go and investigate)</button> </div><<script>>
$("body").addClass("start-screen");
<</script>>
Please enter your name below.
<<textbox "$player_name" "Your name" "Greetings">>
<div class="start-menu">
<button class="button" data-passage="Start the game">Nice to meet you! </button>
</div><div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Jay%20Son%20Jnr.png" alt="Jay Son Jnr.">
</div>
<div class="char-text">
<h2>Jay Son Jnr.</h2>
<p><b>Occupation:</b> Proprietor of The .PUB</p>
<p><b>Favourite Location:</b> Behind the bar, furiously rearranging bottles</p>
<p><b>Quote:</b> “You’ll need to nest that order properly.”</p>
<p><b>Hobby:</b> Rearranging drink menus into JSON trees</p>
<p><b>Village Reputation:</b> Charismatic but unstable</p>
<p><b>Pet Peeve:</b> Missing brackets</p>
<div class="start-menu">
<button class="button" data-passage="Start">Go back to start</button>
<button class="button" data-passage="Characters">Go back to characters</button>
</div>
</div>
</div>
<style>
.character-page {
display: flex;
align-items: flex-start;
gap:16px; /* spacing between image & text */
max-width: 900px;
margin: 0 auto;
}
.character-page .char-image img {
width: 220px;
height: auto;
border-radius: 8px;
}
/* Text column */
.character-page .char-text {
flex: 1;
text-align: left;
line-height: 1.3; /* tighter line spacing */
}
.character-page .char-text h2 {
margin: 0 0 2px 0; /* only a small gap under heading */
font-size: 1.6em;
text-align: left;
}
.character-page .char-text p {
margin: 4px 0; /* tiny gap between paragraphs */
text-align: left;
}
</style><div class="comic-sans-letter">
To whom it may concern,
Always keep in mind that not everything <i><u>appears</u></i> as what it looks like.
Yours sincerely,
Sir Regex Metadata IV
</div>
<div class="start-menu">
<button class="button" data-passage="Explore The Study">Explore the study further</button>
</div><div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Lexi%20Con.png" alt="Dr. Lexy Con">
</div>
<div class="char-text">
<h2>Dr. Lexy Con</h2>
<p><b>Occupation:</b> Scholar in the Manor library</p>
<p><b>Favourite Location:</b> A shadowy library corner, where pages whisper</p>
<p><b>Quote:</b> “Shhh… Garamond is speaking."</p>
<p><b>Hobby:</b> Stitching letters into strange ligatures.</p>
<p><b>Village Reputation:</b> Eccentric and unsettling</p>
<p><b>Pet Peeve:</b> Not embedded fonts</p>
<div class="start-menu">
<button class="button" data-passage="Start">Go back to start</button>
<button class="button" data-passage="Characters">Go back to characters</button>
</div>
</div>
</div>
<style>
.character-page {
display: flex;
align-items: flex-start;
gap:16px; /* spacing between image & text */
max-width: 900px;
margin: 0 auto;
}
.character-page .char-image img {
width: 220px;
height: auto;
border-radius: 8px;
}
/* Text column */
.character-page .char-text {
flex: 1;
text-align: left;
line-height: 1.3; /* tighter line spacing */
}
.character-page .char-text h2 {
margin: 0 0 2px 0; /* only a small gap under heading */
font-size: 1.6em;
text-align: left;
}
.character-page .char-text p {
margin: 4px 0; /* tiny gap between paragraphs */
text-align: left;
}
</style><img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Manor%20map%20day%201%20and%202.png" alt="Map" width="800">
<div class="start-menu">
<button class="button" data-passage="Go to your room">Go to your room</button>
</div><div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/MPEG-gy.png" alt="MPEG-gy">
</div>
<div class="char-text">
<h2>MPEG-gy</h2>
<p><b>Occupation:</b> Runs the Plaintext Post Office</p>
<p><b>Favourite Location:</b> The Post Office counter, humming while she sorts</p>
<p><b>Quote:</b> “Oh, I heard about that…”</p>
<p><b>Hobby:</b> Singing gossip as if it were hymnals</p>
<p><b>Village Reputation:</b> Cheerful but cutting</p>
<p><b>Pet Peeve:</b> Letters without stamps</p>
<div class="start-menu">
<button class="button" data-passage="Start">Go back to start</button>
<button class="button" data-passage="Characters">Go back to characters</button>
</div>
</div>
</div>
<style>
.character-page {
display: flex;
align-items: flex-start;
gap:16px; /* spacing between image & text */
max-width: 900px;
margin: 0 auto;
}
.character-page .char-image img {
width: 220px;
height: auto;
border-radius: 8px;
}
/* Text column */
.character-page .char-text {
flex: 1;
text-align: left;
line-height: 1.3; /* tighter line spacing */
}
.character-page .char-text h2 {
margin: 0 0 2px 0; /* only a small gap under heading */
font-size: 1.6em;
text-align: left;
}
.character-page .char-text p {
margin: 4px 0; /* tiny gap between paragraphs */
text-align: left;
}
</style>Night started falling and as you head to Sir Regex’s house Metadata Manor you see that the snow has started to set in and begin to drive faster. The roads to the country village and large mansion are windy and you don’t want to get snowed in.
When you pass the gates, you glance upon a dark figure in the garden. Suddenly, you get an uneasy feeling and you start to wonder if you should have come here.
You try to fight your nerves and park the car.
<div class="start-menu">
<button class="button" data-passage="Enter the house">Enter the house</button>
</div><div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Merry%20Loopwell.png" alt="Merry Loopwell">
</div>
<div class="char-text">
<h2>Merry Loopwell</h2>
<p><b>Occupation:</b> Owner of The Charming GIF Shop</p>
<p><b>Favourite Location:</b> The stock room</p>
<p><b>Quote:</b> “And again, and again, and again…”</p>
<p><b>Hobby:</b> Collecting perpetual-motion toys</p>
<p><b>Village Reputation:</b> Sweet, predictable, sometimes eerie</p>
<p><b>Pet Peeve:</b> Things that don’t loop smoothly</p>
<div class="start-menu">
<button class="button" data-passage="Start">Go back to start</button>
<button class="button" data-passage="Characters">Go back to characters</button>
</div>
</div>
</div>
<style>
.character-page {
display: flex;
align-items: flex-start;
gap:16px; /* spacing between image & text */
max-width: 900px;
margin: 0 auto;
}
.character-page .char-image img {
width: 220px;
height: auto;
border-radius: 8px;
}
/* Text column */
.character-page .char-text {
flex: 1;
text-align: left;
line-height: 1.3; /* tighter line spacing */
}
.character-page .char-text h2 {
margin: 0 0 2px 0; /* only a small gap under heading */
font-size: 1.6em;
text-align: left;
}
.character-page .char-text p {
margin: 4px 0; /* tiny gap between paragraphs */
text-align: left;
}
</style><div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Detective.png" alt="Detective (You)">
</div>
<div class="char-text">
<h2>Detective (You)</h2>
<p><b>Occupation:</b> Consultant in digital preservation & amateur sleuth</p>
<p><b>Favourite Location:</b> Metadata Manor’s dusty archives</p>
<p><b>Quote:</b> “This could be important evidence.”</p>
<p><b>Hobby:</b> Listening to true-crime podcasts at double speed</p>
<p><b>Village Reputation:</b> A bit mysterious, but welcomed - for now</p>
<p><b>Pet Peeve:</b> Sticky notes with no metadata</p>
<div class="start-menu">
<button class="button" data-passage="Get on with doing things">Get on with doing things</button>
</div>
</div>
</div>
<style>
.character-page {
display: flex;
align-items: flex-start;
gap:16px; /* spacing between image & text */
max-width: 900px;
margin: 0 auto;
}
.character-page .char-image img {
width: 220px;
height: auto;
border-radius: 8px;
}
/* Text column */
.character-page .char-text {
flex: 1;
text-align: left;
line-height: 1.3; /* tighter line spacing */
}
.character-page .char-text h2 {
margin: 0 0 2px 0; /* only a small gap under heading */
font-size: 1.6em;
text-align: left;
}
.character-page .char-text p {
margin: 4px 0; /* tiny gap between paragraphs */
text-align: left;
}
</style><div class="letter-style"> Dear $player_name,
Before you read this, I may well be gone. Troublesome things are afoot.
My situation here in Checksum-on-the-Wold has… fragmented. Everything appears too perfect — the metadata matches too neatly, the streets are overly normalized, and even the parish database never throws an error. Something here has been over-curated. I fear I am living inside a false archive — a world rebuilt from an incomplete backup.
If this message reaches you uncorrupted, I beg you to come at once. I can no longer distinguish authenticity from duplication. Everyone here smiles with checksum precision, but no one blinks.
The only soul I still trust is HUS-car Wild, the village wraith — half ghost, half sysadmin — who tends the hedges (and the network) with his chainsaw hands. He alone seems to remember what once was… before the great Reformatting.
Come quickly, before I am checksum’d out of existence.
Yours, in hash and hope,
Sir Regex Metadata IV
</div> <div class="start-menu"> <button class="button" data-passage="Fold up the letter">Fold up the letter</button> </div>Try and explore some of the rooms to find clues
<div style="position: relative; display: inline-block;">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Manor%20map%20day%201%20and%202.png" alt="Map" width="800">
<div class="start-menu">
<button class="button" data-passage="Go to sleep2">Go to sleep</button>
</div>
<!-- Invisible hotspot linking to library -->
<a data-passage="Explore the Library"
style="position: absolute;
left: 15px;
top: 110px;
width: 180px;
height: 95px;
display: block;">
</a>
<!-- Invisible hotspot linking to Skull-ery -->
<a data-passage="Explore The Skull-ery"
style="position: absolute;
left: 210px;
top: 110px;
width: 180px;
height: 95px;
display: block;">
</a>
<!-- Invisible hotspot linking to Graphics Room -->
<a data-passage="Explore the Graphics Room"
style="position: absolute;
left: 405px;
top: 110px;
width: 180px;
height: 95px;
display: block;">
</a>
<!-- Invisible hotspot linking to Study -->
<a data-passage="Explore The Study"
style="position: absolute;
left: 600px;
top: 110px;
width: 180px;
height: 95px;
display: block;">
</a>
</div><div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/Sir%20Regex%20Metadata%20IV.png" alt="Sir Regex Metadata IV">
</div>
<div class="char-text">
<h2>Sir Regex Metadata IV</h2>
<p><b>Occupation:</b> Retired patriarch of Metadata Manor</p>
<p><b>Favourite Location:</b> His study at Metadata Manor, filled with dusty type specimens</p>
<p><b>Quote:</b> “That’s not valid syntax.”</p>
<p><b>Hobby:</b> Cataloguing every serif he ever met</p>
<p><b>Village Reputation:</b> Pedantic but respectable</p>
<p><b>Pet Peeve:</b> People who use Comic Sans unironically</p>
<div class="start-menu">
<button class="button" data-passage="Start">Go back to start</button>
<button class="button" data-passage="Characters">Go back to characters</button>
</div>
</div>
</div>
<style>
.character-page {
display: flex;
align-items: flex-start;
gap:16px; /* spacing between image & text */
max-width: 900px;
margin: 0 auto;
}
.character-page .char-image img {
width: 220px;
height: auto;
border-radius: 8px;
}
/* Text column */
.character-page .char-text {
flex: 1;
text-align: left;
line-height: 1.3; /* tighter line spacing */
}
.character-page .char-text h2 {
margin: 0 0 2px 0; /* only a small gap under heading */
font-size: 1.6em;
text-align: left;
}
.character-page .char-text p {
margin: 4px 0; /* tiny gap between paragraphs */
text-align: left;
}
</style>Sitting back with a sigh you hear the soft thud of a letter landing on the floor of your hallway. Your curiosity is peaked! Or is it...
Do you,
[[Sip at your cup of soothing camomile tea]]
or
[[Pad inOne TIFF drifts into a dark archive bed,
Two WAVs curl up where the fixity’s fed.
Three PDFs nestle in trusted repose,
Four checksums hum where the cool server glows.
Five floppy ghosts find their emulated keep,
Six XML records lie quiet, asleep.
Seven WARC files dream of the web they once knew,
Eight backups rest sound, in redundant tiers too.
Nine formats preserved, all their futures assured,
Ten files kept safe - their long lives secured.
Rest now, archivist, your watch is complete,
The files will endure while you drift into sleep.
<div class="start-menu">
<button class="button" data-passage="Go to sleep">Start the day well-rested</button>
</div><<script>>
$("body").addClass("start-screen");
<</script>>
!Murdered in Plain Text
!!!!<blockquote><em>The ASCII was clear, but the motive wasn't</em></blockquote>
<div class="start-menu">
<button class="button" data-passage="Introducing">Start</button>
<button class="button" data-passage="Characters">Characters</button>
<button class="button" data-passage="End credits">About</button>
</div>Welcome $player_name!
We are so honoured that you, the famous sleuth has joined us today!
We have heard all about you in such newspapers such as 'The Daily E-Mail', 'The Checksum Chronicle' and the 'Persistent Identifier Press'.
<div class="start-menu">
<button class="button" data-passage="Tell me more about how amazing I am!">Tell me more about how amazing I am! </button>
</div><div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/TIFFani.png" alt="TIFFani">
</div>
<div class="char-text">
<h2>TIFFani</h2>
<p><b>Occupation:</b> Tea room hostess at the Nibble and Byte</p>
<p><b>Favourite Location:</b> The tearoom’s back kitchen, where the layers never quite match</p>
<p><b>Quote:</b> "Tea always has layers, darling"</p>
<p><b>Hobby:</b> Stacking pastries higher than physics should allow</p>
<p><b>Village Reputation:</b> Sweet but slightly uncanny</p>
<p><b>Pet Peeve:</b> Misaligned saucers</p>
<div class="start-menu">
<button class="button" data-passage="Start">Go back to start</button>
<button class="button" data-passage="Characters">Go back to characters</button>
</div>
</div>
</div>
<style>
.character-page {
display: flex;
align-items: flex-start;
gap:16px; /* spacing between image & text */
max-width: 900px;
margin: 0 auto;
}
.character-page .char-image img {
width: 220px;
height: auto;
border-radius: 8px;
}
/* Text column */
.character-page .char-text {
flex: 1;
text-align: left;
line-height: 1.3; /* tighter line spacing */
}
.character-page .char-text h2 {
margin: 0 0 2px 0; /* only a small gap under heading */
font-size: 1.6em;
text-align: left;
}
.character-page .char-text p {
margin: 4px 0; /* tiny gap between paragraphs */
text-align: left;
}
</style>"The detective gave me some tips to look for clues. Here's a map of the house, have a look at it and let's get you settled after that. We'll meet in the Skull-ery first thing tomorrow and start our investigation from there.
<div class="start-menu">
<button class="button" data-passage="Look at the map">Look at the map</button>
</div>Well, if you insist… there’s so much to reconstruct!
You, of course, are the itinerant digital preservationist detective — roaming from repository to repository, restoring order from the chaos of corrupted collections and degraded data.
Your legend is well-documented in such celebrated cases as “The Adventures of the Forgotten Password,” “The Riddle of the Ghost in the Cloud Storage,” “The Mystery of the Misfiled Metadata,” and “The Case of the Bit Rot Bandit.”
Most recently, you found yourself knee-deep in a messy checksum scandal — involving a corrupted PDF, a phantom accession record, and a reel-to-reel tape that refused to stay reel. Some said the case was unsalvageable… but you’ve never been one to leave a byte behind.
<div class="start-menu"> <button class="button" data-passage="Profile">Access your full profile</button> <button class="button" data-passage="Get on with doing things">Begin your next preservation adventure</button> </div>When you get back to sleep you sleep more deeply and silently than you have ever experienced before. No thoughts cross your mind. You wake up at midday to find the postman has been with bundles of fan mail for your work. After reading the first six letters you give up and drop the rest in the bin.
<div style="position: relative; display: inline-block;">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Fanmail.png" alt="Fanmail" width="800">
<!-- Invisible hotspot linking to Fan Mail Letter #1 -->
<a data-passage="Fan Mail Letter #1"
style="position: absolute;
left: 10px;
top: 50px;
width: 220px;
height: 160px;
display: block;">
</a>
<!-- Invisible hotspot linking to Fan Mail Letter #2 -->
<a data-passage="Fan Mail Letter #2"
style="position: absolute;
left: 290px;
top: 50px;
width: 220px;
height: 160px;
display: block;">
</a>
<!-- Invisible hotspot linking to Fan Mail Letter #3 -->
<a data-passage="Fan Mail Letter #3"
style="position: absolute;
left: 570px;
top: 50px;
width: 220px;
height: 160px;
display: block;">
</a>
<!-- Invisible hotspot linking to Fan Mail Letter #4 -->
<a data-passage="Fan Mail Letter #4"
style="position: absolute;
left: 10px;
top: 250px;
width: 220px;
height: 160px;
display: block;">
</a>
<!-- Invisible hotspot linking to Fan Mail Letter #5 -->
<a data-passage="Fan Mail Letter #5"
style="position: absolute;
left: 290px;
top: 250px;
width: 220px;
height: 160px;
display: block;">
</a>
<!-- Invisible hotspot linking to Fan Mail Letter #6 -->
<a data-passage="Fan Mail Letter #6"
style="position: absolute;
left: 570px;
top: 250px;
width: 220px;
height: 160px;
display: block;">
</a>
</div><div class="character-page">
<div class="char-image">
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/Portraits/vicar.png" alt="Vicar Vector">
</div>
<div class="char-text">
<h2>Vicar Vector</h2>
<p><b>Occupation:</b> Preacher at St Mary of the Lossless</p>
<p><b>Favourite Location:</b> The pulpit, where words scale endlessly</p>
<p><b>Quote:</b> “The eternal line endures.”</p>
<p><b>Hobby:</b> Resizing hymn sheets until unreadable</p>
<p><b>Village Reputation:</b> Inspiring yet confusing</p>
<p><b>Pet Peeve:</b> Misaligned margins</p>
<div class="start-menu">
<button class="button" data-passage="Start">Go back to start</button>
<button class="button" data-passage="Characters">Go back to characters</button>
</div>
</div>
</div>
<style>
.character-page {
display: flex;
align-items: flex-start;
gap:16px; /* spacing between image & text */
max-width: 900px;
margin: 0 auto;
}
.character-page .char-image img {
width: 220px;
height: auto;
border-radius: 8px;
}
/* Text column */
.character-page .char-text {
flex: 1;
text-align: left;
line-height: 1.3; /* tighter line spacing */
}
.character-page .char-text h2 {
margin: 0 0 2px 0; /* only a small gap under heading */
font-size: 1.6em;
text-align: left;
}
.character-page .char-text p {
margin: 4px 0; /* tiny gap between paragraphs */
text-align: left;
}
</style>You pull a document between some books.
Is this a fragment of a family tree?
But how is that possible? Who are those people mentioned on there?
<img src="https://raw.githubusercontent.com/Susanne404/Murdered-In-Plain-Text/main/Images/XML_handwritten_family_tree.png" alt="XML Family tree">
<div class="start-menu">
<button class="button" data-passage="Explore The Study">Explore the study further</button>
</div>