xget-now/popup.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Xget for Chrome</title>
    <style>
      body {
        width: 380px;
        min-height: 280px;
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
      }

      .header {
        padding: 20px;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .header h1 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }

      .header .subtitle {
        margin: 5px 0 0 0;
        font-size: 12px;
        opacity: 0.8;
      }

      .content {
        padding: 20px;
      }

      .setting-group {
        margin-bottom: 20px;
      }

      .setting-group:last-child {
        margin-bottom: 0;
      }

      .setting-label {
        display: block;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 8px;
      }

      .toggle-switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
      }

      .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.2);
        transition: 0.3s;
        border-radius: 24px;
      }

      .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.3s;
        border-radius: 50%;
      }

      input:checked + .slider {
        background-color: #4caf50;
      }

      input:checked + .slider:before {
        transform: translateX(26px);
      }

      .domain-input {
        width: 100%;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.1);
        color: white;
        font-size: 14px;
        box-sizing: border-box;
      }

      .domain-input::placeholder {
        color: rgba(255, 255, 255, 0.6);
      }

      .domain-input:focus {
        outline: none;
        border-color: rgba(255, 255, 255, 0.4);
        background: rgba(255, 255, 255, 0.15);
      }

      .platforms {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 8px;
      }

      .platform-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.1);
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 13px;
      }

      .status {
        margin-top: 15px;
        padding: 10px;
        border-radius: 6px;
        font-size: 12px;
        text-align: center;
      }

      .status.success {
        background: rgba(76, 175, 80, 0.2);
        border: 1px solid rgba(76, 175, 80, 0.3);
      }

      .status.error {
        background: rgba(244, 67, 54, 0.2);
        border: 1px solid rgba(244, 67, 54, 0.3);
      }

      .mini-toggle {
        width: 32px;
        height: 16px;
      }

      .mini-toggle .slider {
        border-radius: 16px;
      }

      .mini-toggle .slider:before {
        height: 12px;
        width: 12px;
        left: 2px;
        bottom: 2px;
      }

      .mini-toggle input:checked + .slider:before {
        transform: translateX(16px);
      }

      .links {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .link-item {
        display: flex;
        align-items: center;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        text-decoration: none;
        color: white;
        transition: all 0.2s ease;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .link-item:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-1px);
      }

      .link-icon {
        margin-right: 10px;
        font-size: 16px;
      }

      .link-text {
        font-size: 13px;
        font-weight: 500;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>Xget for Chrome</h1>
      <div class="subtitle">Download Accelerator</div>
    </div>

    <div class="content">
      <div class="setting-group">
        <label class="setting-label">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            Enable Extension
            <label class="toggle-switch">
              <input type="checkbox" id="enabledToggle" />
              <span class="slider"></span>
            </label>
          </div>
        </label>
      </div>

      <div class="setting-group">
        <label class="setting-label" for="domainInput"
          >Xget Domain (Required)</label
        >
        <input
          type="text"
          id="domainInput"
          class="domain-input"
          placeholder="your-xget-domain.com"
        />
      </div>

      <div class="setting-group">
        <label class="setting-label">Enabled Platforms</label>
        <div class="platforms">
          <div class="platform-item">
            <span>GitHub</span>
            <label class="toggle-switch mini-toggle">
              <input type="checkbox" id="ghToggle" />
              <span class="slider"></span>
            </label>
          </div>
          <div class="platform-item">
            <span>GitLab</span>
            <label class="toggle-switch mini-toggle">
              <input type="checkbox" id="glToggle" />
              <span class="slider"></span>
            </label>
          </div>
          <div class="platform-item">
            <span>Hugging Face</span>
            <label class="toggle-switch mini-toggle">
              <input type="checkbox" id="hfToggle" />
              <span class="slider"></span>
            </label>
          </div>
        </div>
      </div>

      <div class="setting-group">
        <div class="links">
          <a
            href="https://github.com/xixu-me/Xget"
            target="_blank"
            class="link-item"
          >
            <span class="link-icon">🚀</span>
            <span class="link-text">Deploy Your Own Xget Service</span>
          </a>
          <a
            href="https://github.com/xixu-me/Xget-for-Chrome"
            target="_blank"
            class="link-item"
          >
            <span class="link-icon">📖</span>
            <span class="link-text">Source Code & Documentation</span>
          </a>
        </div>
      </div>

      <div id="status" class="status" style="display: none"></div>
    </div>

    <script src="popup.js"></script>
  </body>
</html>