password_generator.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="google-analytics">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Password generator</title>

    <meta name="description" content="Password generator - Website with math and IT tools">
    <meta name="keywords" content="Tools, Narzędzia, Password generator">
    <meta name="author" content="Bartek L">

    <link rel="stylesheet" href="/tools/css/style.css">

    <link rel="stylesheet" href="/tools/css/modules/bootstrap.min.css">
    <link rel="stylesheet" href="/tools/css/modules/bootstrap-icons/bootstrap-icons.min.css">

    <script src="/tools/js/theme.js"></script>

    <link rel="manifest" href="/tools/manifest.json">

    <link rel="shortcut icon" href="/tools/img/icons/icon.ico">
    <link rel="apple-touch-icon" href="/tools/img/icons/icon_x192.png">

    <!-- Standard browsers -->
    <meta name="theme-color" content="#0d6efd"/>
    <!-- iOS Safari -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- Windows Phone -->
    <meta name="msapplication-navbutton-color" content="#0d6efd">

    <meta name="google-site-verification">
</head>
<body class="px-3 pt-2">
    <div class="top-bar">
        <div class="float-start top-bar-buttons">
            <button class="top-bar-button" onclick="window.location.reload()">
                <i class="bi bi-arrow-clockwise"></i>
            </button>
            <a class="top-bar-button" href="/tools/">
                <i class="bi bi-house"></i>
            </a>
            <button class="top-bar-button" id="top-bar-share">
                <i class="bi bi-share-fill"></i>
            </button>
        </div>
        <div class="input-group top-bar-search-group">
            <span class="input-group-text top-bar-search-text"><i class="bi bi-search"></i></span>
            <input type="text" class="form-control top-bar-search" placeholder="Search">
        </div>
    </div>

    <h1 class="text-light-emphasis h2 text-center">
        <a href="/tools/" class="home-link">
            <span text-id="0">Tools</span>
            <i class="bi bi-tools"></i>
        </a>
    </h1>

    <h2 class="h3">
        <i class="bi bi-key-fill"></i>
        <span text-id="41">Password generator</span>
    </h2>

    <div id="tool-page">
        <div class="mb-2">
            <div class="input-group">
                <input type="text" class="form-control" id="password" readonly>
                <button class="btn btn-outline-secondary" id="generate">
                    <i class="bi bi-arrow-repeat"></i>
                </button>
                <button class="btn btn-outline-primary copy">
                    <i class="bi bi-clipboard"></i>
                </button>
            </div>
        </div>

        <div class="mb-2">
            <div class="form-floating">
                <input type="number" class="form-control" id="length" placeholder="Length" value="20">
                <label for="length" text-id="69">Length</label>
            </div>
        </div>

        <div class="mb-2">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="lowercase" checked>
                <label class="form-check-label" for="lowercase">a-z</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="uppercase">
                <label class="form-check-label" for="uppercase">A-Z</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="digits" checked>
                <label class="form-check-label" for="digits">0-9</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="other">
                <label class="form-check-label" for="other">!@#$%^&*</label>
            </div>
        </div>

        <div class="mb-2">
            <div class="form-floating">
                <input type="text" class="form-control" id="special" placeholder="Special characters">
                <label for="special" text-id="70">Special characters</label>
            </div>
        </div>
    </div>

    <button class="btn btn-primary py-2 dropdown-toggle d-flex align-items-center position-fixed bottom-0 end-0 m-2" id="theme-button" type="button" data-bs-toggle="dropdown" data-bs-target="theme-dropdown">
        
    </button>
    <ul class="dropdown-menu dropdown-menu-end shadow" id="theme-dropdown">
        <li>
            <button type="button" class="dropdown-item d-flex align-items-center theme-button" theme-value="auto">
                <i class="bi bi-circle-half me-2 opacity-75"></i>
                Auto
                <i class="bi bi-check2 ms-auto d-none"></i>
            </button>
        </li>
        <li>
            <button type="button" class="dropdown-item d-flex align-items-center theme-button" theme-value="light">
                <i class="bi bi-sun-fill me-2 opacity-75"></i>
                <span text-id="248">Light</span>
                <i class="bi bi-check2 ms-auto d-none"></i>
            </button>
        </li>
        <li>
            <button type="button" class="dropdown-item d-flex align-items-center theme-button" theme-value="dark">
                <i class="bi bi-moon-stars-fill me-2 opacity-75"></i>
                <span text-id="249">Dark</span>
                <i class="bi bi-check2 ms-auto d-none"></i>
            </button>
        </li>
    </ul>

    <div id="cookies-info"></div>

    <script src="/tools/js/topbar.js"></script>
    <script src="/tools/js/translate.js"></script>
    <script src="/tools/js/error.js"></script>
    
    <script src="/tools/js/modules/bootstrap.bundle.min.js"></script>
    
    <script src="/tools/js/password_generator.js"></script>

    <script>
        var reg;
        // Register the service worker
        if ('serviceWorker' in navigator) {
            // Wait for the 'load' event to not block other work
            window.addEventListener('load', async () => {
                // Try to register the service worker.
                try {
                    reg = await navigator.serviceWorker.register('/tools/sw.js');
                    console.log('Service worker registered! 😎', reg);
                } catch (err) {
                    console.log('😥 Service worker registration failed: ', err);
                }
            });
        }
    </script>
</body>
</html>