<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    
    <!-- SEO Meta Tags -->
    <title>QR Code Generator: Free, Customizable and with LOGO</title>
    <link rel="canonical" href="https://dokqr.io" />
    <meta name="description" content="Generate different types of QR codes online, including URLs, bank transfers (TWQR), cryptocurrencies, geographical coordinates, SMS, etc. Customize the size, color, rounded corners, and add images or LOGO. It also allows you to scan QR codes. Try it now!">
    <meta name="keywords" content="DokQr, QR Code Generator, QR Code Reader, QR, QR Code, Two-dimensional barcode generator, Generator, QR code generator, Two-dimensional barcodes, Create QR code, Two-dimensional code generator, QR code generator">
    <meta name="author" content="Dokstack">

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="QR Code Generator: Free, Customizable and with LOGO">
    <meta property="og:description" content="Generate different types of QR codes online...">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://dokqr.io">
    <meta property="og:image" content="doklogo.png">

    <!-- Schema.org -->
    <script type="application/ld+json">
      {
          "@context": "http://schema.org",
          "@type": "WebSite",
          "name": "QR Code Generator: Free, Customizable and with LOGO",
          "url": "https://dokqr.io",
          "description": "Generate different types of QR codes online....",
          "image": "doklogo.png"
      }
  </script>

    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=AA-1234567-8"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'AA-1234567-8');
    </script>

    <!-- Alternativas de Idioma -->
    <link rel="alternate" href="https://dokqr.io" hreflang="x-default" />
    <link rel="alternate" href="https://dokqr.io" hreflang="en" />
    <link rel="alternate" href="https://dokqr.io/en/" hreflang="en" />
    <link rel="alternate" href="https://dokqr.io/pt-br/" hreflang="pt-br" />

    <!-- Favicon e Ícones -->
    <link rel="icon" href="favicon.png">
    <link rel="shortcut icon" type="image/png" href="doklogo.png">
    <link rel="apple-touch-icon-precomposed" type="image/png" href="doklogo.png">

    <!-- Estilos CSS -->
    <link rel="stylesheet" href="styles.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="coloris.css"/>

    <!-- Scripts Principais -->
    <script src="jquery-3.6.0.min.js"></script>
    <script src="jquery-ui-1.13.1.custom.min.js"></script>
    <script src="qr-code-styling.min.js"></script>
    <script src="scripts.min.js"></script>
    <script src="jquery.fontselect.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="coloris.js"></script>


    <!-- Google Funding Choices -->
    <script async 
        src="https://fundingchoicesmessages.google.com/i/pub-2428072621366113?ers=1" 
        nonce="dJtiTwLiih5okxFPwmemLQ">
    </script>
    <script nonce="dJtiTwLiih5okxFPwmemLQ">
        (function() {
            function signalGooglefcPresent() {
                if (!window.frames['googlefcPresent']) {
                    if (document.body) {
                        const iframe = document.createElement('iframe');
                        iframe.style = 'width: 0; height: 0; border: none; z-index: -1000; left: -1000px; top: -1000px;';
                        iframe.style.display = 'none';
                        iframe.name = 'googlefcPresent';
                        document.body.appendChild(iframe);
                    } else {
                        setTimeout(signalGooglefcPresent, 0);
                    }
                }
            }
            signalGooglefcPresent();
        })();
    </script>
</head>

<body>
    <div id="loading-screen" class="loading-screen">
        <div class="loader"></div>
        <div class="loading-text">Loading...</div>
    </div>
    <div id="mobile-warning" style="display: none;" class="mobile-warning">
        Sorry, at the moment this application only works on desktop.
    </div>
    <!-- Versão e Toggle Panel -->
    <div id="version" data-version="In Development v1.3.5"></div>
    <div id="togglepanel"></div>

<div class="fullscreen-root flex flex-rows justify-content-center full-view-height">
    <!-- Barra de Ferramentas Principal -->
    <div class="toolbar flex bg-darker">
        <!-- Menu Esquerdo -->
        <nav class="menu flex flex-1 flex-columns justify-content-start" id="menubar">
            <!-- Logo -->
            <img src="doklogo.png" class="toolbar-logo" alt="DokQR Logo">
            <!-- Menu Principal -->
            <div class="toolbar-menu-item">
                <a href="#">File</a>
            </div>
            <div class="toolbar-menu-item">
                <a href="#/about">About</a>
            </div>
            <!-- <div class="toolbar-menu-item qrscan">
                <a>Ler Código QR</a>
            </div> -->
            
            <!-- Nome do Arquivo -->
            <label class="menu padding-1 center-content" for="filename"></label>
            <div class="input-container">
                <input id="filename" class="input-filename" type="text" placeholder="File name...">
                <svg class="edit-icon" xmlns="http://www.w3.org/2000/svg"
                     width="24" height="24" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="bi bi-pencil">
                    <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>
                </svg>
            </div>



            <!-- <button id="randomize-button" data-v-f36e7272="" class="icon-button" aria-label="Randomize style">
                <svg data-v-f36e7272="" xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 640 512">
                    <path data-v-f36e7272="" fill="currentColor" d="M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8l138.8 138.8c28.1 28.1 73.7 28.1 101.8 0l138.8-138.8c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0a24 24 0 1 1-48 0zM96 200a24 24 0 1 1 0 48a24 24 0 1 1 0-48zm128 176a24 24 0 1 1 0-48a24 24 0 1 1 0 48zm128-176a24 24 0 1 1 0 48a24 24 0 1 1 0-48zm-128-80a24 24 0 1 1 0-48a24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64h192c35.3 0 64-28.7 64-64V256c0-35.3-28.7-64-64-64H461.7c11.6 36 3.1 77-25.4 105.5L320 413.8V448zm160-120a24 24 0 1 1 0 48a24 24 0 1 1 0-48z">
                    </path>
                </svg>
            </button> -->



            <!-- Botão de Copiar -->
            <div class="toolbar-share-btn">
                <a id="copy" onclick="copyQRCode()">
                    <svg class="toolbar-icon-copy" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bi bi-copy">
                        <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
                        <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
                    </svg>
                </a>
            </div>
                <!-- Notificação -->
    <div id="notification" class="notification hidden">
        <span class="notification-icon"></span>
        <span class="notification-message"></span>
    </div>










