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

v1.4.1-beta/website

Browse Source
This commit is contained in:
ayushya
2020-07-01 00:39:09 -04:00
parent 05c23f2dab
commit 935922224f
20 changed files with 103 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/index.html
+15 -8
View File
@@ -27,11 +27,11 @@
<div class="logo-circle"></div>
<div class="logo-circle"></div>
<div class="logo-circle"></div>
<h1 data-font="sans-bold" class="logo">WATCH PARTY</h1>
<h1 data-font="serif" class="logo">WATCH PARTY</h1>
<h5 data-font="sans" class="logo-tag">
WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
</h5>
<p data-font="sans" class="works-title">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-logo" id="netflix"></div>
<div class="supported-logo" id="hulu"></div>
@@ -44,8 +44,9 @@
<a data-font="sans-bold" href="./beta/" class="link-button">Get Chrome Extension</a>
</div>
<div class="features">
<p data-font="sans-bold" class="title subtitle">FEATURES</p>
<div class="feature-card">
<div class="feature-icon" id="phone"></div>
<div class="feature-icon" id="sync"></div>
<p data-font="sans" class="feature-text">
Free group voice calls - for when text and GIFs just won't do.
</p>
@@ -57,27 +58,33 @@
</p>
</div>
<div class="feature-card">
<div class="feature-icon" id="phone"></div>
<div class="feature-icon" id="chat"></div>
<p data-font="sans" class="feature-text">
Free group voice calls - for when text and GIFs just won't do.
</p>
</div>
<div class="feature-card">
<div class="feature-icon" id="phone"></div>
<div class="feature-icon" id="delete"></div>
<p data-font="sans" class="feature-text">
Free group voice calls - for when text and GIFs just won't do.
</p>
</div>
<div class="feature-card">
<div class="feature-icon" id="phone"></div>
<div class="feature-icon" id="custom"></div>
<p data-font="sans" class="feature-text">
Free group voice calls - for when text and GIFs just won't do.
</p>
</div>
<div class="feature-card">
<div class="feature-icon" id="signup"></div>
<p data-font="sans" class="feature-text">
Free group voice calls - for when text and GIFs just won't do.
</p>
</div>
</div>
<footer data-font="sans">
<p class="works-title">© AYUSHYA AMITABH, 2020</p>
<p class="works-title built-with">
<p class="title">© AYUSHYA AMITABH, 2020</p>
<p class="title built-with">
BUILT WITH ❤ FOR <a>GOOGLE CHROME</a> USING <a>FIREBASE</a>, <a>MATERIAL-UI</a>,
<a>REACT JS</a>, <a>NODE JS</a>, & <a>GIPHY</a>.
</p>
website/media/Chat.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 504 KiB

website/media/Custom.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 534 KiB

website/media/Dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

website/media/Delete.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 574 KiB

website/media/Light.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

website/media/MobileDark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

website/media/MobileLight.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

website/media/Phone.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 825 KiB

website/media/PhoneBlack.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 694 B

website/media/PhoneWhite.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 705 B

website/media/Signup.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 576 KiB

website/media/Sync.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 563 KiB

website/media/hideable.gif
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 424 KiB

After

Width:  |  Height:  |  Size: 380 KiB

website/media/hideableold.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 424 KiB

