tues night fixes

by tomarriola

HTML

<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" alt="Man with salt-and-pepper hair and five o'clock shadow, wearing a t-shirt and trucker hat" width="125" height="125"...

CSS

body {
    font-family: sans-serif;
    margin: 0;
    line-height: 1.6;
    background-color: #000000;
}

main {
    max-width: 1200px;
    margin: 2rem auto;
    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: 1rem;
    border: none;
    background-color: #000000;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: bold;
    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;
}

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

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

.dna-tabs li {
    margin-bottom: 0.5rem;
}

.dna-tab-button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    border: none;
    background-color: transparent;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 4px;
    color: #000000;
}

.dna-tab-button:hover {
    background-color: #cccccc;
}

.dna-tab-button.active {
    background-color: #ffff00;
    font-weight: bold;
}

.details-pane {
    flex-grow: 1;
    padding: 2rem;
    display: none;
}

.details-pane.active {
   ...

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="profile"]');
        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="profile"]');
        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 = 'none');
  ...