439 lines
18 KiB
HTML
439 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>BeautyHub Premium Web Interface Generator</title>
|
|
<style>
|
|
:root {
|
|
--ink: #1b1018;
|
|
--wine: #7a1838;
|
|
--wine-2: #a32b55;
|
|
--rose: #d69a8c;
|
|
--gold: #d8b35f;
|
|
--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);
|
|
}
|
|
|
|
* { 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;
|
|
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;
|
|
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);
|
|
}
|
|
|
|
.num {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 12px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #fff;
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
background: linear-gradient(135deg, var(--wine), var(--rose));
|
|
}
|
|
|
|
.screen b {
|
|
display: block;
|
|
font-size: 12px;
|
|
letter-spacing: -.01em;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.screen small { color: var(--muted); font-size: 10px; line-height: 1.25; }
|
|
|
|
.tag {
|
|
border-radius: 999px;
|
|
padding: 5px 8px;
|
|
color: #6b4b13;
|
|
background: rgba(216,179,95,.18);
|
|
font-size: 9px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.progress-wrap {
|
|
display: none;
|
|
margin-top: 14px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
padding: 12px;
|
|
background: rgba(255,255,255,.72);
|
|
}
|
|
|
|
.progress-meta {
|
|
display: flex;
|
|
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 {
|
|
display: none;
|
|
margin-top: 12px;
|
|
border-radius: 16px;
|
|
padding: 12px 13px;
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.result.success { color: #1f6f4a; border: 1px solid rgba(42,146,92,.28); background: rgba(235,249,241,.85); }
|
|
.result.error { color: #a13333; border: 1px solid rgba(192,48,48,.25); background: rgba(255,239,239,.9); }
|
|
|
|
button {
|
|
width: 100%;
|
|
margin-top: 14px;
|
|
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;
|
|
line-height: 1.45;
|
|
text-align: center;
|
|
}
|
|
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(122,24,56,.22); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="shell">
|
|
<section class="brand">
|
|
<div class="brand-left">
|
|
<div class="mark">BH</div>
|
|
<div>
|
|
<div class="eyebrow">BeautyHub Studio</div>
|
|
<h1>Premium Web Interface Generator</h1>
|
|
</div>
|
|
</div>
|
|
<div class="pill">33 Interfaces</div>
|
|
</section>
|
|
|
|
<section class="hero">
|
|
<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="section-title">
|
|
<strong>Generated web interfaces</strong>
|
|
<span>30 product screens + auth</span>
|
|
</div>
|
|
|
|
<div class="screen-list">
|
|
<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"><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="progress-wrap" id="progressWrap">
|
|
<div class="progress-meta"><span id="progressLabel">Preparing premium web interfaces...</span><span id="progressCount">0 / 33</span></div>
|
|
<div class="bar-bg"><div class="bar" id="progressBar"></div></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>
|
|
</main>
|
|
|
|
<script>
|
|
const EXPECTED_TOTAL = 33;
|
|
|
|
function generateDashboards() {
|
|
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;
|
|
|
|
const btn = document.getElementById('generateBtn');
|
|
const result = document.getElementById('result');
|
|
|
|
if (msg.type === 'progress') {
|
|
const pct = Math.round((msg.current / msg.total) * 100);
|
|
document.getElementById('progressBar').style.width = pct + '%';
|
|
document.getElementById('progressCount').textContent = msg.current + ' / ' + msg.total;
|
|
document.getElementById('progressLabel').textContent = msg.label || 'Generating interfaces...';
|
|
}
|
|
|
|
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>
|
|
</body>
|
|
</html>
|