<!-- Botão de Download -->
<div id="download" class="button height-100p">
    <svg class="toolbar-icon-download" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
        <polyline points="7 10 12 15 17 10"/>
        <line x1="12" x2="12" y1="15" y2="3"/>
    </svg>
    Download
</div>



            <!-- Formato do Arquivo -->
            <div class="fileformat">
                <div class="input-container">
                    <select id="filetype" class="custom-select height-41">
                        <option value="png" disabled hidden selected>PNG</option>
                        <option value="png">PNG</option>
                        <option value="jpeg">JPEG</option>
                        <option value="webp">WEBP</option>
                        <option value="svg">SVG</option>
                    </select>
                    <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 174.38">
                        <path class="cls-1" d="M310.68,9.38c-12.5-12.5-32.8-12.5-45.3,0h0l-97.8,97.8c-4.2,4.2-10.9,4.2-15.1,0L54.68,9.38C42.18-3.12,21.88-3.12,9.38,9.38s-12.5,32.8,0,45.3l97.8,97.8c29.2,29.2,76.4,29.2,105.6,0h0l97.8-97.8c12.5-12.5,12.6-32.7.1-45.2h-.1l.1-.1Z"/>
                    </svg>
                </div>
            </div>





            
        </nav>
    </div>
</div>






<div class="propsPanel bg-primary left">
    <div class="scrollContainer padding-1 flex flex-rows">
        <!-- Painel de Controle -->
        <div class="control left">
            <label class="labelRight text-center">Choose the QR Code Type</label>
            <hr>
            <div class="icon-menu">
                <div class="icon-option" onclick="openForm('iurl')">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bi bi-link">
                        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
                        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
                    </svg>
                    <span>URL</span>
                </div>
                <!-- <div class="icon-option" onclick="openForm('imap')">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bi bi-earth">
                        <path d="M21.54 15H17a2 2 0 0 0-2 2v4.54"/>
                        <path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"/>
                        <path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05"/>
                        <circle cx="12" cy="12" r="10"/>
                    </svg>
                    <span>Coordinates</span>
                </div> -->
                <div class="icon-option" onclick="openForm('icon')">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bi bi-id-card">
                        <path d="M16 10h2"/>
                        <path d="M16 14h2"/>
                        <path d="M6.17 15a3 3 0 0 1 5.66 0"/>
                        <circle cx="9" cy="11" r="2"/>
                        <rect x="2" y="5" width="20" height="14" rx="2"/>
                    </svg>
                    <span>Card</span>
                </div>
                <div class="icon-option" onclick="openForm('ical')">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bi bi-calendar-days">
                        <path d="M8 2v4"/>
                        <path d="M16 2v4"/>
                        <rect width="18" height="18" x="3" y="4" rx="2"/>
                        <path d="M3 10h18"/><path d="M8 14h.01"/>
                        <path d="M12 14h.01"/><path d="M16 14h.01"/>
                        <path d="M8 18h.01"/>
                        <path d="M12 18h.01"/>
                        <path d="M16 18h.01"/>
                    </svg>
                    <span>Calendar</span>
                </div>
                <div class="icon-option" onclick="openForm('iwifi')">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bi bi-wifi">
                        <path d="M12 20h.01"/>
                        <path d="M2 8.82a15 15 0 0 1 20 0"/>
                        <path d="M5 12.859a10 10 0 0 1 14 0"/>
                        <path d="M8.5 16.429a5 5 0 0 1 7 0"/>
                    </svg>
                    <span>Wi-Fi</span>
                </div>
                <div class="icon-option" onclick="openForm('icryp')">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bi bi-bitcoin">
                        <path d="M11.767 19.089c4.924.868 6.14-6.025 1.216-6.894m-1.216 6.894L5.86 18.047m5.908 1.042-.347 1.97m1.563-8.864c4.924.869 6.14-6.025 1.215-6.893m-1.215 6.893-3.94-.694m5.155-6.2L8.29 4.26m5.908 1.042.348-1.97M7.48 20.364l3.126-17.727"/>
                    </svg>
                    <span>Crypto</span>
                </div>
                <div class="icon-option" onclick="openForm('isms')">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bi bi-message-square-more">
                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                        <path d="M8 10h.01"/>
                        <path d="M12 10h.01"/>
                        <path d="M16 10h.01"/>
                    </svg>
                    <span>Send SMS</span>
                </div>
                <div class="icon-option" onclick="openForm('ipn')">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bi bi-phone-call">
                        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                        <path d="M14.05 2a9 9 0 0 1 8 7.94"/>
                        <path d="M14.05 6A5 5 0 0 1 18 10"/>
                    </svg>
                    <span>Make a call</span>
                </div>
                <div class="icon-option" onclick="openForm('iraw')">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bi bi-letter-text">
                        <path d="M15 12h6"/>
                        <path d="M15 6h6"/>
                        <path d="m3 13 3.553-7.724a.5.5 0 0 1 .894 0L11 13"/>
                        <path d="M3 18h18"/>
                        <path d="M4 11h6"/>
                    </svg>
                    <span>Plain Text</span>
                </div>
            </div>
            <hr>

            <div id="iurl" class="qrform" style="display:none;">
                <div class="form-group labelRight">
                    <label for="url">URL</label>
                    <textarea id="url" class="full-width" placeholder="Adicione o prefixo à URL, por exemplo: https://dokqr.io"></textarea>
                </div>
            </div>

            <div id="imap" class="qrform" style="display:none;">
                <div id="map-canvas"></div>
                <span class="grid">
                    <div class="form-group labelRight">
                        <label for="lat">Latitude</label>
                        <input type="text" id="lat" class="full-width" placeholder="Digite a Latitude">
                    </div>
                    <div class="form-group labelRight">
                        <label for="lng">Longitude</label>
                        <input type="text" id="lng" class="full-width" placeholder="Digite a Longitude">
                    </div>
                    <div class="form-group labelRight">
                        <label for="zoom">Nível de Zoom do Mapa</label>
                        <input id="zoom" type="number" class="full-width" placeholder="Defina o Nível de Zoom">
                    </div>
                </span>
            </div>

            <div id="icon" class="qrform grid" style="display:none;">
                <div class="form-group labelRight">
                    <label for="lname">Sobrenome</label>
                    <input type="text" id="lname" class="full-width" placeholder="Sobrenome">
                </div>
                <div class="form-group labelRight">
                    <label for="name">Nome</label>
                    <input type="text" id="name" class="full-width" placeholder="Nome">
                </div>
                <div class="form-group labelRight">
                    <label for="org">Company Name</label>
                    <input id="org" type="text" class="full-width" placeholder="Company Name (optional)">
                </div>
                <div class="form-group labelRight">
                    <label for="mail">E-Mail</label>
                    <input id="mail" type="email" class="full-width" placeholder="E-Mail (optional)">
                </div>
                <div class="form-group labelRight">
                    <label for="cell">Cell Phone</label>
                    <input id="cell" type="tel" class="full-width" placeholder="Cell Phone (optional)">
                </div>
                <div class="form-group labelRight">
                    <label for="phone">Telephone</label>
                    <input id="phone" type="tel" class="full-width" placeholder="Telephone (optional)">
                </div>
                <div class="form-group labelRight">
                    <label for="fax">Fax</label>
                    <input id="fax" type="tel" class="full-width" placeholder="Fax Number (optional)">
                </div>
                <div class="form-group labelRight">
                    <label for="add">Address</label>
                    <input id="add" type="text" class="full-width" placeholder="Address (optional)">
                </div>
                <div class="form-group labelRight">
                    <label for="post">Postal Code</label>
                    <input id="post" type="number" class="full-width" placeholder="Postal Code (optional)">
                </div>
                <div class="form-group labelRight">
                    <label for="city">Parish/City/District</label>
                    <input id="city" type="text" class="full-width" placeholder="Parish/City/District (optional)">
                </div>
                <div class="form-group labelRight">
                    <label for="reg">County/Region</label>
                    <input id="reg" type="text" class="full-width" placeholder="County/Region (optional)">
                </div>
                <div class="form-group labelRight">
                    <label for="cou">Country</label>
                    <input id="cou" type="text" class="full-width" placeholder="Country (optional)">
                </div>
                <div class="form-group labelRight">
                    <label for="conurl">Website URL</label>
                    <input id="conurl" type="url" class="full-width" placeholder="http://seuwebsite.com (optional)">
                </div>
                <div class="form-group labelRight">
                    <label for="note">Observations</label>
                    <textarea id="note" class="full-width" placeholder="Observations (optional)"></textarea>
                </div>
            </div>

            <div id="ical" class="qrform grid">
                <div class="form-group labelRight">
                    <label for="eve">Event</label>
                    <input id="eve" type="text" class="full-width" placeholder="Event Name">
                </div>
                <div class="form-group labelRight">
                    <label for="dayopt">All Day Option</label>
                    <select id="dayopt" class="full-width">
                        <option value="allday">All Day</option>
                        <option value="sptime">Specific Time</option>
                    </select>
                </div>
                <div class="form-group labelRight">
                    <label for="sta">Start Date</label>
                    <input id="sta" type="date" class="full-width" value="2024-10-22">
                </div>
                <div class="form-group labelRight">
                    <label for="stat" class="ctime">Start Time</label>
                    <input id="stat" type="time" class="ctime full-width" value="08:00">
                </div>
                <div class="form-group labelRight">
                    <label for="end">End Date</label>
                    <input id="end" type="date" class="full-width" value="2024-10-22">
                </div>
                <div class="form-group labelRight">
                    <label for="endt" class="ctime">End Time</label>
                    <input id="endt" type="time" class="ctime full-width" value="09:00">
                </div>
                <div class="form-group labelRight">
                    <label for="loc">Location</label>
                    <input id="loc" type="text" class="full-width" placeholder="Location">
                </div>
                <div class="form-group labelRight">
                    <label for="des">Description</label>
                    <textarea id="des" class="full-width" placeholder="Event Content"></textarea>
                </div>
            </div>

            <div id="iwifi" class="qrform">
                <div class="form-group labelRight">
                    <label for="ssid">Wi-Fi Network Name</label>
                    <input id="ssid" type="text" class="full-width" placeholder="SSID">
                </div>
                <div class="form-group labelRight">
                    <label for="pw">Password</label>
                    <input id="pw" type="text" class="full-width" placeholder="Password">
                </div>
                <div class="form-group labelRight">
                    <label for="sypopt">Encryption Mode</label>
                    <select id="sypopt" class="full-width">
                        <option value="WPA">WPA / WPA2</option>
                        <option value="WEP">WEP</option>
                        <option value="nopass">Without Encryption</option>
                    </select>
                </div>
            </div>

            <div id="icryp" class="qrform">
                <div class="form-group labelRight">
                    <label for="cryptype">Type of Cryptocurrency</label>
                    <select id="cryptype" class="full-width">
                        <option value="bitcoin">Bitcoin (BTC)</option>
                        <option value="bitcoincash">Bitcoin Cash (BCH)</option>
                        <option value="ethereum">Ethereum (ETH)</option>
                        <option value="litecoin">Litecoin (LTC)</option>
                        <option value="dash">Dash (DASH)</option>
                        <option value="monero">Monero (XMR)</option>
                        <option value="dogecoin">Dogecoin (DOGE)</option>
                    </select>
                </div>
                <div class="form-group labelRight">
                    <label for="crypadd">Wallet Address</label>
                    <input id="crypadd" type="text" class="full-width" placeholder="Wallet Address">
                </div>
                <div class="form-group labelRight">
                    <label for="bitamount">Payment Amount</label>
                    <input id="bitamount" type="number" class="full-width" placeholder="Amount of Cryptocurrency (optional, to be filled in by the recipient)">
                </div>
                <div class="form-group labelRight">
                    <label for="bitlabel">Label Name</label>
                    <input id="bitlabel" type="text" class="full-width" placeholder="Label Name (optional)">
                </div>
                <div class="form-group labelRight">
                    <label for="bitmessage">Message Note</label>
                    <input id="bitmessage" type="text" class="full-width" placeholder="Message Note (optional, to be filled in by the recipient)">
                </div>
            </div>

            <div id="isms" class="qrform">
                <div class="form-group labelRight">
                    <label for="pn">Phone Number</label>
                    <input id="pn" type="tel" class="full-width" placeholder="Phone Number">
                </div>
                <div class="form-group labelRight">
                    <label for="sms">SMS Content</label>
                    <textarea id="sms" class="full-width" placeholder="SMS Content"></textarea>
                </div>
            </div>

            <div id="ipn" class="qrform">
                <div class="form-group labelRight">
                    <label for="ipnpn">Phone Number</label>
                    <input id="ipnpn" type="tel" class="full-width" placeholder="Phone Number">
                </div>
            </div>

            <div id="iraw" class="qrform">
                <div class="form-group labelRight">
                    <label for="rawtext">Raw Data</label>
                    <textarea id="rawtext" class="full-width" placeholder="Enter Raw Data"></textarea>
                </div>
            </div>
        </div>


        <div class="ad-container relative overflow-hidden p-2 rounded-md bg-gradient-to-r from-transparent via-blue-600 to-transparent"></div>
            <div class="ad-banner">
                <div class="bg-gray-800 rounded-md">
                    <div class="p-4 text-center">
                        <a target="_blank" data-umami-event="sponsor-stripe-19.99" class="text-sm text-gray-300 hover:text-blue-400 transition-colors" href="https://buy.stripe.com/dR66pt9DtgCeb0Q8ww">Sponsor this project and advertise here</a>
                        <span class="ad-tag absolute bottom-2 right-2 text-xs font-bold italic text-white bg-gray-600 border border-gray-400 rounded-md p-1">
                            Ad
                        </span>
                    </div>
                </div>
            </div>
        </div>






    </div>
