Initial commit
This commit is contained in:
Zhongwei Li
68
skills/fluxwing-screen-scaffolder/templates/dashboard.md
Normal file
68
skills/fluxwing-screen-scaffolder/templates/dashboard.md
Normal file
@@ -0,0 +1,68 @@
|
||||
# Dashboard
|
||||
|
||||
Main application dashboard with key metrics and recent activity.
|
||||
|
||||
## Layout
|
||||
|
||||
```
|
||||
╭──────────────────────────────────────────────────────────────────────────────╮
|
||||
│ {{title}} {{userName}} ▼ │
|
||||
├──────────────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ {{greeting}} │
|
||||
│ │
|
||||
│ ╭───────────────────╮ ╭───────────────────╮ ╭──────────────────────╮ │
|
||||
│ │ {{metricCard1}} │ │ {{metricCard2}} │ │ {{metricCard3}} │ │
|
||||
│ ╰───────────────────╯ ╰───────────────────╯ ╰──────────────────────╯ │
|
||||
│ │
|
||||
│ {{recentActivityTitle}} │
|
||||
│ ╭────────────────────────────────────────────────────────────────────────╮ │
|
||||
│ │ {{activityList}} │ │
|
||||
│ ╰────────────────────────────────────────────────────────────────────────╯ │
|
||||
│ │
|
||||
╰──────────────────────────────────────────────────────────────────────────────╯
|
||||
```
|
||||
|
||||
## Components Used
|
||||
|
||||
- **navigation**: Top navigation bar with user menu
|
||||
- **card**: Metric cards for key statistics (3x)
|
||||
- **badge**: Status indicators and trend arrows
|
||||
- **list**: Recent activity feed
|
||||
|
||||
## States
|
||||
|
||||
### Loaded State
|
||||
Dashboard fully loaded with all data displayed.
|
||||
|
||||
### Loading State
|
||||
While fetching dashboard data - shows spinner.
|
||||
|
||||
### Error State
|
||||
When data fetch fails - shows error message.
|
||||
|
||||
## Variables
|
||||
|
||||
- `title` (string): Dashboard title
|
||||
- `userName` (string): Current user's name
|
||||
- `greeting` (string): Personalized greeting
|
||||
- `metricCard1` (component): First metric card (e.g., Revenue)
|
||||
- `metricCard2` (component): Second metric card (e.g., Users)
|
||||
- `metricCard3` (component): Third metric card (e.g., Growth)
|
||||
- `recentActivityTitle` (string): Activity section header
|
||||
- `activityList` (component): List of recent activities
|
||||
|
||||
## User Flows
|
||||
|
||||
1. User logs in and lands on dashboard
|
||||
2. Dashboard loads metrics and activity data
|
||||
3. User can click metric cards for detailed views
|
||||
4. User can interact with activity items
|
||||
5. User can access navigation menu via dropdown
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: main
|
||||
- **ARIA Label**: "Dashboard main content"
|
||||
- **Keyboard**: Tab navigation through interactive elements
|
||||
- **Screen Reader**: All metrics and activities properly labeled
|
||||
@@ -0,0 +1,186 @@
|
||||
# Dashboard - Rendered Example
|
||||
|
||||
This shows the actual dashboard with realistic metrics and activity data.
|
||||
|
||||
## Loaded State (Default)
|
||||
|
||||
```
|
||||
╭──────────────────────────────────────────────────────────────────────────────╮
|
||||
│ Dashboard Sarah Johnson ▼ │
|
||||
├──────────────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Welcome back, Sarah! Here's what's happening today. │
|
||||
│ │
|
||||
│ ╭───────────────────╮ ╭───────────────────╮ ╭──────────────────────╮ │
|
||||
│ │ Revenue │ │ Active Users │ │ Growth │ │
|
||||
│ │ ───────────────── │ │ ───────────────── │ │ ─────────────────── │ │
|
||||
│ │ $24,567 │ │ 1,234 │ │ +12.5% │ │
|
||||
│ │ +8.3% ↗ │ │ +45 today │ │ MoM │ │
|
||||
│ ╰───────────────────╯ ╰───────────────────╯ ╰──────────────────────╯ │
|
||||
│ │
|
||||
│ Recent Activity │
|
||||
│ ╭────────────────────────────────────────────────────────────────────────╮ │
|
||||
│ │ • John Doe signed up 2 minutes ago │ │
|
||||
│ │ • New order #1234 received 5 minutes ago │ │
|
||||
│ │ • Sarah Johnson updated profile 8 minutes ago │ │
|
||||
│ │ • Mike Smith completed onboarding 15 minutes ago │ │
|
||||
│ │ • System backup completed successfully 22 minutes ago │ │
|
||||
│ ╰────────────────────────────────────────────────────────────────────────╯ │
|
||||
│ │
|
||||
╰──────────────────────────────────────────────────────────────────────────────╯
|
||||
```
|
||||
|
||||
## Loading State
|
||||
|
||||
```
|
||||
╭──────────────────────────────────────────────────────────────────────────────╮
|
||||
│ Dashboard Sarah Johnson ▼ │
|
||||
├──────────────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ │
|
||||
│ ⠋ Loading dashboard... │
|
||||
│ │
|
||||
│ │
|
||||
╰──────────────────────────────────────────────────────────────────────────────╯
|
||||
```
|
||||
|
||||
## Data Context
|
||||
|
||||
This example demonstrates:
|
||||
|
||||
### User Information
|
||||
- **User**: Sarah Johnson (logged in)
|
||||
- **Time**: October 11, 2024, 3:45 PM
|
||||
- **Greeting**: Personalized with name and time-appropriate message
|
||||
|
||||
### Metric Cards
|
||||
|
||||
**Card 1: Revenue**
|
||||
- Value: $24,567 (monthly revenue)
|
||||
- Trend: +8.3% ↗ (positive growth from last month)
|
||||
- Visual: Green trend indicator
|
||||
|
||||
**Card 2: Active Users**
|
||||
- Value: 1,234 (total active users)
|
||||
- Change: +45 today (new users today)
|
||||
- Visual: User count with daily change
|
||||
|
||||
**Card 3: Growth**
|
||||
- Value: +12.5% (percentage growth)
|
||||
- Period: MoM (month over month)
|
||||
- Visual: Growth percentage
|
||||
|
||||
### Recent Activity
|
||||
|
||||
Real activity entries with timestamps:
|
||||
1. **John Doe signed up** - 2 minutes ago
|
||||
2. **New order #1234 received** - 5 minutes ago
|
||||
3. **Sarah Johnson updated profile** - 8 minutes ago
|
||||
4. **Mike Smith completed onboarding** - 15 minutes ago
|
||||
5. **System backup completed successfully** - 22 minutes ago
|
||||
|
||||
## User Flow Demonstration
|
||||
|
||||
### Step 1: Login Complete
|
||||
User successfully authenticates
|
||||
→ Dashboard loads
|
||||
|
||||
### Step 2: Data Fetch
|
||||
System retrieves:
|
||||
- Latest metrics
|
||||
- Recent activity
|
||||
- User preferences
|
||||
|
||||
### Step 3: Display
|
||||
Dashboard renders with:
|
||||
- Personalized greeting
|
||||
- Current metrics with trends
|
||||
- Real-time activity feed
|
||||
|
||||
### Step 4: Interaction
|
||||
User can:
|
||||
- Click metric cards for details
|
||||
- Click activity items for context
|
||||
- Access user menu via dropdown
|
||||
- Navigate to other sections
|
||||
|
||||
## Components Breakdown
|
||||
|
||||
This screen composition includes:
|
||||
|
||||
1. **Top Bar**
|
||||
- Dashboard title (left)
|
||||
- User dropdown menu (right): "Sarah Johnson ▼"
|
||||
|
||||
2. **Greeting Section**
|
||||
- Personalized message: "Welcome back, Sarah!"
|
||||
- Context: "Here's what's happening today."
|
||||
|
||||
3. **Metric Cards (3x)** (component: card)
|
||||
- **Revenue Card**
|
||||
- Title: "Revenue"
|
||||
- Value: "$24,567"
|
||||
- Trend: "+8.3% ↗" (badge with arrow)
|
||||
|
||||
- **Users Card**
|
||||
- Title: "Active Users"
|
||||
- Value: "1,234"
|
||||
- Change: "+45 today"
|
||||
|
||||
- **Growth Card**
|
||||
- Title: "Growth"
|
||||
- Value: "+12.5%"
|
||||
- Period: "MoM"
|
||||
|
||||
4. **Activity Section**
|
||||
- Header: "Recent Activity"
|
||||
- List (component: list)
|
||||
- 5 recent items
|
||||
- Each with description and timestamp
|
||||
- Bullet formatting for clarity
|
||||
|
||||
## Design Notes
|
||||
|
||||
- **Information Hierarchy**: Most important metrics (revenue) comes first
|
||||
- **Visual Grouping**: Cards use consistent styling and spacing
|
||||
- **Real-time Feel**: Recent timestamps show system is live
|
||||
- **Scanability**: Bullet points and clear labels make scanning easy
|
||||
- **Trend Indicators**: Arrows (↗) and percentages show direction quickly
|
||||
- **Whitespace**: Generous padding prevents cramped feeling
|
||||
|
||||
## Trend Indicators Explained
|
||||
|
||||
- **↗** (up-right arrow): Positive trend, growth
|
||||
- **→** (right arrow): Flat, no change
|
||||
- **↘** (down-right arrow): Negative trend, decline
|
||||
- **+X%**: Positive percentage change (green context)
|
||||
- **-X%**: Negative percentage change (red context)
|
||||
|
||||
## Time-based Data
|
||||
|
||||
All timestamps are relative:
|
||||
- "2 minutes ago" - Very recent
|
||||
- "5 minutes ago" - Recent
|
||||
- "15 minutes ago" - Somewhat recent
|
||||
- "22 minutes ago" - Less recent
|
||||
|
||||
This creates a sense of real-time activity.
|
||||
|
||||
## Accessibility Features
|
||||
|
||||
- Clear heading hierarchy (Dashboard → sections)
|
||||
- Metric values announced with context
|
||||
- Activity items in semantic list
|
||||
- Keyboard navigation: Tab through cards and items
|
||||
- Screen reader: Trends and timestamps properly announced
|
||||
- High contrast for trend indicators
|
||||
|
||||
## State Transitions
|
||||
|
||||
1. **Initial Load** → Loading spinner shown
|
||||
2. **Data Fetched** → Transition to loaded state
|
||||
3. **Error Occurs** → Show error message, retry button
|
||||
4. **User Clicks Card** → Navigate to detail view
|
||||
5. **New Activity** → Update activity list (real-time)
|
||||
|
||||
This rendered example shows exactly how a production dashboard appears with real data!
|
||||
66
skills/fluxwing-screen-scaffolder/templates/dashboard.uxm
Normal file
66
skills/fluxwing-screen-scaffolder/templates/dashboard.uxm
Normal file
@@ -0,0 +1,66 @@
|
||||
{
|
||||
"id": "dashboard",
|
||||
"type": "container",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "Dashboard",
|
||||
"description": "Main application dashboard with metrics and activity feed",
|
||||
"author": "Fluxwing Team",
|
||||
"created": "2024-10-11T12:00:00Z",
|
||||
"modified": "2024-10-11T12:00:00Z",
|
||||
"tags": ["dashboard", "screen", "metrics", "analytics"],
|
||||
"category": "display",
|
||||
"fidelity": "detailed"
|
||||
},
|
||||
"props": {
|
||||
"title": "Dashboard",
|
||||
"userName": "User",
|
||||
"components": [
|
||||
"navigation",
|
||||
"card",
|
||||
"badge",
|
||||
"list"
|
||||
]
|
||||
},
|
||||
"layout": {
|
||||
"display": "grid",
|
||||
"positioning": "relative",
|
||||
"spacing": {
|
||||
"padding": 16,
|
||||
"margin": 0
|
||||
}
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{
|
||||
"name": "loaded",
|
||||
"properties": {
|
||||
"showContent": true,
|
||||
"loading": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "loading",
|
||||
"properties": {
|
||||
"showSpinner": true,
|
||||
"hideContent": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "error",
|
||||
"properties": {
|
||||
"showError": true
|
||||
}
|
||||
}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "main",
|
||||
"ariaLabel": "Dashboard main content"
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "dashboard.md",
|
||||
"width": 80,
|
||||
"height": 30
|
||||
}
|
||||
}
|
||||
71
skills/fluxwing-screen-scaffolder/templates/login-screen.md
Normal file
71
skills/fluxwing-screen-scaffolder/templates/login-screen.md
Normal file
@@ -0,0 +1,71 @@
|
||||
# Login Screen
|
||||
|
||||
User authentication screen with email and password inputs.
|
||||
|
||||
## Layout
|
||||
|
||||
```
|
||||
╭──────────────────────────────────────────╮
|
||||
│ │
|
||||
│ {{title}} │
|
||||
│ {{subtitle}} │
|
||||
│ │
|
||||
│ Email │
|
||||
│ {{emailInput}} │
|
||||
│ │
|
||||
│ Password │
|
||||
│ {{passwordInput}} │
|
||||
│ │
|
||||
│ {{errorMessage}} │
|
||||
│ │
|
||||
│ {{submitButton}} │
|
||||
│ │
|
||||
│ {{forgotPassword}} │ {{signupLink}} │
|
||||
│ │
|
||||
╰──────────────────────────────────────────╯
|
||||
```
|
||||
|
||||
## Components Used
|
||||
|
||||
- **email-input**: Email address field with validation
|
||||
- **password-input**: Password field with show/hide toggle (Note: using email-input as placeholder)
|
||||
- **submit-button**: Form submission button (using primary-button)
|
||||
- **error-alert**: Error message display (optional)
|
||||
|
||||
## States
|
||||
|
||||
### Idle State
|
||||
User has not yet interacted with the form.
|
||||
|
||||
### Loading State
|
||||
While authenticating user credentials.
|
||||
|
||||
### Error State
|
||||
When authentication fails - shows error message above submit button.
|
||||
|
||||
## Variables
|
||||
|
||||
- `title` (string): Screen heading text
|
||||
- `subtitle` (string): Subheading text
|
||||
- `emailInput` (component): Email input component
|
||||
- `passwordInput` (component): Password input component
|
||||
- `submitButton` (component): Submit button component
|
||||
- `errorMessage` (component): Error alert component
|
||||
- `forgotPassword` (link): Forgot password link
|
||||
- `signupLink` (link): Sign up link
|
||||
|
||||
## User Flows
|
||||
|
||||
1. User enters email address
|
||||
2. User enters password
|
||||
3. User clicks "Sign In" button
|
||||
4. System validates credentials
|
||||
5. If valid: Navigate to dashboard
|
||||
6. If invalid: Show error message, allow retry
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: main
|
||||
- **ARIA Label**: "Login form"
|
||||
- **Keyboard**: Tab navigation between fields, Enter to submit
|
||||
- **Screen Reader**: All fields properly labeled
|
||||
@@ -0,0 +1,185 @@
|
||||
# Login Screen - Rendered Example
|
||||
|
||||
This shows the actual login screen with realistic example data.
|
||||
|
||||
## Default State (Idle)
|
||||
|
||||
```
|
||||
╭──────────────────────────────────────────╮
|
||||
│ │
|
||||
│ Welcome Back │
|
||||
│ Sign in to continue │
|
||||
│ │
|
||||
│ Email │
|
||||
│ ┌────────────────────────────────────┐ │
|
||||
│ │ sarah.johnson@example.com │ │
|
||||
│ └────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Password │
|
||||
│ ┌────────────────────────────────────┐ │
|
||||
│ │ •••••••• │👁│
|
||||
│ └────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ │
|
||||
│ ╭──────────────────────────────────╮ │
|
||||
│ │ Sign In │ │
|
||||
│ ╰──────────────────────────────────╯ │
|
||||
│ │
|
||||
│ Forgot password? │ Create account │
|
||||
│ │
|
||||
╰──────────────────────────────────────────╯
|
||||
```
|
||||
|
||||
## Loading State
|
||||
|
||||
```
|
||||
╭──────────────────────────────────────────╮
|
||||
│ │
|
||||
│ Welcome Back │
|
||||
│ Sign in to continue │
|
||||
│ │
|
||||
│ Email │
|
||||
│ ┌────────────────────────────────────┐ │
|
||||
│ │ sarah.johnson@example.com │ │
|
||||
│ └────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Password │
|
||||
│ ┌────────────────────────────────────┐ │
|
||||
│ │ •••••••• │👁│
|
||||
│ └────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ │
|
||||
│ ╭──────────────────────────────────╮ │
|
||||
│ │ ⠋ Signing in... │ │
|
||||
│ ╰──────────────────────────────────╯ │
|
||||
│ │
|
||||
│ Forgot password? │ Create account │
|
||||
│ │
|
||||
╰──────────────────────────────────────────╯
|
||||
```
|
||||
|
||||
## Error State
|
||||
|
||||
```
|
||||
╭──────────────────────────────────────────╮
|
||||
│ │
|
||||
│ Welcome Back │
|
||||
│ Sign in to continue │
|
||||
│ │
|
||||
│ Email │
|
||||
│ ┌────────────────────────────────────┐ │
|
||||
│ │ sarah.johnson@example.com │ │
|
||||
│ └────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Password │
|
||||
│ ┌────────────────────────────────────┐ │
|
||||
│ │ •••••••• │👁│
|
||||
│ └────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ╭────────────────────────────────────╮ │
|
||||
│ │ ❌ Invalid email or password │ │
|
||||
│ ╰────────────────────────────────────╯ │
|
||||
│ │
|
||||
│ ╭──────────────────────────────────╮ │
|
||||
│ │ Sign In │ │
|
||||
│ ╰──────────────────────────────────╯ │
|
||||
│ │
|
||||
│ Forgot password? │ Create account │
|
||||
│ │
|
||||
╰──────────────────────────────────────────╯
|
||||
```
|
||||
|
||||
## Data Context
|
||||
|
||||
This example demonstrates:
|
||||
|
||||
### User Input
|
||||
- **Email**: sarah.johnson@example.com (valid format)
|
||||
- **Password**: ******** (8 characters, masked for security)
|
||||
|
||||
### Screen Elements
|
||||
- **Title**: "Welcome Back"
|
||||
- **Subtitle**: "Sign in to continue"
|
||||
- **Submit Button**: "Sign In" (primary action)
|
||||
- **Password Toggle**: 👁 icon to show/hide password
|
||||
- **Footer Links**: "Forgot password?" and "Create account"
|
||||
|
||||
### States Shown
|
||||
1. **Idle**: Clean form ready for input
|
||||
2. **Loading**: Spinner animation while authenticating
|
||||
3. **Error**: Red error message showing failed authentication
|
||||
|
||||
## User Flow Demonstration
|
||||
|
||||
### Step 1: Initial State
|
||||
User sees empty form with placeholder text
|
||||
|
||||
### Step 2: Input Data
|
||||
User enters:
|
||||
- Email: sarah.johnson@example.com
|
||||
- Password: ••••••••
|
||||
|
||||
### Step 3: Submit
|
||||
User clicks "Sign In" button
|
||||
→ Form enters loading state
|
||||
→ Shows spinner: "⠋ Signing in..."
|
||||
|
||||
### Step 4a: Success Path
|
||||
✓ Credentials valid
|
||||
→ Navigate to dashboard
|
||||
|
||||
### Step 4b: Error Path
|
||||
✗ Credentials invalid
|
||||
→ Show error: "❌ Invalid email or password"
|
||||
→ Keep form populated for retry
|
||||
→ Focus returns to password field
|
||||
|
||||
## Components Breakdown
|
||||
|
||||
This screen composition includes:
|
||||
|
||||
1. **Container** (outer box)
|
||||
- Rounded corners for friendly feel
|
||||
- Centered layout with padding
|
||||
|
||||
2. **Email Input** (component: email-input)
|
||||
- Text field with email validation
|
||||
- Shows user input: sarah.johnson@example.com
|
||||
|
||||
3. **Password Input** (adapted from email-input)
|
||||
- Masked text field
|
||||
- Show/hide toggle (👁 icon)
|
||||
- Input: ••••••••
|
||||
|
||||
4. **Submit Button** (component: primary-button)
|
||||
- Primary action styling
|
||||
- Text: "Sign In"
|
||||
- Loading state with spinner
|
||||
|
||||
5. **Error Alert** (conditional)
|
||||
- Only visible in error state
|
||||
- Red styling with ❌ icon
|
||||
- Message: "Invalid email or password"
|
||||
|
||||
6. **Footer Links** (text elements)
|
||||
- "Forgot password?" (clickable)
|
||||
- "Create account" (clickable)
|
||||
|
||||
## Design Notes
|
||||
|
||||
- Clean, minimal design reduces cognitive load
|
||||
- Clear visual hierarchy (title → inputs → action)
|
||||
- Helpful error messaging guides user to fix issues
|
||||
- Password masking with optional reveal improves security
|
||||
- Footer links provide escape hatches for common scenarios
|
||||
|
||||
## Accessibility Features
|
||||
|
||||
- Proper heading hierarchy (h1 for title)
|
||||
- Form labels associated with inputs
|
||||
- Error messages announced to screen readers
|
||||
- Keyboard navigation: Tab between fields, Enter to submit
|
||||
- Focus indicators visible on all interactive elements
|
||||
- High contrast text for readability
|
||||
|
||||
This rendered example shows exactly how the login screen appears and behaves in practice!
|
||||
72
skills/fluxwing-screen-scaffolder/templates/login-screen.uxm
Normal file
72
skills/fluxwing-screen-scaffolder/templates/login-screen.uxm
Normal file
@@ -0,0 +1,72 @@
|
||||
{
|
||||
"id": "login-screen",
|
||||
"type": "container",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "Login Screen",
|
||||
"description": "User authentication screen with email and password inputs",
|
||||
"author": "Fluxwing Team",
|
||||
"created": "2024-10-11T12:00:00Z",
|
||||
"modified": "2024-10-11T12:00:00Z",
|
||||
"tags": ["auth", "login", "screen", "form"],
|
||||
"category": "display",
|
||||
"fidelity": "detailed"
|
||||
},
|
||||
"props": {
|
||||
"title": "Welcome Back",
|
||||
"subtitle": "Sign in to continue",
|
||||
"components": [
|
||||
"email-input",
|
||||
"primary-button"
|
||||
]
|
||||
},
|
||||
"layout": {
|
||||
"display": "flex",
|
||||
"positioning": "relative",
|
||||
"spacing": {
|
||||
"padding": 16,
|
||||
"margin": 0
|
||||
}
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{
|
||||
"name": "idle",
|
||||
"properties": {
|
||||
"showError": false,
|
||||
"loading": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "loading",
|
||||
"properties": {
|
||||
"showSpinner": true,
|
||||
"disableInputs": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "error",
|
||||
"properties": {
|
||||
"showError": true,
|
||||
"errorMessage": "Invalid credentials"
|
||||
}
|
||||
}
|
||||
],
|
||||
"interactions": [
|
||||
{
|
||||
"trigger": "submit",
|
||||
"action": "authenticate-user"
|
||||
}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "main",
|
||||
"ariaLabel": "Login form",
|
||||
"focusable": false
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "login-screen.md",
|
||||
"width": 44,
|
||||
"height": 20
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user