From c37f4db6ad5e98fd694540f1860e3c7c739a1227 Mon Sep 17 00:00:00 2001 From: Ayushya Amitabh Date: Sun, 28 Jun 2020 23:29:22 -0400 Subject: [PATCH] v.14.1-beta/website redesign --- website/index.html | 153 +++++-------- website/media/PhoneBlack.png | Bin 0 -> 694 bytes website/media/PhoneWhite.png | Bin 0 -> 705 bytes website/scripts/Stickied.js | 20 +- website/styles/extralarge.css | 9 +- website/styles/extrasmall.css | 350 ++++++++++++------------------ website/styles/index.css | 8 +- website/styles/large.css | 89 ++++++-- website/styles/medium.css | 20 +- website/styles/small.css | 27 --- website/styles/variables-dark.css | 95 ++------ website/styles/variables.css | 45 ++-- 12 files changed, 331 insertions(+), 485 deletions(-) create mode 100644 website/media/PhoneBlack.png create mode 100644 website/media/PhoneWhite.png diff --git a/website/index.html b/website/index.html index d8f8e78..c06afae 100644 --- a/website/index.html +++ b/website/index.html @@ -23,104 +23,67 @@ Watch Party -
- WATCH PARTY - - GET CHROME EXTENSION - SUPPORT WATCH PARTY -
-
- GET CHROME EXTENSION - - - WATCH PARTY - - -
-
-
- -
Watch your favorites, with your favorite people
-
Watch Party Works With
-
-
-
-
-
-
-
-
-
+
+
+
+
+

WATCH PARTY

+
+ WATCH YOUR FAVORITES,
WITH YOUR FAVORITE PEOPLE +
+

WORKS WITH

+
+ + + + + + +
-
-
-
- - -
- 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. -
- - - -
- Messages and gifs not doing it? Get on a voice call! -
- - - -
- No signup or login required. Just ready to go. -
- - - -
- When words aren't enough, use a GIF from Giphy -
- - - -
- What happens in Watch Party, stays in Watch Party - for 24 hours - then it's gone. -
- - - -
- Start the party before the show, or after the show. Just do what you want. -
- - - -
- Watch Party syncs your video with your party. Know when they pause and play. -
- +

FREE. NO SIGNUP. NO BS.

+ Get Chrome Extension +
+
+
+
+

+ 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. +

+
+
+
+

+ 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. +

+
+
+
+

+ Free group voice calls - for when text and GIFs just won't do. +

