{"id":574,"date":"2025-03-01T04:14:07","date_gmt":"2025-03-01T10:14:07","guid":{"rendered":"https:\/\/onetopsites.com\/?page_id=574"},"modified":"2025-03-01T05:11:20","modified_gmt":"2025-03-01T11:11:20","slug":"generador-qr","status":"publish","type":"page","link":"https:\/\/onetopsites.com\/index.php\/generador-qr\/","title":{"rendered":"Generador QR"},"content":{"rendered":"<p>[et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb background_color=\u00bb#212121&#8243; background_enable_pattern_style=\u00bbon\u00bb background_pattern_style=\u00bbcheckerboard\u00bb custom_padding=\u00bb17px||18px|||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb text_font=\u00bbPoppins||||||||\u00bb text_text_color=\u00bb#FFFFFF\u00bb background_color=\u00bbRGBA(255,255,255,0)\u00bb background_layout=\u00bbdark\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2 style=\"text-align: center;\">Generador simple de c\u00f3digos QR<\/h2>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb background_color=\u00bb#8324DB\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb use_background_color_gradient=\u00bbon\u00bb background_color_gradient_stops=\u00bb#071e26 0%|#07222d 99%\u00bb border_radii=\u00bbon|10px|10px|10px|10px\u00bb box_shadow_style=\u00bbpreset3&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_code _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0&#8243;]<\/p>\n<div class=\"qr-container\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"input-group\"><!-- [et_pb_line_break_holder] -->        <input type=\"text\" id=\"qr-text\" placeholder=\"Escribe tu texto o URL\"><!-- [et_pb_line_break_holder] -->        <button onclick=\"generateQR()\">Generar QR<\/button><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"select-group\"><!-- [et_pb_line_break_holder] -->        <label for=\"qr-color\">Color del QR:<\/label><!-- [et_pb_line_break_holder] -->        <select id=\"qr-color\"><!-- [et_pb_line_break_holder] --><option value=\"#000000\" selected>Negro<\/option><!-- [et_pb_line_break_holder] --><option value=\"#ff0000\">Rojo<\/option><!-- [et_pb_line_break_holder] --><option value=\"#007bff\">Azul<\/option><!-- [et_pb_line_break_holder] --><option value=\"#28a745\">Verde<\/option><!-- [et_pb_line_break_holder] --><option value=\"#ff00ff\">Rosa<\/option><!-- [et_pb_line_break_holder] --><option value=\"#ffa500\">Naranja<\/option><!-- [et_pb_line_break_holder] --><option value=\"#800080\">Morado<\/option><!-- [et_pb_line_break_holder] -->        <\/select><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <\/p>\n<div id=\"qr-code\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->    <button id=\"download-btn\" style=\"display:none;\" onclick=\"downloadQR()\">Descargar QR<\/button><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] -->.qr-container {<!-- [et_pb_line_break_holder] -->    text-align: center;<!-- [et_pb_line_break_holder] -->    padding: 20px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Campo de texto y bot\u00f3n *\/<!-- [et_pb_line_break_holder] -->.input-group {<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    justify-content: center;<!-- [et_pb_line_break_holder] -->    gap: 10px;<!-- [et_pb_line_break_holder] -->    margin-bottom: 15px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->input {<!-- [et_pb_line_break_holder] -->    width: 800px;<!-- [et_pb_line_break_holder] -->    max-width: 100%;<!-- [et_pb_line_break_holder] -->    padding: 12px;<!-- [et_pb_line_break_holder] -->    border: 2px solid #ccc;<!-- [et_pb_line_break_holder] -->    border-radius: 10px;<!-- [et_pb_line_break_holder] -->    font-size: 16px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Bot\u00f3n de generaci\u00f3n y descarga *\/<!-- [et_pb_line_break_holder] -->button {<!-- [et_pb_line_break_holder] -->    background: linear-gradient(45deg, #4B0082, #8A2BE2);<!-- [et_pb_line_break_holder] -->    color: white;<!-- [et_pb_line_break_holder] -->    padding: 12px 20px;<!-- [et_pb_line_break_holder] -->    font-size: 18px;<!-- [et_pb_line_break_holder] -->    border: none;<!-- [et_pb_line_break_holder] -->    border-radius: 10px;<!-- [et_pb_line_break_holder] -->    cursor: pointer;<!-- [et_pb_line_break_holder] -->    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);<!-- [et_pb_line_break_holder] -->    transition: 0.3s;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->button:hover {<!-- [et_pb_line_break_holder] -->    transform: scale(1.05);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Bot\u00f3n de descarga *\/<!-- [et_pb_line_break_holder] -->#download-btn {<!-- [et_pb_line_break_holder] -->    margin-top: 15px;<!-- [et_pb_line_break_holder] -->    display: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Lista desplegable *\/<!-- [et_pb_line_break_holder] -->.select-group {<!-- [et_pb_line_break_holder] -->    margin-bottom: 15px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->label {<!-- [et_pb_line_break_holder] -->    font-size: 16px;<!-- [et_pb_line_break_holder] -->    font-weight: bold;<!-- [et_pb_line_break_holder] -->    margin-right: 10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->select {<!-- [et_pb_line_break_holder] -->    padding: 10px;<!-- [et_pb_line_break_holder] -->    font-size: 16px;<!-- [et_pb_line_break_holder] -->    border-radius: 8px;<!-- [et_pb_line_break_holder] -->    border: 2px solid #ccc;<!-- [et_pb_line_break_holder] -->    cursor: pointer;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Dise\u00f1o responsivo *\/<!-- [et_pb_line_break_holder] -->@media (max-width: 1024px) {  \/* Tablets *\/<!-- [et_pb_line_break_holder] -->    input {<!-- [et_pb_line_break_holder] -->        width: 600px;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@media (max-width: 700px) {  \/* Celulares *\/<!-- [et_pb_line_break_holder] -->    .input-group {<!-- [et_pb_line_break_holder] -->        flex-direction: column;<!-- [et_pb_line_break_holder] -->        align-items: center;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    input {<!-- [et_pb_line_break_holder] -->        width: 400px;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    button {<!-- [et_pb_line_break_holder] -->        width: 100%;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#qr-code {<!-- [et_pb_line_break_holder] -->    margin-top: 20px;<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    justify-content: center;<!-- [et_pb_line_break_holder] -->    align-items: center;<!-- [et_pb_line_break_holder] -->    padding: 15px;<!-- [et_pb_line_break_holder] -->    border-radius: 20px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- Librer\u00eda para generar el QR --><!-- [et_pb_line_break_holder] --><script src=\"https:\/\/cdn.jsdelivr.net\/npm\/qr-code-styling\/lib\/qr-code-styling.min.js\"><\/script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->let qrCode = null;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function generateQR() {<!-- [et_pb_line_break_holder] -->    let qrText = document.getElementById(\"qr-text\").value;<!-- [et_pb_line_break_holder] -->    if (!qrText) {<!-- [et_pb_line_break_holder] -->        alert(\"Por favor, ingresa un texto o URL.\");<!-- [et_pb_line_break_holder] -->        return;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    let qrCodeDiv = document.getElementById(\"qr-code\");<!-- [et_pb_line_break_holder] -->    qrCodeDiv.innerHTML = \"\"; \/\/ Limpiar el QR anterior<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Obtener el color seleccionado<!-- [et_pb_line_break_holder] -->    let selectedColor = document.getElementById(\"qr-color\").value;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    qrCode = new QRCodeStyling({<!-- [et_pb_line_break_holder] -->        width: 400,  \/\/ Tama\u00f1o reducido a 600px<!-- [et_pb_line_break_holder] -->        height: 400, \/\/ Tama\u00f1o reducido a 600px<!-- [et_pb_line_break_holder] -->        type: \"png\",<!-- [et_pb_line_break_holder] -->        data: qrText,<!-- [et_pb_line_break_holder] -->        dotsOptions: { color: selectedColor, type: \"rounded\" },<!-- [et_pb_line_break_holder] -->        backgroundOptions: { color: \"#ffffff\" },<!-- [et_pb_line_break_holder] -->        cornersSquareOptions: { color: selectedColor, type: \"extra-rounded\" }<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    qrCode.append(qrCodeDiv);<!-- [et_pb_line_break_holder] -->    qrCodeDiv.style.border = `10px solid ${selectedColor}`;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Mostrar el bot\u00f3n de descarga<!-- [et_pb_line_break_holder] -->    document.getElementById(\"download-btn\").style.display = \"inline-block\";<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function downloadQR() {<!-- [et_pb_line_break_holder] -->    if (!qrCode) return;<!-- [et_pb_line_break_holder] -->    qrCode.download({ name: \"codigo_qr\", extension: \"png\" });<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Generador simple de c\u00f3digos QR<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-574","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/onetopsites.com\/index.php\/wp-json\/wp\/v2\/pages\/574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onetopsites.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onetopsites.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onetopsites.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onetopsites.com\/index.php\/wp-json\/wp\/v2\/comments?post=574"}],"version-history":[{"count":18,"href":"https:\/\/onetopsites.com\/index.php\/wp-json\/wp\/v2\/pages\/574\/revisions"}],"predecessor-version":[{"id":596,"href":"https:\/\/onetopsites.com\/index.php\/wp-json\/wp\/v2\/pages\/574\/revisions\/596"}],"wp:attachment":[{"href":"https:\/\/onetopsites.com\/index.php\/wp-json\/wp\/v2\/media?parent=574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}