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

v1.6.0/header fix and website optimization

Browse Source
This commit is contained in:
ayushya
2020-08-06 16:28:07 -04:00
parent 90ec63a9f8
commit cbe7bc3e6f
12 changed files with 252 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/beta/index.html
+10
View File
@@ -15,6 +15,16 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<meta http-equiv="refresh" content="0; URL='https://request.chromewatchparty.com'" /> <meta http-equiv="refresh" content="0; URL='https://request.chromewatchparty.com'" />
<title>Watch Party | Beta</title> <title>Watch Party | Beta</title>
</head> </head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-87498806-2');
</script>
<body> <body>
Redirecting... Redirecting...
</body> </body>
website/changes/index.html
+11
View File
@@ -33,11 +33,22 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<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 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-87498806-2');
</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"><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
website/changes/v1.5.2/index.html
+11
View File
@@ -33,11 +33,22 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<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 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-87498806-2');
</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"><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
website/changes/v1.6.0/index.html
+11
View File
@@ -33,11 +33,22 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<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 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-87498806-2');
</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"><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
website/copyright/index.html
+11
View File
@@ -33,11 +33,22 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<script src="../scripts/Stickied.js"></script> <script src="../scripts/Stickied.js"></script>
<title>Watch Party | Copyright</title> <title>Watch Party | Copyright</title>
</head> </head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-87498806-2');
</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> | COPYRIGHT</h1>
<h1 data-font="serif" class="logo"><a href="../">WATCH PARTY</a> | COPYRIGHT</h1> <h1 data-font="serif" class="logo"><a href="../">WATCH PARTY</a> | COPYRIGHT</h1>
<h5 data-font="sans" class="logo-tag"> <h5 data-font="sans" class="logo-tag">
Copyright &COPY; 2020 Ayushya Amitabh. All Rights Reserved. Copyright &COPY; 2020 Ayushya Amitabh. All Rights Reserved.
website/font.css
+3
View File
@@ -40,10 +40,13 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
} }
[data-font='serif'] { [data-font='serif'] {
font-family: 'PixelSplitter', sans-serif; font-family: 'PixelSplitter', sans-serif;
font-display: swap;
} }
[data-font='sans'] { [data-font='sans'] {
font-family: 'Glacial', sans-serif; font-family: 'Glacial', sans-serif;
font-display: swap;
} }
[data-font='sans-bold'] { [data-font='sans-bold'] {
font-family: 'GlacialBold', sans-serif; font-family: 'GlacialBold', sans-serif;
font-display: swap;
} }
website/index.html
+148 -4
View File
@@ -33,11 +33,22 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<script src="./scripts/Stickied.js"></script> <script src="./scripts/Stickied.js"></script>
<title>Watch Party</title> <title>Watch Party</title>
</head> </head>
<body> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-87498806-2');
</script>
<body class="home">
<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">WATCH PARTY</h1>
<h1 data-font="serif" class="logo">WATCH PARTY</h1> <h1 data-font="serif" class="logo">WATCH PARTY</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
@@ -55,9 +66,12 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<div data-beta-support class="supported-logo" id="googleplay"></div> <div data-beta-support class="supported-logo" id="googleplay"></div>
<div data-beta-support class="supported-logo" id="crunchyroll"></div> <div data-beta-support class="supported-logo" id="crunchyroll"></div>
</div> </div>
<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 duplicate">
>Get Chrome Extension</a Get Chrome Extension
> </a>
<a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button">
Get Chrome Extension
</a>
</div> </div>
<div class="features"> <div class="features">
<p data-font="sans-bold" class="title subtitle">FEATURES</p> <p data-font="sans-bold" class="title subtitle">FEATURES</p>
@@ -104,6 +118,136 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
</p> </p>
</div> </div>
</div> </div>
<div id="getting-started" class="pop-features">
<p data-font="sans-bold" class="title subtitle">
GETTING STARTED
</p>
<div class="pop-feature alternate">
<div id="title-card-container">
<div id="title-card">
<div data-font="serif" id="fab">WP</div>
<div id="sidebar"></div>
</div>
</div>
<div class="explanation">
<div>
<h4 data-font="sans-bold">TO BE OR NOT TO BE</h4>
<p data-font="sans">Watch Party is built to not be in your way. There when you need it, gone when you don't. The sidebar is now resizeable, and now supports having access to Watch Party in fullscreen. (Use the fullscreen button in the sidebar)</p>
</div>
</div>
</div>
<div class="pop-feature">
<div id="title-card-container">
<div id="title-card">
<h5 data-font="sans-bold" id="title-card-title">WATCH PARTY</h5>
<h3 data-font="sans" id="title-card-subtitle">YOUR PARTY NAME</h3>
<p data-font="sans" id="control-notification">
Allow chat notification when side panel is closed
<span>Notifications show up when the side bar is hidden</span>
</p>
<p data-font="sans" id="control-autorejoin">
Allow Watch Party to auto rejoin
<span>Automatically rejoin party if you return to the page within 1 minute</span>
</p>
<p data-font="sans" id="control-admin">
Enable admin only mode
<span>Only party admin can sync player and start calls</span>
</p>
</div>
</div>
<div class="explanation">
<div>
<h4 data-font="sans-bold">Stay in control</h4>
<p data-font="sans">Find your settings by clicking on title card (when you're in a party) or in the settings panel (when you're creating or joining) </p>
</div>
</div>
</div>
<div class="pop-feature alternate">
<div id="title-card-container">
<div id="title-card">
<h5 data-font="sans-bold" id="system-message">Ayushya started the party.</h5>
<div id="ti">
<div id="tn">SOMEONE</div>
<div id="tm">
<div id="tt">
<span>12:00:00 PM</span>
<div id="ri"></div></div>
<p>Hiya buddy!</p>
</div>
</div>
<div id="ti" class="mm">
<div id="tn">AYUSHYA</div>
<div id="tr">Hiya buddy!
</div>
<div id="tm">
<div id="tt">
<span>12:00:00 PM</span>
<div id="ri"></div></div>
<p>OH GOD NO! PLEASE GOD NO! NO!</p>
</div>
</div>
<div id="ti">
<div id="tn">SOMEONE</div>
<div id="tm">
<div id="tt">
<span>12:00:00 PM</span>
<div id="ri"></div>
</div>
<img src="https://media.giphy.com/media/d10dMmzqCYqQ0/giphy.gif" />
</div>
</div>
<div id="ti" class="mm">
<div id="tn">SOMEONE</div>
<div id="tr">
<img src="https://media.giphy.com/media/d10dMmzqCYqQ0/giphy.gif" /></div>
<div id="tm">
<div id="tt">
<span>12:00:00 PM</span>
<div id="ri"></div>
</div>
<p>Let's watch The Office</p>
</div>
</div>
</div>
</div>
<div class="explanation">
<div>
<h4 data-font="sans-bold">FULL FEATURED CHAT</h4>
<p data-font="sans">A brand new, completely revamped chat user interface, now has replies, shows pending messages, and improves the Giphy GIF picker</p>
</div>
</div>
</div>
<div class="pop-feature">
<div id="title-card-container">
<div id="title-card">
<h5 data-font="sans-bold" id="title-card-title">WATCH PARTY</h5>
<h3 data-font="sans" id="title-card-subtitle">ANIME WATCH PARTY</h3>
<h6 data-font="sans" id="title-card-tagline">USERS IN PARTY</h6>
<p data-font="sans" id="call-user-chip">Ayushya</p>
<p data-font="sans" id="call-user-chip">Someone</p>
<p data-font="sans" id="call-user-chip">Third Party</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>
<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">Won't Stop Talking <input type="range" value="2" min="0" max="10"></p>
</div>
</div>
<div class="explanation">
<div>
<h4 data-font="sans-bold">MADE FOR YOU & YOUR GANG</h4>
<p data-font="sans">See who's in your party, get on a call with your party, and volume control for the person who just won't stop talking. </p>
</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.
website/scripts/Stickied.js
+12 -4
View File
@@ -13,25 +13,33 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
var LOGO_INIT = 0; var LOGO_INIT = 0;
var GET_INIT = 0; var GET_INIT = 0;
function handleSticky() { function handleSticky() {
const logo = document.querySelector('.logo'); const logo = document.querySelector('.logo.duplicate');
const get = document.querySelector('.landing .link-button'); const get = document.querySelector('.landing .link-button.duplicate');
if (window.scrollY >= LOGO_INIT + logo.offsetHeight * 2) { if (window.scrollY >= LOGO_INIT + logo.offsetHeight) {
logo.classList.add('stickied'); logo.classList.add('stickied');
} else { } else {
logo.classList.remove('stickied'); logo.classList.remove('stickied');
} }
if (get) { if (get) {
if (window.scrollY >= GET_INIT + get.offsetHeight * 2) { if (window.scrollY >= GET_INIT + get.offsetHeight) {
get.classList.add('stickied'); get.classList.add('stickied');
} else { } else {
get.classList.remove('stickied'); get.classList.remove('stickied');
} }
} }
} }
function handleLogoMargin () {
const logo = document.querySelector('.logo.duplicate');
if (logo) document.documentElement.style.setProperty('--logo-offset', '-' + logo.offsetHeight + 'px');
const linkButton = document.querySelector('.link-button.duplicate');
if (linkButton) document.documentElement.style.setProperty('--link-button-offset', '-' + linkButton.offsetHeight + 'px');
}
window.onload = function () { window.onload = function () {
LOGO_INIT = document.querySelector('.logo').offsetTop; LOGO_INIT = document.querySelector('.logo').offsetTop;
GET_INIT = document.querySelector('.landing .link-button') GET_INIT = document.querySelector('.landing .link-button')
? document.querySelector('.landing .link-button').offsetTop ? document.querySelector('.landing .link-button').offsetTop
: 0; : 0;
this.handleLogoMargin();
window.addEventListener('scroll', this.handleSticky); window.addEventListener('scroll', this.handleSticky);
window.addEventListener('resize', this.handleLogoMargin);
}; };
website/styles/extrasmall.css
+16
View File
@@ -76,6 +76,16 @@ body {
letter-spacing: 2.2rem; letter-spacing: 2.2rem;
} }
.logo.duplicate {
margin-bottom: var(--logo-offset);
opacity: 0;
}
.link-button.duplicate {
margin-bottom: var(--link-button-offset);
opacity: 0;
}
.logo-tag { .logo-tag {
color: var(--primary-text); color: var(--primary-text);
font-size: 3.2rem; font-size: 3.2rem;
@@ -143,6 +153,7 @@ body {
margin: 2.5rem 0; margin: 2.5rem 0;
display: table; display: table;
width: fit-content; width: fit-content;
transform: scale(2.5) translateY(-30%) translateX(1rem);
border-radius: 100%; border-radius: 100%;
} }
@@ -269,6 +280,10 @@ footer .link-button {
text-transform: uppercase; text-transform: uppercase;
} }
.home .pop-features {
margin-bottom: 50px;
}
.pop-features { .pop-features {
padding: 35px; padding: 35px;
padding-left: 70px; padding-left: 70px;
@@ -496,6 +511,7 @@ div#sidebar {
border-top-right-radius: 26px; border-top-right-radius: 26px;
border-bottom-right-radius: 26px; border-bottom-right-radius: 26px;
animation: rectSize 2s linear 0s infinite alternate !important; animation: rectSize 2s linear 0s infinite alternate !important;
box-shadow: -5px 0px 50px var(--primary-medium);
} }
/* /*
website/styles/large.css
+4
View File
@@ -19,6 +19,10 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
max-width: 45%; max-width: 45%;
} }
.home .pop-features {
margin-bottom: 100px;
}
.pop-feature { .pop-feature {
flex-direction: row; flex-direction: row;
} }
website/styles/medium.css
+4 -1
View File
@@ -66,6 +66,7 @@ body {
width: 100%; width: 100%;
left: 0; left: 0;
top: 0; top: 0;
opacity: 1;
padding: 3rem 10rem; padding: 3rem 10rem;
z-index: 999 !important; z-index: 999 !important;
} }
@@ -73,6 +74,7 @@ body {
position: fixed; position: fixed;
right: 0rem; right: 0rem;
top: 0; top: 0;
opacity: 1;
border-radius: 0; border-radius: 0;
font-size: 2rem; font-size: 2rem;
z-index: 1999 !important; z-index: 1999 !important;
@@ -129,6 +131,7 @@ body {
background-color: black; background-color: black;
position: absolute; position: absolute;
top: 13rem; top: 13rem;
transform: none;
left: 13rem; left: 13rem;
} }
.feature-card .feature-text { .feature-card .feature-text {
@@ -296,4 +299,4 @@ footer .link-button {
} }
.welcome .landing#tips .tip:last-of-type { .welcome .landing#tips .tip:last-of-type {
margin-bottom: 3rem; margin-bottom: 3rem;
} }
website/welcome/index.html
+11
View File
@@ -33,11 +33,22 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<script src="../scripts/Stickied.js"></script> <script src="../scripts/Stickied.js"></script>
<title>Watch Party | Welcome</title> <title>Watch Party | Welcome</title>
</head> </head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-87498806-2');
</script>
<body class="welcome"> <body class="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></h1>
<h1 data-font="serif" class="logo"><a href="../">WATCH PARTY</a></h1> <h1 data-font="serif" class="logo"><a href="../">WATCH PARTY</a></h1>
<h5 data-font="sans" class="logo-tag"> <h5 data-font="sans" class="logo-tag">
WELCOME TO WATCH PARTY WELCOME TO WATCH PARTY