ec2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EcoOps Platform</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script type="module" src="./header.js"></script>
</head>
<body>
    <eco-header>
        <h1 class="text-3xl font-bold mb-2">Page Title</h1>
        <p class="text-xl">Page subtitle or description</p>
    </eco-header>

    <main class="container mx-auto p-8">
        <!-- Page content here -->
    </main>

    <script>
        // Example of using localforage in your page
        import localforage from 'https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js';
        
        const store = localforage.createInstance({
            name: 'ecoops-platform'
        });

        // Example: Save some page-specific data
        async function savePageData() {
            await store.setItem('pageData', {
                lastVisited: new Date(),
                userPreferences: {
                    theme: 'light',
                    fontSize: 'medium'
                }
            });
        }

        // Example: Retrieve page data
        async function loadPageData() {
            const pageData = await store.getItem('pageData');
            if (pageData) {
                // Use the data to initialize page state
                console.log('Last visited:', pageData.lastVisited);
            }
        }

        // Initialize page
        loadPageData();
    </script>
</body>
</html>