Code viewer [Ancient Brain]

Code viewer for World: Time Machine
document.addEventListener('DOMContentLoaded', function () {
    // Add CSS styles to the document
    const style = document.createElement('style');
    style.textContent = `
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Poppins", sans-serif;
        }
        all{
            background: black;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            min-height: 100vh;
            background: #151515;
            color: white;
            
        }
        .container {
            margin: 20px;
            text-align: center;
            width: 80%;
            max-width: 600px;
        }
        h1 {
            margin-bottom: 0.5em;
            color: #00fd0a;
            text-shadow: 2px 2px 4px rgba(0, 253, 10, 0.5);
        }
        h3 {
            margin: 1em 0;
            color: #ddd;
        }
        #selected-year, #rangeValue {
            font-size: 2em;
            color: #00fd0a;
            margin-bottom: 1em;
        }
        .range {
            width: 100%;
            height: 25px;
            -webkit-appearance: none;
            background: #333;
            outline: none;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
            cursor: pointer;
        }
        .range::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #00fd0a;
            border: none;
            box-shadow: -407px 0 0 400px #00fd0a;
            transition: transform 0.3s ease;
        }
        .range::-webkit-slider-thumb:hover {
            transform: scale(1.2);
        }
        input, button {
            margin: 10px;
            padding: 10px;
            border-radius: 5px;
            border: none;
            transition: background-color 0.3s ease;
        }
        button {
            background-color: #00fd0a;
            cursor: pointer;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0, 253, 10, 0.3);
        }
        button:hover {
            background-color: #00db0a;
        }
        #api-key-container {
            background-color: #222;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        }
        #api-key {
            width: calc(100% - 130px);
        }
        #output {
             min-height: 150px;
             display: flex;
             justify-content: center;
             align-items: center;
             color: #aaa;
             margin-bottom: 0; /* Reduce the bottom margin */
        }
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 0px;
        }
        .loading div {
            width: 1em;
            height: 1em;
            margin: 0.2em;
            background-color: #00fd0a;
            border-radius: 50%;
            animation: bounce 0.6s infinite alternate;
        }
        .loading div:nth-child(2) {
            animation-delay: 0.2s;
        }
        .loading div:nth-child(3) {
            animation-delay: 0.4s;
        }
        @keyframes bounce {
            to {
                opacity: 0.1;
                transform: translate3d(0, -0.5em, 0);
            }
        }
        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                width: 95%;
            }
            #api-key {
                width: calc(100% - 140px);
            }
        }
    `;
    document.head.appendChild(style);

    // Inject the HTML structure into the body
    document.body.innerHTML = `
        <div id="all">
        <h1>TimeMachine powered by DALL·E</h1>
        <div class="container" id="api-key-container">
            <h3>Enter API Key</h3>
            <input type="text" id="api-key" placeholder="Enter your API Key...">
            <button id="set-api-key">Set API Key</button>
        </div>
        <div class="container">
            <h3>Enter Year and Location</h3>
            <input class="range" id="year-slider" type="range" min="-2020" max="2020" step="10" value="0" oninput="updateYearSlider(this.value)" onchange="updateYearSlider(this.value)">
            <p><span id="selected-year">1 AD</span></p>
            <input type="text" id="location-input" placeholder="Enter a location...">
            <button id="submit-prompt">Generate Image</button>
        </div>
        <div class="container">
            <h3>Disclaimer</h3>
            <p class="disclaimer">The images generated by AI are based on data models and may not be always historically or factually accurate. They are for illustrative purposes only and should not be used as a sole source of truth.</p>
            <h3>Generated Image</h3>
            <div id="output"></div>
            <div class="loading" id="loading-animation" style="display:none;">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        </div>`;

    let apiKey = '';

    // Function to set API key and hide the API key div
    function setApiKey() {
        apiKey = document.querySelector("#api-key").value.trim();
        if (apiKey) {
            console.log("API Key set:", apiKey);
            document.querySelector("#api-key-container").style.display = 'none';
        } else {
            alert("Please enter an API key.");
        }
    }

    // Function to display the year with BC/AD notation and update the slider
    function updateYearSlider(value) {
        const yearSpan = document.querySelector("#selected-year");
        let year = parseInt(value);
        if (year < 0) {
            yearSpan.textContent = `${Math.abs(year)} BC`;
        } else if (year > 0) {
            yearSpan.textContent = `${year} AD`;
        } else {
            yearSpan.textContent = `1`; // Handling the year 0 as 1
        }
    }

    // Function to show the loading animation
    function showLoading() {
        document.getElementById('loading-animation').style.display = 'flex';
    }

    // Function to hide the loading animation
    function hideLoading() {
        document.getElementById('loading-animation').style.display = 'none';
    }

    // Function to generate image based on selected year and location
    function generateImage(year, location) {
        showLoading(); // Show loading animation

        const adjustedYear = year < 0 ? `${Math.abs(year)} BC` : `${year} AD`;
        const prompt = `Generate a photorealistic image of ${location} in the decade starting in the year ${adjustedYear}.`;
        const outputDiv = document.querySelector("#output");
        outputDiv.innerHTML = '';

        // Making the API request
        fetch('https://api.openai.com/v1/images/generations', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${apiKey}`
            },
            body: JSON.stringify({
                model: "dall-e-3",
                prompt: prompt,
                n: 1,
                size: "1024x1024"
            })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok: ' + response.statusText);
            }
            return response.json();
        })
        .then(data => {
            if (data && data.data && data.data.length > 0) {
                const imageUrl = data.data[0].url;
                outputDiv.innerHTML = `<img src="${imageUrl}" alt="Generated Image" style="max-width:100%; height:auto;" />`;
            } else {
                outputDiv.textContent = "No image generated.";
            }
            hideLoading(); // Hide loading animation
        })
        .catch(error => {
            console.error("Error while generating image:", error);
            outputDiv.textContent = "Error: " + error.message;
            hideLoading(); // Hide loading animation
        });
    }

    // Event listeners
    document.querySelector("#set-api-key").addEventListener('click', setApiKey);
    document.querySelector("#submit-prompt").addEventListener('click', function () {
        const year = parseInt(document.querySelector("#year-slider").value);
        const location = document.querySelector("#location-input").value.trim();
        if (apiKey && location) {
            generateImage(year, location);
        } else {
            alert("Please set the API key and enter a location.");
        }
    });

    // Update displayed year when the slider is moved
    const yearSlider = document.querySelector("#year-slider");
    yearSlider.addEventListener('input', function () {
        updateYearSlider(this.value);
    });

});