present screen working

5 files changed, 165 insertions, 9 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>;
 }
diff --git a/styles/globals.css b/styles/globals.css
index 028d585..d8bb181 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -14,3 +14,7 @@ h1 { font-size: 1.25rem; }
 h2 { font-size: 1.125rem; }
 h3 { font-size: 1rem; }
 
+.MuiSvgIcon-root {
+	font-size: 24px !important;
+}
+
diff --git a/styles/presentation.css b/styles/presentation.css
index 309b616..0a95b97 100644
--- a/styles/presentation.css
+++ b/styles/presentation.css
@@ -1,13 +1,73 @@
-.presentation {
-	background-color: #000;
-}
-
 .slideWrapper {
 	margin: 0 auto;
 	max-width: calc(16 / 9 * 100vh);
 }
 
-.slide {
+.slideWrapper .slide {
 	padding-top: calc(9 / 16 * 100%);
 	background-color: #ff00ff;
 }
+
+.fullscreenControls {
+	--menu-size: 25;
+	display: grid;
+	grid-template-columns: 1fr calc(var(--menu-size) * 1vw) 1fr;
+}
+
+#menu {
+	pointer-events: none;
+	transition: opacity .3s;
+	opacity: 0;
+}
+
+#menu.active {
+	pointer-events: unset;
+	opacity: 1;
+}
+
+#menu .background {
+	background: linear-gradient(180deg,
+								rgba(1, 1, 13, 0.46) 50%,
+								rgba(1, 1, 13, 1.00) 100%);
+}
+
+#menu .info {
+	margin: 32px;
+	grid-template-columns: auto 1fr auto;
+}
+
+#menu .info .timetitle,
+#menu .info .slide {
+	line-height: 1;
+}
+
+#menu .info .timetitle *,
+#menu .info .slide * {
+	margin: 0;
+}
+
+#menu .info h3 {
+	color: var(--c700);
+	font-weight: 400;
+	font-size: 50px;
+}
+
+#menu .info h1 {
+	font-weight: 600;
+	font-size: 70px;
+}
+
+#menu .MuiButton-root {
+	background-color: var(--piss);
+}
+
+#menu .MuiButton-root.bg-err {
+	background-color: var(--error);
+}
+
+#menu .info .buttons .inner .MuiButton-root {
+	margin: 0;
+	margin-right: 16px;
+	margin-top: 16px;
+}
+
diff --git a/styles/util.css b/styles/util.css
index 3589267..a2381ae 100644
--- a/styles/util.css
+++ b/styles/util.css
@@ -51,6 +51,11 @@
 .floatr { float: right; }
 .floatl { float: left; }
 .floatn { float: none; }
+.floatb {
+	display: flex;
+	justify-content: flex-end;
+	flex-direction: column;
+}
 
 .w1fr { width: 1fr; }
 
@@ -59,6 +64,8 @@
 .w100vw { width: 100vw; }
 .h100vh { height: 100vh; }
 
+.nobr { white-space: nowrap; }
+
 .fullwidth {
 	width: 100%;
 	box-sizing: border-box;
@@ -103,3 +110,7 @@
 	transform: translate(-50%, -50%);
 }
 
+.numbers {
+	font-feature-settings: 'tnum' on, 'lnum' on, 'ss01' on, 'cv01' on;
+}
+