171 lines
8.6 KiB
HTML
171 lines
8.6 KiB
HTML
<!doctype html>
|
||
<html lang="fa" dir="rtl">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>ایلو · پنل مدرس</title>
|
||
<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=Vazirmatn:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="styles.css" />
|
||
|
||
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
||
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
||
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
||
</head>
|
||
<body>
|
||
<div id="root"></div>
|
||
|
||
<script type="text/babel" src="tweaks-panel.jsx"></script>
|
||
<script type="text/babel" src="icons.jsx"></script>
|
||
<script type="text/babel" src="data.jsx"></script>
|
||
<script type="text/babel" src="shell.jsx"></script>
|
||
<script type="text/babel" src="screen-home.jsx"></script>
|
||
<script type="text/babel" src="screen-courses.jsx"></script>
|
||
<script type="text/babel" src="screen-students.jsx"></script>
|
||
|
||
<script type="text/babel">
|
||
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
|
||
"density": "regular",
|
||
"dark": true,
|
||
"accent": "#a890d8",
|
||
"homeVariant": "classic"
|
||
}/*EDITMODE-END*/;
|
||
|
||
const HEX_TO_OKLCH_PRESETS = {
|
||
"#e08a5e": { accent: "oklch(0.72 0.14 40)", accent2: "oklch(0.66 0.14 40)", soft: "oklch(0.94 0.04 40)", ink: "oklch(0.42 0.10 40)" },
|
||
"#7aa6c4": { accent: "oklch(0.72 0.10 240)", accent2: "oklch(0.66 0.10 240)", soft: "oklch(0.94 0.03 240)", ink: "oklch(0.42 0.08 240)" },
|
||
"#7fb487": { accent: "oklch(0.72 0.12 145)", accent2: "oklch(0.66 0.12 145)", soft: "oklch(0.94 0.03 145)", ink: "oklch(0.42 0.10 145)" },
|
||
"#a890d8": { accent: "oklch(0.72 0.12 295)", accent2: "oklch(0.66 0.12 295)", soft: "oklch(0.94 0.04 295)", ink: "oklch(0.42 0.10 295)" },
|
||
};
|
||
|
||
const CRUMBS = {
|
||
home: ['ایلو', 'خانه'],
|
||
courses: ['ایلو', 'دوره‌ها', 'مبانی طراحی رابط کاربری'],
|
||
students: ['ایلو', 'دانشجویان'],
|
||
live: ['ایلو', 'کلاس زنده'],
|
||
quiz: ['ایلو', 'آزمون‌ها'],
|
||
cert: ['ایلو', 'گواهی‌نامه‌ها'],
|
||
chat: ['ایلو', 'گفت‌وگو'],
|
||
site: ['ایلو', 'سایت من'],
|
||
mkt: ['ایلو', 'بازاریابی'],
|
||
analytics:['ایلو', 'تحلیل‌ها'],
|
||
settings: ['ایلو', 'تنظیمات'],
|
||
};
|
||
|
||
function ComingSoon({ id }) {
|
||
const map = {
|
||
live: { ic: 'video', t: 'کلاس زنده', d: 'برگزاری وبینار، اشتراک صفحه و ضبط خودکار' },
|
||
quiz: { ic: 'quiz', t: 'آزمون‌ساز', d: 'سؤالات چندگزینه‌ای، تشریحی و تصحیح خودکار' },
|
||
cert: { ic: 'cert', t: 'گواهی‌نامه', d: 'صدور و امضای دیجیتال گواهی پایان دوره' },
|
||
chat: { ic: 'chat', t: 'گفت‌وگو', d: 'پشتیبانی متمرکز با دانشجویان، تلگرام و بله' },
|
||
site: { ic: 'store', t: 'سایت من', d: 'ساخت وب‌سایت اختصاصی با نام و برند خودتان' },
|
||
mkt: { ic: 'megaphone', t: 'بازاریابی', d: 'پیامک انبوه، ایمیل و کمپین‌های هدف‌مند' },
|
||
analytics:{ ic: 'chart', t: 'تحلیل‌ها', d: 'گزارش درآمد، رفتار دانشجویان و قیف فروش' },
|
||
settings: { ic: 'cog', t: 'تنظیمات', d: 'حساب، صورت‌حساب، یکپارچه‌سازی‌ها' },
|
||
};
|
||
const m = map[id] || { ic: 'home', t: 'به‌زودی', d: '' };
|
||
return (
|
||
<div className="page-inner">
|
||
<div className="card card-pad" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: 420, textAlign: 'center', gap: 14 }}>
|
||
<div style={{ width: 64, height: 64, borderRadius: 18, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'grid', placeItems: 'center' }}>
|
||
<Icon name={m.ic} style={{ width: 28, height: 28 }} />
|
||
</div>
|
||
<div>
|
||
<div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em' }}>{m.t}</div>
|
||
<div className="muted" style={{ fontSize: 14, marginTop: 6, maxWidth: 420 }}>{m.d}</div>
|
||
</div>
|
||
<div className="placeholder" style={{ width: '80%', height: 220, marginTop: 8 }}>
|
||
SCREEN PLACEHOLDER · {m.t.toUpperCase()}
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
|
||
<button className="btn">مشاهده نقشه راه</button>
|
||
<button className="btn primary">پیش‌خرید قابلیت</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function App() {
|
||
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
|
||
const [active, setActive] = React.useState('home');
|
||
|
||
// apply theme tokens
|
||
React.useEffect(() => {
|
||
const root = document.documentElement;
|
||
root.dataset.theme = t.dark ? 'dark' : 'light';
|
||
root.dataset.density = t.density;
|
||
const preset = HEX_TO_OKLCH_PRESETS[t.accent] || HEX_TO_OKLCH_PRESETS["#e08a5e"];
|
||
root.style.setProperty('--accent', preset.accent);
|
||
root.style.setProperty('--accent-2', preset.accent2);
|
||
if (!t.dark) root.style.setProperty('--accent-soft', preset.soft);
|
||
root.style.setProperty('--accent-ink', preset.ink);
|
||
}, [t]);
|
||
|
||
const renderScreen = () => {
|
||
if (active === 'home') return <HomeScreen variant={t.homeVariant} />;
|
||
if (active === 'courses') return <CoursesScreen />;
|
||
if (active === 'students') return <StudentsScreen />;
|
||
return <ComingSoon id={active} />;
|
||
};
|
||
|
||
return (
|
||
<div className="app">
|
||
<Sidebar active={active} onNav={setActive} />
|
||
<main className="main">
|
||
<Topbar crumb={CRUMBS[active] || ['ایلو']}
|
||
right={<>
|
||
<a className="btn sm" href="Ilo Student.html" style={{ textDecoration: 'none' }}>
|
||
<Icon name="eye" className="ic-sm" /> دید دانشجو
|
||
</a>
|
||
<a className="btn sm" href="Ilo Auth.html" style={{ textDecoration: 'none' }}>خروج</a>
|
||
</>} />
|
||
<div className="page" key={active}>
|
||
{renderScreen()}
|
||
</div>
|
||
</main>
|
||
|
||
<TweaksPanel title="تنظیمات نمایش">
|
||
<TweakSection label="تم" />
|
||
<TweakToggle label="حالت تیره"
|
||
value={t.dark} onChange={v => setTweak('dark', v)} />
|
||
<TweakRadio label="رنگ تأکید"
|
||
value={t.accent}
|
||
options={[
|
||
{ value: '#e08a5e', label: 'مرجانی' },
|
||
{ value: '#7aa6c4', label: 'آبی' },
|
||
{ value: '#7fb487', label: 'سبز' },
|
||
{ value: '#a890d8', label: 'بنفش' },
|
||
]}
|
||
onChange={v => setTweak('accent', v)} />
|
||
|
||
<TweakSection label="چیدمان" />
|
||
<TweakRadio label="فشردگی"
|
||
value={t.density}
|
||
options={[
|
||
{ value: 'compact', label: 'فشرده' },
|
||
{ value: 'regular', label: 'معمولی' },
|
||
{ value: 'cozy', label: 'راحت' },
|
||
]}
|
||
onChange={v => setTweak('density', v)} />
|
||
|
||
<TweakSection label="ترکیب صفحه خانه" />
|
||
<TweakRadio label="نسخه"
|
||
value={t.homeVariant}
|
||
options={[
|
||
{ value: 'classic', label: 'کلاسیک' },
|
||
{ value: 'focused', label: 'متمرکز' },
|
||
{ value: 'studio', label: 'استودیو' },
|
||
]}
|
||
onChange={v => setTweak('homeVariant', v)} />
|
||
</TweaksPanel>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
|
||
</script>
|
||
</body>
|
||
</html>
|