v1.6.0/welcome exp redone

website/styles/extrasmall.css

@@ -212,7 +212,7 @@ footer .link-button {
 
 .welcome .landing#tips .tip {
   padding: 3rem 0;
-  border-bottom: 0.5px solid var(--primary-medium);
+  border-bottom: 0.5px solid var(--cta);
   padding-right: 3rem;
 }
 
@@ -268,3 +268,384 @@ footer .link-button {
   content: attr(data-upcoming-support);
   text-transform: uppercase;
 }
+
+.pop-features {
+  padding: 35px;
+  padding-left: 70px;
+}
+
+.pop-feature {
+  width: 100%;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
+}
+
+.pop-feature > * {
+  flex: 1;
+  margin: 40px 0;
+}
+
+#title-card {
+  border-radius: 26px;
+  background: var(--primary-light);
+  width: 500px;
+  position: relative;
+  height: 500px;
+  box-shadow: 0px 0px 84px var(--primary-medium);
+  margin: 0 auto;
+}
+div#title-card {
+  width: calc(500px - 60px);
+  height: calc(500px - 60px);
+  padding: 30px;
+}
+
+h5#title-card-title {
+  font-size: 20px;
+  color: var(--cta);
+  letter-spacing: 5px;
+}
+
+h3#title-card-subtitle {
+  font-size: 30px;
+  letter-spacing: 5px;
+  margin: 7.5px 0px;
+  color: var(--primary-text);
+}
+
+p#control-notification,
+p#control-autorejoin,
+p#control-admin {
+  font-size: 15px;
+  padding: 10px 55px;
+  background: var(--primary);
+  border-radius: 26px;
+  color: var(--primary-text);
+  box-shadow: 0px 0px 20px var(--primary-medium);
+  margin: 35px 0px;
+  width: max-content;
+}
+
+p#control-notification {
+  margin-left: -150px;
+}
+
+p#control-autorejoin {
+  margin-left: 100px;
+}
+
+p#control-admin {
+  margin-left: -75px;
+}
+
+p#control-notification span,
+p#control-autorejoin span,
+p#control-admin span {
+  display: block;
+  color: #949494;
+}
+
+.pop-feature .explanation > div {
+  margin: auto auto;
+  align-items: center;
+  max-width: 55%;
+}
+
+.pop-feature .explanation div h4 {
+  color: var(--primary-text);
+  font-size: 20px;
+  text-transform: uppercase;
+  letter-spacing: 5px;
+  margin-bottom: 50px;
+}
+
+.pop-feature .explanation p {
+  color: var(--primary-text);
+  font-size: 16px;
+  text-transform: uppercase;
+  letter-spacing: 5px;
+  line-height: 2;
+}
+
+.pop-feature .explanation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+h5#system-message {
+  text-align: center;
+  color: var(--primary-text);
+  font-size: 16px;
+  letter-spacing: 2px;
+  margin: 5px 0;
+}
+
+p#call-user-chip {
+  display: inline-block;
+  font-size: 20px;
+  padding: 10px 25px;
+  color: var(--primary-text);
+  border-radius: 26px;
+  background: var(--cta);
+  color: var(--primary-medium);
+  margin-right: 20px;
+  position: relative;
+  margin-bottom: 20px;
+}
+
+p#call-user-chip.not-me-user-chip {
+  background: var(--primary);
+  color: var(--primary-text);
+  display: inline-flex;
+  margin: 0;
+  max-width: fit-content;
+  align-items: center;
+  justify-content: center;
+}
+
+p#call-user-chip.not-me-user-chip input {
+  margin-left: 20px;
+}
+
+h6#title-card-tagline {
+  color: var(--primary-medium);
+  font-size: 15px;
+  color: var(--primary);
+  margin: 20px 0;
+  letter-spacing: 3.5px;
+}
+
+@keyframes circleMove {
+  0% {
+    right: -40px;
+    bottom: -40px;
+  }
+  35% {
+    right: 200px;
+    bottom: 250px;
+  }
+  60% {
+    right: 200px;
+    bottom: 250px;
+  }
+  75% {
+    right: -40px;
+    bottom: -40px;
+  }
+  100% {
+    right: -40px;
+    bottom: -40px;
+  }
+}
+@keyframes rectSize {
+  0% {
+    width: 0;
+  }
+  35% {
+    width: 300px;
+  }
+  60% {
+    width: 300px;
+  }
+  75% {
+    width: 0;
+  }
+  100% {
+    width: 0;
+  }
+}
+
+div#fab {
+  background: var(--primary);
+  width: 200px;
+  height: 200px;
+  border-radius: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 60px;
+  letter-spacing: 5px;
+  text-align: center;
+  color: var(--cta);
+  position: absolute;
+  right: 250px;
+  bottom: 250px;
+  animation: circleMove 2s linear 3s infinite alternate-reverse !important;
+  z-index: 99;
+}
+
+div#title-card {
+  position: relative;
+}
+
+div#sidebar {
+  width: 300px;
+  height: 100%;
+  right: 0;
+  position: absolute;
+  background: var(--cta);
+  top: 0;
+  border-top-right-radius: 26px;
+  border-bottom-right-radius: 26px;
+  animation: rectSize 2s linear 3s infinite alternate-reverse !important;
+}
+
+/*
+ T H R E A D
+ D E M O S
+*/
+
+#ti * {
+  font-size: 14px !important;
+  font-family: 'Glacial';
+  letter-spacing: 1.1px;
+}
+
+#ti {
+  color: white;
+  width: fit-content;
+  margin: 10px 0;
+  width: 100%;
+}
+#tm {
+  width: 100%;
+  position: relative;
+}
+#tm #tt {
+  height: 0;
+  overflow-y: visible;
+  font-size: 10px;
+  transition: all ease-in-out 0.3s;
+  /*   transition-delay: 0.1s; */
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  color: #9f9f9f;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row-reverse;
+}
+#tm #tt span {
+  flex: 1;
+  text-align: center;
+}
+#tm #tt #ri {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 15px;
+  color: #c0f300;
+  font-size: 20px;
+  border-radius: 26px;
+  z-index: 99 !important;
+  left: 0;
+  cursor: pointer;
+  background-color: white;
+  background-image: url('https://www.materialui.co/materialIcons/content/reply_grey_192x192.png');
+  background-size: 75%;
+  background-repeat: no-repeat;
+  background-position: center;
+  bottom: 0;
+  transition: all ease-in-out 0.3s;
+  /*   transition-delay: 0.1s; */
+}
+#ti:hover #tm #tt {
+  height: 24px;
+  margin-bottom: 7px;
+  opacity: 1;
+}
+#tm p {
+  max-width: 40%;
+  padding: 5px 15px;
+  background: #424242;
+  border-radius: 26px;
+  z-index: 99 !important;
+  transition: all ease-in-out 0.3s;
+  /*   transition-delay: 0.1s; */
+  width: fit-content;
+}
+#tm img {
+  max-width: 40%;
+  border-radius: 26px;
+  transition: all ease-in-out 0.3s;
+  /*   transition-delay: 0.1s; */
+  z-index: 99;
+}
+#ti:hover #tm p,
+#ti:hover #tm img {
+  margin-left: 40px;
+}
+#tm #tt #ri:hover {
+  opacity: 0.6;
+}
+#tn {
+  font-size: 11px;
+  margin-top: 15px;
+  margin-bottom: 7px;
+  color: var(--primary-text);
+}
+#tr {
+  font-size: 11px;
+  margin-bottom: -20px;
+  padding: 7.5px 15px;
+  padding-bottom: 25px;
+  border-radius: 13px;
+  background: #222222;
+  width: fit-content;
+  max-width: 35%;
+  z-index: 99 !important;
+  transition: all ease-in-out 0.3s;
+  /*   transition-delay: 0.1s; */
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+#tr img {
+  max-height: 50px;
+  border-radius: 26px;
+  transition: all ease-in-out 0.3s;
+  /*   transition-delay: 0.1s; */
+}
+#ti:hover #tr {
+  margin-bottom: 0;
+  padding-bottom: 7.5px;
+}
+#tr:hover {
+  background: #111111;
+}
+#ti.mm {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+#ti.mm #tn {
+  display: none;
+}
+#ti.mm #tm {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+#ti.mm #tm p {
+  text-align: right;
+}
+#ti.mm #tm #tt {
+  flex-direction: row;
+}
+#ti.mm #tm #tt #ri {
+  right: 0;
+  left: unset;
+}
+#ti.mm:hover #tm p,
+#ti.mm:hover #tm img {
+  margin-left: 0;
+  margin-right: 40px;
+}

