backup-code-print-template.raw 1.41 KB
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Backup code</title>

    <style>
        .code-block {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 16px;
        }
        .code-row {
            margin: 0 6px 8px;
            display: flex;
            min-width: 130px;
        }
        .code {
            font: 400 16px / 20px Roboto Mono, "Helvetica Neue", monospace;
            margin-left: 6px;
        }
        input[type="checkbox"] {
            -webkit-appearance: none;
            appearance: none;
            background-color: #fff;
            margin: 0;
            font: inherit;
            color: currentColor;
            width: 1em;
            height: 1em;
            border: 0.1em solid currentColor;
            border-radius: 0.15em;
            transform: translateY(0em);
        }
    </style>
</head>

<body style="margin: 0">
    <div style="margin: 8px; max-width: 286px">
        <div style="border: #d0d7de solid 1px; border-radius:4px">
            <h3 style="padding: 16px 24px; margin: 0; font: 500 20px / 24px Roboto, 'Helvetica Neue', sans-serif; text-align: center">
                Backup codes
            </h3>
            <div class="code-block">
                ${codesBlock}
            </div>
        </div>
    </div>
</body>
</html>