feat: sm mockup

client/src/features/viewers/backstage/StageManager.jsx

@@ -0,0 +1,82 @@
+import QRCode from 'react-qr-code';
+import style from './StageManager.module.css';
+
+export default function StageManager() {
+  return (
+    <div className={style.container__gray}>
+      <div className={style.eventTitle}>Todays event name</div>
+
+      <div className={style.nowContainer}>
+        <div className={style.label}>Now</div>
+        <div className={style.nowTitle}>Are hamburguers real</div>
+        <div className={style.nowSubtitle}>A day in the life....</div>
+        <div className={style.nowPresenter}>Carlos Valente</div>
+      </div>
+
+      <div className={style.nextContainer}>
+        <div className={style.label}>Up Next</div>
+        <div className={style.nextTitle}>Up to midnight</div>
+        <div className={style.nextSubtitle}></div>
+        <div className={style.nextPresenter}>Veronica</div>
+      </div>
+
+      <div className={style.todayContainer}>
+        <div className={style.label}>Today</div>
+        <div className={style.entries}>
+          <div class={style.entryPast}>
+            <div className={style.entryStart}>10:30</div>
+            <div className={style.entryEnd}>10:45</div>
+            <div className={style.entryTitle}>A dress to the nation</div>
+          </div>
+          <div class={style.entryPast}>
+            <div className={style.entryStart}>10:30</div>
+            <div className={style.entryEnd}>10:45</div>
+            <div className={style.entryTitle}>A dress to the nation</div>
+          </div>
+          <div class={style.entryPast}>
+            <div className={style.entryStart}>10:30</div>
+            <div className={style.entryEnd}>10:45</div>
+            <div className={style.entryTitle}>A dress to the nation</div>
+          </div>
+          <div class={style.entryNow}>
+            <div className={style.entryStart}>10:30</div>
+            <div className={style.entryEnd}>10:45</div>
+            <div className={style.entryTitle}>Are burguers real</div>
+          </div>
+          <div class={style.entryFuture}>
+            <div className={style.entryStart}>10:30</div>
+            <div className={style.entryEnd}>10:45</div>
+            <div className={style.entryTitle}>Up to midnight</div>
+          </div>
+        </div>
+        <div className={style.nav}>
+          <div className={style.navItem} />
+          <div className={style.navItem} />
+          <div className={style.navItemSelected} />
+        </div>
+      </div>
+
+      <div className={style.clockContainer}>
+        <div className={style.label}>Time Now</div>
+        <div className={style.clock}>11:00:23</div>
+      </div>
+
+      <div className={style.countdownContainer}>
+        <div className={style.label}>Countdown</div>
+        <div className={style.clock}>00:23</div>
+      </div>
+
+      <div className={style.infoContainer}>
+        <div className={style.label}>Info</div>
+        <div className={style.infoMessages}>
+          <div className={style.info}>Water in the public bathroom</div>
+          <div className={style.info}>Wifi Password: bemywifi</div>
+          <div className={style.info}>Have a nice day</div>
+        </div>
+        <div className={style.qr}>
+          <QRCode value='www.carlosvalente.com' size={180} level='L' />
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/features/viewers/backstage/StageManager.module.css

@@ -0,0 +1,206 @@
+.container__gray,
+.container__grayFinished {
+  background: linear-gradient(90deg, #252525 0%, #121212 100%);
+  height: 100%;
+  color: #fffd;
+  font-size: 16px;
+  font-weight: 300;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 3vw 2fr 1vw;
+  grid-template-rows: 5em 1fr 1fr 1fr 1fr 1fr;
+  grid-template-areas:
+    ' titl titl titl . schd .'
+    ' titl titl titl . schd .'
+    ' now  now  now  . schd .'
+    ' next next .... . schd .'
+    ' .... .... .... . info .'
+    ' time clck pres . info .';
+  gap: 1em;
+}
+
+.label {
+  font-size: 1.3vw;
+  color: #ff7597;
+}
+
+.eventTitle {
+  grid-area: titl;
+  font-size: 5vw;
+  font-weight: 600;
+  padding-top: 0.1em;
+  padding-left: 0.5em;
+}
+
+/* =================== TITLES ===================*/
+
+.nowContainer,
+.nextContainer,
+.todayContainer,
+.clockContainer,
+.countdownContainer {
+  background-color: rgba(255, 255, 255, 0.05);
+  padding: 1em 2.5em;
+}
+
+.todayContainer,
+.infoContainer {
+  background-color: rgba(255, 255, 255, 0.07);
+  padding: 1.5em 2.5em;
+}
+
+.infoContainer,
+.todayContainer {
+  border-radius: 1em;
+}
+
+.nowContainer {
+  background-color: rgba(255, 255, 255, 0.09);
+
+  grid-area: now;
+  border-radius: 0 2em 2em 0;
+}
+.nextContainer {
+  grid-area: next;
+  border-radius: 0 2em 2em 0;
+}
+
+.nowTitle,
+.nextTitle {
+  color: #ddd;
+  font-weight: 400;
+}
+
+.nowSubtitle,
+.nowPresenter,
+.nextSubtitle,
+.nextPresenter {
+  color: #aaa;
+}
+
+.nowTitle {
+  font-size: 3vw;
+}
+
+.nowSubtitle,
+.nowPresenter {
+  font-size: 2.2vw;
+}
+
+.nextTitle {
+  font-size: 2.5vw;
+}
+
+.nextSubtitle,
+.nextPresenter {
+  color: #aaa;
+  font-size: 1.8vw;
+}
+
+/* =================== SCHEDULE ===================*/
+
+.todayContainer {
+  grid-area: schd;
+  display: grid;
+  grid-template-rows: 3em 1fr 2em;
+  margin-top: 3vh;
+  height: 95%;
+}
+
+.entries {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8em;
+}
+
+.navItem,
+.navItemSelected {
+  background-color: rgba(255, 255, 255, 0.39);
+  width: 16px;
+  height: 16px;
+  border-radius: 10px;
+}
+
+.navItemSelected {
+  background-color: rgba(255, 255, 255, 0.79);
+}
+
+.entryPast,
+.entryNow,
+.entryFuture {
+  background-color: rgba(255, 255, 255, 0.03);
+  display: flex;
+  gap: 1em;
+  font-size: 1.3vw;
+  padding: 0.2em 1em;
+  border-radius: 8px;
+}
+
+.entryPast {
+  color: #aaa;
+}
+.entryFuture {
+  color: #ddd;
+}
+.entryNow {
+  font-size: 1.3vw;
+  color: #fff;
+  line-height: 3em;
+  background-color: rgba(255, 255, 255, 0.09);
+}
+
+/* =================== OVERLAY ===================*/
+
+.message {
+  grid-area: pres;
+}
+
+.infoContainer {
+  grid-area: info;
+  margin-bottom: 2vh;
+  display: grid;
+
+  grid-template-columns: 3fr 1fr;
+  grid-template-areas:
+    'titl qr'
+    'info qr';
+}
+
+.infoMessages {
+  grid-area: info;
+  font-size: 2em;
+}
+
+.qr {
+  align-self: center;
+  justify-self: center;
+  grid-area: qr;
+}
+
+/* =================== MAIN ===================*/
+
+.clockContainer {
+  grid-area: time;
+  margin-bottom: 2vh;
+  border-radius: 1em 0em 0em 1em;
+}
+
+.countdownContainer {
+  grid-area: clck;
+  margin-bottom: 2vh;
+  border-radius: 0em 1em 1em 0em;
+}
+
+.clock {
+  font-size: 3vw;
+  text-align: center;
+  letter-spacing: 0.1em;
+  color: #ddd;
+}
+
+.nav {
+  align-self: center;
+  justify-self: flex-end;
+  display: flex;
+  gap: 1em;
+  margin-bottom: auto;
+}