website/styles/large.css

@@ -18,3 +18,27 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 .landing video {
   max-width: 45%;
 }
+
+.pop-feature {
+  flex-direction: row;
+}
+
+.pop-feature:not(:first-of-type) {
+  margin: -30px 0;
+}
+
+.pop-feature > * {
+  margin: 0;
+}
+
+.pop-feature .explanation {
+  text-align: left;
+}
+
+.pop-feature.alternate {
+  flex-direction: row-reverse;
+}
+
+.pop-feature.alternate .explanation {
+  text-align: right;
+}

website/styles/medium.css

@@ -194,7 +194,8 @@ footer .link-button {
 .copyright .logo a::before {
   content: '';
   height: 100%;
-  top: 0;
+  top: -3px;
+  padding-top: 2px;
   width: 0;
   position: absolute;
   left: -1rem;
@@ -223,7 +224,7 @@ footer .link-button {
 }
 
 .welcome .landing#tips .tip {
-  padding-right: 0;
+  padding-right: 100px;
   transition: all ease-out 0.3s;
 }
 
@@ -270,7 +271,7 @@ footer .link-button {
 }
 
 .welcome .landing#tips .tip h6 {
-  color: var(--primary-light);
+  color: var(--primary-medium);
   transition: all ease-out 0.3s;
 }
 

