// Mine Safe Academy — mobile app screens (inside the iOS frame).
(function () {
const NS = window.MineSafeGlobalDesignSystem_760fd2;
const { Icon, Button, Badge, StatusChip, ProgressBar, ProgressRing, QuizOption, Alert, Avatar, ThemeToggle, LanguageSelect } = NS;
const YELLOW = 'var(--brand-yellow)', INK = 'var(--brand-ink)';
function TopBar({ title, onBack, right }) {
return (
{onBack
?
:
}
{title}
{right ||
}
{items.map(([id, icon, label]) => (
onTab(id)} style={{
flex: 1, border: 'none', background: 'none', cursor: 'pointer',
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
color: tab === id ? 'var(--brand-yellow-press)' : 'var(--text-faint)',
}}>
{label}
))}
);
}
function Screen({ children, pad = true }) {
return {children}
;
}
// Compact mobile course row
function CourseRow({ c, onClick }) {
return (
{!c.cover &&
{c.level}
{c.title}
{c.status === 'completed'
?
: c.progress > 0
?
:
}
);
}
function Home({ d, onOpen, onTab }) {
const cont = d.courses.find(c => c.id === 'level9');
return (
<>
Welcome back
Hi, {d.user.name.split(' ')[0]}.
2 modules due this week.
{/* Continue card — dark */}
{cont.progress}%} />
Continue
{cont.title}
Module 4 · Operator responsibilities
onOpen(cont.id)}>Resume
My courses
onTab('courses')} style={{ border: 'none', background: 'none', color: 'var(--brand-yellow-press)', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 12.5, textTransform: 'uppercase', letterSpacing: '0.04em', cursor: 'pointer', whiteSpace: 'nowrap', flex: '0 0 auto' }}>See all
{d.courses.slice(0, 4).map(c => onOpen(c.id)} />)}
);
}
function Courses({ d, onOpen }) {
return (
<>
{['All', 'Core Collision', 'Pedestrian', 'Monitoring', 'Underground'].map((f, i) => (
{f}
))}
{d.courses.map(c => onOpen(c.id)} />)}
);
}
function Course({ c, onBack, onLesson, onQuiz }) {
return (
<>
{c.cover &&
}
{c.cover &&
}
{c.category} · {c.level}
{c.title}
Course content
{(c.modules || []).map((m, i) => {
const locked = m.status === 'locked';
return (
(m.type === 'quiz' ? onQuiz() : onLesson())} style={{
display: 'flex', alignItems: 'center', gap: 12, width: '100%', textAlign: 'left',
background: 'var(--surface-card)', border: '1px solid var(--border-subtle)',
borderRadius: 'var(--radius-md)', padding: '11px 12px', cursor: locked ? 'not-allowed' : 'pointer', opacity: locked ? 0.55 : 1,
}}>
{m.status === 'completed' ?
{m.title}
{m.type} · {m.duration}
{!locked &&
);
})}
);
}
function Lesson({ poster, src, onBack, onNext }) {
const ref = React.useRef(null);
const [playing, setPlaying] = React.useState(false);
const [pct, setPct] = React.useState(0);
const toggle = () => { const v = ref.current; if (!v) return; if (v.paused) { v.play(); setPlaying(true); } else { v.pause(); setPlaying(false); } };
const onTime = () => { const v = ref.current; if (v && v.duration) setPct(v.currentTime / v.duration * 100); };
return (
<>
setPlaying(false)}
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
{!playing &&
}
{!playing &&
Module 1 · Video
What Level 9 intervention does
The Level 9 CxD scans continuously for pedestrians and machines. When a hazard enters the warning zone the operator is alerted; if no action is taken, the system applies a controlled automated stop.
Next: Pre-start checklist
);
}
function Quiz({ onBack, onDone }) {
const q = window.MSA_DATA.quiz;
const [choice, setChoice] = React.useState(null);
const [submitted, setSubmitted] = React.useState(false);
const correct = choice === q.correct;
const stateFor = (i) => !submitted ? (choice === i ? 'selected' : 'default') : (i === q.correct ? 'correct' : i === choice ? 'incorrect' : 'default');
return (
<>
{q.q}
{q.options.map((opt, i) => !submitted && setChoice(i)}>{opt} )}
{submitted && {correct ? 'Level 9 applies a controlled automated stop.' : 'Level 9 applies a controlled automated stop when the operator does not respond.'}
{!submitted
? setSubmitted(true)}>Submit answer
: Next question }
);
}
function Downloads({ d, onOpen }) {
const offline = d.courses.filter(c => c.progress > 0 || c.status === 'completed');
return (
<>
Downloaded courses play underground and in low-connectivity areas. They sync when you reconnect.
{offline.map(c => onOpen(c.id)} />)}
);
}
function Profile({ d }) {
const [lang, setLang] = React.useState(window.__msLang || 'en');
const Row = ({ icon, label, right }) => (
{label}
{right}
);
return (
<>
{d.user.name}
{d.user.role} · {d.user.site}
{d.stats.completed}
Completed
{d.stats.certs}
Certificates
Settings
{ setLang(c); window.__msLang = c; }} />} />
|
} />
|
} />
|
} />
Sign out
);
}
function MobileApp() {
const d = window.MSA_DATA;
const [tab, setTab] = React.useState('home');
const [view, setView] = React.useState({ name: 'home' });
const course = view.courseId ? d.courses.find(c => c.id === view.courseId) : d.courses[0];
const go = (v) => setView(v);
let body, showNav = true;
if (view.name === 'home') body = go({ name: 'course', courseId: id })} onTab={t => { setTab(t); go({ name: t }); }} />;
else if (view.name === 'courses') body = go({ name: 'course', courseId: id })} />;
else if (view.name === 'downloads') body = go({ name: 'course', courseId: id })} />;
else if (view.name === 'profile') body = go({ name: tab })} onLesson={() => go({ name: 'lesson', courseId: course.id })} onQuiz={() => go({ name: 'quiz', courseId: course.id })} />; }
else if (view.name === 'lesson') { showNav = false; body = go({ name: 'course', courseId: course.id })} onNext={() => go({ name: 'quiz', courseId: course.id })} />; }
else if (view.name === 'quiz') { showNav = false; body = go({ name: 'course', courseId: course.id })} onDone={() => go({ name: 'course', courseId: course.id })} />; }
return (
{body}
{showNav && { setTab(t); go({ name: t }); }} />}
);
}
Object.assign(window, { MSA_Mobile: MobileApp });
})();
}