v1.7.3/website firefox and getting started

website/404.html

@@ -120,11 +120,22 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       </a>
     </div>
     <div class="overlap">
+      <div class="info">
+        <div class="info-card" data-font="sans-bold">🌐</div>
+        <div class="info-text">
+          <h4 class="sub-title" data-font="sans-bold">FIREFOX</h4>
+          <p class="body" data-font="sans">
+            If you're here for the Firefox Add-On, it will be available soon. It's pending approval
+            from Mozilla.
+          </p>
+          <a href="/" class="underlink" data-font="sans-bold">GO HOME</a>
+        </div>
+      </div>
       <div class="info">
         <div class="info-card" data-font="sans-bold">404</div>
         <div class="info-text">
           <h4 class="sub-title" data-font="sans-bold">PAGE NOT FOUND</h4>
-          <p class="body" data-font="sans">Looks like this page doesn't exist.</p>
+          <p class="body" data-font="sans">Looks like this page doesn't exist...yet.</p>
           <a href="/" class="underlink" data-font="sans-bold">GO HOME</a>
         </div>
       </div>

website/donate/index.html

@@ -232,7 +232,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
     <div class="donate overlap features card-grid">
       <div class="support-card">
         <h4 data-font="sans-bold" class="sub-title">1 SERVER</h4>
-        <img muted autoplay loop src="/media/costs/server1.webp"></video>
+        <div class="img-wrapper"> 
+          <img src="/media/costs/server1.webp"></img>
+        </div>
         <p data-font="sans" class="body">
           The cost of a single server for 1 month costs about $1.00
         </p>
@@ -240,7 +242,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       </div>
       <div class="support-card">
         <h4 data-font="sans-bold" class="sub-title">COFFEE</h4>
-        <img muted autoplay loop src="/media/costs/coffee.webp"></video>
+        <div class="img-wrapper"> 
+          <img src="/media/costs/coffee.webp"></img>
+        </div>
         <p data-font="sans" class="body">
           Get me a cup of coffee for $2.00, helps me crank out the updates
         </p>
@@ -248,7 +252,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       </div>
       <div class="support-card">
         <h4 data-font="sans-bold" class="sub-title">ALL SERVERS</h4>
-        <img muted autoplay loop src="/media/costs/server+.webp"></video>
+        <div class="img-wrapper"> 
+          <img src="/media/costs/server+.webp"></img>
+        </div>
         <p data-font="sans" class="body">
           The total costs of all servers for 1 month is about $7.00
         </p>
@@ -256,7 +262,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       </div>
       <div class="support-card">
         <h4 data-font="sans-bold" class="sub-title">GROUP CALLS</h4>
-        <img muted autoplay loop src="/media/costs/dolby.webp"></video>
+        <div class="img-wrapper"> 
+          <img src="/media/costs/dolby.webp"></img>
+        </div>
         <p data-font="sans" class="body">
           The total costs of managing video and voice call APIs is about $10.00
         </p>
@@ -264,7 +272,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       </div>
       <div class="support-card">
         <h4 data-font="sans-bold" class="sub-title">SUBSCRIPTIONS</h4>
-        <img muted autoplay loop src="/media/costs/subscriptions.webp"></video>
+        <div class="img-wrapper"> 
+          <img src="/media/costs/subscriptions.webp"></img>
+        </div>
         <p data-font="sans" class="body">
           Cost of subscriptions to add support for new streaming services $15.00
         </p>

website/styles/extrasmall.css

