<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Everfrost North</title>
    <style>
        body {
            margin: 0;
            background-color: #1e1e1e;
            color: #00ff00;
            font-family: monospace;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .info-message {
            margin-bottom: 20px;
            font-size: 16px;
            color: #00ff00;
            width: 80%;
            text-align: left;
        }

        .logo {
            margin-bottom: 20px;
            width: 80%;
            text-align: left;
        }

        .log-window {
            width: 80%;
            height: 60%;
            background: #000;
            border: 2px solid #333;
            padding: 10px;
            overflow: hidden; /* Prevent scrollbar */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            justify-content: flex-end; /* Keep lines at the bottom */
        }

        .log-line {
            margin: 0;
            line-height: 1.5em;
        }

        .logo, picture {
            height: 100px;       /* Set the height to 150px */
            width: auto;         /* Maintain the aspect ratio */
        }

        .logoContainer {
            width: 80%;
            text-align: left;
        }

        picture {
            display: inline-block; /* Ensures the picture element behaves properly */
        }

        @media (max-width: 600px) {
            .logo {
                height: 100px;     /* Ensures the narrow logo respects the height */
                width: auto;       /* Aspect ratio remains intact */
            }
        }
    </style>
</head>
<body>

<div class="logoContainer">
    <div class="logo">
    <!--    show res/everfrost_north_logo.png but switch to res/everfrost_north_logo_stacked.png if the window becomes to narrow for the original logo -->
    <!--    <img src="res/everfrost_north_logo.png" alt="Everfrost North Logo" height="150px" srcset="res/everfrost_north_logo.png 800w, res/everfrost_north_logo_stacked.png 400w">-->
        <picture>
            <source srcset="res/everfrost_north_logo_stacked.png" media="(max-width: 600px)">
            <img src="res/everfrost_north_logo.png" alt="EVERFROST NORTH" class="logo">
        </picture>
    </div>
</div>


<!-- Informative Counter -->
<div class="info-message">
    Database Migration in progress <span id="currentProgress"></span>
</div>

<!-- Log Window -->
<div class="log-window" id="logWindow"></div>

<script>
    const logWindow = document.getElementById("logWindow");

    // Set up timestamps
    const startTime = new Date("2025-01-10T22:12:25+01:00"); // 10th January 2025 22:12:25 UTC+1
    const endTime = new Date(startTime.getTime() + 4 * 24 * 60 * 60 * 1000); // 4 days into the future

    const totalProgress = Math.floor((endTime - startTime) / 1000 * 10); // Total duration in tenths of seconds

    function updateProgress() {
        const now = new Date();
        const elapsed = Math.floor((now - startTime) / 1000 * 10); // Elapsed time in tenths of seconds
        const currentProgress = Math.min(elapsed, totalProgress); // Cap progress at the total value

        document.getElementById("currentProgress").textContent = `[${currentProgress}/${totalProgress}]`;
    }

    setInterval(updateProgress, 649); // Update progress every 649ms

    // Static parts of log messages
    const logTemplates = [
        "Connecting to database {dbName}...",
        "Running migration: {migrationName}",
        "Query executed: SELECT * FROM {tableName} WHERE {column} = {value};",
        "Insert successful: ID = {id}",
        "Deleting records older than {days} days...",
        "Migration complete: {migrationName}",
        "Update successful: {rowCount} rows affected",
        "Rolling back transaction...",
        "Transaction committed successfully",
        "Connection to database {dbName} closed.",
        "Starting backup process for {dbName}...",
        "Backup completed in {time}s",
        "Error: Duplicate entry '{value}' for key '{key}'",
        "Retrying failed operation on {dbName}...",
        "Operation timed out. Retrying...",
        "Connected to replica database node {nodeId}.",
        "Syncing data between nodes {node1} and {node2}...",
    ];

    // Dynamic values for the placeholders
    const dynamicValues = {
        dbName: ["MainDB", "ReplicaDB", "AnalyticsDB", "TestDB"],
        migrationName: [
            "20250110_add_users_table",
            "20250110_add_orders_table",
            "20250110_add_logs_table",
            "20250111_update_schema",
        ],
        tableName: ["users", "history", "logs", "sessions", "contacts", "users", "messages", "conversations", "participants", "attachments", "contacts", "notifications", "readreceipts", "typingindicators", "settings", "statuses", "emojis", "reactions", "archivedmessages", "messageedits", "roles", "groupdetails", "invitations", "auditlogs", "messagestats", "activitylogs", "medialibrary", "messagemedia", "bots", "webhooks"],
        column: ["id", "username", "message_id", "session_id", "timestamp", "friend_id", "return_value", "ttl", "status", "id", "user_id", "conversation_id", "message_id", "participant_id", "group_id", "attachment_id", "status", "role", "name", "username", "email", "password", "profile_picture", "created_at", "updated_at", "content", "timestamp", "is_read", "is_typing", "last_seen", "online_status", "reaction", "emoji", "file_url", "file_size", "media_type", "invite_status", "admin_id", "recipient_id", "sender_id", "read_at", "edited_at", "deleted_at", "settings_key", "settings_value", "event_type", "event_data", "activity_type", "activity_data", "webhook_url", "bot_token"],
        value: ["Reeselstildds", "e8a04 54c3d-f1 4b3", "0.0.3-pre-pre-alpha", "420-BL4-Z31T", "Jolly", "active", "inactive", "online", "offline", "away", "busy", "available", "pending", "accepted", "rejected", "blocked", "admin", "member", "moderator", "guest", "text", "image", "video", "audio", "file", "read", "unread", "deleted", "edited", "sent", "failed", "success", "error", "info", "warning", "mention", "reaction", "like", "star", "private", "group", "archived", "enabled", "disabled", "true", "false", "null"],
        id: ["11", "6969", "98765", "54321", "420", "69", "322", "8741", "1579", "84971", "5674", "33789", "24179", "94472", "147625", "45687", "8328"],
        days: ["7", "30", "90", "365"],
        rowCount: ["12", "45", "89", "120", "48", "35", "78", "44", "99", "53", "67", "88", "18", "59"],
        time: ["12", "45", "89", "22", "48", "17", "9", "44", "91", "50", "62", "85", "23", "50"],
        key: ["PRIMARY", "UNIQUE", "FOREIGN"],
        nodeId: ["Node-1", "Node-2", "Node-3"],
        node1: ["Node-A", "Node-B", "Node-C"],
        node2: ["Node-X", "Node-Y", "Node-Z"],
    };

    let logLines = []; // Keep track of all log lines

    // Function to replace placeholders with random dynamic values
    function generateLogLine(template) {
        return template.replace(/{(\w+)}/g, (_, key) => {
            const values = dynamicValues[key];
            return values ? values[Math.floor(Math.random() * values.length)] : `{${key}}`;
        });
    }

    // Function to add a new log line
    function addLogLine() {
        const logLine = document.createElement("p");
        logLine.className = "log-line";
        logLine.textContent = generateLogLine(getRandomTemplate());

        logWindow.appendChild(logLine);
        logLines.push(logLine);

        // Scroll to the bottom of the log window
        logWindow.scrollTop = logWindow.scrollHeight;

        // Keep only the last 200 log lines
        if (logLines.length > 200) {
            const oldLine = logLines.shift(); // Remove the oldest line
            logWindow.removeChild(oldLine);
        }
    }

    // Get a random template
    function getRandomTemplate() {
        return logTemplates[Math.floor(Math.random() * logTemplates.length)];
    }

    // Initialize the log window with 200 messages
    function initializeLog() {
        for (let i = 0; i < 200; i++) {
            addLogLine();
        }
    }

    // Start the log with 200 lines
    initializeLog();

    // Generate new log lines every 200ms
    setInterval(addLogLine, 200);
</script>
</body>
</html>