</div>









<div class="propsPanel bg-primary right">
  <div class="scrollContainer padding-1 flex flex-rows right2">
    <div class="settingsGroup">
        <label class="labelRight">Error Correction Rate</label>
        <hr>
        <div class="error-correction-options">
            <label class="correction-option" data-value="L" onclick="selectErrorLevel(this, 'L');">
                <input type="radio" name="eclevel" value="L" style="display:none;">
                <span><i class="fas fa-signal" style="opacity: 0.25;"></i> Low (7%)</span>
            </label>
            <label class="correction-option" data-value="M" onclick="selectErrorLevel(this, 'M');">
                <input type="radio" name="eclevel" value="M" style="display:none;">
                <span><i class="fas fa-signal" style="opacity: 0.5;"></i> Medium (15%)</span>
            </label>
            <label class="correction-option" data-value="Q" onclick="selectErrorLevel(this, 'Q');">
                <input type="radio" name="eclevel" value="Q" style="display:none;">
                <span><i class="fas fa-signal" style="opacity: 0.75;"></i> Quarter (25%)</span>
            </label>
            <label class="correction-option" data-value="H" onclick="selectErrorLevel(this, 'H');">
                <input type="radio" name="eclevel" value="H" style="display:none;" checked>
                <span><i class="fas fa-signal" style="opacity: 1;"></i> High (30%)</span>
            </label>
        </div>
      
        <input type="hidden" id="eclevel" value="H"> <!-- Para a taxa de correção de erro -->
        <input type="hidden" id="quiet" value="1"> <!-- Para a borda -->

        <hr>
        <label class="labelRight">Border</label>
        <hr>
        <div class="border-options">
            <label class="border-option">
                <i class="fas fa-border-all icon-border"></i>
                <i class="fas fa-border-none icon-no-border" style="display: none;"></i>
                <input type="checkbox" id="quiet" value="1" onchange="handleBorderToggle(this)" checked>
                <span class="toggle-switch"></span>
            </label>
        </div>



        <hr>
            <!-- Toggle principal para Logo -->
            <label class="labelRight">Logo</label>
            <hr>
            <div class="logo-options">
                <label class="logo-option">
                    <i class="fas fa-image icon-logo"></i>
                    <i class="fas fa-image-slash icon-no-logo"></i>
                    <input type="checkbox" id="mode" onchange="handleLogoToggle(this)">
                    <span class="toggle-switch"></span>
                </label>
            </div>
        
            <!-- Opções de Logo (aparecem quando o toggle está ativo) -->
            <div id="logo-type-options" style="display: none;">
                <label class="labelRight">Logo Type:</label>
                <div class="logo-type-selector">
                    <label class="logo-type-option" onclick="selectLogoType('1')">
                        <input type="radio" name="logoType" value="1">
                        <i class="fas fa-font"></i>
                        <span>Text</span>
                    </label>
                    <label class="logo-type-option" onclick="selectLogoType('2')">
                        <input type="radio" name="logoType" value="2">
                        <i class="fas fa-file-image"></i>
                        <span>Image</span>
                    </label>
                </div>
        
        
                        <!-- Configurações específicas para Image Logo -->
                <div id="image-settings" style="display: none;">
                    <label for="image" class="custom-file-upload">
                        <i class="fas fa-upload"></i>
                        Upload Logo
                    </label>
                    <input id="image" type="file" accept="image/*">
                </div>
        
                
