Files
watchparty/website/index.html
T
2020-08-28 16:03:40 -04:00

310 lines
13 KiB
HTML

<!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
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 INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
------------------------------------------------------------------------->
<html>
<head>
<link rel="apple-touch-icon" sizes="57x57" href="./icons/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="./icons/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="./icons/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="./icons/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="./icons/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="./icons/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="./icons/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="./icons/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="./icons/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="./icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png" />
<link rel="icon" href="./icons/favicon.ico" />
<link rel="manifest" href="./manifest.json" />
<meta name="msapplication-TileImage" content="./icons/ms-icon-144x144.png" />
<link rel="stylesheet" type="text/css" href="./font.css" />
<link rel="stylesheet" type="text/css" href="./styles/index.css" />
<script src="./scripts/Stickied.js"></script>
<title>Watch Party</title>
</head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-87498806-2');
</script>
<body class="home">
<div class="landing">
<div class="logo-circle"></div>
<div class="logo-circle"></div>
<div class="logo-circle"></div>
<h1 data-font="serif" class="logo duplicate">WATCH PARTY</h1>
<h1 data-font="serif" class="logo">WATCH PARTY</h1>
<h5 data-font="sans" class="logo-tag">
WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
</h5>
<p data-font="sans-bold" class="title subtitle">FREE. NO SIGNUP. NO BS.<br />WORKS WITH</p>
<div class="supported">
<div data-full-support class="supported-logo" id="netflix"></div>
<div data-full-support class="supported-logo" id="hulu"></div>
<div data-full-support class="supported-logo" id="disney"></div>
<div data-full-support class="supported-logo" id="prime"></div>
<div data-full-support class="supported-logo" id="youtube"></div>
<div data-full-support class="supported-logo" id="hbonow"></div>
<div data-full-support class="supported-logo" id="hbomax"></div>
<div data-full-support class="supported-logo" id="peacock"></div>
<div data-full-support class="supported-logo" id="googleplay"></div>
<div data-full-support class="supported-logo" id="crunchyroll"></div>
<div data-beta-support class="supported-logo" id="appletv"></div>
<div data-beta-support class="supported-logo" id="viki"></div>
<div data-beta-support class="supported-logo" id="funimation"></div>
</div>
<a
data-font="sans-bold"
href="https://request.chromewatchparty.com"
class="link-button duplicate"
>
Get Chrome Extension
</a>
<a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button">
Get Chrome Extension
</a>
</div>
<div class="features">
<p data-font="sans-bold" class="title subtitle">FEATURES</p>
<div class="feature-card">
<div class="feature-icon" id="sync">
<video loop muted autoplay src="./media/features/Sync.mp4"></video>
</div>
<p data-font="sans" class="feature-text">Watch Party syncs play, pause and timestamp.</p>
</div>
<div class="feature-card">
<div class="feature-icon" id="phone">
<video loop muted autoplay src="./media/features/Phone.mp4"></video>
</div>
<p data-font="sans" class="feature-text">
Free group voice calls - for when text and GIFs just won't do.
</p>
</div>
<div class="feature-card">
<div class="feature-icon" id="chat">
<video loop muted autoplay src="./media/features/Chat.mp4"></video>
</div>
<p data-font="sans" class="feature-text">Unlimited gifs from Giphy in chat.</p>
</div>
<div class="feature-card">
<div class="feature-icon" id="delete">
<video loop muted autoplay src="./media/features/Delete.mp4"></video>
</div>
<p data-font="sans" class="feature-text">
What happens in Watch Party, stays in Watch Party - for 24 hours, then it's all gone.
</p>
</div>
<div class="feature-card">
<div class="feature-icon" id="hideable">
<video loop muted autoplay src="./media/features/Hideable.mp4"></video>
</div>
<p data-font="sans" class="feature-text">
There when you need it, hideable when you want to focus on the show.
</p>
</div>
<div class="feature-card">
<div class="feature-icon" id="custom">
<video loop muted autoplay src="./media/features/Custom.mp4"></video>
</div>
<p data-font="sans" class="feature-text">
No party crashers. Custom party names secured with custom pins.
</p>
</div>
<div class="feature-card">
<div class="feature-icon" id="signup">
<video loop muted autoplay src="./media/features/Signup.mp4"></video>
</div>
<p data-font="sans" class="feature-text">No sign up, no login, no data taken from you.</p>
</div>
</div>
<div id="getting-started" class="pop-features">
<p data-font="sans-bold" class="title subtitle">GETTING STARTED</p>
<div class="pop-feature">
<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. The sidebar is now resizeable, and now supports having access to Watch Party in
fullscreen. (Use the fullscreen button in the sidebar)
</p>
</div>
</div>
</div>
<div class="pop-feature alternate">
<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">
<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 alternate">
<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>
<footer data-font="sans">
<p class="title built-with">
<a href="./copyright/">COPYRIGHT</a> &copy; 2020 AYUSHYA AMITABH. ALL RIGHTS RESERVED.
</p>
<p class="title built-with">
BUILT WITH &#x1F49A; FOR
<a href="https://www.google.com/chrome/">GOOGLE CHROME</a> USING
<a href="https://firebase.google.com/">FIREBASE</a>,
<a href="https://material-ui.com/">MATERIAL-UI</a>,
<a href="https://reactjs.org/">REACT JS</a>, <a href="https://nodejs.org/en/">NODE JS</a>,
<a href="https://giphy.com/">GIPHY</a>, & <a href="https://dolby.io/">DOLBY VOXEET</a>.
</p>
<a data-font="sans-bold" href="https://paypal.me/Ayushya" class="link-button">
Support Watch Party
</a>
<a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button"
>Get Chrome Extension</a
>
<a
data-font="sans-bold"
href="mailto:admin@chromewatchparty.com?subject=User Feedback"
class="link-button"
>
Give Feedback
</a>
<a data-font="sans-bold" href="./welcome/" class="link-button"> Getting Started </a>
<a data-font="sans-bold" href="./changes/" class="link-button"> Changelog </a>
</footer>
</body>
</html>