feat: remove Eggymon Landing Page application and its associated design files.
This commit is contained in:
Ho Ngoc Hai
@@ -1,59 +0,0 @@
|
||||
# ═══════════════════════════════════════════════════════════════════════════════
|
||||
# EN: Eggymon Kitchen Landing Page - Multi-stage Docker Build
|
||||
# VI: Eggymon Kitchen Landing Page - Build Docker đa giai đoạn
|
||||
# ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
# ─── Stage 1: Build ──────────────────────────────────────────────────────────
|
||||
FROM mcr.microsoft.com/dotnet/sdk:10.0-alpine AS build
|
||||
WORKDIR /src
|
||||
|
||||
# EN: Copy project files first for better layer caching
|
||||
# VI: Copy file dự án trước để cache layer tốt hơn
|
||||
COPY src/EggymonLandingPage.Shared/EggymonLandingPage.Shared.csproj src/EggymonLandingPage.Shared/
|
||||
COPY src/EggymonLandingPage.Client/EggymonLandingPage.Client.csproj src/EggymonLandingPage.Client/
|
||||
COPY src/EggymonLandingPage.Server/EggymonLandingPage.Server.csproj src/EggymonLandingPage.Server/
|
||||
|
||||
# EN: Restore dependencies
|
||||
# VI: Restore các gói phụ thuộc
|
||||
RUN dotnet restore src/EggymonLandingPage.Server/EggymonLandingPage.Server.csproj
|
||||
|
||||
# EN: Copy all source code
|
||||
# VI: Copy toàn bộ mã nguồn
|
||||
COPY . .
|
||||
|
||||
# EN: Build and Publish
|
||||
# VI: Build và Publish
|
||||
RUN dotnet publish src/EggymonLandingPage.Server/EggymonLandingPage.Server.csproj \
|
||||
-c Release \
|
||||
-o /app/publish \
|
||||
--no-restore
|
||||
|
||||
# ─── Stage 2: Runtime ────────────────────────────────────────────────────────
|
||||
FROM mcr.microsoft.com/dotnet/aspnet:10.0-alpine AS runtime
|
||||
WORKDIR /app
|
||||
|
||||
# EN: Create non-root user for security
|
||||
# VI: Tạo user non-root cho bảo mật
|
||||
RUN addgroup -S appgroup && adduser -S appuser -G appgroup
|
||||
|
||||
# EN: Copy published output
|
||||
# VI: Copy kết quả publish
|
||||
COPY --from=build /app/publish .
|
||||
|
||||
# EN: Set ownership to non-root user
|
||||
# VI: Đặt quyền sở hữu cho user non-root
|
||||
RUN chown -R appuser:appgroup /app
|
||||
|
||||
USER appuser
|
||||
|
||||
# EN: Expose port 8080 (default non-root port)
|
||||
# VI: Expose cổng 8080 (cổng mặc định non-root)
|
||||
EXPOSE 8080
|
||||
ENV ASPNETCORE_URLS=http://+:8080
|
||||
|
||||
# EN: Health check
|
||||
# VI: Kiểm tra sức khỏe
|
||||
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
|
||||
CMD wget --no-verbose --tries=1 --spider http://localhost:8080/health || exit 1
|
||||
|
||||
ENTRYPOINT ["dotnet", "EggymonLandingPage.Server.dll"]
|
||||
@@ -1,7 +0,0 @@
|
||||
<Solution>
|
||||
<Folder Name="/src/">
|
||||
<Project Path="src/EggymonLandingPage.Client/EggymonLandingPage.Client.csproj" />
|
||||
<Project Path="src/EggymonLandingPage.Server/EggymonLandingPage.Server.csproj" />
|
||||
<Project Path="src/EggymonLandingPage.Shared/EggymonLandingPage.Shared.csproj" />
|
||||
</Folder>
|
||||
</Solution>
|
||||
@@ -1,63 +0,0 @@
|
||||
# 🥚 Eggymon Kitchen Landing Page
|
||||
|
||||
> **EN:** Multilingual landing page for Eggymon Kitchen — Built with Blazor WebAssembly + ASP.NET Core BFF
|
||||
> **VI:** Trang landing đa ngôn ngữ cho Eggymon Kitchen — Xây dựng bằng Blazor WebAssembly + ASP.NET Core BFF
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ EggymonLandingPage.Server │
|
||||
│ (ASP.NET Core BFF + YARP Reverse Proxy) │
|
||||
│ ┌──────────────────────────────────────────────────────┐ │
|
||||
│ │ EggymonLandingPage.Client │ │
|
||||
│ │ (Blazor WebAssembly + MudBlazor) │ │
|
||||
│ │ ┌──────────────────────────────────────────┐ │ │
|
||||
│ │ │ EggymonLandingPage.Shared │ │ │
|
||||
│ │ │ (Shared DTOs) │ │ │
|
||||
│ │ └──────────────────────────────────────────┘ │ │
|
||||
│ └──────────────────────────────────────────────────────┘ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Tech Stack
|
||||
|
||||
| Layer | Technology |
|
||||
|-----------|-------------------------------------|
|
||||
| UI | Blazor WebAssembly (.NET 10) |
|
||||
| Components| MudBlazor 8.15 |
|
||||
| Server | ASP.NET Core BFF + YARP |
|
||||
| Styling | CSS Variables (Primitives → Semantics → Components) |
|
||||
| i18n | JSON-based localization (EN/VI) |
|
||||
| Fonts | Fredoka (headings) + Inter (body) |
|
||||
| Container | Docker multi-stage (Alpine) |
|
||||
|
||||
## Getting Started
|
||||
|
||||
```bash
|
||||
# Run in development mode
|
||||
cd src/EggymonLandingPage.Server
|
||||
dotnet run
|
||||
|
||||
# Build production
|
||||
dotnet publish -c Release
|
||||
|
||||
# Docker
|
||||
docker build -t eggymon-landing .
|
||||
docker run -p 8080:8080 eggymon-landing
|
||||
```
|
||||
|
||||
## Routes
|
||||
|
||||
| Route | Description |
|
||||
|----------|---------------------|
|
||||
| `/` | Landing page (EN) |
|
||||
| `/en-US/`| English version |
|
||||
| `/vi-VN/`| Vietnamese version |
|
||||
| `/health`| Health check |
|
||||
|
||||
## Design System
|
||||
|
||||
🎨 **Brand Colors:** Warm Brown + Cream + Egg Yellow
|
||||
🌙 **Dark Mode:** Full light/dark theme support
|
||||
📱 **Responsive:** Mobile-first design with CSS Grid
|
||||
@@ -1,12 +0,0 @@
|
||||
<Router AppAssembly="@typeof(App).Assembly">
|
||||
<Found Context="routeData">
|
||||
<RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
|
||||
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
|
||||
</Found>
|
||||
<NotFound>
|
||||
<PageTitle>Not Found</PageTitle>
|
||||
<LayoutView Layout="@typeof(Layout.MainLayout)">
|
||||
<p role="alert">Sorry, there's nothing at this address.</p>
|
||||
</LayoutView>
|
||||
</NotFound>
|
||||
</Router>
|
||||
@@ -1,66 +0,0 @@
|
||||
@using System.Globalization
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<MudMenu Dense="true" AnchorOrigin="Origin.BottomRight" TransformOrigin="Origin.TopRight" LockScroll="true">
|
||||
<ActivatorContent>
|
||||
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1" Class="mr-2 cursor-pointer">
|
||||
<MudText Typo="Typo.button" Style="font-family: var(--font-heading);">
|
||||
@GetCurrentLabel()
|
||||
</MudText>
|
||||
<MudIcon Icon="@Icons.Material.Rounded.Language" Size="Size.Small" />
|
||||
</MudStack>
|
||||
</ActivatorContent>
|
||||
<ChildContent>
|
||||
<MudMenuItem OnClick="@(() => SwitchLanguage("vi-VN"))">
|
||||
<MudStack Row="true" Spacing="2">
|
||||
<MudText>🇻🇳</MudText>
|
||||
<MudText>Tiếng Việt</MudText>
|
||||
</MudStack>
|
||||
</MudMenuItem>
|
||||
<MudMenuItem OnClick="@(() => SwitchLanguage("en-US"))">
|
||||
<MudStack Row="true" Spacing="2">
|
||||
<MudText>🇺🇸</MudText>
|
||||
<MudText>English</MudText>
|
||||
</MudStack>
|
||||
</MudMenuItem>
|
||||
</ChildContent>
|
||||
</MudMenu>
|
||||
|
||||
@code {
|
||||
private string GetCurrentLabel()
|
||||
{
|
||||
var uri = new Uri(Navigation.Uri);
|
||||
var path = uri.PathAndQuery;
|
||||
|
||||
if (path.StartsWith("/vi", StringComparison.OrdinalIgnoreCase))
|
||||
{
|
||||
return "VI";
|
||||
}
|
||||
return "EN";
|
||||
}
|
||||
|
||||
private void SwitchLanguage(string targetCulture)
|
||||
{
|
||||
var uri = new Uri(Navigation.Uri);
|
||||
var path = uri.PathAndQuery;
|
||||
|
||||
var segments = path.Split('/', StringSplitOptions.RemoveEmptyEntries);
|
||||
|
||||
string newPath;
|
||||
if (segments.Length > 0 && (segments[0].Equals("vi-VN", StringComparison.OrdinalIgnoreCase) ||
|
||||
segments[0].Equals("en-US", StringComparison.OrdinalIgnoreCase) ||
|
||||
segments[0].Equals("vi", StringComparison.OrdinalIgnoreCase) ||
|
||||
segments[0].Equals("en", StringComparison.OrdinalIgnoreCase)))
|
||||
{
|
||||
segments[0] = targetCulture;
|
||||
newPath = "/" + string.Join('/', segments);
|
||||
}
|
||||
else
|
||||
{
|
||||
if (path == "/") path = "";
|
||||
newPath = $"/{targetCulture}{path}";
|
||||
}
|
||||
|
||||
Navigation.NavigateTo(newPath, forceLoad: true);
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net10.0</TargetFramework>
|
||||
<Nullable>enable</Nullable>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
<OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders>
|
||||
<BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.1" />
|
||||
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.1" PrivateAssets="all" />
|
||||
<PackageReference Include="Microsoft.Extensions.Localization" Version="10.0.2" />
|
||||
<PackageReference Include="MudBlazor" Version="8.15.0" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<ProjectReference Include="..\EggymonLandingPage.Shared\EggymonLandingPage.Shared.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
@@ -1,62 +0,0 @@
|
||||
@inherits LayoutComponentBase
|
||||
@inject IStringLocalizer<MainLayout> L
|
||||
|
||||
<MudThemeProvider @bind-IsDarkMode="@_isDarkMode" Theme="_theme" />
|
||||
<MudPopoverProvider />
|
||||
<MudDialogProvider />
|
||||
<MudSnackbarProvider />
|
||||
|
||||
<MudLayout>
|
||||
<MudAppBar Elevation="0" Fixed="true" Color="Color.Transparent">
|
||||
<!-- EN: App Header — Logo + Nav Links + Order Now CTA -->
|
||||
<!-- VI: Header — Logo + Liên kết + Nút Order Now -->
|
||||
<div class="header-logo">
|
||||
<img src="/images/Logo-Eggymon-Kitchen.png" alt="EggyMon Kitchen" />
|
||||
<span class="header-logo-text">EggyMon Kitchen</span>
|
||||
</div>
|
||||
|
||||
<MudSpacer />
|
||||
|
||||
<!-- EN: Navigation Links / VI: Liên kết điều hướng -->
|
||||
<nav class="header-nav">
|
||||
<a href="#menu">@L["Nav_Menu"]</a>
|
||||
<a href="#about">@L["Nav_About"]</a>
|
||||
<a href="#locations">@L["Nav_Locations"]</a>
|
||||
<a href="#contact">@L["Nav_Contact"]</a>
|
||||
</nav>
|
||||
|
||||
<MudSpacer />
|
||||
|
||||
<!-- EN: CTA Area / VI: Khu vực CTA -->
|
||||
<div class="header-cta">
|
||||
<LanguageSwitcher />
|
||||
<a href="#menu" class="btn-order-now">@L["Nav_OrderNow"]</a>
|
||||
</div>
|
||||
</MudAppBar>
|
||||
|
||||
<MudMainContent>
|
||||
@Body
|
||||
</MudMainContent>
|
||||
</MudLayout>
|
||||
|
||||
@code {
|
||||
[Inject] private IJSRuntime JSRuntime { get; set; } = default!;
|
||||
|
||||
private bool _isDarkMode = false;
|
||||
|
||||
private MudTheme _theme = new()
|
||||
{
|
||||
PaletteLight = new PaletteLight()
|
||||
{
|
||||
Primary = "#6B4423",
|
||||
PrimaryContrastText = "#ffffff",
|
||||
AppbarBackground = "#FFFFFF",
|
||||
AppbarText = "#2C2C2C",
|
||||
Background = "#FAF8F4",
|
||||
Surface = "#ffffff",
|
||||
TextPrimary = "#2C2C2C",
|
||||
ActionDefault = "#2C2C2C",
|
||||
LinesDefault = "#eeeeee"
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
using System.Globalization;
|
||||
using System.Net.Http.Json;
|
||||
using Microsoft.Extensions.Localization;
|
||||
|
||||
namespace EggymonLandingPage.Client.Localization;
|
||||
|
||||
/// <summary>
|
||||
/// EN: JSON-based string localizer for Blazor WASM.
|
||||
/// VI: String localizer dựa trên JSON cho Blazor WASM.
|
||||
/// </summary>
|
||||
public class JsonStringLocalizer : IStringLocalizer
|
||||
{
|
||||
private readonly LocalizationCache _cache;
|
||||
private readonly string _resourceName;
|
||||
|
||||
public JsonStringLocalizer(LocalizationCache cache, string resourceName)
|
||||
{
|
||||
_cache = cache;
|
||||
_resourceName = resourceName;
|
||||
}
|
||||
|
||||
public JsonStringLocalizer(LocalizationCache cache)
|
||||
{
|
||||
_cache = cache;
|
||||
_resourceName = "Shared";
|
||||
}
|
||||
|
||||
public LocalizedString this[string name]
|
||||
{
|
||||
get
|
||||
{
|
||||
var value = GetString(name);
|
||||
return new LocalizedString(name, value ?? name, resourceNotFound: value == null);
|
||||
}
|
||||
}
|
||||
|
||||
public LocalizedString this[string name, params object[] arguments]
|
||||
{
|
||||
get
|
||||
{
|
||||
var format = GetString(name);
|
||||
var value = string.Format(format ?? name, arguments);
|
||||
return new LocalizedString(name, value, resourceNotFound: format == null);
|
||||
}
|
||||
}
|
||||
|
||||
public IEnumerable<LocalizedString> GetAllStrings(bool includeParentCultures)
|
||||
{
|
||||
return Enumerable.Empty<LocalizedString>();
|
||||
}
|
||||
|
||||
private string? GetString(string name)
|
||||
{
|
||||
return _cache.GetString(name);
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
using Microsoft.Extensions.Localization;
|
||||
|
||||
namespace EggymonLandingPage.Client.Localization;
|
||||
|
||||
/// <summary>
|
||||
/// EN: Factory for creating JSON string localizers.
|
||||
/// VI: Factory tạo JSON string localizer.
|
||||
/// </summary>
|
||||
public class JsonStringLocalizerFactory : IStringLocalizerFactory
|
||||
{
|
||||
private readonly LocalizationCache _cache;
|
||||
private readonly IServiceProvider _serviceProvider;
|
||||
|
||||
public JsonStringLocalizerFactory(LocalizationCache cache, IServiceProvider serviceProvider)
|
||||
{
|
||||
_cache = cache;
|
||||
_serviceProvider = serviceProvider;
|
||||
}
|
||||
|
||||
public IStringLocalizer Create(Type resourceSource)
|
||||
{
|
||||
return new JsonStringLocalizer(_cache, resourceSource.Name);
|
||||
}
|
||||
|
||||
public IStringLocalizer Create(string baseName, string location)
|
||||
{
|
||||
return new JsonStringLocalizer(_cache, baseName);
|
||||
}
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
using System.Globalization;
|
||||
using System.Net.Http.Json;
|
||||
|
||||
namespace EggymonLandingPage.Client.Localization;
|
||||
|
||||
/// <summary>
|
||||
/// EN: Cache for localization strings loaded from JSON files.
|
||||
/// VI: Cache cho các chuỗi bản địa hóa được tải từ file JSON.
|
||||
/// </summary>
|
||||
public class LocalizationCache
|
||||
{
|
||||
private readonly HttpClient _httpClient;
|
||||
private Dictionary<string, string> _strings = new();
|
||||
private bool _isLoaded;
|
||||
|
||||
public LocalizationCache(HttpClient httpClient)
|
||||
{
|
||||
_httpClient = httpClient;
|
||||
}
|
||||
|
||||
public string? GetString(string key)
|
||||
{
|
||||
if (_strings.TryGetValue(key, out var value))
|
||||
{
|
||||
return value;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
public async Task LoadAsync(CultureInfo culture)
|
||||
{
|
||||
if (_isLoaded) return;
|
||||
|
||||
try
|
||||
{
|
||||
var cultureName = culture.Name;
|
||||
// EN: Map generic culture codes to specific ones
|
||||
// VI: Map mã ngôn ngữ chung sang mã cụ thể
|
||||
if (cultureName == "vi") cultureName = "vi-VN";
|
||||
if (cultureName == "en") cultureName = "en-US";
|
||||
|
||||
var loaded = await _httpClient.GetFromJsonAsync<Dictionary<string, string>>($"/locales/{cultureName}.json?v={DateTime.Now.Ticks}");
|
||||
if (loaded != null)
|
||||
{
|
||||
_strings = loaded;
|
||||
_isLoaded = true;
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Console.WriteLine($"Error loading localization for {culture.Name}: {ex.Message}");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,193 +0,0 @@
|
||||
@page "/"
|
||||
@inject IStringLocalizer<Home> L
|
||||
|
||||
<PageTitle>EggyMon Kitchen - @L["Hero_Headline"]</PageTitle>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════════════
|
||||
1. HERO SECTION — Dark brown bg, side-by-side layout
|
||||
═══════════════════════════════════════════════════════════════════ -->
|
||||
<section class="hero-section">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">@L["Hero_Badge"]</div>
|
||||
<h1 class="hero-headline">@L["Hero_Headline"]</h1>
|
||||
<p class="hero-subline">@L["Hero_Subline"]</p>
|
||||
<div class="hero-cta-row">
|
||||
<a href="#menu" class="hero-btn-primary">@L["Hero_CTA_Primary"]</a>
|
||||
<a href="#testimonials" class="hero-btn-secondary">@L["Hero_CTA_Secondary"]</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-image">
|
||||
<img src="/images/eggymon-kitchen-store.png" alt="EggyMon Kitchen Store" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════════════
|
||||
2. FEATURES SECTION — White bg, 3 cards
|
||||
═══════════════════════════════════════════════════════════════════ -->
|
||||
<section class="features-section">
|
||||
<div class="features-header">
|
||||
<span class="section-tag">@L["Features_Tag"]</span>
|
||||
<h2 class="section-title">@L["Features_Title"]</h2>
|
||||
<p class="section-desc">@L["Features_Desc"]</p>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<!-- EN: Feature 1: Open 24/7 / VI: Mở 24/7 -->
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<MudIcon Icon="@Icons.Material.Rounded.Schedule" Size="Size.Large" />
|
||||
</div>
|
||||
<h3 class="feature-title">@L["Feature1_Title"]</h3>
|
||||
<p class="feature-desc">@L["Feature1_Desc"]</p>
|
||||
</div>
|
||||
|
||||
<!-- EN: Feature 2: Farm Fresh Eggs / VI: Trứng Tươi -->
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<MudIcon Icon="@Icons.Material.Rounded.Spa" Size="Size.Large" />
|
||||
</div>
|
||||
<h3 class="feature-title">@L["Feature2_Title"]</h3>
|
||||
<p class="feature-desc">@L["Feature2_Desc"]</p>
|
||||
</div>
|
||||
|
||||
<!-- EN: Feature 3: Made With Love / VI: Làm Với Tình Yêu -->
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<MudIcon Icon="@Icons.Material.Rounded.Favorite" Size="Size.Large" />
|
||||
</div>
|
||||
<h3 class="feature-title">@L["Feature3_Title"]</h3>
|
||||
<p class="feature-desc">@L["Feature3_Desc"]</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════════════
|
||||
3. MENU SECTION — Dark brown bg, 3 text columns
|
||||
═══════════════════════════════════════════════════════════════════ -->
|
||||
<section class="menu-section" id="menu">
|
||||
<div class="menu-header">
|
||||
<span class="section-tag">@L["Menu_Tag"]</span>
|
||||
<h2 class="section-title-white">@L["Menu_Title"]</h2>
|
||||
<p class="section-desc-white">@L["Menu_Desc"]</p>
|
||||
</div>
|
||||
|
||||
<div class="menu-grid">
|
||||
<!-- EN: Column 1: Main Dishes / VI: Cột 1: Món Chính -->
|
||||
<div class="menu-column">
|
||||
<span class="menu-column-title">@L["Menu_Col1_Title"]</span>
|
||||
<div class="menu-divider-line"></div>
|
||||
<span class="menu-item">@L["Menu_Col1_Item1"]</span>
|
||||
<span class="menu-item">@L["Menu_Col1_Item2"]</span>
|
||||
<span class="menu-item">@L["Menu_Col1_Item3"]</span>
|
||||
<span class="menu-item">@L["Menu_Col1_Item4"]</span>
|
||||
<span class="menu-item">@L["Menu_Col1_Item5"]</span>
|
||||
<span class="menu-item">@L["Menu_Col1_Item6"]</span>
|
||||
</div>
|
||||
|
||||
<div class="menu-column-separator"></div>
|
||||
|
||||
<!-- EN: Column 2: Sides & Snacks / VI: Cột 2: Món Phụ -->
|
||||
<div class="menu-column">
|
||||
<span class="menu-column-title">@L["Menu_Col2_Title"]</span>
|
||||
<div class="menu-divider-line"></div>
|
||||
<span class="menu-item">@L["Menu_Col2_Item1"]</span>
|
||||
<span class="menu-item">@L["Menu_Col2_Item2"]</span>
|
||||
<span class="menu-item">@L["Menu_Col2_Item3"]</span>
|
||||
<span class="menu-item">@L["Menu_Col2_Item4"]</span>
|
||||
<span class="menu-item">@L["Menu_Col2_Item5"]</span>
|
||||
<span class="menu-item">@L["Menu_Col2_Item6"]</span>
|
||||
<span class="menu-item">@L["Menu_Col2_Item7"]</span>
|
||||
</div>
|
||||
|
||||
<div class="menu-column-separator"></div>
|
||||
|
||||
<!-- EN: Column 3: Specials / VI: Cột 3: Đặc Biệt -->
|
||||
<div class="menu-column">
|
||||
<span class="menu-column-title">@L["Menu_Col3_Title"]</span>
|
||||
<div class="menu-divider-line"></div>
|
||||
<span class="menu-item">@L["Menu_Col3_Item1"]</span>
|
||||
<span class="menu-item">@L["Menu_Col3_Item2"]</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════════════
|
||||
4. TESTIMONIALS SECTION — Cream bg, 3 quote cards
|
||||
═══════════════════════════════════════════════════════════════════ -->
|
||||
<section class="testimonials-section" id="testimonials">
|
||||
<div class="testimonials-header">
|
||||
<span class="section-tag">@L["Testimonials_Tag"]</span>
|
||||
<h2 class="section-title">@L["Testimonials_Title"]</h2>
|
||||
</div>
|
||||
|
||||
<div class="testimonials-grid">
|
||||
<div class="testimonial-card">
|
||||
<p class="testimonial-quote">"@L["Testimonial1_Quote"]"</p>
|
||||
</div>
|
||||
<div class="testimonial-card">
|
||||
<p class="testimonial-quote">"@L["Testimonial2_Quote"]"</p>
|
||||
</div>
|
||||
<div class="testimonial-card">
|
||||
<p class="testimonial-quote">"@L["Testimonial3_Quote"]"</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════════════
|
||||
5. CTA SECTION — Orange bg, 2 buttons
|
||||
═══════════════════════════════════════════════════════════════════ -->
|
||||
<section class="cta-section">
|
||||
<h2 class="cta-title">@L["CTA_Title"]</h2>
|
||||
<p class="cta-subtitle">@L["CTA_Subtitle"]</p>
|
||||
<div class="cta-btn-row">
|
||||
<button class="cta-btn-primary">@L["CTA_Btn_Primary"]</button>
|
||||
<button class="cta-btn-secondary">@L["CTA_Btn_Secondary"]</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════════════
|
||||
6. FOOTER — Dark bg, logo + 3 link columns + divider + legal
|
||||
═══════════════════════════════════════════════════════════════════ -->
|
||||
<footer class="footer" id="contact">
|
||||
<div class="footer-top">
|
||||
<div class="footer-brand">
|
||||
<div class="footer-logo-row">
|
||||
<img src="/images/Logo-Eggymon-Kitchen.png" alt="EggyMon Kitchen" />
|
||||
<span class="footer-logo-text">EggyMon Kitchen</span>
|
||||
</div>
|
||||
<p class="footer-tagline">@L["Footer_Tagline"]</p>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<!-- EN: Column 1: Company / VI: Cột 1: Công ty -->
|
||||
<div class="footer-col">
|
||||
<span class="footer-col-title">@L["Footer_Col1_Title"]</span>
|
||||
<a href="#about">@L["Footer_Col1_Link1"]</a>
|
||||
<a href="#menu">@L["Footer_Col1_Link2"]</a>
|
||||
<a href="#testimonials">@L["Footer_Col1_Link3"]</a>
|
||||
<a href="#contact">@L["Footer_Col1_Link4"]</a>
|
||||
</div>
|
||||
<!-- EN: Column 2: Support / VI: Cột 2: Hỗ trợ -->
|
||||
<div class="footer-col">
|
||||
<span class="footer-col-title">@L["Footer_Col2_Title"]</span>
|
||||
<a href="#">@L["Footer_Col2_Link1"]</a>
|
||||
<a href="#">@L["Footer_Col2_Link2"]</a>
|
||||
<a href="#">@L["Footer_Col2_Link3"]</a>
|
||||
</div>
|
||||
<!-- EN: Column 3: Connect / VI: Cột 3: Kết nối -->
|
||||
<div class="footer-col">
|
||||
<span class="footer-col-title">@L["Footer_Col3_Title"]</span>
|
||||
<a href="#">@L["Footer_Col3_Link1"]</a>
|
||||
<a href="#">@L["Footer_Col3_Link2"]</a>
|
||||
<a href="#">@L["Footer_Col3_Link3"]</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-divider"></div>
|
||||
<div class="footer-bottom">
|
||||
<span class="footer-copyright">@L["Footer_Copyright"]</span>
|
||||
<div class="footer-legal">
|
||||
<a href="#">@L["Footer_Privacy"]</a>
|
||||
<a href="#">@L["Footer_Terms"]</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -1,54 +0,0 @@
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using MudBlazor.Services;
|
||||
using EggymonLandingPage.Client;
|
||||
using EggymonLandingPage.Client.Localization;
|
||||
using Microsoft.Extensions.Localization;
|
||||
using System.Globalization;
|
||||
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
// EN: Add HttpClient for API calls
|
||||
// VI: Thêm HttpClient cho các cuộc gọi API
|
||||
builder.Services.AddSingleton(sp => new HttpClient { BaseAddress = new Uri(new Uri(builder.HostEnvironment.BaseAddress).GetLeftPart(UriPartial.Authority)) });
|
||||
|
||||
// EN: Add MudBlazor services
|
||||
// VI: Thêm các services của MudBlazor
|
||||
builder.Services.AddMudServices();
|
||||
|
||||
// EN: Add Localization services
|
||||
// VI: Thêm services đa ngôn ngữ
|
||||
builder.Services.AddLocalization();
|
||||
builder.Services.AddSingleton<LocalizationCache>();
|
||||
builder.Services.AddSingleton<IStringLocalizerFactory, JsonStringLocalizerFactory>();
|
||||
|
||||
// EN: Build the host
|
||||
// VI: Build host
|
||||
var host = builder.Build();
|
||||
|
||||
// EN: Initialize Localization Cache
|
||||
// VI: Khởi tạo Localization Cache
|
||||
var cache = host.Services.GetRequiredService<LocalizationCache>();
|
||||
|
||||
// EN: Detect culture from BaseAddress (set by <base href> from Server)
|
||||
// VI: Phát hiện ngôn ngữ từ BaseAddress (được set bởi <base href> từ Server)
|
||||
var baseAddress = builder.HostEnvironment.BaseAddress;
|
||||
var culture = new CultureInfo("en-US"); // Default
|
||||
|
||||
if (baseAddress.Contains("/vi-VN/", StringComparison.OrdinalIgnoreCase))
|
||||
{
|
||||
culture = new CultureInfo("vi-VN");
|
||||
}
|
||||
else if (baseAddress.Contains("/vi/", StringComparison.OrdinalIgnoreCase))
|
||||
{
|
||||
culture = new CultureInfo("vi-VN");
|
||||
}
|
||||
|
||||
CultureInfo.DefaultThreadCurrentCulture = culture;
|
||||
CultureInfo.DefaultThreadCurrentUICulture = culture;
|
||||
|
||||
await cache.LoadAsync(culture);
|
||||
|
||||
await host.RunAsync();
|
||||
@@ -1,14 +0,0 @@
|
||||
@using System.Net.Http
|
||||
@using System.Net.Http.Json
|
||||
@using Microsoft.AspNetCore.Components.Forms
|
||||
@using Microsoft.AspNetCore.Components.Routing
|
||||
@using Microsoft.AspNetCore.Components.Web
|
||||
@using Microsoft.AspNetCore.Components.Web.Virtualization
|
||||
@using Microsoft.AspNetCore.Components.WebAssembly.Http
|
||||
@using Microsoft.JSInterop
|
||||
@using MudBlazor
|
||||
@using EggymonLandingPage.Client
|
||||
@using EggymonLandingPage.Client.Layout
|
||||
@using EggymonLandingPage.Shared
|
||||
@using EggymonLandingPage.Client.Components
|
||||
@using Microsoft.Extensions.Localization
|
||||
@@ -1,766 +0,0 @@
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
EGGYMON KITCHEN — Design System (matching Pencil design)
|
||||
Font: Poppins | Colors: #6B4423 (brown), #FF6B35 (orange),
|
||||
#FAF8F4 (cream), #2C2C2C (dark), #FFFFFF (white)
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ─── Reset & Base ─── */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* EN: Brand Colors / VI: Màu thương hiệu */
|
||||
--brown: #6B4423;
|
||||
--orange: #FF6B35;
|
||||
--orange-light: #FF6B3520;
|
||||
--cream: #FAF8F4;
|
||||
--dark: #2C2C2C;
|
||||
--gray: #6B6B6B;
|
||||
--gray-light: #9A9A9A;
|
||||
--white: #FFFFFF;
|
||||
--white-dim: #FFFFFF99;
|
||||
--white-soft: #FFFFFFDD;
|
||||
--white-glass: #FFFFFF10;
|
||||
--white-glass2: #FFFFFF20;
|
||||
--divider-dark: #4A4A4A;
|
||||
|
||||
/* EN: Typography / VI: Kiểu chữ */
|
||||
--font: 'Poppins', sans-serif;
|
||||
|
||||
/* EN: Spacing / VI: Khoảng cách */
|
||||
--radius-sm: 20px;
|
||||
--radius-md: 24px;
|
||||
--radius-lg: 30px;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: var(--font);
|
||||
color: var(--dark);
|
||||
background: var(--cream);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ─── MudBlazor Overrides ─── */
|
||||
.mud-appbar {
|
||||
background: var(--white) !important;
|
||||
box-shadow: none !important;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.mud-toolbar {
|
||||
min-height: 80px !important;
|
||||
padding: 0 80px !important;
|
||||
}
|
||||
|
||||
.mud-main-content {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
HEADER — Desktop nav with links + Order Now CTA
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
.header-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.header-logo img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.header-logo-text {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--brown);
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.header-nav a {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--dark);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.header-nav a:hover {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.header-cta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.btn-order-now {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 14px 28px;
|
||||
background: var(--orange);
|
||||
color: var(--white);
|
||||
font-family: var(--font);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.btn-order-now:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(255, 107, 53, 0.3);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
HERO — Dark brown bg, side-by-side layout
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
.hero-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 60px;
|
||||
padding: 80px;
|
||||
background: var(--brown);
|
||||
min-height: 680px;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
max-width: 600px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-self: flex-start;
|
||||
padding: 8px 16px;
|
||||
background: var(--orange);
|
||||
color: var(--white);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.hero-headline {
|
||||
font-size: 64px;
|
||||
font-weight: 700;
|
||||
color: var(--white);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.hero-subline {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: var(--white-dim);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-cta-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.hero-btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 18px 36px;
|
||||
background: var(--orange);
|
||||
color: var(--white);
|
||||
font-family: var(--font);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.hero-btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.hero-btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 18px 36px;
|
||||
background: transparent;
|
||||
color: var(--white);
|
||||
font-family: var(--font);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border: 2px solid var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.hero-btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
flex: 1;
|
||||
min-width: 400px;
|
||||
height: 520px;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
SECTIONS — Common patterns
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
.section-tag {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--orange);
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: var(--dark);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.section-title-white {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: var(--white);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.section-desc-white {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: var(--white-dim);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
FEATURES — 3 cards, white bg
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
.features-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 48px;
|
||||
padding: 80px 120px;
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.features-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 32px;
|
||||
background: var(--cream);
|
||||
border-radius: var(--radius-md);
|
||||
width: 320px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: var(--orange-light);
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
.feature-icon .mud-icon-root {
|
||||
color: var(--orange) !important;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: var(--gray);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
MENU — Dark brown bg, 3 text columns with dividers
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
.menu-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 48px;
|
||||
padding: 80px 120px;
|
||||
background: var(--brown);
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu-grid {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 32px 40px;
|
||||
background: var(--white-glass);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.menu-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.menu-column-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--orange);
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.menu-divider-line {
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: var(--orange);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--white-soft);
|
||||
}
|
||||
|
||||
.menu-column-separator {
|
||||
width: 1px;
|
||||
background: var(--white-glass2);
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
TESTIMONIALS — Cream bg, 3 quote cards (no stars, no avatars)
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
.testimonials-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 48px;
|
||||
padding: 80px 120px;
|
||||
background: var(--cream);
|
||||
}
|
||||
|
||||
.testimonials-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.testimonials-grid {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.testimonial-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 32px;
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-md);
|
||||
width: 380px;
|
||||
}
|
||||
|
||||
.testimonial-quote {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: var(--dark);
|
||||
line-height: 1.7;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
CTA — Orange bg, 2 buttons
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
.cta-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
padding: 80px 120px;
|
||||
background: var(--orange);
|
||||
min-height: 400px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.cta-subtitle {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: var(--white-dim);
|
||||
}
|
||||
|
||||
.cta-btn-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.cta-btn-primary {
|
||||
padding: 18px 40px;
|
||||
background: var(--white);
|
||||
color: var(--orange);
|
||||
font-family: var(--font);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.cta-btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.cta-btn-secondary {
|
||||
padding: 18px 40px;
|
||||
background: transparent;
|
||||
color: var(--white);
|
||||
font-family: var(--font);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
border: 2px solid var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.cta-btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
FOOTER — Dark bg, logo + 3 link columns + divider + legal row
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
padding: 60px 120px;
|
||||
background: var(--dark);
|
||||
}
|
||||
|
||||
.footer-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.footer-logo-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.footer-logo-row img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.footer-logo-text {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.footer-tagline {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--gray-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 80px;
|
||||
}
|
||||
|
||||
.footer-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer-col-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.footer-col a,
|
||||
.footer-col span {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--gray-light);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.footer-col a:hover {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.footer-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: var(--divider-dark);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.footer-legal {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.footer-legal a {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--gray);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.footer-legal a:hover {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
RESPONSIVE
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
@media (max-width: 1200px) {
|
||||
.hero-section {
|
||||
flex-direction: column;
|
||||
padding: 60px 40px;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
min-width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.hero-headline {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.features-section,
|
||||
.menu-section,
|
||||
.testimonials-section,
|
||||
.cta-section {
|
||||
padding: 60px 40px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.mud-toolbar {
|
||||
padding: 0 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-section {
|
||||
padding: 40px 20px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.hero-headline {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.hero-subline {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
min-width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.hero-cta-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.menu-grid {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.menu-column-separator {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.testimonials-grid {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.testimonial-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.section-title,
|
||||
.section-title-white,
|
||||
.cta-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.footer-top {
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mud-toolbar {
|
||||
padding: 0 20px !important;
|
||||
}
|
||||
|
||||
.features-section,
|
||||
.menu-section,
|
||||
.testimonials-section,
|
||||
.cta-section {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Animation ─── */
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
@@ -1,100 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Eggymon Kitchen - Fresh Eggs, Happy Kitchen</title>
|
||||
<meta name="description"
|
||||
content="Eggymon Kitchen - Premium egg dishes crafted with love. Fresh eggs, happy kitchen. Order online now!" />
|
||||
<base href="/" />
|
||||
|
||||
<!-- EN: Google Fonts - Poppins -->
|
||||
<!-- VI: Google Fonts - Poppins -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- EN: Material Design Icons -->
|
||||
<!-- VI: Icons Material Design -->
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
|
||||
rel="stylesheet">
|
||||
|
||||
<!-- EN: MudBlazor CSS -->
|
||||
<!-- VI: CSS MudBlazor -->
|
||||
<link href="/_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
|
||||
|
||||
<!-- EN: Custom CSS -->
|
||||
<!-- VI: CSS tùy chỉnh -->
|
||||
<link rel="stylesheet" href="/css/app.css" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<link href="/EggymonLandingPage.Client.styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- EN: Loading indicator with Eggymon branding -->
|
||||
<!-- VI: Chỉ báo đang tải với branding Eggymon -->
|
||||
<div
|
||||
style="display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column; gap: 1rem; background: #fffdf7; color: #23160e;">
|
||||
<svg class="loading-progress" width="48" height="48" viewBox="0 0 80 80">
|
||||
<circle cx="40" cy="40" r="32" fill="none" stroke="#ede2cc" stroke-width="6" />
|
||||
<circle cx="40" cy="40" r="32" fill="none" stroke="#8B5E3C" stroke-width="6" stroke-dasharray="200"
|
||||
stroke-dashoffset="60" style="animation: spin 1s linear infinite; transform-origin: center;">
|
||||
</circle>
|
||||
</svg>
|
||||
<p style="color: #6d4830; font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 500;">Loading
|
||||
Eggymon Kitchen...</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#app>div {
|
||||
background: #1a1008 !important;
|
||||
color: #fef9ed !important;
|
||||
}
|
||||
|
||||
.loading-progress circle:first-child {
|
||||
stroke: #3a2518 !important;
|
||||
}
|
||||
|
||||
.loading-progress circle:last-child {
|
||||
stroke: #F5A623 !important;
|
||||
}
|
||||
|
||||
#app p {
|
||||
color: #d4a574 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
||||
<div id="blazor-error-ui"
|
||||
style="display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 1rem; background: #ef4444; color: #fff; text-align: center;">
|
||||
An unhandled error has occurred. / Đã xảy ra lỗi.
|
||||
<a href="." class="reload" style="color: #fff; text-decoration: underline; margin-left: 1rem;">Reload / Tải
|
||||
lại</a>
|
||||
<span class="dismiss" style="cursor: pointer; margin-left: 1rem;">✕</span>
|
||||
</div>
|
||||
|
||||
<!-- EN: Blazor WebAssembly -->
|
||||
<script src="/_framework/blazor.webassembly.js"></script>
|
||||
|
||||
<!-- EN: Theme Helper -->
|
||||
<!-- VI: Helper chuyển đổi theme -->
|
||||
<script>
|
||||
window.setTheme = (theme) => {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
}
|
||||
</script>
|
||||
<script src="/_content/MudBlazor/MudBlazor.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,68 +0,0 @@
|
||||
{
|
||||
"Nav_Menu": "Menu",
|
||||
"Nav_About": "About Us",
|
||||
"Nav_Locations": "Locations",
|
||||
"Nav_Contact": "Contact",
|
||||
"Nav_OrderNow": "Order Now",
|
||||
"Hero_Badge": "🥚 Open 24/7 — Fresh & Delicious",
|
||||
"Hero_Headline": "Egg-cellent Food,\nMade With Love",
|
||||
"Hero_Subline": "Welcome to EggyMon Kitchen — your neighborhood comfort food destination. From fluffy omelettes to savory rice bowls, we serve delicious egg-based dishes around the clock.",
|
||||
"Hero_CTA_Primary": "Order Now",
|
||||
"Hero_CTA_Secondary": "Learn More",
|
||||
"Features_Tag": "WHY CHOOSE US",
|
||||
"Features_Title": "Crafted With Care, Served With Soul",
|
||||
"Features_Desc": "Every dish at EggyMon Kitchen is prepared fresh with premium ingredients",
|
||||
"Feature1_Title": "Open 24/7",
|
||||
"Feature1_Desc": "Craving eggs at 3 AM? We've got you covered. Fresh food, any time of day.",
|
||||
"Feature2_Title": "Farm Fresh Eggs",
|
||||
"Feature2_Desc": "We source our eggs from local farms daily for the freshest taste in every bite.",
|
||||
"Feature3_Title": "Made With Love",
|
||||
"Feature3_Desc": "Our chefs pour passion into every dish. Taste the difference of home-cooked comfort.",
|
||||
"Menu_Tag": "OUR MENU",
|
||||
"Menu_Title": "Our Menu",
|
||||
"Menu_Desc": "Explore our full range of dishes — from comfort food classics to Vietnamese specialties",
|
||||
"Menu_Col1_Title": "MÓN CHÍNH",
|
||||
"Menu_Col1_Item1": "Cheese Foam Milk Tea",
|
||||
"Menu_Col1_Item2": "Strawberry Milk Tea",
|
||||
"Menu_Col1_Item3": "Oolong Milk Tea",
|
||||
"Menu_Col1_Item4": "Bacon Pork Cheeseburger",
|
||||
"Menu_Col1_Item5": "Crispy Chicken Burger",
|
||||
"Menu_Col1_Item6": "Beef Burger with Cheese",
|
||||
"Menu_Col2_Title": "MÓN PHỤ — ĂN VẶT",
|
||||
"Menu_Col2_Item1": "Salad trộn",
|
||||
"Menu_Col2_Item2": "Khoai Tây Chiên",
|
||||
"Menu_Col2_Item3": "Bánh Tráng Trộn",
|
||||
"Menu_Col2_Item4": "Bánh Lăng",
|
||||
"Menu_Col2_Item5": "Mực rim me",
|
||||
"Menu_Col2_Item6": "Chè đậu Xanh",
|
||||
"Menu_Col2_Item7": "Chè Thập Cẩm",
|
||||
"Menu_Col3_Title": "ĐẶC BIỆT",
|
||||
"Menu_Col3_Item1": "Phở Việt",
|
||||
"Menu_Col3_Item2": "Hủ Tiếu",
|
||||
"Testimonials_Tag": "TESTIMONIALS",
|
||||
"Testimonials_Title": "What Our Customers Say",
|
||||
"Testimonial1_Quote": "Best omelette I've ever had! The eggs are so fresh and fluffy. Now I'm a regular — even at 2 AM!",
|
||||
"Testimonial2_Quote": "My family's go-to spot for late night cravings. The staff is friendly and the food is always consistent.",
|
||||
"Testimonial3_Quote": "The shakshuka here reminds me of home. Authentic flavors, generous portions, and the price is right!",
|
||||
"CTA_Title": "Ready to Try the Best Eggs in Town?",
|
||||
"CTA_Subtitle": "Visit us today or order online for delivery. Open 24/7 for your convenience!",
|
||||
"CTA_Btn_Primary": "Order Now",
|
||||
"CTA_Btn_Secondary": "Find Location",
|
||||
"Footer_Tagline": "Your neighborhood comfort food destination. Serving egg-cellent dishes 24/7.",
|
||||
"Footer_Col1_Title": "Company",
|
||||
"Footer_Col1_Link1": "About Us",
|
||||
"Footer_Col1_Link2": "Our Menu",
|
||||
"Footer_Col1_Link3": "Testimonials",
|
||||
"Footer_Col1_Link4": "Contact",
|
||||
"Footer_Col2_Title": "Support",
|
||||
"Footer_Col2_Link1": "Help Center",
|
||||
"Footer_Col2_Link2": "Order Tracking",
|
||||
"Footer_Col2_Link3": "Delivery Areas",
|
||||
"Footer_Col3_Title": "Connect",
|
||||
"Footer_Col3_Link1": "Facebook",
|
||||
"Footer_Col3_Link2": "Instagram",
|
||||
"Footer_Col3_Link3": "TikTok",
|
||||
"Footer_Copyright": "© 2026 EggyMon Kitchen. All rights reserved.",
|
||||
"Footer_Privacy": "Privacy Policy",
|
||||
"Footer_Terms": "Terms of Service"
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
{
|
||||
"Nav_Menu": "Thực đơn",
|
||||
"Nav_About": "Về chúng tôi",
|
||||
"Nav_Locations": "Chi nhánh",
|
||||
"Nav_Contact": "Liên hệ",
|
||||
"Nav_OrderNow": "Đặt Ngay",
|
||||
"Hero_Badge": "🥚 Mở 24/7 — Tươi Ngon & Hấp Dẫn",
|
||||
"Hero_Headline": "Món Trứng Tuyệt Vời,\nNấu Với Tình Yêu",
|
||||
"Hero_Subline": "Chào mừng đến EggyMon Kitchen — quán ăn quen thuộc của bạn. Từ trứng chiên mềm mịn đến cơm rang thơm ngon, chúng tôi phục vụ 24/7.",
|
||||
"Hero_CTA_Primary": "Đặt Ngay",
|
||||
"Hero_CTA_Secondary": "Tìm Hiểu Thêm",
|
||||
"Features_Tag": "TẠI SAO CHỌN CHÚNG TÔI",
|
||||
"Features_Title": "Chế Biến Tỉ Mỉ, Phục Vụ Tận Tâm",
|
||||
"Features_Desc": "Mỗi món ăn tại EggyMon Kitchen đều được chế biến tươi với nguyên liệu cao cấp",
|
||||
"Feature1_Title": "Mở 24/7",
|
||||
"Feature1_Desc": "Thèm trứng lúc 3 giờ sáng? Chúng tôi sẵn sàng phục vụ bạn bất cứ lúc nào.",
|
||||
"Feature2_Title": "Trứng Tươi Từ Trang Trại",
|
||||
"Feature2_Desc": "Chúng tôi nhập trứng từ trang trại địa phương mỗi ngày để đảm bảo vị tươi ngon nhất.",
|
||||
"Feature3_Title": "Nấu Với Tình Yêu",
|
||||
"Feature3_Desc": "Đầu bếp của chúng tôi đổ đam mê vào mỗi món ăn. Hãy nếm thử sự khác biệt.",
|
||||
"Menu_Tag": "THỰC ĐƠN",
|
||||
"Menu_Title": "Thực Đơn",
|
||||
"Menu_Desc": "Khám phá đầy đủ các món — từ comfort food kinh điển đến đặc sản Việt Nam",
|
||||
"Menu_Col1_Title": "MÓN CHÍNH",
|
||||
"Menu_Col1_Item1": "Cheese Foam Milk Tea",
|
||||
"Menu_Col1_Item2": "Strawberry Milk Tea",
|
||||
"Menu_Col1_Item3": "Oolong Milk Tea",
|
||||
"Menu_Col1_Item4": "Bacon Pork Cheeseburger",
|
||||
"Menu_Col1_Item5": "Crispy Chicken Burger",
|
||||
"Menu_Col1_Item6": "Beef Burger with Cheese",
|
||||
"Menu_Col2_Title": "MÓN PHỤ — ĂN VẶT",
|
||||
"Menu_Col2_Item1": "Salad trộn",
|
||||
"Menu_Col2_Item2": "Khoai Tây Chiên",
|
||||
"Menu_Col2_Item3": "Bánh Tráng Trộn",
|
||||
"Menu_Col2_Item4": "Bánh Lăng",
|
||||
"Menu_Col2_Item5": "Mực rim me",
|
||||
"Menu_Col2_Item6": "Chè đậu Xanh",
|
||||
"Menu_Col2_Item7": "Chè Thập Cẩm",
|
||||
"Menu_Col3_Title": "ĐẶC BIỆT",
|
||||
"Menu_Col3_Item1": "Phở Việt",
|
||||
"Menu_Col3_Item2": "Hủ Tiếu",
|
||||
"Testimonials_Tag": "ĐÁNH GIÁ",
|
||||
"Testimonials_Title": "Khách Hàng Nói Gì?",
|
||||
"Testimonial1_Quote": "Trứng chiên ngon nhất mà tôi từng ăn! Trứng rất tươi và xốp. Giờ tôi là khách quen — kể cả lúc 2 giờ sáng!",
|
||||
"Testimonial2_Quote": "Địa điểm yêu thích của gia đình tôi cho những cơn thèm đêm khuya. Nhân viên thân thiện và đồ ăn luôn ổn định.",
|
||||
"Testimonial3_Quote": "Món shakshuka ở đây gợi nhớ hương vị quê nhà. Vị đậm đà, phần ăn hào phóng, giá cả hợp lý!",
|
||||
"CTA_Title": "Sẵn Sàng Thử Trứng Ngon Nhất Thành Phố?",
|
||||
"CTA_Subtitle": "Ghé thăm chúng tôi hôm nay hoặc đặt hàng trực tuyến. Mở 24/7 để phục vụ bạn!",
|
||||
"CTA_Btn_Primary": "Đặt Ngay",
|
||||
"CTA_Btn_Secondary": "Tìm Chi Nhánh",
|
||||
"Footer_Tagline": "Quán ăn quen thuộc phục vụ món trứng tuyệt vời 24/7.",
|
||||
"Footer_Col1_Title": "Công Ty",
|
||||
"Footer_Col1_Link1": "Về Chúng Tôi",
|
||||
"Footer_Col1_Link2": "Thực Đơn",
|
||||
"Footer_Col1_Link3": "Đánh Giá",
|
||||
"Footer_Col1_Link4": "Liên Hệ",
|
||||
"Footer_Col2_Title": "Hỗ Trợ",
|
||||
"Footer_Col2_Link1": "Trung Tâm Trợ Giúp",
|
||||
"Footer_Col2_Link2": "Theo Dõi Đơn Hàng",
|
||||
"Footer_Col2_Link3": "Khu Vực Giao Hàng",
|
||||
"Footer_Col3_Title": "Kết Nối",
|
||||
"Footer_Col3_Link1": "Facebook",
|
||||
"Footer_Col3_Link2": "Instagram",
|
||||
"Footer_Col3_Link3": "TikTok",
|
||||
"Footer_Copyright": "© 2026 EggyMon Kitchen. Bảo lưu mọi quyền.",
|
||||
"Footer_Privacy": "Chính Sách Bảo Mật",
|
||||
"Footer_Terms": "Điều Khoản Dịch Vụ"
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
<Project Sdk="Microsoft.NET.Sdk.Web">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net10.0</TargetFramework>
|
||||
<Nullable>enable</Nullable>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="10.0.1" />
|
||||
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="10.0.1" />
|
||||
<PackageReference Include="Yarp.ReverseProxy" Version="2.3.0" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<ProjectReference Include="..\EggymonLandingPage.Shared\EggymonLandingPage.Shared.csproj" />
|
||||
<ProjectReference Include="..\EggymonLandingPage.Client\EggymonLandingPage.Client.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
@@ -1,117 +0,0 @@
|
||||
/// <summary>
|
||||
/// EN: ASP.NET Core BFF (Backend for Frontend) with YARP Reverse Proxy for Eggymon Landing Page.
|
||||
/// VI: ASP.NET Core BFF (Backend for Frontend) với YARP Reverse Proxy cho Eggymon Landing Page.
|
||||
/// </summary>
|
||||
|
||||
using Microsoft.AspNetCore.Rewrite;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// EN: Add services to the container
|
||||
// VI: Thêm các services vào container
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
// EN: Load YARP configuration from yarp.json
|
||||
// VI: Load cấu hình YARP từ yarp.json
|
||||
builder.Configuration.AddJsonFile("yarp.json", optional: true, reloadOnChange: true);
|
||||
|
||||
// EN: Add YARP Reverse Proxy
|
||||
// VI: Thêm YARP Reverse Proxy
|
||||
builder.Services.AddReverseProxy()
|
||||
.LoadFromConfig(builder.Configuration.GetSection("ReverseProxy"));
|
||||
|
||||
// EN: Add OpenAPI/Swagger support
|
||||
// VI: Thêm hỗ trợ OpenAPI/Swagger
|
||||
builder.Services.AddOpenApi();
|
||||
|
||||
// EN: Add CORS for Blazor WebAssembly client
|
||||
// VI: Thêm CORS cho Blazor WebAssembly client
|
||||
builder.Services.AddCors(options =>
|
||||
{
|
||||
options.AddPolicy("BlazorClient", policy =>
|
||||
{
|
||||
policy.AllowAnyOrigin()
|
||||
.AllowAnyMethod()
|
||||
.AllowAnyHeader();
|
||||
});
|
||||
});
|
||||
|
||||
// EN: Add health checks
|
||||
// VI: Thêm health checks
|
||||
builder.Services.AddHealthChecks();
|
||||
|
||||
var app = builder.Build();
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// EN: Configure the HTTP request pipeline
|
||||
// VI: Cấu hình HTTP request pipeline
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
if (app.Environment.IsDevelopment())
|
||||
{
|
||||
app.MapOpenApi();
|
||||
app.UseDeveloperExceptionPage();
|
||||
}
|
||||
|
||||
app.UseHttpsRedirection();
|
||||
|
||||
// EN: Enable CORS
|
||||
// VI: Kích hoạt CORS
|
||||
app.UseCors("BlazorClient");
|
||||
|
||||
// EN: Rewrite localized framework/content requests to root
|
||||
// VI: Viết lại các yêu cầu framework/content từ đường dẫn ngôn ngữ về root
|
||||
var rewriteOptions = new RewriteOptions()
|
||||
.AddRewrite(@"^(en-US|vi-VN)/(_framework|_content)/(.*)", "$2/$3", skipRemainingRules: true);
|
||||
app.UseRewriter(rewriteOptions);
|
||||
|
||||
// EN: Serve static files with fingerprinting support (.NET 10+)
|
||||
// VI: Phục vụ static files với hỗ trợ fingerprinting (.NET 10+)
|
||||
app.MapStaticAssets();
|
||||
|
||||
// EN: Map health check endpoint
|
||||
// VI: Map endpoint health check
|
||||
app.MapHealthChecks("/health");
|
||||
|
||||
// EN: Map YARP Reverse Proxy routes to microservices
|
||||
// VI: Map các routes YARP Reverse Proxy đến microservices
|
||||
app.MapReverseProxy();
|
||||
|
||||
// EN: Localization Support - Serve index.html with dynamic base tag for specific cultures
|
||||
// VI: Hỗ trợ đa ngôn ngữ - Phục vụ index.html với base tag động cho các ngôn ngữ cụ thể
|
||||
var supportedCultures = new[] { "en-US", "vi-VN" };
|
||||
var localizationOptions = new RequestLocalizationOptions()
|
||||
.SetDefaultCulture("en-US")
|
||||
.AddSupportedCultures(supportedCultures)
|
||||
.AddSupportedUICultures(supportedCultures);
|
||||
|
||||
app.UseRequestLocalization(localizationOptions);
|
||||
|
||||
// EN: Handle mapped culture routes (e.g. /en-US/home, /vi-VN/)
|
||||
// VI: Xử lý các routes ngôn ngữ (vd: /en-US/home, /vi-VN/)
|
||||
app.Map("{culture:regex(^(en-US|vi-VN)$)}/{**slug}", async (string culture, HttpContext context, IWebHostEnvironment env) =>
|
||||
{
|
||||
var fileInfo = env.WebRootFileProvider.GetFileInfo("index.html");
|
||||
if (!fileInfo.Exists)
|
||||
{
|
||||
return Results.NotFound("index.html not found in wwwroot. Ensure the Client project is built.");
|
||||
}
|
||||
|
||||
using var stream = fileInfo.CreateReadStream();
|
||||
using var reader = new StreamReader(stream);
|
||||
var html = await reader.ReadToEndAsync();
|
||||
|
||||
// EN: Replace base tag for culture-specific routing
|
||||
// VI: Thay thế base tag cho routing theo ngôn ngữ
|
||||
var modifiedHtml = html.Replace("<base href=\"/\" />", $"<base href=\"/{culture}/\" />")
|
||||
.Replace("<base href=\"/\"/>", $"<base href=\"/{culture}/\" />");
|
||||
|
||||
return Results.Content(modifiedHtml, "text/html");
|
||||
});
|
||||
|
||||
// EN: Fallback to index.html for SPA routing (default culture)
|
||||
// VI: Fallback đến index.html cho SPA routing (ngôn ngữ mặc định)
|
||||
app.MapFallbackToFile("index.html");
|
||||
|
||||
app.Run();
|
||||
@@ -1,22 +0,0 @@
|
||||
{
|
||||
"profiles": {
|
||||
"https": {
|
||||
"commandName": "Project",
|
||||
"dotnetRunMessages": true,
|
||||
"launchBrowser": true,
|
||||
"applicationUrl": "https://localhost:7295;http://localhost:5095",
|
||||
"environmentVariables": {
|
||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
||||
}
|
||||
},
|
||||
"http": {
|
||||
"commandName": "Project",
|
||||
"dotnetRunMessages": true,
|
||||
"launchBrowser": true,
|
||||
"applicationUrl": "http://localhost:5095",
|
||||
"environmentVariables": {
|
||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"Logging": {
|
||||
"LogLevel": {
|
||||
"Default": "Information",
|
||||
"Microsoft.AspNetCore": "Warning"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
{
|
||||
"Logging": {
|
||||
"LogLevel": {
|
||||
"Default": "Information",
|
||||
"Microsoft.AspNetCore": "Warning"
|
||||
}
|
||||
},
|
||||
"AllowedHosts": "*"
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"ReverseProxy": {
|
||||
"Routes": {},
|
||||
"Clusters": {}
|
||||
}
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
namespace EggymonLandingPage.Shared;
|
||||
|
||||
/// <summary>
|
||||
/// EN: Standard API response wrapper.
|
||||
/// VI: Wrapper response API chuẩn.
|
||||
/// </summary>
|
||||
public class ApiResponse<T>
|
||||
{
|
||||
public bool Success { get; set; }
|
||||
public T? Data { get; set; }
|
||||
public string? Error { get; set; }
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
<Project Sdk="Microsoft.NET.Sdk">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net10.0</TargetFramework>
|
||||
<Nullable>enable</Nullable>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
</PropertyGroup>
|
||||
|
||||
</Project>
|
||||
@@ -1,44 +0,0 @@
|
||||
using EggymonLandingPage.Shared;
|
||||
using FluentAssertions;
|
||||
using Xunit;
|
||||
|
||||
namespace EggymonLandingPage.SmokeTests;
|
||||
|
||||
/// <summary>
|
||||
/// EN: Smoke tests for landing page shared API response model.
|
||||
/// VI: Smoke tests cho model API response dùng chung của landing page.
|
||||
/// </summary>
|
||||
public class ApiResponseTests
|
||||
{
|
||||
[Fact]
|
||||
public void ApiResponse_ShouldStoreSuccessPayload()
|
||||
{
|
||||
// Act
|
||||
var response = new ApiResponse<string>
|
||||
{
|
||||
Success = true,
|
||||
Data = "ok",
|
||||
};
|
||||
|
||||
// Assert
|
||||
response.Success.Should().BeTrue();
|
||||
response.Data.Should().Be("ok");
|
||||
response.Error.Should().BeNull();
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public void ApiResponse_ShouldStoreErrorMessage()
|
||||
{
|
||||
// Act
|
||||
var response = new ApiResponse<object>
|
||||
{
|
||||
Success = false,
|
||||
Error = "invalid-state",
|
||||
};
|
||||
|
||||
// Assert
|
||||
response.Success.Should().BeFalse();
|
||||
response.Data.Should().BeNull();
|
||||
response.Error.Should().Be("invalid-state");
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
<Project Sdk="Microsoft.NET.Sdk">
|
||||
|
||||
<PropertyGroup>
|
||||
<AssemblyName>EggymonLandingPage.SmokeTests</AssemblyName>
|
||||
<RootNamespace>EggymonLandingPage.SmokeTests</RootNamespace>
|
||||
<TargetFramework>net10.0</TargetFramework>
|
||||
<IsPackable>false</IsPackable>
|
||||
<IsTestProject>true</IsTestProject>
|
||||
<Nullable>enable</Nullable>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<!-- EN: Test framework dependencies / VI: Phụ thuộc framework test -->
|
||||
<PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.12.0" />
|
||||
<PackageReference Include="xunit" Version="2.9.2" />
|
||||
<PackageReference Include="xunit.runner.visualstudio" Version="2.8.2">
|
||||
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
|
||||
<PrivateAssets>all</PrivateAssets>
|
||||
</PackageReference>
|
||||
<PackageReference Include="FluentAssertions" Version="6.12.2" />
|
||||
<PackageReference Include="coverlet.collector" Version="6.0.2">
|
||||
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
|
||||
<PrivateAssets>all</PrivateAssets>
|
||||
</PackageReference>
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<ProjectReference Include="..\..\src\EggymonLandingPage.Shared\EggymonLandingPage.Shared.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,306 +0,0 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderScreen",
|
||||
"name": "Admin/OrderManagement",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"layout": "horizontal",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SidebarOrder",
|
||||
"name": "Sidebar",
|
||||
"width": 260,
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"layout": "vertical",
|
||||
"stroke": {"align": "inside", "fill": "$border-default", "thickness": {"right": 1}},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LogoAreaOrd",
|
||||
"width": "fill_container",
|
||||
"fill": {"type": "linear_gradient", "stops": [{"color": "#6B4423", "position": 0}, {"color": "#FF6B35", "position": 1}]},
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "LogoIconOrd", "width": 48, "height": 48, "cornerRadius": 24, "fill": "#FFFFFF33", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "LogoTxOrd", "content": "EK", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 20, "fontWeight": "bold"}]},
|
||||
{"type": "text", "id": "BrandNameOrd", "content": "EggyMon Kitchen", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "bold"},
|
||||
{"type": "text", "id": "BrandSubOrd", "content": "Quản lý cửa hàng", "fill": "#FFFFFFB3", "fontFamily": "Poppins", "fontSize": 11}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NavAreaOrd",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"padding": [16, 12],
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{"type": "text", "id": "NvLblOvOrd", "content": "TỔNG QUAN", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [12, 8]},
|
||||
{"type": "frame", "id": "NvDashOrd", "width": "fill_container", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcDshOrd", "iconFontFamily": "lucide", "iconFontName": "layout-dashboard", "width": 20, "height": 20, "fill": "$text-secondary"}, {"type": "text", "id": "TxDshOrd", "content": "Dashboard", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "text", "id": "NvLblStOrd", "content": "CỬA HÀNG", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [16, 8, 12, 8]},
|
||||
{"type": "frame", "id": "NvOrdActive", "width": "fill_container", "fill": "$orange-primary", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcOrdAct", "iconFontFamily": "lucide", "iconFontName": "shopping-bag", "width": 20, "height": 20, "fill": "#FFFFFF"}, {"type": "text", "id": "TxOrdAct", "content": "Quản lý đơn hàng", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NvStfOrd", "width": "fill_container", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcStfOrd", "iconFontFamily": "lucide", "iconFontName": "users", "width": 20, "height": 20, "fill": "$text-secondary"}, {"type": "text", "id": "TxStfOrd", "content": "Nhân sự", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NvSetOrd", "width": "fill_container", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcSetOrd", "iconFontFamily": "lucide", "iconFontName": "settings-2", "width": 20, "height": 20, "fill": "$text-secondary"}, {"type": "text", "id": "TxSetOrd", "content": "Cài đặt", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "text", "id": "NvLblBzOrd", "content": "KINH DOANH", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [16, 8, 12, 8]},
|
||||
{"type": "frame", "id": "NvRptOrd", "width": "fill_container", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcRptOrd", "iconFontFamily": "lucide", "iconFontName": "bar-chart-2", "width": 20, "height": 20, "fill": "$text-secondary"}, {"type": "text", "id": "TxRptOrd", "content": "Báo cáo", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NvLoyOrd", "width": "fill_container", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcLoyOrd", "iconFontFamily": "lucide", "iconFontName": "gift", "width": 20, "height": 20, "fill": "$text-secondary"}, {"type": "text", "id": "TxLoyOrd", "content": "Loyalty", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "UserAreaOrd",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "DividerOrd", "width": "fill_container", "height": 1, "fill": "$border-default"},
|
||||
{"type": "frame", "id": "UserRowOrd", "width": "fill_container", "padding": [16, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "AvatarOrd", "width": 40, "height": 40, "cornerRadius": 20, "fill": "$orange-primary", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "AvTxOrd", "content": "TN", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "bold"}]},
|
||||
{"type": "frame", "id": "UsrInfoOrd", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "UsrNmOrd", "content": "Trần Nhật", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "UsrRlOrd", "content": "Store Manager", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 12}]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MainContentOrd",
|
||||
"name": "Main Content",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"padding": 32,
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{"type": "text", "id": "TitleOrd", "content": "Quản lý đơn hàng", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 24, "fontWeight": "bold"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StatusTabs",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"padding": 4,
|
||||
"layout": "horizontal",
|
||||
"gap": 0,
|
||||
"children": [
|
||||
{"type": "frame", "id": "TabAll", "fill": "$orange-primary", "cornerRadius": 10, "padding": [8, 16], "children": [{"type": "text", "id": "TabAllTx", "content": "Tất cả (87)", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "TabPending", "padding": [8, 16], "children": [{"type": "text", "id": "TabPendTx", "content": "Chờ xác nhận (5)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "TabCooking", "padding": [8, 16], "children": [{"type": "text", "id": "TabCookTx", "content": "Đang chế biến (12)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "TabReady", "padding": [8, 16], "children": [{"type": "text", "id": "TabReadyTx", "content": "Chờ lấy (8)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "TabDone", "padding": [8, 16], "children": [{"type": "text", "id": "TabDoneTx", "content": "Hoàn thành (58)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "TabCancel", "padding": [8, 16], "children": [{"type": "text", "id": "TabCancelTx", "content": "Đã hủy (4)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FilterBarOrd",
|
||||
"width": "fill_container",
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SearchOrd", "width": 300, "height": 42, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"align": "inside", "fill": "$border-default", "thickness": 1}, "padding": [0, 16], "layout": "horizontal", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "IcSrchOrd", "iconFontFamily": "lucide", "iconFontName": "search", "width": 18, "height": 18, "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SrchPlcOrd", "content": "Tìm đơn hàng...", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "DateFilterOrd", "width": 200, "height": 42, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"align": "inside", "fill": "$border-default", "thickness": 1}, "padding": [0, 16], "layout": "horizontal", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "IcCalOrd", "iconFontFamily": "lucide", "iconFontName": "calendar", "width": 18, "height": 18, "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "DateTxOrd", "content": "Hôm nay", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrdersTable",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrdTblHeader",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": [14, 14, 0, 0],
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "OThCode", "content": "Mã đơn", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 110},
|
||||
{"type": "text", "id": "OThTime", "content": "Thời gian", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 90},
|
||||
{"type": "text", "id": "OThCust", "content": "Khách hàng", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 150},
|
||||
{"type": "text", "id": "OThItems", "content": "Món", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": "fill_container"},
|
||||
{"type": "text", "id": "OThTotal", "content": "Tổng", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 120},
|
||||
{"type": "text", "id": "OThStatus", "content": "Trạng thái", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 140},
|
||||
{"type": "text", "id": "OThAction", "content": "Hành động", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 90}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrdRow1",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{"type": "text", "id": "Or1Code", "content": "#EK-0087", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 110},
|
||||
{"type": "text", "id": "Or1Time", "content": "14:32", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": 90},
|
||||
{"type": "text", "id": "Or1Cust", "content": "Nguyễn Văn B", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "width": 150},
|
||||
{"type": "text", "id": "Or1Items", "content": "Combo bánh mì x2, Trà sữa x1", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "Or1Total", "content": "185,000₫", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 120},
|
||||
{"type": "frame", "id": "Or1Stat", "width": 140, "children": [{"type": "frame", "id": "Or1Badge", "fill": "#FEF3C7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "Or1BdgTx", "content": "Chờ xác nhận", "fill": "#D97706", "fontFamily": "Poppins", "fontSize": 12}]}]},
|
||||
{"type": "frame", "id": "Or1Acts", "width": 90, "layout": "horizontal", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "Or1Eye", "iconFontFamily": "lucide", "iconFontName": "eye", "width": 18, "height": 18, "fill": "$text-secondary"},
|
||||
{"type": "icon_font", "id": "Or1More", "iconFontFamily": "lucide", "iconFontName": "more-vertical", "width": 18, "height": 18, "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrdRow2",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{"type": "text", "id": "Or2Code", "content": "#EK-0086", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 110},
|
||||
{"type": "text", "id": "Or2Time", "content": "14:15", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": 90},
|
||||
{"type": "text", "id": "Or2Cust", "content": "Walk-in", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "width": 150},
|
||||
{"type": "text", "id": "Or2Items", "content": "Cơm trưa đặc biệt x1", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "Or2Total", "content": "55,000₫", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 120},
|
||||
{"type": "frame", "id": "Or2Stat", "width": 140, "children": [{"type": "frame", "id": "Or2Badge", "fill": "#DBEAFE", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "Or2BdgTx", "content": "Đang chế biến", "fill": "#2563EB", "fontFamily": "Poppins", "fontSize": 12}]}]},
|
||||
{"type": "frame", "id": "Or2Acts", "width": 90, "layout": "horizontal", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "Or2Eye", "iconFontFamily": "lucide", "iconFontName": "eye", "width": 18, "height": 18, "fill": "$text-secondary"},
|
||||
{"type": "icon_font", "id": "Or2More", "iconFontFamily": "lucide", "iconFontName": "more-vertical", "width": 18, "height": 18, "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrdRow3",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{"type": "text", "id": "Or3Code", "content": "#EK-0085", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 110},
|
||||
{"type": "text", "id": "Or3Time", "content": "13:50", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": 90},
|
||||
{"type": "text", "id": "Or3Cust", "content": "Trần Thị C", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "width": 150},
|
||||
{"type": "text", "id": "Or3Items", "content": "Omelette phô mai x2", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "Or3Total", "content": "120,000₫", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 120},
|
||||
{"type": "frame", "id": "Or3Stat", "width": 140, "children": [{"type": "frame", "id": "Or3Badge", "fill": "#FFEDD5", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "Or3BdgTx", "content": "Chờ lấy", "fill": "#EA580C", "fontFamily": "Poppins", "fontSize": 12}]}]},
|
||||
{"type": "frame", "id": "Or3Acts", "width": 90, "layout": "horizontal", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "Or3Eye", "iconFontFamily": "lucide", "iconFontName": "eye", "width": 18, "height": 18, "fill": "$text-secondary"},
|
||||
{"type": "icon_font", "id": "Or3More", "iconFontFamily": "lucide", "iconFontName": "more-vertical", "width": 18, "height": 18, "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrdRow4",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{"type": "text", "id": "Or4Code", "content": "#EK-0084", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 110},
|
||||
{"type": "text", "id": "Or4Time", "content": "13:30", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": 90},
|
||||
{"type": "text", "id": "Or4Cust", "content": "App - Lê D", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "width": 150},
|
||||
{"type": "text", "id": "Or4Items", "content": "Bánh mì trứng x3", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "Or4Total", "content": "90,000₫", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 120},
|
||||
{"type": "frame", "id": "Or4Stat", "width": 140, "children": [{"type": "frame", "id": "Or4Badge", "fill": "#DCFCE7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "Or4BdgTx", "content": "Hoàn thành", "fill": "#16A34A", "fontFamily": "Poppins", "fontSize": 12}]}]},
|
||||
{"type": "frame", "id": "Or4Acts", "width": 90, "layout": "horizontal", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "Or4Eye", "iconFontFamily": "lucide", "iconFontName": "eye", "width": 18, "height": 18, "fill": "$text-secondary"},
|
||||
{"type": "icon_font", "id": "Or4More", "iconFontFamily": "lucide", "iconFontName": "more-vertical", "width": 18, "height": 18, "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrdRow5",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{"type": "text", "id": "Or5Code", "content": "#EK-0083", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 110},
|
||||
{"type": "text", "id": "Or5Time", "content": "12:45", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": 90},
|
||||
{"type": "text", "id": "Or5Cust", "content": "Walk-in", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "width": 150},
|
||||
{"type": "text", "id": "Or5Items", "content": "Trà sữa oolong x2", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "Or5Total", "content": "70,000₫", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 120},
|
||||
{"type": "frame", "id": "Or5Stat", "width": 140, "children": [{"type": "frame", "id": "Or5Badge", "fill": "#FEE2E2", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "Or5BdgTx", "content": "Đã hủy", "fill": "#DC2626", "fontFamily": "Poppins", "fontSize": 12}]}]},
|
||||
{"type": "frame", "id": "Or5Acts", "width": 90, "layout": "horizontal", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "Or5Eye", "iconFontFamily": "lucide", "iconFontName": "eye", "width": 18, "height": 18, "fill": "$text-secondary"},
|
||||
{"type": "icon_font", "id": "Or5More", "iconFontFamily": "lucide", "iconFontName": "more-vertical", "width": 18, "height": 18, "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaginationOrd",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "PagInfoOrd", "content": "Hiển thị 1-5 / 87 đơn hàng", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PagCtrlOrd",
|
||||
"layout": "horizontal",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PgPrevOrd", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$bg-interactive", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "IcPvOrd", "iconFontFamily": "lucide", "iconFontName": "chevron-left", "width": 16, "height": 16, "fill": "$text-secondary"}]},
|
||||
{"type": "frame", "id": "PgP1Ord", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$orange-primary", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P1TxOrd", "content": "1", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "PgP2Ord", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P2TxOrd", "content": "2", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "PgP3Ord", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P3TxOrd", "content": "3", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "PgElOrd", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ElTxOrd", "content": "...", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "PgP18Ord", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P18TxOrd", "content": "18", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "PgNxtOrd", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$bg-interactive", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "IcNxOrd", "iconFontFamily": "lucide", "iconFontName": "chevron-right", "width": 16, "height": 16, "fill": "$text-secondary"}]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {"type": "color", "value": "#FAF8F4"},
|
||||
"bg-surface": {"type": "color", "value": "#FFFFFF"},
|
||||
"bg-elevated": {"type": "color", "value": "#FFF8F0"},
|
||||
"bg-interactive": {"type": "color", "value": "#F5EDE4"},
|
||||
"brown-primary": {"type": "color", "value": "#6B4423"},
|
||||
"brown-dark": {"type": "color", "value": "#4A2E15"},
|
||||
"orange-primary": {"type": "color", "value": "#FF6B35"},
|
||||
"orange-light": {"type": "color", "value": "#FF8A5C"},
|
||||
"text-primary": {"type": "color", "value": "#2C2C2C"},
|
||||
"text-secondary": {"type": "color", "value": "#6B6B6B"},
|
||||
"text-tertiary": {"type": "color", "value": "#9B9B9B"},
|
||||
"border-default": {"type": "color", "value": "#E5DDD4"},
|
||||
"border-subtle": {"type": "color", "value": "#F0EAE2"},
|
||||
"success": {"type": "color", "value": "#22C55E"},
|
||||
"warning": {"type": "color", "value": "#F59E0B"},
|
||||
"error": {"type": "color", "value": "#EF4444"}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,506 +0,0 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StaffScreen",
|
||||
"name": "Admin/StaffManagement",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"layout": "horizontal",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SidebarStaff",
|
||||
"name": "Sidebar",
|
||||
"width": 260,
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"layout": "vertical",
|
||||
"stroke": {"align": "inside", "fill": "$border-default", "thickness": {"right": 1}},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LogoAreaStaff",
|
||||
"name": "Logo Area",
|
||||
"width": "fill_container",
|
||||
"fill": {"type": "linear_gradient", "stops": [{"color": "#6B4423", "position": 0}, {"color": "#FF6B35", "position": 1}]},
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LogoIconStaff",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"cornerRadius": 24,
|
||||
"fill": "#FFFFFF33",
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "LogoTextStaff", "content": "EK", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 20, "fontWeight": "bold"}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "BrandNameStaff", "content": "EggyMon Kitchen", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "bold"},
|
||||
{"type": "text", "id": "BrandSubStaff", "content": "Quản lý cửa hàng", "fill": "#FFFFFFB3", "fontFamily": "Poppins", "fontSize": 11}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NavAreaStaff",
|
||||
"name": "Navigation",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"padding": [16, 12],
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{"type": "text", "id": "NavLblOverviewSt", "content": "TỔNG QUAN", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [12, 8]},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NavDashSt",
|
||||
"width": "fill_container",
|
||||
"cornerRadius": 10,
|
||||
"padding": [12, 20],
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "IcDashSt", "iconFontFamily": "lucide", "iconFontName": "layout-dashboard", "width": 20, "height": 20, "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "TxDashSt", "content": "Dashboard", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "NavLblStoreSt", "content": "CỬA HÀNG", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [16, 8, 12, 8]},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NavOrdersSt",
|
||||
"width": "fill_container",
|
||||
"cornerRadius": 10,
|
||||
"padding": [12, 20],
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "IcOrdersSt", "iconFontFamily": "lucide", "iconFontName": "shopping-bag", "width": 20, "height": 20, "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "TxOrdersSt", "content": "Quản lý đơn hàng", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NavStaffActive",
|
||||
"name": "Nav Staff Active",
|
||||
"width": "fill_container",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 10,
|
||||
"padding": [12, 20],
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "IcStaffSt", "iconFontFamily": "lucide", "iconFontName": "users", "width": 20, "height": 20, "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "TxStaffSt", "content": "Nhân sự", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NavSettingsSt",
|
||||
"width": "fill_container",
|
||||
"cornerRadius": 10,
|
||||
"padding": [12, 20],
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "IcSettingsSt", "iconFontFamily": "lucide", "iconFontName": "settings-2", "width": 20, "height": 20, "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "TxSettingsSt", "content": "Cài đặt", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "NavLblBizSt", "content": "KINH DOANH", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [16, 8, 12, 8]},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NavReportSt",
|
||||
"width": "fill_container",
|
||||
"cornerRadius": 10,
|
||||
"padding": [12, 20],
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "IcReportSt", "iconFontFamily": "lucide", "iconFontName": "bar-chart-2", "width": 20, "height": 20, "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "TxReportSt", "content": "Báo cáo", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NavLoyaltySt",
|
||||
"width": "fill_container",
|
||||
"cornerRadius": 10,
|
||||
"padding": [12, 20],
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "IcLoyaltySt", "iconFontFamily": "lucide", "iconFontName": "gift", "width": 20, "height": 20, "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "TxLoyaltySt", "content": "Loyalty", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "UserAreaStaff",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "DividerStaff", "width": "fill_container", "height": 1, "fill": "$border-default"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "UserRowStaff",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AvatarStaff",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"cornerRadius": 20,
|
||||
"fill": "$orange-primary",
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [{"type": "text", "id": "AvTextStaff", "content": "TN", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "bold"}]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "UserInfoStaff",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{"type": "text", "id": "UserNameStaff", "content": "Trần Nhật", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "UserRoleStaff", "content": "Store Manager", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 12}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MainContentStaff",
|
||||
"name": "Main Content",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"padding": 32,
|
||||
"gap": 24,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HeaderStaff",
|
||||
"width": "fill_container",
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "TitleStaff", "content": "Quản lý nhân sự", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 24, "fontWeight": "bold"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddStaffBtn",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 10,
|
||||
"padding": [10, 20],
|
||||
"layout": "horizontal",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "IcPlusStaff", "iconFontFamily": "lucide", "iconFontName": "plus", "width": 18, "height": 18, "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "BtnTextStaff", "content": "Thêm nhân viên", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FilterBarStaff",
|
||||
"width": "fill_container",
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SearchStaff",
|
||||
"width": 300,
|
||||
"height": 42,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 10,
|
||||
"stroke": {"align": "inside", "fill": "$border-default", "thickness": 1},
|
||||
"padding": [0, 16],
|
||||
"layout": "horizontal",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "IcSearchStaff", "iconFontFamily": "lucide", "iconFontName": "search", "width": 18, "height": 18, "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SearchPlcStaff", "content": "Tìm kiếm nhân viên...", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 14}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FilterPosition",
|
||||
"width": 160,
|
||||
"height": 42,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 10,
|
||||
"stroke": {"align": "inside", "fill": "$border-default", "thickness": 1},
|
||||
"padding": [0, 16],
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "FilterPosText", "content": "Vị trí", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14},
|
||||
{"type": "icon_font", "id": "IcChevPos", "iconFontFamily": "lucide", "iconFontName": "chevron-down", "width": 16, "height": 16, "fill": "$text-tertiary"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FilterStatus",
|
||||
"width": 160,
|
||||
"height": 42,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 10,
|
||||
"stroke": {"align": "inside", "fill": "$border-default", "thickness": 1},
|
||||
"padding": [0, 16],
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "FilterStatText", "content": "Trạng thái", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14},
|
||||
{"type": "icon_font", "id": "IcChevStat", "iconFontFamily": "lucide", "iconFontName": "chevron-down", "width": 16, "height": 16, "fill": "$text-tertiary"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StaffTableCard",
|
||||
"name": "Staff Table",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StaffTableHeader",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": [14, 14, 0, 0],
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "StThEmployee", "content": "Nhân viên", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 220},
|
||||
{"type": "text", "id": "StThPosition", "content": "Vị trí", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 150},
|
||||
{"type": "text", "id": "StThPhone", "content": "SĐT", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 150},
|
||||
{"type": "text", "id": "StThShift", "content": "Ca làm", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 180},
|
||||
{"type": "text", "id": "StThStatus", "content": "Trạng thái", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": "fill_container"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StRow1",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StEmp1Cell",
|
||||
"width": 220,
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "StAv1", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#E8D5C4", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv1Tx", "content": "NT", "fill": "$brown-primary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]},
|
||||
{"type": "text", "id": "StName1", "content": "Nguyễn Thu", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "StPos1", "content": "Pha chế", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StPhone1", "content": "0912 345 678", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StShift1", "content": "Sáng (7-14h)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180},
|
||||
{"type": "frame", "id": "StStat1", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge1", "fill": "#DCFCE7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx1", "content": "Đang làm", "fill": "#16A34A", "fontFamily": "Poppins", "fontSize": 12}]}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StRow2",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StEmp2Cell",
|
||||
"width": 220,
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "StAv2", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#D4E0ED", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv2Tx", "content": "LH", "fill": "#2563EB", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]},
|
||||
{"type": "text", "id": "StName2", "content": "Lê Hoàng", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "StPos2", "content": "Thu ngân", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StPhone2", "content": "0903 456 789", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StShift2", "content": "Chiều (14-21h)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180},
|
||||
{"type": "frame", "id": "StStat2", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge2", "fill": "#DCFCE7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx2", "content": "Đang làm", "fill": "#16A34A", "fontFamily": "Poppins", "fontSize": 12}]}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StRow3",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StEmp3Cell",
|
||||
"width": 220,
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "StAv3", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#FEF3C7", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv3Tx", "content": "PL", "fill": "#D97706", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]},
|
||||
{"type": "text", "id": "StName3", "content": "Phạm Linh", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "StPos3", "content": "Phục vụ", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StPhone3", "content": "0987 654 321", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StShift3", "content": "Tối (17-23h)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180},
|
||||
{"type": "frame", "id": "StStat3", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge3", "fill": "#FEF3C7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx3", "content": "Nghỉ phép", "fill": "#D97706", "fontFamily": "Poppins", "fontSize": 12}]}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StRow4",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StEmp4Cell",
|
||||
"width": 220,
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "StAv4", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#E8D5C4", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv4Tx", "content": "TK", "fill": "$brown-primary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]},
|
||||
{"type": "text", "id": "StName4", "content": "Trần Kiên", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "StPos4", "content": "Bếp trưởng", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StPhone4", "content": "0934 567 890", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StShift4", "content": "Sáng (7-14h)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180},
|
||||
{"type": "frame", "id": "StStat4", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge4", "fill": "#DCFCE7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx4", "content": "Đang làm", "fill": "#16A34A", "fontFamily": "Poppins", "fontSize": 12}]}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StRow5",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StEmp5Cell",
|
||||
"width": 220,
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "StAv5", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#DBEAFE", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv5Tx", "content": "NN", "fill": "#2563EB", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]},
|
||||
{"type": "text", "id": "StName5", "content": "Ngô Ngọc", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "StPos5", "content": "Phục vụ", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StPhone5", "content": "0967 890 123", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StShift5", "content": "Toàn thời gian", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180},
|
||||
{"type": "frame", "id": "StStat5", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge5", "fill": "#DBEAFE", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx5", "content": "Thử việc", "fill": "#2563EB", "fontFamily": "Poppins", "fontSize": 12}]}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaginationStaff",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "PagInfoStaff", "content": "Hiển thị 1-5 / 12 nhân viên", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PagCtrlStaff",
|
||||
"layout": "horizontal",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PagPrevSt", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$bg-interactive", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "IcPrevSt", "iconFontFamily": "lucide", "iconFontName": "chevron-left", "width": 16, "height": 16, "fill": "$text-secondary"}]},
|
||||
{"type": "frame", "id": "PagPage1St", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$orange-primary", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Pg1TxSt", "content": "1", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "PagPage2St", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Pg2TxSt", "content": "2", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "PagPage3St", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Pg3TxSt", "content": "3", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "PagNextSt", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$bg-interactive", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "IcNextSt", "iconFontFamily": "lucide", "iconFontName": "chevron-right", "width": 16, "height": 16, "fill": "$text-secondary"}]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {"type": "color", "value": "#FAF8F4"},
|
||||
"bg-surface": {"type": "color", "value": "#FFFFFF"},
|
||||
"bg-elevated": {"type": "color", "value": "#FFF8F0"},
|
||||
"bg-interactive": {"type": "color", "value": "#F5EDE4"},
|
||||
"brown-primary": {"type": "color", "value": "#6B4423"},
|
||||
"brown-dark": {"type": "color", "value": "#4A2E15"},
|
||||
"orange-primary": {"type": "color", "value": "#FF6B35"},
|
||||
"orange-light": {"type": "color", "value": "#FF8A5C"},
|
||||
"text-primary": {"type": "color", "value": "#2C2C2C"},
|
||||
"text-secondary": {"type": "color", "value": "#6B6B6B"},
|
||||
"text-tertiary": {"type": "color", "value": "#9B9B9B"},
|
||||
"border-default": {"type": "color", "value": "#E5DDD4"},
|
||||
"border-subtle": {"type": "color", "value": "#F0EAE2"},
|
||||
"success": {"type": "color", "value": "#22C55E"},
|
||||
"warning": {"type": "color", "value": "#F59E0B"},
|
||||
"error": {"type": "color", "value": "#EF4444"}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,259 +0,0 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Auth/ForgotPassword",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"padding": [
|
||||
56,
|
||||
24,
|
||||
32,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotTopBar",
|
||||
"width": "fill_container",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotBackBtn",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ForgotBackIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "arrow-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotContent",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
32
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotIconWrap",
|
||||
"width": 80,
|
||||
"height": 80,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 20,
|
||||
"layout": "vertical",
|
||||
"padding": 20,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ForgotKeyIcon",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"iconFontName": "key",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ForgotTitle",
|
||||
"fill": "$text-primary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Quên mật khẩu?",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 26,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ForgotSubtitle",
|
||||
"fill": "$text-secondary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Nhập email hoặc số điện thoại để nhận mã xác nhận",
|
||||
"lineHeight": 1.4,
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotForm",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotEmailField",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ForgotEmailIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "mail",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ForgotEmailPlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Email hoặc số điện thoại",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotButton",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 30,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ForgotButtonText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Gửi mã xác nhận",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotSpacer",
|
||||
"width": 1,
|
||||
"height": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ForgotFooterLink",
|
||||
"fill": "$orange-primary",
|
||||
"content": "Quay lại đăng nhập",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,429 +0,0 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Auth/Login",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": [
|
||||
56,
|
||||
24,
|
||||
32,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginHeader",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginLogo",
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": "$brown-primary",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginLogoText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "EK",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Chào mừng trở lại!",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 26,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginSubtitle",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Đăng nhập vào EggyMon Kitchen",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginForm",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginEmailField",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "LoginEmailIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "mail",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginEmailPlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Email hoặc số điện thoại",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginPasswordField",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "LoginPasswordIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "lock",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginPasswordPlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Mật khẩu",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "LoginPasswordEye",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "eye-off",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginForgotLink",
|
||||
"fill": "$orange-primary",
|
||||
"content": "Quên mật khẩu?",
|
||||
"textAlign": "right",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginActions",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginButton",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 30,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginButtonText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Đăng nhập",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginDivider",
|
||||
"width": "fill_container",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginDividerLeft",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginDividerText",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "hoặc",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginDividerRight",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginSocialRow",
|
||||
"width": "fill_container",
|
||||
"gap": 16,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginGoogleBtn",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "#FFFFFF",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kUZ2H",
|
||||
"name": "googleG",
|
||||
"fill": "#EA4335",
|
||||
"content": "G",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginFacebookBtn",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "#FFFFFF",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Ul8Tr",
|
||||
"name": "facebookIcon",
|
||||
"width": 22,
|
||||
"height": 22,
|
||||
"iconFontName": "facebook",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#1877F2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginAppleBtn",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "#FFFFFF",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "d2CMB",
|
||||
"name": "appleIcon",
|
||||
"width": 22,
|
||||
"height": 22,
|
||||
"iconFontName": "apple",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginSpacer",
|
||||
"width": 1,
|
||||
"height": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginFooter",
|
||||
"gap": 4,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginFooterText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Chưa có tài khoản?",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginFooterLink",
|
||||
"fill": "$orange-primary",
|
||||
"content": "Đăng ký ngay",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,357 +0,0 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Auth/OtpVerify",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": [
|
||||
56,
|
||||
24,
|
||||
32,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpTopBar",
|
||||
"width": "fill_container",
|
||||
"padding": [
|
||||
0,
|
||||
0,
|
||||
16,
|
||||
0
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpBackBtn",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "#000000"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "OtpBackIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "chevron-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpContent",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpIconWrap",
|
||||
"width": 80,
|
||||
"height": 80,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 20,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "OtpShieldIcon",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"iconFontName": "shield-check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OtpTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Nhập mã xác nhận",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 26,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OtpSubtitle",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Mã OTP đã được gửi đến 0912***456",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpInputRow",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpBox1",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$orange-primary"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OtpDigit1",
|
||||
"fill": "$text-primary",
|
||||
"content": "4",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpBox2",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$orange-primary"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OtpDigit2",
|
||||
"fill": "$text-primary",
|
||||
"content": "7",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpBox3",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$orange-primary"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OtpDigit3",
|
||||
"fill": "$text-primary",
|
||||
"content": "2",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpBox4",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1.5,
|
||||
"fill": "#000000"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpBox5",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1.5,
|
||||
"fill": "#000000"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpBox6",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1.5,
|
||||
"fill": "#000000"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OtpTimer",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Gửi lại mã sau 00:45",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpButton",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 30,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OtpButtonText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Xác nhận",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OtpResendLink",
|
||||
"fill": "$orange-primary",
|
||||
"content": "Gửi lại mã OTP",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpSpacer",
|
||||
"width": 1,
|
||||
"height": "fill_container"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,562 +0,0 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Auth/PinEntry",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"padding": [
|
||||
56,
|
||||
24,
|
||||
32,
|
||||
24
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinHeader",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinLogo",
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": "$brown-primary",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PinLogoText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "EK",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PinTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Nhập mã PIN",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 26,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PinSubtitle",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Nhập mã PIN 6 số để truy cập",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinDotsRow",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinDot1",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinDot2",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinDot3",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinDot4",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"fill": "$border-default",
|
||||
"cornerRadius": 8,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 2,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinDot5",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"fill": "$border-default",
|
||||
"cornerRadius": 8,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 2,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinDot6",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"fill": "$border-default",
|
||||
"cornerRadius": 8,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 2,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinSpacer",
|
||||
"width": 1,
|
||||
"height": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinNumpad",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinRow1",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey1",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "3UVCU",
|
||||
"name": "num1",
|
||||
"fill": "$text-primary",
|
||||
"content": "1",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey2",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "q1PUd",
|
||||
"name": "num2",
|
||||
"fill": "$text-primary",
|
||||
"content": "2",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey3",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Fq93Z",
|
||||
"name": "num3",
|
||||
"fill": "$text-primary",
|
||||
"content": "3",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinRow2",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey4",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "GUYyP",
|
||||
"name": "num4",
|
||||
"fill": "$text-primary",
|
||||
"content": "4",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey5",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ryXMU",
|
||||
"name": "num5",
|
||||
"fill": "$text-primary",
|
||||
"content": "5",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey6",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "KEWRy",
|
||||
"name": "num6",
|
||||
"fill": "$text-primary",
|
||||
"content": "6",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinRow3",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey7",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "dyDQH",
|
||||
"name": "num7",
|
||||
"fill": "$text-primary",
|
||||
"content": "7",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey8",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Kzfef",
|
||||
"name": "num8",
|
||||
"fill": "$text-primary",
|
||||
"content": "8",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey9",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "bXeXd",
|
||||
"name": "num9",
|
||||
"fill": "$text-primary",
|
||||
"content": "9",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinRow4",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKeyDelete",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "xjJtr",
|
||||
"name": "delIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "delete",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey0",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Ra3cU",
|
||||
"name": "num0",
|
||||
"fill": "$text-primary",
|
||||
"content": "0",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKeyEnter",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "hzhLh",
|
||||
"name": "enterIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinFooter",
|
||||
"gap": 16,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PinSwitchUser",
|
||||
"fill": "$orange-primary",
|
||||
"content": "Đổi người dùng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinFooterDivider",
|
||||
"width": 1,
|
||||
"height": 16,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PinForgotPin",
|
||||
"fill": "$orange-primary",
|
||||
"content": "Quên PIN?",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,415 +0,0 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Auth/Register",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": [
|
||||
48,
|
||||
24,
|
||||
32,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterHeader",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterLogo",
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": "$brown-primary",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterLogoText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "EK",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Tạo tài khoản",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 26,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterSubtitle",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Đăng ký để nhận ưu đãi đặc biệt",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterForm",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterNameField",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RegisterNameIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "user",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterNamePlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Họ và tên",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterEmailField",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RegisterEmailIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "mail",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterEmailPlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Email",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterPhoneField",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RegisterPhoneIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "phone",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterPhonePlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Số điện thoại",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterPasswordField",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RegisterPasswordIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "lock",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterPasswordPlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Mật khẩu",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RegisterPasswordEye",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "eye-off",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterConfirmField",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RegisterConfirmIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "lock",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterConfirmPlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Xác nhận mật khẩu",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RegisterConfirmEye",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "eye-off",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterTermsRow",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterCheckbox",
|
||||
"width": 22,
|
||||
"height": 22,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 4,
|
||||
"stroke": {
|
||||
"thickness": 1.5,
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterTermsText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Tôi đồng ý với Điều khoản sử dụng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterButton",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 30,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterButtonText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Đăng ký",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterSpacer",
|
||||
"width": 1,
|
||||
"height": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterFooter",
|
||||
"gap": 4,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterFooterText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Đã có tài khoản?",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterFooterLink",
|
||||
"fill": "$orange-primary",
|
||||
"content": "Đăng nhập",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
@@ -1,940 +0,0 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MembershipCardScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Screen/MembershipCard",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MemberCardTopBar",
|
||||
"name": "TopBar",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-surface",
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "MemberCardBackIcon",
|
||||
"name": "BackIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "arrow-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MemberCardTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Thẻ thành viên",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "MemberCardSettingsIcon",
|
||||
"name": "SettingsIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "settings",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MemberCardContent",
|
||||
"name": "Content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": [
|
||||
12,
|
||||
0
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MembershipCardFrame",
|
||||
"name": "MembershipCard",
|
||||
"width": "fill_container",
|
||||
"height": 190,
|
||||
"fill": "$brown-primary",
|
||||
"cornerRadius": 20,
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#00000020",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 4
|
||||
},
|
||||
"blur": 16,
|
||||
"spread": -2
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 14,
|
||||
"padding": [
|
||||
22,
|
||||
20
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardTopRow",
|
||||
"name": "CardTopRow",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardLogoRow",
|
||||
"name": "LogoRow",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardLogo",
|
||||
"name": "Logo",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "#FFFFFF",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CardLogoText",
|
||||
"name": "LogoText",
|
||||
"content": "EK",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CardBrandName",
|
||||
"name": "BrandName",
|
||||
"content": "EggyMon Kitchen",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "GV2KT",
|
||||
"name": "logoIcon",
|
||||
"width": 28,
|
||||
"height": 28,
|
||||
"iconFontName": "coffee",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Pd7fO",
|
||||
"name": "logoText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Eggymon Kitchen",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierBadge",
|
||||
"name": "TierBadge",
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#FFD700",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#FFC700",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#00000010",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 2
|
||||
},
|
||||
"blur": 4
|
||||
},
|
||||
"gap": 4,
|
||||
"padding": [
|
||||
5,
|
||||
10
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TierBadgeIcon",
|
||||
"name": "TierIcon",
|
||||
"width": 0,
|
||||
"height": 0,
|
||||
"iconFontFamily": "lucide"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TierBadgeText",
|
||||
"name": "TierText",
|
||||
"content": "Gold Member",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "8eSos",
|
||||
"name": "tierIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#8B6914"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "fANNn",
|
||||
"name": "tierText",
|
||||
"fill": "#8B6914",
|
||||
"content": "Vàng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardMiddleSection",
|
||||
"name": "MiddleSection",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MemberName",
|
||||
"name": "MemberName",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Nguyễn Văn A",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MemberId",
|
||||
"name": "MemberId",
|
||||
"fill": "#DCC8AF",
|
||||
"content": "EK-2024-001234",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardBottomRow",
|
||||
"name": "BottomRow",
|
||||
"width": "fill_container",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CardPoints",
|
||||
"name": "Points",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "2,450 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "YKSsI",
|
||||
"name": "pointsLabel",
|
||||
"fill": "#D4C4B0",
|
||||
"content": "Điểm tích lũy",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "O4mLl",
|
||||
"name": "pointsIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "zap",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#FFD700"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QRCodeSection",
|
||||
"name": "QRCodeSection",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
8,
|
||||
0,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QRCodeFrame",
|
||||
"name": "QRCodeFrame",
|
||||
"width": 160,
|
||||
"height": 160,
|
||||
"fill": "#FFFFFF",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#00000008",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 2
|
||||
},
|
||||
"blur": 8
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": 16,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "QRCodeIcon",
|
||||
"name": "QRIcon",
|
||||
"width": 90,
|
||||
"height": 90,
|
||||
"iconFontName": "qr-code",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QRCodeLabel",
|
||||
"name": "QRLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "QR Code",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QRScanText",
|
||||
"name": "ScanText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Quét mã để tích điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickActionsRow",
|
||||
"name": "QuickActions",
|
||||
"width": "fill_container",
|
||||
"gap": 20,
|
||||
"padding": [
|
||||
0,
|
||||
20
|
||||
],
|
||||
"justifyContent": "space_around",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActionHistory",
|
||||
"name": "ActionHistory",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActionHistoryIconBg",
|
||||
"name": "IconBg",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ActionHistoryIcon",
|
||||
"name": "Icon",
|
||||
"width": 0,
|
||||
"height": 0,
|
||||
"iconFontFamily": "lucide"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "j5qFJ",
|
||||
"name": "historyIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "history",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$brown-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ActionHistoryLabel",
|
||||
"name": "Label",
|
||||
"fill": "$text-primary",
|
||||
"content": "Lịch sử",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActionRewards",
|
||||
"name": "ActionRewards",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActionRewardsIconBg",
|
||||
"name": "IconBg",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ActionRewardsIcon",
|
||||
"name": "Icon",
|
||||
"width": 0,
|
||||
"height": 0,
|
||||
"iconFontFamily": "lucide"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "jyeYW",
|
||||
"name": "rewardsIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "gift",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ActionRewardsLabel",
|
||||
"name": "Label",
|
||||
"fill": "$text-primary",
|
||||
"content": "Ưu đãi",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActionReferral",
|
||||
"name": "ActionReferral",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActionReferralIconBg",
|
||||
"name": "IconBg",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ActionReferralIcon",
|
||||
"name": "Icon",
|
||||
"width": 0,
|
||||
"height": 0,
|
||||
"iconFontFamily": "lucide"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "641iq",
|
||||
"name": "referralIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "users",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$brown-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ActionReferralLabel",
|
||||
"name": "Label",
|
||||
"fill": "$text-primary",
|
||||
"content": "Giới thiệu",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RecentActivitySection",
|
||||
"name": "RecentActivity",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"padding": [
|
||||
0,
|
||||
20,
|
||||
20,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RecentActivityTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Hoạt động gần đây",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActivityItem1",
|
||||
"name": "ActivityItem1",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 10,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
10,
|
||||
14
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Activity1IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "#DCFCE7",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Activity1Icon",
|
||||
"name": "Icon",
|
||||
"width": 0,
|
||||
"height": 0,
|
||||
"iconFontFamily": "lucide"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "lCR3h",
|
||||
"name": "activity1Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "shopping-bag",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$success"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Activity1Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity1Desc",
|
||||
"name": "Description",
|
||||
"fill": "$text-primary",
|
||||
"content": "Mua hàng - Combo bánh mì",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity1Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "10/02/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity1Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+50 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActivityItem2",
|
||||
"name": "ActivityItem2",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 10,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
10,
|
||||
14
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Activity2IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "#FFF3E0",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Activity2Icon",
|
||||
"name": "Icon",
|
||||
"width": 0,
|
||||
"height": 0,
|
||||
"iconFontFamily": "lucide"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "cDqsu",
|
||||
"name": "activity2Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "gift",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$warning"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Activity2Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity2Desc",
|
||||
"name": "Description",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đổi ưu đãi - Giảm 20%",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity2Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "08/02/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity2Points",
|
||||
"name": "Points",
|
||||
"fill": "$error",
|
||||
"content": "-100 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActivityItem3",
|
||||
"name": "ActivityItem3",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 10,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
10,
|
||||
14
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Activity3IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "#DCFCE7",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Activity3Icon",
|
||||
"name": "Icon",
|
||||
"width": 0,
|
||||
"height": 0,
|
||||
"iconFontFamily": "lucide"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "DDn1O",
|
||||
"name": "activity3Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "shopping-bag",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$success"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Activity3Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity3Desc",
|
||||
"name": "Description",
|
||||
"fill": "$text-primary",
|
||||
"content": "Mua hàng - Trà sữa",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity3Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "05/02/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity3Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+30 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"warning": {
|
||||
"type": "color",
|
||||
"value": "#F59E0B"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,799 +0,0 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PointsHistoryScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Screen/PointsHistory",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PointsTopBar",
|
||||
"name": "TopBar",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-surface",
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PointsBackIcon",
|
||||
"name": "BackIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "arrow-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PointsTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Lịch sử điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PointsFilterIcon",
|
||||
"name": "FilterIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "sliders-horizontal",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PointsScrollContent",
|
||||
"name": "ScrollContent",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PointsSummaryCard",
|
||||
"name": "SummaryCard",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SummaryLabel",
|
||||
"name": "Label",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Tổng điểm hiện tại",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SummaryTotal",
|
||||
"name": "TotalPoints",
|
||||
"fill": "$orange-primary",
|
||||
"content": "2,450",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 36,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SummaryStatsRow",
|
||||
"name": "StatsRow",
|
||||
"width": "fill_container",
|
||||
"gap": 20,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SummaryEarned",
|
||||
"name": "Earned",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EarnedLabel",
|
||||
"name": "Label",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Đã tích",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EarnedValue",
|
||||
"name": "Value",
|
||||
"fill": "$success",
|
||||
"content": "3,200",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SummaryDivider",
|
||||
"name": "Divider",
|
||||
"width": 1,
|
||||
"height": 40,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SummaryUsed",
|
||||
"name": "Used",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "UsedLabel",
|
||||
"name": "Label",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Đã dùng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "UsedValue",
|
||||
"name": "Value",
|
||||
"fill": "$text-secondary",
|
||||
"content": "750",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MonthFilterTabs",
|
||||
"name": "MonthFilter",
|
||||
"width": "fill_container",
|
||||
"gap": 8,
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MonthTab1",
|
||||
"name": "TabT1",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"padding": [
|
||||
6,
|
||||
12
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MonthTab1Text",
|
||||
"fill": "$text-secondary",
|
||||
"content": "T1",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MonthTab2",
|
||||
"name": "TabT2",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8,
|
||||
"padding": [
|
||||
6,
|
||||
12
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MonthTab2Text",
|
||||
"fill": "$bg-surface",
|
||||
"content": "T2",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MonthTab3",
|
||||
"name": "TabT3",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"padding": [
|
||||
6,
|
||||
12
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MonthTab3Text",
|
||||
"fill": "$text-secondary",
|
||||
"content": "T3",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MonthTab4",
|
||||
"name": "TabT4",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"padding": [
|
||||
6,
|
||||
12
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MonthTab4Text",
|
||||
"fill": "$text-secondary",
|
||||
"content": "T4",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MonthTab5",
|
||||
"name": "TabT5",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"padding": [
|
||||
6,
|
||||
12
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MonthTab5Text",
|
||||
"fill": "$text-secondary",
|
||||
"content": "T5",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MonthTab6",
|
||||
"name": "TabT6",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"padding": [
|
||||
6,
|
||||
12
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MonthTab6Text",
|
||||
"fill": "$text-secondary",
|
||||
"content": "T6",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TransactionList",
|
||||
"name": "TransactionList",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TxItem1",
|
||||
"name": "Transaction1",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
14,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx1IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#DCFCE7",
|
||||
"cornerRadius": 10,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Tx1Icon",
|
||||
"name": "Icon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "shopping-bag",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$success"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx1Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx1Desc",
|
||||
"name": "Description",
|
||||
"fill": "$text-primary",
|
||||
"content": "Mua hàng - Combo bánh mì",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx1Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "10/02/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx1Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+50 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TxItem2",
|
||||
"name": "Transaction2",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
14,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx2IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#FFF3E0",
|
||||
"cornerRadius": 10,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Tx2Icon",
|
||||
"name": "Icon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "gift",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$warning"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx2Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx2Desc",
|
||||
"name": "Description",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đổi ưu đãi - Giảm 20%",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx2Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "08/02/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx2Points",
|
||||
"name": "Points",
|
||||
"fill": "$orange-primary",
|
||||
"content": "-100 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TxItem3",
|
||||
"name": "Transaction3",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
14,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx3IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#DCFCE7",
|
||||
"cornerRadius": 10,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Tx3Icon",
|
||||
"name": "Icon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "coffee",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$success"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx3Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx3Desc",
|
||||
"name": "Description",
|
||||
"fill": "$text-primary",
|
||||
"content": "Mua hàng - Trà sữa",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx3Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "05/02/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx3Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+30 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TxItem4",
|
||||
"name": "Transaction4",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
14,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx4IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#FFF3E0",
|
||||
"cornerRadius": 10,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Tx4Icon",
|
||||
"name": "Icon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "cake",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$warning"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx4Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx4Desc",
|
||||
"name": "Description",
|
||||
"fill": "$text-primary",
|
||||
"content": "Thưởng sinh nhật",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx4Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "01/02/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx4Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+200 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TxItem5",
|
||||
"name": "Transaction5",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
14,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx5IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#DCFCE7",
|
||||
"cornerRadius": 10,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Tx5Icon",
|
||||
"name": "Icon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "utensils",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$success"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx5Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx5Desc",
|
||||
"name": "Description",
|
||||
"fill": "$text-primary",
|
||||
"content": "Mua hàng - Cơm trưa",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx5Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "28/01/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx5Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+45 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"warning": {
|
||||
"type": "color",
|
||||
"value": "#F59E0B"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,997 +0,0 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReferralProgramScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Screen/ReferralProgram",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 1022,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReferralTopBar",
|
||||
"name": "TopBar",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-surface",
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ReferralBackIcon",
|
||||
"name": "BackIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "arrow-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ReferralScreenTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Giới thiệu bạn bè",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReferralTopBarSpacer",
|
||||
"name": "Spacer",
|
||||
"width": "fill_container",
|
||||
"height": 24
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReferralScrollContent",
|
||||
"name": "ScrollContent",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 14,
|
||||
"padding": [
|
||||
16,
|
||||
16,
|
||||
32,
|
||||
16
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReferralHeroBanner",
|
||||
"name": "HeroBanner",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 20,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 18,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HeroIconBg",
|
||||
"name": "IconBg",
|
||||
"width": 56,
|
||||
"height": 56,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 28,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "HeroUsersIcon",
|
||||
"name": "Icon",
|
||||
"width": 28,
|
||||
"height": 28,
|
||||
"iconFontName": "users",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$brown-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "HeroTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Giới thiệu bạn bè",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 19,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "HeroSubtitle",
|
||||
"name": "Subtitle",
|
||||
"fill": "$text-secondary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Nhận 100 điểm cho mỗi bạn bè đăng ký!",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReferralCodeCard",
|
||||
"name": "ReferralCodeCard",
|
||||
"width": "fill_container",
|
||||
"fill": "$brown-primary",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "#FFFFFF33"
|
||||
},
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#6B442320",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 4
|
||||
},
|
||||
"blur": 12
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 14,
|
||||
"padding": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CodeLabel",
|
||||
"name": "Label",
|
||||
"fill": "#FFFFFFCC",
|
||||
"content": "Mã giới thiệu của bạn",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600",
|
||||
"letterSpacing": 0.3
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CodeBox",
|
||||
"name": "CodeBox",
|
||||
"width": "fill_container",
|
||||
"fill": "#FFFFFF1A",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "#FFFFFF1A"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"padding": [
|
||||
14,
|
||||
16
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CodeValue",
|
||||
"name": "Code",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "EGGY-VAN-A2024",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 20,
|
||||
"fontWeight": "700",
|
||||
"letterSpacing": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CodeActionRow",
|
||||
"name": "ActionRow",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CopyButton",
|
||||
"name": "CopyButton",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"fill": "#FFFFFF1A",
|
||||
"cornerRadius": 10,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "#FFFFFF1A"
|
||||
},
|
||||
"gap": 6,
|
||||
"padding": [
|
||||
12,
|
||||
0
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "CopyIcon",
|
||||
"name": "Icon",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"iconFontName": "copy",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CopyText",
|
||||
"name": "Text",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Sao chép",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShareButton",
|
||||
"name": "ShareButton",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 10,
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#FF6B3533",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 2
|
||||
},
|
||||
"blur": 4
|
||||
},
|
||||
"gap": 6,
|
||||
"padding": [
|
||||
12,
|
||||
0
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ShareIcon",
|
||||
"name": "Icon",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"iconFontName": "share-2",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShareText",
|
||||
"name": "Text",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Chia sẻ",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReferralStatsRow",
|
||||
"name": "StatsRow",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StatReferred",
|
||||
"name": "Referred",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#00000008",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 1
|
||||
},
|
||||
"blur": 3
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 16,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "StatReferredLabel",
|
||||
"name": "Label",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Đã giới thiệu",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "StatReferredValue",
|
||||
"name": "Value",
|
||||
"fill": "$text-primary",
|
||||
"content": "5",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StatPointsEarned",
|
||||
"name": "PointsEarned",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#00000008",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 1
|
||||
},
|
||||
"blur": 3
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 16,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "StatPointsLabel",
|
||||
"name": "Label",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Điểm nhận",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "StatPointsValue",
|
||||
"name": "Value",
|
||||
"fill": "$orange-primary",
|
||||
"content": "500",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HowItWorksSection",
|
||||
"name": "HowItWorks",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "HowItWorksTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Cách thức hoạt động",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600",
|
||||
"letterSpacing": 0.2
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step1",
|
||||
"name": "Step1",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step1IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Step1Icon",
|
||||
"name": "Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "share",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step1Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step1Label",
|
||||
"name": "Label",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Bước 1",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step1Text",
|
||||
"name": "Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Chia sẻ mã cho bạn bè",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step2",
|
||||
"name": "Step2",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step2IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Step2Icon",
|
||||
"name": "Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "user-plus",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step2Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step2Label",
|
||||
"name": "Label",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Bước 2",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step2Text",
|
||||
"name": "Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Bạn bè đăng ký & mua hàng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step3",
|
||||
"name": "Step3",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step3IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Step3Icon",
|
||||
"name": "Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "gift",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step3Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step3Label",
|
||||
"name": "Label",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Bước 3",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step3Text",
|
||||
"name": "Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Cả hai nhận 100 điểm!",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FriendsListSection",
|
||||
"name": "FriendsList",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "FriendsListTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Bạn bè đã giới thiệu",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600",
|
||||
"letterSpacing": 0.2
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FriendItem1",
|
||||
"name": "Friend1",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 10,
|
||||
"padding": [
|
||||
10,
|
||||
14
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Friend1Avatar",
|
||||
"name": "Avatar",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend1Initial",
|
||||
"name": "Initial",
|
||||
"fill": "$brown-primary",
|
||||
"content": "TB",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Friend1Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend1Name",
|
||||
"name": "Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Trần Bình",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend1Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Tham gia 05/01/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend1Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+100 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FriendItem2",
|
||||
"name": "Friend2",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 10,
|
||||
"padding": [
|
||||
10,
|
||||
14
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Friend2Avatar",
|
||||
"name": "Avatar",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend2Initial",
|
||||
"name": "Initial",
|
||||
"fill": "$brown-primary",
|
||||
"content": "LH",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Friend2Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend2Name",
|
||||
"name": "Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Lê Hương",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend2Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Tham gia 20/12/2024",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend2Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+100 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FriendItem3",
|
||||
"name": "Friend3",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 10,
|
||||
"padding": [
|
||||
10,
|
||||
14
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Friend3Avatar",
|
||||
"name": "Avatar",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend3Initial",
|
||||
"name": "Initial",
|
||||
"fill": "$brown-primary",
|
||||
"content": "PM",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Friend3Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend3Name",
|
||||
"name": "Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Phạm Minh",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend3Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Tham gia 15/11/2024",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend3Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+100 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"warning": {
|
||||
"type": "color",
|
||||
"value": "#F59E0B"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,979 +0,0 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardsCatalogScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Screen/RewardsCatalog",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 911,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardsTopBar",
|
||||
"name": "TopBar",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-surface",
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RewardsBackIcon",
|
||||
"name": "BackIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "chevron-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "wU2Gs",
|
||||
"name": "titleWrapper",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RewardsScreenTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đổi thưởng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RewardsFilterIcon",
|
||||
"name": "FilterIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "sliders-horizontal",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardsScrollContent",
|
||||
"name": "ScrollContent",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": [
|
||||
16,
|
||||
20,
|
||||
20,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PointsBalanceBar",
|
||||
"name": "PointsBalance",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"padding": [
|
||||
14,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BalanceLeft",
|
||||
"name": "Left",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "BalanceIcon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "coins",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BalanceText",
|
||||
"name": "Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Bạn có 2,450 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "BalanceArrow",
|
||||
"name": "Arrow",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "chevron-right",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CategoryTabs",
|
||||
"name": "CategoryTabs",
|
||||
"width": "fill_container",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CatTabAll",
|
||||
"name": "TabAll",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 20,
|
||||
"padding": [
|
||||
8,
|
||||
14
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CatTabAllText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Tất cả",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CatTabDiscount",
|
||||
"name": "TabDiscount",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 20,
|
||||
"padding": [
|
||||
8,
|
||||
14
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CatTabDiscountText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Giảm giá",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CatTabFree",
|
||||
"name": "TabFree",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 20,
|
||||
"padding": [
|
||||
8,
|
||||
14
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CatTabFreeText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Miễn phí",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CatTabGifts",
|
||||
"name": "TabGifts",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 20,
|
||||
"padding": [
|
||||
8,
|
||||
14
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CatTabGiftsText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Quà tặng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardsGrid",
|
||||
"name": "RewardsGrid",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "4yWVT",
|
||||
"name": "row1",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardCard1",
|
||||
"name": "RewardCoffee",
|
||||
"width": 166,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward1ImageArea",
|
||||
"name": "ImageArea",
|
||||
"width": "fill_container",
|
||||
"height": 100,
|
||||
"fill": "#FFE5D9",
|
||||
"cornerRadius": [
|
||||
16,
|
||||
16,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Reward1Icon",
|
||||
"name": "Icon",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"iconFontName": "coffee",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward1Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward1Title",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "1 ly cà phê miễn phí",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward1Points",
|
||||
"name": "Points",
|
||||
"fill": "$orange-primary",
|
||||
"content": "200 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward1Button",
|
||||
"name": "Button",
|
||||
"width": "fill_container",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"padding": [
|
||||
8,
|
||||
0
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward1BtnText",
|
||||
"name": "BtnText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Đổi ngay",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardCard2",
|
||||
"name": "RewardDiscount",
|
||||
"width": 166,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward2ImageArea",
|
||||
"name": "ImageArea",
|
||||
"width": "fill_container",
|
||||
"height": 100,
|
||||
"fill": "#FFE5D9",
|
||||
"cornerRadius": [
|
||||
16,
|
||||
16,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Reward2Icon",
|
||||
"name": "Icon",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"iconFontName": "percent",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward2Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward2Title",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Giảm 20% đơn tiếp theo",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward2Points",
|
||||
"name": "Points",
|
||||
"fill": "$orange-primary",
|
||||
"content": "100 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward2Button",
|
||||
"name": "Button",
|
||||
"width": "fill_container",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"padding": [
|
||||
8,
|
||||
0
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward2BtnText",
|
||||
"name": "BtnText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Đổi ngay",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Dw1Yp",
|
||||
"name": "row2",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardCard3",
|
||||
"name": "RewardCombo",
|
||||
"width": 166,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward3ImageArea",
|
||||
"name": "ImageArea",
|
||||
"width": "fill_container",
|
||||
"height": 100,
|
||||
"fill": "#FFE5D9",
|
||||
"cornerRadius": [
|
||||
16,
|
||||
16,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Reward3Icon",
|
||||
"name": "Icon",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"iconFontName": "sandwich",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward3Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward3Title",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Combo bánh + nước -50%",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward3Points",
|
||||
"name": "Points",
|
||||
"fill": "$orange-primary",
|
||||
"content": "350 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward3Button",
|
||||
"name": "Button",
|
||||
"width": "fill_container",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"padding": [
|
||||
8,
|
||||
0
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward3BtnText",
|
||||
"name": "BtnText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Đổi ngay",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardCard4",
|
||||
"name": "RewardShirt",
|
||||
"width": 166,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward4ImageArea",
|
||||
"name": "ImageArea",
|
||||
"width": "fill_container",
|
||||
"height": 100,
|
||||
"fill": "#FFE5D9",
|
||||
"cornerRadius": [
|
||||
16,
|
||||
16,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Reward4Icon",
|
||||
"name": "Icon",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"iconFontName": "shirt",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward4Tag",
|
||||
"name": "Tag",
|
||||
"fill": "$error",
|
||||
"cornerRadius": 6,
|
||||
"padding": [
|
||||
3,
|
||||
8
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward4TagText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Sắp hết",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward4Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward4Title",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Áo thun EggyMon",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward4Points",
|
||||
"name": "Points",
|
||||
"fill": "$orange-primary",
|
||||
"content": "500 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward4Button",
|
||||
"name": "Button",
|
||||
"width": "fill_container",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"padding": [
|
||||
8,
|
||||
0
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward4BtnText",
|
||||
"name": "BtnText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Đổi ngay",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "x81EV",
|
||||
"name": "row3",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardCard5",
|
||||
"name": "RewardMealSet",
|
||||
"width": 166,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward5ImageArea",
|
||||
"name": "ImageArea",
|
||||
"width": "fill_container",
|
||||
"height": 100,
|
||||
"fill": "#FFE5D9",
|
||||
"cornerRadius": [
|
||||
16,
|
||||
16,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Reward5Icon",
|
||||
"name": "Icon",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"iconFontName": "utensils",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward5Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward5Title",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Set ăn miễn phí",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward5Points",
|
||||
"name": "Points",
|
||||
"fill": "$orange-primary",
|
||||
"content": "800 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward5Button",
|
||||
"name": "Button",
|
||||
"width": "fill_container",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"padding": [
|
||||
8,
|
||||
0
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward5BtnText",
|
||||
"name": "BtnText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Đổi ngay",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardCard6",
|
||||
"name": "RewardVIP",
|
||||
"width": 166,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward6ImageArea",
|
||||
"name": "ImageArea",
|
||||
"width": "fill_container",
|
||||
"height": 100,
|
||||
"fill": "#FFE5D9",
|
||||
"cornerRadius": [
|
||||
16,
|
||||
16,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Reward6Icon",
|
||||
"name": "Icon",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"iconFontName": "crown",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward6Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward6Title",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Nâng hạng VIP",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward6Points",
|
||||
"name": "Points",
|
||||
"fill": "$orange-primary",
|
||||
"content": "1000 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward6Button",
|
||||
"name": "Button",
|
||||
"width": "fill_container",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"padding": [
|
||||
8,
|
||||
0
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward6BtnText",
|
||||
"name": "BtnText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Đổi ngay",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"warning": {
|
||||
"type": "color",
|
||||
"value": "#F59E0B"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,693 +0,0 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierProgressScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Screen/TierProgress",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierTopBar",
|
||||
"name": "TopBar",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-surface",
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TierBackIcon",
|
||||
"name": "BackIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "arrow-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TierScreenTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Hạng thành viên",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierScrollContent",
|
||||
"name": "ScrollContent",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CurrentTierCard",
|
||||
"name": "CurrentTierCard",
|
||||
"width": "fill_container",
|
||||
"fill": "#FFD700",
|
||||
"cornerRadius": 20,
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#00000015",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 4
|
||||
},
|
||||
"blur": 12
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 24,
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TierCrownIcon",
|
||||
"name": "CrownIcon",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"iconFontName": "crown",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#1F2937"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TierCurrentLabel",
|
||||
"name": "TierLabel",
|
||||
"fill": "#1F2937",
|
||||
"content": "Gold Member",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TierMemberName",
|
||||
"name": "MemberName",
|
||||
"fill": "#374151",
|
||||
"content": "Nguyễn Văn A",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TierPointsProgress",
|
||||
"name": "PointsProgress",
|
||||
"fill": "#4B5563",
|
||||
"content": "2,450 / 5,000 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierProgressBarBg",
|
||||
"name": "ProgressBarBg",
|
||||
"width": "fill_container",
|
||||
"height": 12,
|
||||
"fill": "#FFFFFF66",
|
||||
"cornerRadius": 6,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierProgressBarFill",
|
||||
"name": "ProgressBarFill",
|
||||
"width": 148,
|
||||
"height": 12,
|
||||
"fill": "#FFFFFF",
|
||||
"cornerRadius": 6
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TierRemainingText",
|
||||
"name": "RemainingText",
|
||||
"fill": "#6B7280",
|
||||
"content": "Còn 2,550 điểm để lên Platinum",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierRoadmapSection",
|
||||
"name": "TierRoadmap",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierRoadmapBronze",
|
||||
"name": "BronzeTier",
|
||||
"width": "fill_container",
|
||||
"fill": "#F9FAFB",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "#E5E7EB"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BronzeIconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "#CD7F32",
|
||||
"cornerRadius": 18,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "BronzeCheckIcon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BronzeInfo",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BronzeName",
|
||||
"name": "Name",
|
||||
"fill": "#1F2937",
|
||||
"content": "Bronze",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BronzeDesc",
|
||||
"name": "Description",
|
||||
"fill": "#6B7280",
|
||||
"content": "0 điểm - Tích điểm cơ bản",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierConnectorLine1",
|
||||
"name": "Connector1",
|
||||
"width": 2,
|
||||
"height": 20,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierRoadmapSilver",
|
||||
"name": "SilverTier",
|
||||
"width": "fill_container",
|
||||
"fill": "#F9FAFB",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "#E5E7EB"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SilverIconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "#C0C0C0",
|
||||
"cornerRadius": 18,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "SilverCheckIcon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SilverInfo",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SilverName",
|
||||
"name": "Name",
|
||||
"fill": "#1F2937",
|
||||
"content": "Silver",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SilverDesc",
|
||||
"name": "Description",
|
||||
"fill": "#6B7280",
|
||||
"content": "500 điểm - Giảm 5% mọi đơn",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierConnectorLine2",
|
||||
"name": "Connector2",
|
||||
"width": 2,
|
||||
"height": 20,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierRoadmapGold",
|
||||
"name": "GoldTier",
|
||||
"width": "fill_container",
|
||||
"fill": "#FFF8E1",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 2,
|
||||
"fill": "#FFD700"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "GoldIconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "#FFD700",
|
||||
"cornerRadius": 18,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "GoldStarIcon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#1F2937"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "GoldInfo",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "GoldName",
|
||||
"name": "Name",
|
||||
"fill": "#1F2937",
|
||||
"content": "Gold (Hiện tại)",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "GoldDesc",
|
||||
"name": "Description",
|
||||
"fill": "#1F2937",
|
||||
"content": "2,000 điểm - Giảm 10%, x2 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierConnectorLine3",
|
||||
"name": "Connector3",
|
||||
"width": 2,
|
||||
"height": 20,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierRoadmapPlatinum",
|
||||
"name": "PlatinumTier",
|
||||
"opacity": 0.6,
|
||||
"width": "fill_container",
|
||||
"fill": "#F9FAFB",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "#E5E7EB"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PlatinumIconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "#A78BFA",
|
||||
"cornerRadius": 18,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PlatinumLockIcon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "lock",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PlatinumInfo",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PlatinumName",
|
||||
"name": "Name",
|
||||
"fill": "#1F2937",
|
||||
"content": "Platinum",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PlatinumDesc",
|
||||
"name": "Description",
|
||||
"fill": "#6B7280",
|
||||
"content": "5,000 điểm - Giảm 15%, x3 điểm, VIP",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "GoldBenefitsSection",
|
||||
"name": "GoldBenefits",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#00000010",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 2
|
||||
},
|
||||
"blur": 8
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BenefitsTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Quyền lợi Gold",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Benefit1",
|
||||
"name": "Benefit1",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Benefit1Icon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "tag",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#10B981"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Benefit1Text",
|
||||
"name": "Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Giảm 10% tất cả đơn hàng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Benefit2",
|
||||
"name": "Benefit2",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Benefit2Icon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "zap",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#F59E0B"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Benefit2Text",
|
||||
"name": "Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Tích điểm x2",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Benefit3",
|
||||
"name": "Benefit3",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Benefit3Icon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "gift",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#EC4899"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Benefit3Text",
|
||||
"name": "Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Ưu đãi sinh nhật đặc biệt",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Benefit4",
|
||||
"name": "Benefit4",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Benefit4Icon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#8B5CF6"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Benefit4Text",
|
||||
"name": "Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Ưu tiên phục vụ",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"warning": {
|
||||
"type": "color",
|
||||
"value": "#F59E0B"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,854 +0,0 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ItemDetailScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "POS/ItemDetail",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 1176,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailTopBar",
|
||||
"name": "DetailTopBar",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-surface",
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "DetailBackIcon",
|
||||
"name": "DetailBackIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "chevron-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DetailTopTitle",
|
||||
"name": "DetailTopTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Chi tiết món",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "DetailFavIcon",
|
||||
"name": "DetailFavIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "heart",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailScrollContent",
|
||||
"name": "DetailScrollContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailImageArea",
|
||||
"name": "DetailImageArea",
|
||||
"metadata": {
|
||||
"type": "unsplash",
|
||||
"username": "madeline_sd",
|
||||
"link": "https://unsplash.com/@madeline_sd",
|
||||
"author": "Madeline Liu"
|
||||
},
|
||||
"width": "fill_container",
|
||||
"height": 240,
|
||||
"fill": {
|
||||
"type": "image",
|
||||
"enabled": true,
|
||||
"url": "https://images.unsplash.com/photo-1717749790652-f3db782af52e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NzA4MjA1ODV8&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
"mode": "fill"
|
||||
},
|
||||
"cornerRadius": [
|
||||
0,
|
||||
0,
|
||||
24,
|
||||
24
|
||||
],
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailInfoSection",
|
||||
"name": "DetailInfoSection",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DetailItemTitle",
|
||||
"name": "DetailItemTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Cơm trứng chiên đặc biệt",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailMetaRow",
|
||||
"name": "DetailMetaRow",
|
||||
"width": "fill_container",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailRatingGroup",
|
||||
"name": "DetailRatingGroup",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "jItXZ",
|
||||
"name": "DetailStarIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$warning"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "aTYHX",
|
||||
"name": "DetailRatingText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "4.8",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailTimeGroup",
|
||||
"name": "DetailTimeGroup",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "su4KQ",
|
||||
"name": "DetailClockIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "clock-3",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "KK8z7",
|
||||
"name": "DetailTimeText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "15-20 phút",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DetailPrice",
|
||||
"name": "DetailPrice",
|
||||
"fill": "$orange-primary",
|
||||
"content": "45,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DetailDesc",
|
||||
"name": "DetailDesc",
|
||||
"fill": "$text-secondary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Cơm trắng dẻo thơm với trứng chiên vàng giòn, kèm xúc xích, rau xà lách và nước tương đặc biệt.",
|
||||
"lineHeight": 1.5,
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SizeSection",
|
||||
"name": "SizeSection",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
12,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SizeLabel",
|
||||
"name": "SizeLabel",
|
||||
"fill": "$text-primary",
|
||||
"content": "Kích cỡ",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SizeOptions",
|
||||
"name": "SizeOptions",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SizeSmall",
|
||||
"name": "SizeSmall",
|
||||
"width": "fill_container",
|
||||
"height": 42,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "8sOQJ",
|
||||
"name": "SizeSmallText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Nhỏ",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SizeMedium",
|
||||
"name": "SizeMedium",
|
||||
"width": "fill_container",
|
||||
"height": 42,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LsatE",
|
||||
"name": "SizeMediumText",
|
||||
"fill": "$bg-surface",
|
||||
"content": "Vừa",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SizeLarge",
|
||||
"name": "SizeLarge",
|
||||
"width": "fill_container",
|
||||
"height": 42,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "C5HoM",
|
||||
"name": "SizeLargeText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Lớn +10,000đ",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ToppingSection",
|
||||
"name": "ToppingSection",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 14,
|
||||
"padding": [
|
||||
12,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ToppingLabel",
|
||||
"name": "ToppingLabel",
|
||||
"fill": "$text-primary",
|
||||
"content": "Thêm topping",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Topping1",
|
||||
"name": "Topping1",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"padding": [
|
||||
0,
|
||||
4
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Topping1Left",
|
||||
"name": "Topping1Left",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "82R7Z",
|
||||
"name": "Topping1Check",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"cornerRadius": 6,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "shhUO",
|
||||
"name": "Topping1Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Trứng ốp la",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Topping1Price",
|
||||
"name": "Topping1Price",
|
||||
"fill": "$text-secondary",
|
||||
"content": "+5,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Topping2",
|
||||
"name": "Topping2",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"padding": [
|
||||
0,
|
||||
4
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Topping2Left",
|
||||
"name": "Topping2Left",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "V0gge",
|
||||
"name": "Topping2Check",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 6,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "6UlRe",
|
||||
"name": "t2Icon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$bg-surface"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "hHSLJ",
|
||||
"name": "Topping2Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Phô mai",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Topping2Price",
|
||||
"name": "Topping2Price",
|
||||
"fill": "$text-secondary",
|
||||
"content": "+8,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Topping3",
|
||||
"name": "Topping3",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"padding": [
|
||||
0,
|
||||
4
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Topping3Left",
|
||||
"name": "Topping3Left",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "raejk",
|
||||
"name": "Topping3Check",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"cornerRadius": 6,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "j1UGc",
|
||||
"name": "Topping3Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Xúc xích",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Topping3Price",
|
||||
"name": "Topping3Price",
|
||||
"fill": "$text-secondary",
|
||||
"content": "+6,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Topping4",
|
||||
"name": "Topping4",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"padding": [
|
||||
0,
|
||||
4
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Topping4Left",
|
||||
"name": "Topping4Left",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RrI77",
|
||||
"name": "Topping4Check",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"cornerRadius": 6,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "GjPTt",
|
||||
"name": "Topping4Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Rau củ",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Topping4Price",
|
||||
"name": "Topping4Price",
|
||||
"fill": "$text-secondary",
|
||||
"content": "+3,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NoteSection",
|
||||
"name": "NoteSection",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"padding": [
|
||||
12,
|
||||
20,
|
||||
20,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NoteLabel",
|
||||
"name": "NoteLabel",
|
||||
"fill": "$text-primary",
|
||||
"content": "Ghi chú đặc biệt",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NoteInput",
|
||||
"name": "NoteInput",
|
||||
"width": "fill_container",
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1.5,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"padding": [
|
||||
12,
|
||||
14
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NotePlaceholder",
|
||||
"name": "NotePlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "VD: Ít muối, không hành...",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtySection",
|
||||
"name": "QtySection",
|
||||
"width": "fill_container",
|
||||
"gap": 20,
|
||||
"padding": [
|
||||
12,
|
||||
20,
|
||||
20,
|
||||
20
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyMinus",
|
||||
"name": "QtyMinus",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "QtyMinusIcon",
|
||||
"name": "QtyMinusIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "minus",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QtyValue",
|
||||
"name": "QtyValue",
|
||||
"fill": "$text-primary",
|
||||
"content": "1",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 20,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyPlus",
|
||||
"name": "QtyPlus",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "QtyPlusIcon",
|
||||
"name": "QtyPlusIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "plus",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$bg-surface"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailBottomBar",
|
||||
"name": "DetailBottomBar",
|
||||
"width": "fill_container",
|
||||
"height": 80,
|
||||
"fill": "$bg-surface",
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailTotalGroup",
|
||||
"name": "DetailTotalGroup",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DetailTotalLabel",
|
||||
"name": "DetailTotalLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Tổng cộng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DetailTotalPrice",
|
||||
"name": "DetailTotalPrice",
|
||||
"fill": "$text-primary",
|
||||
"content": "55,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 20,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddToCartBtn",
|
||||
"name": "AddToCartBtn",
|
||||
"width": 200,
|
||||
"height": 50,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 30,
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "AddToCartIcon",
|
||||
"name": "AddToCartIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "shopping-cart",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$bg-surface"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AddToCartText",
|
||||
"name": "AddToCartText",
|
||||
"fill": "$bg-surface",
|
||||
"content": "Thêm vào giỏ",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"warning": {
|
||||
"type": "color",
|
||||
"value": "#F59E0B"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,483 +0,0 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderCompleteScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "POS/OrderComplete",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 952,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CompleteScrollContent",
|
||||
"name": "CompleteScrollContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": [
|
||||
40,
|
||||
20,
|
||||
20,
|
||||
20
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SuccessIconWrap",
|
||||
"name": "SuccessIconWrap",
|
||||
"width": 100,
|
||||
"height": 100,
|
||||
"fill": "#22C55E20",
|
||||
"cornerRadius": 50,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "SuccessCheckIcon",
|
||||
"name": "SuccessCheckIcon",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$success"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CompleteTitle",
|
||||
"name": "CompleteTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đơn hàng sẵn sàng!",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CompleteSubtitle",
|
||||
"name": "CompleteSubtitle",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Vui lòng đến quầy nhận món",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderInfoCard",
|
||||
"name": "OrderInfoCard",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": 24,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderInfoLabel",
|
||||
"name": "OrderInfoLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Mã đơn hàng",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderInfoId",
|
||||
"name": "OrderInfoId",
|
||||
"fill": "$text-primary",
|
||||
"content": "#EK-0087",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 28,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerNameRow",
|
||||
"name": "CustomerNameRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CustomerNameLabel",
|
||||
"name": "CustomerNameLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Tên khách",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CustomerNameValue",
|
||||
"name": "CustomerNameValue",
|
||||
"fill": "$text-primary",
|
||||
"content": "Nguyễn Văn A",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderTypeRow",
|
||||
"name": "OrderTypeRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderTypeLabel",
|
||||
"name": "OrderTypeLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Hình thức",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderTypeValue",
|
||||
"name": "OrderTypeValue",
|
||||
"fill": "$text-primary",
|
||||
"content": "Tại quán",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderInfoDivider",
|
||||
"name": "OrderInfoDivider",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ItemsSummary",
|
||||
"name": "ItemsSummary",
|
||||
"fill": "$text-primary",
|
||||
"content": "3 mon - 130,000d",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PickupNumberCard",
|
||||
"name": "PickupNumberCard",
|
||||
"width": "fill_container",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [
|
||||
24,
|
||||
20
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PickupNumberLabel",
|
||||
"name": "PickupNumberLabel",
|
||||
"fill": "$bg-surface",
|
||||
"content": "Số thứ tự",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PickupNumberValue",
|
||||
"name": "PickupNumberValue",
|
||||
"fill": "$bg-surface",
|
||||
"content": "087",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 64,
|
||||
"fontWeight": "800"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RatingSection",
|
||||
"name": "RatingSection",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": 20,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RatingSectionTitle",
|
||||
"name": "RatingSectionTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đánh giá trải nghiệm",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StarRow",
|
||||
"name": "StarRow",
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RatingStar1",
|
||||
"name": "RatingStar1",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RatingStar2",
|
||||
"name": "RatingStar2",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RatingStar3",
|
||||
"name": "RatingStar3",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RatingStar4",
|
||||
"name": "RatingStar4",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RatingStar5",
|
||||
"name": "RatingStar5",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RatingTextArea",
|
||||
"name": "RatingTextArea",
|
||||
"width": "fill_container",
|
||||
"height": 72,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"padding": [
|
||||
12,
|
||||
14
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RatingPlaceholder",
|
||||
"name": "RatingPlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Chia sẻ cảm nhận của bạn...",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CompleteBottomBar",
|
||||
"name": "CompleteBottomBar",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"padding": [
|
||||
12,
|
||||
20,
|
||||
20,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderMoreBtn",
|
||||
"name": "OrderMoreBtn",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 30,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderMoreText",
|
||||
"name": "OrderMoreText",
|
||||
"fill": "$bg-surface",
|
||||
"content": "Đặt thêm món",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "GoHomeBtn",
|
||||
"name": "GoHomeBtn",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "GoHomeText",
|
||||
"name": "GoHomeText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Về trang chủ",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"warning": {
|
||||
"type": "color",
|
||||
"value": "#F59E0B"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,787 +0,0 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderTrackingScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "POS/OrderTracking",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 903,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrackTopBar",
|
||||
"name": "TrackTopBar",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-surface",
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TrackBackIcon",
|
||||
"name": "TrackBackIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "chevron-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TrackTopTitle",
|
||||
"name": "TrackTopTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Theo dõi đơn hàng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TrackPhoneIcon",
|
||||
"name": "TrackPhoneIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "phone",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrackScrollContent",
|
||||
"name": "TrackScrollContent",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": [
|
||||
16,
|
||||
16,
|
||||
24,
|
||||
16
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderIdRow",
|
||||
"name": "OrderIdRow",
|
||||
"width": "fill_container",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderIdText",
|
||||
"name": "OrderIdText",
|
||||
"fill": "$text-primary",
|
||||
"content": "#EK-0087",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 20,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderTimeText",
|
||||
"name": "OrderTimeText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "14:32 - 10/02/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StatusTimeline",
|
||||
"name": "StatusTimeline",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step1",
|
||||
"name": "Step1",
|
||||
"width": "fill_container",
|
||||
"gap": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step1DotCol",
|
||||
"name": "Step1DotCol",
|
||||
"width": 24,
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step1Dot",
|
||||
"name": "Step1Dot",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"fill": "$success",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Step1Check",
|
||||
"name": "Step1Check",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$bg-surface"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step1Line",
|
||||
"name": "Step1Line",
|
||||
"width": 2,
|
||||
"height": 28,
|
||||
"fill": "$success"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step1Content",
|
||||
"name": "Step1Content",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step1Title",
|
||||
"name": "Step1Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đã nhận đơn",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step1Time",
|
||||
"name": "Step1Time",
|
||||
"fill": "$text-secondary",
|
||||
"content": "14:32",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step2",
|
||||
"name": "Step2",
|
||||
"width": "fill_container",
|
||||
"gap": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step2DotCol",
|
||||
"name": "Step2DotCol",
|
||||
"width": 24,
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step2Dot",
|
||||
"name": "Step2Dot",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"fill": "$success",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Step2Check",
|
||||
"name": "Step2Check",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$bg-surface"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step2Line",
|
||||
"name": "Step2Line",
|
||||
"width": 2,
|
||||
"height": 28,
|
||||
"fill": "$success"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step2Content",
|
||||
"name": "Step2Content",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step2Title",
|
||||
"name": "Step2Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đã xác nhận",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step2Time",
|
||||
"name": "Step2Time",
|
||||
"fill": "$text-secondary",
|
||||
"content": "14:33",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step3",
|
||||
"name": "Step3",
|
||||
"width": "fill_container",
|
||||
"gap": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step3DotCol",
|
||||
"name": "Step3DotCol",
|
||||
"width": 24,
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step3Dot",
|
||||
"name": "Step3Dot",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Step3ActiveIcon",
|
||||
"name": "Step3ActiveIcon",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"iconFontName": "loader",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$bg-surface"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step3Line",
|
||||
"name": "Step3Line",
|
||||
"width": 2,
|
||||
"height": 28,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step3Content",
|
||||
"name": "Step3Content",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step3Title",
|
||||
"name": "Step3Title",
|
||||
"fill": "$orange-primary",
|
||||
"content": "Đang chế biến",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step3Time",
|
||||
"name": "Step3Time",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Dự kiến 10-15 phút",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step4",
|
||||
"name": "Step4",
|
||||
"width": "fill_container",
|
||||
"gap": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step4DotCol",
|
||||
"name": "Step4DotCol",
|
||||
"width": 24,
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step4Dot",
|
||||
"name": "Step4Dot",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step4Line",
|
||||
"name": "Step4Line",
|
||||
"width": 2,
|
||||
"height": 28,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step4Content",
|
||||
"name": "Step4Content",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step4Title",
|
||||
"name": "Step4Title",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Sẵn sàng lấy",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step5",
|
||||
"name": "Step5",
|
||||
"width": "fill_container",
|
||||
"gap": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step5DotCol",
|
||||
"name": "Step5DotCol",
|
||||
"width": 24,
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step5Dot",
|
||||
"name": "Step5Dot",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step5Content",
|
||||
"name": "Step5Content",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step5Title",
|
||||
"name": "Step5Title",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Hoàn thành",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EstimatedTimeCard",
|
||||
"name": "EstimatedTimeCard",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 20,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "EstClockIcon",
|
||||
"name": "EstClockIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "timer",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EstLabel",
|
||||
"name": "EstLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Dự kiến hoàn thành",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EstTime",
|
||||
"name": "EstTime",
|
||||
"fill": "$orange-primary",
|
||||
"content": "14:47",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 36,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EstRemaining",
|
||||
"name": "EstRemaining",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Còn khoảng 12 phút",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProgressBarBg",
|
||||
"name": "ProgressBarBg",
|
||||
"width": "fill_container",
|
||||
"height": 6,
|
||||
"fill": "$border-subtle",
|
||||
"cornerRadius": 3,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProgressBarFill",
|
||||
"name": "ProgressBarFill",
|
||||
"width": "fill_container",
|
||||
"height": 6,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 3
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderDetailsCard",
|
||||
"name": "OrderDetailsCard",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderDetailsTitle",
|
||||
"name": "OrderDetailsTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Chi tiết đơn hàng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderDetailItem1",
|
||||
"name": "OrderDetailItem1",
|
||||
"width": "fill_container",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ODItem1Name",
|
||||
"name": "ODItem1Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Cơm trứng chiên x2",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ODItem1Price",
|
||||
"name": "ODItem1Price",
|
||||
"fill": "$text-primary",
|
||||
"content": "100,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderDetailItem2",
|
||||
"name": "OrderDetailItem2",
|
||||
"width": "fill_container",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ODItem2Name",
|
||||
"name": "ODItem2Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Trà sữa oolong x1",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ODItem2Price",
|
||||
"name": "ODItem2Price",
|
||||
"fill": "$text-primary",
|
||||
"content": "40,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderDetailItem3",
|
||||
"name": "OrderDetailItem3",
|
||||
"width": "fill_container",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ODItem3Name",
|
||||
"name": "ODItem3Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Bánh mì trứng ốp la x1",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ODItem3Price",
|
||||
"name": "ODItem3Price",
|
||||
"fill": "$text-primary",
|
||||
"content": "25,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderDetailDivider",
|
||||
"name": "OrderDetailDivider",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderDetailTotal",
|
||||
"name": "OrderDetailTotal",
|
||||
"width": "fill_container",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ODTotalLabel",
|
||||
"name": "ODTotalLabel",
|
||||
"fill": "$text-primary",
|
||||
"content": "Tổng cộng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ODTotalValue",
|
||||
"name": "ODTotalValue",
|
||||
"fill": "$orange-primary",
|
||||
"content": "130,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CancelOrderBtn",
|
||||
"name": "CancelOrderBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CancelOrderText",
|
||||
"name": "CancelOrderText",
|
||||
"fill": "$error",
|
||||
"content": "Hủy đơn",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"warning": {
|
||||
"type": "color",
|
||||
"value": "#F59E0B"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user