Untitled
unknown
plain_text
8 months ago
27 kB
6
Indexable
Never
<!DOCTYPE html> <html> <head> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCk8l277dYSQpUs-4PZ4hVHaKuDCd2JGy4&libraries=places&language=es&callback=initAutocomplete" async defer></script> <style> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <style> body { font-family: Arial, sans-serif; background-color: #FFFFFF; } h2 { color: #232F3E; } label { display: block; margin-top: 10px; color: #232F3E; font-size: 20px; font-weight: bold; } input[type="text"], input[type="tel"], input[type="number"], select, button { width: 100%; padding: 12px 20px; display: inline-block; border: 2px solid #000; box-sizing: border-box; font-size: 19px; color: #232F3E; } .row { display: flex; justify-content: space-between; } .row > div, .row-full { width: 100%; } .half-row { display: flex; justify-content: space-between; } .half-row > div { width: 48%; } .button-pulse { background-color: #05B800; color: white; cursor: pointer; font-weight: bold; text-transform: uppercase; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); font-size: 30px; border: 2px solid #000; border-radius: 4px; animation: pulse 2s infinite; padding: 10px 0px; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.01); } 100% { transform: scale(1); } } button i { margin-right: 10px; } .form-container { padding: 20px; border-radius: 6px; max-width: 400px; margin: 0 auto; } .phone-container { display: flex; align-items: center; margin-bottom: 8px; } .phone-prefix { height: 2.8em; line-height: 1.4em; font-size: 19px; font-weight: bold; color: #FFFFFF; background-color: #05B800; padding: 12px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border: 2px solid #000; border-right: none; width: 70px; text-align: center; } .phone-input { height: 2.8em; flex: 1; border: 2px solid #000; border-left: none; padding: 12px 20px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .offer { position: relative; display: flex; background: white; align-items: center; margin-bottom: 20px; border: 1px solid #ccc; padding: 10px; border-radius: 5px; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); transition: background-color 0.3s; } .offer img { max-width: 60px; margin-right: 15px; } .offer-price-value { font-size: 25px; font-weight: bold; color: green; /* Prezzo e valuta in verde */ text-decoration: underline; } .offer-discount-value { color: red; font-size: 19px; display: block; /* Sconto su una nuova riga */ margin-top: 5px; } .offer.selected { background-color: #e0f7fa; } .pack-warranty { display: flex; align-items: start; /* Allinea in alto */ padding: 15px; margin-bottom: 20px; border: 2px solid #000; border: 3px dashed black; background-color: #fff9c4; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Aggiunta dell'ombra */ } .pack-warranty img { width: 40px; margin-right: 10px; /* Spazio tra l'icona e il contenuto */ } .pack-warranty .content { flex-grow: 1; } .pack-warranty .title { font-weight: bold; margin-bottom: 5px; } .pack-warranty .description { font-size: 14px; margin-bottom: 10px; /* Spazio prima del blocco prezzo */ } .pack-warranty .price-container { display: flex; align-items: center; justify-content: space-between; } .pack-warranty .price { display: flex; align-items: center; gap: 10px; /* Spazio tra prezzo vecchio e nuovo */ } .pack-warranty .old-price { text-decoration: line-through; color: red; font-size: 16px; } .pack-warranty .new-price { color: green; font-size: 18px; font-weight: bold; } .pack-warranty .add-button { background-color: #05B800; color: white; cursor: pointer; padding: 15px 16px; /* Aggiungi un po' di padding intorno al testo */ text-transform: uppercase; border: none; border-radius: 4px; font-weight: bold; font-size: 80%; width: auto; /* Imposta la larghezza automaticamente in base al contenuto */ white-space: nowrap; /* Impedisce al testo di andare a capo */ } .pack-shipping { display: flex; align-items: start; /* Allinea in alto */ padding: 15px; margin-bottom: 20px; border: 3px dashed black; /* Bordo a trattini arancione */ border-radius: 5px; background-color: #FFF9C4; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Aggiunta dell'ombra */ } .pack-shipping img { width: 40px; margin-right: 10px; /* Spazio tra l'icona e il contenuto */ } .pack-shipping .content { flex-grow: 1; } .pack-shipping .title { font-weight: bold; margin-bottom: 5px; } .pack-shipping .description { font-size: 14px; margin-bottom: 10px; /* Spazio prima del blocco prezzo */ } .pack-shipping .price-container { display: flex; align-items: center; justify-content: space-between; } .pack-shipping .price { display: flex; align-items: center; gap: 10px; /* Spazio tra prezzo vecchio e nuovo */ } .pack-shipping .old-price { text-decoration: line-through; color: red; font-size: 16px; } .pack-shipping .new-price { color: green; font-size: 18px; font-weight: bold; } .pack-shipping .add-button { background-color: #05B800; color: white; cursor: pointer; padding: 15px 16px; /* Aggiungi un po' di padding intorno al testo */ text-transform: uppercase; border: none; border-radius: 4px; font-weight: bold; font-size: 80%; width: auto; /* Imposta la larghezza automaticamente in base al contenuto */ white-space: nowrap; /* Impedisce al testo di andare a capo */ } select { -webkit-appearance: none; /* Rimuove lo stile predefinito nei browser WebKit */ -moz-appearance: none; /* Rimuove lo stile predefinito nei browser Mozilla */ appearance: none; /* Rimuove lo stile predefinito per i browser moderni */ background-color: white; /* Sfondo bianco */ border: 2px solid #000; /* Bordo nero */ padding: 12px 20px; /* Spaziatura interna */ font-size: 19px; /* Dimensione del testo */ border-radius: 4px; /* Angoli arrotondati */ cursor: pointer; /* Cambia il cursore a indicare che è cliccabile */ color: #232F3E; /* Colore del testo */ } select option[value=""][disabled] { color: gray; /* Sostituisci con il codice colore grigio che preferisci */ } /* Nascondere la freccia predefinita in Windows */ select::-ms-expand { display: none; } /* Rende l'icona del calendario in WebKit trasparente */ select::-webkit-calendar-picker-indicator { opacity: 0; } /* Media query per dispositivi mobili, se necessario */ @media (max-width: 600px) { select { padding: 8px 15px; /* Padding più piccolo per schermi più piccoli */ font-size: 19px; /* Dimensione del testo ridotta */ } } @media (max-width: 600px) { .form-container { max-width: 100%; } .phone-prefix { width: 60px; } .half-row > div { width: 100%; margin-bottom: 10px; } select { padding: 8px 15px; /* Padding più piccolo per schermi più piccoli */ font-size: 19px; /* Dimensione del testo ridotta */ } .select-container select { padding: 8px 15px; /* Padding più piccolo per schermi più piccoli */ padding-right: 25px; /* Spazio per l'icona su schermi piccoli */ font-size: 19px; /* Dimensione del testo ridotta */ } } .button-pulse .subtext { display: block; color: white; font-size: 14px; /* Regola la dimensione del font secondo necessità */ font-weight: normal; margin-top: 5px; /* Aggiungi spazio sopra il sottotitolo */ } .best-seller-icon { position: absolute; top: -12px; /* Regola queste due proprietà per posizionare l'icona esattamente dove vuoi */ left: 10px; background-color: #FF9900; /* Colore dell'oro per lo sfondo */ color: black; /* Colore del testo */ padding: 5px; color: white; font-size: 14px; border-radius: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Ombra opzionale */ } .underline { text-decoration: underline; } .best-seller-icon2 { position: absolute; top: -12px; /* Regola queste due proprietà per posizionare l'icona esattamente dove vuoi */ left: 10px; background-color: #05B800; /* Colore dell'oro per lo sfondo */ color: black; /* Colore del testo */ padding: 5px; color: white; font-size: 14px; border-radius: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Ombra opzionale */ } .whatsapp-icon { display: inline-block; background: url('/big-form/back-corrector/pics/whatsapp.png') no-repeat center center; width: 25px; /* Regola la grandezza */ height: 25px; /* Regola la grandezza */ background-size: contain; vertical-align: middle; margin-right: 0px; } .address-container { border: 2px dashed gold; /* Bordo a trattini oro */ background-color: #FFF9C4; /* Sfondo di colore #FFF9C4 */ padding: 10px; /* Spaziatura interna */ margin-top: 5px; /* Margine superiore per distanziarlo dall'input */ text-align: center; /* Centra il testo all'interno del contenitore */ } .address-note { font-size: 14px; /* Regola la grandezza del testo */ color: #232F3E; } /* Stile per i campi Numero Exterior e Numero Interior */ .half-row > div { width: 48%; /* Occupa circa la metà della larghezza del contenitore */ box-sizing: border-box; /* Include padding e border nella larghezza totale */ } .half-row > div:first-child { margin-right: 4%; /* Spazio tra i due campi */ } /* Stile per il campo Colonia, simile agli altri campi di input */ #colonia { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 2px solid #000; box-sizing: border-box; font-size: 19px; color: #232F3E; } /* Adattamenti per schermi più piccoli */ @media (max-width: 600px) { .half-row > div { width: 100%; /* Ogni campo occupa l'intera larghezza su dispositivi mobili */ margin-bottom: 10px; } } /* Stile per il container dei suggerimenti */ .pac-container { border: 1px solid #ccc; box-shadow: 0 2px 6px rgba(0,0,0,0.3); z-index: 1051; } /* Stile per ogni singolo suggerimento */ .pac-item { align-items: start; /* Allinea gli elementi all'inizio */ border-bottom: 1px solid #e6e6e6; padding: 10px; /* Padding per evitare che l'icona sia tagliata */ display: block; /* Cambia il display in block */ } /* Nascondere l'icona di posizione di default di Google */ .pac-icon { display: none !important; } /* Stile per l'icona di posizione personalizzata */ .pac-item:before { font-family: 'Font Awesome 5 Free'; content: '\f3c5'; /* Codice unicode per l'icona map-marker-alt */ font-weight: 900; font-size: 24px; color: #666; float: left; /* Usa float per posizionare l'icona */ margin-right: 10px; /* Spazio tra l'icona e il testo */ margin-top: 5px; /* Aggiusta l'allineamento verticale dell'icona */ } /* Stile per il contenuto del suggerimento */ .pac-item-query { font-weight: bold; font-size: 16px; line-height: 1.2; display: inline-block; /* Display inline-block per il testo */ } /* Stile per il testo secondario più piccolo */ .pac-item .pac-item-query + span { font-size: 12px; line-height: 1.2; color: #777; display: block; /* Mostra il testo secondario su una nuova riga */ } /* Stile per elementi selezionati */ .pac-item-selected, .pac-item-selected:hover { background-color: #f0f0f0; color: #333; } .pack-attention { margin-top: 20px; /* Space above the box */ border: 3px dashed red; /* Thinner dashed red border */ border-radius: 8px; /* Rounded corners */ background-color: #FFFFFF; /* White background for the box */ padding: 15px; /* Reduced padding inside the box */ position: relative; /* For positioning inner elements absolutely if necessary */ } .pack-attention .title { color: red; /* Red title */ font-size: 24px; /* Larger font size for the title */ font-weight: bold; /* Bold title */ text-align: center; /* Center the title */ margin-bottom: 5px; /* Reduced space below the title */ } .pack-attention .description { font-size: 16px; /* Smaller font size for the text */ text-align: center; /* Center the text */ line-height: 1.2; /* More compact line height for less vertical space */ margin-top: 5px; /* Reduced space between the title and the description */ } </style> </head> <body> <div class="form-container"> <form id="myForm" action="/shopify-form/updated-soportelavadora/submit.php" method="post"> <div class="row"> <div> <label for="nombre">Nombre *</label> <input type="text" id="nombre" name="nombre" placeholder="Ej. Juan" required> </div> <div style="width: 4%;"></div> <div> <label for="cognome">Apellido *</label> <input type="text" id="cognome" name="cognome" placeholder="Ej. Pérez" required> </div> </div> <label for="phone"><span class="whatsapp-icon"></span> Movil / Whatsapp *</label> <div class="phone-container"> <span class="phone-prefix">+52</span> <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" title="Ingrese un número de teléfono de 10 dígitos" placeholder="Ej. 5851021331" class="phone-input" required> </div> <label for="calle">Calle / Avenida <span class="underline"></span> *</label> <input type="text" id="calle" name="calle" placeholder="Ej. Av. Resplandor" required> <label for="calle">Numero Exterior *</span></label> <input type="text" id="exterior" name="exterior" placeholder="Ej. 94A" required> <label for="calle">Numero Interior (Opcional)</span></label> <input type="text" id="interior" name="interior" placeholder="Ej. 35" > <div class="row-full"> <label for="postal">Código Postal *</label> <input type="text" id="postal" name="postal" placeholder="Ej. 01250" required pattern="^\d{5}$" title="El código postal debe tener 5 dígitos."> <span id="postalError" style="color: red; display: none;"></span> <!-- Elemento per il messaggio di errore --> </div> <label for="coloniesList">Colonia / Fraccionamento *</label> <select id="coloniesList" name="coloniesList" required> <option value="" disabled selected>Ingrese su código postal arriba</option> <!-- Le opzioni saranno aggiunte qui dallo script --> </select> <span id="coloniesListError" style="color: red; display: none;"></span> <div class="row-full"> <label for="ciudad">Municipio/Delegacion *</label> <input type="text" id="ciudad" name="ciudad" required disabled placeholder="Se seleccionará automáticamente"> </div> <div class="row-full"> <label for="departamento">Estado *</label> <input type="text" id="departamento" name="departamento" required disabled placeholder="Se seleccionará automáticamente"> </div> <input type="hidden" id="hidden_ciudad" name="ciudad"> <input type="hidden" id="hidden_departamento" name="departamento"> <label for="calle"> Referencias (Opcional)</label> <input type="text" id="ref" name="ref" placeholder="Ej. Casa roja con puerta negra"> <input type="hidden" id="email" name="email" placeholder="Ej. juanperez@gmail.com" > <label for="offers">Selecciona la oferta:</label> <div class="offers-container" id="offers"> <!-- Aggiungo l'evento onclick per cambiare lo sfondo quando selezionato --> <div class="offer selected" onclick="selectOffer(this, 'offer1')"> <input type="radio" id="offer1" name="offer" value="offer1" required checked> <label for="offer1" style="display: flex; align-items: center;"> <img src="/shopify-form/updated-soportelavadora/pics/1.png" alt="Oferta 1"> <div> 4x Pies <span class="offer-price-value">695$</span> <span class="offer-discount-value"><del>1390$</del> (-50%)</span> </div> </label> </div> <div class="offer" onclick="selectOffer(this, 'offer2')"> <span class="best-seller-icon">MÁS VENDIDO</span> <input type="radio" id="offer2" name="offer" value="offer2" required> <label for="offer2" style="display: flex; align-items: center;"> <img src="/shopify-form/updated-soportelavadora/pics/2.png" alt="Oferta 2"> <div> 8x Pies <span class="offer-price-value">1095$</span> <span class="offer-discount-value"><del>2780$</del> (-65%)</span> </div> </label> </div> <div class="offer" onclick="selectOffer(this, 'offer3')"> <span class="best-seller-icon2">MÁS CONVENIENTE</span> <input type="radio" id="offer3" name="offer" value="offer3" required> <label for="offer3" style="display: flex; align-items: center;"> <img src="/shopify-form/updated-soportelavadora/pics/3.png" alt="Oferta 3"> <div> 12x Pies <span class="offer-price-value">1395$</span> <span class="offer-discount-value"><del>4170$</del> (-75%)</span> </div> </label> </div> </div> <div class="pack-warranty"> <img src="/fullcodes-form/foot-massager/pics/shield.png" alt="Pack Warranty Icon"> <div class="content"> <div class="title">Seguro de paquete</div> <div class="description"> Si el producto en la confección está dañado, lo reenviaremos sin dudarlo. </div> <div class="price-container"> <div class="price"> <span class="old-price">100$</span> <span class="new-price">45$</span> </div> <input type="hidden" id="warranty" name="warranty" value="no"> <button type="button" class="add-button" onclick="toggleWarrantySelection(this)">Añadir</button> </div> </div> </div> <div> <div class="pack-shipping"> <img src="/big-form/back-corrector/pics/fast-delivery.png" alt="Shipping Icon"> <div class="content"> <div class="title">Envio Premium</div> <div class="description"> Tendrás prioridad sobre todos los demás pedidos pendientes, recibirás el paquete en el menor tiempo posible. </div> <div class="price-container"> <div class="price"> <span class="old-price">60$</span> <span class="new-price">29$</span> </div> <input type="hidden" id="shipping" name="shipping" value="no"> <button type="button" class="add-button" onclick="toggleShippingSelection(this)">Añadir</button> </div> </div> </div> <div class="pack-attention"> <div class="content"> <div class="title">ATENCIÓN</div> <div class="description"> <strong>RECUERDA QUE TU COMPRA ES UN COMPROMISO:</strong><br> A partir de tu confirmación del pedido, la tienda incurrirá en gastos logísticos y pagará de manera anticipada el envío del producto que te está ofreciendo totalmente gratis. <strong>Así que por favor confirma tu pedido solo si estás 100% seguro de hacerlo y te comprometes a recibirlo.</strong> </div> </div> </div> <!-- Add space before the purchase button --> <div style="height: 30px;"></div> <button type="submit" class="button-pulse"> <i class="fas fa-shopping-cart"></i>ORDENAR <br> <span class="subtext">Pago contra entrega</span> </button> </form> </div> <script> function selectOffer(element, offerId) { // Rimuovi la classe 'selected' da tutte le offerte var offers = document.getElementsByClassName('offer'); for (var i = 0; i < offers.length; i++) { offers[i].classList.remove('selected'); } // Aggiungi la classe 'selected' all'offerta cliccata element.classList.add('selected'); // Seleziona l'input radio corrispondente document.getElementById(offerId).checked = true; } </script> <script> function toggleWarrantySelection(button) { var warrantyInput = document.getElementById('warranty'); if (warrantyInput.value === 'no') { warrantyInput.value = 'yes'; button.innerHTML = '✔ añadido'; // Testo aggiornato per indicare che la garanzia è stata aggiunta } else { warrantyInput.value = 'no'; button.innerHTML = 'Añadir'; // Testo originale } } </script> <script> function toggleShippingSelection(button) { var shippingInput = document.getElementById('shipping'); if (shippingInput.value === 'no') { shippingInput.value = 'yes'; button.innerHTML = '✔ añadido'; // Testo aggiornato per indicare che la garanzia è stata aggiunta } else { shippingInput.value = 'no'; button.innerHTML = 'Añadir'; // Testo originale } } </script> <script> function initAutocomplete() { var calleInput = document.getElementById('calle'); var coloniaInput = document.getElementById('colonia'); var autocompleteCalle = new google.maps.places.Autocomplete(calleInput, { componentRestrictions: { country: 'mx' }, types: ['address'] }); google.maps.event.addListener(autocompleteCalle, 'place_changed', function() { var place = autocompleteCalle.getPlace(); if (place.formatted_address) { var addressParts = place.formatted_address.split(', '); if (addressParts.length > 0) { calleInput.value = addressParts[0]; // Prende solo la parte prima della prima virgola // Preimposta la colonia basata sull'indirizzo selezionato if (addressParts.length > 1) { var colonia = addressParts[1].trim(); // Rimuove i numeri dalla stringa della colonia colonia = colonia.replace(/[0-9]/g, '').trim(); coloniaInput.value = colonia; } } } }); var autocompleteColonia = new google.maps.places.Autocomplete(coloniaInput, { componentRestrictions: { country: 'mx' }, types: ['sublocality', 'sublocality_level_1', 'neighborhood'] }); google.maps.event.addListener(autocompleteColonia, 'place_changed', function() { var place = autocompleteColonia.getPlace(); if (place.formatted_address) { var colonia = place.formatted_address.split(', ')[0].trim(); // Rimuove i numeri dalla stringa della colonia colonia = colonia.replace(/[0-9]/g, '').trim(); coloniaInput.value = colonia; } }); } google.maps.event.addDomListener(window, 'load', initAutocomplete); autocomplete.setOptions({ styles: { container: 'pac-container-custom', // Classe personalizzata per il contenitore suggestion: 'pac-item-custom', // Classe personalizzata per i suggerimenti suggestionRow: 'pac-item-row-custom', // Classe personalizzata per la riga dei suggerimenti } }); </script> <script> document.getElementById('postal').addEventListener('change', function() { var postalCode = this.value; var postalErrorElement = document.getElementById('postalError'); if (postalCode.length !== 5) { postalErrorElement.textContent = 'Codigo invalido. Debe tener 5 dígitos.'; // Imposta il messaggio di errore postalErrorElement.style.display = 'block'; // Mostra il messaggio di errore document.getElementById('coloniesList').innerHTML = ''; // Svuota la lista delle colonie return; // Interrompe l'esecuzione della funzione } postalErrorElement.style.display = 'none'; // Nasconde il messaggio di errore in caso di codice valido var coloniesData = findColoniesByPostalCode(postalCode); updateColoniesList(coloniesData, postalCode); }); let postalCodeData = []; document.addEventListener('DOMContentLoaded', function() { fetch('https://comprapido.net/shopify-form/DYNAMIC-DATA/colonies.json') .then(response => response.json()) .then(data => { postalCodeData = data; }); }); document.getElementById('postal').addEventListener('change', function() { var postalCode = this.value; var coloniesData = findColoniesByPostalCode(postalCode); updateColoniesList(coloniesData, postalCode); }); function findColoniesByPostalCode(postalCode) { return postalCodeData.filter(item => item[0] === postalCode); } function updateColoniesList(coloniesData, postalCode) { var coloniesList = document.getElementById('coloniesList'); coloniesList.innerHTML = ''; // Aggiungi un'opzione predefinita var defaultOption = document.createElement('option'); defaultOption.textContent = "Haga clic para seleccionar"; // "Clicca per selezionare" in spagnolo defaultOption.disabled = true; defaultOption.selected = true; coloniesList.appendChild(defaultOption); var uniqueColonies = new Set(); coloniesData.forEach(function(data) { var colony = data[1]; if (!uniqueColonies.has(colony)) { uniqueColonies.add(colony); var option = document.createElement('option'); option.value = colony; option.textContent = colony; coloniesList.appendChild(option); } }); // Nascondi l'opzione predefinita una volta che viene selezionata un'altra opzione coloniesList.addEventListener('change', function() { defaultOption.hidden = true; updateStateAndMunicipality(postalCode, coloniesList.value); }); if (coloniesData.length > 0) { updateStateAndMunicipality(postalCode, coloniesData[0][1]); } } function updateStateAndMunicipality(postalCode, colony) { var selectedData = postalCodeData.find(item => item[0] === postalCode && item[1] === colony); if (selectedData) { document.getElementById('departamento').value = selectedData[3]; document.getElementById('ciudad').value = selectedData[2]; document.getElementById('hidden_departamento').value = selectedData[3]; document.getElementById('hidden_ciudad').value = selectedData[2]; markFieldAsDisabled('departamento'); markFieldAsDisabled('ciudad'); } } document.getElementById('myForm').addEventListener('submit', function(e) { var coloniesList = document.getElementById('coloniesList'); var postalCodeInput = document.getElementById('postal'); // Ottieni l'elemento del codice postale var errorElement = document.getElementById('coloniesListError'); if (coloniesList.selectedIndex <= 0) { e.preventDefault(); // impedisce l'invio del modulo errorElement.textContent = 'Por favor, seleccione una Colonia / Fraccionamento.'; // Imposta il messaggio di errore errorElement.style.display = 'block'; // Mostra il messaggio di errore postalCodeInput.scrollIntoView(); // Scorri fino all'elemento del codice postale } else { errorElement.style.display = 'none'; // Nascondi il messaggio di errore se tutto va bene } }); </script> </body> </html>
Leave a Comment