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 INTELLECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
------------------------------------------------------------------------->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      * {
        font-family: Roboto, sans-serif;
      }
      :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;
      }
      .mdc-button {
        display: block;
        width: 100%;
        margin: 2.5px 0px;
      }
      body {
        background: var(--mdc-theme-text-secondary-on-light);
        padding: 15px;
        width: -moz-fit-content;
      }
      #clear-button {
        font-size: 10px;
        letter-spacing: 2px;
      }
      .mdc-switch {
        --mdc-theme-secondary: #beff94 !important;
        --mdc-theme-surface: #ffffff !important;
        margin: 10px 5px;
      }
      .label-container > * {
        width: 100%;
        text-align: center;
        display: block;
      }
      label {
        color: var(--mdc-theme-text-primary-on-dark);
        text-transform: uppercase;
      }
      .switch-container {
        margin: 20px 0;
        min-width: max-content;
        min-width: -moz-max-content;
      }
      .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);
      }

      a.mdc-button {
        font-size: 10px;
        display: inline-flex;
        flex: 1;
        width: auto;
      }
      #divider {
        height: 1px;
        background: #555555;
        position: relative;
        margin: 15px 0;
      }
      #divider::before {
        content: attr(data-title);
        color: white;
        top: -8px;
        position: absolute;
        background-color: #2c2c2c;
        padding-right: 10px;
      }
    </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
      style="
        margin: 0;
        color: var(--mdc-theme-text-primary-on-dark);
        letter-spacing: 3px;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 10px;
      "
    >
      WATCH PARTY
    </h5>
    <p
      style="
        margin-top: 0;
        margin-bottom: 25px !important;
        display: block;
        color: var(--mdc-theme-on-error);
      "
    >
      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">
          <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);
          font-size: 12.5px;
          text-align: center;
        "
      >
        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>