script.js

const animations = [
    { elements: '.bg h1, .bg p', animationClass: 'bg-ani' },
    { elements: '.navbar .navigation a', animationClass: 'navbar-ani' },
    { elements: '.content .header h1, .content .header h2, .content .header p', animationClass: ['header-ani-right', 'header-ani-left'] },
    { elements: '.FAQ p', animationClass: 'question-anim' },
    { elements: '.FAQ h3', animationClass: 'centred-h3-anim' }
];

document.addEventListener('DOMContentLoaded', function() {
    //setupObservers();
});
document.getElementById('loginForm').addEventListener('submit', function(event) {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    // Basic validation criteria
    if (username === '' || password === '') {
        alert('Both username and password are required.');
        event.preventDefault(); // Prevent form submission
    } else if (password.length < 3) {
        alert('Password must be at least 3 characters long.');
        event.preventDefault(); // Prevent form submission
    } else if (username === 'admin' && password === 'admin') {
        alert('Login successful as admin!');
        event.preventDefault(); // Prevent form submission
    }else if (username === 'user' && password === 'user') {
        alert('Successful login, dear User!');
        event.preventDefault(); // Prevent form submission
    } else {
        alert('Invalid username or password.');
        event.preventDefault(); // Prevent form submission
    }
});

function setupObservers() {
    const options = {
        root: null,
        threshold: 0.1
    };

    // Helper function to create observers with animation classes
    function createObserver(elementsSelector, animationClass) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry, index) => {
                if (entry.isIntersecting) {
                    setTimeout(() => {
                        entry.target.classList.add(animationClass);
                        observer.unobserve(entry.target);
                    }, index * 500);
                }
            });
        }, options);

        document.querySelectorAll(elementsSelector).forEach(el => observer.observe(el));
    }

    // Apply observers
    createObserver('.bg h1, .bg p', 'bg-ani');
    createObserver('.navbar .navigation a', 'navbar-ani');

    // Header observer with alternating animation
    createObserver('.content .header h1, .content .header h2, .content .header p',
        (index) => index % 2 === 0 ? 'header-ani-left' : 'header-ani-right');

    // Commented-out sections (you can activate them similarly)
    // createObserver('.FAQ p', 'question-anim');
    createObserver('.FAQ h3', 'centred-h3-anim');
}

document.addEventListener('DOMContentLoaded', function() {
    const bgElement = document.querySelector('.bg');
    let x1 = 94.35, y1 = 89.61, x2 = 6.50, y2 = 88.03, x3 = 6.16, y3 = 12.61, x4 = 93.68, y4 = 11.42; // Initial positions

    function updateBackground() {
        // Update positions with a small, smooth change
        x1 = (x1 + (Math.random()) * 0.15) % 500;
        y1 = (y1 + (Math.random()) * 0.15) % 500;
        x2 = (x2 + (Math.random()) * 0.15) % 500;
        y2 = (y2 + (Math.random()) * 0.15) % 500;
        x3 = (x3 + (Math.random()) * 0.15) % 500;
        y3 = (y3 + (Math.random()) * 0.15) % 500;
        x4 = (x4 + (Math.random()) * 0.15) % 500;
        y4 = (y4 + (Math.random()) * 0.15) % 500;

        // Apply new background style
        bgElement.style.background = `radial-gradient(circle at ${x1}% ${y1}%, #83A8F0 0%, 20%, rgba(131,168,240,0) 40%), radial-gradient(circle at ${x2}% ${y2}%, rgba(200,238,245,0.99) 0%, 25%, rgba(200,238,245,0) 50%), radial-gradient(circle at ${x3}% ${y3}%, #155DE9 0%, 42%, rgba(21,93,233,0) 70%), radial-gradient(circle at ${x4}% ${y4}%, #E3E3E3 0%, 42%, rgba(227,227,227,0) 70%), radial-gradient(circle at 48.90% 49.52%, #808080 0%, 100%, rgba(128,128,128,0) 100%)`;

        requestAnimationFrame(updateBackground);
    }

    // Start the animation
    requestAnimationFrame(updateBackground);


    let textarea = document.getElementById("savedSearches");

    textarea.addEventListener('keydown', function(event) {
        if (event.key === 'Enter') {
            event.preventDefault(); // Prevents the default action of the Enter key
            getTextFromTextarea();
        }
    });
});

async function testGPTReq(apiKey, message, maxTokens = 50, model = "gpt-3.5-turbo-1106") {
    const response = await fetch("https://api.openai.com/v1/chat/completions", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${apiKey}`
        },
        body: JSON.stringify({
            model: model,
            messages: message,
            max_tokens: 10
        })
    });
    const data = await response.json();
    console.log(data.choices[0].message.content);

    return data;
}

let switcer = true;

messages = [];


function getTextFromTextarea() {
    let textarea = document.getElementById("savedSearches");
    let text = textarea.value;
    textarea.value = "";

    const UserAnswerH3 = document.createElement("h3");
    UserAnswerH3.textContent = "User:";

    messages.push({role: "user", content: text});

    let response = testGPTReq("your api key", messages);

    if (switcer){
        let element = document.getElementById('placeHolderConversation');
        element.remove();
        switcer = false;
    }

    let Div = document.querySelector(".law");
    Div.appendChild(UserAnswerH3);
    let newParagraph = document.createElement("p");
    newParagraph.textContent = text;
    Div.appendChild(newParagraph);

    response.then(data => {

        let newParagraph = document.createElement("p");
        newParagraph.textContent = data.choices[0].message.content;

        messages.push({role: "assistant", content: data.choices[0].message.content});

        const aiAnswerH3 = document.createElement("h3");
        aiAnswerH3.textContent = "AI's answer:";

        Div.appendChild(aiAnswerH3);
        Div.appendChild(newParagraph);
    });
}