Nitro V3 Mockup Lab

Mockup HTML standalone dei componenti principali attuali. La resa è pensata per darti una base visiva da modificare rapidamente fuori dal progetto reale.

NitroCard

Base card attuale con header blu, tabs grigie e content chiaro.

Navigator
Hotel
Rooms
+
Contenuto card attuale, usato come base da vari componenti.
Source files: src/common/card/NitroCardView.tsx src/common/card/NitroCardHeaderView.tsx src/common/card/NitroCardContentView.tsx src/common/card/tabs/NitroCardTabsView.tsx src/common/card/tabs/NitroCardTabsItemView.tsx src/css/nitrocard/NitroCardView.css

Purse

Layout attuale con currency, box HC, pulsanti laterali e seasonal sotto.

3601 ◉
5365 ◎
700 ◈
HC
78 g
Stagionale 99 999
Source files: src/components/purse/PurseView.tsx src/components/purse/views/CurrencyView.tsx src/components/purse/views/SeasonalView.tsx src/css/purse/PurseView.css

Toolbar

Barra bassa attuale con area me, icone centrali e blocco friend/message.

Source files: src/components/toolbar/ToolbarView.tsx src/components/toolbar/ToolbarItemView.tsx src/components/toolbar/ToolbarMeView.tsx

Navigator

Finestra navigator attuale con card base, search e footer actions.

Navigator
Saved
Rooms
+
Source files: src/components/navigator/NavigatorView.tsx src/components/navigator/NavigatorView.scss src/css/room/NavigatorRoomSettings.css

Notifications

Bubble attuale con fondo scuro e inner shadow.

Hai ricevuto una nuova notifica. Questo box rappresenta lo stato attuale delle bubble notifications.
Source files: src/components/notification-center/NotificationCenterView.tsx src/css/notification/NotificationCenterView.css

Friends

Barra amici e blocchi friend pill attuali.

Source files: src/components/friends/FriendsView.tsx src/css/friends/FriendsView.css

HotelView

Mockup della scena hotel attuale con sfondo e hotspot.

Source files: src/components/hotel-view/HotelView.tsx src/css/hotelview/HotelView.css