<!-- Configurações específicas para Text Logo -->
<div id="text-settings" style="display: none;">
    <label for="label" class="labelRight">Text</label>
    <input id="label" type="text" value="dokqr.io"> <!-- Este é o texto que será estilizado -->


    <div class="color-picker-container">
        <label for="fontcolor" class="labelRight">Font Color</label>
        <div class="color-picker-wrapper">
            <input type="text" class="coloris instance3" data-coloris id="fontcolor" value="#000000">
            <div class="color-preview"></div>
            <span class="color-value">#000000</span>
        </div>
    </div>
</div>
        
        
                <!-- Configurações comuns do Logo -->
                <div id="logo-settings" style="display: none;">
                    <label for="msize" class="labelRight">Logo Size:</label>
                    <input id="msize" type="range" value="20" min="10" max="50" step="1">
                    
                    <label for="mmargin" class="labelRight">Logo Margin:</label>
                    <input id="mmargin" type="range" value="10" min="0" max="50" step="1">
                    
                    <label for="hideDots" class="labelRight">Hide Points Under Logo</label>
                    <select id="hideDots">
                        <option value="true" selected="selected" class="labelRight">Hide</option>
                        <option value="false" class="labelRight">Show</option>
                    </select>
                </div>
            </div>


















    </div>

