Vorlage

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<div style="border: 2px solid #4CAF50; padding: 20px; background-color: #f9f9f9; border-radius: 10px; font-family: 'Roboto', sans-serif;">
    <h2 style="color: #4CAF50; text-align: center;">Quest Tracker</h2>
    <table style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
        <thead>
            <tr style="background-color: #4CAF50; color: white;">
                <th style="padding: 10px; border: 1px solid #ddd;">Quest Name</th>
                <th style="padding: 10px; border: 1px solid #ddd;">Description</th>
                <th style="padding: 10px; border: 1px solid #ddd;">Status</th>
                <th style="padding: 10px; border: 1px solid #ddd;">Assigned To</th>
                <th style="padding: 10px; border: 1px solid #ddd;">Notes</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="padding: 10px; border: 1px solid #ddd;">Retrieve the Ancient Artifact</td>
                <td style="padding: 10px; border: 1px solid #ddd;">Find and bring back the ancient artifact from the ruins.</td>
                <td style="padding: 10px; border: 1px solid #ddd;">In Progress</td>
                <td style="padding: 10px; border: 1px solid #ddd;">Elara</td>
                <td style="padding: 10px; border: 1px solid #ddd;">Need to find the map first.</td>
            </tr>
            <!-- Add more quests here -->
        </tbody>
    </table>
    <h3 style="color: #4CAF50;">Add a New Quest</h3>
    <form>
        <label for="quest-name" style="display: block; margin-bottom: 5px;">Quest Name:</label>
        <input type="text" id="quest-name" name="quest-name" style="width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px;">
        
        <label for="quest-description" style="display: block; margin-bottom: 5px;">Description:</label>
        <textarea id="quest-description" name="quest-description" style="width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px;"></textarea>
        
        <label for="quest-status" style="display: block; margin-bottom: 5px;">Status:</label>
        <select id="quest-status" name="quest-status" style="width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px;">
            <option value="Not Started">Not Started</option>
            <option value="In Progress">In Progress</option>
            <option value="Completed">Completed</option>
        </select>
        
        <label for="assigned-to" style="display: block; margin-bottom: 5px;">Assigned To:</label>
        <input type="text" id="assigned-to" name="assigned-to" style="width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px;">
        
        <label for="notes" style="display: block; margin-bottom: 5px;">Notes:</label>
        <textarea id="notes" name="notes" style="width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px;"></textarea>
        
        <button type="submit" style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">Add Quest</button>
    </form>
</div>