diff options
| -rw-r--r-- | pages/_app.tsx | 2 | ||||
| -rw-r--r-- | pages/present.tsx | 87 | ||||
| -rw-r--r-- | styles/globals.css | 4 | ||||
| -rw-r--r-- | styles/presentation.css | 70 | ||||
| -rw-r--r-- | styles/util.css | 11 |
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; +} + |