<hr>

<!-- Dentro da div scrollContainer -->
<div class="settingsGroup">
<div class="formGroup labelRight">
  <label>Patterns</label>
  <select id="dotsType" style="display: none;">
      <option value="square" selected="selected">Square (Main)</option>
      <option value="dots">Points</option>
      <option value="rounded">Rounded</option>
      <option value="classy">Classic</option>
      <option value="classy-rounded">Classic Rounded</option>
      <option value="extra-rounded">Extra Rounded</option>
  </select>

  <div class="dots-style-selector">
    <!-- Quadrado -->
    <div class="dots-option selected" data-type="square" onclick="document.getElementById('dotsType').value='square'; document.getElementById('dotsType').dispatchEvent(new Event('change'))">
        <svg viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <rect x="4" y="4" width="6" height="6"/>
            <rect x="14" y="4" width="6" height="10"/>
            <rect x="4" y="14" width="10" height="6"/>
            <rect x="14" y="14" width="6" height="6"/>
        </svg>
        <span>Square</span>
    </div>

    <!-- Pontos -->
    <div class="dots-option" data-type="dots" onclick="document.getElementById('dotsType').value='dots'; document.getElementById('dotsType').dispatchEvent(new Event('change'))">
        <svg viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <circle cx="7" cy="7" r="3"/>
            <circle cx="17" cy="7" r="3"/>
            <circle cx="7" cy="17" r="3"/>
            <circle cx="17" cy="17" r="3"/>
        </svg>
        <span>Points</span>
    </div>

    <!-- Arredondado -->
    <div class="dots-option" data-type="rounded" onclick="document.getElementById('dotsType').value='rounded'; document.getElementById('dotsType').dispatchEvent(new Event('change'))">
        <svg viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <rect x="4" y="4" width="6" height="6" rx="3"/>
            <rect x="14" y="4" width="6" height="15" rx="3"/>
            <rect x="4" y="14" width="15" height="6" rx="3"/>
            <rect x="14" y="14" width="6" height="6" rx="3"/>
        </svg>
        <span>Rounded</span>
    </div>

    <!-- Clássico -->
    <div class="dots-option" data-type="classy" onclick="document.getElementById('dotsType').value='classy'; document.getElementById('dotsType').dispatchEvent(new Event('change'))">
        <svg viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <!-- Quadrado superior esquerdo -->
            <path d="M4 4 a2 2 0 0 1 2 -2 h4 v4 a2 2 0 0 1 -2 2 h-4 v-4 z"/>
            
            <!-- Quadrado superior direito -->
            <path d="M14 4 a2 2 0 0 1 2 -2 h4 v9 a2 2 0 0 1 -2 2 h-4 v-4 z"/>
            
            <!-- Quadrado inferior esquerdo -->
            <path d="M4 14 a2 2 0 0 1 2 -2 h9 v4 a2 2 0 0 1 -2 2 h-9 v-4 z"/>
            
            <!-- Quadrado inferior direito -->
            <path d="M14 14 a4 4 0 0 1 4 -4 h2 v4 a4 4 0 0 1 -4 4 h-2 v-4 z"/>
        </svg>
        <span>Classic</span>
    </div>

    <!-- Clássico Arredondado -->
    <div class="dots-option" data-type="classy-rounded" onclick="document.getElementById('dotsType').value='classy-rounded'; document.getElementById('dotsType').dispatchEvent(new Event('change'))">
        <svg viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <!-- Quadrado superior esquerdo -->
            <path d="M4 4 a3.5 3.5 0 0 1 3.5 -3.5 h3 v3 a3.5 3.5 0 0 1 -3.5 3.5 h-3 v-3 z"/>
            
            <!-- Quadrado superior direito -->
            <path d="M14 4 a2 2 0 0 1 2 -2 h4 v9 a2 2 0 0 1 -2 2 h-4 v-4 z"/>
            
            <!-- Quadrado inferior esquerdo -->
            <path d="M4 14 a2 2 0 0 1 2 -2 h9 v4 a2 2 0 0 1 -2 2 h-9 v-4 z"/>
            
            <!-- Quadrado inferior direito -->
            <path d="M14 14 a6 6 0 0 1 6 -6 h0.3 v4 a6 6 0 0 1 -6 6 h-0.3 v-4 z"/>
        </svg>
        <span>Classic R</span>
    </div>

    <!-- Extra Arredondado -->
    <div class="dots-option" data-type="extra-rounded" onclick="document.getElementById('dotsType').value='extra-rounded'; document.getElementById('dotsType').dispatchEvent(new Event('change'))">
        <svg viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <rect x="4" y="4" width="6" height="6" rx="3"/>
            <rect x="14" y="4" width="6" height="15" rx="4"/>
            <rect x="4" y="14" width="15" height="6" rx="4"/>
        </svg>
        <span>Extra R</span>
    </div>
