aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--pages/_app.tsx2
-rw-r--r--pages/present.tsx87
-rw-r--r--styles/globals.css4
-rw-r--r--styles/presentation.css70
-rw-r--r--styles/util.css11
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;
+}
+