287 lines
9.3 KiB
HTML
287 lines
9.3 KiB
HTML
<!-----------------------------------------------------------------------
|
|
Copyright (C) Ayushya Amitabh - All Rights Reserved
|
|
Unauthorized copying of this file, via any medium is strictly prohibited
|
|
Proprietary and confidential
|
|
Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020 - 2022
|
|
https://www.chromewatchparty.com/copyright
|
|
=========================================================================
|
|
ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, UNLESS OTHERWISE
|
|
CITED ARE THE SOLE INTELLECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
|
|
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
|
|
------------------------------------------------------------------------->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="preload" as="font" href="/fonts/glacialindifference-bold-webfont.woff" crossorigin />
|
|
<link
|
|
rel="preload"
|
|
as="font"
|
|
href="/fonts/glacialindifference-bold-webfont.woff2"
|
|
crossorigin
|
|
/>
|
|
<link
|
|
rel="preload"
|
|
as="font"
|
|
href="/fonts/glacialindifference-italic-webfont.woff"
|
|
crossorigin
|
|
/>
|
|
<link
|
|
rel="preload"
|
|
as="font"
|
|
href="/fonts/glacialindifference-italic-webfont.woff2"
|
|
crossorigin
|
|
/>
|
|
<link
|
|
rel="preload"
|
|
as="font"
|
|
href="/fonts/glacialindifference-regular-webfont.woff"
|
|
crossorigin
|
|
/>
|
|
<link
|
|
rel="preload"
|
|
as="font"
|
|
href="/fonts/glacialindifference-regular-webfont.woff2"
|
|
crossorigin
|
|
/>
|
|
<style>
|
|
@font-face {
|
|
font-family: 'GlacialBold';
|
|
src: url('/fonts/glacialindifference-bold-webfont.woff2') format('woff2'),
|
|
url('/fonts/glacialindifference-bold-webfont.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'GlacialItalic';
|
|
src: url('/fonts/glacialindifference-italic-webfont.woff2') format('woff2'),
|
|
url('/fonts/glacialindifference-italic-webfont.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Glacial';
|
|
src: url('/fonts/glacialindifference-regular-webfont.woff2') format('woff2'),
|
|
url('/fonts/glacialindifference-regular-webfont.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
[data-font='sans'] {
|
|
font-family: 'Glacial', sans-serif;
|
|
font-display: swap;
|
|
}
|
|
[data-font='sans-bold'] {
|
|
font-family: 'GlacialBold', sans-serif;
|
|
font-display: swap;
|
|
}
|
|
[data-font='sans-italic'] {
|
|
font-family: 'GlacialItalic', sans-serif;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
:root {
|
|
--mdc-theme-primary: #beff94 !important;
|
|
--mdc-theme-secondary: #000000 !important;
|
|
--mdc-theme-background: #beff94 !important;
|
|
--mdc-theme-surface: #000000 !important;
|
|
--mdc-theme-on-primary: #000000 !important;
|
|
--mdc-theme-on-secondary: #beff94 !important;
|
|
--mdc-theme-on-surface: #beff94 !important;
|
|
--mdc-theme-text-primary-on-light: #000000 !important;
|
|
--mdc-theme-text-secondary-on-light: #2c2c2c !important;
|
|
--mdc-theme-text-hint-on-light: #363636 !important;
|
|
--mdc-theme-text-disabled-on-light: #555555 !important;
|
|
--mdc-theme-text-icon-on-light: #000000 !important;
|
|
--mdc-theme-text-primary-on-dark: #beff94 !important;
|
|
--mdc-theme-text-secondary-on-dark: #f7ff56 !important;
|
|
--mdc-theme-text-hint-on-dark: #fbffb3 !important;
|
|
--mdc-theme-text-disabled-on-dark: #8bc000 !important;
|
|
--mdc-theme-text-icon-on-dark: #beff94 !important;
|
|
}
|
|
* {
|
|
font-family: 'Glacial';
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
html {
|
|
font-size: 10px;
|
|
background-color: #424242;
|
|
height: max-content;
|
|
width: max-content;
|
|
height: -moz-fit-content;
|
|
width: -moz-fit-content;
|
|
}
|
|
body {
|
|
padding: 2.5rem;
|
|
background-color: #424242;
|
|
height: max-content;
|
|
width: max-content;
|
|
height: -moz-fit-content;
|
|
width: -moz-fit-content;
|
|
max-width: 300px;
|
|
}
|
|
h5 {
|
|
color: var(--mdc-theme-primary);
|
|
font-size: 2rem;
|
|
letter-spacing: 0.5rem;
|
|
font-weight: 300;
|
|
}
|
|
p {
|
|
color: white;
|
|
font-size: 1.4rem;
|
|
max-width: 300px;
|
|
margin: 1.5rem 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
}
|
|
.mdc-button {
|
|
font-size: 1.2rem !important;
|
|
}
|
|
#clear-button {
|
|
width: 100%;
|
|
}
|
|
#divider {
|
|
height: 1px;
|
|
background: #555555;
|
|
position: relative;
|
|
margin: 2rem 0;
|
|
}
|
|
#divider::before {
|
|
content: attr(data-title);
|
|
color: white;
|
|
position: absolute;
|
|
background: #424242;
|
|
padding-right: 2rem;
|
|
top: -0.5rem;
|
|
letter-spacing: 4px;
|
|
font-size: 1.2rem;
|
|
}
|
|
.switch-container {
|
|
width: 100%;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
.switch-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.mdc-switch__track {
|
|
background-color: var(--mdc-theme-primary) !important;
|
|
border-color: var(--mdc-theme-primary) !important;
|
|
}
|
|
.mdc-switch__thumb {
|
|
background-color: var(--mdc-theme-primary) !important;
|
|
border-color: var(--mdc-theme-primary) !important;
|
|
}
|
|
.label-container {
|
|
margin-left: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.label-container label {
|
|
font-size: 1.5rem;
|
|
color: var(--mdc-theme-primary);
|
|
text-transform: uppercase;
|
|
}
|
|
.label-container span {
|
|
font-size: 1.2rem;
|
|
margin: 0.25rem 0;
|
|
color: var(--mdc-theme-text-hint-on-dark);
|
|
}
|
|
.label-container div {
|
|
font-size: 1.2rem;
|
|
margin: 0.25rem 0;
|
|
color: var(--mdc-theme-text-hint-on-dark);
|
|
}
|
|
</style>
|
|
<link href="mdc.css" rel="stylesheet" />
|
|
<link href="mdc-icon.css" rel="stylesheet" />
|
|
<script src="mdc.js"></script>
|
|
</head>
|
|
<body>
|
|
<script src="popup.js"></script>
|
|
|
|
<h5 data-font="sans-bold">WATCH PARTY</h5>
|
|
<p>To use Watch Party, head on over to any supported website.</p>
|
|
<div data-title="LINKS" id="divider"></div>
|
|
<a class="mdc-button" target="_blank" href="https://www.chromewatchparty.com/welcome">
|
|
<div class="mdc-button__ripple"></div>
|
|
<i class="material-icons mdc-button__icon" aria-hidden="true">school</i>
|
|
<span class="mdc-button__label">HOW TO GET STARTED</span>
|
|
</a>
|
|
|
|
<a class="mdc-button" target="_blank" href="https://www.chromewatchparty.com/welcome#tips">
|
|
<div class="mdc-button__ripple"></div>
|
|
<i class="material-icons mdc-button__icon" aria-hidden="true">support</i>
|
|
<span class="mdc-button__label">FAQ</span>
|
|
</a>
|
|
|
|
<a
|
|
class="mdc-button"
|
|
target="_blank"
|
|
href="mailto:admin@chromewatchparty.com?subject=User Feedback"
|
|
>
|
|
<div class="mdc-button__ripple"></div>
|
|
<i class="material-icons mdc-button__icon" aria-hidden="true">question_answer</i>
|
|
<span class="mdc-button__label">Feedback</span>
|
|
</a>
|
|
|
|
<a class="mdc-button" target="_blank" href="https://www.chromewatchparty.com/donate">
|
|
<div class="mdc-button__ripple"></div>
|
|
<i class="material-icons mdc-button__icon" aria-hidden="true">attach_money</i>
|
|
<span class="mdc-button__label">Donate</span>
|
|
</a>
|
|
<div data-title="ACTIONS" id="divider"></div>
|
|
|
|
<div class="switch-container">
|
|
<div class="switch-wrapper">
|
|
<div class="mdc-switch" id="show-toggle">
|
|
<div class="mdc-switch__track"></div>
|
|
<div class="mdc-switch__thumb-underlay">
|
|
<div class="mdc-switch__thumb"></div>
|
|
<input
|
|
type="checkbox"
|
|
id="show-switch"
|
|
class="mdc-switch__native-control"
|
|
role="switch"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="label-container">
|
|
<label for="show-switch">Show / hide Watch Party button</label>
|
|
<span>Currently showing Watch Party button</span>
|
|
<div>Refresh page after changing show/hide status.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="switch-container">
|
|
<div class="switch-wrapper">
|
|
<div class="mdc-switch" id="changelog-toggle">
|
|
<div class="mdc-switch__track"></div>
|
|
<div class="mdc-switch__thumb-underlay">
|
|
<div class="mdc-switch__thumb"></div>
|
|
<input
|
|
type="checkbox"
|
|
id="changelog-switch"
|
|
class="mdc-switch__native-control"
|
|
role="switch"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="label-container">
|
|
<label for="changelog-switch">Open changelog on update</label>
|
|
<span>Will open changelog on Watch Party update</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="clear-button" class="mdc-button mdc-button--raised">
|
|
<div class="mdc-button__ripple"></div>
|
|
<span class="mdc-button__label">Forget Party Names & Pins</span>
|
|
</button>
|
|
</body>
|
|
</html>
|