<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./style.css"/>
    <title>M&#333;Browser + Vite + Vanilla TypeScript</title>
    <script type="module" src="./main.ts"></script>
</head>
<body>
<div class="container">
    <div class="row show-animation" style="animation-delay: 0ms">
        <img src="/logo.svg" class="logo" alt="M&#333;Browser logo"/>
    </div>
    <h1 class="show-animation" style="animation-delay: 80ms">Welcome to M&#333;Browser!</h1>
    <p class="show-animation" style="animation-delay: 160ms">Please enter your name and click the button.</p>
    <div class="row show-animation" style="animation-delay: 240ms">
        <div>
            <input id="greet-input" placeholder="Your name"/>
            <button id="greet-btn" type="button">Greet</button>
        </div>
    </div>
    <p id="greet-msg" class="show-animation" style="animation-delay: 320ms"></p>
</div>

    <div class="theme-toggle show-animation" style="animation-delay: 400ms">
        <div id="theme-toggle-bg" class="theme-toggle-bg system"></div>
        <button id="theme-light" title="Light">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
        </button>
        <button id="theme-system" title="System">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>
        </button>
        <button id="theme-dark" title="Dark">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
        </button>
    </div>
</body>
</html>
