v1.2.0-beta/website redesign done

This commit is contained in:
2020-05-22 20:32:27 -04:00
parent 32fb08d61e
commit 09afedd265
9 changed files with 330 additions and 208 deletions
+48 -76
View File
@@ -1,98 +1,70 @@
<!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="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="../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="../style.css" />
<title>Watch Party | Beta</title>
<link rel="stylesheet" type="text/css" href="../styles/index.css" />
<script src="../scripts/Stickied.js"></script>
<title>Watch Party</title>
</head>
<body class="beta-body">
<script>
window.onload = function () {
let originalTitlePosition = null;
window.addEventListener('scroll', function (ev) {
const title = document.getElementsByClassName('title')[0];
const support = document.getElementsByClassName('support')[0];
if (originalTitlePosition === null) originalTitlePosition = title.offsetTop;
if (window.scrollY > originalTitlePosition) {
support.classList.add('stickied');
title.classList.add('stickied');
} else {
support.classList.remove('stickied');
title.classList.remove('stickied');
}
});
};
</script>
<section>
<div class="page">
<a class="cta-container" href="#request" target="_self">
<mark class="cta">
Request Beta Access Below
</mark>
</a>
<a href="../" target="_self" class="title">
<body>
<header data-header-visible="false">
<brand data-font="serif">WATCH PARTY</brand>
<spacer></spacer>
<a target="_self" href="#request" data-font="sans">GET CHROME EXTENSION</a>
<a target="_self" href="https://www.paypal.me/Ayushya" data-font="sans"
>SUPPORT WATCH PARTY</a
>
</header>
<section class="landing">
<a target="_self" href="#request" class="get" data-font="sans">GET CHROME EXTENSION</a>
<a target="_self" href="../" class="brand" data-font="serif">
<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 id="request" data-page="2">
<div class="page">
<section id="request" class="beta">
<script
src="../GoogleFormStyler.js"
src="../scripts/GoogleFormStyler.js"
form="https://docs.google.com/forms/d/e/1FAIpQLSfhGxX7rJ4gNEYuQsx_wgg0GJqJq9XRWlgbpMZCrK14iPyuZA/viewform?embedded=true"
></script>
<mark id="powered">Powered by Google Forms</mark>
</div>
</section>
<footer>
<footer data-font="sans">
<div class="inner">
<footerline>
<div>
<span class="full">© Ayushya Amitabh, 2020</span>
<span>
Built with ❤️ for
<a href="https://www.google.com/chrome/">Google Chrome</a>
using
© Ayushya Amitabh, 2020
</div>
<spacer></spacer>
<div>
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>
<a href="https://reactjs.org/">React JS</a> ,
<a href="https://nodejs.org/en/">Node.js</a> & <a href="https://giphy.com/">Giphy</a>
</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>
</footerline>
<footerline>
<a href="#request" data-font="sans">GET CHROME EXTENSION</a>
<spacer></spacer>
<a href="https://www.paypal.me/Ayushya" data-font="sans">SUPPORT WATCH PARTY</a>
</footerline>
</div>
</footer>
</body>
+64 -7
View File
@@ -26,13 +26,11 @@
<header data-header-visible="false">
<brand data-font="serif">WATCH PARTY</brand>
<spacer></spacer>
<a href="http://get.chromewatchparty.com" data-font="sans">GET CHROME EXTENSION</a>
<a href="./beta/#request" data-font="sans">GET CHROME EXTENSION</a>
<a href="https://www.paypal.me/Ayushya" data-font="sans">SUPPORT WATCH PARTY</a>
</header>
<section class="landing">
<a href="http://get.chromewatchparty.com" class="get" data-font="sans"
>GET CHROME EXTENSION</a
>
<a href="./beta/#request" class="get" data-font="sans">GET CHROME EXTENSION</a>
<a href="#" class="brand" data-font="serif">
<span>
WATCH PARTY
@@ -42,6 +40,7 @@
<section class="intro">
<div class="inner">
<img src="./media/intro.gif" />
<div class="supports" data-font="sans">Watch your favorites, with your favorite people</div>
<div class="supports" data-font="sans">Watch Party Works With</div>
<div class="supported" data-font="sans">
<div class="netflix"></div>
@@ -52,10 +51,68 @@
</div>
</div>
</section>
<section>
<div class="inner">
234
<section class="features">
<div class="inner" data-font="sans">
<feature>
<img src="./media/hideable.gif" data-color="rgb(100,100,100)" />
<div>
Hide the chat - focus on the show, while staying synced. Built to not be in your way
but, also be there when you need it.
</div>
</feature>
<feature>
<img src="./media/noauth.gif" />
<div>
No signup or login required. Just ready to go.
</div>
</feature>
<feature>
<img src="./media/giphy.gif" />
<div>
When words aren't enough, use a GIF from Giphy
</div>
</feature>
<feature>
<img src="./media/timed.gif" />
<div>
What happens in Watch Party, stays in Watch Party - for 24 hours - then it's gone.
</div>
</feature>
<feature>
<img src="./media/beforeorafter.gif" />
<div>
Start the party before the show, or after the show. Just do what you want.
</div>
</feature>
<feature>
<img src="./media/track.jpeg" />
<div>
Watch Party syncs your video with your party. Know when they pause and play.
</div>
</feature>
</div>
</section>
<footer data-font="sans">
<div class="inner">
<footerline>
<div>
© Ayushya Amitabh, 2020
</div>
<spacer></spacer>
<div>
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>
</div>
</footerline>
<footerline>
<a href="./beta/#request" data-font="sans">GET CHROME EXTENSION</a>
<spacer></spacer>
<a href="https://www.paypal.me/Ayushya" data-font="sans">SUPPORT WATCH PARTY</a>
</footerline>
</div>
</footer>
</body>
</html>
+8 -1
View File
@@ -4,8 +4,15 @@ function handleSticky() {
} else {
document.querySelector('header').setAttribute('data-header-visible', false);
}
if (document.querySelector('.intro')) {
const intro = document.querySelector('.intro');
intro.style = `--percentIntroScroll : ${window.scrollY / intro.offsetTop - 0.2}`;
}
if (document.querySelector('.features')) {
const features = document.querySelector('.features');
features.style = `--percentFeatureScroll : ${window.scrollY / features.offsetTop - 0.4}`;
}
}
window.onload = function () {
this.handleSticky();
window.addEventListener('scroll', this.handleSticky);
};
-63
View File
@@ -323,66 +323,3 @@ footer > div > span.full {
font-size: 1.25rem;
}
}
/*
G O O G L E F O R M S
C U S T O M I Z A T I O N
*/
.freebirdFormviewerViewHeaderTitle {
color: white !important;
}
.freebirdFormviewerViewHeaderDescription {
color: #848484 !important;
}
.freebirdFormviewerViewHeaderHeader {
border: none !important;
background-color: black !important;
}
.freebirdFormviewerViewHeaderThemeStripe {
display: none;
}
.freebirdFormviewerViewItemsItemItem {
background-color: black !important;
border: none !important;
}
.freebirdFormviewerViewItemsItemItem a {
font-family: 'Glacial';
color: cornflowerblue;
}
.freebirdFormviewerViewItemsItemItemTitle {
color: white !important;
}
.freebirdFormviewerViewFooterEmbeddedBackground {
display: none;
}
.freebirdFormviewerViewItemsItemItemHelpText {
color: #848484 !important;
}
.docssharedWizToggleLabeledLabelWrapper * {
color: #848484 !important;
}
.quantumWizTextinputPaperinputContentArea input {
color: white !important;
}
.quantumWizTextinputPapertextareaInput {
color: white !important;
}
.freebirdThemedFilledButtonM2 {
background-color: #c0f300 !important;
}
.freebirdThemedFilledButtonM2 * {
color: black !important;
letter-spacing: 2px;
}
.freebirdFormviewerViewResponseThemeStripe {
display: none;
}
.freebirdFormviewerViewResponseConfirmContentContainer {
background-color: black !important;
border: none !important;
}
.freebirdFormviewerViewResponsePageTitle {
color: white !important;
}
.freebirdFormviewerViewResponseMessage {
color: #c0f300 !important;
}
+4
View File
@@ -0,0 +1,4 @@
section.intro .inner,
section.features .inner {
max-width: 50%;
}
+139 -11
View File
@@ -21,6 +21,8 @@ header {
flex-direction: row;
align-items: center;
padding: 5px 10px;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
header brand {
font-size: 1rem;
@@ -71,8 +73,9 @@ section.landing {
align-items: center;
}
section.landing .brand {
font-size: 1.75rem;
border-radius: 1.75rem;
font-size: 2rem;
letter-spacing: 2.5px;
border-radius: 2rem;
border: 2px solid rgb(var(--primary));
padding: 10px 26px;
color: rgb(var(--secondary));
@@ -89,31 +92,30 @@ section.landing .brand span {
section.landing .get {
font-weight: 700;
background-color: rgb(var(--primary));
letter-spacing: 1.5px;
letter-spacing: 3.5px;
color: rgb(var(--secondary));
margin-bottom: 5px;
font-size: 0.75rem;
padding: 5px 13px;
border-radius: 13px;
}
section.intro {
section.intro,
section.features {
display: flex;
justify-content: center;
align-items: center;
}
section.intro .inner {
section.intro .inner,
section.features .inner {
max-width: 75%;
}
section.intro .inner img {
max-width: 100%;
height: auto;
border-radius: 26px;
transition: all ease-in-out 0.3s;
border: 2px solid transparent;
}
section.intro .inner img:hover {
border: 2px solid rgb(var(--secondary));
filter: drop-shadow(0 0 40px rgba(var(--tertiary), 0.5));
transition: all ease-out 0.3s;
border: 2px solid rgba(var(--secondary), var(--percentIntroScroll));
filter: drop-shadow(0 0 40px rgba(var(--tertiary), var(--percentIntroScroll)));
}
section.intro .inner .supported {
display: flex;
@@ -125,6 +127,7 @@ section.intro .inner .supports {
font-variant: all-small-caps;
letter-spacing: 1.5px;
font-weight: 400;
font-size: 0.8rem;
}
section.intro .inner .supported div {
flex: 1;
@@ -148,3 +151,128 @@ section.intro .inner .supported div.prime {
section.intro .inner .supported div.youtube {
background-image: url('../media/Youtube.png');
}
section.features,
section.beta {
height: fit-content;
min-height: 100%;
}
section.features img {
position: relative;
max-width: 100%;
border-radius: 26px;
transition: all ease-in-out 0.3s;
filter: drop-shadow(-200px 0px 5rem rgba(var(--tertiary-complement), 0.1));
}
section.features div {
color: rgb(var(--primary-complement));
font-size: 0.75rem;
text-align: center;
margin-top: 5px;
margin-bottom: 20px;
font-variant: all-small-caps;
letter-spacing: 2.5px;
}
section.features feature:nth-of-type(1):hover img {
filter: drop-shadow(0px 0px 7rem rgb(var(--secondary)));
}
section.features feature:nth-of-type(2):hover img {
filter: drop-shadow(0px 0px 7rem rgb(var(--tertiary-complement)));
}
section.features feature:nth-of-type(3):hover img {
filter: drop-shadow(0px 0px 7rem yellow);
}
section.features feature:nth-of-type(4):hover img {
filter: drop-shadow(0px 0px 7rem red);
}
section.features feature:nth-of-type(5):hover img {
filter: drop-shadow(0px 0px 7rem rgb(var(--tertiary)));
}
section.features feature:nth-of-type(6):hover img {
filter: drop-shadow(0px 0px 7rem rgb(var(--primary-complement)));
}
footer {
background-color: rgb(var(--primary));
color: rgb(var(--primary-complement));
padding: 5px 10px;
}
footerline {
font-size: 10px;
}
footerline a {
display: inline-block;
color: rgb(var(--secondary));
padding: 0px 5px;
border: 1px solid;
border-radius: 2rem;
margin: 10px 2.5px;
}
header,
footer {
user-select: none;
}
/*
G O O G L E F O R M S
C U S T O M I Z A T I O N
*/
.freebirdFormviewerViewHeaderTitle {
color: white !important;
}
.freebirdFormviewerViewHeaderDescription {
color: #848484 !important;
}
.freebirdFormviewerViewHeaderHeader {
border: none !important;
background-color: black !important;
}
.freebirdFormviewerViewHeaderThemeStripe {
display: none;
}
.freebirdFormviewerViewItemsItemItem {
background-color: black !important;
border: none !important;
}
.freebirdFormviewerViewItemsItemItem a {
font-family: 'Glacial';
color: cornflowerblue;
}
.freebirdFormviewerViewItemsItemItemTitle {
color: white !important;
}
.freebirdFormviewerViewFooterEmbeddedBackground {
display: none;
}
.freebirdFormviewerViewItemsItemItemHelpText {
color: #848484 !important;
}
.docssharedWizToggleLabeledLabelWrapper * {
color: #848484 !important;
}
.quantumWizTextinputPaperinputContentArea input {
color: white !important;
}
.quantumWizTextinputPapertextareaInput {
color: white !important;
}
.freebirdThemedFilledButtonM2 {
font-family: 'PixelSplitter' !important;
background-color: #c0f300 !important;
}
.freebirdThemedFilledButtonM2 * {
color: black !important;
letter-spacing: 2px;
}
.freebirdFormviewerViewResponseThemeStripe {
display: none;
}
.freebirdFormviewerViewResponseConfirmContentContainer {
background-color: black !important;
border: none !important;
}
.freebirdFormviewerViewResponsePageTitle {
color: white !important;
}
.freebirdFormviewerViewResponseMessage {
color: #c0f300 !important;
}
+30
View File
@@ -0,0 +1,30 @@
section.landing .brand {
font-size: 3.5rem;
border-radius: 3.5rem;
letter-spacing: 5px;
}
section.features feature {
display: flex;
align-items: center;
margin-bottom: 20px;
}
section.features feature img {
max-width: 45%;
margin-right: 2rem;
}
section.features feature div {
text-align: left;
max-width: 35%;
}
footerline,
footerline a {
font-size: 1rem;
}
footerline a {
padding: 4px 7.5px;
}
footerline:nth-of-type(2) a {
padding: 4px 15px;
}
+19
View File
@@ -0,0 +1,19 @@
section.landing .brand {
font-size: 3rem;
border-radius: 3rem;
letter-spacing: 2.5px;
}
section.intro .inner .supported {
margin-top: 10px;
}
section.intro .inner .supported div {
height: 75px;
}
footerline {
display: flex;
align-items: center;
font-size: 0.75rem;
}
+7 -39
View File
@@ -11,49 +11,17 @@ header a {
padding: 5px 13px;
border-radius: 13px;
}
section.landing .brand {
font-size: 3.25rem;
border-radius: 3.25rem;
padding: 5px 45px;
section.intro .inner .supports {
font-size: 1.2rem;
}
section.landing .get {
section.features div {
font-size: 1rem;
}
section.intro {
footerline:nth-of-type(2) {
display: flex;
justify-content: center;
align-items: center;
font-size: 0.75rem;
}
section.intro .inner {
max-width: 50%;
}
section.intro .inner img {
max-width: 100%;
height: auto;
border-radius: 26px;
transition: all ease-in-out 0.3s;
border: 2px solid transparent;
}
section.intro .inner img:hover {
border: 2px solid rgb(var(--secondary));
filter: drop-shadow(0 0 40px rgba(var(--tertiary), 0.5));
}
section.intro .inner .supported {
display: flex;
}
section.intro .inner .supports {
color: rgb(var(--secondary));
text-align: center;
margin-top: 5px;
font-variant: all-small-caps;
letter-spacing: 1.5px;
font-weight: 400;
}
section.intro .inner .supported div {
flex: 1;
height: 100px;
background-size: 75%;
background-position: center;
background-repeat: no-repeat;
footerline:nth-of-type(2) a {
margin: 10px 0px;
}