</div>
</div>
</div>
<hr>
      
      
      <div class="settingsGroup">
        <div class="color-picker-container">
            <label for="cornerColor">Border Color</label>
            <div class="color-picker-wrapper">
                <input type="text" class="coloris instance3" data-coloris id="cornerColor" value="#000000">
                <div class="color-preview"></div>
                <span class="color-value">#000000</span>
            </div>
        </div>
          
        <label for="cornerStyle" class="labelRight">Corner Edge</label>
        <div class="corner-style-selector">
            <div class="corner-option" data-value="square" onclick="toggleCornerOption(this, 'square')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="4" y="4" width="16" height="16"/>
                </svg>
                <span>Square</span>
            </div>
            
            <div class="corner-option" data-value="dot" onclick="toggleCornerOption(this, 'dot')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="8"/>
                </svg>
                <span>Points</span>
            </div>
            
            <div class="corner-option" data-value="extra-rounded" onclick="toggleCornerOption(this, 'extra-rounded')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="4" y="4" width="16" height="16" rx="6"/>
                </svg>
                <span>Rounded</span>
            </div>
        </div>
        <select id="cornerStyle" style="display: none;">
            <option value="square">Square (Main)</option>
            <option value="dot">Points</option>
            <option value="extra-rounded">Extra Rounded</option>
        </select>
    </div>
      <hr>
      
      <div class="settingsGroup">
      <div class="color-picker-container">
        <label for="dotColor" class="labelRight">Points Color</label>
        <div class="color-picker-wrapper">
            <input type="text" id="dotColor" class="coloris instance3" data-coloris value="#000000">
            <div class="color-preview"></div>
            <span class="color-value">#000000</span>
        </div>
    </div>
      
      <label for="dotStyle" class="labelRight">Corner point style</label>
      <div class="dot-style-selector">
          <div class="dot-option" onclick="toggleDotStyle(this, 'square')">
              <svg viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2">
                  <rect x="4" y="4" width="16" height="16"/>
              </svg>
              <span>Square</span>
          </div>
          
          <div class="dot-option" onclick="toggleDotStyle(this, 'dot')">
              <svg viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2">
                  <circle cx="12" cy="12" r="8"/>
              </svg>
              <span>Points</span>
          </div>
      </div>
      </div>



      <!-- Mantemos o select original, mas escondido -->
      <select id="dotStyle" style="display: none;">
          <option value="square" selected="selected">Square (Main)</option>
          <option value="dot">Points</option>
      </select>
      <hr>

      
  </div>
</div>






<div id="frame-container" style="position: relative; width: 100%; height: 100%;">
    <!-- O QR Code deve estar aqui -->
    <div id="container" class="draggable"></div>
</div>

