Files
watchparty/website/welcome/index.html
T

654 lines
25 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<!-----------------------------------------------------------------------
Copyright (C) Ayushya Amitabh - All Rights Reserved
Unauthorized copying of this file, via any medium is strictly prohibited
Proprietary and confidential
Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020 - 2021
https://www.chromewatchparty.com/copyright
=========================================================================
ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, UNLESS OTHERWISE
CITED ARE THE SOLE INTELLECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
------------------------------------------------------------------------->
<html>
<head>
<meta
name="description"
content="Watch Party syncs streamed content across devices. Watch your favorites, with your favorite people."
/>
<meta
name="keywords"
content="watch party, sharing, video call, voice phone, free, chrome, firefox, netflix, hulu, disney plus, prime video, youtube, hbo, peacock tv, google play, crunchyroll, apple tv, viki, funimation, roosterteeth, stan, hotstar"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/icons/favicon.png" />
<link rel="manifest" href="/manifest.json" />
<link
rel="preload"
as="font"
href="/fonts/glacialindifference-bold-webfont.woff"
crossorigin
/>
<link
rel="preload"
as="font"
href="/fonts/glacialindifference-bold-webfont.woff2"
crossorigin
/>
<link
rel="preload"
as="font"
href="/fonts/glacialindifference-italic-webfont.woff"
crossorigin
/>
<link
rel="preload"
as="font"
href="/fonts/glacialindifference-italic-webfont.woff2"
crossorigin
/>
<link
rel="preload"
as="font"
href="/fonts/glacialindifference-regular-webfont.woff"
crossorigin
/>
<link
rel="preload"
as="font"
href="/fonts/glacialindifference-regular-webfont.woff2"
crossorigin
/>
<style>
@import "/styles/variables.css";
@import "/styles/variables-dark.css" screen and
(prefers-color-scheme: dark);
@import "/styles/extrasmall.css";
@import "/styles/small.css" only screen and (min-width: 768px) and
(max-width: 1024px);
@import "/styles/medium.css" only screen and (min-width: 1024px);
@import "/styles/large.css" only screen and (min-width: 1366px);
@import "/styles/extralarge.css" only screen and (min-width: 1921px);
@font-face {
font-family: "GlacialBold";
src: url("/fonts/glacialindifference-bold-webfont.woff2")
format("woff2"),
url("/fonts/glacialindifference-bold-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GlacialItalic";
src: url("/fonts/glacialindifference-italic-webfont.woff2")
format("woff2"),
url("/fonts/glacialindifference-italic-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Glacial";
src: url("/fonts/glacialindifference-regular-webfont.woff2")
format("woff2"),
url("/fonts/glacialindifference-regular-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
[data-font="sans"] {
font-family: "Glacial", sans-serif;
font-display: swap;
}
[data-font="sans-bold"] {
font-family: "GlacialBold", sans-serif;
font-display: swap;
}
[data-font="sans-italic"] {
font-family: "GlacialItalic", sans-serif;
font-style: italic;
font-display: swap;
}
</style>
<title>Watch Party | Welcome</title>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-87498806-2");
</script>
</head>
<body>
<div class="heading bubble empty right">
<a href="/" class="title underlink" data-font="sans-bold">WATCH PARTY</a>
<h4 class="sub-title" data-font="sans">
WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
</h4>
<a
href="https://get.firefoxwatchparty.com"
class="big-button"
data-font="sans"
>
GET FIREFOX ADD-ON
</a>
<a
href="https://get.edgewatchparty.com"
class="big-button"
data-font="sans"
>
GET EDGE ADD-ON
</a>
<a
href="https://get.chromewatchparty.com"
class="big-button"
data-font="sans"
>
GET CHROME EXTENSION
</a>
</div>
<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">
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 5</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>
</div>
</div>
</div>
<div class="card-grid">
<a href="https://www.netflix.com/" id="netflix" class="support-card"></a>
<a href="https://www.hulu.com/" id="hulu" class="support-card"></a>
<a
href="https://www.disneyplus.com/"
id="disney"
class="support-card"
></a>
<a
href="https://www.amazon.com/gp/video/storefront"
id="prime"
class="support-card"
></a>
<a href="https://www.youtube.com/" id="youtube" class="support-card"></a>
<a href="https://play.hbomax.com/" id="hbo" class="support-card"></a>
<a
href="https://www.peacocktv.com/"
id="peacock"
class="support-card"
></a>
<a
href="https://play.google.com/movies"
id="google"
class="support-card"
></a>
<a
href="https://www.crunchyroll.com/"
id="crunchyroll"
class="support-card"
></a>
<a href="https://tv.apple.com/" id="apple" class="support-card"></a>
<a href="https://www.viki.com/" id="viki" class="support-card"></a>
<a
href="https://www.funimation.com/"
id="funimation"
class="support-card"
></a>
<a
href="https://roosterteeth.com/"
id="roosterteeth"
class="support-card"
></a>
<a href="https://play.stan.com.au/" id="stan" class="support-card"></a>
<a href="https://www.hotstar.com/" id="hotstar" class="support-card"></a>
<a
href="https://www.airtelxstream.in/"
id="airtel"
class="support-card"
></a>
<a href="https://vimeo.com/watch" id="vimeo" class="support-card"></a>
<a
href="https://dailymotion.com/"
id="dailymotion"
class="support-card"
></a>
<a href="https://www.imdb.com/tv/" id="imdb" class="support-card"></a>
<a href="https://www.paramountplus.com" id="paramount" class="support-card"></a>
</div>
<div id="tips" class="text-section">
<div class="info">
<div class="info-text">
<h1 class="title" data-font="sans-bold">FAQ</h1>
</div>
</div>
<div class="info">
<div class="info-text">
<h4 class="sub-title" data-font="sans-bold">
DO I STILL NEED ACCOUNTS FOR THE STREAMING PLATFORMS
</h4>
<p data-font="sans" class="body">
Yes, Watch Party is not a hack. The sole purpose of Watch Party is
to help synchronize the playing/pausing on streamed content.
</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 / 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 toggling the little blue switch next to
Watch Party.
</p>
</div>
</div>
</div>
<div class="info">
<div class="info-text">
<h4 class="sub-title" data-font="sans-bold">
HOW CAN I HELP KEEP WATCH PARTY ALIVE
</h4>
<div>
<p data-font="sans" class="body">
Watch Party is built to be completely free, all the costs are paid
by the developer alone. While no payment is needed, any small
donation helps make sure I can keep the servers up and running.
You can request more details by reaching out to
admin@chromewatchparty.com.
</p>
<a
data-font="sans"
href="mailto:admin@chromewatchparty.com?subject=FAQ Contact"
class="underlink"
>CONTACT</a
>
</div>
</div>
</div>
<div class="info">
<div class="info-text">
<h4 class="sub-title" data-font="sans-bold">
CAN I USE WATCH PARTY IN FULLSCREEN
</h4>
<p data-font="sans" class="body">
To have access to Watch Party in fullscreen use the fullscreen
button in the bottom left corner of the sidebar.
</p>
</div>
</div>
<div class="info">
<div class="info-text">
<h4 class="sub-title" data-font="sans-bold">
CAN I USE THE SAME PARTY, ON A DIFFERENT SITE
</h4>
<p data-font="sans" class="body">
If you started the party, you can simply join the party from a
different place to change the party location.
</p>
</div>
</div>
<div class="info">
<div class="info-text">
<h4 class="sub-title" data-font="sans-bold">
CHAT NOTIFICATIONS ARE ANNOYING
</h4>
<p data-font="sans" class="body">
You can turn off the chat notifications from the title card in the
sidebar. Click on the title card to see the setting.
</p>
</div>
</div>
<div class="info">
<div class="info-text">
<h4 class="sub-title" data-font="sans-bold">
HOW DO I SEARCH FOR GIFs
</h4>
<p data-font="sans" class="body">
Click on the GIF button next to the message input box, start
searching! Scroll to the right to load more results.
</p>
</div>
</div>
<div class="info">
<div class="info-text">
<h4 class="sub-title" data-font="sans-bold">
CAN I DELETE PARTY DATA MANUALLY
</h4>
<p data-font="sans" class="body">
Click on the title card in the sidebar, and click on the End Party
button. Ending a party immediately deletes all data.
</p>
</div>
</div>
<div class="info">
<div class="info-text">
<h4 class="sub-title" data-font="sans-bold">
HOW MANY USERS CAN USE WATCH PARTY AT A TIME
</h4>
<p data-font="sans" class="body">
There’s no limit on how many people can join a party at once,
however, I would recommend using the “Admin Only” mode for larger
groups (around 10 or more), this prevents laggy pause & play that
can occur from trying to sync across a large number of people.
</p>
</div>
</div>
<div class="info">
<div class="info-text">
<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>
<footer>
<div class="link-section">
<div class="link-list">
<h6 class="link-list-title" data-font="sans-bold">FOR USERS</h6>
<a class="underlink" href="/welcome#tips" data-font="sans">FAQ</a>
<a class="underlink" href="/changes" data-font="sans">Changelog</a>
<a
class="underlink"
target="_blank"
href="mailto:admin@chromewatchparty.com?subject=User Feedback"
data-font="sans"
>
Give Feedback
</a>
<a class="underlink" href="/welcome" data-font="sans"
>Getting Started</a
>
<a class="underlink" href="/donate" data-font="sans">
Support Watch Party
</a>
<a
class="underlink"
target="_blank"
href="https://get.firefoxwatchparty.com"
data-font="sans"
>
Get Firefox Add-On
</a>
<a
class="underlink"
target="_blank"
href="https://get.edgewatchparty.com"
data-font="sans"
>
Get Edge Add-On
</a>
<a
class="underlink"
target="_blank"
href="https://get.chromewatchparty.com"
data-font="sans"
>
Get Chrome Extension
</a>
</div>
<div class="link-list">
<h6 class="link-list-title" data-font="sans-bold">FOR DEVELOPERS</h6>
<a
class="underlink"
target="_blank"
href="https://firebase.google.com"
data-font="sans"
>Firebase</a
>
<a
class="underlink"
target="_blank"
href="https://material-ui.com"
data-font="sans"
>Material UI</a
>
<a
class="underlink"
target="_blank"
href="https://dolby.io"
data-font="sans"
>Dolby Voxeet</a
>
<a
class="underlink"
target="_blank"
href="https://reactjs.org"
data-font="sans"
>React JS</a
>
<a
class="underlink"
target="_blank"
href="https://nodejs.org"
data-font="sans"
>Node JS</a
>
<a
class="underlink"
target="_blank"
href="http://developers.giphy.com"
data-font="sans"
>Giphy</a
>
</div>
<div class="link-list">
<h6 class="link-list-title" data-font="sans-bold">LEGAL & OTHER</h6>
<a class="underlink" data-font="sans">© 2020 - 2021, Ayushya Amitabh</a>
<a class="underlink" href="/copyright" data-font="sans">Copyright</a>
<a class="underlink" href="/privacy" data-font="sans"
>Privacy Policy</a
>
<a
class="underlink"
target="_blank"
href="https://linkedin.com/in/ayushyamitabh"
data-font="sans"
>About Creator</a
>
</div>
</div>
<div class="end-line">
<a class="underlink" data-font="sans">
Built with ♥ for Google Chrome, Microsoft Edge & Mozilla Firefox by
Ayushya Amitabh
</a>
<a
class="underlink"
target="_blank"
href="https://instagram.com/chromewatchparty"
>
<svg
height="4rem"
viewBox="0 0 511 511.9"
width="4rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"
/>
<path
d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"
/>
<path
d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"
/>
</svg>
</a>
<a
class="underlink"
target="_blank"
href="https://www.reddit.com/r/ChromeWatchParty/"
>
<svg
id="Bold"
enable-background="new 0 0 24 24"
height="4rem"
viewBox="0 0 24 24"
width="4rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m21.325 9.308c-.758 0-1.425.319-1.916.816-1.805-1.268-4.239-2.084-6.936-2.171l1.401-6.406 4.461 1.016c0 1.108.89 2.013 1.982 2.013 1.113 0 2.008-.929 2.008-2.038s-.889-2.038-2.007-2.038c-.779 0-1.451.477-1.786 1.129l-4.927-1.108c-.248-.067-.491.113-.557.365l-1.538 7.062c-2.676.113-5.084.928-6.895 2.197-.491-.518-1.184-.837-1.942-.837-2.812 0-3.733 3.829-1.158 5.138-.091.405-.132.837-.132 1.268 0 4.301 4.775 7.786 10.638 7.786 5.888 0 10.663-3.485 10.663-7.786 0-.431-.045-.883-.156-1.289 2.523-1.314 1.594-5.115-1.203-5.117zm-15.724 5.41c0-1.129.89-2.038 2.008-2.038 1.092 0 1.983.903 1.983 2.038 0 1.109-.89 2.013-1.983 2.013-1.113.005-2.008-.904-2.008-2.013zm10.839 4.798c-1.841 1.868-7.036 1.868-8.878 0-.203-.18-.203-.498 0-.703.177-.18.491-.18.668 0 1.406 1.463 6.07 1.488 7.537 0 .177-.18.491-.18.668 0 .207.206.207.524.005.703zm-.041-2.781c-1.092 0-1.982-.903-1.982-2.011 0-1.129.89-2.038 1.982-2.038 1.113 0 2.008.903 2.008 2.038-.005 1.103-.895 2.011-2.008 2.011z"
/>
</svg>
</a>
<a
class="underlink"
target="_blank"
href="mailto:admin@chromewatchparty.com"
>
<svg
version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="4rem"
height="4rem"
viewBox="0 0 512 512"
style="enable-background: new 0 0 512 512"
xml:space="preserve"
>
<g>
<g>
<path
d="M467,61H45C20.218,61,0,81.196,0,106v300c0,24.72,20.128,45,45,45h422c24.72,0,45-20.128,45-45V106
C512,81.28,491.872,61,467,61z M460.786,91L256.954,294.833L51.359,91H460.786z M30,399.788V112.069l144.479,143.24L30,399.788z
M51.213,421l144.57-144.57l50.657,50.222c5.864,5.814,15.327,5.795,21.167-0.046L317,277.213L460.787,421H51.213z M482,399.787
L338.213,256L482,112.212V399.787z"
/>
</g>
</g>
</svg>
</a>
</div>
</footer>
</body>
</html>