index.html

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            rel="icon"
            type="image/svg+xml"
            href="https://raw.githubusercontent.com/Luk4x/user-register-interface/main/public/favicon.ico"
        />
        <meta name="author" content="Lucas Maciel (luk4xm4ci3l@gmail.com)" />
        <meta
            name="keywords"
            content="HTML, CSS, Javascript, github, dom-to-image, imask, sweetalert, vanilla-tilt, sass, regex, vite, npm, nodejs, css buttons, ui ball loaders, gencard, cartão de crédito, rocketpay, rocketseat, explorer lab, luk4x"
        />
        <meta
            name="description"
            content="Inspirado no RocketPay, o GenCard simula um formulário de preenchimento de cartão de crédito, mas adicionalmente conta com validações extras, melhorias de layout e animação, e a opção de gerar e baixar a imagem do cartão preenchido."
        />
        <meta
            property="og:description"
            content="Inspirado no RocketPay, o GenCard simula um formulário de preenchimento de cartão de crédito, mas adicionalmente conta com validações extras, melhorias de layout e animação, e a opção de gerar e baixar a imagem do cartão preenchido."
        />
        <meta
            property="og:image"
            content="https://user-images.githubusercontent.com/86276393/199103798-06951c84-a20d-41f6-bf9b-33d421ecca01.png"
        />
        <meta property="og:title" content="GenCard" />
        <meta property="og:site_name" content="GenCard" />
        <meta property="og:locale" content="pt_BR" />
        <meta property="og:type" content="website" />
        <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=Inter:wght@300;400;600;700&display=swap"
            rel="stylesheet"
            crossorigin
        />
        <title>GenCard</title>
    </head>
    <body>
        <main id="app">
            <header>
                <img src="/card.png" alt="contactless icon" />
                <h1><span>Gen</span>Card</h1>
            </header>
            <section class="cc">
                <div class="cc-bg">
                    <svg
                        width="360"
                        height="230"
                        viewBox="0 0 360 230"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <mask
                            id="mask0_3_2547"
                            style="mask-type: alpha"
                            maskUnits="userSpaceOnUse"
                            x="0"
                            y="0"
                            width="360"
                            height="230"
                        >
                            <rect width="360" height="230" rx="15.4011" fill="#16084C" />
                        </mask>
                        <g mask="url(#mask0_3_2547)">
                            <g filter="url(#filter0_f_3_2547)">
                                <path
                                    d="M451.518 -135.506C473.881 -89.3531 414.166 -13.4917 318.142 33.9349C222.118 81.3615 126.147 82.3939 103.784 36.2409C81.4215 -9.91221 141.136 -85.7735 237.16 -133.2C333.184 -180.627 429.156 -181.659 451.518 -135.506Z"
                                    fill="#323238"
                                    style="transition: all 0.5s ease-in-out"
                                />
                            </g>
                            <g filter="url(#filter1_f_3_2547)">
                                <path
                                    d="M399.134 -169.756C421.497 -123.603 361.783 -47.742 265.758 -0.315356C169.734 47.1113 73.7629 48.1437 51.4003 1.99062C29.0377 -44.1624 88.7521 -120.024 184.776 -167.45C280.8 -214.877 376.772 -215.909 399.134 -169.756Z"
                                    fill="#323238"
                                    style="transition: all 0.5s ease-in-out"
                                />
                            </g>
                        </g>
                        <defs>
                            <filter
                                id="filter0_f_3_2547"
                                x="43.2629"
                                y="-225.286"
                                width="468.777"
                                height="351.306"
                                filterUnits="userSpaceOnUse"
                                color-interpolation-filters="sRGB"
                            >
                                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                <feBlend
                                    mode="normal"
                                    in="SourceGraphic"
                                    in2="BackgroundImageFix"
                                    result="shape"
                                />
                                <feGaussianBlur
                                    stdDeviation="27.9144"
                                    result="effect1_foregroundBlur_3_2547"
                                />
                            </filter>
                            <filter
                                id="filter1_f_3_2547"
                                x="-9.12087"
                                y="-259.536"
                                width="468.777"
                                height="351.306"
                                filterUnits="userSpaceOnUse"
                                color-interpolation-filters="sRGB"
                            >
                                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                <feBlend
                                    mode="normal"
                                    in="SourceGraphic"
                                    in2="BackgroundImageFix"
                                    result="shape"
                                />
                                <feGaussianBlur
                                    stdDeviation="27.9144"
                                    result="effect1_foregroundBlur_3_2547"
                                />
                            </filter>
                        </defs>
                    </svg>
                </div>
                <div class="cc-logo">
                    <span><img src="/cc-icon.svg" alt="ícone padrão de cartão" /></span>
                    <span
                        ><img src="/cc-default.svg" alt="ícone do cartão de crédito selecionado"
                    /></span>
                </div>
                <div class="cc-info">
                    <div class="cc-number">#### #### #### ####</div>
                    <div class="cc-holder">
                        <div class="label">Nome do titular</div>
                        <div class="value">Nome Completo</div>
                    </div>
                    <div class="cc-extra">
                        <div class="cc-expiration">
                            <div class="label">Expiração</div>
                            <div class="value">##/##</div>
                        </div>
                        <div class="cc-security">
                            <div class="label">CVC</div>
                            <div class="value">###</div>
                        </div>
                        <img src="/cc-chip.svg" alt="ícone de chip de cartão de crédito" />
                    </div>
                </div>
            </section>
            <form action="">
                <div class="input-wrapper">
                    <label for="card-number">Número do cartão</label>
                    <input id="card-number" required />
                </div>
                <div class="input-wrapper">
                    <label for="card-holder">Nome do titular</label>
                    <input id="card-holder" required />
                </div>
                <div class="flex">
                    <div class="input-wrapper">
                        <label for="expiration-date">Expiração</label>
                        <input id="expiration-date" required />
                    </div>

                    <div class="input-wrapper">
                        <label for="security-code">CVC</label>
                        <input id="security-code" required />
                    </div>
                </div>
                <button id="submitButton" disabled>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <p class="hideButtonElement">Gerar Cartão</p>
                    <img src="/arrowUp.png" alt="arrow up" />
                    <div class="waveform hideButtonElement">
                        <div class="waveform__bar"></div>
                        <div class="waveform__bar"></div>
                        <div class="waveform__bar"></div>
                        <div class="waveform__bar"></div>
                    </div>
                </button>
            </form>
        </main>
        <div class="orbit"></div>
        <ul class="squares">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <footer class="links">
            <ul class="links-list">
                <li>
                    <a
                        href="https://github.com/Luk4x"
                        target="_blank"
                        rel="external noopener noreferrer"
                    >
                        <img src="/github-logo.png" alt="github logo" />
                    </a>
                </li>
                <li>
                    <a
                        href="https://www.linkedin.com/in/lucasmacielf/"
                        target="_blank"
                        rel="external noopener noreferrer"
                    >
                        <img src="/linkedin-logo.png" alt="linkedIn logo" />
                    </a>
                </li>
                <li>
                    <a
                        href="https://www.instagram.com/lu_k4x/"
                        target="_blank"
                        rel="external noopener noreferrer"
                    >
                        <img src="/instagram-logo.png" alt="instagram logo" />
                    </a>
                </li>
                <li>
                    <a
                        href="https://wa.me/5522996112570?text=Yo,%20sinta-se%20livre%20para%20entrar%20em%20contato%20comigo."
                        target="_blank"
                        rel="external noopener noreferrer"
                    >
                        <img src="/whatsapp-logo.png" alt="whatsapp logo" />
                    </a>
                </li>
                <li>
                    <button
                        onclick="navigator.clipboard.writeText('Luk4x#5068')"
                        data-tooltip="Copiar"
                    >
                        <img src="/discord-logo.png" alt="discord logo" />
                    </button>
                </li>
                <li>
                    <a
                        href="https://t.me/lu_k4x"
                        target="_blank"
                        rel="external noopener noreferrer"
                    >
                        <img src="/telegram-logo.png" alt="telegram logo" />
                    </a>
                </li>
            </ul>
        </footer>
        <script type="module" src="/src/main.js"></script>
    </body>
</html>