+
+ diff --git a/website/media/PhoneBlack.png b/website/media/PhoneBlack.png new file mode 100644 index 0000000000000000000000000000000000000000..ce3a5cc81fc81ed3f01c5611a588b9efa5ccb7bd GIT binary patch literal 694 zcmV;n0!jUeP)DuULlF$c5ER7_9H0n70Z;_PPz(XU5I`^tMF0>KMKBb_VF(5&4nYwFFa(F7 zIJ|ohHe^nrY`n8{5~3_0yY}HZ&MB5w@kzLZ>iz?HrDWc>!Q-|eakic z|Nq<2EtKPFi3;aPl)8e|ctFBb0jn{9a=Z$b2vCk!!32p?eOQeO8IfE*TSi=qGU+x0TpX|x332El*$?fJMEFo!izAafXgo#L1d z`c{}Az<>Ba)xJm6dP`jT4}YfxUE>+n&;!nWhmV$&VFhcb!mZ!%(V{w-!wyOd8)2&j z_}0Ut7T{aJ2&ER_+bQm}0RQ?Zv;hCEP-p@EU10(9r3T1R`7S_pF~-t=0V=~38(2b5 z_)99_0%PO}-mqtAkO~-Jf*fnu3zg{NA5$mDFvJ*lSnRBK%HIZmk2Cx+rIb=iDW#NB cN-3p&06OzC6W-p4$^ZZW07*qoM6N<$g5CZtj{pDw literal 0 HcmV?d00001 diff --git a/website/media/PhoneWhite.png b/website/media/PhoneWhite.png new file mode 100644 index 0000000000000000000000000000000000000000..b2aae10ea2b32c1e0d8e8cd935f8c8341afbcf16 GIT binary patch literal 705 zcmV;y0zUnTP)BKkPy`SZ#UcO*f*>e@#h?fZ2nK^77(fvW z9u|Xd0W8dWv*x;Xay|gSIWzCR|98C-n?yuJL_|bHLVwvO7yD zVLUw8z3VbgU}g8_Wt>n+i4^cdz$yhagrzzTOEfLu*Am0-MYXTwk15dK3i? zu`=xMQb*vzIOk>e0v(v39kFK~+9uxA{Urt&Cy%%NNf?v3+LN~iz_crngR*}cF7 zU-IpUhVapNH|XmBC`{kfRE|HP<(Ys}{Oeo);}*Z+m)s`;;6EJfcvsaMw!{Oj@H@_M zjP9+y8NmxqtA@Y5C6;)?UpV*?C*_&(dYrcke=mng9AIWUpU|}ke=nDd=x}d4b4(h9 zKV<%vF8Z!8m6%}BC_wB<6_GMW6Vtb!)(lUJ5r?th4?X7W(UL*Uqz`Ivd z3K)h9^eLbroZ=}3G=vTpSfzl5aEQAU&=}4zPXUeL1Ljgd`y%j|0vf{6DoF(4j5;OG1%bli5g-mgU8J51^3P&Y&@?F#k&T)x5JmL{cEU^N> n3J*9g5fKp)5fKp)5gU93zpy_bQ^uyc00000NkvXXu0mjfQ8zVp literal 0 HcmV?d00001 diff --git a/website/scripts/Stickied.js b/website/scripts/Stickied.js index b4e123b..48dd62f 100644 --- a/website/scripts/Stickied.js +++ b/website/scripts/Stickied.js @@ -1,18 +1,16 @@ +var LOGO_INIT = 0; function handleSticky() { - if (window.scrollY >= window.innerHeight * 0.65) { - document.querySelector('header').setAttribute('data-header-visible', true); + const logo = document.querySelector('.logo'); + const logoCircle = document.querySelector('.logo-circle'); + if (window.scrollY >= LOGO_INIT) { + logo.classList.add('stickied'); + logoCircle.classList.add('stickied'); } 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}`; + logo.classList.remove('stickied'); + logoCircle.classList.remove('stickied'); } } window.onload = function () { + LOGO_INIT = document.querySelector('.logo').offsetTop; window.addEventListener('scroll', this.handleSticky); }; diff --git a/website/styles/extralarge.css b/website/styles/extralarge.css index 2f8acf4..3e224e2 100644 --- a/website/styles/extralarge.css +++ b/website/styles/extralarge.css @@ -1,4 +1,7 @@ -section.intro .inner, -section.features .inner { - max-width: 50%; +html { + font-size: 11.5px !important; +} + +body { + font-size: 11.5px !important; } diff --git a/website/styles/extrasmall.css b/website/styles/extrasmall.css index 7eb2158..c534528 100644 --- a/website/styles/extrasmall.css +++ b/website/styles/extrasmall.css @@ -1,218 +1,154 @@ +@keyframes circleFloat { + 0% { + top: -12.5rem; + left: -12.5rem; + } + 25% { + top: -14rem; + left: -13rem; + } + 50% { + left: -11rem; + } + 75% { + top: -11rem; + } + 100% { + top: -12.5rem; + left: -12.5rem; + } +} + +* { + margin: 0em; + padding: 0em; +} + +html { + font-size: 10px; +} + body { - background-color: rgb(var(--primary)); - background: url('../media/static.gif'); - margin: 0; - max-width: 100vw; - height: 100vh; + font-size: 10px; + background-color: var(--primary); +} + +.landing { + padding-top: 17.5rem; + padding-left: 10rem; +} + +.logo-circle { + border-radius: 100%; + width: 60rem; + height: 60rem; + position: absolute; + top: -12.5rem; + left: -12.5rem; + z-index: -1 !important; + background-color: var(--primary-light); + animation: circleFloat 3s ease-in-out 0s infinite; +} +.logo-circle:nth-of-type(2) { + animation-delay: 0.5s; +} +.logo-circle:nth-of-type(3) { + animation-delay: 1.5s; +} + +.logo { + color: var(--cta); + font-size: 7.2rem; + letter-spacing: 2.2rem; +} + +.logo-tag { + color: var(--primary-text); + font-size: 3.2rem; + letter-spacing: 1.375rem; + margin: 6rem 0; +} + +.works-title { + font-size: 2.4rem; + color: var(--primary-text); + letter-spacing: 0.75rem; + margin: 3rem 0; + display: inline-block; } -a { + +.supported-logo { + display: inline-block; + padding: 10rem; + margin: 2.5rem; + background-position: center !important; + background-size: contain !important; + background-repeat: no-repeat !important; + transition: all ease-in-out 0.2s; +} + +.supported-logo:hover { + transform: scale(1.2); +} + +.link-button { + display: table; text-decoration: none; -} -header { - opacity: 0; - z-index: -1; - transition: all ease-in-out 0.3s; - position: fixed; - top: 0; - left: 0; - width: calc(100% - 20px); - height: fit-content; - display: flex; - flex-direction: row; - align-items: center; - padding: 5px 10px; - background-color: rgba(var(--primary) 0.5); - backdrop-filter: blur(4px); -} -header brand { - font-size: 1rem; - padding: 5px 15px; + padding: 1rem 7.5rem; + color: var(--primary); + background-color: var(--cta); + font-size: 4rem; + border-radius: 4rem; +} + +.features { + margin: 6rem 0; + padding-left: 10rem; +} + +.feature-card { + background-color: var(--primary-light); + padding: 6rem 10rem; + margin: 10rem 0; +} + +.feature-icon { + padding: 5rem; + background-position: center !important; + background-size: contain !important; + background-repeat: no-repeat !important; + margin: 2.5rem; +} + +.feature-text { + color: var(--primary-text); + font-size: 2.8rem; text-align: center; - background-color: rgb(var(--secondary)); - color: rgb(var(--primary)); - border-radius: 13px; -} -header a { - display: none; -} -spacer { - flex: 1; -} -header[data-header-visible='true'] { - opacity: 1; - z-index: 9999; -} -section { - max-width: 100%; - height: 100%; - margin: 0; - background-color: rgba(var(--primary), 1); -} -section:nth-of-type(1) { - width: 100%; - height: 100%; - background: linear-gradient( - 180deg, - rgba(var(--primary), 0) 0%, - rgba(var(--primary), 0.3) 25%, - rgba(var(--primary), 0.7) 100% - ); -} -section:nth-of-type(2) { - background: linear-gradient( - 180deg, - rgba(var(--primary), 0.7) 0%, - rgba(var(--primary), 0.85) 50%, - rgba(var(--primary), 1) 100% - ); -} -section.landing { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} -section.landing .brand { - font-size: 2rem; - letter-spacing: 2.5px; - border-radius: 2rem; - border: 2px solid rgb(var(--primary)); - padding: 10px 26px; - color: rgb(var(--secondary)); - transition: all ease-in-out 0.3s; -} -section.landing .brand:hover { - background-color: rgb(var(--primary)); -} -section.landing .brand span { - filter: drop-shadow(-5px 5px 0px rgb(var(--primary))); - text-align: center; - display: flex; -} -section.landing .get { - font-weight: 700; - background-color: rgb(var(--primary)); - letter-spacing: 3.5px; - color: rgb(var(--secondary)); - margin-bottom: 5px; - font-size: 0.75rem; - padding: 5px 13px; - border-radius: 13px; -} -section.intro, -section.features { - display: flex; - justify-content: center; - align-items: center; -} -section.intro .inner, -section.features .inner { - max-width: 75%; -} -section.intro .inner img { - max-width: 100%; - height: auto; - border-radius: 26px; - 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; -} -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: 600; - font-size: 0.8rem; -} -section.intro .inner .supported div { - flex: 1; - height: 50px; - background-size: 75%; - background-position: center; - background-repeat: no-repeat; -} -section.features, -section.beta { - height: fit-content; - min-height: 100%; -} -section.features img { - position: relative; - max-width: 100%; - 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 { - margin-bottom: 50px; -} -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))); -} -section.features feature:nth-of-type(7):hover img { - filter: drop-shadow(0px 0px 7rem rgb(var(--secondary))); -} -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; + background-color: var(--primary-medium); + padding: 6rem 10rem; } -/* - G O O G L E F O R M S - C U S T O M I Z A T I O N -*/ -.freebirdFormviewerViewHeaderThemeStripe { - display: none; + +footer .works-title { + width: 100%; + color: white; } -.freebirdFormviewerViewFooterEmbeddedBackground { - display: none; + +.built-with { + line-height: 4rem; } -.freebirdFormviewerViewResponseThemeStripe { - display: none; + +.built-with a { + color: var(--cta); + text-decoration: underline; + text-underline-offset: 0.3rem; +} + +footer .link-button { + margin: 3rem 0; + position: relative; + width: calc(100% - 15rem); + text-align: center; } diff --git a/website/styles/index.css b/website/styles/index.css index 702f00e..8a156d0 100644 --- a/website/styles/index.css +++ b/website/styles/index.css @@ -2,7 +2,7 @@ @import './variables-dark.css' screen and (prefers-color-scheme: dark); @import './extrasmall.css'; -@import './small.css' only screen and (min-width: 411px) and (max-width: 823px); -@import './medium.css' only screen and (min-width: 768px) and (max-width: 1024px); -@import './large.css' only screen and (min-width: 1024px) and (max-width: 1366px); -@import './extralarge.css' only screen and (min-width: 1440px); +@import './small.css' only screen and (min-width: 768px); +@import './medium.css' only screen and (min-width: 1024px); +@import './large.css' only screen and (min-width: 1366px); +@import './extralarge.css' only screen and (min-width: 1921px); diff --git a/website/styles/large.css b/website/styles/large.css index 6eb0672..ee62e96 100644 --- a/website/styles/large.css +++ b/website/styles/large.css @@ -1,30 +1,73 @@ -section.landing .brand { - font-size: 3.5rem; - border-radius: 3.5rem; - letter-spacing: 5px; +.logo { + font-size: 10rem; + transition: all ease-in-out 0.3s; } -section.features feature { - display: flex; - align-items: center; - margin-bottom: 50px; -} -section.features feature img { - max-width: 45%; - margin-right: 2rem; -} -section.features feature div { - text-align: left; - max-width: 35%; +.logo.stickied { + font-size: 2rem; + letter-spacing: 0.8rem; + position: fixed; + background-color: var(--primary); + width: 100%; + left: 0; + top: 0; + padding: 3rem 10rem; } -footerline, -footerline a { - font-size: 1rem; +.supported { + max-width: 65%; } -footerline a { - padding: 4px 7.5px; +.features { + max-width: 65%; } -footerline:nth-of-type(2) a { - padding: 4px 15px; +.feature-card { + background-color: var(--primary-medium); + z-index: 1; + width: 30rem; + height: 30rem; + margin: -1px; + display: inline-block; + padding: 3rem; + transition: all ease-in-out 0.3s; +} +.feature-icon { + z-index: 1; + padding: 0; + margin: 0; + width: 100%; + height: 100%; + background-size: 30% !important; + transition: all ease-in-out 0.3s; +} +.feature-card .feature-text { + z-index: 1; + display: none; +} +.feature-card:hover { + background-color: var(--primary-light); + box-shadow: -5px 5px 100px #000000; + z-index: 100; + transform: scale(1.1); +} +.feature-card:hover .feature-icon { + height: 50%; +} +.feature-card:hover .feature-text { + display: table; +} +footer { + padding-right: 55%; +} +footer .works-title { + font-size: 2rem; +} +footer .built-with { + display: block; +} +footer .link-button { + max-width: fit-content; + display: inline-table; + margin-right: 3rem; + padding: 0.8rem 3.375rem; + font-size: 2.5rem; } diff --git a/website/styles/medium.css b/website/styles/medium.css index 81ff03a..dc04b3b 100644 --- a/website/styles/medium.css +++ b/website/styles/medium.css @@ -1,19 +1,11 @@ -section.landing .brand { - font-size: 3rem; - border-radius: 3rem; - letter-spacing: 2.5px; +html { + font-size: 7.5px !important; } -section.intro .inner .supported { - margin-top: 10px; +body { + font-size: 7.5px !important; } -section.intro .inner .supported div { - height: 75px; -} - -footerline { - display: flex; - align-items: center; - font-size: 0.75rem; +.supported { + max-width: 85%; } diff --git a/website/styles/small.css b/website/styles/small.css index 7769494..e69de29 100644 --- a/website/styles/small.css +++ b/website/styles/small.css @@ -1,27 +0,0 @@ -header a { - color: rgb(var(--secondary)); - display: block; - text-decoration: none; - font-size: 0.75rem; - background-color: rgb(var(--primary)); - padding: 5px 10px; - font-weight: 700; - letter-spacing: 1.5px; - margin-left: 5px; - padding: 5px 13px; - border-radius: 13px; -} -section.intro .inner .supports { - font-size: 1.2rem; -} -section.features div { - font-size: 1rem; -} -footerline:nth-of-type(2) { - display: flex; - align-items: center; - font-size: 0.75rem; -} -footerline:nth-of-type(2) a { - margin: 10px 0px; -} diff --git a/website/styles/variables-dark.css b/website/styles/variables-dark.css index 9116169..791f094 100644 --- a/website/styles/variables-dark.css +++ b/website/styles/variables-dark.css @@ -1,86 +1,25 @@ :root { - --primary: 0, 0, 0; - --primary-complement: 251, 248, 239; - --secondary: 192, 243, 0; - --secondary-complement: 125, 163, 41; - --tertiary: 4, 221, 217; - --tertiary-complement: 2, 161, 159; + --primary: black; + --primary-medium: #232323; + --primary-light: #454545; + --cta: #c0f300; + --primary-text: white; } - -section.landing .brand { - background-color: transparent; +.supported-logo#disney { + background: url('../media/Disney.png'); } - -section.intro .inner .supported div.netflix { - background-image: url('../media/Netflix.png'); +.supported-logo#prime { + background: url('../media/Prime.png'); } -section.intro .inner .supported div.hulu { - background-image: url('../media/Hulu.png'); +.supported-logo#youtube { + background: url('../media/Youtube.png'); } -section.intro .inner .supported div.disney { - background-image: url('../media/Disney.png'); +.supported-logo#hbonow { + background: url('../media/HBONowWhite.png'); } -section.intro .inner .supported div.prime { - background-image: url('../media/Prime.png'); +.supported-logo#hbomax { + background: url('../media/HBOMaxWhite.png'); } -section.intro .inner .supported div.youtube { - background-image: url('../media/Youtube.png'); -} -section.intro .inner .supported div.hbonow { - background-image: url('../media/HBONowWhite.png'); -} -section.intro .inner .supported div.hbomax { - background-image: url('../media/HBOMaxWhite.png'); -} - -.freebirdFormviewerViewHeaderTitle { - color: white !important; -} -.freebirdFormviewerViewHeaderDescription { - color: #848484 !important; -} -.freebirdFormviewerViewHeaderHeader { - border: none !important; - background-color: black !important; -} -.freebirdFormviewerViewItemsItemItem { - background-color: black !important; - border: none !important; -} -.freebirdFormviewerViewItemsItemItem a { - font-family: 'Glacial'; - color: cornflowerblue; -} -.freebirdFormviewerViewItemsItemItemTitle { - color: white !important; -} -.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; -} -.freebirdFormviewerViewResponseConfirmContentContainer { - background-color: black !important; - border: none !important; -} -.freebirdFormviewerViewResponsePageTitle { - color: white !important; -} -.freebirdFormviewerViewResponseMessage { - color: #c0f300 !important; +.feature-icon#phone { + background: url('../media/PhoneWhite.png'); } diff --git a/website/styles/variables.css b/website/styles/variables.css index 7e27f89..b7c5ee8 100644 --- a/website/styles/variables.css +++ b/website/styles/variables.css @@ -1,33 +1,32 @@ :root { - --primary: 251, 248, 239; - --primary-complement: 0, 0, 0; - --secondary: 125, 163, 41; - --secondary-complement: 154, 203, 52; - --tertiary: 2, 161, 159; - --tertiary-complement: 4, 221, 217; + --primary: white; + --primary-medium: #6f8d00; + --primary-light: #c0f300; + --cta: black; + --primary-text: black; + font-size: 10px; } - -section.landing .brand { - background-color: rgb(var(--primary)); +.supported-logo#netflix { + background: url('../media/Netflix.png'); } -section.intro .inner .supported div.netflix { - background-image: url('../media/Netflix.png'); +.supported-logo#hulu { + background: url('../media/Hulu.png'); } -section.intro .inner .supported div.hulu { - background-image: url('../media/Hulu.png'); +.supported-logo#disney { + background: url('../media/DisneyColor.png'); } -section.intro .inner .supported div.disney { - background-image: url('../media/DisneyColor.png'); +.supported-logo#prime { + background: url('../media/PrimeColor.png'); } -section.intro .inner .supported div.prime { - background-image: url('../media/PrimeColor.png'); +.supported-logo#youtube { + background: url('../media/YoutubeColor.png'); } -section.intro .inner .supported div.youtube { - background-image: url('../media/YoutubeColor.png'); +.supported-logo#hbonow { + background: url('../media/HBONowBlack.png'); } -section.intro .inner .supported div.hbonow { - background-image: url('../media/HBONowBlack.png'); +.supported-logo#hbomax { + background: url('../media/HBOMax.png'); } -section.intro .inner .supported div.hbomax { - background-image: url('../media/HBOMax.png'); +.feature-icon#phone { + background: url('../media/PhoneBlack.png'); }