RPG-RougeLiteBattler/Assets/Resources/UI/MapScene/AdvancedTravelOptions.uxml

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <Style src="project://database/Assets/Resources/UI/MapScene/AdvancedTravelOptions.uss?fileID=7433441132597879392&amp;guid=96a7a9808461ae64c8a0e47d64f8779c&amp;type=3#AdvancedTravelOptions" />
    <ui:VisualElement name="advanced-travel-container" style="position: absolute; top: 100px; left: 300px; width: 500px; height: 400px; background-color: rgba(240, 240, 240, 0.95); border-width: 2px; border-color: rgb(100, 100, 100); padding: 20px;">
        <ui:VisualElement name="header-bar" style="flex-direction: row; margin-bottom: 15px;">
            <ui:Label text="Special Travel Options" name="travel-options-title" style="font-size: 16px; flex-grow: 1;" />
            <ui:Button text="X" name="close-button" style="width: 20px; height: 20px;" />
        </ui:VisualElement>
        <ui:VisualElement name="route-comparison" style="background-color: rgba(200, 200, 200, 0.5); padding: 10px; margin-bottom: 15px;">
            <ui:Label text="Route Comparison" style="font-size: 14px; margin-bottom: 10px;" />
            <ui:VisualElement style="flex-direction: row;">
                <ui:VisualElement style="flex: 1; margin-right: 10px;">
                    <ui:Label text="Standard Route" style="font-size: 12px; margin-bottom: 5px;" />
                    <ui:Label text="Distance: --" name="standard-distance" style="font-size: 11px;" />
                    <ui:Label text="Time: --" name="standard-time" style="font-size: 11px;" />
                    <ui:Label text="Cost: Free" name="standard-cost" style="font-size: 11px;" />
                </ui:VisualElement>
                <ui:VisualElement style="flex: 1; margin-left: 10px;">
                    <ui:Label text="Special Route" style="font-size: 12px; margin-bottom: 5px;" />
                    <ui:Label text="Distance: --" name="special-distance" style="font-size: 11px;" />
                    <ui:Label text="Time: --" name="special-time" style="font-size: 11px;" />
                    <ui:Label text="Cost: --" name="special-cost" style="font-size: 11px;" />
                </ui:VisualElement>
            </ui:VisualElement>
            <ui:Label text="Time Saved: --" name="time-savings" style="font-size: 12px; margin-top: 10px;" />
        </ui:VisualElement>
        <ui:VisualElement name="options-scroll" style="flex-grow: 1; margin-bottom: 15px; background-color: rgba(255, 255, 255, 0.8); padding: 10px;">
            <ui:Label text="Available Options:" style="font-size: 12px; margin-bottom: 8px;" />
            <ui:VisualElement name="options-container" style="flex-direction: column;" />
        </ui:VisualElement>
        <ui:VisualElement name="resource-status" style="background-color: rgba(220, 220, 220, 0.8); padding: 10px; margin-bottom: 15px;">
            <ui:Label text="Current Resources" style="font-size: 12px; margin-bottom: 8px;" />
            <ui:VisualElement style="flex-direction: row;">
                <ui:Label text="Gold: --" name="gold-label" style="font-size: 11px; flex: 1;" />
                <ui:Label text="Torches: --" name="torch-label" style="font-size: 11px; flex: 1;" />
                <ui:Label text="Status: --" name="affordability-label" style="font-size: 11px; flex: 1;" />
            </ui:VisualElement>
        </ui:VisualElement>
        <ui:VisualElement name="button-container" style="flex-direction: row;">
            <ui:Button text="Use Special Route" name="confirm-button" style="flex: 1; margin-right: 5px;" />
            <ui:Button text="Standard Route" name="standard-button" style="flex: 1; margin-left: 5px; margin-right: 5px;" />
            <ui:Button text="Cancel" name="cancel-button" style="margin-left: 5px;" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>