Gamification, Theme Store, Checks Virtual Currency #94

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

faisalnjs merged 17 commits into main from beta

Jan 8, 2026

index.html

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -276,7 +276,7 @@ <h2 id="history-date"></h2>
  
        <img src="banner-transparent.png" alt="Virtual Clicker Banner">

        <span class="version" id="version-string"></span>

        <button data-modal-view="settings/code">Seat Code</button>

        <button data-modal-view="settings/theme">Theme</button>

        <button data-modal-view="store">Theme Store</button>

        <button data-modal-view="settings/keybinds">Keyboard Shortcuts</button>

        <button data-modal-view="settings/makeup">Make Up Clicks</button>

        <button data-modal-view="settings/reset">Reset</button>

    @@ -309,77 +309,6 @@ <h2 id="history-date"></h2>
  
            <div id="seat-grid"></div>

          </div>

        </div>

        <div data-modal-page="theme" data-page-title="Theme">

          <div id="theme-preview">

            <h1 class="text-placeholder">000</h1>

            <p class="text-placeholder">Question</p>

            <div class="control-placeholder"></div>

            <p class="text-placeholder">Answer</p>

            <div class="control-placeholder"></div>

            <div class="control-placeholder pill"></div>

          </div>

          <div id="theme-selector">

            <button data-modal-view="settings/theme/editor">Custom</button>

          </div>

          <div data-modal-actions>

            <button id="theme-reset">Reset</button>

            <button id="theme-apply">Apply</button>

          </div>

          <div data-modal-page="editor" data-page-title="Custom Theme">

            <div id="editor-preview">

              <h1 class="text-placeholder">000</h1>

              <p class="text-placeholder">Question</p>

              <div class="control-placeholder"></div>

              <p class="text-placeholder">Answer</p>

              <div class="control-placeholder"></div>

              <div class="control-placeholder pill"></div>

            </div>

            <div id="theme-editor">

              <label>

                Color Scheme

                <select name="color-scheme">

                  <option value="light">Light</option>

                  <option value="dark">Dark</option>

                </select>

              </label>

              <label>

                Text

                <div data-color-input="text-color"></div>

              </label>

              <label>

                Background

                <div data-color-input="background-color"></div>

              </label>

              <label>

                Surface

                <div data-color-input="surface-color"></div>

              </label>

              <label>

                Accent

                <div data-color-input="accent-color"></div>

              </label>

              <label>

                Accent Text

                <div data-color-input="accent-text-color"></div>

              </label>

              <label>

                Error

                <div data-color-input="error-color"></div>

              </label>

            </div>

            <label>

              Theme Code

              <input type="text" id="theme-code" />

            </label>

            <div data-modal-actions>

              <button data-suggest-theme>Suggest Theme</button>

            </div>

            <div data-modal-actions>

              <button id="editor-reset">Reset</button>

              <button id="editor-apply">Apply</button>

            </div>

          </div>

        </div>

        <div data-modal-page="keybinds" data-page-title="Keyboard Shortcuts">

          <p><kbd>Ctrl</kbd> + <kbd>Enter</kbd> Submit click</p>

          <p><kbd>Alt</kbd> + <kbd>1-9</kbd> Insert nth symbol</p>

    @@ -461,6 +390,82 @@ <h1 class="text-placeholder">000</h1>
  
          The Virtual Clicker is undergoing maintenance. Please try again later.

        </p>

      </dialog>

      <!-- Theme Store -->

      <dialog data-modal-page="store" data-page-title="Theme Store">

        <div data-modal-page="theme" data-page-title="Your Themes">

          <div id="theme-preview">

            <h1 class="text-placeholder">000</h1>

            <p class="text-placeholder">Question</p>

            <div class="control-placeholder"></div>

            <div class="control-placeholder"></div>

            <p class="text-placeholder">Answer</p>

            <div class="control-placeholder"></div>

            <div class="control-placeholder pill"></div>

          </div>

          <div id="theme-selector">

            <button data-modal-view="settings/store/editor">Custom</button>

          </div>

          <div data-modal-actions>

            <button id="theme-reset">Reset</button>

            <button id="theme-apply">Apply</button>

          </div>

        </div>

        <div data-modal-page="editor" data-page-title="Custom Theme">

          <div id="editor-preview">

            <h1 class="text-placeholder">000</h1>

            <p class="text-placeholder">Question</p>

            <div class="control-placeholder"></div>

            <div class="control-placeholder"></div>

            <p class="text-placeholder">Answer</p>

            <div class="control-placeholder"></div>

            <div class="control-placeholder pill"></div>

          </div>

          <div id="theme-editor">

            <label>

              Color Scheme

              <select name="color-scheme">

                <option value="light">Light</option>

                <option value="dark">Dark</option>

              </select>

            </label>

            <label>

              Text

              <div data-color-input="text-color"></div>

            </label>

            <label>

              Background

              <div data-color-input="background-color"></div>

            </label>

            <label>

              Surface

              <div data-color-input="surface-color"></div>

            </label>

            <label>

              Accent

              <div data-color-input="accent-color"></div>

            </label>

            <label>

              Accent Text

              <div data-color-input="accent-text-color"></div>

            </label>

            <label>

              Error

              <div data-color-input="error-color"></div>

            </label>

          </div>

          <label>

            Theme Code

            <input type="text" id="theme-code" />

          </label>

          <div data-modal-actions>

            <button data-suggest-theme>Suggest Theme</button>

          </div>

          <div data-modal-actions>

            <button id="editor-reset">Reset</button>

            <button id="editor-apply">Apply</button>

          </div>

        </div>

      </dialog>

      <dialog data-modal-page="menu" data-page-title="Virtual Clicker">

        <div class="menu-icons">

          <a href="https://check.vssfalcons.com/" tooltip="Virtual Checker">

public/store/backdrop/aeroplane.png

Sorry, something went wrong. Reload?