<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Library | waifuism.life</title>
    <link rel="stylesheet" href="styles.css">
    <script src="/libs/marked.min.js"></script>
</head>
<body>
    
    <div class="window">
        <div class="nav">
            <button onclick="loadContent('home.md')">Home</button>
            <button onclick="loadContent('slowly.md')">Slowly</button>
            <button onclick="loadContent('loneliness.md')">Loneliness</button>
            
        </div>
        <div class="content" id="mainContent">

        </div>
    </div>

    <script>
        function loadContent(file) {
            fetch(`markdown/${file}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`Network response was not ok: ${response.statusText}`);
                    }
                    return response.text();
                })
                .then(text => {
                    const mainContent = document.getElementById('mainContent');
                    mainContent.innerHTML = marked.parse(text);
                })
                .catch(error => {
                    console.error('Error loading content:', error);
                    const mainContent = document.getElementById('mainContent');
                    mainContent.innerHTML = `<p>Error loading content. Please try again later.</p>`;
                });
        }

        // Load the default home content on page load
        window.onload = function() {
            loadContent('home.md');
        };
    </script>
</body>
</html>