feat: presenter mockup

client/src/features/viewers/presenter/PresenterSimple.jsx

@@ -0,0 +1,28 @@
+import style from './PresenterView.module.css';
+
+export default function PresenterSimple() {
+  return (
+    <div className={style.container__gray}>
+
+      {/* <div className={style.messageOverlayActive}>
+        <div className={style.message}>Remember to smile</div>
+      </div> */}
+
+      <div className={style.mainContainer}>
+        <div className={style.countdownBig}>01:03</div>
+        <div className={style.progress}>
+          <div className={style.progressed}></div>
+        </div>
+      </div>
+
+      {/* <div className={style.mainContainer}>
+        <div className={style.finished}>TIME UP</div>
+      </div> */}
+
+      <div className={style.clockContainer}>
+        <div className={style.label}>Time Now</div>
+        <div className={style.clock}>11:00:23</div>
+      </div>
+    </div>
+  );
+}

client/src/features/viewers/presenter/PresenterView.jsx

@@ -0,0 +1,41 @@
+import style from './PresenterView.module.css';
+
+export default function PresenterView() {
+  return (
+    <div className={style.container__gray}>
+      <div className={style.nowContainer}>
+        <div className={style.label}>Now</div>
+        <div className={style.title}>Are hamburguers real</div>
+        <div className={style.subtitle}>A day in the life....</div>
+        <div className={style.presenter}>Carlos Valente</div>
+      </div>
+
+      <div className={style.nextContainer}>
+        <div className={style.label}>Up Next</div>
+        <div className={style.title}>Up to midnight</div>
+        <div className={style.subtitle}></div>
+        <div className={style.presenter}>Veronica</div>
+      </div>
+
+      {/* <div className={style.messageOverlayActive}>
+        <div className={style.message}>Remember to smile</div>
+      </div> */}
+
+      <div className={style.mainContainer}>
+        <div className={style.countdown}>01:03</div>
+        <div className={style.progress}>
+          <div className={style.progressed}></div>
+        </div>
+      </div>
+
+      <div className={style.mainContainer}>
+        <div className={style.finished}>TIME UP</div>
+      </div>
+
+      <div className={style.clockContainer}>
+        <div className={style.label}>Time Now</div>
+        <div className={style.clock}>11:00:23</div>
+      </div>
+    </div>
+  );
+}

client/src/features/viewers/presenter/PresenterView.module.css

@@ -0,0 +1,149 @@
+.container__gray,
+.container__grayFinished {
+  background: radial-gradient(circle, #202020 0%, #121212 80%);
+  height: 100vh;
+  color: #fffd;
+  font-size: 16px;
+  padding: 1em;
+}
+
+.label {
+  font-size: 1.5vw;
+  color: #ff7597;
+}
+/* =================== TITLES ===================*/
+
+.nowContainer,
+.nextContainer {
+  background-color: rgba(255, 255, 255, 0.05);
+  padding: 1em 3em;
+  border-radius: 4px;
+  width: 40vw;
+}
+
+.nowContainer {
+  position: absolute;
+  bottom: 1em;
+  left: 1em;
+}
+.nextContainer {
+  position: absolute;
+  bottom: 1em;
+  left: calc(50% + 1em);
+}
+
+.title {
+  color: #ddd;
+  font-size: 2.5vw;
+}
+.subtitle,
+.presenter {
+  color: #aaa;
+  font-size: 1.8vw;
+}
+
+.title:after,
+.presenter:after,
+.subtitle:after {
+  content: '\200b';
+}
+
+/* =================== MAIN ===================*/
+
+.mainContainer,
+.mainContainerFinished {
+  margin: auto;
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  color: white;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+}
+
+.countdown,
+.countdownBig {
+  line-height: 1em;
+  letter-spacing: 0.1em;
+}
+
+.countdown {
+  font-size: 25vw;
+}
+
+.countdownBig {
+  padding-top: 10vh;
+  font-size: 30vw;
+}
+
+.progress {
+  width: 80%;
+  margin: auto;
+  height: 1em;
+  background-color: #333;
+}
+
+.progressed {
+  width: 30%;
+  height: 1em;
+  background-color: #ddd;
+}
+
+.container__grayFinished {
+  border: 1em solid #ff5353;
+}
+
+.finished {
+  font-size: 23vw;
+  font-weight: 600;
+  color: #ff5353;
+}
+
+/* =================== OVERLAY ===================*/
+
+.messageOverlay,
+.messageOverlayActive {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.85);
+  z-index: 2;
+  opacity: 0;
+}
+
+.messageOverlayActive {
+  opacity: 1;
+}
+
+.message {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  color: white;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  font-size: 15vw;
+  line-height: 1.1em;
+  text-align: center;
+  font-weight: 600;
+}
+
+/* =================== MAIN ===================*/
+
+.clockContainer {
+  position: absolute;
+  top: 2em;
+  left: 2em;
+}
+
+.clock {
+  font-size: 4vw;
+  letter-spacing: 0.1em;
+  color: #ddd;
+}