REAL VAULT

[+] PHOTO_ENTRY_CODE
TYPE: HTML_COMPONENT
//Replace YOUR_URL with image link.
<div class="scrapbook-container" style="position: relative; display: block; width: min-content; margin: 0 auto;">
<div class="scrapbook-photo" style="line-height: 0;">
<img src="https://bear-images.sfo2.cdn.digitaloceanspaces.com/wastelandwriting/pxl_20251012_120221988.webp" alt="Salvaged Photo" style="display: block;">
</div>
<div style="background: #b9b9ae; color: #1a1a1a; font-family: 'Courier New', Courier, monospace; font-size: 12px; font-weight: bold; padding: 8px 12px; border-left: 4px solid #222; box-shadow: 2px 2px 8px rgba(0,0,0,0.4); transform: rotate(-1.5deg); text-align: left; width: max-content; max-width: 250px; position: relative; z-index: 10; margin-top: -45px; margin-left: 10px;">
INSERT_DESCRIPTION_HERE
</div>
</div>
CLICK_INSIDE_TO_SELECT_ALL

[+] AUDIO_RECORDING
TYPE: HTML_COMPONENT
// Use this for Audio Player.
<style>
.scavenged-audio { background: #111; border: 1px solid #333; padding: 15px; border-radius: 2px; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
.track-header { display: flex; justify-content: space-between; font-family: 'Courier New', monospace; font-size: 11px; color: #7A0000; font-weight: bold; border-bottom: 1px solid #222; padding-bottom: 5px; }
.pulse-dot { height: 6px; width: 6px; background-color: #7A0000; border-radius: 50%; display: inline-block; margin-right: 5px; animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }
.audio-desc-bar { margin-top: 15px; padding: 10px; background: #0a0a0a; border-top: 1px solid #7A0000; font-family: 'Courier New', monospace; font-size: 12px; color: #b9b9ae; }
.desc-label { color: #7A0000; font-weight: bold; margin-right: 5px; text-transform: uppercase; }
audio { width: 100%; height: 35px; margin-top: 10px; filter: invert(100%) hue-rotate(180deg) brightness(1.5); }
</style>
<div class="scavenged-audio">
<div class="track-header">
<span><span class="pulse-dot"></span>SIGNAL_STATUS: ACTIVE</span>
<span>ID: VOID_001</span>
</div>
<div style="margin-top: 15px;">
<span style="font-family: 'Fira Code', monospace; color: #D2D2C8; font-size: 0.9em;">
NOW_PLAYING: [ON_MY_OWN_3DG.MP3]
</span>
</div>
<audio controls>
<source src="https://files.catbox.moe/3yzug5.mp3" type="audio/mpeg">
FATAL_ERROR: Audio codec not found in local drives.
</audio>
<div class="audio-desc-bar">
<div><span class="desc-label">ORIGIN:</span> RECOVERED_DRIVE_SECTOR_09</div>
<div style="margin-top: 5px; font-style: italic; color: #888;">
"A relic of the Three Days Grace era. This audio was pulled from a water-damaged handheld. The data is slightly corrupted, but the defiance in the vocals is still clear."
</div>
</div>
</div>
CLICK_INSIDE_TO_SELECT_ALL

[+] VIDEO_LOG
TYPE: HTML_COMPONENT
// Use this for recorded data. Replace YOUR_URL with image link.
<style>
@keyframes blinker { 50% { opacity: 0; } }
.wasteland-load { font-family: 'Courier New', monospace; color: #7A0000; font-size: 11px; font-weight: bold; animation: blinker 0.8s linear infinite; margin-bottom: 5px; display: block; }
/* The magic happens here: Zooming the video and hiding the edges */
.video-clipper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; box-shadow: 0 0 15px rgba(0,0,0,0.5); }
.video-clipper iframe { position: absolute; top: -10%; left: -5%; width: 110%; height: 120%; border: none; z-index: 1; }
/* This invisible layer sits on top so you don't accidentally click the logo */
.click-shield { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
</style>
<div style="display: block; margin: 30px auto; text-align: center; max-width: 600px;">
<span class="wasteland-load">[ ACCESSING_DATA_STREAM... ]</span>
<div class="video-clipper">
<div class="click-shield"></div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/mNKmb03HWcY?si=y2cjqkV_J4tiju_I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<div style="background: #b9b9ae; color: #1a1a1a; font-family: 'Courier New', Courier, monospace; font-size: 12px; font-weight: bold; padding: 10px 15px; border-left: 4px solid #222; box-shadow: 2px 2px 8px rgba(0,0,0,0.5); transform: rotate(-0.5deg); text-align: left; width: fit-content; max-width: 80%; margin: -15px auto 10px auto; position: relative; z-index: 10;">
<div style="position: absolute; top: 10px; left: -8px; width: 12px; height: 3px; background: #777; border-radius: 1px; transform: rotate(90deg); box-shadow: 1px 1px 2px rgba(0,0,0,0.3);"></div>
SIGNAL_FEED // SOURCE: ARCHIVE_YOUTUBE // STATUS: DECODED
</div>
</div>
CLICK_INSIDE_TO_SELECT_ALL

[+] GEAR_MANIFEST
TYPE: HTML_COMPONENT
//visual logs. Replace YOUR_URL with image link.
<div style="max-width:900px;margin:20px auto;font-family:'Courier New',monospace;">
<details style="background-color:#050505;border:1px solid #7A0000;padding:10px;cursor:pointer;">
<summary style="color:#7A0000;font-weight:bold;font-size:16px;list-style:none;outline:none;display:flex;justify-content:space-between;align-items:center;">
<span>[+] EXPAND_GEAR_MANIFEST_v2.0</span>
<span style="font-size:10px;color:#444;">STATUS: ARCHIVED</span>
</summary>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px;padding-top:20px;cursor:default;">
<div style="background:#111;padding:6px;border:1px solid #333;transform:rotate(-2deg);box-shadow:4px 4px 8px rgba(0,0,0,0.6);">
<img src="YOUR_URL" style="width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(20%);border:1px solid #000;display:block;">
<div style="color:#7A0000;font-weight:bold;font-size:10px;margin-top:6px;">ID: TACTICAL_COLLAR</div>
<p style="color:#b9b9ae;font-size:9px;margin:2px 0 0 0;line-height:1.2;">Reinforced nylon with quick-release buckle.</p>
</div>
<div style="background:#111;padding:6px;border:1px solid #333;transform:rotate(2deg);box-shadow:4px 4px 8px rgba(0,0,0,0.6);">
<img src="YOUR_URL" style="width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(20%);border:1px solid #000;display:block;">
<div style="color:#7A0000;font-weight:bold;font-size:10px;margin-top:6px;">ID: HIGH_VIZ_HARNESS</div>
<p style="color:#b9b9ae;font-size:9px;margin:2px 0 0 0;line-height:1.2;">Low-light scouting. Reflective strips functional.</p>
</div>
<div style="background:#111;padding:6px;border:1px solid #333;transform:rotate(-1.5deg);box-shadow:4px 4px 8px rgba(0,0,0,0.6);">
<img src="YOUR_URL" style="width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(20%);border:1px solid #000;display:block;">
<div style="color:#7A0000;font-weight:bold;font-size:10px;margin-top:6px;">ID: KINETIC_DISPENSER</div>
<p style="color:#b9b9ae;font-size:9px;margin:2px 0 0 0;line-height:1.2;">Standard issue. Heavily scuffed deployment.</p>
</div>
<div style="background:#111;padding:6px;border:1px solid #333;transform:rotate(1deg);box-shadow:4px 4px 8px rgba(0,0,0,0.6);">
<img src="YOUR_URL" style="width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(20%);border:1px solid #000;display:block;">
<div style="color:#7A0000;font-weight:bold;font-size:10px;margin-top:6px;">ID: LONG_RANGE_TETHER</div>
<p style="color:#b9b9ae;font-size:9px;margin:2px 0 0 0;line-height:1.2;">30ft nylon cable for perimeter scouting.</p>
</div>
<div style="background:#111;padding:6px;border:1px solid #333;transform:rotate(-2deg);box-shadow:4px 4px 8px rgba(0,0,0,0.6);">
<img src="YOUR_URL" style="width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(20%);border:1px solid #000;display:block;">
<div style="color:#7A0000;font-weight:bold;font-size:10px;margin-top:6px;">ID: BIO_HYDRATION</div>
<p style="color:#b9b9ae;font-size:9px;margin:2px 0 0 0;line-height:1.2;">Portable water containment for sorties.</p>
</div>
<div style="background:#111;padding:6px;border:1px solid #333;transform:rotate(3deg);box-shadow:4px 4px 8px rgba(0,0,0,0.6);">
<img src="YOUR_URL" style="width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(20%);border:1px solid #000;display:block;">
<div style="color:#7A0000;font-weight:bold;font-size:10px;margin-top:6px;">ID: TACTICAL_BONE</div>
<p style="color:#b9b9ae;font-size:9px;margin:2px 0 0 0;line-height:1.2;">High-density boredom-prevention tool.</p>
</div>
<div style="background:#111;padding:6px;border:1px solid #333;transform:rotate(-1deg);box-shadow:4px 4px 8px rgba(0,0,0,0.6);">
<img src="YOUR_URL" style="width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(20%);border:1px solid #000;display:block;">
<div style="color:#7A0000;font-weight:bold;font-size:10px;margin-top:6px;">ID: RATION_PACK</div>
<p style="color:#b9b9ae;font-size:9px;margin:2px 0 0 0;line-height:1.2;">High-value dehydrated liver rewards.</p>
</div>
<div style="background:#111;padding:6px;border:1px solid #333;transform:rotate(2deg);box-shadow:4px 4px 8px rgba(0,0,0,0.6);">
<img src="YOUR_URL" style="width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(20%);border:1px solid #000;display:block;">
<div style="color:#7A0000;font-weight:bold;font-size:10px;margin-top:6px;">ID: PAW_BOOTS</div>
<p style="color:#b9b9ae;font-size:9px;margin:2px 0 0 0;line-height:1.2;">For traversing radioactive debris.</p>
</div>
<div style="background:#111;padding:6px;border:1px solid #333;transform:rotate(-3deg);box-shadow:4px 4px 8px rgba(0,0,0,0.6);">
<img src="YOUR_URL" style="width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(20%);border:1px solid #000;display:block;">
<div style="color:#7A0000;font-weight:bold;font-size:10px;margin-top:6px;">ID: SLEEP_STATION</div>
<p style="color:#b9b9ae;font-size:9px;margin:2px 0 0 0;line-height:1.2;">Memory foam thermal pad base.</p>
</div>
</div>
</details>
</div>
CLICK_INSIDE_TO_SELECT_ALL

[+] BLOG_HEADER_FOOTER
TYPE: HTML_COMPONENT
// Header and footer, also used for visually marking what alter wrote what.
HEADER: <div class="session-log auth-stamp">
    [ACCESS_GRANTED] ... USER: <span>JACK_ROLLINS</span> LOGGING IN...
</div>
<div class="identity-relay">
    <div class="relay-line">
        <span class="active-signal"></span>
        ACTIVE_UNIT: <span class="relay-value">FRAGMENT_67 [HOST]</span>
    </div>
    <div class="relay-line">
        COGNITION: <span class="relay-value">TIRED</span>
    </div>
</div>
FOOTER: <div class="session-log" style="border-top: 1px dashed #2C2F33; padding-top: 10px; margin-top: 30px;">
    [SESSION_TERMINATED] ... USER: <span>JACK_ROLLINS</span> LOGGED OUT.
</div>
CLICK_INSIDE_TO_SELECT_ALL

[+] VITALITY_LOG
TYPE: HTML_COMPONENT
// daily log.
<style>
.log-entry { font-family: 'Courier New', monospace; background: #0a0a0a; border: 1px solid #7A0000; padding: 15px; color: #b9b9ae; max-width: 500px; margin: 0 auto; }
.log-header { font-weight: bold; color: #7A0000; border-bottom: 2px solid #7A0000; margin-bottom: 10px; display: flex; justify-content: space-between; }
.log-section { margin-bottom: 15px; }
.log-label { color: #D2D2C8; font-weight: bold; display: block; font-size: 0.8em; margin-bottom: 5px; text-decoration: underline; }
.log-item { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 3px; }
.checkbox { width: 10px; height: 10px; border: 1px solid #7A0000; display: inline-block; }
.checked { background: #7A0000; }
</style>
<div class="log-entry">
<div class="log-header">
<span>DAILY_LOG // 01.30.26</span>
<span>STATUS: ONLINE</span>
</div>
<div class="log-section">
<span class="log-label">INTAKE_&_VITALITY</span>
<div class="log-item"><div class="checkbox checked"></div> [FOOD]: Bell Pepper, filled with ground meat and vegetables.</div>
<div class="log-item"><div class="checkbox"></div> [WATER]: H20_RECLAMATION_GOAL_2L [Failed]</div>
<div class="log-item"><div class="checkbox checked"></div> [STIMULANT]: CAFFEINE: 100mg NICOTINE: 2.2mg EXTRA: ALCOHOL: Beer 5% x2</div>
</div>
<div class="log-section">
<span class="log-label">KINETIC_MAINTENANCE</span>
<div class="log-item"><div class="checkbox"></div> [RECON]: 5KM_FOOT_PATROL</div>
<div class="log-item"><div class="checkbox"></div> [CHASSIS_STRESS]: PREVENTED. STRESS LEVELS: CRITICAL.</div>
</div>
<div class="log-section" style="border-top: 1px dashed #333; padding-top: 10px;">
<span class="log-label">MISSION_PARAMETERS</span>
<div class="log-item">> RECOVER_SCAVENGED_AUDIO_FILES</div>
<div class="log-item">> RECOVER_TATTERER_PHOTOS</div>
<div class="log-item">> GATHER_FILTHY_CLOTHESY</div>
<Div class="log-item">> CONSOLIDATE_TERMINAL_CODE</div> 
</div>
<div style="font-size: 9px; color: #444; text-align: right;">[ END_OF_LOG ]</div>
</div>
CLICK_INSIDE_TO_SELECT_ALL

[+] ALTER_PROFILES
TYPE: HTML_COMPONENT
// copy + pastw to add more.
<div class="shard-module">
<div class="shard-top">
<span class="shard-label">DESIGNATION: [NAME_OR_CODE]</span>
<span class="shard-id">#[000]</span>
</div>
<div class="shard-body" style="display: flex; gap: 12px; align-items: flex-start;">
<img src="IMAGE_URL_HERE" style="width: 60px; height: 60px; min-width: 60px; min-height: 60px; object-fit: cover; border: 1px solid #333; background: #111; filter: grayscale(1) contrast(1.2);" alt="SHARD_ICON">
<div class="shard-text-content" style="flex-grow: 1;">
<div class="shard-info" style="font-size: 0.75em; color: #A0A096;">
[Brief, public description of the shard's role or personality.]
</div>
<details>
<summary>[ + ] ACCESS_EXPANDED_LOG</summary>
<div class="shard-expanded-log">
[INTERNAL_DATA: Detailed history, triggers, or system notes go here.]
</div>
</details>
</div>
</div>
</div>
<div class="shard-module">
<div class="shard-top">
<span class="shard-label">DESIGNATION: [NAME_OR_CODE]</span>
<span class="shard-id">#[000]</span>
</div>
<div class="shard-body" style="display: flex; gap: 12px; align-items: flex-start;">
<img src="IMAGE_URL_HERE" style="width: 60px; height: 60px; min-width: 60px; min-height: 60px; object-fit: cover; border: 1px solid #333; background: #111; filter: grayscale(1) contrast(1.2);" alt="SHARD_ICON">
<div class="shard-text-content" style="flex-grow: 1;">
<div class="shard-info" style="font-size: 0.75em; color: #A0A096;">
[Brief, public description of the shard's role or personality.]
</div>
<details>
<summary>[ + ] ACCESS_EXPANDED_LOG</summary>
<div class="shard-expanded-log">
[INTERNAL_DATA: Detailed history, triggers, or system notes go here.]
</div>
</details>
</div>
</div>
</div>
CLICK_INSIDE_TO_SELECT_ALL

[+] Entertainment_Log
TYPE: HTML_COMPONENT
//.
<style>
.media-entry { display: flex; flex-wrap: wrap; gap: 15px; max-width: 800px; margin: 20px auto; font-family: 'Courier New', monospace; background: #0a0a0a; border: 1px solid #333; padding: 15px; color: #b9b9ae; }
.media-poster { width: 120px; height: 180px; background: #1a1a1a; border: 1px solid #7A0000; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #444; overflow: hidden; }
.media-poster img { width: 100%; height: 100%; object-fit: cover; }
.media-info { flex: 1; min-width: 250px; }
.media-title { color: #7A0000; font-size: 1.4em; font-weight: bold; border-bottom: 1px solid #7A0000; margin-bottom: 10px; text-transform: uppercase; }
.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; }
.meta-label { color: #7A0000; font-weight: bold; }
.notes-section { width: 100%; margin-top: 15px; padding-top: 10px; border-top: 1px dashed #333; font-size: 13px; line-height: 1.4; }
.rating-stars { color: #D2D2C8; }
.checkbox { width: 10px; height: 10px; border: 1px solid #7A0000; display: inline-block; margin-right: 5px; }
.checked { background: #7A0000; }
</style>
<div class="media-entry">
<div class="media-poster">
<img src="https://via.placeholder.com/120x180" alt="Cover">
</div>
<div class="media-info">
<div class="media-title">ENTRY_TITLE_HERE</div>
<div class="meta-grid">
<div><span class="meta-label">TYPE:</span> MOVIE/BOOK</div>
<div><span class="meta-label">LENGTH:</span> 120m / 300p</div>
<div><span class="meta-label">STATUS:</span> <div class="checkbox checked"></div> FINISHED</div>
<div><span class="meta-label">RATING:</span> <span class="rating-stars">★★★★☆</span></div>
</div>
</div>
CLICK_INSIDE_TO_SELECT_ALL

[+] DOG_TEXT_POST
TYPE: HTML_COMPONENT
// Use this for Miles' visual logs. Replace YOUR_URL with image link.
<div style="font-family: 'Courier New', monospace; background-color: #0a0a0a; border: 1px solid #7A0000; padding: 15px; max-width: 500px; margin: 20px auto; color: #b9b9ae; box-sizing: border-box;">
  <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #7A0000; padding-bottom: 5px; margin-bottom: 15px;">
    <span style="color: #7A0000; font-weight: bold; font-size: 12px;">VISUAL_CONFIRMATION</span>
    <span style="color: #7A0000; font-weight: bold; font-size: 12px;">01.30.26</span>
  </div>
  <div style="width: 100%; border: 1px solid #222; margin-bottom: 15px; overflow: hidden;">
    <img src="YOUR_IMAGE_URL_HERE" style="width: 100%; display: block; filter: grayscale(30%) contrast(110%);">
  </div>
  <div style="font-size: 14px; line-height: 1.5;">
    <span style="color: #7A0000; font-weight: bold;">[LOG]:</span> 
    Unit Miles detected a squirrel in sector 4. Tactical retreat was chosen in favor of a nap. 10/10 stealth.
  </div>
  <div style="margin-top: 15px; font-size: 9px; color: #444; text-align: right; border-top: 1px solid #1a1a1a; padding-top: 5px;">
    // SOURCE: K9_OPTICS_01
  </div>
</div>
CLICK_INSIDE_TO_SELECT_ALL

[+] STATIC_NOTES
TYPE: HTML_COMPONENT
//.
<div class="static-bin-post">
<div class="bin-header">
<span>SOURCE: UNKNOWN_NODE</span>
<span>SIGNAL: WEAK</span>
</div>
<div class="bin-content low-fidelity">
The walls are humming at 50Hz today. I can't tell if it's the machine or the 153 voices trying to hum in unison. Every time I reach for a memory, it dissolves into <span class="redacted">white noise</span>. Sector 7 is bleeding into the front. 
</div>
<div class="bin-footer">
TRASH_FILE_ID: 8842-X // BITRATE: 12kbps
</div>
</div>
CLICK_INSIDE_TO_SELECT_ALL

[+] EXTERNAL_POSTS
TYPE: HTML_COMPONENT
//.
<p>I found a scrap of data from the southern sector:</p>
<a href="https://othersite.com" class="external-relay">Intercepted Report: The Winter of '24</a>
CLICK_INSIDE_TO_SELECT_ALL

[+] STICKY_NOTE:BASIC
TYPE: HTML_COMPONENT
//.
<style>
.terminal-sticky-note{max-width:320px;margin:30px auto;transform:rotate(-1.5deg);filter:drop-shadow(8px 8px 12px rgba(0,0,0,0.6));}
.sticky-paper{background:#1A1C1E;border:1px solid #7A0000;border-top:15px solid #7A0000;padding:20px;position:relative;}
.ink-text{font-family:'Fira Code',monospace;color:#7A0000;font-size:14px;line-height:1.5;white-space:pre-wrap;}
.vault-code{display:block;background:rgba(122,0,0,0.1);border:1px dashed #7A0000;padding:8px;margin-top:10px;color:#D2D2C8;font-size:12px;text-align:center;font-family:'Fira Code',monospace;}
.sticky-footer{margin-top:15px;font-size:9px;color:#A0A096;text-transform:uppercase;border-top:1px solid #2C2F33;padding-top:10px;font-family:'Fira Code',monospace;}
</style>
<div class="terminal-sticky-note">
<div class="sticky-paper">
<div class="ink-text">
// ENCRYPTED_FRAGMENT
Sector 7 relay is 
offline. Use the 
emergency bypass 
to sync signals.
</div>
<div class="vault-code">CODE: 77-B-MILES</div>
<div class="sticky-footer">Auth_Stamp: #0921-X</div>
</div>
</div>
CLICK_INSIDE_TO_SELECT_ALL

[+] PASSWORD
TYPE: HTML_COMPONENT
//.
<div id="vault-gate">
  <p style="color:#7A0000; font-family:monospace;">// ACCESS_RESTRICTED: ENTER_KEY</p>
  
  SUBMIT
</div>
<div id="vault-content" style="display:none;">
  <p style="color:#D2D2C8;">// ACCESS_GRANTED. REVEALING_DATA...</p>
  <p>The code is: <strong>77-B-MILES</strong></p>
</div>

CLICK_INSIDE_TO_SELECT_ALL

[+] LOCKED_GATE
TYPE: HTML_COMPONENT
//.
<div id="vault-gate" style="text-align:center; padding:50px; border:1px dashed #7A0000; background:rgba(0,0,0,0.5);">
<p style="color:#7A0000; font-family:'Fira Code', monospace; letter-spacing:2px;">[!] SECURITY_PROTOCOL_ACTIVE</p>
<p style="color:#A0A096; font-family:'Fira Code', monospace; font-size:12px;">IDENTIFICATION REQUIRED FOR SECTOR_7 ACCESS</p>

<br><br>
INITIALIZE_DECODING
</div>
<div id="vault-content" style="display:none;">
<div class="terminal-sticky-note">
<p>// ACCESS_GRANTED: WELCOME_COMMANDER</p>
<p>Here is the decrypted data...</p>
</div>
</div>

CLICK_INSIDE_TO_SELECT_ALL

VAULT CODE

[+] HEADER: PHOTO_ENTRY_CODE
TYPE: HTML_COMPONENT
// Use this for Miles' visual logs. Replace YOUR_URL with image link.
PASTE_YOUR_CODE_HERE
CLICK_INSIDE_TO_SELECT_ALL