RPG-RougeLiteBattler/Assets/UI/TownShopUI.uxml

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <ui:VisualElement name="shop-container" style="position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; display: none;">
        <ui:VisualElement name="shop-window" style="width: 800px; height: 600px; background-color: rgb(240, 220, 180); border-left-color: rgb(139, 69, 19); border-right-color: rgb(139, 69, 19); border-top-color: rgb(139, 69, 19); border-bottom-color: rgb(139, 69, 19); border-left-width: 3px; border-right-width: 3px; border-top-width: 3px; border-bottom-width: 3px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px;">
            
            <!-- Shop Header -->
            <ui:VisualElement name="shop-header" style="flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 15px; height: 40px;">
                <ui:VisualElement style="flex-direction: column;">
                    <ui:Label name="shop-name" text="General Store" style="font-size: 24px; color: rgb(139, 69, 19); -unity-font-style: bold;" />
                    <ui:Label name="shopkeeper-name" text="Shopkeeper: Merchant" style="font-size: 14px; color: rgb(80, 40, 10); font-style: italic;" />
                </ui:VisualElement>
                <ui:Button name="close-button" text="✕" style="width: 30px; height: 30px; background-color: rgb(200, 50, 50); color: rgb(255, 255, 255); border-width: 0; border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; font-size: 16px; -unity-font-style: bold;" />
            </ui:VisualElement>

            <!-- Customer Panel -->
            <ui:VisualElement name="customer-panel" style="flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 15px; background-color: rgb(220, 200, 160); padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px;">
                <ui:DropdownField name="customer-dropdown" label="Customer:" style="flex-grow: 1; min-width: 200px; max-width: 400px;" />
                <ui:Label name="money-label" text="Money: 100g 50s 25c" style="color: rgb(0, 120, 0); -unity-font-style: bold; white-space: nowrap;" />
            </ui:VisualElement>

            <!-- Tab Container -->
            <ui:VisualElement name="tab-container" style="flex-direction: row; margin-bottom: 15px; height: 35px;">
                <ui:Button name="buy-tab" text="Buy" class="active-tab" style="flex-grow: 1; margin-right: 5px; background-color: rgb(200, 180, 140); border-width: 1px; border-color: rgb(139, 69, 19); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;" />
                <ui:Button name="sell-tab" text="Sell" style="flex-grow: 1; margin-left: 5px; background-color: rgb(180, 160, 120); border-width: 1px; border-color: rgb(139, 69, 19); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;" />
            </ui:VisualElement>

            <!-- Filters -->
            <ui:VisualElement name="filters" style="flex-direction: row; margin-bottom: 15px; align-items: center; min-height: 40px;">
                <ui:TextField name="search-field" label="Search:" placeholder-text="Enter item name..." style="flex-grow: 1; margin-right: 10px; min-width: 200px;" />
                <ui:DropdownField name="category-filter" label="Category:" style="min-width: 150px; max-width: 200px;" />
            </ui:VisualElement>

            <!-- Item List -->
            <ui:ScrollView name="item-list" style="flex-grow: 1; min-height: 200px; background-color: rgb(255, 255, 255); border-width: 1px; border-color: rgb(139, 69, 19); border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px;">
                <ui:Label text="Items will appear here..." style="color: rgb(150, 150, 150); font-style: italic; -unity-text-align: middle-center; margin-top: 50px;" />
            </ui:ScrollView>
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>