<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Earn - ErtixNodes</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background-color: #1F2937;
            color: #E5E7EB;
            font-family: 'Inter', sans-serif;
        }

        header {
            background-color: #111827;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            padding: 1rem 0;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        nav ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        nav ul li {
            display: inline-block;
            margin-right: 1rem;
        }

        nav ul li a {
            color: #E5E7EB;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            transition: background-color 0.2s ease;
        }

        nav ul li a:hover {
            background-color: #374151;
        }

        h2 {
            font-size: 1.75rem;
            margin-bottom: 1rem;
            text-align: center;
        }

        .bg-white {
            background-color: #2D3748;
            transition: box-shadow 0.2s ease;
            color: #E5E7EB;
            padding: 2rem; /* Adjusted padding for scaling */
            border-radius: 0.5rem; /* Ensure rounded corners */
            width: 100%; /* Set to full width */
            max-width: 800px; /* Set maximum width */
            margin: 1rem auto; /* Center with margin */
        }

        .bg-white:hover {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .rounded-lg {
            border-radius: 0.5rem;
        }

        .main-content {
            width: 600px;
            flex-direction: column;
            align-items: center;
            padding: 2rem;
        }

        .btn {
            display: inline-block;
            padding: 0.75rem 1.5rem; /* Adjusted padding for button scaling */
            border-radius: 0.375rem;
            font-weight: bold;
            color: white;
            cursor: pointer;
            transition: background-color 0.2s ease, transform 0.2s ease;
            border: none;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            font-size: 0.875rem; /* Adjusted font size for better scaling */
        }

        .btn-gradient {
            background: linear-gradient(90deg, #3182ce, #2b6cb0);
        }

        .btn-gradient:hover {
            transform: scale(1.05);
        }

        input[type="text"],
        select {
            width: 100%;
            padding: 0.75rem;
            border-radius: 0.375rem;
            border: 1px solid #4A5568;
            background-color: #374151;
            color: #E5E7EB;
        }

        input[type="text"]:focus,
        select:focus {
            border-color: #3182ce;
            outline: none;
        }

        .ad-container {
            margin-top: 2rem;
            text-align: center;
        }

        .notification {
            background-color: #2C3E50;
            padding: 1rem;
            border-radius: 0.375rem;
            text-align: center;
            margin-bottom: 1rem;
        }
    </style>
</head>

<body>

    <header>
        <div class="container flex justify-between items-center px-4">
            <div class="text-xl font-bold text-white">ErtixNodes Dashboard</div>
            <nav>
                <ul class="flex space-x-4">
                    <li><a href="/dash" class="text-gray-400 hover:text-blue-400 transition duration-200"><i class="fa-solid fa-house mr-1"></i>Home</a></li>
                    <li><a href="/dash/create" class="text-gray-400 hover:text-blue-400 transition duration-200"><i class="fa-solid fa-plus mr-1"></i>Create</a></li>
                    <li><a href="/dash/earn" class="text-gray-400 hover:text-blue-400 transition duration-200"><i class="fa-solid fa-money-bill-wave mr-1"></i>Earn</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="main-content container mx-auto">
        <h2 class="font-bold mb-6">Welcome, <%- req.session.user.global_name %>!</h2>

        <!-- Earn Section -->
        <section id="earn">
            <div class="bg-white p-8 rounded-lg shadow">
                <h2 class="text-2xl font-bold mb-6">List of earnings</h2>
                <ul class="mb-6">
                    <li class="mb-4">
                        <a href="/dash/earn/link/cuty" target="_blank" class="text-blue-400 hover:underline">cuty.io</a> - 10 credits - <span class="timer" id="cutytime">loading</span>
                    </li>
                </ul>
                <a href="#home" class="btn bg-red-600">Cancel</a>
            </div>

            <div class="bg-white p-8 rounded-lg shadow">
                <iframe style="width:100%;height:800px;" scrolling="yes" frameborder="0" src="https://bitcotasks.com//offerwall/6g7i90lnyg61ob4w66e7hohf4ve28d/<%- req.session.userID %>"></iframe>
            </div>
        </section>

    </main>

    <script>
        document.addEventListener('DOMContentLoaded', async () => {
            document.getElementById('cutytime').innerText = await fetch('/dash/earn/cuty/time').then(r => r.text());
        });
    </script>
</body>

</html>