index.html

    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/users/1">User 1</a>
        <a href="/users/2">User 2</a>
        <a href="/users/1/posts/1">User 1 Post 1</a>
        <a href="/users/2/posts/2">User 2 Post 2</a>
    </nav>
    <div id="app" class="content"></div>

    <script type="module">
        import { Router } from './dist/Router.js';

        // Example components
        const Home = () => {
            document.getElementById('app').innerHTML = `
                <h1>Welcome to the Router Demo</h1>
                <p>This is a demonstration of the Router class with static and dynamic routes.</p>
            `;
        };

        const About = () => {
            document.getElementById('app').innerHTML = `
                <h1>About</h1>
                <p>This is a simple router implementation using the Navigation API and URLPattern.</p>
            `;
        };

        const UserProfile = (params) => {
            document.getElementById('app').innerHTML = `
                <h1>User Profile</h1>
                <div class="user-card">
                    <h2>User ${params.id}</h2>
                    <p>This is the profile page for user ${params.id}.</p>
                </div>
            `;
        };

        const UserPost = (params) => {
            document.getElementById('app').innerHTML = `
                <h1>User Post</h1>
                <div class="user-card">
                    <h2>Post ${params.postId}</h2>
                    <p>This is post ${params.postId} from user ${params.id}.</p>
                </div>
            `;
        };

        // Define routes
        const routes = [
            {
                path: '/',
                component: Home
            },
            {
                path: '/about',
                component: About
            },
            {
                path: '/users/:id',
                component: UserProfile,
                children: [
                    {
                        path: '/posts/:postId',
                        component: UserPost
                    }
                ]
            }
        ];

        // Initialize router
        const router = new Router(routes);
    </script>