JSFiddle - React, Tailwind, and code Playground

by tomarriola

HTML

<div id="corkboard-container">
    <header class="case-header">
        <h1 class="case-file-title">YOKNAPATAWPHA COUNTY SHERIFF'S DEPARTMENT</h1>
        <p><strong>Incident No.</strong>: 000046</p>
        <p><strong>Case Description:</strong> Jared Plunk homicide investigation</p>
        <p><strong>Investigating Officer(s)</strong>: Detective S. Murphy, Detective E. Parker</p>
    </header>

    <p class="intro-text">Investigators summarized the alibis for persons of interest and whether those alibis could be corroborated.</p>
    <p class="intro-text">YCSD investigators compiled the following summary of the witnesses' alibis for Tuesday, January 2, between the hours of 4:00 a.m. and 6:00 a.m., when Jared Plunk is believed to have been killed.</p>

    <div id="suspects-grid">
        <div class="suspect-card" data-suspect="taylor-boyd">
            <img src="https://www.crimescene.com/images/stories/elvis/taylor-boyd-bio-2024.jpg" alt="Taylor Boyd" class="suspect-photo">
            <p class="suspect-name">Taylor Boyd</p>
        </div>

        <div class="suspect-card" data-suspect="yvonne-boyd">
            <img src="https://www.crimescene.com/images/stories/elvis/taylor-boyd-bio-2024.jpg" alt="Yvonne Boyd" class="suspect-photo">
            <p class="suspect-name">Yvonne Boyd</p>
        </div>

        <div class="suspect-card" data-suspect="kelly-bradley">
            <img src="https://www.crimescene.com/images/stories/elvis/taylor-boyd-bio-2024.jpg" alt="Kelly Bradley" class="suspect-photo">
            <p class="suspect-name">Kelly Bradley</p>
        </div>
        </div>
</div>

<div id="report-popup" class="hidden">
    <div id="report-content">
        <button id="close-report">X</button>
        </div>
</div>

CSS

body {
    font-family: 'Courier New', Courier, monospace;
    background-color: #725c48; /* Dark brown for a corkboard feel */
    background-image: url('https://ibb.co/vxk35Vv3'); /* A more pronounced corkboard texture */
    background-size: cover;
    color: #f0f0f0;
    margin: 0;
    padding: 20px;
    text-align: center;
}

#corkboard-container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: rgba(50, 40, 30, 0.7); /* Slightly darker, semi-transparent overlay */
    padding: 40px;
    border-radius: 10px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
    border: 3px solid #66523e; /* A frame around the board */
}

/* ... (the rest of the CSS remains the same) ... */
.suspect-card {
    background-color: #fff;
    border: 5px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    padding: 10px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s;
    position: relative;
    transform: rotate(calc(var(--rotation) * 1deg));
    border: 2px solid #000; /* Added a black border for a framed photo look */
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const suspects = document.querySelectorAll('.suspect-card');
    const reportPopup = document.getElementById('report-popup');
    const reportContent = document.getElementById('report-content');
    const closeBtn = document.getElementById('close-report');

    // Data for each suspect's report
    const reports = {
        'taylor-boyd': `
            <h2>Taylor Boyd</h2>
            <div class="report-details">
                <p><strong>Description:</strong> The victim's former business partner</p>
                </div>
        `,
        // ... (all other suspect report data) ...
    };

    suspects.forEach(suspect => {
        const randomRotation = Math.random() * 10 - 5;
        suspect.style.setProperty('--rotation', randomRotation);

        suspect.addEventListener('click', () => {
            const suspectId = suspect.getAttribute('data-suspect');
            if (reports[suspectId]) {
                reportContent.innerHTML = reports[suspectId] + `<button id="close-report">X</button>`;
                reportPopup.classList.add('visible');
            }
        });
    });

    reportPopup.addEventListener('click', (e) => {
        if (e.target.id === 'close-report' || e.target === reportPopup) {
            reportPopup.classList.remove('visible');
        }
    });
});