v1.6.0/website update for release

This commit is contained in:
2020-08-08 15:28:46 -04:00
parent 187fb6c324
commit f375d33311
9 changed files with 724 additions and 234 deletions
+106 -28
View File
@@ -12,44 +12,111 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
-------------------------------------------------------------------------> ------------------------------------------------------------------------->
<html> <html>
<head> <head>
<link rel="apple-touch-icon" sizes="57x57" href="../icons/apple-icon-57x57.png" /> <link
<link rel="apple-touch-icon" sizes="60x60" href="../icons/apple-icon-60x60.png" /> rel="apple-touch-icon"
<link rel="apple-touch-icon" sizes="72x72" href="../icons/apple-icon-72x72.png" /> sizes="57x57"
<link rel="apple-touch-icon" sizes="76x76" href="../icons/apple-icon-76x76.png" /> href="../icons/apple-icon-57x57.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
<link rel="apple-touch-icon" sizes="144x144" href="../icons/apple-icon-144x144.png" /> rel="apple-touch-icon"
<link rel="apple-touch-icon" sizes="152x152" href="../icons/apple-icon-152x152.png" /> sizes="60x60"
<link rel="apple-touch-icon" sizes="180x180" href="../icons/apple-icon-180x180.png" /> href="../icons/apple-icon-60x60.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
<link rel="icon" type="image/png" sizes="96x96" href="../icons/favicon-96x96.png" /> rel="apple-touch-icon"
<link rel="icon" type="image/png" sizes="16x16" href="../icons/favicon-16x16.png" /> 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="icon" href="../icons/favicon.ico" />
<link rel="manifest" href="../manifest.json" /> <link rel="manifest" href="../manifest.json" />
<meta name="msapplication-TileImage" content="../icons/ms-icon-144x144.png" /> <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="../font.css" />
<link rel="stylesheet" type="text/css" href="../styles/index.css" /> <link rel="stylesheet" type="text/css" href="../styles/index.css" />
<script src="../scripts/Stickied.js"></script> <script src="../scripts/Stickied.js"></script>
<title>Watch Party | Changelog</title> <title>Watch Party | Changelog</title>
</head> </head>
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2"> <script
</script> async
src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2"
></script>
<script> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);} function gtag() {
gtag('js', new Date()); dataLayer.push(arguments);
}
gtag("js", new Date());
gtag('config', 'UA-87498806-2'); gtag("config", "UA-87498806-2");
</script> </script>
<body class="copyright"> <body class="copyright">
<div class="landing"> <div class="landing">
<div class="logo-circle"></div> <div class="logo-circle"></div>
<div class="logo-circle"></div> <div class="logo-circle"></div>
<div class="logo-circle"></div> <div class="logo-circle"></div>
<h1 data-font="serif" class="logo duplicate"><a href="../">WATCH PARTY</a> | CHANGELOG</h1> <h1 data-font="serif" class="logo duplicate">
<h1 data-font="serif" class="logo"><a href="../">WATCH PARTY</a> | CHANGELOG</h1> <a href="../">WATCH PARTY</a> | CHANGELOG
</h1>
<h1 data-font="serif" class="logo">
<a href="../">WATCH PARTY</a> | CHANGELOG
</h1>
<h5 data-font="sans" class="logo-tag"> <h5 data-font="sans" class="logo-tag">
WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
</h5> </h5>
@@ -65,26 +132,37 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<div <div
class="supported-logo" class="supported-logo"
style="background-image: url(../media/versions/160.png);" style="background-image: url(../media/versions/160.png);"
data-upcoming-support="Work In Progress" data-upcoming-support="See Changes"
></div> ></div>
</a> </a>
</div> </div>
</div> </div>
<footer data-font="sans"> <footer data-font="sans">
<p class="title built-with"> <p class="title built-with">
<a href="../copyright/">COPYRIGHT</a> &copy; 2020 AYUSHYA AMITABH. ALL RIGHTS RESERVED. <a href="../copyright/">COPYRIGHT</a> &copy; 2020 AYUSHYA AMITABH. ALL
RIGHTS RESERVED.
</p> </p>
<p class="title built-with"> <p class="title built-with">
BUILT WITH &#x1F49A; FOR <a href="https://www.google.com/chrome/">GOOGLE CHROME</a> USING 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://firebase.google.com/">FIREBASE</a>,
<a href="https://material-ui.com/">MATERIAL-UI</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://reactjs.org/">REACT JS</a>,
<a href="https://giphy.com/">GIPHY</a>, & <a href="https://dolby.io/">DOLBY VOXEET</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> </p>
<a data-font="sans-bold" href="https://paypal.me/Ayushya" class="link-button"> <a
data-font="sans-bold"
href="https://paypal.me/Ayushya"
class="link-button"
>
Support Watch Party Support Watch Party
</a> </a>
<a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button" <a
data-font="sans-bold"
href="https://request.chromewatchparty.com"
class="link-button"
>Get Chrome Extension</a >Get Chrome Extension</a
> >
<a <a
+156 -39
View File
@@ -12,77 +12,182 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
-------------------------------------------------------------------------> ------------------------------------------------------------------------->
<html> <html>
<head> <head>
<link rel="apple-touch-icon" sizes="57x57" href="../../icons/apple-icon-57x57.png" /> <link
<link rel="apple-touch-icon" sizes="60x60" href="../../icons/apple-icon-60x60.png" /> rel="apple-touch-icon"
<link rel="apple-touch-icon" sizes="72x72" href="../../icons/apple-icon-72x72.png" /> sizes="57x57"
<link rel="apple-touch-icon" sizes="76x76" href="../../icons/apple-icon-76x76.png" /> href="../../icons/apple-icon-57x57.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
<link rel="apple-touch-icon" sizes="144x144" href="../../icons/apple-icon-144x144.png" /> rel="apple-touch-icon"
<link rel="apple-touch-icon" sizes="152x152" href="../../icons/apple-icon-152x152.png" /> sizes="60x60"
<link rel="apple-touch-icon" sizes="180x180" href="../../icons/apple-icon-180x180.png" /> href="../../icons/apple-icon-60x60.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
<link rel="icon" type="image/png" sizes="96x96" href="../../icons/favicon-96x96.png" /> rel="apple-touch-icon"
<link rel="icon" type="image/png" sizes="16x16" href="../../icons/favicon-16x16.png" /> 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="icon" href="../../icons/favicon.ico" />
<link rel="manifest" href="../../manifest.json" /> <link rel="manifest" href="../../manifest.json" />
<meta name="msapplication-TileImage" content="../../icons/ms-icon-144x144.png" /> <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="../../font.css" />
<link rel="stylesheet" type="text/css" href="../../styles/index.css" /> <link rel="stylesheet" type="text/css" href="../../styles/index.css" />
<script src="../../scripts/Stickied.js"></script> <script src="../../scripts/Stickied.js"></script>
<title>Watch Party | V1.5.2</title> <title>Watch Party | V1.5.2</title>
</head> </head>
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2"> <script
</script> async
src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2"
></script>
<script> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);} function gtag() {
gtag('js', new Date()); dataLayer.push(arguments);
}
gtag("js", new Date());
gtag('config', 'UA-87498806-2'); gtag("config", "UA-87498806-2");
</script> </script>
<body class="copyright welcome"> <body class="copyright welcome">
<div class="landing"> <div class="landing">
<div class="logo-circle"></div> <div class="logo-circle"></div>
<div class="logo-circle"></div> <div class="logo-circle"></div>
<div class="logo-circle"></div> <div class="logo-circle"></div>
<h1 data-font="serif" class="logo duplicate"><a href="../../">WATCH PARTY</a> | V1.5.2</h1> <h1 data-font="serif" class="logo duplicate">
<h1 data-font="serif" class="logo"><a href="../../">WATCH PARTY</a> | V1.5.2</h1> <a href="../../">WATCH PARTY</a> | V1.5.2
</h1>
<h1 data-font="serif" class="logo">
<a href="../../">WATCH PARTY</a> | V1.5.2
</h1>
<h5 data-font="sans" class="logo-tag"> <h5 data-font="sans" class="logo-tag">
WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
</h5> </h5>
</div> </div>
<div class="features"> <div class="features">
<p data-font="sans-bold" class="title subtitle">CHANGES MADE IN FEATURES</p> <p data-font="sans-bold" class="title subtitle">
CHANGES MADE IN FEATURES
</p>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon" id="sync"></div> <div class="feature-icon" id="sync">
<video
loop
muted
autoplay
src="../../media/features/Sync.mp4"
></video>
</div>
<p data-font="sans" class="feature-text"> <p data-font="sans" class="feature-text">
Fixed Netflix bug to autodetect player. Fixed Netflix bug to autodetect player.
</p> </p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon" id="phone"></div> <div class="feature-icon" id="phone">
<video
loop
muted
autoplay
src="../../media/features/Phone.mp4"
></video>
</div>
<p data-font="sans" class="feature-text"> <p data-font="sans" class="feature-text">
Added mic permission overlay, and add proper loading icon to show a connecting call. Added mic permission overlay, and add proper loading icon to show a
connecting call.
</p> </p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon" id="chat"></div> <div class="feature-icon" id="chat">
<video
loop
muted
autoplay
src="../../media/features/Chat.mp4"
></video>
</div>
<p data-font="sans" class="feature-text"> <p data-font="sans" class="feature-text">
Gif scrollbar is now easier to grab and scroll. Gif scrollbar is now easier to grab and scroll.
</p> </p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon" id="hideable"></div> <div class="feature-icon" id="hideable">
<video
loop
muted
autoplay
src="../../media/features/Hideable.mp4"
></video>
</div>
<p data-font="sans" class="feature-text"> <p data-font="sans" class="feature-text">
Fullscreen support, use the button in the sidebar to have access to Watch Party in Fullscreen support, use the button in the sidebar to have access to
fullscreen Watch Party in fullscreen
</p> </p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon" id="custom"></div> <div class="feature-icon" id="custom">
<video
loop
muted
autoplay
src="../../media/features/Custom.mp4"
></video>
</div>
<p data-font="sans" class="feature-text"> <p data-font="sans" class="feature-text">
Added auto rejoin (as long you return within 1 minute) Added auto rejoin (as long you return within 1 minute)
</p> </p>
@@ -124,13 +229,14 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
</div> </div>
<div class="tip"> <div class="tip">
<p data-font="sans-bold"> <p data-font="sans-bold">
> Netflix player update (fixes issue when player was not detected if video started before > Netflix player update (fixes issue when player was not detected if
party) video started before party)
</p> </p>
</div> </div>
<div class="tip"> <div class="tip">
<p data-font="sans-bold"> <p data-font="sans-bold">
> Room migrate fix (allows party creators to move their parties to new sites) > Room migrate fix (allows party creators to move their parties to new
sites)
</p> </p>
</div> </div>
<div class="tip"> <div class="tip">
@@ -153,19 +259,30 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
</div> </div>
<footer data-font="sans"> <footer data-font="sans">
<p class="title built-with"> <p class="title built-with">
<a href="../../copyright/">COPYRIGHT</a> &copy; 2020 AYUSHYA AMITABH. ALL RIGHTS RESERVED. <a href="../../copyright/">COPYRIGHT</a> &copy; 2020 AYUSHYA AMITABH.
ALL RIGHTS RESERVED.
</p> </p>
<p class="title built-with"> <p class="title built-with">
BUILT WITH &#x1F49A; FOR <a href="https://www.google.com/chrome/">GOOGLE CHROME</a> USING 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://firebase.google.com/">FIREBASE</a>,
<a href="https://material-ui.com/">MATERIAL-UI</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://reactjs.org/">REACT JS</a>,
<a href="https://giphy.com/">GIPHY</a>, & <a href="https://dolby.io/">DOLBY VOXEET</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> </p>
<a data-font="sans-bold" href="https://paypal.me/Ayushya" class="link-button"> <a
data-font="sans-bold"
href="https://paypal.me/Ayushya"
class="link-button"
>
Support Watch Party Support Watch Party
</a> </a>
<a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button" <a
data-font="sans-bold"
href="https://request.chromewatchparty.com"
class="link-button"
>Get Chrome Extension</a >Get Chrome Extension</a
> >
<a <a
+239 -35
View File
@@ -12,84 +12,277 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
-------------------------------------------------------------------------> ------------------------------------------------------------------------->
<html> <html>
<head> <head>
<link rel="apple-touch-icon" sizes="57x57" href="../../icons/apple-icon-57x57.png" /> <link
<link rel="apple-touch-icon" sizes="60x60" href="../../icons/apple-icon-60x60.png" /> rel="apple-touch-icon"
<link rel="apple-touch-icon" sizes="72x72" href="../../icons/apple-icon-72x72.png" /> sizes="57x57"
<link rel="apple-touch-icon" sizes="76x76" href="../../icons/apple-icon-76x76.png" /> href="../../icons/apple-icon-57x57.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
<link rel="apple-touch-icon" sizes="144x144" href="../../icons/apple-icon-144x144.png" /> rel="apple-touch-icon"
<link rel="apple-touch-icon" sizes="152x152" href="../../icons/apple-icon-152x152.png" /> sizes="60x60"
<link rel="apple-touch-icon" sizes="180x180" href="../../icons/apple-icon-180x180.png" /> href="../../icons/apple-icon-60x60.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
<link rel="icon" type="image/png" sizes="96x96" href="../../icons/favicon-96x96.png" /> rel="apple-touch-icon"
<link rel="icon" type="image/png" sizes="16x16" href="../../icons/favicon-16x16.png" /> 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="icon" href="../../icons/favicon.ico" />
<link rel="manifest" href="../../manifest.json" /> <link rel="manifest" href="../../manifest.json" />
<meta name="msapplication-TileImage" content="../../icons/ms-icon-144x144.png" /> <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="../../font.css" />
<link rel="stylesheet" type="text/css" href="../../styles/index.css" /> <link rel="stylesheet" type="text/css" href="../../styles/index.css" />
<script src="../../scripts/Stickied.js"></script> <script src="../../scripts/Stickied.js"></script>
<title>Watch Party | V1.6.0</title> <title>Watch Party | V1.6.0</title>
</head> </head>
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2"> <script
</script> async
src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2"
></script>
<script> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);} function gtag() {
gtag('js', new Date()); dataLayer.push(arguments);
}
gtag("js", new Date());
gtag('config', 'UA-87498806-2'); gtag("config", "UA-87498806-2");
</script> </script>
<body class="copyright welcome"> <body class="copyright welcome">
<div class="landing"> <div class="landing">
<div class="logo-circle"></div> <div class="logo-circle"></div>
<div class="logo-circle"></div> <div class="logo-circle"></div>
<div class="logo-circle"></div> <div class="logo-circle"></div>
<h1 data-font="serif" class="logo duplicate"><a href="../../">WATCH PARTY</a> | V1.6.0</h1> <h1 data-font="serif" class="logo duplicate">
<h1 data-font="serif" class="logo"><a href="../../">WATCH PARTY</a> | V1.6.0</h1> <a href="../../">WATCH PARTY</a> | V1.6.0
</h1>
<h1 data-font="serif" class="logo">
<a href="../../">WATCH PARTY</a> | V1.6.0
</h1>
<h5 data-font="sans" class="logo-tag"> <h5 data-font="sans" class="logo-tag">
WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
</h5> </h5>
</div> </div>
<div class="features"> <div class="features">
<p data-font="sans-bold" class="title subtitle">PLANNED CHANGES</p> <p data-font="sans-bold" class="title subtitle">
CHANGES MADE IN FEATURES
</p>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon" id="sync"></div> <div class="feature-icon" id="sync">
<video
loop
muted
autoplay
src="../../media/features/Sync.mp4"
></video>
</div>
<p data-font="sans" class="feature-text"> <p data-font="sans" class="feature-text">
Add support for Crunchyroll & Google Play Movies & TV Add support for Crunchyroll & Google Play Movies & TV
</p> </p>
</div> </div>
<div class="feature-card">
<div class="feature-icon">
<video
loop
muted
autoplay
src="../../media/features/Phone.mp4"
></video>
</div>
<p data-font="sans" class="feature-text">
Anyone can start calls now, and calls are more reliable.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<video
loop
muted
autoplay
src="../../media/features/Chat.mp4"
></video>
</div>
<p data-font="sans" class="feature-text">
Revamped chat and gif UI, now with replies
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<video
loop
muted
autoplay
src="../../media/features/Hideable.mp4"
></video>
</div>
<p data-font="sans" class="feature-text">
Sidebar is now resizable and has better fullscreen support
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<video
loop
muted
autoplay
src="../../media/features/Custom.mp4"
></video>
</div>
<p data-font="sans" class="feature-text">
Autocomplete and cross-site party name and pin history
</p>
</div>
</div> </div>
<div id="tips" class="landing"> <div id="tips" class="landing">
<p data-font="sans-bold" class="title"> <p data-font="sans-bold" class="title">
PLANNED CHANGES' DETAILS LISTED CHANGE DETAILS
</p> </p>
<div class="tip"> <div class="tip">
<p data-font="sans-bold"> <p data-font="sans-bold">
Admin only control mode Add support for Crunchyroll
</p> </p>
</div> </div>
<div class="tip"> <div class="tip">
<p data-font="sans-bold"> <p data-font="sans-bold">
Interactive system messages Add support for Google Play Movies & TV
</p> </p>
</div> </div>
<div class="tip"> <div class="tip">
<p data-font="sans-bold"> <p data-font="sans-bold">
Reply to messages with quoting Completely rebuilt Chat UI
</p> </p>
</div> </div>
<div class="tip"> <div class="tip">
<p data-font="sans-bold"> <p data-font="sans-bold">
Party name & pin history across sites Gif UI revamped
</p> </p>
</div> </div>
<div class="tip"> <div class="tip">
<p data-font="sans-bold"> <p data-font="sans-bold">
Allow anyone to start a call (unless in admin mode) Shows sending messages
</p>
</div>
<div class="tip">
<p data-font="sans-bold">
Resizable sidebar
</p>
</div>
<div class="tip">
<p data-font="sans-bold">
New Welcome experience (chromewatchparty.com/welcome)
</p>
</div>
<div class="tip">
<p data-font="sans-bold">
Clear party and pin history
</p>
</div>
<div class="tip">
<p data-font="sans-bold">
Fix header bug on website
</p>
</div>
<div class="tip">
<p data-font="sans-bold">
Optimize website feature animations
</p>
</div>
<div class="tip">
<p data-font="sans-bold">
Admin only control mode (affects player sync and call)
</p>
</div>
<div class="tip">
<p data-font="sans-bold">
Anyone can start calls when not in admin only mode
</p>
</div>
<div class="tip">
<p data-font="sans-bold">
Cross site party name and pin history
</p>
</div>
<div class="tip">
<p data-font="sans-bold">
Volume control for users on call
</p>
</div>
<div class="tip">
<p data-font="sans-bold">
Interactive system messages in chat
</p>
</div>
<div class="tip">
<p data-font="sans-bold">
Alerts on sidebar create/join screen
</p>
</div>
<div class="tip">
<p data-font="sans-bold">
Autocomplete for party names and pins
</p>
</div>
<div class="tip">
<p data-font="sans-bold">
Proper page opens on update
</p> </p>
</div> </div>
<a <a
@@ -102,19 +295,30 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
</div> </div>
<footer data-font="sans"> <footer data-font="sans">
<p class="title built-with"> <p class="title built-with">
<a href="../copyright/">COPYRIGHT</a> &copy; 2020 AYUSHYA AMITABH. ALL RIGHTS RESERVED. <a href="../../copyright/">COPYRIGHT</a> &copy; 2020 AYUSHYA AMITABH.
ALL RIGHTS RESERVED.
</p> </p>
<p class="title built-with"> <p class="title built-with">
BUILT WITH &#x1F49A; FOR <a href="https://www.google.com/chrome/">GOOGLE CHROME</a> USING 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://firebase.google.com/">FIREBASE</a>,
<a href="https://material-ui.com/">MATERIAL-UI</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://reactjs.org/">REACT JS</a>,
<a href="https://giphy.com/">GIPHY</a>, & <a href="https://dolby.io/">DOLBY VOXEET</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> </p>
<a data-font="sans-bold" href="https://paypal.me/Ayushya" class="link-button"> <a
data-font="sans-bold"
href="https://paypal.me/Ayushya"
class="link-button"
>
Support Watch Party Support Watch Party
</a> </a>
<a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button" <a
data-font="sans-bold"
href="https://request.chromewatchparty.com"
class="link-button"
>Get Chrome Extension</a >Get Chrome Extension</a
> >
<a <a
+162 -52
View File
@@ -12,37 +12,99 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
-------------------------------------------------------------------------> ------------------------------------------------------------------------->
<html> <html>
<head> <head>
<link rel="apple-touch-icon" sizes="57x57" href="./icons/apple-icon-57x57.png" /> <link
<link rel="apple-touch-icon" sizes="60x60" href="./icons/apple-icon-60x60.png" /> rel="apple-touch-icon"
<link rel="apple-touch-icon" sizes="72x72" href="./icons/apple-icon-72x72.png" /> sizes="57x57"
<link rel="apple-touch-icon" sizes="76x76" href="./icons/apple-icon-76x76.png" /> href="./icons/apple-icon-57x57.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
<link rel="apple-touch-icon" sizes="144x144" href="./icons/apple-icon-144x144.png" /> rel="apple-touch-icon"
<link rel="apple-touch-icon" sizes="152x152" href="./icons/apple-icon-152x152.png" /> sizes="60x60"
<link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-icon-180x180.png" /> href="./icons/apple-icon-60x60.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
<link rel="icon" type="image/png" sizes="96x96" href="./icons/favicon-96x96.png" /> rel="apple-touch-icon"
<link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png" /> 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="icon" href="./icons/favicon.ico" />
<link rel="manifest" href="./manifest.json" /> <link rel="manifest" href="./manifest.json" />
<meta name="msapplication-TileImage" content="./icons/ms-icon-144x144.png" /> <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="./font.css" />
<link rel="stylesheet" type="text/css" href="./styles/index.css" /> <link rel="stylesheet" type="text/css" href="./styles/index.css" />
<script src="./scripts/Stickied.js"></script> <script src="./scripts/Stickied.js"></script>
<title>Watch Party</title> <title>Watch Party</title>
</head> </head>
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2"></script> <script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2"
></script>
<script> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag() { function gtag() {
dataLayer.push(arguments); dataLayer.push(arguments);
} }
gtag('js', new Date()); gtag("js", new Date());
gtag('config', 'UA-87498806-2'); gtag("config", "UA-87498806-2");
</script> </script>
<body class="home"> <body class="home">
<div class="landing"> <div class="landing">
@@ -54,7 +116,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<h5 data-font="sans" class="logo-tag"> <h5 data-font="sans" class="logo-tag">
WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
</h5> </h5>
<p data-font="sans-bold" class="title subtitle">FREE. NO SIGNUP. NO BS.<br />WORKS WITH</p> <p data-font="sans-bold" class="title subtitle">
FREE. NO SIGNUP. NO BS.<br />WORKS WITH
</p>
<div class="supported"> <div class="supported">
<div data-full-support class="supported-logo" id="netflix"></div> <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="hulu"></div>
@@ -74,7 +138,11 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
> >
Get Chrome Extension Get Chrome Extension
</a> </a>
<a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button"> <a
data-font="sans-bold"
href="https://request.chromewatchparty.com"
class="link-button"
>
Get Chrome Extension Get Chrome Extension
</a> </a>
</div> </div>
@@ -82,44 +150,62 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<p data-font="sans-bold" class="title subtitle">FEATURES</p> <p data-font="sans-bold" class="title subtitle">FEATURES</p>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon" id="sync"> <div class="feature-icon" id="sync">
<video src="./media/features/Sync.mp4" /> <video loop muted autoplay src="./media/features/Sync.mp4"></video>
</div> </div>
<p data-font="sans" class="feature-text"> <p data-font="sans" class="feature-text">
Watch Party syncs play, pause and timestamp. Watch Party syncs play, pause and timestamp.
</p> </p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon" id="phone"></div> <div class="feature-icon" id="phone">
<video loop muted autoplay src="./media/features/Phone.mp4"></video>
</div>
<p data-font="sans" class="feature-text"> <p data-font="sans" class="feature-text">
Free group voice calls - for when text and GIFs just won't do. Free group voice calls - for when text and GIFs just won't do.
</p> </p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon" id="chat"></div> <div class="feature-icon" id="chat">
<video loop muted autoplay src="./media/features/Chat.mp4"></video>
</div>
<p data-font="sans" class="feature-text"> <p data-font="sans" class="feature-text">
Unlimited gifs from Giphy in chat. Unlimited gifs from Giphy in chat.
</p> </p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon" id="delete"></div> <div class="feature-icon" id="delete">
<video loop muted autoplay src="./media/features/Delete.mp4"></video>
</div>
<p data-font="sans" class="feature-text"> <p data-font="sans" class="feature-text">
What happens in Watch Party, stays in Watch Party - for 24 hours, then it's all gone. What happens in Watch Party, stays in Watch Party - for 24 hours, then
it's all gone.
</p> </p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon" id="hideable"></div> <div class="feature-icon" id="hideable">
<video
loop
muted
autoplay
src="./media/features/Hideable.mp4"
></video>
</div>
<p data-font="sans" class="feature-text"> <p data-font="sans" class="feature-text">
There when you need it, hideable when you want to focus on the show. There when you need it, hideable when you want to focus on the show.
</p> </p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon" id="custom"></div> <div class="feature-icon" id="custom">
<video loop muted autoplay src="./media/features/Custom.mp4"></video>
</div>
<p data-font="sans" class="feature-text"> <p data-font="sans" class="feature-text">
No party crashers. Custom party names secured with custom pins. No party crashers. Custom party names secured with custom pins.
</p> </p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon" id="signup"></div> <div class="feature-icon" id="signup">
<video loop muted autoplay src="./media/features/Signup.mp4"></video>
</div>
<p data-font="sans" class="feature-text"> <p data-font="sans" class="feature-text">
No sign up, no login, no data taken from you. No sign up, no login, no data taken from you.
</p> </p>
@@ -129,7 +215,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<p data-font="sans-bold" class="title subtitle"> <p data-font="sans-bold" class="title subtitle">
GETTING STARTED GETTING STARTED
</p> </p>
<div class="pop-feature alternate"> <div class="pop-feature">
<div id="title-card-container"> <div id="title-card-container">
<div id="title-card"> <div id="title-card">
<div data-font="serif" id="fab">WP</div> <div data-font="serif" id="fab">WP</div>
@@ -140,15 +226,16 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<div> <div>
<h4 data-font="sans-bold">TO BE OR NOT TO BE</h4> <h4 data-font="sans-bold">TO BE OR NOT TO BE</h4>
<p data-font="sans"> <p data-font="sans">
Watch Party is built to not be in your way. There when you need it, gone when you Watch Party is built to not be in your way. There when you need
don't. The sidebar is now resizeable, and now supports having access to Watch Party in it, gone when you don't. The sidebar is now resizeable, and now
fullscreen. (Use the fullscreen button in the sidebar) supports having access to Watch Party in fullscreen. (Use the
fullscreen button in the sidebar)
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="pop-feature"> <div class="pop-feature alternate">
<div id="title-card-container"> <div id="title-card-container">
<div id="title-card"> <div id="title-card">
<h5 data-font="sans-bold" id="title-card-title">WATCH PARTY</h5> <h5 data-font="sans-bold" id="title-card-title">WATCH PARTY</h5>
@@ -159,7 +246,10 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
</p> </p>
<p data-font="sans" id="control-autorejoin"> <p data-font="sans" id="control-autorejoin">
Allow Watch Party to auto rejoin Allow Watch Party to auto rejoin
<span>Automatically rejoin party if you return to the page within 1 minute</span> <span
>Automatically rejoin party if you return to the page within 1
minute</span
>
</p> </p>
<p data-font="sans" id="control-admin"> <p data-font="sans" id="control-admin">
Enable admin only mode Enable admin only mode
@@ -171,17 +261,19 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<div> <div>
<h4 data-font="sans-bold">Stay in control</h4> <h4 data-font="sans-bold">Stay in control</h4>
<p data-font="sans"> <p data-font="sans">
Find your settings by clicking on title card (when you're in a party) or in the Find your settings by clicking on title card (when you're in a
settings panel (when you're creating or joining) party) or in the settings panel (when you're creating or joining)
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="pop-feature alternate"> <div class="pop-feature">
<div id="title-card-container"> <div id="title-card-container">
<div id="title-card"> <div id="title-card">
<h5 data-font="sans-bold" id="system-message">Ayushya started the party.</h5> <h5 data-font="sans-bold" id="system-message">
Ayushya started the party.
</h5>
<div id="ti"> <div id="ti">
<div id="tn">SOMEONE</div> <div id="tn">SOMEONE</div>
@@ -211,13 +303,17 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<span>12:00:00 PM</span> <span>12:00:00 PM</span>
<div id="ri"></div> <div id="ri"></div>
</div> </div>
<img src="https://media.giphy.com/media/d10dMmzqCYqQ0/giphy.gif" /> <img
src="https://media.giphy.com/media/d10dMmzqCYqQ0/giphy.gif"
/>
</div> </div>
</div> </div>
<div id="ti" class="mm"> <div id="ti" class="mm">
<div id="tn">SOMEONE</div> <div id="tn">SOMEONE</div>
<div id="tr"> <div id="tr">
<img src="https://media.giphy.com/media/d10dMmzqCYqQ0/giphy.gif" /> <img
src="https://media.giphy.com/media/d10dMmzqCYqQ0/giphy.gif"
/>
</div> </div>
<div id="tm"> <div id="tm">
<div id="tt"> <div id="tt">
@@ -233,14 +329,14 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<div> <div>
<h4 data-font="sans-bold">FULL FEATURED CHAT</h4> <h4 data-font="sans-bold">FULL FEATURED CHAT</h4>
<p data-font="sans"> <p data-font="sans">
A brand new, completely revamped chat user interface, now has replies, shows pending A brand new, completely revamped chat user interface, now has
messages, and improves the Giphy GIF picker replies, shows pending messages, and improves the Giphy GIF picker
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="pop-feature"> <div class="pop-feature alternate">
<div id="title-card-container"> <div id="title-card-container">
<div id="title-card"> <div id="title-card">
<h5 data-font="sans-bold" id="title-card-title">WATCH PARTY</h5> <h5 data-font="sans-bold" id="title-card-title">WATCH PARTY</h5>
@@ -252,9 +348,12 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<p data-font="sans" id="call-user-chip">Won't Stop Talking</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> <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">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"> <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" /> 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> </p>
</div> </div>
</div> </div>
@@ -262,8 +361,8 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<div> <div>
<h4 data-font="sans-bold">MADE FOR YOU & YOUR GANG</h4> <h4 data-font="sans-bold">MADE FOR YOU & YOUR GANG</h4>
<p data-font="sans"> <p data-font="sans">
See who's in your party, get on a call with your party, and volume control for the See who's in your party, get on a call with your party, and volume
person who just won't stop talking. control for the person who just won't stop talking.
</p> </p>
</div> </div>
</div> </div>
@@ -271,19 +370,30 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
</div> </div>
<footer data-font="sans"> <footer data-font="sans">
<p class="title built-with"> <p class="title built-with">
<a href="./copyright/">COPYRIGHT</a> &copy; 2020 AYUSHYA AMITABH. ALL RIGHTS RESERVED. <a href="./copyright/">COPYRIGHT</a> &copy; 2020 AYUSHYA AMITABH. ALL
RIGHTS RESERVED.
</p> </p>
<p class="title built-with"> <p class="title built-with">
BUILT WITH &#x1F49A; FOR <a href="https://www.google.com/chrome/">GOOGLE CHROME</a> USING 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://firebase.google.com/">FIREBASE</a>,
<a href="https://material-ui.com/">MATERIAL-UI</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://reactjs.org/">REACT JS</a>,
<a href="https://giphy.com/">GIPHY</a>, & <a href="https://dolby.io/">DOLBY VOXEET</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> </p>
<a data-font="sans-bold" href="https://paypal.me/Ayushya" class="link-button"> <a
data-font="sans-bold"
href="https://paypal.me/Ayushya"
class="link-button"
>
Support Watch Party Support Watch Party
</a> </a>
<a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button" <a
data-font="sans-bold"
href="https://request.chromewatchparty.com"
class="link-button"
>Get Chrome Extension</a >Get Chrome Extension</a
> >
<a <a
+16 -15
View File
@@ -79,6 +79,7 @@ body {
.logo.duplicate { .logo.duplicate {
margin-bottom: var(--logo-offset); margin-bottom: var(--logo-offset);
opacity: 0; opacity: 0;
height: 0;
} }
.link-button.duplicate { .link-button.duplicate {
@@ -144,17 +145,17 @@ body {
margin: 10rem 0; margin: 10rem 0;
} }
.feature-icon { .feature-icon video {
padding: 5rem;
background-position: left !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-color: black;
margin: 2.5rem 0;
display: table;
width: fit-content;
transform: scale(2.5) translateY(-30%) translateX(1rem);
border-radius: 100%; border-radius: 100%;
width: 10rem;
height: auto;
margin: 0 auto;
margin-top: 9rem;
transition: all ease-in-out 0.3s;
}
.feature-card .feature-icon video {
transform: scale(2.5) translateY(-50%) translateX(1.5rem);
} }
.feature-text { .feature-text {
@@ -255,7 +256,7 @@ footer .link-button {
.landing .supported .supported-logo[data-full-support]::before, .landing .supported .supported-logo[data-full-support]::before,
.landing .supported .supported-logo[data-beta-support]::before, .landing .supported .supported-logo[data-beta-support]::before,
.landing .supported .supported-logo[data-upcoming-support]::before { .landing .supported .supported-logo[data-upcoming-support]::before {
content: 'FULLY SUPPORTED'; content: "FULLY SUPPORTED";
position: absolute; position: absolute;
width: 100%; width: 100%;
bottom: 0; bottom: 0;
@@ -266,13 +267,13 @@ footer .link-button {
font-size: 0.8rem; font-size: 0.8rem;
text-align: center; text-align: center;
color: var(--primary); color: var(--primary);
font-family: 'GlacialBold'; font-family: "GlacialBold";
background-color: var(--cta); background-color: var(--cta);
padding: 1rem 0; padding: 1rem 0;
} }
.landing .supported .supported-logo[data-beta-support]::before { .landing .supported .supported-logo[data-beta-support]::before {
content: 'BETA SUPPORT'; content: "BETA SUPPORT";
} }
.landing .supported .supported-logo[data-upcoming-support]::before { .landing .supported .supported-logo[data-upcoming-support]::before {
@@ -521,7 +522,7 @@ div#sidebar {
#ti * { #ti * {
font-size: 14px !important; font-size: 14px !important;
font-family: 'Glacial'; font-family: "Glacial";
letter-spacing: 1.1px; letter-spacing: 1.1px;
} }
@@ -569,7 +570,7 @@ div#sidebar {
left: 0; left: 0;
cursor: pointer; cursor: pointer;
background-color: white; background-color: white;
background-image: url('https://www.materialui.co/materialIcons/content/reply_grey_192x192.png'); background-image: url("https://www.materialui.co/materialIcons/content/reply_grey_192x192.png");
background-size: 75%; background-size: 75%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
+12 -2
View File
@@ -27,8 +27,8 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
flex-direction: row; flex-direction: row;
} }
.pop-feature:not(:first-of-type) { .pop-feature {
margin: -10px 0; margin: 100px 0;
} }
.pop-feature > * { .pop-feature > * {
@@ -39,6 +39,11 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
text-align: left; text-align: left;
} }
.pop-feature .explanation div {
margin-left: 0;
padding: 50px;
}
.pop-feature.alternate { .pop-feature.alternate {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
@@ -46,3 +51,8 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
.pop-feature.alternate .explanation { .pop-feature.alternate .explanation {
text-align: right; text-align: right;
} }
.pop-feature.pop-feature.alternate .explanation div {
margin-left: auto;
margin-right: 0;
}
+18 -26
View File
@@ -36,7 +36,7 @@ body {
position: relative; position: relative;
} }
.link-button::before { .link-button::before {
content: ''; content: "";
height: 100%; height: 100%;
top: 0; top: 0;
width: 0; width: 0;
@@ -68,6 +68,7 @@ body {
top: 0; top: 0;
opacity: 1; opacity: 1;
padding: 3rem 10rem; padding: 3rem 10rem;
height: auto;
z-index: 999 !important; z-index: 999 !important;
} }
.landing .link-button.stickied { .landing .link-button.stickied {
@@ -118,22 +119,7 @@ body {
transition: all 0.3s ease-in; transition: all 0.3s ease-in;
position: relative; position: relative;
} }
.feature-icon {
z-index: 1;
background-position: center !important;
transition: all ease-out 0.3s;
border-radius: 100%;
width: 0;
margin: 0 auto;
height: 0;
background-size: cover !important;
padding: 5rem;
background-color: black;
position: absolute;
top: 13rem;
transform: none;
left: 13rem;
}
.feature-card .feature-text { .feature-card .feature-text {
z-index: 1; z-index: 1;
display: table; display: table;
@@ -153,13 +139,19 @@ body {
color: var(--primary-light); color: var(--primary-light);
line-height: initial; line-height: initial;
opacity: 1; opacity: 1;
margin-top: -1.75rem;
} }
.feature-card:hover .feature-icon {
position: relative; .feature-icon {
top: -35%; display: flex;
left: unset; }
transform: scale(3);
margin-bottom: 3rem; .feature-card .feature-icon video {
transform: none;
}
.feature-card:hover .feature-icon video {
transform: scale(3) translateY(-50%);
} }
footer { footer {
@@ -195,7 +187,7 @@ footer .link-button {
.welcome .logo a::before, .welcome .logo a::before,
.copyright .logo a::before { .copyright .logo a::before {
content: ''; content: "";
height: 100%; height: 100%;
top: -3px; top: -3px;
padding-top: 2px; padding-top: 2px;
@@ -240,7 +232,7 @@ footer .link-button {
} }
.welcome .landing .supported-logo::before { .welcome .landing .supported-logo::before {
content: 'START WATCHING'; content: "START WATCHING";
position: absolute; position: absolute;
width: 100%; width: 100%;
bottom: 0; bottom: 0;
@@ -251,7 +243,7 @@ footer .link-button {
font-size: 1.5rem; font-size: 1.5rem;
text-align: center; text-align: center;
color: var(--primary); color: var(--primary);
font-family: 'GlacialBold'; font-family: "GlacialBold";
background-color: var(--cta); background-color: var(--cta);
padding: 1rem 0; padding: 1rem 0;
} }
+10 -32
View File
@@ -19,54 +19,32 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
font-size: 10px; font-size: 10px;
} }
.supported-logo#netflix { .supported-logo#netflix {
background-image: url('../media/logos/Netflix.png'); background-image: url("../media/logos/Netflix.png");
} }
.supported-logo#hulu { .supported-logo#hulu {
background-image: url('../media/logos/Hulu.png'); background-image: url("../media/logos/Hulu.png");
} }
.supported-logo#disney { .supported-logo#disney {
background-image: url('../media/logos/DisneyColor.png'); background-image: url("../media/logos/DisneyColor.png");
} }
.supported-logo#prime { .supported-logo#prime {
background-image: url('../media/logos/PrimeColor.png'); background-image: url("../media/logos/PrimeColor.png");
} }
.supported-logo#youtube { .supported-logo#youtube {
background-image: url('../media/logos/YoutubeColor.png'); background-image: url("../media/logos/YoutubeColor.png");
} }
.supported-logo#hbonow { .supported-logo#hbonow {
background-image: url('../media/logos/HBONowBlack.png'); background-image: url("../media/logos/HBONowBlack.png");
} }
.supported-logo#hbomax { .supported-logo#hbomax {
background-image: url('../media/logos/HBOMax.png'); background-image: url("../media/logos/HBOMax.png");
} }
.supported-logo#peacock { .supported-logo#peacock {
background-image: url('../media/logos/PeacockColor.png'); background-image: url("../media/logos/PeacockColor.png");
} }
.supported-logo#googleplay { .supported-logo#googleplay {
background-image: url('../media/logos/GooglePlay.png'); background-image: url("../media/logos/GooglePlay.png");
} }
.supported-logo#crunchyroll { .supported-logo#crunchyroll {
background-image: url('../media/logos/Crunchyroll.png'); background-image: url("../media/logos/Crunchyroll.png");
}
.feature-icon#phone {
background-image: url('../media/features/Phone.gif');
}
.feature-icon#delete {
background-image: url('../media/features/Delete.gif');
}
.feature-icon#signup {
background-image: url('../media/features/Signup.gif');
}
.feature-icon#sync {
background-image: url('../media/features/Sync.gif');
}
.feature-icon#custom {
background-image: url('../media/features/Custom.gif');
}
.feature-icon#chat {
background-image: url('../media/features/Chat.gif');
}
.feature-icon#hideable {
background-image: url('../media/features/Hideable.gif');
} }
+4 -4
View File
@@ -74,7 +74,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<p data-font="sans-bold" class="title"> <p data-font="sans-bold" class="title">
GETTING STARTED GETTING STARTED
</p> </p>
<div class="pop-feature alternate"> <div class="pop-feature">
<div id="title-card-container"> <div id="title-card-container">
<div id="title-card"> <div id="title-card">
<div data-font="serif" id="fab">WP</div> <div data-font="serif" id="fab">WP</div>
@@ -89,7 +89,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
</div> </div>
</div> </div>
<div class="pop-feature"> <div class="pop-feature alternate">
<div id="title-card-container"> <div id="title-card-container">
<div id="title-card"> <div id="title-card">
<h5 data-font="sans-bold" id="title-card-title">WATCH PARTY</h5> <h5 data-font="sans-bold" id="title-card-title">WATCH PARTY</h5>
@@ -116,7 +116,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
</div> </div>
</div> </div>
<div class="pop-feature alternate"> <div class="pop-feature">
<div id="title-card-container"> <div id="title-card-container">
<div id="title-card"> <div id="title-card">
<h5 data-font="sans-bold" id="system-message">Ayushya started the party.</h5> <h5 data-font="sans-bold" id="system-message">Ayushya started the party.</h5>
@@ -174,7 +174,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
</div> </div>
</div> </div>
<div class="pop-feature"> <div class="pop-feature alternate">
<div id="title-card-container"> <div id="title-card-container">
<div id="title-card"> <div id="title-card">