200 lines
7.8 KiB
HTML
200 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html dir="rtl" lang="ar">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Inter', -apple-system, sans-serif;
|
|
background: #F5F0EB;
|
|
color: #221220;
|
|
padding: 20px;
|
|
width: 360px;
|
|
}
|
|
.logo-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.logo-box {
|
|
width: 36px; height: 36px;
|
|
background: #7B2D4B;
|
|
border-radius: 10px;
|
|
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: 1px solid #E5DDD6;
|
|
overflow: hidden;
|
|
margin-bottom: 16px;
|
|
}
|
|
.screen-group-title {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
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;
|
|
}
|
|
.screen-item:last-child { border-bottom: none; }
|
|
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
|
.dot-wine { background: #7B2D4B; }
|
|
.dot-gold { background: #D4A853; }
|
|
.dot-green { background: #4A9470; }
|
|
.screen-num { color: #B5879A; font-size: 10px; min-width: 20px; }
|
|
.btn {
|
|
width: 100%;
|
|
padding: 14px;
|
|
background: #7B2D4B;
|
|
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 {
|
|
display: none;
|
|
background: white;
|
|
border-radius: 12px;
|
|
border: 1px solid #E5DDD6;
|
|
padding: 14px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.progress-label { font-size: 12px; color: #856077; margin-bottom: 8px; }
|
|
.progress-bar-bg { background: #F5F0EB; border-radius: 6px; height: 8px; overflow: hidden; }
|
|
.progress-bar { height: 8px; background: #7B2D4B; border-radius: 6px; width: 0%; transition: width 0.3s; }
|
|
.progress-count { font-size: 11px; color: #B5879A; margin-top: 6px; text-align: left; }
|
|
.result {
|
|
display: none;
|
|
border-radius: 10px;
|
|
padding: 12px 14px;
|
|
font-size: 12px;
|
|
margin-bottom: 10px;
|
|
font-weight: 600;
|
|
}
|
|
.result.success { background: #EAF6F0; color: #2E7A55; border: 1px solid #A8D8C0; }
|
|
.result.error { background: #FDEEED; color: #C03030; border: 1px solid #F0B8B8; }
|
|
.badge {
|
|
display: inline-block;
|
|
background: #FAF3F7;
|
|
color: #7B2D4B;
|
|
border: 1px solid #E8D0DC;
|
|
border-radius: 6px;
|
|
font-size: 10px;
|
|
padding: 2px 7px;
|
|
font-weight: 600;
|
|
margin-right: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="logo-row">
|
|
<div class="logo-box">BH</div>
|
|
<div>
|
|
<div class="logo-text">BeautyHub</div>
|
|
<div class="logo-sub">مولّد التصاميم</div>
|
|
</div>
|
|
<span class="badge">16 شاشة</span>
|
|
</div>
|
|
|
|
<h1>BeautyHub Dashboard Generator</h1>
|
|
<p class="desc">سيتم إنشاء 16 شاشة كاملة: شاشات Onboarding تعريفية + تسجيل الدخول + إنشاء حساب + لوحة التحكم كاملة بتصميم محسّن.</p>
|
|
|
|
<div class="screen-list">
|
|
<div class="screen-group-title">شاشات التعريف — Onboarding</div>
|
|
<div class="screen-item"><div class="dot dot-wine"></div><span class="screen-num">01</span>مرحبا — Welcome</div>
|
|
<div class="screen-item"><div class="dot dot-wine"></div><span class="screen-num">02</span>المزايا — Features</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-item"><div class="dot dot-gold"></div><span class="screen-num">04</span>تسجيل الدخول — Login</div>
|
|
<div class="screen-item"><div class="dot dot-gold"></div><span class="screen-num">05</span>إنشاء حساب — Register</div>
|
|
|
|
<div class="screen-group-title">لوحة التحكم — Dashboard (11 شاشة)</div>
|
|
<div class="screen-item"><div class="dot dot-green"></div><span class="screen-num">06</span>الرئيسية</div>
|
|
<div class="screen-item"><div class="dot dot-green"></div><span class="screen-num">07</span>المواعيد</div>
|
|
<div class="screen-item"><div class="dot dot-green"></div><span class="screen-num">08</span>الخدمات</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="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 class="btn" id="btn" onclick="generate()">إنشاء جميع الشاشات الـ 16</button>
|
|
|
|
<script>
|
|
function generate() {
|
|
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) => {
|
|
const msg = e.data.pluginMessage;
|
|
if (!msg) return;
|
|
if (msg.type === 'progress') {
|
|
const pct = Math.round((msg.current / msg.total) * 100);
|
|
document.getElementById('progressBar').style.width = pct + '%';
|
|
document.getElementById('progressLabel').textContent = 'جاري إنشاء: ' + msg.label;
|
|
document.getElementById('progressCount').textContent = msg.current + ' / ' + msg.total;
|
|
} else if (msg.type === 'done') {
|
|
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';
|
|
}
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|