tues try 4

by tomarriola

HTML

<main>
    <nav>
        <ul class="suspect-tabs">
            <li><button class="suspect-tab-button active" data-suspect="brinkman"><img src="https://www.crimescene.com/images/stories/hand/dudley-brinkman.jpg" alt="Smiling man with dark hair and facial hair" width="125" height="125" /></button></li>
            <li><button class="suspect-tab-button" data-suspect="dooley"><img src="https://www.crimescene.com/images/stories/hand/eddie-dooley.jpg" alt="Unsmiling man with dark, thinning hair and salt-and-pepper facial hair" width="125" height="125" /></button></li>
            <li><button class="suspect-tab-button" data-suspect="dykman-bill"><img src="https://www.crimescene.com/images/stories/hand/bill-dykman.jpg" alt="Smiling man with short dark hair and facial hair" width="125" height="125" /></button></li>
            <li><button class="suspect-tab-button" data-suspect="dykman-robin"><img src="https://www.crimescene.com/images/stories/hand/robyn-dykman.jpg" alt="Smiling woman with glasses and long dark hair in a single braid" width="125" height="125" /></button></li>
            <li><button class="suspect-tab-button" data-suspect="fine-andy"><img src="https://www.crimescene.com/images/stories/hand/andy-fine.jpg" alt="Smiling man with close-cropped brown and gray hair and brown facial hair" width="125" height="125" /></button></li>
            <li><button class="suspect-tab-button" data-suspect="fine-carl"><img src="https://www.crimescene.com/images/stories/hand/carl-fine.jpg" alt="Balding man with a wryly serious expression" width="125" height="125" /></button></li>
            <li><button class="suspect-tab-button" data-suspect="fine-cindy"><img src="https://www.crimescene.com/images/stories/hand/cindy-fine.jpg" alt="Woman with curly dark hair and glasses" width="125" height="125" /></button></li>
            <li><button class="suspect-tab-button" data-suspect="laughlin"><img src="https://www.crimescene.com/images/stories/hand/chas-laughlin.jpg"...

CSS

body {
    font-family: sans-serif;
    margin: 0;
    line-height: 1.4; /* Reduced line height for a more compact feel */
    background-color: #000000;
}

main {
    max-width: 1200px;
    margin: 1rem auto; /* Reduced margin */
    border: 1px solid #ffffff;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    color: #000000;
}

/* Top Horizontal Tabs for Suspects */
.suspect-tabs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid #ffff00;
}

.suspect-tabs li {
    flex-grow: 1;
}

.suspect-tab-button {
    width: 100%;
    text-align: center;
    padding: 0.5rem; /* Reduced padding */
    border: none;
    background-color: #000000;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    border-bottom: 2px solid transparent;
}

.suspect-tab-button:hover {
    background-color: #333333;
}

.suspect-tab-button.active {
    background-color: #ffff00;
    color: #000000;
    border-bottom: 2px solid #ffff00;
}
.suspect-tab-button.active img {
    border-color: #000;
}
.suspect-tab-button img {
    border: 3px solid transparent;
    border-radius: 50%;
    width: 80px; /* Reduced image size */
    height: 80px; /* Reduced image size */
    object-fit: cover;
}


/* Content Area */
.content-area {
    display: flex;
    min-height: 500px;
    border-top: none;
}

/* Vertical DNA Tabs */
.dna-tabs {
    list-style: none;
    padding: 0.5rem; /* Reduced padding */
    margin: 0;
    background-color: #f0f0f0;
    width: 200px; /* Reduced width */
    flex-shrink: 0;
    border-right: 1px solid #000000;
}

.dna-tabs li {
    margin-bottom: 0.25rem; /* Reduced margin */
}

.dna-tab-button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem; /* Reduced padding */
    border: none;
    background-color: transparent;
   ...

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const suspectTabs = document.querySelectorAll('.suspect-tab-button');
    const dnaTabs = document.querySelectorAll('.dna-tab-button');
    const detailsPanes = document.querySelectorAll('.details-pane');
    
    function showSuspectDetails(suspectName) {
        suspectTabs.forEach(tab => tab.classList.remove('active'));
        detailsPanes.forEach(pane => pane.classList.remove('active'));
        
        const selectedSuspectTab = document.querySelector(`.suspect-tab-button[data-suspect="${suspectName}"]`);
        const selectedDetailsPane = document.getElementById(suspectName);
        if (selectedSuspectTab) selectedSuspectTab.classList.add('active');
        if (selectedDetailsPane) selectedDetailsPane.classList.add('active');
        
        dnaTabs.forEach(tab => tab.classList.remove('active'));
        const defaultDnaTab = document.querySelector('.dna-tabs .dna-tab-button[data-dna-target="seat-cushion"]');
        if (defaultDnaTab) defaultDnaTab.classList.add('active');

        const dnaContents = selectedDetailsPane.querySelectorAll('.dna-content');
        dnaContents.forEach(content => content.style.display = 'none');
        const defaultDnaContent = selectedDetailsPane.querySelector('.dna-content[data-dna="seat-cushion"]');
        if (defaultDnaContent) defaultDnaContent.style.display = 'block';
    }

    function showDnaComparison(dnaTarget) {
        dnaTabs.forEach(tab => tab.classList.remove('active'));
        
        const selectedDnaTab = document.querySelector(`.dna-tab-button[data-dna-target="${dnaTarget}"]`);
        if (selectedDnaTab) selectedDnaTab.classList.add('active');

        const activeSuspectPane = document.querySelector('.details-pane.active');
        if (activeSuspectPane) {
            const dnaContents = activeSuspectPane.querySelectorAll('.dna-content');
            dnaContents.forEach(content => content.style.display =...