# UI Guide ### Main Interface The warehouse UI features a modern iPad-style interface with intuitive navigation and clean design. The interface is organized into several main sections for easy warehouse management. ### 📱 Interface Layout The main interface is structured with a sidebar navigation and main content area: ``` ┌─────────────────────────────────────┐ │ WAREHOUSE MENU │ ├─────────────────────────────────────┤ │ [Buy] [Storage] [Sharing] [Shared] │ ├─────────────────────────────────────┤ │ │ │ MY WAREHOUSES: │ │ â€ĸ Warehouse #1 (Owner) │ │ └─ Manage Sharing │ │ └─ Upgrade Storage │ │ └─ Sell Warehouse │ │ │ │ SHARED WAREHOUSES: │ │ â€ĸ Warehouse #3 (Shared by Player X) │ │ └─ Access Warehouse │ │ │ └─────────────────────────────────────┘ ``` ### đŸĒ Buy Tab The Buy tab is where new players can purchase their first warehouse. #### Buy Tab Features **💰 Pricing Information** Displays warehouse price, sell price, and slot pricing information. **🏠 Warehouse Details** Shows warehouse features, storage capacity, and included amenities. **🛒 Purchase Button** One-click purchase with confirmation dialog for safety. **ℹī¸ Help Information** Guidance for new users on how to use the warehouse system. **📌 Note:** The Buy tab is only visible to players who don't own a warehouse. Once you purchase a warehouse, this tab is replaced with the Storage tab. ### đŸ“Ļ Storage Tab The Storage tab is the main management interface for warehouse owners. #### Storage Tab Features **📊 Storage Grid** Visual representation of your storage layout with available and purchased slots. **💰 Slot Management** Purchase additional storage slots and view pricing information. **🏠 Warehouse Actions** Access warehouse, manage sharing, and sell warehouse options. **📋 Storage Contents** View detailed information about items stored in each crate. #### Storage Grid Layout ``` ┌─────────────────────────────────────┐ │ STORAGE GRID │ ├─────────────────────────────────────┤ │ [Crate 1] [Crate 2] [Crate 3] │ │ [Crate 4] [Crate 5] [Crate 6] │ │ │ │ Available Slots: 3/6 │ │ Next Slot Price: $10,000 │ │ [Buy Storage Slots] │ └─────────────────────────────────────┘ ``` ### 🤝 Sharing Tab The Sharing tab allows warehouse owners to share access with other players. #### Sharing Tab Features **đŸ‘Ĩ Nearby Players** Automatically detects and displays players within 50 meters. **🔍 Player Selection** Easy selection interface for choosing players to share with. **📤 Share Actions** One-click sharing with default settings for quick sharing. **👤 User Management** View and manage all players with access to your warehouse. #### Sharing Interface Layout ``` ┌─────────────────────────────────────┐ │ SHARING MENU │ ├─────────────────────────────────────┤ │ NEARBY PLAYERS: │ │ â€ĸ Player Name (50m away) │ │ [Select] [Share Warehouse] │ │ │ │ SHARED USERS: │ │ â€ĸ Player Name (Shared) │ │ [Edit] [Revoke Access] │ └─────────────────────────────────────┘ ``` ### 🔑 Shared Access Tab The Shared Access tab shows warehouses that have been shared with you. #### Shared Access Features **🏠 Warehouse List** Displays all warehouses shared with you by other players. **👤 Owner Information** Shows who shared the warehouse and when access was granted. **đŸšĒ Quick Access** One-click access to shared warehouses for easy entry. **📊 Access Status** Clear indicators showing your access level and status. ### 📱 Responsive Design The interface is designed to work on all screen sizes with responsive layout adjustments. #### Design Features * **iPad-Style Layout:** Modern, clean design inspired by tablet interfaces * **Responsive Grid:** Adapts to different screen sizes automatically * **Smooth Animations:** Subtle transitions and hover effects for better UX * **Touch-Friendly:** Large buttons and touch targets for easy interaction **💡 Design Philosophy:** The interface prioritizes ease of use and visual clarity, making warehouse management intuitive for all players regardless of their technical experience. ### 🎨 Visual Elements The interface uses various visual elements to enhance usability and provide clear feedback. #### Visual Indicators * **Status Icons:** Clear icons for different actions and states * **Color Coding:** Consistent color scheme for different types of information * **Progress Indicators:** Visual feedback for loading and processing states * **Hover Effects:** Interactive feedback when hovering over clickable elements #### Typography and Layout * **Clear Hierarchy:** Different font sizes and weights for information hierarchy * **Readable Fonts:** Clean, modern fonts optimized for readability * **Consistent Spacing:** Uniform spacing and padding throughout the interface * **Grid System:** Organized layout using a consistent grid system ### 🔔 Notification System The interface includes a built-in notification system for important actions and status updates. #### Notification Types **✅ Success Notifications** Confirmation messages for successful actions like purchasing slots or sharing warehouses. **❌ Error Notifications** Error messages for failed actions with helpful guidance on how to resolve issues. **ℹī¸ Info Notifications** Informational messages about system status, updates, or helpful tips. **⚠ī¸ Warning Notifications** Warning messages for potentially destructive actions like selling warehouses. ### đŸŽ¯ Navigation Tips Best practices for navigating the warehouse interface effectively: #### Interface Navigation * **Use Tab Navigation:** Switch between tabs to access different features * **Follow the Flow:** Start with Buy tab, then use Storage tab for management * **Check Notifications:** Pay attention to notification messages for important updates * **Use Visual Cues:** Look for visual indicators to understand current state #### Efficiency Tips * **F6 Shortcut:** Use F6 key to quickly open the warehouse interface * **Quick Actions:** Use one-click actions for common tasks like sharing * **Visual Grid:** Use the storage grid to quickly see available slots * **Status Overview:** Check the main interface for a quick overview of your warehouse status ### 🔧 Troubleshooting UI Issues Common UI issues and how to resolve them: #### Common Issues * **Interface Not Opening:** Check that F6 key is working and no other interface is open * **Missing Tabs:** Ensure you have the appropriate permissions for the interface elements * **Slow Loading:** Check your internet connection and server performance * **Visual Glitches:** Try closing and reopening the interface **🛠ī¸ Technical Support:** If you encounter persistent UI issues, check the Troubleshooting section for more detailed solutions and contact information. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://sergeis-scripts.gitbook.io/sergeis-scripts-docs/sergeis-warehouse/ui-guide.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.