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

v1.6.4/version bump

Browse Source 
- hide/show button
- popup redesign
- start of tutorial
This commit is contained in:
ayushya
2020-08-26 18:19:01 -04:00
parent 51f191b794
commit 60758dc35a
13 changed files with 269 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/public/popup.html
+111 -54
View File
@@ -17,70 +17,127 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
content="default-src *; style-src 'self' https://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'"
/>
<style>
a {
display: table;
min-width: max-content;
text-align: center;
width: calc(100%-20px);
color: #c0f300;
margin: 10px auto;
padding: 5px 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
transition: all ease-out 0.3s;
cursor: pointer;
border-radius: 36px;
text-decoration: none;
outline: none;
:root {
--mdc-theme-primary: #c0f300 !important;
--mdc-theme-secondary: #000000 !important;
--mdc-theme-background: #c0f300 !important;
--mdc-theme-surface: #000000 !important;
--mdc-theme-on-primary: #000000 !important;
--mdc-theme-on-secondary: #c0f300 !important;
--mdc-theme-on-surface: #c0f300 !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: #c0f300 !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: #c0f300 !important;
}
p {
word-break: break-word;
max-width: fit-content;
border-bottom: 1px solid #888888;
padding-bottom: 20px;
color: white;
text-transform: uppercase;
letter-spacing: 1.5px;
text-align: center;
line-height: 1.5;
}
a:hover {
background-color: #c0f300;
color: black;
.mdc-button {
display: block;
width: 100%;
margin: 2.5px 0px;
}
body {
min-width: max-content;
padding: 5px 10px;
background: #424242;
background: var(--mdc-theme-text-secondary-on-light);
padding: 15px;
}
button {
padding: 7.5px 3px;
margin: 10px 0;
border-radius: 13px;
#clear-button {
width: max-content;
}
.mdc-switch {
--mdc-theme-secondary: #c0f300 !important;
--mdc-theme-surface: #ffffff !important;
margin: 10px 5px;
}
label {
color: var(--mdc-theme-text-primary-on-dark);
text-transform: uppercase;
}
.switch-container {
margin: 20px 0;
}
.switch-wrapper {
display: flex;
justify-content: center;
width: 100%;
background: #c0f300;
outline: none !important;
border: none;
cursor: pointer;
filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.7));
transition: all ease-in 0.3s;
align-items: center;
}
button:hover {
filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.7)) !important;
.switch-wrapper .label-container {
margin-left: 5px;
flex: 1;
}
.switch-wrapper .label-container span {
color: var(--mdc-theme-text-hint-on-dark);
}
</style>
<link
href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
rel="stylesheet"
/>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head>
<body>
<script src="popup.js"></script>
<p>
NOTHING TO DO HERE. GO TO A SUPPORTED WEBSITE, AND LOOK FOR WATCH PARTY IN THE BOTTOM RIGHT
CORNER OF YOUR SCREEN
</p>
<a target="_blank" href="https://www.chromewatchparty.com/welcome">HOW TO GET STARTED</a>
<a target="_blank" href="https://www.chromewatchparty.com/welcome/#tips">FAQ</a>
<a target="_blank" href="mailto:admin@chromewatchparty.com?subject=User Feedback">Feedback</a>
<a target="_blank" href="https://paypal.me/Ayushya">Donate</a>
<p style="width: 100%; max-width: 100%;"></p>
<button id="clear-button">Clear Party Names & Pins</button>
<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://paypal.me/Ayushya">
<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 class="switch-container">
<div class="switch-wrapper">
<div class="mdc-switch">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb"></div>
<input
type="checkbox"
id="another-basic-switch"
class="mdc-switch__native-control"
role="switch"
/>
</div>
</div>
<div class="label-container">
<label for="another-basic-switch">Show / hide Watch Party button</label>
<span>Currently showing Watch Party button</span>
</div>
</div>
<div style="width: 100%; display: block; color: var(--mdc-theme-text-hint-on-dark)">
Refresh page after changing show/hide status.
</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>