present screen working

2 files changed, 85 insertions, 4 deletions

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 6592b09..fecbad0 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -4,8 +4,8 @@ import '../styles/colors.css';
 import '../styles/globals.css';
 import '../styles/keyframes.css';
 import '../styles/paper.css';
-import '../styles/util.css';
 import '../styles/presentation.css';
+import '../styles/util.css';
 
 export default function Blog({ Component, pageProps }) {
 	return <>
diff --git a/pages/present.tsx b/pages/present.tsx
index 27e2f1a..eb1b2ec 100644
--- a/pages/present.tsx
+++ b/pages/present.tsx
@@ -1,7 +1,88 @@
+import Button from '@material-ui/core/Button';
+import { useEffect } from 'react';
+
+import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded';
+import PlayArrowRoundedIcon from '@material-ui/icons/PlayArrowRounded';
+import SettingsRemoteRoundedIcon from '@material-ui/icons/SettingsRemoteRounded';
+import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded';
+
+function previous() {
+	console.log('previous slide');
+}
+
+function next() {
+	console.log('next slide');
+}
+
 export default function Present() {
-	return <div className="presentation posfix a0 h100vh">
-		<div className="slideWrapper abscenterv posrel">
-			<div className="slide"></div>
+	useEffect(() => {
+		setInterval(() => {
+			document.getElementById('time').innerText = new Date().toLocaleTimeString();
+		}, 500);
+	}, []);
+
+	return <div className='presentation posfix a0 h100vh'>
+		<div className='slideWrapper abscenterv posrel'>
+			<div className='slide'></div>
+		</div>
+		<div className='fullscreenControls posabs a0'>
+			<div className='control previous' onClick={previous} />
+			<div
+				className='control menu'
+				onClick={() => {
+					document.getElementById('menu').classList.add('active');
+				}}
+			/>
+			<div className='control next' onClick={next} />
+		</div>
+		<div className='menu posabs a0' id='menu'>
+			<div
+				className='background posabs a0'
+				onClick={() => {
+					document.getElementById('menu').classList.remove('active');
+				}}
+			/>
+			<div className='info sidebyside posabs h0 b0'>
+				<div className='timetitle'>
+					<h3 className='time numbers nobr' id='time'>14:00:41</h3>
+					<h1 className='title nobr'>PWS Presentatie</h1>
+				</div>
+				<div className='buttons floatb'>
+					<div className='inner center'>
+						<Button
+							variant='contained'
+							color='default'
+							className='bg-err'
+							startIcon={<ExitToAppRoundedIcon />}
+							children='Stop presentation'
+						/>
+						<Button
+							variant='contained'
+							color='default'
+							startIcon={<PlayArrowRoundedIcon />}
+							children='Resume presentation'
+							onClick={() => {
+								document.getElementById('menu').classList.remove('active');
+							}}
+						/>
+						<Button
+							variant='contained'
+							color='default'
+							startIcon={<SettingsRemoteRoundedIcon />}
+							children='Connect remote'
+						/>
+						<Button
+							variant='contained'
+							color='default'
+							startIcon={<SettingsRoundedIcon />}
+							children='Settings'
+						/>
+					</div>
+				</div>
+				<div className='slide posrel floatb'>
+					<h3 className='time numbers nobr posrel'>slide 1/15</h3>
+				</div>
+			</div>
 		</div>
 	</div>;
 }