website/styles/variables-dark.css

@@ -12,8 +12,8 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 
 :root {
   --primary: black;
-  --primary-medium: #232323;
+  --primary-medium: #464646;
-  --primary-light: #454545;
+  --primary-light: #626262;
   --cta: #c0f300;
   --primary-text: white;
 }

website/welcome/index.html

@@ -42,9 +42,6 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h5 data-font="sans" class="logo-tag">
         WELCOME TO WATCH PARTY
       </h5>
-      <p data-font="sans-bold" class="title subtitle">Watch Party lives in the bottom right corner of your screen. <br /> It's there when you need it and hidden when you don't.</p>
-      <video src="../media/features/Tutorial.mp4" autoplay muted loop> </video>
-      <a data-font="sans-bold" href="../changes/" class="link-button">See What's New</a>
       <p data-font="sans-bold" class="title subtitle">
         WATCH TOGETHER ON
       </p>
@@ -62,6 +59,134 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         </div>
       </div>
     </div>
+    <div class="pop-features">
+      
+      <div class="pop-feature alternate">
+        <div id="title-card-container">
+          <div id="title-card">
+            <div data-font="serif" id="fab">WP</div>
+            <div id="sidebar"></div>
+          </div>
+        </div>
+        <div class="explanation">
+          <div>
+            <h4 data-font="sans-bold">TO BE OR NOT TO BE</h4>
+            <p data-font="sans">Watch Party is built to not be in your way. There when you need it, gone when you don't. Watch Party lives in the bottom right corner of your screen. You can use the fullscreen button in the sidebar to go fullscreen with Watch Party.</p>  
+          </div>
+        </div>
+      </div>
+
+      <div class="pop-feature">
+        <div id="title-card-container">
+          <div id="title-card">
+            <h5 data-font="sans-bold" id="title-card-title">WATCH PARTY</h5>
+            <h3 data-font="sans" id="title-card-subtitle">YOUR PARTY NAME</h3>
+            <p data-font="sans" id="control-notification">
+              Allow chat notification when side panel is closed
+              <span>Notifications show up when the side bar is hidden</span>
+            </p>
+            <p data-font="sans" id="control-autorejoin">
+              Allow Watch Party to auto rejoin
+              <span>Automatically rejoin party if you return to the page within 1 minute</span>
+            </p>
+            <p data-font="sans" id="control-admin">
+              Enable admin only mode
+              <span>Only party admin can sync player and start calls</span>
+            </p>
+          </div>
+        </div>
+        <div class="explanation">
+          <div>
+            <h4 data-font="sans-bold">Stay in control</h4>
+            <p data-font="sans">Find your settings by clicking on title card (when you're in a party) or in the settings panel (when you're creating or joining) </p>  
+          </div>
+        </div>
+      </div>
+
+      <div class="pop-feature alternate">
+        <div id="title-card-container">
+          <div id="title-card">
+            <h5 data-font="sans-bold" id="system-message">Ayushya started the party.</h5>
+
+            <div id="ti">
+              <div id="tn">SOMEONE</div>
+              <div id="tm">
+                <div id="tt">
+                  <span>12:00:00 PM</span>
+                  <div id="ri"></div></div>
+                <p>Hiya buddy!</p>
+              </div>
+            </div>
+            <div id="ti" class="mm">
+              <div id="tn">AYUSHYA</div>
+              <div id="tr">Hiya buddy!
+              </div>
+              <div id="tm">
+                <div id="tt">
+                  <span>12:00:00 PM</span>
+                  <div id="ri"></div></div>
+                <p>OH GOD NO! PLEASE GOD NO! NO!</p>
+              </div>
+            </div>
+            <div id="ti">
+              <div id="tn">SOMEONE</div>
+              <div id="tm">
+                <div id="tt">
+                  <span>12:00:00 PM</span>
+                  <div id="ri"></div>
+                </div>
+                <img src="https://media.giphy.com/media/d10dMmzqCYqQ0/giphy.gif" />
+              </div>
+            </div>
+            <div id="ti" class="mm">
+              <div id="tn">SOMEONE</div>
+              <div id="tr">
+                <img src="https://media.giphy.com/media/d10dMmzqCYqQ0/giphy.gif" /></div>
+              <div id="tm">
+                <div id="tt">
+                  <span>12:00:00 PM</span>
+                  <div id="ri"></div>
+                </div>
+                <p>Let's watch The Office</p>
+              </div>
+            </div>
+
+          </div>
+        </div>
+        <div class="explanation">
+          <div>
+            <h4 data-font="sans-bold">FULL FEATURED CHAT</h4>
+            <p data-font="sans">A brand new, completely revamped chat user interface, now has replies, shows pending messages, and improves the Giphy GIF picker</p>  
+          </div>
+        </div>
+      </div>
+
+      <div class="pop-feature">
+
+        <div id="title-card-container">
+          <div id="title-card">
+            <h5 data-font="sans-bold" id="title-card-title">WATCH PARTY</h5>
+            <h3 data-font="sans" id="title-card-subtitle">ANIME WATCH PARTY</h3>
+            <h6 data-font="sans" id="title-card-tagline">USERS IN PARTY</h6>
+            <p data-font="sans" id="call-user-chip">Ayushya</p>
+            <p data-font="sans" id="call-user-chip">Someone</p>
+            <p data-font="sans" id="call-user-chip">Third Party</p>
+            <p data-font="sans" id="call-user-chip">Won't Stop Talking</p>
+            <h6 data-font="sans" id="title-card-tagline">USERS ON CALL</h6>
+            <p data-font="sans" id="call-user-chip">Ayushya</p>
+            <p data-font="sans" id="call-user-chip" class="not-me-user-chip">Someone</p>
+            <p data-font="sans" id="call-user-chip" class="not-me-user-chip">Won't Stop Talking <input type="range" value="2" min="0" max="10"></p>
+          </div>
+        </div>
+        <div class="explanation">
+          <div>
+            <h4 data-font="sans-bold">MADE FOR YOU & YOUR GANG</h4>
+            <p data-font="sans">See who's in your party, get on a call with your party, and volume control for the person who just won't stop talking. </p>
+          </div>
+        </div>
+      </div>
+
+    </div>
     <div id="tips" class="landing">
       <p data-font="sans-bold" class="title">
        TIPS & FAQ
@@ -82,14 +207,6 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
           If you started the party, you can simply join the party from a different place to change the party location.
         </p>
       </div>
-      <div class="tip">
-        <h6 data-font="sans">
-          I CAN'T START A CALL
-        </h6>
-        <p data-font="sans-bold">
-          A group call can only be started by the person who started the party - after that the rest of the party can join.
-        </p>
-      </div>
       <div class="tip">
         <h6 data-font="sans">
           CHAT NOTIFICATIONS ARE ANNOYING