171 lines
5.7 KiB
HTML
171 lines
5.7 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" />
|
||
|
||
<style>
|
||
/* Print-friendly stacked layout — each screen on its own A3 page. */
|
||
html, body { height: auto !important; overflow: visible !important; background: #f3efe9; }
|
||
body { padding: 24px 0; }
|
||
|
||
.print-doc { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 32px; }
|
||
|
||
.print-page {
|
||
background: var(--bg);
|
||
border-radius: 16px;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,.08);
|
||
overflow: hidden;
|
||
break-after: page;
|
||
}
|
||
.print-page:last-child { break-after: auto; }
|
||
.print-page-label {
|
||
padding: 14px 28px;
|
||
background: var(--surface);
|
||
border-bottom: 1px solid var(--line);
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
font-size: 12px;
|
||
color: var(--ink-3);
|
||
}
|
||
.print-page-label b { font-weight: 600; color: var(--ink); font-size: 14px; }
|
||
|
||
/* the actual app shell, but unconstrained */
|
||
.print-app {
|
||
display: grid;
|
||
grid-template-columns: 248px 1fr;
|
||
min-height: auto;
|
||
}
|
||
.print-app .sb {
|
||
overflow: visible !important;
|
||
height: auto;
|
||
}
|
||
.print-app .main {
|
||
overflow: visible !important;
|
||
height: auto;
|
||
}
|
||
.print-app .topbar {
|
||
position: static !important;
|
||
backdrop-filter: none;
|
||
}
|
||
.print-app .page {
|
||
overflow: visible !important;
|
||
padding: 28px;
|
||
}
|
||
|
||
/* keep tabular interactions visually flat */
|
||
.print-app .tbl tbody tr { cursor: default; }
|
||
.print-app .tbl tbody tr:hover { background: transparent; }
|
||
|
||
@page {
|
||
size: A3 portrait;
|
||
margin: 12mm;
|
||
}
|
||
|
||
@media print {
|
||
html, body, .print-doc { background: white !important; }
|
||
body { padding: 0; }
|
||
.print-doc { max-width: none; padding: 0; gap: 0; }
|
||
.print-page {
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
margin: 0;
|
||
}
|
||
.print-page-label { display: none; }
|
||
|
||
/* honor designed background colors and gradients */
|
||
*, *::before, *::after {
|
||
-webkit-print-color-adjust: exact !important;
|
||
print-color-adjust: exact !important;
|
||
}
|
||
|
||
/* avoid awkward splits */
|
||
.card, .tbl tr { break-inside: avoid; }
|
||
|
||
/* hide tweaks panel if it slipped through */
|
||
.twk-panel { display: none !important; }
|
||
}
|
||
</style>
|
||
|
||
<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 CRUMBS = {
|
||
home: ['ایلو', 'خانه'],
|
||
courses: ['ایلو', 'دورهها', 'مبانی طراحی رابط کاربری'],
|
||
students: ['ایلو', 'دانشجویان'],
|
||
};
|
||
|
||
function PrintScreen({ id, label, children }) {
|
||
return (
|
||
<section className="print-page">
|
||
<div className="print-page-label">
|
||
<b>{label}</b>
|
||
<span className="en">Ilo · Instructor Panel</span>
|
||
</div>
|
||
<div className="print-app app">
|
||
<Sidebar active={id} onNav={() => {}} />
|
||
<main className="main">
|
||
<Topbar crumb={CRUMBS[id]} />
|
||
<div className="page">
|
||
{children}
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function PrintDoc() {
|
||
// apply default theme tokens once
|
||
React.useEffect(() => {
|
||
const root = document.documentElement;
|
||
root.dataset.theme = 'light';
|
||
root.dataset.density = 'regular';
|
||
}, []);
|
||
|
||
return (
|
||
<div className="print-doc">
|
||
<PrintScreen id="home" label="۰۱ · صفحه خانه (نسخه کلاسیک)">
|
||
<HomeScreen variant="classic" />
|
||
</PrintScreen>
|
||
<PrintScreen id="courses" label="۰۲ · سازندهی دوره">
|
||
<CoursesScreen />
|
||
</PrintScreen>
|
||
<PrintScreen id="students" label="۰۳ · دانشجویان و CRM">
|
||
<StudentsScreen />
|
||
</PrintScreen>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
ReactDOM.createRoot(document.getElementById('root')).render(<PrintDoc />);
|
||
|
||
// Auto-print once everything is settled.
|
||
(async () => {
|
||
try { await document.fonts.ready; } catch (e) {}
|
||
// wait for React to mount + Babel-transpiled scripts to finish
|
||
await new Promise(r => setTimeout(r, 1500));
|
||
window.print();
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|