Untitled
unknown
plain_text
2 years ago
16 kB
5
Indexable
<!DOCTYPE html>
<html>
<head>
<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: 19px;
font-weight: bold;
}
input[type="text"], input[type="tel"], select, button {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
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, .offer-discount-value {
font-size: 25px;
font-weight: bold;
color: green; /* Prezzo e valuta in verde */
}
.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-radius: 5px;
background-color: #fff9c4;
}
.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: 7px 14px; /* 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 */
}
.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 */
}
</style>
</head>
<body>
<div class="form-container">
<form action="/big-form/back-corrector/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">Número de Teléfono *</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="address">Dirección y Barrio *</label>
<input type="text" id="address" name="address" placeholder="Ej. Av. Resplandor 216, Las Nubes" required>
<div class="row-full">
<label for="departamento">Estado *</label>
<select id="departamento" name="departamento" required>
<option value="" disabled selected>Haz clic para seleccionar ▿</option>
<option value="aguascalientes">Aguascalientes</option>
<option value="campeche">Campeche</option>
<option value="chiapas">Chiapas</option>
<option value="chihuahua">Chihuahua</option>
<option value="ciudad_de_mexico">Ciudad de México</option>
<option value="coahuila">Coahuila</option>
<option value="colima">Colima</option>
<option value="durango">Durango</option>
<option value="estado_de_mexico">Estado de México</option>
<option value="guanajuato">Guanajuato</option>
<option value="guerrero">Guerrero</option>
<option value="hidalgo">Hidalgo</option>
<option value="jalisco">Jalisco</option>
<option value="michoacan">Michoacán</option>
<option value="morelos">Morelos</option>
<option value="nayarit">Nayarit</option>
<option value="nuevo_leon">Nuevo León</option>
<option value="oaxaca">Oaxaca</option>
<option value="puebla">Puebla</option>
<option value="queretaro">Querétaro</option>
<option value="quintana_roo">Quintana Roo</option>
<option value="san_luis_potosi">San Luis Potosí</option>
<option value="sinaloa">Sinaloa</option>
<option value="sonora">Sonora</option>
<option value="tabasco">Tabasco</option>
<option value="tamaulipas">Tamaulipas</option>
<option value="tlaxcala">Tlaxcala</option>
<option value="veracruz">Veracruz</option>
<option value="yucatan">Yucatán</option>
<option value="zacatecas">Zacatecas</option>
</select>
</div>
<div class="row-full">
<label for="ciudad">Ciudad *</label>
<select id="ciudad" name="ciudad" required>
<option value="" disabled selected>Haz clic para seleccionar ▿</option>
<!-- Le opzioni di Ciudad saranno aggiunte dinamicamente -->
</select>
</div>
<div class="row-full">
<div>
<label for="postal">Código Postal *</label>
<input type="text" id="postal" name="postal" placeholder="Ej. 97259" required>
</div>
</div>
<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="/big-form/back-corrector/pics/1.png" alt="Oferta 1">
<div>
1x SmartPosture <span class="offer-price-value">585$</span>
<span class="offer-discount-value">Descuento 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="/big-form/back-corrector/pics/2.png" alt="Oferta 2">
<div>
2x SmartPosture <span class="offer-price-value">885$</span>
<span class="offer-discount-value">Descuento 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="/big-form/back-corrector/pics/3.png" alt="Oferta 3">
<div>
3x SmartPosture <span class="offer-price-value">1085$</span>
<span class="offer-discount-value">Descuento 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>
<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>
// Dati delle città per ogni departamento
const departamentoCiudades = {
"ciudad_de_mexico": ["alvaro obregon", "la magdalena contreras", "miguel hidalgo", "milpa alta", "tlahuac", "tlalpan", "venustiano carranza", "xochimilco", "azcapotzalco", "benito juarez", "coyoacan", "cuajimalpa de morelos", "cuauhtemoc", "gustavo a. madero", "iztacalco", "iztapalapa", "la magdalena contreras", "cuajimalpa de morelos"],
"aguascalientes": ["aguascalientes", "san francisco de los romo", "el llano", "rincon de romos", "cosio", "san jose de gracia", "tepezala", "pabellon de arteaga", "asientos", "calvillo", "jesus maria"],
"campeche": ["campeche", "champoton", "seybaplaya", "tenabo", "hecelchakan", "calkini"],
"coahuila_de_zaragoza": ["saltillo", "arteaga", "juarez", "progreso", "escobedo", "san buenaventura", "abasolo", "candela", "frontera", "monclova", "castanos", "ramos arizpe", "general cepeda", "piedras negras", "nava", "acuna", "muzquiz", "jimenez", "zaragoza", "morelos", "allende", "guerrero", "hidalgo", "sabinas", "san juan de sabinas", "torreon", "matamoros", "viesca", "ocampo", "nadadores", "sierra mojada", "cuatro cienegas", "lamadrid", "sacramento", "san pedro", "francisco i. madero"],
// Aggiungi qui le altre corrispondenze...
};
// Funzione per aggiornare le opzioni di ciudad in base al departamento selezionato
function updateCiudadOptions() {
const departamentoSelect = document.getElementById("departamento");
const ciudadSelect = document.getElementById("ciudad");
// Pulisci le opzioni esistenti in ciudad
ciudadSelect.innerHTML = "<option value='' disabled selected>Haz clic para seleccionar ▿</option>";
// Ottieni le città corrispondenti al departamento selezionato
const selectedDepartamento = departamentoSelect.value;
const ciudades = departamentoCiudades[selectedDepartamento];
// Aggiungi una nuova opzione per ogni ciudad
ciudades.forEach(ciudad => {
const option = document.createElement("option");
option.value = ciudad.replace(/\s+/g, '_').toLowerCase();
option.textContent = ciudad;
ciudadSelect.appendChild(option);
});
}
// Aggiungi un event listener al select di departamento
document.getElementById("departamento").addEventListener("change", updateCiudadOptions);
</script>
</body>
</html>Editor is loading...
Leave a Comment