@@ -168,6 +168,7 @@ a.big-button::after {
 
 .info {
   margin-bottom: 10rem;
+  vertical-align: top;
 }
 
 .info.alert {
@@ -306,6 +307,13 @@ a.big-button::after {
   flex: 1;
 }
 
+.features.card-grid .support-card .img-wrapper {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .features.card-grid .support-card button.big-button {
   border: none;
   outline: none;
@@ -321,11 +329,7 @@ a.big-button::after {
   border-top-right-radius: 0;
   border-top-left-radius: 0;
   transition: all ease-in-out 0.2s;
-  height: 7rem !important;
+  height: 7.2rem;
-}
-
-.donate.card-grid .support-card img {
-  margin: 2.5rem 0;
 }
 
 #paypal-donate {

website/styles/medium.css

@@ -51,6 +51,7 @@ a.title {
 .info {
   display: inline-block;
   max-width: calc(50% - 3rem);
+  width: calc(50% - 3rem);
 }
 
 .heading + .overlap .info:first-of-type {
@@ -59,6 +60,7 @@ a.title {
 
 .text-section .info {
   max-width: 100%;
+  width: 100%;
   margin-right: 0;
 }
 
@@ -79,7 +81,3 @@ a.title {
 .link-list .underlink {
   width: fit-content;
 }
-
-.donate.card-grid .support-card img {
-  margin: 7.5rem 0;
-}

website/welcome/index.html

@@ -119,7 +119,93 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         GET CHROME EXTENSION
       </a>
     </div>
-    <div style="margin-top: 10rem !important" class="text-section">
+    <div class="overlap">
+      <div class="info">
+        <div class="info-card">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="black"
+            width="48px"
+            height="48px"
+          >
+            <path d="M0 0h24v24H0z" fill="none" />
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"
+            />
+          </svg>
+        </div>
+        <div class="info-text">
+          <h4 class="sub-title" data-font="sans-bold">WELCOME TO WATCH PARTY</h4>
+          <p class="body" data-font="sans">
+            Need help getting started? No worries, scroll through the steps below to get going.
+          </p>
+          <a href="#tips" class="underlink" data-font="sans-bold"> QUESTIONS? SEE FAQ </a>
+        </div>
+      </div>
+    </div>
+    <div class="text-section">
+      <div class="info">
+        <div class="info-text">
+          <h4 data-font="sans-bold" class="sub-title">Get Going With Watch Party</h4>
+          <div class="description">
+            <p data-font="sans" class="body">
+              Getting started with Watch Party is simple, Watch Party comes with a built in tutorial
+              mode (launch by going to any supported streaming service) or you can follow the steps
+              below.
+            </p>
+            <a href="#services" class="underlink" data-font="sans"> SEE SUPPORTED SERVICES </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="steps features card-grid">
+      <div class="support-card">
+        <h4 style="flex: 1" class="sub-title" data-font="sans-bold">STEP 1</h4>
+        <p class="body" data-font="sans">
+          The first step is as simple as going to the website (streaming service) that you want to
+          use Watch Party with.
+        </p>
+      </div>
+      <div class="support-card">
+        <h4 class="sub-title" data-font="sans-bold">STEP 2</h4>
+        <div class="img-wrapper">
+          <img src="/icons/wp192.png" />
+        </div>
+        <p class="body" data-font="sans">
+          Click the Watch Party icon (shown above ⬆) in the bottom right corner of your screen
+        </p>
+      </div>
+      <div class="support-card">
+        <h4 style="flex: 1" class="sub-title" data-font="sans-bold">STEP 3</h4>
+        <p class="body" data-font="sans">
+          Fill out the three text fields to create or join a party (change mode by click on the
+          respective buttons)
+        </p>
+      </div>
+      <div class="support-card">
+        <h4 class="sub-title" style="flex: 1" data-font="sans-bold">STEP 4</h4>
+        <p class="body" data-font="sans">
+          Fill out the three text fields to create or join a party (change mode by click on the
+          respective Create or Join buttons)
+        </p>
+      </div>
+      <div class="support-card">
+        <h4 class="sub-title" style="flex: 1" data-font="sans-bold">STEP 5</h4>
+        <p class="body" data-font="sans">
+          Start playing something then, pause and play once after starting your show to make sure
+          sync is working. You should see the name of what's currently playin show up in the sidebar
+        </p>
+      </div>
+      <div class="support-card">
+        <h4 class="sub-title" style="flex: 1" data-font="sans-bold">STEP 6</h4>
+        <p class="body" data-font="sans">
+          Click on your party name in the sidebar, here you can see some additional options as well
+          as who's in the party.
+        </p>
+      </div>
+    </div>
+    <div id="services" class="text-section">
       <div class="info">
         <div class="info-text">
           <h4 class="sub-title" data-font="sans-bold">WATCH TOGETHER ON</h4>
@@ -159,14 +245,32 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
           </p>
         </div>
       </div>
+      <div class="info">
+        <div class="info-text">
+          <h4 class="sub-title" data-font="sans-bold">SYNC NOT WORKING</h4>
+          <div class="description">
+            <p data-font="sans" class="body">
+              If sync isn't working try refreshing <code>Ctrl + R</code> the page and starting the
+              show before joining the party.
+            </p>
+            <a
+              class="underlink"
+              data-font="sans"
+              href="mailto:admin@chromewatchparty.com?subject=Sync Not Working"
+            >
+              REPORT BROKEN SYNC FOR WEBSITE
+            </a>
+          </div>
+        </div>
+      </div>
       <div class="info">
         <div class="info-text">
           <h4 class="sub-title" data-font="sans-bold">CAN I DISABLE WATCH PARTY TEMPORARILY</h4>
           <div>
             <p data-font="sans" class="body">
               Watch Party is built to not be in your way but, it can be hidden by going clicking on
-              the Watch Party extension (in the top right of Chrome toolbar), and switching the show
+              the Watch Party extension (in the top right of Chrome / Firefox toolbar), and
-              / hide switch.
+              switching the show / hide switch.
             </p>
             <p data-font="sans" class="body">
               You can alternatively go to the Chrome Extensions page (chrome://extensions) and
@@ -243,14 +347,16 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       </div>
       <div class="info">
         <div class="info-text">
-          <h4 class="sub-title"></h4>
+          <div>
-          <a
+            <p data-font="sans" class="body">DON'T SEE YOUR QUESTION?</p>
-            href="mailto:admin@chromewatchparty.com?subject=New FAQ Question"
+            <a
-            data-font="sans"
+              href="mailto:admin@chromewatchparty.com?subject=New FAQ Question"
-            class="underlink"
+              data-font="sans"
-          >
+              class="underlink"
-            ASK A NEW QUESTION
+            >
-          </a>
+              ASK A NEW QUESTION
+            </a>
+          </div>
         </div>
       </div>
     </div>