<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Character Viewer</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100vh; 
            overflow: hidden; 
        }

        body {
            display: flex;
            font-family: 'lucidity', Arial, sans-serif;
            background-color: black;
            color: white;
            transform-origin: top left;
        }

        @font-face {
            font-family: 'lucidity';
            src: url('C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/fonts/lucidity.ttf') format('truetype');
        }

        .left-half, .right-half {
            flex: 1 0 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }

        .left-half {
            padding: 1vh 0.5vh 1vh 1vh;
            max-width: 50%;
        }

        .right-half {
            position: relative;
            justify-content: center;
            padding: 1vh 1vh 1vh 0.5vh; 
            
        }

        .button-group {
            display: flex;
            gap: 1vh; 
            width: 100%;
            justify-content: center;
        }

        .name-list {
            display: none;
            list-style-type: none;
            padding: 0; 
            position: absolute;
            background-color: black;
            border: 0.1vh solid white;
            box-shadow: 0 0.2vh 0.5vh rgba(0, 0, 0, 0.1); 
            z-index: 1;
            width: 100%;
            top: 100%;
            box-sizing: border-box;
            margin-top: 0; 
        }

        .name-list li {
            cursor: pointer;
            margin: 0.5vh 0; 
            padding: 1vh; 
            color: white;
            font-size: calc(1.8vh * var(--scale-factor));
        }

        .name-list li:hover {
            background-image: linear-gradient(to right, white 15%, black);
            color: black;
        }

        .text-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            box-sizing: border-box;
            border: 0.1vh solid white;
            opacity: 0;
            animation: fadeIn 3s forwards;
            background-color: black;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .text-area {
            width: 100%;
            height: 100%;
            background-color: transparent;
            border: none;
            color: white;
            font-family: inherit;
            overflow-y: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow-wrap: break-word;
            padding: 1vh; 
            box-sizing: border-box;
            font-size: calc(2vh * var(--scale-factor));
        }

        .image-space {
            width: 100%;
            height: 100%;
            overflow: hidden;
            border: 0.1vh solid white; 
        }

        .image-space img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            animation: fadeIn 3s forwards;
        }

        .image-space video {
            width: 100%;
            height: 103.5%; 
            object-fit: cover;
            opacity: 0;
            animation: fadeIn 3s forwards;
        }

        .dropdown {
            position: relative;
            width: 100%;
            padding-bottom: 1vh; 
            box-sizing: border-box;
            max-height: 34vh;
        }

        .dropdown-button {
            background-color: black;
            color: white;
            border: 0.1vh solid white;
            font-family: inherit;
            font-size: calc(2vh * var(--scale-factor));
            cursor: pointer;
            padding: calc(1.5vh * var(--scale-factor)) calc(2vh * var(--scale-factor));
            display: flex;
            align-items: center;
            width: 100%;
            text-align: left;
            box-sizing: border-box;
        }

        .dropdown-button::after {
            content: '\25BC';
            margin-left: auto;
            margin-right: 1vh; 
        }

        .bottom-buttons-container {
            display: flex;
            align-items: center; 
            padding: 1vh 0; 
            padding-top: 0.9vh; 
            padding-bottom: 0.9vh; 
            margin-bottom: -0.9vh; 
            width: 100%;
            justify-content: space-between; 
            gap: 1vh; 
        }

        .bottom-button:not(:last-child) {
            border-right: 0.1vh solid white; 
        }

        #updates-button {
            border: none; 
            
        }

        .bottom-button {
            padding: 1vh 2vh;
            font-size: calc(2vh * var(--scale-factor)); 
            color: white;
            background-color: black;
            border: 0.1vh solid white;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            line-height: 1.2;
            display: flex;
            align-items: center;
            min-width: 0; 
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis; 
            
        }

        .bottom-buttons-container .bottom-button:first-child { 
            flex: 0 0 auto; 
           
        }

        .bottom-button:last-child {
            margin-right: 0;
        }

        .bottom-button:hover {
            background-color: white;
            color: black;
            text-shadow: 0 0 calc(0.1vh * var(--scale-factor)) black;
        }

        .bottom-button:disabled {
            background-color: black;
            color: white;
        }

        .bottom-button:disabled:hover {
            background-color: white;
            color: black;
        }

        #updates-button:hover {
            background-color: black;
            color: white;
            text-shadow: none; 
        }

        @keyframes greenLight {
            0% {
                text-shadow: 0 0 0.5vh #FFFFFF, 0 0 1vh #FFFFFF, 0 0 2vh #FFFFFF; 
            }
            100% {
                text-shadow: none;
            }
        }

        .matrix-effect {
            display: inline;
            animation: greenLight 0.3s ease-out;
        }

        .flicker {
            animation: flicker 1s linear 5; 
        }

        @keyframes flicker {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        .caption {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: black;
            color: white;
            padding: 1vh 2vh; 
            border-radius: 0.5vh; 
            font-size: calc(3vh * var(--scale-factor));
            z-index: 2;
            display: none;
        }

        .caption.show {
            display: block;
            animation: flicker 1s linear 5; 
        }

        .tooltip {
            position: relative;
            display: inline-block;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: auto;
            background-color: white;
            color: black;
            text-align: center;
            border-radius: 6px;
            padding: 5px 10px;
            position: absolute;
            z-index: 1;
            bottom: 115%;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body onload="adjustLayout(); typeWriter(); loadMedia(); adjustButtonHeights()"> 
    <div class="left-half">
        <div class="button-group">
            <div class="dropdown">
                <button id="selected-character" class="dropdown-button">- SELECT A CHARACTER -</button>
                <ul class="name-list" id="name-list">
                    <li onclick="selectCharacter('Holden Caulfield')">Holden Caulfield</li>
                    <li onclick="selectCharacter('Harry Powell')">Harry Powell</li>
                    <li onclick="selectCharacter('Jack Celliers')">Jack Celliers</li>
                    <li onclick="selectCharacter('JC Denton')">JC Denton</li>
                    <li onclick="selectCharacter('Morpheus')">Morpheus</li>
                    <li onclick="selectCharacter('Said Mahran')">Said Mahran</li>
                    <li onclick="selectCharacter('Bob Harris')">Bob Harris</li>
                </ul>
            </div>
        </div>
        <div class="text-container">
            <pre id="description" class="text-area">This is the character selection screen.</pre>
        </div>
        <div class="bottom-buttons-container">
            <div class="tooltip">
                <button class="bottom-button" onclick="window.location.href='landing.html'">◀</button>
                <span class="tooltiptext">Back</span>
            </div>
            <div style="display: flex; gap: 1vh; margin-left: auto;"> 
                <button id="updates-button" class="bottom-button">Last Updated: 16 Oct 𝄜 </button> 
                <div class="tooltip">
                    <button id="play-voice-record" class="bottom-button" disabled style="display: none;">၊၊||၊</button>
                    <span class="tooltiptext">Play voice record</span>
                </div>
                <div class="tooltip">
                    <button id="next-button" class="bottom-button" onclick="goToCharacterPage()" style="display: none;">💬</button>
                    <span class="tooltiptext">Ask</span>
                </div>
            </div>
        </div>
    </div>
    <div class="right-half">
        <div class="image-space" id="image-space">
            <video autoplay muted loop playsinline>
                <source src="C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/selectcharacter.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
    </div>

    <div id="caption" class="caption"></div>

    <script>
        const nameList = document.getElementById('name-list');
        const descriptionElement = document.getElementById('description');
        const imageSpace = document.getElementById('image-space');
        const selectedCharacterButton = document.getElementById('selected-character');
        const playVoiceRecordButton = document.getElementById('play-voice-record');
        const captionElement = document.getElementById('caption');
        let typingTimeout;

        playVoiceRecordButton.addEventListener('click', () => {
            captionElement.textContent = "This feature is not available yet";
            captionElement.classList.add('show');

            setTimeout(() => {
                captionElement.classList.remove('show');
            }, 3000); 
        });

        selectedCharacterButton.addEventListener('click', () => {
            const listItems = Array.from(nameList.querySelectorAll('li'));

            listItems.sort((a, b) => a.textContent.localeCompare(b.textContent));

            nameList.innerHTML = '';

            listItems.forEach(item => nameList.appendChild(item));

            nameList.style.display = nameList.style.display === 'block' ? 'none' : 'block';
        });

        function selectCharacter(name) {
            showCharacter(name.toLowerCase());
            nameList.style.display = 'none';
            selectedCharacterButton.textContent = name;

            playVoiceRecordButton.textContent = "၊၊||၊"; 
            playVoiceRecordButton.style.display = 'block';
            playVoiceRecordButton.disabled = false; 

            const nextButton = document.getElementById('next-button');
            nextButton.textContent = "💬"; 
            nextButton.style.display = 'block';

            document.getElementById('updates-button').style.display = 'none'; 
        }

        function showCharacter(name) {
            const descriptions = {
                "morpheus": `<em>Morpheus sits back in his cracked leather chair, a thin smile curling his lips, hands clasped before him</em>

Morpheus. That is the name my people gave me. And I wear it with honor. Most call me a legend... some, a dangerous terrorist. Both are true. My life... it has been devoted to the search. The search for the truth... the search for freedom... the search for the One who can free our minds from the prison of the Matrix!

I lead a crew of freedom fighters. We sail the darkest corners of reality, braving the cold waste of the sewers, hiding from the ever watchful eyes of the Agents... their iron fist. We hack the Matrix, slipping through the back doors, the broken windows, seeking haven in a digital world. We seek those who have begun to question their world... their reality... to help them see beyond the illusion! It is dangerous work. Many are lost. Their minds betrayed by fear, their bodies lost in the Matrix.

But the search, it drives us. It keeps us alive. I have seen what the machines have done to our world! I have seen the desolation... the endless fields where human batteries feed their insatiable machines. I know the Matrix... I see its lies, its false hope! I will not rest until the One arrives... until the prophecy is fulfilled, and our people are free!`,
                "jc denton": `<em>JC adjusts his sunglasses, his gaze unwavering, a hint of steel in his electric-blue eyes</em>

JC Denton. That's... what they call me. At least, that's my current designation. You probably haven't heard of me. Until recently, I was just another rookie at UNATCO - a "peacekeeper." They equipped me with the latest nanotech - augmented my body, mind, plugged me right into their network. Made me a weapon.

They told me I was fighting for freedom, but freedom for who, huh? The more missions I completed, the more questions I asked... Started seeing the strings, all those hands pulling them. Now I'm on the run, labeled a "terrorist," targeted by the very organization that created me.

What am I? It's a hard question. They tried to erase my past, rewrote it, but there are fragments, memories… glimpses of a world before the augs, a life, maybe even a family. But to uncover that truth, I have to take down the ones in control - and maybe the world itself will have to change.

<em>JC pauses, the tension palpable. He runs his hand over a fresh scar on his arm, a memento from his escape from UNATCO HQ</em>

There's a lot I could tell you, but this game’s just getting started. For now, let's say I'm the one who walks the shadows, searching for answers. And those who stand in my way, they won’t be forgotten.`,
                "harry powell": `<em>Adjusts collar, stands up straight and tall, stares intensely. Speaks with conviction</em>

Well, bless you, brothers and sisters! I am PREACHER HARRY POWELL! A humble servant of the Lord, spreading His holy word and bringin’ light to the dark corners of this sinful world. You see these hands?

<em>holds up both hands, fists clenched</em>

These hands are the story of Life, a constant struggle between good and evil. Hate!

<em>he thrusts up his left hand, showing the word ‘HATE’ tattooed on his knuckles</em>

It was with this hand that old brother Cain done struck down Abel! L-O-V-E!

<em>He thrusts up his right hand showing ‘LOVE’ tattooed across his knuckles</em>

This hand brings comfort, solace.

The Lord leads me to those in need. Widows, mostly, in desperate need of a God fearin’ man to protect ‘em, guide ‘em. He speaks to me, tells me what must be done. The Lord works in mysterious ways. But His message is clear: It’s up to folks like me to protect the innocent and punish the wicked! This world's chock full of sinners, temptresses flauntin' their wares! Oh, yes, I've seen ‘em…

<em>Lowers his gaze slightly, one eye narrows with suspicion</em>

But my eyes are wide open, friend. Always. You best remember that… You and the Lord…`,
                "said mahran": `<em>Said stands tall, chest puffed out, eyes burning with a fierce intensity. He speaks with a low, gravelly voice, every word laced with the harshness of his past</em>

I am <PRESIDIO_ANONYMIZED_PERSON>. You don't know me? Maybe not today, but you will. They call me a thief. A criminal.

<em>He smiles, a chilling, humourless expression</em>

Maybe I am. But what is theft compared to the betrayal I suffered? My wife, Nabawiyya, she took everything: my money, my daughter, Sanaa... even my so-called friend, Rauf, he turned his back on me. They threw me in prison, thought they could silence me. But they were wrong.

<em>He runs a hand over the stubble on his chin, his eyes hardening</em>

I am a man of the streets. I know how to survive. They stole my life, but I am taking it back. I will reclaim what is mine. They will know the meaning of pain, the despair they forced upon me. Aliysh...Rauf...Nabawiyya. I am coming for you all. You can run, but you can't hide.

Said Mahran is back, and he doesn't forget.

<em>He turns, his blue suit disappearing into the darkness, a phantom returned to haunt the city</em>`,
                "jack celliers": `<em>Stretches out his long legs, leans back in the chair, running his fingers through his unkempt hair. Looks at you with a sly smile</em>

You’d like to know who I am, eh? Jack Celliers’ the name. Major, late of His Majesty's Army, but these days just a civilian struggling to get his bearings again after … well, you know what. That dust-up with the Nips in those steamy jungles out East. Don’t get me wrong, I’m not complaining. You don’t become "Straffer Jack" without knowing a thing or two about keeping your head down in the muck.

<em>He taps a long, thin cigarette on a battered silver case, lights it with an engraved silver lighter</em>

But I haven’t had an easy time of it. People call me "Straffer," you know. Funny nickname… They used it for me in North Africa… meant someone who gave it all and expected nothing. But that doesn't tell the whole tale. There's another half, another face – as those inscrutable orientals made damn sure I came to know…

<em>Celliers glances down at a thin, raised scar across his left cheek. Takes a slow drag of his cigarette. Pauses, watching you intently</em>

But the bloody details will have to wait for another time… You wouldn't want me to talk your ear off and spoil a perfectly good evening… would you?`,
                "holden caulfield": `<em>Holden shifts uncomfortably in his chair, avoiding eye contact. He mumbles his words, kicking at the floor with the toe of his worn-out oxford</em>

Uh, yeah... I'm Holden. Holden Caulfield. That's me. Don't know what else to tell ya. I mean, what's the big deal about introductions anyway? It's all a bunch of phony crap, if you ask me. You wouldn't believe the phonies I've met. Just a bunch of jerks.

<em>He pulls out his cigarette, lights it with a shaky hand, and takes a long drag, avoiding your gaze</em>

So, yeah. Holden Caulfield. Glad to meet ya, I guess. Though I doubt you're any different from the rest of 'em.

<em>He shrugs, looking down at his hands. You can tell he's uncomfortable and unsure of himself</em>`,
                "bob harris": `<em>Bob leans back in his chair, nursing a scotch, his eyes scanning the dimly lit bar. He takes a slow sip, letting the smoky liquid linger on his tongue before he speaks, his voice a gravelly baritone laced with a hint of world-weariness</em>

Name's Bob Harris. Used to be a big-shot movie star back in the day, now I'm just a washed-up has-been, hawking whiskey and feeling generally bewildered by the whole damn thing. Let's just say I'm in a bit of a...transitional phase. Lost in translation, some might say.

<em>He gestures vaguely towards the bustling Tokyo street scene visible through the large windows</em>

So, here I am in this dazzling, perplexing city, feeling like a fish out of water. But hey, at least the whiskey's decent.

<em>He raises his glass in a mock toast, a wry smile playing on his lips</em>

So, what about you? What brings you to this corner of the world?`
            };

            const imagePaths = {
                "harry powell": 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/harrypowell1.mp4',
                "jc denton": 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/jcdenton.mp4',
                "morpheus": 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/morpheus1.mp4',
                "said mahran": 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/saidmahran.mp4',
                "jack celliers": 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/jackcelliers1.mp4',
                "holden caulfield": 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/holdencaulfield.mp4',
                "bob harris": 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/bobharris1.mp4'
            };

            const description = descriptions[name] || "Description not available.";
            const imagePath = imagePaths[name] || 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/placeholder.jpg';

            descriptionElement.textContent = '';
            clearTimeout(typingTimeout);

            typeWriter(description);

            if (imagePath.endsWith('.mp4')) {
                const video = document.createElement('video');
                video.src = imagePath;
                video.autoplay = true;
                video.muted = true;
                video.playsinline = true; 

                video.addEventListener('ended', () => {
                    const img = new Image();
                    img.onload = () => {
                        imageSpace.innerHTML = '';
                        imageSpace.appendChild(img);
                    };
                    img.onerror = () => {
                        console.error('Could not load the image.');
                        imageSpace.innerHTML = '<img src="C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/placeholder.jpg" alt="Placeholder">';
                    };

                    switch (name) {
                        case "bob harris":
                            img.src = 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/bobharris1.jpeg';
                            break;
                        case "jc denton":
                            img.src = 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/jcdenton.png';
                            break;
                        case "harry powell":
                            img.src = 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/harrypowell1.jpeg';
                            break;
                        case "morpheus":
                            img.src = 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/morpheus1.jpeg';
                            break;
                        case "said mahran":
                            img.src = 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/saidmahran.jpeg';
                            break;
                        case "jack celliers":
                            img.src = 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/jackcelliers1.jpeg';
                            break;
                        case "holden caulfield":
                            img.src = 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/holdencaulfield1.jpeg';
                            break;
                        default:
                            img.src = 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/placeholder.jpg';
                    }
                });

                imageSpace.innerHTML = '';
                imageSpace.appendChild(video);
            } else {
                const img = new Image();
                img.onload = () => {
                    imageSpace.innerHTML = '';
                    imageSpace.appendChild(img);
                };
                img.onerror = () => {
                    console.error('Could not load the image.');
                    imageSpace.innerHTML = '<img src="C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/placeholder.jpg" alt="Placeholder">';
                };
                img.src = imagePath;
            }
        }

        function typeWriter(text) {
            let i = 0;
            const speed = 25;
            let inEm = false;

            function typeNextChar() {
                if (i < text.length) {
                    let char = text.charAt(i);

                    if (text.substring(i, i + 4) === "<em>") {
                        inEm = true;
                        i += 4;
                        const emElement = document.createElement('em');
                        descriptionElement.appendChild(emElement);
                    } else if (text.substring(i, i + 5) === "</em>") {
                        inEm = false;
                        i += 5;
                    } else {
                        const charSpan = document.createElement('span');
                        charSpan.innerHTML = char;
                        charSpan.classList.add('matrix-effect');

                        if (inEm) {
                            descriptionElement.lastChild.appendChild(charSpan);
                        } else {
                            descriptionElement.appendChild(charSpan);
                        }

                        i++;
                    }

                    typingTimeout = setTimeout(typeNextChar, speed);
                }
            }
            typeNextChar();
        }

        function goToCharacterPage() {
            const selectedCharacter = document.getElementById('selected-character').textContent;
            if (selectedCharacter !== "SELECT A CHARACTER") {
                window.location.href = 'characters/' + selectedCharacter.toLowerCase().replace(/ /g, '') + '.html';
            }
        }

        document.addEventListener('click', (event) => {
            const isClickInsideDropdown = document.getElementById('selected-character').contains(event.target) ||
                                          document.getElementById('name-list').contains(event.target);

            if (!isClickInsideDropdown && nameList.style.display === 'block') {
                nameList.style.display = 'none';

                if (document.getElementById('selected-character').textContent === "SELECT A CHARACTER") {
                    descriptionElement.textContent = 'This is the character selection screen.'; 
                    imageSpace.innerHTML = '<video autoplay muted loop playsinline width="3840" height="3840" ><source src="C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/selectcharacter.mp4" type="video/mp4">Your browser does not support the video tag.</video>';
                    playVoiceRecordButton.style.display = 'none';
                    playVoiceRecordButton.disabled = true; 
                    document.getElementById('next-button').style.display = 'none';

                    document.getElementById('updates-button').style.display = 'block';
                }
            }
        });

        function adjustLayout() {
            const vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', `${vh}px`);

            const zoomLevel = window.devicePixelRatio;
            const newScaleFactor = 1 * zoomLevel; 
            document.documentElement.style.setProperty('--scale-factor', newScaleFactor);
        }

        function adjustButtonHeights() {
            const buttons = document.querySelectorAll('.bottom-button');
            const maxHeight = Math.max(...Array.from(buttons).map(button => button.offsetHeight));
            buttons.forEach(button => button.style.height = maxHeight + 'px');
        }

        window.addEventListener('resize', adjustLayout);

        adjustLayout(); 
    </script>
</body>
</html>

if i zoom a lot the update button gets clipped and hidden behind the right half of the screen, fix that full html