<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>People Management Simulator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            text-align: center;
        }
        #status {
            padding: 10px;
            background-color: #ddd;
            display: flex;
            justify-content: space-around;
        }
        #main {
            display: flex;
            padding: 20px;
        }
        .section {
            flex: 1;
            margin: 10px;
            background-color: white;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .section h2 {
            text-align: center;
        }
        .person {
            border-bottom: 1px solid #ccc;
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .person:last-child {
            border-bottom: none;
        }
        button {
            padding: 5px 10px;
            margin-left: 5px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        .buy-btn {
            background-color: #4CAF50;
            color: white;
        }
        .assign-btn {
            background-color: #2196F3;
            color: white;
        }
        .promote-btn {
            background-color: #ff9800;
            color: white;
        }
        .feed-btn {
            background-color: #ffeb3b;
            color: black;
        }
        .terminate-btn {
            background-color: #f44336;
            color: white;
        }
        select {
            padding: 5px;
            margin-right: 5px;
        }
        .attribute {
            font-size: 0.9em;
            color: #555;
        }
    </style>
</head>
<body>

<header>
    <h1>People Management Simulator</h1>
</header>

<div id="status">
    <div>Funds: $<span id="funds">1000</span></div>
    <div>Reputation: <span id="reputation">100</span></div>
</div>

<div id="main">
    <div class="section" id="shop">
        <h2>People Shop</h2>
        <div id="shop-list">
            <!-- People available to buy will be listed here -->
        </div>
    </div>
    <div class="section" id="workers">
        <h2>Your Workers</h2>
        <div id="workers-list">
            <!-- Your workers will be listed here -->
        </div>
    </div>
</div>

<script>
    // Initial Game State
    const gameState = {
        funds: 1000,
        reputation: 100,
        shopPeople: [
            { id: 1, name: 'Alice', strength: 5, intelligence: 7, charisma: 6, cost: 200 },
            { id: 2, name: 'Bob', strength: 8, intelligence: 4, charisma: 5, cost: 180 },
            { id: 3, name: 'Charlie', strength: 6, intelligence: 6, charisma: 7, cost: 220 },
            { id: 4, name: 'Diana', strength: 4, intelligence: 9, charisma: 8, cost: 250 },
            { id: 5, name: 'Ethan', strength: 7, intelligence: 5, charisma: 6, cost: 190 }
        ],
        workers: []
    };

    let workerIdCounter = 1;

    // DOM Elements
    const fundsEl = document.getElementById('funds');
    const reputationEl = document.getElementById('reputation');
    const shopListEl = document.getElementById('shop-list');
    const workersListEl = document.getElementById('workers-list');

    // Initialize Shop
    function renderShop() {
        shopListEl.innerHTML = '';
        gameState.shopPeople.forEach(person => {
            const personDiv = document.createElement('div');
            personDiv.className = 'person';
            personDiv.innerHTML = 
                <div>
                    <strong>${person.name}</strong> 
                    <div class="attribute">Strength: ${person.strength}, Intelligence: ${person.intelligence}, Charisma: ${person.charisma}</div>
                    <div class="attribute">Cost: $${person.cost}</div>
                </div>
                <button class="buy-btn" onclick="buyPerson(${person.id})">Buy</button>
            ;
            shopListEl.appendChild(personDiv);
        });
    }

    // Render Workers
    function renderWorkers() {
        workersListEl.innerHTML = '';
        gameState.workers.forEach(worker => {
            const workerDiv = document.createElement('div');
            workerDiv.className = 'person';
            workerDiv.innerHTML = 
                <div>
                    <strong>${worker.name} (Level ${worker.level})</strong>
                    <div class="attribute">Strength: ${worker.strength}, Intelligence: ${worker.intelligence}, Charisma: ${worker.charisma}</div>
                    <div class="attribute">Health: ${worker.health}%, Mood: ${worker.mood}%</div>
                </div>
                <div>
                    <select id="task-${worker.id}">
                        <option value="">Assign Task</option>
                        <option value="Work">Work</option>
                        <option value="Clean">Clean</option>
                        <option value="Manage">Manage</option>
                    </select>
                    <button class="assign-btn" onclick="assignTask(${worker.id})">Assign</button>
                    <button class="promote-btn" onclick="promoteWorker(${worker.id})">Promote</button>
                    <button class="feed-btn" onclick="feedWorker(${worker.id})">Feed</button>
                    <button class="terminate-btn" onclick="terminateWorker(${worker.id})">Terminate</button>
                </div>
            ;
            workersListEl.appendChild(workerDiv);
        });
    }

    // Update Status
    function updateStatus() {
        fundsEl.textContent = gameState.funds;
        reputationEl.textContent = gameState.reputation;
    }

    // Buy Person
    function buyPerson(id) {
        const person = gameState.shopPeople.find(p => p.id === id);
        if (gameState.funds >= person.cost) {
            gameState.funds -= person.cost;
            const newWorker = { ...person, id: workerIdCounter++, level: 1, health: 100, mood: 100 };
            gameState.workers.push(newWorker);
            updateStatus();
            renderWorkers();
        } else {
            alert('Not enough funds to buy this person.');
        }
    }

    // Assign Task
    function assignTask(id) {
        const worker = gameState.workers.find(w => w.id === id);
        const taskSelect = document.getElementById(task-${id});
        const task = taskSelect.value;
        if (!task) {
            alert('Please select a task to assign.');
            return;
        }

        // Simple task effects
        switch(task) {
            case 'Work':
                gameState.funds += worker.strength * 10;
                worker.mood -= 5;
                break;
            case 'Clean':
                gameState.funds += worker.strength * 5;
                worker.mood -= 3;
                break;
            case 'Manage':
                gameState.funds += worker.intelligence * 15;
                worker.mood -= 7;
                break;
            default:
                break;
        }

        // Ensure mood and health are within bounds
        if (worker.mood < 0) worker.mood = 0;
        if (worker.health < 0) worker.health = 0;

        updateStatus();
        renderWorkers();
    }

    // Promote Worker
    function promoteWorker(id) {
        const worker = gameState.workers.find(w => w.id === id);
        const promotionCost = 100 * worker.level;
        if (gameState.funds >= promotionCost) {
            gameState.funds -= promotionCost;
            worker.level += 1;
            worker.strength += 1;
            worker.intelligence += 1;
            worker.charisma += 1;
            gameState.reputation += 5;
            updateStatus();
            renderWorkers();
        } else {
            alert('Not enough funds to promote this worker.');
        }
    }

    // Feed Worker
    function feedWorker(id) {
        const worker = gameState.workers.find(w => w.id === id);
        const feedCost = 20;
        if (gameState.funds >= feedCost) {
            gameState.funds -= feedCost;
            worker.health += 10;
            worker.mood += 10;
            if (worker.health > 100) worker.health = 100;
            if (worker.mood > 100) worker.mood = 100;
            updateStatus();
            renderWorkers();
        } else {
            alert('Not enough funds to feed this worker.');
        }
    }

    // Terminate Worker
    function terminateWorker(id) {
        if (!confirm('Are you sure you want to terminate this worker?')) return;
        const workerIndex = gameState.workers.findIndex(w => w.id === id);
        if (workerIndex !== -1) {
            gameState.workers.splice(workerIndex, 1);
            gameState.reputation -= 10;
            updateStatus();
            renderWorkers();
        }
    }

    // Initialize Game
    function init() {
        renderShop();
        renderWorkers();
        updateStatus();
    }

    // Run Initialization
    init();

    // Additional Features (e.g., periodic mood/health decrease) can be added here
</script>

</body>
</html>

This. Add make it look all pretty pretty and look very modern, and add animations. Also, change the worker to Ezra, Radek, West_Z, Arthur and Jeremy. Also, make their triats and stats be random. Also, it doesn't cost money to put them to work and clean and etc. Also, make it so it has a progress bar on the task they are doing. And it doesn't cost money to promote them. Also, make me be able to name my farm and I have a level. Also, make it more fun.

But this.

Don't say continue generating.