options.html

<!DOCTYPE html>
<html>

<head>
    <title>Leetcode-Mastery-Scheduler Options</title>
    <meta charset="utf-8">
    <link href="lib/bootstrap.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&family=JetBrains+Mono:wght@200&family=Noto+Sans+SC&family=PT+Mono&family=Press+Start+2P&family=Raleway&display=swap" rel="stylesheet">
    <style>
        .form-group {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .form-group label {
            flex: 0 1 auto;
            font-family: 'Raleway', sans-serif;
            margin-right: 1rem;
        }

        .form-group .form-control,
        .form-group .form-check-input {
            flex: 1;
            max-width: 70%;
        }

        .form-check {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .form-check label {
            flex: 0 1 auto;
            font-family: 'Raleway', sans-serif;
            margin-right: 1rem;
        }

        .form-check input {
            flex: 0 1 auto;
        }
    </style>
</head>

<body style="width: 500px; height: 900px; background-color:bisque;">
    <div class="container-sm m-0">

        <!-- header -->
        <div style="display: flex;">
            <div class="my-3 mx-0 px-0 text-center" style="flex: 1;">
                <img src="assets/logo2.png" style="width: 100px;" />
            </div>
            <div class="mt-4 py-3" style="flex: 2;">
                <h2 id="message" style="font-family: 'Press Start 2P', cursive;">Leetcode-Mastery-Scheduler Options</h2>
            </div>
        </div>

        <!-- Options Form -->
        <div class="multifont my-0 py-0 by-0" style="text-align: center;">
            
            <form id="optionsForm">
                <div class="form-group">
                    <label for="problemSorterSelect" class="form-label">Sort Problems By</label>
                    <select class="form-select form-control" id="problemSorterSelect" name="problemSorterSelect">
                        <!-- options.js should add sorter options to this select -->
                    </select>
                </div>

                <div class="form-check form-switch">
                    <label class="form-check-label" for="syncToggle">Enable Cloud Sync (⚠️experimental feature⚠️)</label>
                    <input class="form-check-input custom-switch" type="checkbox" id="syncToggle">
                </div>
                <div style="font-size: smaller; text-align: left;">
                    <small><b>p.s.</b> ⚠️For 2 or more devices to share the problem data, all of them should: 1.enable cloud sync, 2.login to chrome with the same user, 3.enable <a target="#" href="https://support.google.com/chrome/answer/185277?hl=en&co=GENIE.Platform%3DAndroid#zippy=%2Csign-in-turn-on-sync">chrome sync</a> ⚠️</small>
                </div>
                <div style="font-size: smaller; text-align: left;">
                    <small><b>p.s.s.</b> The feature does not have a robust concensus algorithm backing it up, but it should be able to cover normal use cases😎. Feel free to report bugs!</small>
                </div>
                <div style="font-size: smaller; text-align: left;">
                    <small><b>p.s.s.s.</b> I tried my best to align this option to the leftmost but I gave up eventually. That's why I only do backend in my real job😅.</small>
                </div>
                

                <button type="submit" class="btn btn-outline-warning custom-btn mt-5" style="font-family: 'Courier Prime', monospace;">Save</button>
            </form>

            <div id="feedbackMessage" class="alert alert-success mt-3" style="display: none; text-align: center;" role="alert">
                Options are successfully saved!
            </div>
        </div>

        <!-- footer -->
        <div class="text-center mb-3 mt-3"
            style="display: flex; align-items: center; justify-content: center; text-align: center; position:fixed; bottom: 0;">
            <iframe src="https://github.com/xiaohajiayou/Leetcode-Mastery-Scheduler"
                frameborder="0" scrolling="0" width="200" height="30" title="GitHub" loading="lazy" class="col-3 mb-0"></iframe>
            <a class="col-9 mb-0 ms-0" href="https://github.com/xiaohajiayou/Leetcode-Mastery-Scheduler" target="_blank">
                <button type="button" class="btn btn-outline-warning custom-btn"
                    style="font-size: smaller; font-family: 'Courier Prime', monospace;">Request new features / Report a
                    bug</button>
            </a>
        </div>
    </div>
    <script src="dist/options.js"></script>
    <script type="text/javascript" src="lib/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="lib/fontawesome.js"></script>
</body>

</html>