<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CombatSim</title>
    <link rel="stylesheet" type="text/css" media="screen, projection" href="https://horiversum.org/game/pix/skins/default/cnt/message.css">
    <link rel="stylesheet" type="text/css" media="screen, projection" href="https://horiversum.org/game/pix/skins/default/cnt/main.css">
    <link rel="stylesheet" type="text/css" media="screen, projection" href="https://horiversum.org/game/pix/skins/default/cnt/navigation/format.css">

    <style>
        .YellowText {
            color: #ffff00;
        }
    </style>
</head>
<body style="font-family: Verdana; font-size: 12px">


<div class="MessageContainerBodyBox" style="position: absolute; top: 0px; left: 0px">
    <table cellpadding="0" cellspacing="0" border="0" width="608" class="MessageTable">
        <tr>
            <td class="MessageTableHeadCellLeft" align="center">Zeit</td>
            <td class="MessageTableHeadCell" align="center">Absender</td>
            <td class="MessageTableHeadCell" align="center">Subject</td>
            <td class="MessageTableHeadCell" align="center" nowrap="nowrap">Aktionen</td>
        <tr>
            <td class="MessageTableCellLeft" width="90" valign="top" align="center" id="MessageTime">09.12.2024 18:14:11
            </td>
            <td class="MessageTableCellLeft" width="185" valign="top">Raumflotte<br>
                <div style="font: 10px Verdana;"></div>
            </td>
            <td class="MessageTableCell" width="200" valign="top">
                <a class="MessageReportBattle">Kampfbericht</a>
                <br>
                <div style="font: 10px Verdana;">Simulierter Kampf</div>
            </td>
            <td class="MessageTableCellLeft" valign="middle" align="center" width="130" nowrap="nowrap">
            </td>
        </tr>
        <table cellpadding="0" cellspacing="0" border="0" width="608" class="MessageTable">
            <tr>
                <td class="MessageTableCellLeft" width="608">
                    <p class="YellowText"> Simulierter Kampf!<br>Dieser Kampf wurde mit dem Kampfsimulator von Hendrix simuliert.</p>
                    <p>---<br></p>
                    <div id="combatSimDiv">
                    </div>
                </td>
            </tr>
        </table>
    </table>
</div>

<div style="position: relative; left: 630px; top: 10px; display:inline-block">
    <div style="height: fit-content; background-color: #545C6A; display: inline-block; vertical-align: top; padding: 10px;">
        <p style="font-size: 14px; font-weight: bold; text-align: center; margin: 0;">Angreifer</p>
        <div style="text-align: center; margin-top: 20px;">
            <label style="margin-right: 10px;">
                <input type="checkbox" id="kamikazeCheck1">
                Kamikaze-Angriff
            </label>
            <label style="margin-left: 30px;">
                <input type="checkbox" id="sneakCheck1">
                Anschleichen
            </label>
        </div>
        <div id="fleetHolderDiv1"></div>
        <button id="fleetAddButton1" class="SystemGfxButton Green Bold light120" style="padding-bottom: 3px; margin-top: 10px"">Flotte hinzufügen</button>
    </div>
    <div style="height: fit-content; background-color: #545C6A; display: inline-block; vertical-align: top; padding: 10px;">
        <p style="font-size: 14px; font-weight: bold; text-align: center; margin: 0;">Verteidiger</p>
        <div style="text-align: center; margin-top: 20px;">
            <label style="margin-right: 10px;">
                <input type="checkbox" id="kamikazeCheck2">
                Kamikaze-Angriff
            </label>
            <label style="margin-left: 30px;">
                <input type="checkbox" id="sneakCheck2">
                Anschleichen
            </label>
        </div>
        <div id="fleetHolderDiv2"></div>
        <button id="fleetAddButton2" class="SystemGfxButton Green Bold light120" style="padding-bottom: 3px; margin-top: 10px">Flotte hinzufügen</button>
    </div>
</div>

<div>
<!--    <button id="buttonRunSimulation" style="position:absolute; top: 700px; left:600px">-->
<!--        Simulation Starten!-->
<!--    </button>-->
</div>
</body>

<script src="CombatSim.js" type="text/javascript"></script>

</html>