<div id="optionpanel">
<ul>
<li id="option3"><a href="#" id="downloadicon" download="dokqr.io.png">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white" width="20px" height="20px">
<path d="M188.821,377.6c37.49,37.491,98.274,37.491,135.765,0.001c0,0,0.001-0.001,0.001-0.001l68.523-68.523   c12.712-12.278,13.064-32.536,0.786-45.248c-12.278-12.712-32.536-13.064-45.248-0.786c-0.267,0.257-0.529,0.52-0.786,0.786   l-59.371,59.349L288,32c0-17.673-14.327-32-32-32l0,0c-17.673,0-32,14.327-32,32l0.448,290.709l-58.901-58.901   c-12.712-12.278-32.97-11.926-45.248,0.786c-11.977,12.401-11.977,32.061,0,44.462L188.821,377.6z" />
<path d="M480,309.333c-17.673,0-32,14.327-32,32v97.941c-0.012,4.814-3.911,8.714-8.725,8.725H72.725   c-4.814-0.012-8.714-3.911-8.725-8.725v-97.941c0-17.673-14.327-32-32-32s-32,14.327-32,32v97.941   C0.047,479.42,32.58,511.953,72.725,512h366.549c40.146-0.047,72.678-32.58,72.725-72.725v-97.941   C512,323.66,497.673,309.333,480,309.333z" />
</svg></a>
</li>
<li id="option2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="20px" height="20px">
<path d="M19.5,0H4.5A4.505,4.505,0,0,0,0,4.5v15A4.505,4.505,0,0,0,4.5,24h15A4.505,4.505,0,0,0,24,19.5V4.5A4.505,4.505,0,0,0,19.5,0ZM4.5,3h15A1.5,1.5,0,0,1,21,4.5v15a1.492,1.492,0,0,1-.44,1.06l-8.732-8.732a4,4,0,0,0-5.656,0L3,15V4.5A1.5,1.5,0,0,1,4.5,3Z" /><circle cx="15.5" cy="7.5" r="2.5" /></svg>
</li>
<li id="option1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="20px" height="20px">
<path d="m22.327 18.422c.728 1.034 1.673 2.229 1.673 3.078a2.5 2.5 0 0 1 -5 0c0-.775.961-2.008 1.692-3.069a1 1 0 0 1 1.635-.009zm-.875-3.853-7.82 7.82a5.508 5.508 0 0 1 -7.778 0l-4.243-4.243a5.5 5.5 0 0 1 0-7.778l3.818-3.818-2.99-2.989a1.5 1.5 0 0 1 2.122-2.122l2.989 2.99 1.881-1.881a1.5 1.5 0 0 1 2.13-2.109l12 12a1.5 1.5 0 0 1 -2.109 2.13zm-2.123-2.119-7.779-7.779-1.879 1.879 3.89 3.889a1.5 1.5 0 0 1 -2.122 2.122l-3.889-3.89-3.818 3.818a2.5 2.5 0 0 0 0 3.536l4.243 4.243a2.5 2.5 0 0 0 3.536 0z" /></svg>
</svg>
</li>
</ul>
</div>

<div id="adsense">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2428072621366113" crossorigin="anonymous"></script>

<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2428072621366113" data-ad-slot="9465689655" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>








<div class="statusBar">
    <!-- Botão de menu à esquerda -->
        <a href="https://patreon.com/Dokstack?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink" target="_blank" class="btn-patreon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 42" class="logomark">
                <path fill="black" d="M36.975 12.392c0 .312.021.627-.004.937-.03.361-.082.722-.149 1.08a22.535 22.535 0 0 1-.331 1.512 8.59 8.59 0 0 1-.359 1.084c-.313.767-.66 1.518-1.117 2.21-.282.427-.57.849-.864 1.266a4.12 4.12 0 0 1-.37.431c-.225.238-.442.483-.686.695a13.5 13.5 0 0 1-1.123.905c-.356.25-.756.431-1.12.674-.404.268-.866.384-1.296.587-.384.18-.795.24-1.186.38-.498.18-1.021.222-1.531.331-.544.117-1.097.203-1.643.315-.449.09-.894.198-1.34.298-.254.056-.51.098-.756.173-.304.093-.6.214-.896.324-.201.072-.412.126-.604.219-.28.14-.544.315-.823.464-.457.242-.838.585-1.184.96-.292.32-.546.681-.8 1.036-.418.587-.706 1.244-.964 1.916-.254.657-.487 1.322-.725 1.986-.221.625-.43 1.252-.655 1.875a63.989 63.989 0 0 1-.618 1.615 13.447 13.447 0 0 1-1.12 2.215c-.331.531-.685 1.049-1.142 1.478-.366.343-.72.704-1.17.944-.446.24-.906.448-1.4.557a6.635 6.635 0 0 1-1.807.129c-.229-.012-.455-.075-.684-.117-.137-.026-.276-.047-.409-.089-.112-.035-.215-.097-.322-.151-.302-.147-.624-.264-.9-.448a8.802 8.802 0 0 1-.96-.776c-.554-.492-.97-1.103-1.342-1.74a13.04 13.04 0 0 1-.681-1.319c-.192-.436-.336-.893-.492-1.345a24.916 24.916 0 0 1-.34-1.063c-.092-.317-.165-.641-.243-.963-.073-.298-.15-.594-.212-.895-.112-.536-.215-1.073-.32-1.609a35.827 35.827 0 0 1-.133-.68c-.06-.34-.114-.681-.171-1.022-.044-.254-.092-.506-.13-.76-.044-.28-.08-.56-.124-.839-.036-.242-.078-.483-.112-.725-.032-.226-.06-.452-.089-.678a70.008 70.008 0 0 1-.094-.73c-.03-.236-.055-.471-.082-.707l-.096-.818c-.011-.098-.023-.193-.03-.291-.034-.401-.068-.804-.1-1.208a20.67 20.67 0 0 1-.05-.75c-.021-.39-.042-.777-.05-1.166A94.453 94.453 0 0 1 1 18.18c0-.378.002-.755.027-1.13.026-.392.08-.784.122-1.176.034-.312.064-.622.105-.934.023-.175.064-.348.1-.52.092-.432.176-.863.281-1.292.076-.31.181-.61.266-.916.157-.571.393-1.11.624-1.653.105-.25.235-.49.367-.725.186-.329.366-.66.576-.97.259-.378.533-.744.823-1.098a12.9 12.9 0 0 1 .873-.965c.24-.24.512-.448.77-.665.254-.212.501-.433.77-.624.412-.296.835-.576 1.263-.849.249-.158.514-.294.774-.434.405-.219.81-.44 1.22-.648.26-.13.527-.244.794-.354.683-.277 1.364-.557 2.055-.816.46-.17.932-.303 1.399-.452.24-.077.475-.161.717-.229.2-.056.402-.086.604-.133.22-.05.434-.119.656-.16.299-.059.603-.1.907-.147.34-.052.679-.105 1.02-.152.139-.019.283-.02.425-.03.47-.026.944-.054 1.414-.077.188-.01.382-.051.565-.019.443.08.889.017 1.332.05.428.03.853.076 1.278.127.306.038.608.103.914.15.268.04.535.065.802.107.215.035.43.081.645.128.46.103.919.196 1.374.317.404.11.797.275 1.204.37.469.113.899.332 1.351.479.462.149.86.424 1.3.608.515.217.96.546 1.418.858.347.238.685.492 1 .77.467.41.92.836 1.356 1.28.258.26.478.564.713.85.38.464.658.993.928 1.523.215.424.393.874.537 1.329.12.373.156.774.245 1.156.098.42.096.844.073 1.27l-.012.008z"></path>
            </svg>
            <span>Patreon</span>
        </a>
        
