RPG-RougeLiteBattler/Assets/UI/Map/MapWithTravelUI.uxml

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <Style src="project://database/Assets/UI/Map/MapLegend.uss?fileID=7433441132597879392&amp;guid=3d0abc87938a3d14c950a29cd58e78e0&amp;type=3#MapLegend" />
    <Style src="project://database/Assets/UI/Map/TravelUI.uss?fileID=7433441132597879392&amp;guid=1e7ef30c959791b42ae6ef3a6741c9bd&amp;type=3#TravelUI" />
    <ui:VisualElement name="MapLegend" enabled="true" class="legend-container" style="display: flex;">
        <ui:Label text="Map Legend" class="legend-title" />
        <ui:VisualElement class="legend-items">
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box ocean-color" />
                <ui:Label text="Ocean / Large Water Bodies" class="legend-text" />
            </ui:VisualElement>
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box river-color" />
                <ui:Label text="Rivers / Lakes" class="legend-text" />
            </ui:VisualElement>
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box plain-color" />
                <ui:Label text="Plains / Grasslands" class="legend-text" />
            </ui:VisualElement>
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box forest-color" />
                <ui:Label text="Forests" class="legend-text" />
            </ui:VisualElement>
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box mountain-color" />
                <ui:Label text="Mountains" class="legend-text" />
            </ui:VisualElement>
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box town-color" />
                <ui:Label text="Towns / Cities" class="legend-text" />
            </ui:VisualElement>
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box village-color" />
                <ui:Label text="Villages" class="legend-text" />
            </ui:VisualElement>
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box road-color" />
                <ui:Label text="Roads" class="legend-text" />
            </ui:VisualElement>
            <ui:VisualElement class="legend-item">
                <ui:VisualElement class="color-box dock-color" />
                <ui:Label text="Docks / Ports" class="legend-text" />
            </ui:VisualElement>
        </ui:VisualElement>
        <ui:VisualElement class="controls-info">
            <ui:Label text="Controls:" class="controls-title" />
            <ui:Label text="WASD / Arrow Keys: Move Camera" class="controls-text" />
            <ui:Label text="Mouse Wheel: Zoom In/Out" class="controls-text" />
            <ui:Label text="N: Toggle Name Labels" class="controls-text" />
            <ui:Label text="L: Toggle Legend" class="controls-text" />
            <ui:Label text="Mouse Hover: Show Tooltips" class="controls-text" />
        </ui:VisualElement>
    </ui:VisualElement>
    <ui:VisualElement name="TravelContainer" class="travel-container" style="display: flex; visibility: visible; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; background-size: 100% 100%;">
        <ui:VisualElement name="TravelPanel" class="travel-panel" style="background-color: rgb(45, 45, 45); border-color: rgb(80, 80, 80); border-width: 2px; border-radius: 8px; padding: 20px; min-width: 300px; max-width: 400px; min-height: 200px; height: 450px;">
            <ui:VisualElement name="TravelHeader" class="travel-header" style="flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 10px; cursor: move; background-color: rgba(60, 60, 60, 0.8); margin: -20px -20px 10px -20px; padding: 10px 20px; border-top-left-radius: 6px; border-top-right-radius: 6px;">
                <ui:Label text="Travel Planning" class="travel-title" style="margin: 0; flex-grow: 1; color: rgb(220, 220, 220); font-size: 14px; -unity-font-style: bold;" />
                <ui:Button text="×" name="CloseButton" class="close-button" style="width: 24px; height: 24px; margin: 0; padding: 0; background-color: transparent; border-width: 0; color: rgb(200, 200, 200); font-size: 16px; -unity-font-style: bold;" />
            </ui:VisualElement>
            <ui:VisualElement name="TravelInfo" class="travel-info" style="flex-grow: 0; -unity-background-scale-mode: stretch-to-fill; height: 140px; background-size: 100% 100%;">
                <ui:Label text="Distance: -- leagues" name="DistanceLabel" class="info-label" />
                <ui:Label text="Travel Time: -- hours" name="TimeLabel" class="info-label" />
                <ui:Label text="Special Costs: None" name="SpecialCostsLabel" class="info-label special-costs" style="max-height: 64px;" />
            </ui:VisualElement>
            <ui:VisualElement name="WarningSection" class="warning-section">
                <ui:Label text="Insufficient funds for this journey!" name="InsufficientFundsLabel" class="insufficient-funds" style="display: none;" />
            </ui:VisualElement>
            <ui:VisualElement name="RouteOptions" class="route-options" style="height: 160px;">
                <ui:Label text="Route Preferences:" class="section-title" />
                <ui:VisualElement class="toggle-container">
                    <ui:Toggle name="AvoidTunnelsToggle" text="Avoid Tunnels" class="route-toggle" />
                    <ui:Toggle name="AvoidFerriesToggle" text="Avoid Ferries" class="route-toggle" />
                </ui:VisualElement>
                <ui:Button text="Find Alternative Route" name="AlternativeRouteButton" class="travel-button alternative-button" />
            </ui:VisualElement>
            <ui:VisualElement name="ButtonContainer" class="button-container">
                <ui:Button text="Start Journey" name="StartTravelButton" class="travel-button primary-button" />
                <ui:Button text="Cancel" name="CancelTravelButton" class="travel-button secondary-button" />
            </ui:VisualElement>
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>