Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
fec5638c6d |
0
.perm_test_apache
Normal file
0
.perm_test_apache
Normal file
0
.perm_test_exec
Normal file
0
.perm_test_exec
Normal file
82
README.md
82
README.md
@ -1,18 +1,74 @@
|
|||||||
# BeautyHub Dashboard - Figma Plugin
|
# BeautyHub Premium Web Interface Generator
|
||||||
|
|
||||||
## طريقة التشغيل
|
A Figma development plugin that automatically generates a premium luxury desktop web dashboard product for beauty salons, beauty centers, spas, and med-beauty operations.
|
||||||
|
|
||||||
### الخطوة 1: فتح Figma
|
## What it generates
|
||||||
1. افتح ملف Figma على هذا الرابط:
|
|
||||||
https://www.figma.com/design/HHS8Q5SC44oGxQtyzmmhW4/Beauty-Hub-Design?node-id=185-1652
|
|
||||||
|
|
||||||
### الخطوة 2: تثبيت البلغ-إن
|
The plugin now creates **33 real Figma interface frames** and **0 companion detail/spec frames**.
|
||||||
1. في Figma، اذهب إلى: **Menu (≡) → Plugins → Development → Import plugin from manifest...**
|
|
||||||
2. اختر ملف `manifest.json` من مجلد `figma-plugin`
|
|
||||||
|
|
||||||
### الخطوة 3: تشغيل البلغ-إن
|
- **3 entry/auth interfaces**: onboarding, login, and register
|
||||||
1. في Figma، اذهب إلى: **Menu → Plugins → Development → BeautyHub Dashboard Generator**
|
- **30 product dashboard interfaces** covering dashboards, detail pages, modal states, notification center, chat, billing, settings, and profile flows
|
||||||
2. اضغط زر **"إنشاء جميع الصفحات"**
|
- Every generated frame is a real desktop web UI state, not a documentation-only frame
|
||||||
3. انتظر حتى تكتمل العملية
|
|
||||||
|
|
||||||
سيتم إنشاء 11 إطار تصميم كامل في صفحة "Dashboard UI"
|
## Generated interfaces and routes
|
||||||
|
|
||||||
|
1. Onboarding Introduction — `/onboarding`
|
||||||
|
2. Login Portal — `/login`
|
||||||
|
3. Register Salon Account — `/register`
|
||||||
|
4. Main Dashboard — `/dashboard`
|
||||||
|
5. Calendar Dashboard — `/dashboard/calendar`
|
||||||
|
6. Appointments Board — `/dashboard/appointments`
|
||||||
|
7. Appointment Details — `/dashboard/appointments/details`
|
||||||
|
8. Add Appointment Modal — `/dashboard/appointments/new`
|
||||||
|
9. Clients Dashboard — `/dashboard/clients`
|
||||||
|
10. Client Profile — `/dashboard/clients/profile`
|
||||||
|
11. Client Medical Record — `/dashboard/clients/medical-record`
|
||||||
|
12. Add Client Modal — `/dashboard/clients/new`
|
||||||
|
13. Staff Dashboard — `/dashboard/staff`
|
||||||
|
14. Staff Schedule — `/dashboard/staff/schedule`
|
||||||
|
15. Employee Profile — `/dashboard/staff/profile`
|
||||||
|
16. Services Board — `/dashboard/services`
|
||||||
|
17. Service Details — `/dashboard/services/details`
|
||||||
|
18. Inventory Dashboard — `/dashboard/inventory`
|
||||||
|
19. Add Product Modal — `/dashboard/inventory/products/new`
|
||||||
|
20. Orders Dashboard — `/dashboard/orders`
|
||||||
|
21. Store Dashboard — `/dashboard/store`
|
||||||
|
22. Reports Dashboard — `/dashboard/reports`
|
||||||
|
23. Revenue Analytics — `/dashboard/reports/revenue`
|
||||||
|
24. Marketing Dashboard — `/dashboard/marketing`
|
||||||
|
25. Loyalty Program — `/dashboard/marketing/loyalty`
|
||||||
|
26. Reviews Dashboard — `/dashboard/reviews`
|
||||||
|
27. Notification Center — `/dashboard/notifications`
|
||||||
|
28. Messages / Chat — `/dashboard/messages`
|
||||||
|
29. Payments Dashboard — `/dashboard/payments`
|
||||||
|
30. Subscription Plans — `/dashboard/billing/subscription`
|
||||||
|
31. Settings Dashboard — `/dashboard/settings`
|
||||||
|
32. User Profile — `/dashboard/profile`
|
||||||
|
33. Edit Profile Modal — `/dashboard/profile/edit`
|
||||||
|
|
||||||
|
## Important product changes
|
||||||
|
|
||||||
|
- Removed the previous 15 `Details & Buttons` companion frames.
|
||||||
|
- Added real screens for detail states, modal states, notification bell output, chat/messages, subscription plans, user profile, and edit profile.
|
||||||
|
- Redesigned onboarding as an educational product introduction with luxury image-style panels and system benefit sections.
|
||||||
|
- Kept `/login` and `/register` as explicit web interfaces.
|
||||||
|
- The output is desktop web only. No mobile app screens are generated.
|
||||||
|
|
||||||
|
## Design direction
|
||||||
|
|
||||||
|
- Luxury beauty salon and beauty center style
|
||||||
|
- Deep burgundy, wine red, rose gold, champagne, cream, and gold palette
|
||||||
|
- Modern SaaS hierarchy inspired by premium dashboard products
|
||||||
|
- SF Pro Display / SF Pro Text target typography with safe fallback when a Figma environment does not provide SF Pro
|
||||||
|
- Rich cards, charts, tables, image-style panels, modals, notification states, chat states, and operational dashboard layouts
|
||||||
|
- English interface text only
|
||||||
|
|
||||||
|
## How to run in Figma
|
||||||
|
|
||||||
|
1. Open Figma.
|
||||||
|
2. Go to **Menu -> Plugins -> Development -> Import plugin from manifest...**.
|
||||||
|
3. Select `manifest.json` from this folder.
|
||||||
|
4. Run **BeautyHub Premium Web Interface Generator** from the Development plugins menu.
|
||||||
|
5. Click **Generate 33 Premium Web Interfaces**.
|
||||||
|
|
||||||
|
The plugin creates a new Figma page named `BeautyHub Premium Web Interface System` and places all generated desktop frames on that page in a grid.
|
||||||
|
|||||||
BIN
beautyhub-figma-plugin-download.zip
Normal file
BIN
beautyhub-figma-plugin-download.zip
Normal file
Binary file not shown.
BIN
beautyhub-premium-web-dashboard-plugin.zip
Normal file
BIN
beautyhub-premium-web-dashboard-plugin.zip
Normal file
Binary file not shown.
BIN
beautyhub-premium-web-system-plugin.zip
Normal file
BIN
beautyhub-premium-web-system-plugin.zip
Normal file
Binary file not shown.
17
db/config.php
Normal file
17
db/config.php
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<?php
|
||||||
|
// Generated by setup_mariadb_project.sh — edit as needed.
|
||||||
|
define('DB_HOST', '127.0.0.1');
|
||||||
|
define('DB_NAME', 'app_40104');
|
||||||
|
define('DB_USER', 'app_40104');
|
||||||
|
define('DB_PASS', 'ab874f23-5b0b-4728-b750-1e571ae6d9c5');
|
||||||
|
|
||||||
|
function db() {
|
||||||
|
static $pdo;
|
||||||
|
if (!$pdo) {
|
||||||
|
$pdo = new PDO('mysql:host='.DB_HOST.';dbname='.DB_NAME.';charset=utf8mb4', DB_USER, DB_PASS, [
|
||||||
|
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
|
||||||
|
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
return $pdo;
|
||||||
|
}
|
||||||
1
index.html
Symbolic link
1
index.html
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
ui.html
|
||||||
@ -1,8 +1,10 @@
|
|||||||
{
|
{
|
||||||
"name": "BeautyHub Dashboard Generator",
|
"name": "BeautyHub Premium Web Interface Generator",
|
||||||
"id": "beautyhub-dashboard-gen",
|
"id": "beautyhub-premium-web-system-gen",
|
||||||
"api": "1.0.0",
|
"api": "1.0.0",
|
||||||
"main": "code.js",
|
"main": "code.js",
|
||||||
"ui": "ui.html",
|
"ui": "ui.html",
|
||||||
"editorType": ["figma"]
|
"editorType": [
|
||||||
|
"figma"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
547
ui.html
547
ui.html
@ -1,199 +1,438 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html dir="rtl" lang="ar">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>BeautyHub Premium Web Interface Generator</title>
|
||||||
<style>
|
<style>
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
:root {
|
||||||
body {
|
--ink: #1b1018;
|
||||||
font-family: 'Inter', -apple-system, sans-serif;
|
--wine: #7a1838;
|
||||||
background: #F5F0EB;
|
--wine-2: #a32b55;
|
||||||
color: #221220;
|
--rose: #d69a8c;
|
||||||
padding: 20px;
|
--gold: #d8b35f;
|
||||||
width: 360px;
|
--cream: #fbf6ef;
|
||||||
|
--champagne: #efe1d0;
|
||||||
|
--muted: #8b7480;
|
||||||
|
--line: rgba(122, 24, 56, .14);
|
||||||
|
--surface: rgba(255,255,255,.78);
|
||||||
|
--shadow: 0 18px 44px rgba(76, 19, 42, .18);
|
||||||
}
|
}
|
||||||
.logo-row {
|
|
||||||
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 420px;
|
||||||
|
min-height: 660px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
|
color: var(--ink);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 14% 6%, rgba(216, 179, 95, .32), transparent 28%),
|
||||||
|
radial-gradient(circle at 92% 12%, rgba(214, 154, 140, .34), transparent 26%),
|
||||||
|
linear-gradient(145deg, #fffaf4 0%, #f4e7da 46%, #f8f1ea 100%);
|
||||||
|
padding: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shell {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid rgba(122, 24, 56, .12);
|
||||||
|
border-radius: 30px;
|
||||||
|
padding: 18px;
|
||||||
|
background: rgba(255,255,255,.62);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
backdrop-filter: blur(18px);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shell::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: -80px -50px auto auto;
|
||||||
|
width: 180px;
|
||||||
|
height: 180px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: linear-gradient(135deg, rgba(122,24,56,.22), rgba(216,179,95,.22));
|
||||||
|
filter: blur(8px);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 14px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
|
||||||
|
|
||||||
|
.mark {
|
||||||
|
width: 46px;
|
||||||
|
height: 46px;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
color: #fff;
|
||||||
|
font-family: "SF Pro Display", -apple-system, sans-serif;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: -.04em;
|
||||||
|
background:
|
||||||
|
linear-gradient(145deg, rgba(255,255,255,.18), transparent),
|
||||||
|
linear-gradient(135deg, #5d0f2a 0%, #8e2047 48%, #d8b35f 130%);
|
||||||
|
box-shadow: 0 16px 34px rgba(122,24,56,.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
color: var(--wine);
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: .12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: 2px;
|
||||||
|
color: var(--ink);
|
||||||
|
font-family: "SF Pro Display", -apple-system, sans-serif;
|
||||||
|
font-size: 19px;
|
||||||
|
line-height: 1.05;
|
||||||
|
letter-spacing: -.045em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pill {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
border: 1px solid rgba(216,179,95,.48);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 7px 10px;
|
||||||
|
color: #6e4f19;
|
||||||
|
background: rgba(255,248,229,.7);
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 800;
|
||||||
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 26px;
|
||||||
|
padding: 18px;
|
||||||
|
overflow: hidden;
|
||||||
|
color: #fff;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 86% 16%, rgba(216,179,95,.52), transparent 24%),
|
||||||
|
radial-gradient(circle at 12% 88%, rgba(214,154,140,.4), transparent 30%),
|
||||||
|
linear-gradient(135deg, #25111d 0%, #641332 52%, #9c2d55 100%);
|
||||||
|
box-shadow: 0 22px 50px rgba(90,17,45,.28);
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h2 {
|
||||||
|
max-width: 270px;
|
||||||
|
font-family: "SF Pro Display", -apple-system, sans-serif;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 1.05;
|
||||||
|
letter-spacing: -.055em;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
max-width: 310px;
|
||||||
|
color: rgba(255,255,255,.76);
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini {
|
||||||
|
border: 1px solid rgba(255,255,255,.18);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 10px;
|
||||||
|
background: rgba(255,255,255,.1);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 15px;
|
||||||
|
font-family: "SF Pro Display", -apple-system, sans-serif;
|
||||||
|
letter-spacing: -.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini span { color: rgba(255,255,255,.66); font-size: 10px; }
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 16px 2px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title strong {
|
||||||
|
font-family: "SF Pro Display", -apple-system, sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
letter-spacing: -.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title span { color: var(--muted); font-size: 11px; font-weight: 700; }
|
||||||
|
|
||||||
|
.screen-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
max-height: 258px;
|
||||||
|
overflow: auto;
|
||||||
|
padding-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 32px 1fr auto;
|
||||||
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-bottom: 16px;
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 17px;
|
||||||
|
padding: 10px;
|
||||||
|
background: rgba(255,255,255,.72);
|
||||||
|
box-shadow: 0 8px 20px rgba(76,19,42,.06);
|
||||||
}
|
}
|
||||||
.logo-box {
|
|
||||||
width: 36px; height: 36px;
|
.num {
|
||||||
background: #7B2D4B;
|
width: 32px;
|
||||||
border-radius: 10px;
|
height: 32px;
|
||||||
display: flex; align-items: center; justify-content: center;
|
|
||||||
color: #D4A853;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
.logo-text { font-size: 18px; font-weight: 700; color: #7B2D4B; }
|
|
||||||
.logo-sub { font-size: 11px; color: #856077; margin-top: 1px; }
|
|
||||||
h1 { font-size: 15px; font-weight: 700; color: #221220; margin-bottom: 4px; }
|
|
||||||
p.desc { font-size: 12px; color: #856077; margin-bottom: 16px; line-height: 1.5; }
|
|
||||||
.screen-list {
|
|
||||||
background: white;
|
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
border: 1px solid #E5DDD6;
|
display: grid;
|
||||||
overflow: hidden;
|
place-items: center;
|
||||||
margin-bottom: 16px;
|
color: #fff;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 900;
|
||||||
|
background: linear-gradient(135deg, var(--wine), var(--rose));
|
||||||
}
|
}
|
||||||
.screen-group-title {
|
|
||||||
font-size: 10px;
|
.screen b {
|
||||||
font-weight: 600;
|
display: block;
|
||||||
color: #7B2D4B;
|
|
||||||
padding: 8px 12px 4px;
|
|
||||||
background: #FAF3F7;
|
|
||||||
border-bottom: 1px solid #F0E8ED;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
.screen-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 7px 12px;
|
|
||||||
gap: 8px;
|
|
||||||
border-bottom: 1px solid #F5F0EB;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
letter-spacing: -.01em;
|
||||||
|
margin-bottom: 2px;
|
||||||
}
|
}
|
||||||
.screen-item:last-child { border-bottom: none; }
|
|
||||||
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
.screen small { color: var(--muted); font-size: 10px; line-height: 1.25; }
|
||||||
.dot-wine { background: #7B2D4B; }
|
|
||||||
.dot-gold { background: #D4A853; }
|
.tag {
|
||||||
.dot-green { background: #4A9470; }
|
border-radius: 999px;
|
||||||
.screen-num { color: #B5879A; font-size: 10px; min-width: 20px; }
|
padding: 5px 8px;
|
||||||
.btn {
|
color: #6b4b13;
|
||||||
width: 100%;
|
background: rgba(216,179,95,.18);
|
||||||
padding: 14px;
|
font-size: 9px;
|
||||||
background: #7B2D4B;
|
font-weight: 900;
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
.btn:hover { background: #6A2540; }
|
|
||||||
.btn:disabled { background: #C4A0B0; cursor: not-allowed; }
|
|
||||||
.progress-wrap {
|
.progress-wrap {
|
||||||
display: none;
|
display: none;
|
||||||
background: white;
|
margin-top: 14px;
|
||||||
border-radius: 12px;
|
border: 1px solid var(--line);
|
||||||
border: 1px solid #E5DDD6;
|
border-radius: 18px;
|
||||||
padding: 14px;
|
padding: 12px;
|
||||||
margin-bottom: 10px;
|
background: rgba(255,255,255,.72);
|
||||||
}
|
}
|
||||||
.progress-label { font-size: 12px; color: #856077; margin-bottom: 8px; }
|
|
||||||
.progress-bar-bg { background: #F5F0EB; border-radius: 6px; height: 8px; overflow: hidden; }
|
.progress-meta {
|
||||||
.progress-bar { height: 8px; background: #7B2D4B; border-radius: 6px; width: 0%; transition: width 0.3s; }
|
display: flex;
|
||||||
.progress-count { font-size: 11px; color: #B5879A; margin-top: 6px; text-align: left; }
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 800;
|
||||||
|
margin-bottom: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-bg {
|
||||||
|
height: 9px;
|
||||||
|
border-radius: 999px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(122,24,56,.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
width: 0%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: inherit;
|
||||||
|
background: linear-gradient(90deg, var(--wine), var(--rose), var(--gold));
|
||||||
|
transition: width .24s ease;
|
||||||
|
}
|
||||||
|
|
||||||
.result {
|
.result {
|
||||||
display: none;
|
display: none;
|
||||||
border-radius: 10px;
|
margin-top: 12px;
|
||||||
padding: 12px 14px;
|
border-radius: 16px;
|
||||||
|
padding: 12px 13px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin-bottom: 10px;
|
line-height: 1.45;
|
||||||
font-weight: 600;
|
font-weight: 750;
|
||||||
}
|
}
|
||||||
.result.success { background: #EAF6F0; color: #2E7A55; border: 1px solid #A8D8C0; }
|
|
||||||
.result.error { background: #FDEEED; color: #C03030; border: 1px solid #F0B8B8; }
|
.result.success { color: #1f6f4a; border: 1px solid rgba(42,146,92,.28); background: rgba(235,249,241,.85); }
|
||||||
.badge {
|
.result.error { color: #a13333; border: 1px solid rgba(192,48,48,.25); background: rgba(255,239,239,.9); }
|
||||||
display: inline-block;
|
|
||||||
background: #FAF3F7;
|
button {
|
||||||
color: #7B2D4B;
|
width: 100%;
|
||||||
border: 1px solid #E8D0DC;
|
margin-top: 14px;
|
||||||
border-radius: 6px;
|
border: 0;
|
||||||
|
border-radius: 18px;
|
||||||
|
padding: 15px 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #fff;
|
||||||
|
font-family: "SF Pro Text", -apple-system, sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: -.01em;
|
||||||
|
background:
|
||||||
|
linear-gradient(145deg, rgba(255,255,255,.18), transparent),
|
||||||
|
linear-gradient(135deg, #651332 0%, #8f2149 48%, #c58957 130%);
|
||||||
|
box-shadow: 0 18px 34px rgba(122,24,56,.24);
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover { filter: saturate(1.08) brightness(1.02); }
|
||||||
|
button:disabled { cursor: not-allowed; opacity: .68; filter: grayscale(.2); }
|
||||||
|
|
||||||
|
.note {
|
||||||
|
margin-top: 11px;
|
||||||
|
color: var(--muted);
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
padding: 2px 7px;
|
line-height: 1.45;
|
||||||
font-weight: 600;
|
text-align: center;
|
||||||
margin-right: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar { width: 6px; }
|
||||||
|
::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(122,24,56,.22); }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<main class="shell">
|
||||||
<div class="logo-row">
|
<section class="brand">
|
||||||
<div class="logo-box">BH</div>
|
<div class="brand-left">
|
||||||
|
<div class="mark">BH</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="logo-text">BeautyHub</div>
|
<div class="eyebrow">BeautyHub Studio</div>
|
||||||
<div class="logo-sub">مولّد التصاميم</div>
|
<h1>Premium Web Interface Generator</h1>
|
||||||
</div>
|
</div>
|
||||||
<span class="badge">16 شاشة</span>
|
</div>
|
||||||
</div>
|
<div class="pill">33 Interfaces</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<h1>BeautyHub Dashboard Generator</h1>
|
<section class="hero">
|
||||||
<p class="desc">سيتم إنشاء 16 شاشة كاملة: شاشات Onboarding تعريفية + تسجيل الدخول + إنشاء حساب + لوحة التحكم كاملة بتصميم محسّن.</p>
|
<h2>Luxury salon web dashboard system for Figma.</h2>
|
||||||
|
<p>Generates real desktop web interfaces for every important product state: onboarding, /login, /register, dashboards, details, modals, notification center, messages, billing, and profile flows. No extra detail/spec frames are generated.</p>
|
||||||
|
<div class="hero-grid">
|
||||||
|
<div class="mini"><strong>1440</strong><span>Desktop width</span></div>
|
||||||
|
<div class="mini"><strong>33</strong><span>Real frames</span></div>
|
||||||
|
<div class="mini"><strong>0</strong><span>Detail frames</span></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="screen-list">
|
<div class="section-title">
|
||||||
<div class="screen-group-title">شاشات التعريف — Onboarding</div>
|
<strong>Generated web interfaces</strong>
|
||||||
<div class="screen-item"><div class="dot dot-wine"></div><span class="screen-num">01</span>مرحبا — Welcome</div>
|
<span>30 product screens + auth</span>
|
||||||
<div class="screen-item"><div class="dot dot-wine"></div><span class="screen-num">02</span>المزايا — Features</div>
|
</div>
|
||||||
<div class="screen-item"><div class="dot dot-wine"></div><span class="screen-num">03</span>ابدأ الآن — Get Started</div>
|
|
||||||
|
|
||||||
<div class="screen-group-title">المصادقة — Auth</div>
|
<div class="screen-list">
|
||||||
<div class="screen-item"><div class="dot dot-gold"></div><span class="screen-num">04</span>تسجيل الدخول — Login</div>
|
<div class="screen"><div class="num">01</div><div><b>Onboarding Introduction</b><small>/onboarding · Educational product tour with image gallery and system benefits.</small></div><span class="tag">Intro</span></div>
|
||||||
<div class="screen-item"><div class="dot dot-gold"></div><span class="screen-num">05</span>إنشاء حساب — Register</div>
|
<div class="screen"><div class="num">02</div><div><b>Login Portal</b><small>/login · Secure sign-in, SSO, recovery, and trust preview.</small></div><span class="tag">Auth</span></div>
|
||||||
|
<div class="screen"><div class="num">03</div><div><b>Register Salon Account</b><small>/register · Business profile, plan selection, and account creation.</small></div><span class="tag">Signup</span></div>
|
||||||
|
<div class="screen"><div class="num">04</div><div><b>Main Dashboard</b><small>/dashboard · Executive revenue, bookings, clients, and salon health.</small></div><span class="tag">Core</span></div>
|
||||||
|
<div class="screen"><div class="num">05</div><div><b>Calendar Dashboard</b><small>/dashboard/calendar · Resource calendar for rooms, chairs, and specialists.</small></div><span class="tag">Calendar</span></div>
|
||||||
|
<div class="screen"><div class="num">06</div><div><b>Appointments Board</b><small>/dashboard/appointments · Pipeline for waiting, confirmed, in-service, and checkout.</small></div><span class="tag">Flow</span></div>
|
||||||
|
<div class="screen"><div class="num">07</div><div><b>Appointment Details</b><small>/dashboard/appointments/details · Client notes, services, timeline, and payment summary.</small></div><span class="tag">Detail</span></div>
|
||||||
|
<div class="screen"><div class="num">08</div><div><b>Add Appointment Modal</b><small>/dashboard/appointments/new · Booking creation modal state.</small></div><span class="tag">Modal</span></div>
|
||||||
|
<div class="screen"><div class="num">09</div><div><b>Clients Dashboard</b><small>/dashboard/clients · Segments, profiles, notes, loyalty, and CRM insights.</small></div><span class="tag">CRM</span></div>
|
||||||
|
<div class="screen"><div class="num">10</div><div><b>Client Profile</b><small>/dashboard/clients/profile · Single guest profile with history and preferences.</small></div><span class="tag">Profile</span></div>
|
||||||
|
<div class="screen"><div class="num">11</div><div><b>Client Medical Record</b><small>/dashboard/clients/medical-record · Allergies, treatments, consent, and images.</small></div><span class="tag">Secure</span></div>
|
||||||
|
<div class="screen"><div class="num">12</div><div><b>Add Client Modal</b><small>/dashboard/clients/new · Client creation modal state.</small></div><span class="tag">Modal</span></div>
|
||||||
|
<div class="screen"><div class="num">13</div><div><b>Staff Dashboard</b><small>/dashboard/staff · Performance, commissions, schedules, and team planning.</small></div><span class="tag">Team</span></div>
|
||||||
|
<div class="screen"><div class="num">14</div><div><b>Staff Schedule</b><small>/dashboard/staff/schedule · Weekly rota, shifts, rooms, and leave requests.</small></div><span class="tag">Rota</span></div>
|
||||||
|
<div class="screen"><div class="num">15</div><div><b>Employee Profile</b><small>/dashboard/staff/profile · Specialist profile, services, reviews, and payroll context.</small></div><span class="tag">Profile</span></div>
|
||||||
|
<div class="screen"><div class="num">16</div><div><b>Services Board</b><small>/dashboard/services · Catalog, packages, add-ons, duration, and margins.</small></div><span class="tag">Catalog</span></div>
|
||||||
|
<div class="screen"><div class="num">17</div><div><b>Service Details</b><small>/dashboard/services/details · Pricing rules, add-ons, specialists, and profitability.</small></div><span class="tag">Detail</span></div>
|
||||||
|
<div class="screen"><div class="num">18</div><div><b>Inventory Dashboard</b><small>/dashboard/inventory · Stock intelligence, products, shelves, and reorder alerts.</small></div><span class="tag">Stock</span></div>
|
||||||
|
<div class="screen"><div class="num">19</div><div><b>Add Product Modal</b><small>/dashboard/inventory/products/new · Product creation modal state.</small></div><span class="tag">Modal</span></div>
|
||||||
|
<div class="screen"><div class="num">20</div><div><b>Orders Dashboard</b><small>/dashboard/orders · Purchase orders, vendor status, returns, and receiving.</small></div><span class="tag">Orders</span></div>
|
||||||
|
<div class="screen"><div class="num">21</div><div><b>Store Dashboard</b><small>/dashboard/store · Retail storefront, products, carts, and merchandising.</small></div><span class="tag">Store</span></div>
|
||||||
|
<div class="screen"><div class="num">22</div><div><b>Reports Dashboard</b><small>/dashboard/reports · Saved reports, filters, exports, and summaries.</small></div><span class="tag">Reports</span></div>
|
||||||
|
<div class="screen"><div class="num">23</div><div><b>Revenue Analytics</b><small>/dashboard/reports/revenue · Revenue trends, mix, cohorts, and forecast.</small></div><span class="tag">BI</span></div>
|
||||||
|
<div class="screen"><div class="num">24</div><div><b>Marketing Dashboard</b><small>/dashboard/marketing · Campaigns, audiences, automations, and creative preview.</small></div><span class="tag">Growth</span></div>
|
||||||
|
<div class="screen"><div class="num">25</div><div><b>Loyalty Program</b><small>/dashboard/marketing/loyalty · Points, tiers, rewards, and referrals.</small></div><span class="tag">Loyalty</span></div>
|
||||||
|
<div class="screen"><div class="num">26</div><div><b>Reviews Dashboard</b><small>/dashboard/reviews · Ratings, sentiment, channels, and responses.</small></div><span class="tag">Trust</span></div>
|
||||||
|
<div class="screen"><div class="num">27</div><div><b>Notification Center</b><small>/dashboard/notifications · Bell-click interface with alerts and actions.</small></div><span class="tag">Alerts</span></div>
|
||||||
|
<div class="screen"><div class="num">28</div><div><b>Messages / Chat</b><small>/dashboard/messages · Conversations, chat thread, templates, and client context.</small></div><span class="tag">Chat</span></div>
|
||||||
|
<div class="screen"><div class="num">29</div><div><b>Payments Dashboard</b><small>/dashboard/payments · Transactions, deposits, settlement, invoices, and refunds.</small></div><span class="tag">Finance</span></div>
|
||||||
|
<div class="screen"><div class="num">30</div><div><b>Subscription Plans</b><small>/dashboard/billing/subscription · Plan comparison, usage, and billing history.</small></div><span class="tag">Billing</span></div>
|
||||||
|
<div class="screen"><div class="num">31</div><div><b>Settings Dashboard</b><small>/dashboard/settings · Brand, roles, integrations, billing, and controls.</small></div><span class="tag">Admin</span></div>
|
||||||
|
<div class="screen"><div class="num">32</div><div><b>User Profile</b><small>/dashboard/profile · Operator profile, security, activity, and preferences.</small></div><span class="tag">User</span></div>
|
||||||
|
<div class="screen"><div class="num">33</div><div><b>Edit Profile Modal</b><small>/dashboard/profile/edit · Profile editing modal state.</small></div><span class="tag">Modal</span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="screen-group-title">لوحة التحكم — Dashboard (11 شاشة)</div>
|
<div class="progress-wrap" id="progressWrap">
|
||||||
<div class="screen-item"><div class="dot dot-green"></div><span class="screen-num">06</span>الرئيسية</div>
|
<div class="progress-meta"><span id="progressLabel">Preparing premium web interfaces...</span><span id="progressCount">0 / 33</span></div>
|
||||||
<div class="screen-item"><div class="dot dot-green"></div><span class="screen-num">07</span>المواعيد</div>
|
<div class="bar-bg"><div class="bar" id="progressBar"></div></div>
|
||||||
<div class="screen-item"><div class="dot dot-green"></div><span class="screen-num">08</span>الخدمات</div>
|
</div>
|
||||||
<div class="screen-item"><div class="dot dot-green"></div><span class="screen-num">09</span>العملاء</div>
|
|
||||||
<div class="screen-item"><div class="dot dot-green"></div><span class="screen-num">10</span>الموظفون</div>
|
|
||||||
<div class="screen-item"><div class="dot dot-green"></div><span class="screen-num">11</span>المخزون</div>
|
|
||||||
<div class="screen-item"><div class="dot dot-green"></div><span class="screen-num">12</span>المتجر</div>
|
|
||||||
<div class="screen-item"><div class="dot dot-green"></div><span class="screen-num">13</span>التفاعل</div>
|
|
||||||
<div class="screen-item"><div class="dot dot-green"></div><span class="screen-num">14</span>السجل الصحي</div>
|
|
||||||
<div class="screen-item"><div class="dot dot-green"></div><span class="screen-num">15</span>التقارير</div>
|
|
||||||
<div class="screen-item"><div class="dot dot-green"></div><span class="screen-num">16</span>الإعدادات</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="progress-wrap" id="progressWrap">
|
<div class="result" id="result"></div>
|
||||||
<div class="progress-label" id="progressLabel">جاري الإنشاء...</div>
|
|
||||||
<div class="progress-bar-bg"><div class="progress-bar" id="progressBar"></div></div>
|
|
||||||
<div class="progress-count" id="progressCount">0 / 16</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="result" id="result"></div>
|
<button id="generateBtn" type="button" onclick="generateDashboards()">Generate 33 Premium Web Interfaces</button>
|
||||||
|
<p class="note">All generated interface text is English. Output is desktop web only and includes onboarding imagery, /login, /register, 30 dashboard product interfaces, notification-center and modal states.</p>
|
||||||
<button class="btn" id="btn" onclick="generate()">إنشاء جميع الشاشات الـ 16</button>
|
</main>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function generate() {
|
const EXPECTED_TOTAL = 33;
|
||||||
const btn = document.getElementById('btn');
|
|
||||||
btn.disabled = true;
|
|
||||||
btn.textContent = 'جاري الإنشاء...';
|
|
||||||
document.getElementById('progressWrap').style.display = 'block';
|
|
||||||
document.getElementById('result').style.display = 'none';
|
|
||||||
parent.postMessage({ pluginMessage: { type: 'generate' } }, '*');
|
|
||||||
}
|
|
||||||
|
|
||||||
window.onmessage = (e) => {
|
function generateDashboards() {
|
||||||
const msg = e.data.pluginMessage;
|
const btn = document.getElementById('generateBtn');
|
||||||
|
const result = document.getElementById('result');
|
||||||
|
btn.disabled = true;
|
||||||
|
btn.textContent = 'Generating premium web interfaces...';
|
||||||
|
result.style.display = 'none';
|
||||||
|
document.getElementById('progressWrap').style.display = 'block';
|
||||||
|
document.getElementById('progressBar').style.width = '0%';
|
||||||
|
document.getElementById('progressCount').textContent = '0 / ' + EXPECTED_TOTAL;
|
||||||
|
document.getElementById('progressLabel').textContent = 'Preparing premium web interfaces...';
|
||||||
|
parent.postMessage({ pluginMessage: { type: 'generate-premium-dashboard' } }, '*');
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onmessage = (event) => {
|
||||||
|
const msg = event.data && event.data.pluginMessage;
|
||||||
if (!msg) return;
|
if (!msg) return;
|
||||||
|
|
||||||
|
const btn = document.getElementById('generateBtn');
|
||||||
|
const result = document.getElementById('result');
|
||||||
|
|
||||||
if (msg.type === 'progress') {
|
if (msg.type === 'progress') {
|
||||||
const pct = Math.round((msg.current / msg.total) * 100);
|
const pct = Math.round((msg.current / msg.total) * 100);
|
||||||
document.getElementById('progressBar').style.width = pct + '%';
|
document.getElementById('progressBar').style.width = pct + '%';
|
||||||
document.getElementById('progressLabel').textContent = 'جاري إنشاء: ' + msg.label;
|
|
||||||
document.getElementById('progressCount').textContent = msg.current + ' / ' + msg.total;
|
document.getElementById('progressCount').textContent = msg.current + ' / ' + msg.total;
|
||||||
} else if (msg.type === 'done') {
|
document.getElementById('progressLabel').textContent = msg.label || 'Generating interfaces...';
|
||||||
document.getElementById('btn').disabled = false;
|
|
||||||
document.getElementById('btn').textContent = 'إنشاء جميع الشاشات الـ 16';
|
|
||||||
document.getElementById('progressBar').style.width = '100%';
|
|
||||||
document.getElementById('progressLabel').textContent = 'اكتمل بنجاح!';
|
|
||||||
const res = document.getElementById('result');
|
|
||||||
res.className = 'result success';
|
|
||||||
res.textContent = 'تم إنشاء ' + msg.count + ' شاشة بنجاح في Figma!';
|
|
||||||
res.style.display = 'block';
|
|
||||||
} else if (msg.type === 'error') {
|
|
||||||
document.getElementById('btn').disabled = false;
|
|
||||||
document.getElementById('btn').textContent = 'إنشاء جميع الشاشات الـ 16';
|
|
||||||
const res = document.getElementById('result');
|
|
||||||
res.className = 'result error';
|
|
||||||
res.textContent = 'خطأ: ' + msg.message;
|
|
||||||
res.style.display = 'block';
|
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
if (msg.type === 'done') {
|
||||||
|
btn.disabled = false;
|
||||||
|
btn.textContent = 'Generate Again';
|
||||||
|
result.className = 'result success';
|
||||||
|
result.style.display = 'block';
|
||||||
|
result.textContent = 'Done. ' + msg.frameTotal + ' real premium web interfaces were generated inside Figma. Detail/spec frames generated: ' + msg.detailTotal + '.';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (msg.type === 'error') {
|
||||||
|
btn.disabled = false;
|
||||||
|
btn.textContent = 'Retry Generation';
|
||||||
|
result.className = 'result error';
|
||||||
|
result.style.display = 'block';
|
||||||
|
result.textContent = msg.message || 'Generation failed. Please check the plugin console.';
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user