<hr>

<div class="center-content">
<label for="fill" class="labelRight">Color Qr</label>
<input type="text" class="coloris instance3" data-coloris id="fill" value="#000000">

<label for="background" class="labelRight">Bg Color</label>
<input type="text" class="coloris instance3" data-coloris id="background" value="#ffffff">


<label for="bcout" class="labelRight">Transparency</label>
<select id="bcout">
<option value="untransparent" class="labelRight">Opaque</option>
<option value="transparent" class="labelRight">Transparent</option>
</select>
<label for="size" class="labelRight">Size</label>
<input id="size" type="range" value="400" min="100" max="600" step="1">

<label for="minversion" class="labelRight">Density</label>
<input id="minversion" type="range" value="0" min="0" max="40" step="1">
</div>
<hr>

<!-- Badge version à direita -->
<a class="badge-version" href="https://dokse.itch.io/dokqr" target="_blank" rel="noreferrer noopener"></a>
</div>




<img id="img-buffer" src="doklogo.png">
<div id="guide" class="card draggable">
<h2>Operation Guide</h2>
<hr>
<p>Please enlarge the video to see the operating instructions <video width="100%" controls>
Step 1: On the panel <span class="bold">QR Code Content Input</span>, select the desired category from the menu <span class="bold">Choose QR Code Type</span>. Different categories will open different APPs after scanning.<br>
Step 2: Fill in the input box with the content of the category you have selected.<br>
Step 3: On the panel <span class="bold">QR Code Settings</span>, adjust the size, color, border and rounded corners of the QR code.<br>
Step 4: On the panel <span class="bold">LOGO Mode</span>, choose from the menu <span class="bold">Select LOGO Mode</span> if you want to display a LOGO or choose the LOGO style.<br>
Step 5: Adjust the size, position, color, font or upload an image, depending on the LOGO style selected.<br>
Step 6: Once the settings have been made, download the QR code image.</p>
<div class="button close">Close</div>
</div>
<div id="copyright" class="card draggable">
<h2>Copyright Information</h2>
<hr>
<p>No permission is required to use QR codes.<br> QR codes can therefore be used free of charge and without time restrictions.</p>
<div class="button close">Close</div>
</div>
<div id="aboutModal" class="modal">
    <div class="modal-content">
        <span class="close-button">&times;</span>
        <h2>About us</h2>
        <hr>
        <p>Powered By: Dokstack<br>
        <p>DokQR is a free* customizable QR code generator with LOGO that lets you generate various types of QR codes online, including URLs, bank accounts, cryptocurrencies, maps, SMS, etc.</p>
    </div>
</div>

<div id="switch_language" class="card draggable">
<h2>Change Language</h2>
<hr>
<p>
<a href="./en/">English</a><br>
<a href="./pt-br/">Portuguese (Brazil)</a><br>
</p>
<div class="button close">Close</div>
</div>

    <!-- Scripts de Inicialização -->
    <script src="html5-qrcode.min.EN.js"></script>
    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
    
    <!-- Scripts de Configuração -->
    <script>
        // Configuração da versão
        document.addEventListener('DOMContentLoaded', function() {
            // Captura o valor da versão
            const version = document.getElementById('version').getAttribute('data-version');
            // Insere a versão na badge
            document.querySelector('.badge-version').textContent = version;
        });

        // Configuração do Google Analytics para tipos de QR
        $(document).ready(function() {
            $('#type').change(function() {
                var selectedOption = $(this).find('option:selected').text();
                gtag('event', 'select_QR_type', {
                    'content_type': 'QR_code_type',
                    'item_id': $(this).val(),
                    'description': selectedOption
                });
            });
        });
    </script>

<script>
    function checkScreenSize() {
        if (window.innerWidth < 1170) { // Ajuste o valor conforme necessário
            document.getElementById('mobile-warning').style.display = 'flex'; // Usar flex para centralizar
        } else {
            document.getElementById('mobile-warning').style.display = 'none';
        }
    }

    window.addEventListener('resize', checkScreenSize);
    window.addEventListener('load', checkScreenSize); // Verifica o tamanho da tela ao carregar
</script>
<script>
    $(document).ready(function() {
        // Oculta a tela de loading após o carregamento completo da página
        $("#loading-screen").fadeOut(500); // Dura 500ms para desaparecer
    });
</script>
<script>
    function openForm(formId) {
        // Oculta todos os formulários
        const forms = document.querySelectorAll('.qrform');
        forms.forEach(form => form.style.display = 'none');

        // Mostra o formulário correspondente
        document.getElementById(formId).style.display = 'block';
    }
</script>
<script>
    Coloris({
        theme: 'pill',
        themeMode: 'dark',
        formatToggle: true,
        closeButton: false,
        clearButton: false,
        alpha: true,
        swatches: [
            '#264653',
            '#2a9d8f',
            '#e9c46a',
            'rgb(244,162,97)',
            '#e76f51',
            '#d62828',
            'navy',
            '#07b',
            '#0096c7',
            '#00b4d880',
            'rgba(0,119,182,0.8)'
        ]
    });
</script>
</body>
</html>