website/scripts/Stickied.js
+2 -2
View File
@@ -3,12 +3,12 @@ var GET_INIT = 0;
function handleSticky() {
const logo = document.querySelector('.logo');
const get = document.querySelector('.landing .link-button');
if (window.scrollY >= LOGO_INIT + logo.offsetHeight) {
if (window.scrollY >= LOGO_INIT + logo.offsetHeight * 1.5) {
logo.classList.add('stickied');
} else {
logo.classList.remove('stickied');
}
if (window.scrollY >= GET_INIT + get.offsetHeight) {
if (window.scrollY >= GET_INIT + get.offsetHeight * 1.5) {
get.classList.add('stickied');
} else {
get.classList.remove('stickied');
website/styles/extrasmall.css
+18 -6
View File
@@ -32,6 +32,7 @@ html {
body {
font-size: 10px;
background-color: var(--primary);
overflow-x: hidden;
}
.landing {
@@ -68,14 +69,20 @@ body {
font-size: 3.2rem;
letter-spacing: 1.375rem;
margin: 6rem 0;
line-height: 6.4rem;
}
.works-title {
.title {
font-size: 3rem;
color: var(--primary-text);
letter-spacing: 0.75rem;
margin: 3rem 0;
display: inline-block;
line-height: 6rem;
}
.subtitle {
font-size: 2.5rem;
}
.supported-logo {
@@ -88,10 +95,6 @@ body {
transition: all ease-in-out 0.2s;
}
.supported-logo:hover {
transform: scale(1.2);
}
.link-button {
display: table;
text-decoration: none;
@@ -107,6 +110,11 @@ body {
padding-left: 10rem;
}
.features .title {
display: block;
margin-top: 10rem;
}
.feature-card {
background-color: var(--primary-light);
padding: 6rem 7.5rem;
@@ -118,7 +126,11 @@ body {
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;
border-radius: 100%;
}
.feature-text {
@@ -132,7 +144,7 @@ footer {
padding: 6rem 10rem;
}
footer .works-title {
footer .title {
width: 100%;
}
website/styles/medium.css
+39 -16
View File
@@ -9,6 +9,15 @@ body {
.supported {
max-width: 75%;
}
.link-button {
transition: all ease-in-out 0.2s !important;
border: 3px solid transparent;
}
.link-button:hover {
border: 3px solid var(--primary-text);
box-shadow: 0 0 10px var(--primary-text);
}
.logo {
font-size: 10rem;
transition: all ease-in-out 0.3s;
@@ -24,9 +33,6 @@ body {
padding: 3rem 10rem;
z-index: 999 !important;
}
.landing .link-button {
transition: all ease-in-out 0.3s;
}
.landing .link-button.stickied {
position: fixed;
right: 0rem;
@@ -34,6 +40,8 @@ body {
border-radius: 0;
font-size: 2rem;
z-index: 1999 !important;
border: none !important;
box-shadow: none !important;
}
.feature-card {
background-color: var(--primary-medium);
@@ -43,39 +51,54 @@ body {
margin: -1px;
display: inline-block;
padding: 3rem;
transition: all ease-in-out 0.3s;
transition: all 0.3s ease-in;
position: relative;
}
.feature-icon {
z-index: 1;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-size: 30% !important;
background-position: center !important;
transition: all ease-in-out 0.3s;
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;
left: 13rem;
}
.feature-card .feature-text {
z-index: 1;
display: none;
display: table;
line-height: 0;
opacity: 0;
text-align: center;
overflow: hidden;
}
.feature-card:hover {
background-color: var(--primary-light);
background-color: var(--cta);
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;
color: var(--primary-light);
line-height: initial;
opacity: 1;
}
.feature-card:hover .feature-icon {
position: relative;
top: unset;
left: unset;
margin-bottom: 3rem;
}
footer {
padding-right: 45%;
}
footer .works-title {
footer .title {
font-size: 2rem;
}
footer .built-with {
website/styles/variables-dark.css
+5 -8
View File
@@ -6,20 +6,17 @@
--primary-text: white;
}
.supported-logo#disney {
background: url('../media/Disney.png');
background-image: url('../media/Disney.png');
}
.supported-logo#prime {
background: url('../media/Prime.png');
background-image: url('../media/Prime.png');
}
.supported-logo#youtube {
background: url('../media/Youtube.png');
background-image: url('../media/Youtube.png');
}
.supported-logo#hbonow {
background: url('../media/HBONowWhite.png');
background-image: url('../media/HBONowWhite.png');
}
.supported-logo#hbomax {
background: url('../media/HBOMaxWhite.png');
}
.feature-icon#phone {
background: url('../media/PhoneWhite.png');
background-image: url('../media/HBOMaxWhite.png');
}
website/styles/variables.css
+24 -8
View File
@@ -7,26 +7,42 @@
font-size: 10px;
}
.supported-logo#netflix {
background: url('../media/Netflix.png');
background-image: url('../media/Netflix.png');
}
.supported-logo#hulu {
background: url('../media/Hulu.png');
background-image: url('../media/Hulu.png');
}
.supported-logo#disney {
background: url('../media/DisneyColor.png');
background-image: url('../media/DisneyColor.png');
}
.supported-logo#prime {
background: url('../media/PrimeColor.png');
background-image: url('../media/PrimeColor.png');
}
.supported-logo#youtube {
background: url('../media/YoutubeColor.png');
background-image: url('../media/YoutubeColor.png');
}
.supported-logo#hbonow {
background: url('../media/HBONowBlack.png');
background-image: url('../media/HBONowBlack.png');
}
.supported-logo#hbomax {
background: url('../media/HBOMax.png');
background-image: url('../media/HBOMax.png');
}
.feature-icon#phone {
background: url('../media/PhoneBlack.png');
background-image: url('../media/Phone.gif');
}
.feature-icon#delete {
background-image: url('../media/Delete.gif');
}
.feature-icon#signup {
background-image: url('../media/Signup.gif');
}
.feature-icon#sync {
background-image: url('../media/Sync.gif');
}
.feature-icon#custom {
background-image: url('../media/Custom.gif');
}
.feature-icon#chat {
background-image: url('../media/Chat.gif');
}