ayushya/watchparty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.7.3/website firefox and getting started

Browse Source
This commit is contained in:
ayushya
2020-09-10 00:17:07 -04:00
parent 7bfd2f04b4
commit 0c44b4a690
5 changed files with 155 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/404.html
+12 -1
View File
@@ -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
+15 -5
View File
@@ -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
+9 -5
View File
@@ -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;
}
.donate.card-grid .support-card img {
margin: 2.5rem 0;
height: 7.2rem;
}
#paypal-donate {
website/styles/medium.css
+2 -4
View File
@@ -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
+117 -11
View File
@@ -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
/ hide switch.
the Watch Party extension (in the top right of Chrome / Firefox toolbar), and
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>
<a
href="mailto:admin@chromewatchparty.com?subject=New FAQ Question"
data-font="sans"
class="underlink"
>
ASK A NEW QUESTION
</a>
<div>
<p data-font="sans" class="body">DON'T SEE YOUR QUESTION?</p>
<a
href="mailto:admin@chromewatchparty.com?subject=New FAQ Question"
data-font="sans"
class="underlink"
>
ASK A NEW QUESTION
</a>
</div>
</div>
</div>
</div>