<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home??</title>
    <link rel="icon" href="../static/site/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="../default_style.css">
</head>
<body>
    <div id="main">
    <div id="title">
        <div>
            <img src="../static/site/logo.png" id="melon">
        </div>
        <div>
            <h1>Pick something?</h1>
        </div>
    </div>
    <div id="menu">
        <div id="image-container">
            <img src="empty.png" id="large-image">
        </div>
        <div>
            <a href="./art/index.html" class="seed" id="art"><img src="seed.png"></a>
            <a href="./shrine/index.html" class="seed" id="shrine"><img src="seed.png"></a>
            <a href="./friends/index.html" class="seed" id="friends"><img src="seed.png"></a>
            <a href="./stuff/index.html" class="seed" id="stuff"><img src="seed.png"></a>
        </div>
    </div>
    </div>

    <script>const menuItems = document.querySelectorAll('.seed');
        const largeImage = document.getElementById('large-image');
        const imageContainer = document.getElementById('image-container');
        
        menuItems.forEach(item => {
            item.addEventListener('mouseenter', () => {
                const subfolder = item.getAttribute('id');
                const imgSrc = `${subfolder}.png`; // Generating image path from subfolder name
                largeImage.src = imgSrc;
                imageContainer.style.opacity = 1;
            });
        
            item.addEventListener('mouseleave', () => {
                imageContainer.style.opacity = 0;
            });
        });
        </script>
</body>
</html>