sillytavern-rts-mode/rts-ui.html

<div id="rts-main-container" class="wide100p height100p">
    <!-- RTS Header -->
    <div id="rts-header" class="fa-solid fa-grip drag-grabber"></div>

    <!-- Main RTS Game Area -->
    <div id="rts-game-area" class="flex-container wide100p height100p">
        <!-- Left Panel: Zoo Status -->
        <div id="rts-left-panel" class="rts-panel flex-container flexFlowColumn">
            <div class="rts-panel-header">
                <h3>Escape Status</h3>
            </div>

            <!-- Overall Status Section -->
            <div class="rts-section">
                <h4 class="rts-section-title">Overall Status</h4>
                <div id="rts-zoo-status" class="rts-zoo-status">
                    <div class="rts-status-item">
                        <i class="fa-solid fa-exclamation-triangle" style="color: #dc2626;"></i>
                        <span>Alert Level: <span id="rts-alert-level"></span></span>
                    </div>
                    <div class="rts-status-item">
                        <i class="fa-solid fa-users"></i>
                        <span>Survivors: <span id="rts-survivors"></span></span>
                    </div>
                    <div class="rts-status-item">
                        <i class="fa-solid fa-skull" style="color: #dc2626;"></i>
                        <span>Casualties: <span id="rts-casualties"></span></span>
                    </div>
                    <div class="rts-status-item">
                        <i class="fa-solid fa-door-open" style="color: #ea580c;"></i>
                        <span>Main Gate: <span id="rts-breached"></span></span>
                    </div>
                </div>
            </div>

            <!-- Escaped Animals Section -->
            <div class="rts-section">
                <h4 class="rts-section-title">Escaped Animals</h4>
                <div id="rts-escaped-animals" class="rts-animals-list scrollY"></div>
            </div>

            <!-- Active Incidents Section -->
            <div class="rts-section">
                <h4 class="rts-section-title">Active Incidents</h4>
                <div id="rts-active-incidents" class="rts-incidents-list scrollY"></div>
            </div>

            <!-- People Status Section -->
            <div class="rts-section">
                <h4 class="rts-section-title">Personnel Status</h4>
                <div id="rts-people-status" class="rts-people-list scrollY"></div>
            </div>
        </div>

        <!-- Center: Zoo Map -->
        <div id="rts-map-container" class="flex1 flex-container flexFlowColumn">
            <div class="rts-map-header">
                <h3>Zoo Escape Map</h3>
                <div class="rts-map-controls">
                    <button id="rts-zoom-in" class="menu_button menu_button_icon" title="Zoom In"><i class="fa-solid fa-magnifying-glass-plus"></i></button>
                    <button id="rts-zoom-out" class="menu_button menu_button_icon" title="Zoom Out"><i class="fa-solid fa-magnifying-glass-minus"></i></button>
                    <button id="rts-center-map" class="menu_button menu_button_icon" title="Center Map"><i class="fa-solid fa-crosshairs"></i></button>
                </div>
            </div>
            <div id="rts-map-wrapper" class="flex1 rts-map-wrapper">
                <canvas id="rts-game-map"></canvas>
                <div id="rts-map-overlay"></div>
            </div>
        </div>

        <!-- Right Panel: Actions and Event Log -->
        <div id="rts-right-panel" class="rts-panel flex-container flexFlowColumn">
            <div class="rts-panel-header">
                <h3>Action Center</h3>
            </div>

            <!-- Quick Actions -->
            <div class="rts-section">
                <h4 class="rts-section-title">Quick Actions</h4>
                <div class="rts-quick-actions">
                    <button id="rts-observe-btn" class="menu_button"><i class="fa-solid fa-eye"></i> Observe</button>
                    <button id="rts-move-btn" class="menu_button"><i class="fa-solid fa-running"></i> Move</button>
                    <button id="rts-hide-btn" class="menu_button"><i class="fa-solid fa-user-ninja"></i> Hide</button>
                    <button id="rts-interact-btn" class="menu_button"><i class="fa-solid fa-hand-paper"></i> Interact</button>
                </div>
            </div>

            <!-- Action Input -->
            <div class="rts-section flex1">
                <h4 class="rts-section-title">Action Input</h4>
                <div class="rts-command-input-area">
                    <textarea id="rts-command-input" placeholder="Describe your action..." class="text_pole textarea_compact" rows="3"></textarea>
                    <div class="rts-command-controls">
                        <button id="rts-execute-btn" class="menu_button menu_button_bold"><i class="fa-solid fa-play"></i> Take Action</button>
                        <button id="rts-clear-btn" class.="menu_button menu_button_icon" title="Clear Input"><i class="fa-solid fa-eraser"></i></button>
                    </div>
                </div>
            </div>

            <!-- Event Log -->
            <div class="rts-section flex1">
                <h4 class="rts-section-title">Event Log</h4>
                <div id="rts-game-log" class="rts-game-log scrollY"></div>
            </div>
        </div>
    </div>
</div>