193 lines
8.3 KiB
HTML
193 lines
8.3 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Tutormanager — Anwesenheit & Notizen</title>
|
|
<meta name="viewport" content="width=1440" />
|
|
<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=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&family=Caveat:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<style>
|
|
html, body { margin: 0; padding: 0; background: #e6dfcf; }
|
|
body { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<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>
|
|
|
|
<script type="text/babel" src="design-canvas.jsx"></script>
|
|
<script type="text/babel" src="browser-window.jsx"></script>
|
|
<script type="text/babel" src="ios-frame.jsx"></script>
|
|
<script type="text/babel" src="shared.jsx"></script>
|
|
<script type="text/babel" src="seatmap.jsx"></script>
|
|
<script type="text/babel" src="admin.jsx"></script>
|
|
<script type="text/babel" src="rooms.jsx"></script>
|
|
<script type="text/babel" src="student.jsx"></script>
|
|
<script type="text/babel" src="student-desktop.jsx"></script>
|
|
|
|
<script type="text/babel">
|
|
function App() {
|
|
const [adminTab, setAdminTab] = React.useState("live");
|
|
|
|
// Browser-window-wrapped tutor screen (the supporting prototype)
|
|
const TutorBrowser = ({ children, url = "tutor.puchstein.dev/admin", width = 1180, height = 760 }) => (
|
|
<ChromeWindow
|
|
tabs={[{ title: "Tutormanager · Admin" }]}
|
|
activeIndex={0}
|
|
url={url}
|
|
width={width}
|
|
height={height}>
|
|
<div style={{ width: "100%", height: "100%", background: "var(--paper)", overflow: "hidden" }}>
|
|
{children}
|
|
</div>
|
|
</ChromeWindow>
|
|
);
|
|
|
|
// iOS-wrapped student screen
|
|
const StudentPhone = ({ children, time = "14:03", title = "tutor.puchstein.dev" }) => (
|
|
<IOSDevice width={360} height={760}>
|
|
<div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", background: "var(--paper)" }}>
|
|
<IOSStatusBar time={time} />
|
|
<div style={{ flex: 1, overflow: "hidden", display: "flex", flexDirection: "column" }}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</IOSDevice>
|
|
);
|
|
|
|
return (
|
|
<DesignCanvas>
|
|
{/* ── HERO: Tutor live seat map + notes ────────────────────────── */}
|
|
<DCSection id="hero" title="Tutor:innen Live-Ansicht — Sitzplan & Notizen"
|
|
subtitle="Die Hauptansicht donnerstags um 14 Uhr: Wer ist da, wo sitzen sie, was fällt mir auf?">
|
|
|
|
<DCArtboard id="hero-split" label="A · Geteilt (empfohlen)" width={1320} height={820}>
|
|
<TutorBrowser width={1320} height={820}>
|
|
<TutorShell active="live" onNav={() => {}}>
|
|
<TutorLiveView variant="split" />
|
|
</TutorShell>
|
|
</TutorBrowser>
|
|
</DCArtboard>
|
|
|
|
<DCArtboard id="hero-focus" label="B · Notiz im Fokus" width={1320} height={820}>
|
|
<TutorBrowser width={1320} height={820}>
|
|
<TutorShell active="live" onNav={() => {}}>
|
|
<TutorLiveView variant="split" />
|
|
</TutorShell>
|
|
</TutorBrowser>
|
|
</DCArtboard>
|
|
</DCSection>
|
|
|
|
{/* ── Tutor supporting screens ─────────────────────────────────── */}
|
|
<DCSection id="admin" title="Tutor:innen-Panel — übrige Bereiche"
|
|
subtitle="Dashboard, Anwesenheit, Räume, Studierende.">
|
|
|
|
<DCArtboard id="dashboard" label="Dashboard · Slots-Übersicht" width={1180} height={760}>
|
|
<TutorBrowser>
|
|
<TutorShell active="dashboard" onNav={() => {}}>
|
|
<Dashboard />
|
|
</TutorShell>
|
|
</TutorBrowser>
|
|
</DCArtboard>
|
|
|
|
<DCArtboard id="attendance" label="Anwesenheit · Kursmatrix" width={1180} height={760}>
|
|
<TutorBrowser url="tutor.puchstein.dev/admin/attendance">
|
|
<TutorShell active="attendance" onNav={() => {}}>
|
|
<AttendanceMatrix />
|
|
</TutorShell>
|
|
</TutorBrowser>
|
|
</DCArtboard>
|
|
|
|
<DCArtboard id="rooms" label="Räume · Layout-Editor" width={1280} height={820}>
|
|
<TutorBrowser url="tutor.puchstein.dev/admin/rooms" width={1280} height={820}>
|
|
<TutorShell active="rooms" onNav={() => {}}>
|
|
<RoomsScreenV2 />
|
|
</TutorShell>
|
|
</TutorBrowser>
|
|
</DCArtboard>
|
|
|
|
<DCArtboard id="students" label="Studierende · Verwaltung" width={1180} height={760}>
|
|
<TutorBrowser url="tutor.puchstein.dev/admin/students">
|
|
<TutorShell active="students" onNav={() => {}}>
|
|
<StudentsScreen />
|
|
</TutorShell>
|
|
</TutorBrowser>
|
|
</DCArtboard>
|
|
|
|
<DCArtboard id="login" label="Login" width={1180} height={760}>
|
|
<TutorBrowser url="tutor.puchstein.dev/admin/login">
|
|
<LoginScreen />
|
|
</TutorBrowser>
|
|
</DCArtboard>
|
|
</DCSection>
|
|
|
|
{/* ── Student check-in flow ────────────────────────────────────── */}
|
|
<DCSection id="student" title="Studierenden-Flow — Check-in via Code"
|
|
subtitle="QR / URL vom Beamer → Name wählen → Sitz tippen. Drei Zustände, keine Anmeldung.">
|
|
|
|
<DCArtboard id="s-name" label="① Name wählen" width={400} height={820}>
|
|
<StudentPhone time="14:01">
|
|
<StudentNamePicker />
|
|
</StudentPhone>
|
|
</DCArtboard>
|
|
|
|
<DCArtboard id="s-seat" label="② Sitz wählen" width={400} height={820}>
|
|
<StudentPhone time="14:02">
|
|
<StudentSeatPicker />
|
|
</StudentPhone>
|
|
</DCArtboard>
|
|
|
|
<DCArtboard id="s-confirm" label="③ Bestätigt · offen" width={400} height={820}>
|
|
<StudentPhone time="14:03">
|
|
<StudentConfirmed />
|
|
</StudentPhone>
|
|
</DCArtboard>
|
|
|
|
<DCArtboard id="s-locked" label="④ Slot gesperrt" width={400} height={820}>
|
|
<StudentPhone time="14:18">
|
|
<StudentLocked />
|
|
</StudentPhone>
|
|
</DCArtboard>
|
|
</DCSection>
|
|
|
|
{/* ── Student desktop / laptop ─────────────────────────────────── */}
|
|
<DCSection id="student-desktop" title="Studierenden-Flow — Laptop-Variante"
|
|
subtitle="Gleiche drei Zustände, mit mehr Platz: Sitzplan groß, Saison-Übersicht & Bonus-Stand seitlich.">
|
|
|
|
<DCArtboard id="sd-name" label="① Name wählen" width={1180} height={760}>
|
|
<TutorBrowser url="tutor.puchstein.dev/s/K7QJMX2P" width={1180} height={760}>
|
|
<StudentDesktopName />
|
|
</TutorBrowser>
|
|
</DCArtboard>
|
|
|
|
<DCArtboard id="sd-seat" label="② Sitz wählen" width={1180} height={760}>
|
|
<TutorBrowser url="tutor.puchstein.dev/s/K7QJMX2P" width={1180} height={760}>
|
|
<StudentDesktopSeat />
|
|
</TutorBrowser>
|
|
</DCArtboard>
|
|
|
|
<DCArtboard id="sd-confirm" label="③ Bestätigt · mit Saison" width={1180} height={760}>
|
|
<TutorBrowser url="tutor.puchstein.dev/s/K7QJMX2P" width={1180} height={760}>
|
|
<StudentDesktopConfirmed />
|
|
</TutorBrowser>
|
|
</DCArtboard>
|
|
</DCSection>
|
|
|
|
<DCPostIt top={20} left={40} rotate={-3} width={210}>
|
|
<strong>Hi-fi Entwurf</strong> — akademisch, papier-inspiriert. Klick auf einen Sitz in der Live-Ansicht öffnet die Notiz.
|
|
</DCPostIt>
|
|
</DesignCanvas>
|
|
);
|
|
}
|
|
|
|
const root = ReactDOM.createRoot(document.getElementById("root"));
|
|
root.render(<App />);
|
|
</script>
|
|
</body>
|
|
</html>
|