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

v1.2.0-beta/website 404 and remove old

Browse Source
This commit is contained in:
ayushya
2020-05-22 20:34:43 -04:00
parent 09afedd265
commit 31aff08ce0
3 changed files with 2 additions and 544 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/404.html
+2 -61
View File
@@ -1,69 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
<link rel="manifest" href="manifest.json" />
<meta name="msapplication-TileImage" content="ms-icon-144x144.png" />
<link rel="stylesheet" type="text/css" href="font.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="refresh" content="0; URL='./'" />
<title>Watch Party | 404</title>
</head>
<body>
<section>
<div class="page" style="background-color: rgba(0, 0, 0, 0.7);">
<a class="cta-container" href="https://chrome.google.com/webstore/category/extensions">
<mark class="cta">
That page doesn't exist, but you can still get the Chrome Extension.
</mark>
</a>
<a href="https://chrome.google.com/webstore/category/extensions" class="title">
<span>
WATCH PARTY
</span>
</a>
<a class="cta-container support" href="https://www.chromewatchparty.com" target="_self">
<mark class="cta">
▶ Go To Home ◀
</mark>
</a>
</div>
</section>
<footer>
<div>
<span class="full">© Ayushya Amitabh, 2020</span>
<span
>Built with ❤️ 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>.</span
>
</div>
<div>
<span class="full">
<a>
<mark>Get Chrome Extension</mark>
</a>
</span>
<span>
Help keep Watch Party free -
<a>
<mark>Support Watch Party</mark>
</a>
</span>
</div>
</footer>
Redirecting...
</body>
</html>
website/indexold.html
-158
View File
@@ -1,158 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
<link rel="manifest" href="manifest.json" />
<meta name="msapplication-TileImage" content="ms-icon-144x144.png" />
<link rel="stylesheet" type="text/css" href="font.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Watch Party</title>
</head>
<body>
<section>
<div class="page">
<!-- <a class="cta-container" href="http://get.chromewatchparty.com">
<mark class="cta">
Get Chrome Extension. It's Free.
</mark>
</a> -->
<a class="cta-container request" href="./beta/#request">
<mark class="cta">
Request Beta Access
</mark>
</a>
<a href="#" class="title">
<span>
WATCH PARTY
</span>
</a>
<a class="cta-container support" href="https://www.paypal.me/Ayushya">
<mark class="cta">
Support Watch Party
</mark>
</a>
</div>
</section>
<section data-page="2">
<div class="page">
<img src="./intro.gif" alt="Watch Party Intro" />
<p>
Watch your favorites on Netflix, Disney+, Amazon Prime, & Hulu (Beta) with your favorite
people
</p>
<mark>More Coming Soon.</mark>
</div>
</section>
<section data-page="3">
<div class="page">
<div class="row">
<div class="col image">
<img src="./hideable.gif" alt="No time sync" />
</div>
<div class="col text">
Hide the chat - focus on the show, <br />
while staying synced. <br />
Built to not be in your way but, <br />
also be there when you need it.
</div>
</div>
<div class="row">
<div class="col text left">
No signup or login required.<br />
Just ready to go.
</div>
<div class="col image">
<img src="./noauth.gif" alt="No time sync" />
</div>
<div class="col text right">
No signup or login required. Just ready to go.
</div>
</div>
<div class="row">
<div class="col image">
<img src="./beforeorafter.gif" alt="No time sync" />
</div>
<div class="col text">
Start the party before the show, <br />
or after the show. <br />
Just do what you want.
</div>
</div>
<div class="row">
<div class="col text left">
What happens in Watch Party, <br />
stays in Watch Party -<br />
for 24 hours - then it's gone.
</div>
<div class="col image">
<img src="./timed.gif" alt="No time sync" />
</div>
<div class="col text right">
What happens in Watch Party, stays in Watch Party - for 24 hours - then it's gone.
</div>
</div>
<div class="row">
<div class="col image">
<img src="./track.jpeg" alt="No time sync" />
</div>
<div class="col text">
Know when your friends pause and play
</div>
</div>
<div class="row">
<div class="col text left">
When words aren't enough, <br />
use a GIF from Giphy
</div>
<div class="col image">
<img src="./giphy.gif" alt="No time sync" />
</div>
<div class="col text right">
When words aren't enough use a GIF from Giphy
</div>
</div>
</div>
</section>
<footer>
<div>
<span class="full">© Ayushya Amitabh, 2020</span>
<span>
Built with ❤️ 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>.
</span>
</div>
<div>
<span class="full">
<a href="http://get.chromewatchparty.com">
<mark>Get Chrome Extension</mark>
</a>
</span>
<span>
Help keep Watch Party free -
<a href="https://www.paypal.me/Ayushya">
<mark>Support Watch Party</mark>
</a>
</span>
</div>
</footer>
</body>
</html>
website/style.css
-325
View File
@@ -1,325 +0,0 @@
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
background-color: black !important;
}
a {
text-decoration: none;
cursor: pointer;
}
section {
height: 100%;
background-image: url('./static.gif');
background-repeat: no-repeat;
background-size: cover;
}
section > .page {
height: 100%;
background: linear-gradient(
0deg,
rgba(50, 50, 50, 0.8) 0%,
rgba(75, 75, 75, 0.5) 25%,
rgba(150, 150, 150, 0.2) 100%
);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/*
B E T A P A G E
*/
.beta-body a.title {
font-size: 2rem;
}
.beta-body .cta {
font-size: 0.75rem;
}
.beta-body footer * {
font-size: 1rem;
line-height: normal;
}
.beta-body footer {
padding: 1rem;
}
.cta {
font-size: 1rem;
font-family: 'GlacialBold';
background-color: black;
color: #c0f300;
padding: 0.5rem 1rem;
letter-spacing: 0.2rem;
transition: all ease-in-out 0.3s;
}
.title {
text-align: center;
color: #c0f300;
font-size: 3.5rem;
padding: 1rem 5rem;
border: 5px solid black;
border-radius: 5rem;
margin: 2rem 0;
transition: all ease-in-out 0.3s;
cursor: pointer;
}
.title > span {
filter: drop-shadow(-10px 10px 0px black);
}
.title:hover {
background-color: black;
}
section[data-page='2'] .page {
background: linear-gradient(
0deg,
rgba(0, 0, 0, 1) 0%,
rgba(43, 43, 43, 1) 65%,
rgba(50, 50, 50, 0.8) 100%
);
}
section[data-page='2'] .page img {
width: 95%;
margin: 0 auto;
height: auto;
border-radius: 2rem;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
margin-bottom: 2rem;
}
section[data-page='2'] .page p {
font-family: 'Glacial';
font-size: 3rem;
word-break: keep-all;
word-wrap: break-word;
max-width: 95%;
text-align: center;
margin-bottom: 2rem;
color: white;
padding: 2px 0;
}
section[data-page='2'] .page mark {
font-family: 'GlacialBold';
padding: 2.5px 10px;
font-size: 2rem;
background-color: black;
color: #c0f300;
}
section[data-page='3'] {
height: fit-content;
}
section[data-page='3'] .page {
background: black;
display: block;
}
section[data-page='3'] .page * {
color: #c0f300;
font-family: 'Glacial';
}
section[data-page='2']#request {
height: fit-content;
}
#powered {
font-size: 1rem !important;
}
.row {
margin: 0 auto;
display: flex;
flex-direction: column;
margin-bottom: 0;
width: 65%;
}
.col.text {
padding: 2rem 0;
text-align: center;
color: white !important;
flex: 1;
font-size: 1.7rem;
}
.col.image {
padding: 0;
justify-self: center;
display: flex;
justify-content: center;
}
.col img {
width: 100%;
height: auto;
margin: 4rem 0 2rem 0;
position: relative;
border-radius: 1.5rem;
}
.col.text.left {
display: none;
}
footer {
padding: 2.5rem 4rem;
background-color: black;
}
footer,
footer * {
font-size: 1rem;
line-height: 2.5rem;
color: white;
font-family: 'Glacial';
}
footer > div {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
margin-bottom: 15px;
}
footer > div > span.full {
flex: 1;
}
footer mark {
background-color: #c0f300;
color: black;
padding: 2.5px 7px;
}
footer > div > span.full {
line-height: 2.5rem;
}
.support,
.request {
transition: all ease-in-out 0.3s;
}
@media screen and (min-width: 1360px) {
.cta {
font-size: 1rem;
}
.stickied {
z-index: 9999;
}
.support {
display: none;
margin-top: 0;
}
.support.stickied .cta {
letter-spacing: 0rem;
}
.support.stickied {
position: fixed;
top: 2rem;
right: 2rem;
display: block;
}
.request.stickied .cta {
letter-spacing: 0rem;
}
.request.stickied {
position: fixed;
top: 2rem;
right: 2rem;
display: block;
}
.beta-body a.title,
.title {
font-size: 5rem;
}
.title.stickied {
position: fixed;
top: 1rem;
left: 1rem;
margin: 0;
font-size: 1rem !important;
padding: 0.5rem 1.5rem;
background: black;
}
section[data-page='2'] .page img {
width: 55%;
}
section[data-page='2'] .page p {
max-width: 55%;
font-size: 1.5rem;
}
section[data-page='2'] .page mark {
font-size: 1rem;
}
section[data-page='3'] .page {
padding-top: 15rem;
}
.row {
margin: 0 auto;
display: flex;
flex-direction: row;
width: 65%;
margin-bottom: 5rem;
border-bottom: none;
}
.col.text {
color: #909090 !important;
flex: 1;
padding-left: 5rem;
font-size: 1.3rem;
display: flex;
align-items: center;
text-align: left;
}
.col.text.right {
display: none;
}
.col.text.left {
display: flex;
text-align: right;
justify-content: flex-end;
padding-left: 0;
padding-right: 5rem;
}
.col img {
width: auto;
height: 20rem;
position: relative;
border-radius: 1.5rem;
}
.col.image {
padding: 0;
justify-self: center;
display: flex;
justify-content: center;
}
.beta-body footer > div,
footer > div {
flex-direction: row;
align-items: center;
margin-bottom: 0;
}
.beta-body footer > div > span,
footer > div > span {
line-height: initial;
}
.beta-body footer *,
footer * {
font-size: 1rem;
line-height: normal;
}
.beta-body footer * {
line-height: 2.5rem;
}
}
@media screen and (max-width: 1360px) and (min-width: 1024px) {
.beta-body a.title {
font-size: 5rem;
}
section[data-page='2'] .page img {
width: 75%;
}
section[data-page='2'] .page p {
font-size: 1.25rem;
}
section[data-page='2'] .page mark {
font-size: 1rem;
}
section[data-page='2']#request {
height: 100%;
}
.col.text {
font-size: 1.25rem;
}
}