diff --git a/website/styles/extrasmall.css b/website/styles/extrasmall.css
index a95cf9b..d51df0c 100644
--- a/website/styles/extrasmall.css
+++ b/website/styles/extrasmall.css
@@ -212,7 +212,7 @@ footer .link-button {
.welcome .landing#tips .tip {
padding: 3rem 0;
- border-bottom: 0.5px solid var(--primary-medium);
+ border-bottom: 0.5px solid var(--cta);
padding-right: 3rem;
}
@@ -268,3 +268,384 @@ footer .link-button {
content: attr(data-upcoming-support);
text-transform: uppercase;
}
+
+.pop-features {
+ padding: 35px;
+ padding-left: 70px;
+}
+
+.pop-feature {
+ width: 100%;
+ height: fit-content;
+ display: flex;
+ flex-direction: column;
+}
+
+.pop-feature > * {
+ flex: 1;
+ margin: 40px 0;
+}
+
+#title-card {
+ border-radius: 26px;
+ background: var(--primary-light);
+ width: 500px;
+ position: relative;
+ height: 500px;
+ box-shadow: 0px 0px 84px var(--primary-medium);
+ margin: 0 auto;
+}
+div#title-card {
+ width: calc(500px - 60px);
+ height: calc(500px - 60px);
+ padding: 30px;
+}
+
+h5#title-card-title {
+ font-size: 20px;
+ color: var(--cta);
+ letter-spacing: 5px;
+}
+
+h3#title-card-subtitle {
+ font-size: 30px;
+ letter-spacing: 5px;
+ margin: 7.5px 0px;
+ color: var(--primary-text);
+}
+
+p#control-notification,
+p#control-autorejoin,
+p#control-admin {
+ font-size: 15px;
+ padding: 10px 55px;
+ background: var(--primary);
+ border-radius: 26px;
+ color: var(--primary-text);
+ box-shadow: 0px 0px 20px var(--primary-medium);
+ margin: 35px 0px;
+ width: max-content;
+}
+
+p#control-notification {
+ margin-left: -150px;
+}
+
+p#control-autorejoin {
+ margin-left: 100px;
+}
+
+p#control-admin {
+ margin-left: -75px;
+}
+
+p#control-notification span,
+p#control-autorejoin span,
+p#control-admin span {
+ display: block;
+ color: #949494;
+}
+
+.pop-feature .explanation > div {
+ margin: auto auto;
+ align-items: center;
+ max-width: 55%;
+}
+
+.pop-feature .explanation div h4 {
+ color: var(--primary-text);
+ font-size: 20px;
+ text-transform: uppercase;
+ letter-spacing: 5px;
+ margin-bottom: 50px;
+}
+
+.pop-feature .explanation p {
+ color: var(--primary-text);
+ font-size: 16px;
+ text-transform: uppercase;
+ letter-spacing: 5px;
+ line-height: 2;
+}
+
+.pop-feature .explanation {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+}
+
+h5#system-message {
+ text-align: center;
+ color: var(--primary-text);
+ font-size: 16px;
+ letter-spacing: 2px;
+ margin: 5px 0;
+}
+
+p#call-user-chip {
+ display: inline-block;
+ font-size: 20px;
+ padding: 10px 25px;
+ color: var(--primary-text);
+ border-radius: 26px;
+ background: var(--cta);
+ color: var(--primary-medium);
+ margin-right: 20px;
+ position: relative;
+ margin-bottom: 20px;
+}
+
+p#call-user-chip.not-me-user-chip {
+ background: var(--primary);
+ color: var(--primary-text);
+ display: inline-flex;
+ margin: 0;
+ max-width: fit-content;
+ align-items: center;
+ justify-content: center;
+}
+
+p#call-user-chip.not-me-user-chip input {
+ margin-left: 20px;
+}
+
+h6#title-card-tagline {
+ color: var(--primary-medium);
+ font-size: 15px;
+ color: var(--primary);
+ margin: 20px 0;
+ letter-spacing: 3.5px;
+}
+
+@keyframes circleMove {
+ 0% {
+ right: -40px;
+ bottom: -40px;
+ }
+ 35% {
+ right: 200px;
+ bottom: 250px;
+ }
+ 60% {
+ right: 200px;
+ bottom: 250px;
+ }
+ 75% {
+ right: -40px;
+ bottom: -40px;
+ }
+ 100% {
+ right: -40px;
+ bottom: -40px;
+ }
+}
+@keyframes rectSize {
+ 0% {
+ width: 0;
+ }
+ 35% {
+ width: 300px;
+ }
+ 60% {
+ width: 300px;
+ }
+ 75% {
+ width: 0;
+ }
+ 100% {
+ width: 0;
+ }
+}
+
+div#fab {
+ background: var(--primary);
+ width: 200px;
+ height: 200px;
+ border-radius: 100px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 60px;
+ letter-spacing: 5px;
+ text-align: center;
+ color: var(--cta);
+ position: absolute;
+ right: 250px;
+ bottom: 250px;
+ animation: circleMove 2s linear 3s infinite alternate-reverse !important;
+ z-index: 99;
+}
+
+div#title-card {
+ position: relative;
+}
+
+div#sidebar {
+ width: 300px;
+ height: 100%;
+ right: 0;
+ position: absolute;
+ background: var(--cta);
+ top: 0;
+ border-top-right-radius: 26px;
+ border-bottom-right-radius: 26px;
+ animation: rectSize 2s linear 3s infinite alternate-reverse !important;
+}
+
+/*
+ T H R E A D
+ D E M O S
+*/
+
+#ti * {
+ font-size: 14px !important;
+ font-family: 'Glacial';
+ letter-spacing: 1.1px;
+}
+
+#ti {
+ color: white;
+ width: fit-content;
+ margin: 10px 0;
+ width: 100%;
+}
+#tm {
+ width: 100%;
+ position: relative;
+}
+#tm #tt {
+ height: 0;
+ overflow-y: visible;
+ font-size: 10px;
+ transition: all ease-in-out 0.3s;
+ /* transition-delay: 0.1s; */
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+ opacity: 0;
+ color: #9f9f9f;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row-reverse;
+}
+#tm #tt span {
+ flex: 1;
+ text-align: center;
+}
+#tm #tt #ri {
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 15px;
+ color: #c0f300;
+ font-size: 20px;
+ border-radius: 26px;
+ z-index: 99 !important;
+ left: 0;
+ cursor: pointer;
+ background-color: white;
+ background-image: url('https://www.materialui.co/materialIcons/content/reply_grey_192x192.png');
+ background-size: 75%;
+ background-repeat: no-repeat;
+ background-position: center;
+ bottom: 0;
+ transition: all ease-in-out 0.3s;
+ /* transition-delay: 0.1s; */
+}
+#ti:hover #tm #tt {
+ height: 24px;
+ margin-bottom: 7px;
+ opacity: 1;
+}
+#tm p {
+ max-width: 40%;
+ padding: 5px 15px;
+ background: #424242;
+ border-radius: 26px;
+ z-index: 99 !important;
+ transition: all ease-in-out 0.3s;
+ /* transition-delay: 0.1s; */
+ width: fit-content;
+}
+#tm img {
+ max-width: 40%;
+ border-radius: 26px;
+ transition: all ease-in-out 0.3s;
+ /* transition-delay: 0.1s; */
+ z-index: 99;
+}
+#ti:hover #tm p,
+#ti:hover #tm img {
+ margin-left: 40px;
+}
+#tm #tt #ri:hover {
+ opacity: 0.6;
+}
+#tn {
+ font-size: 11px;
+ margin-top: 15px;
+ margin-bottom: 7px;
+ color: var(--primary-text);
+}
+#tr {
+ font-size: 11px;
+ margin-bottom: -20px;
+ padding: 7.5px 15px;
+ padding-bottom: 25px;
+ border-radius: 13px;
+ background: #222222;
+ width: fit-content;
+ max-width: 35%;
+ z-index: 99 !important;
+ transition: all ease-in-out 0.3s;
+ /* transition-delay: 0.1s; */
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ cursor: pointer;
+}
+#tr img {
+ max-height: 50px;
+ border-radius: 26px;
+ transition: all ease-in-out 0.3s;
+ /* transition-delay: 0.1s; */
+}
+#ti:hover #tr {
+ margin-bottom: 0;
+ padding-bottom: 7.5px;
+}
+#tr:hover {
+ background: #111111;
+}
+#ti.mm {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+}
+#ti.mm #tn {
+ display: none;
+}
+#ti.mm #tm {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+}
+#ti.mm #tm p {
+ text-align: right;
+}
+#ti.mm #tm #tt {
+ flex-direction: row;
+}
+#ti.mm #tm #tt #ri {
+ right: 0;
+ left: unset;
+}
+#ti.mm:hover #tm p,
+#ti.mm:hover #tm img {
+ margin-left: 0;
+ margin-right: 40px;
+}
diff --git a/website/styles/large.css b/website/styles/large.css
index 859730a..1c675b4 100644
--- a/website/styles/large.css
+++ b/website/styles/large.css
@@ -18,3 +18,27 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
.landing video {
max-width: 45%;
}
+
+.pop-feature {
+ flex-direction: row;
+}
+
+.pop-feature:not(:first-of-type) {
+ margin: -30px 0;
+}
+
+.pop-feature > * {
+ margin: 0;
+}
+
+.pop-feature .explanation {
+ text-align: left;
+}
+
+.pop-feature.alternate {
+ flex-direction: row-reverse;
+}
+
+.pop-feature.alternate .explanation {
+ text-align: right;
+}
diff --git a/website/styles/medium.css b/website/styles/medium.css
index 9aa56bf..82d9f57 100644
--- a/website/styles/medium.css
+++ b/website/styles/medium.css
@@ -194,7 +194,8 @@ footer .link-button {
.copyright .logo a::before {
content: '';
height: 100%;
- top: 0;
+ top: -3px;
+ padding-top: 2px;
width: 0;
position: absolute;
left: -1rem;
@@ -223,7 +224,7 @@ footer .link-button {
}
.welcome .landing#tips .tip {
- padding-right: 0;
+ padding-right: 100px;
transition: all ease-out 0.3s;
}
@@ -270,7 +271,7 @@ footer .link-button {
}
.welcome .landing#tips .tip h6 {
- color: var(--primary-light);
+ color: var(--primary-medium);
transition: all ease-out 0.3s;
}
diff --git a/website/styles/variables-dark.css b/website/styles/variables-dark.css
index f214e71..7d9a663 100644
--- a/website/styles/variables-dark.css
+++ b/website/styles/variables-dark.css
@@ -12,8 +12,8 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
:root {
--primary: black;
- --primary-medium: #232323;
- --primary-light: #454545;
+ --primary-medium: #464646;
+ --primary-light: #626262;
--cta: #c0f300;
--primary-text: white;
}
diff --git a/website/welcome/index.html b/website/welcome/index.html
index cd8721d..d1ba307 100644
--- a/website/welcome/index.html
+++ b/website/welcome/index.html
@@ -42,9 +42,6 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
WELCOME TO WATCH PARTY
- Watch Party lives in the bottom right corner of your screen.
-
- See What's New
WATCH TOGETHER ON
@@ -62,6 +59,134 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
+
+
+
+
+
+
+
TO BE OR NOT TO BE
+
Watch Party is built to not be in your way. There when you need it, gone when you don't. Watch Party lives in the bottom right corner of your screen. You can use the fullscreen button in the sidebar to go fullscreen with Watch Party.
+
+
+
+
+
+
+
+
WATCH PARTY
+
YOUR PARTY NAME
+
+ Allow chat notification when side panel is closed
+ Notifications show up when the side bar is hidden
+
+
+ Allow Watch Party to auto rejoin
+ Automatically rejoin party if you return to the page within 1 minute
+
+
+ Enable admin only mode
+ Only party admin can sync player and start calls
+
+
+
+
+
+
Stay in control
+
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)
+
+
+
+
+
+
+
+
Ayushya started the party.
+
+
+
+
AYUSHYA
+
Hiya buddy!
+
+
+
+
OH GOD NO! PLEASE GOD NO! NO!
+
+
+
+
SOMEONE
+
+
+
+
+
+
+
SOMEONE
+
+
+
+
+
Let's watch The Office
+
+
+
+
+
+
+
+
FULL FEATURED CHAT
+
A brand new, completely revamped chat user interface, now has replies, shows pending messages, and improves the Giphy GIF picker
+
+
+
+
+
+
+
+
+
WATCH PARTY
+
ANIME WATCH PARTY
+
USERS IN PARTY
+
Ayushya
+
Someone
+
Third Party
+
Won't Stop Talking
+
USERS ON CALL
+
Ayushya
+
Someone
+
Won't Stop Talking
+
+
+
+
+
MADE FOR YOU & YOUR GANG
+
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.
+
+
+
+
+
TIPS & FAQ
@@ -82,14 +207,6 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
If you started the party, you can simply join the party from a different place to change the party location.
-
-
- I CAN'T START A CALL
-
-
- A group call can only be started by the person who started the party - after that the rest of the party can join.
-
-
CHAT NOTIFICATIONS ARE ANNOYING
+