watchparty/app/public/popup.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 
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 INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
------------------------------------------------------------------------->
<!DOCTYPE html>
<html>
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src *; style-src 'self' https://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'"
    />
    <style>
      :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;
      }
      .mdc-button {
        display: block;
        width: 100%;
        margin: 2.5px 0px;
      }
      body {
        background: var(--mdc-theme-text-secondary-on-light);
        padding: 15px;
      }
      #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%;
        align-items: center;
      }
      .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>
    <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>