Untitled
unknown
html
a year ago
11 kB
8
Indexable
Never
<!DOCTYPE html>
<html>
<head>
<title style="font-family: '<link>Libre Baskerville</link>', serif;">CREATE IL VOSTRO SERVIZIO DA 0</title>
<style>
body {
background-repeat: no-repeat;
background-size: cover;
}
h1 {
text-align: center;
font-family: 'Libre Baskerville', 'serif';
color: #142B54
}
h3 {
text-align: center;
font-family: 'Montserrat', 'serif';
color: #000000
}
h4 {
margin-top: 30px;
margin-bottom: 5px;
}
input[type="checkbox"]:checked {
background-color: #000000;
}
.seleziona-btn {
background-color: #BA890D;
color: #ffffff;
border: none;
width: 130px;
height: 55px;
}
.seleziona-btn {
margin-bottom: 15px;
/* Modifica il valore di "10px" come preferisci per regolare lo spazio */
}
.choices {
margin-bottom: 20px;
font-family: '<link>Montserrat</link>', sans-serif;
color: #000000;
}
.choices input[type="checkbox"] {
margin-bottom: 10px;
}
.container {
background-color: rgba(255, 255, 255, 0.9);
max-width: 600px;
margin: 20px auto;
padding: 20px;
display: block;
}
.checkbox-container {
margin-top: 15px;
margin-bottom: 15px;
}
.choices input[type="checkbox"] {
transform: scale(1.2);
}
.plus-label {
padding-left: 35px;
margin-top: 10px;
margin-bottom: 10px;
}
.submit-button {
background-color: #BA890D;
color: #ffffff;
font-size: 20px;
padding: 20px 40px;
border: none;
cursor: pointer;
}
.centered-button {
text-align: center;
margin-top: 30px;
}
.seleziona-btn {
margin-bottom: 15px;
/* Modifica il valore di "10px" come preferisci per regolare lo spazio */
}
.result {
border: 2px solid black;
padding: 20px;
margin: 0 auto;
width: 50%;
text-align: center;
font-size: 80px;
color: #BA890D;
width: 50%;
max-height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<h1 style="text-align: center; font-family: 'Libre Baskerville', serif; color: #ffffff; font-size: 40px">CREATE IL
VOSTRO SERVIZIO DA ZERO</h1>
<div class="container">
<h3 style="font-family: 'Montserrat', serif; margin-bottom: 30px;"> Selezionate le opzioni che vorreste
nel vostro servizio</h3>
<button class="seleziona-btn" onclick="selezionaTutte()">Seleziona tutte</button>
<button id="deselezionaTutte" class="seleziona-btn" onclick="deselezionaTutte()">Deseleziona tutte</button>
<div class="choices">
<input type="checkbox" name="choice" value="4"> Studio della località<br>
<input type="checkbox" name="choice" value="4"> Analisi dei competitor<br>
<input type="checkbox" name="choice" value="4"> Valutazione dell'immobile<br>
<input type="checkbox" name="choice" value="5"> Home staging<br>
<input type="checkbox" name="choice" value="4"> Check-list dell’alloggio e consigli di acquisto<br>
<input type="checkbox" name="choice" value="4"> Servizio fotografico professionale e Virtual tour<br>
<input type="checkbox" name="choice" value="5"> Preparazione di avviamento immobile<br>
<input type="checkbox" name="choice" value="4"> Servizio di ricerca personale altamente qualificato pulizia<br>
<input type="checkbox" name="choice" value="4"> Coordinamento pulizie.<br>
<input type="checkbox" name="choice" value="5"> Gestione manutenzioni ordinarie e generali.<br>
<input type="checkbox" name="choice" value="5"> Guest book e segnaletiche personalizzate<br>
<input type="checkbox" name="choice" value="5"> Gestione burocrazia<br>
<input type="checkbox" name="choice" value="5"> Software per la gestione delle proprietà<br>
<input type="checkbox" name="choice" value="4"> Creazione di annunci multilingue sui portali<br>
<input type="checkbox" name="choice" value="5"> Servizi di marketing e promozione per affitti brevi<br>
<input type="checkbox" name="choice" value="5"> Ottimizzazione degli annunci per la massima visibilità<br>
<input type="checkbox" name="choice" value="5"> Ottimizzazione dinamica dei prezzi<br>
<input type="checkbox" name="choice" value="4"> Gestione prenotazioni<br>
<input type="checkbox" name="choice" value="5"> Gestione pagamenti<br>
<input type="checkbox" name="choice" value="5"> Gestione delle tasse di soggiorno<br>
<input type="checkbox" name="choice" value="4"> Gestione delle comunicazioni degli ospiti<br>
<input type="checkbox" name="choice" value="5"> Gestione calendari<br>
<input type="checkbox" name="choice" value="5"> Gestione degli ospiti<br>
<input type="checkbox" name="choice" value="5"> Risoluzione delle controversie<br>
<input type="checkbox" name="choice" value="5"> Gestione check-in e check-out (automatici)<br>
<input type="checkbox" name="choice" value="5"> Gestione dei rifornimenti dell’immobile<br>
<input type="checkbox" name="choice" value="5"> Reportistica proprietario base<br>
<input type="checkbox" name="choice" value="5"> Consulenze gratuite per migliorie<br>
<input type="checkbox" name="choice" value="5"> Concierge Virtuale<br>
<input type="checkbox" name="choice" value="5"> Programmazione e gestione di servizi di concierge<br>
<input type="checkbox" name="choice" value="5"> Pianificazione e gestione di viaggi e trasferimenti privati<br>
<input type="checkbox" name="choice" value="5"> Gestione delle spese e contabilità semplice.<br>
</ul>
<h4>PLUS: (provvigione maggiore)</h4> <br>
<button id="selezionaTuttePlus" class="seleziona-btn" onclick="selezionaTuttePlus()">Seleziona tutte</button>
<button id="deselezionaTuttePlus" class="seleziona-btn" onclick="deselezionaTuttePlus()">Deseleziona
tutte</button> <br>
<input type="checkbox" name="choice" value="6" class="plus"> Consulenza per investimenti immobiliari di lusso <br>
<input type="checkbox" name="choice" value="6" class="plus"> Consulenza energetica e sostenibilità ambientale <br>
<input type="checkbox" name="choice" value="7" class="plus"> Gestione delle spese e contabilità completa <br>
<input type="checkbox" name="choice" value="6" class="plus"> Reportistica proprietario completa <br>
<input type="checkbox" name="choice" value="6" class="plus"> Gestione check-in e check-out (fisici) <br>
<input type="checkbox" name="choice" value="6" class="plus"> Consulenza Implementazione di tecnologie smart home
<br>
<input type="checkbox" name="choice" value="7" class="plus"> Apparizione in rivista - Collection: Luxury-lifestyle
Magazine <br>
<input type="checkbox" name="choice" value="6" class="plus"> Programmazione eventi in proprietà <br>
</div>
<div class="centered-button">
<button class="submit-button" onclick="mostraPopup ()">SCOPRI IL RISULTATO</button>
</div>
<div style="display: none;">
<h2 style="text-align: center; font-family: 'Libre Baskerville', serif; color: #000000;">IL TUO SERVIZIO
PERSONALIZZATO</h2>
<h3 style="text-align: center; font-family: 'Montserrat', serif; color: #000000;">La nostra percentuale:</h3>
</div>
</div>
<div class="popup" id="popup"
style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 360px; height: 300px; margin: auto; background-color: rgba(255, 255, 255, 0.95); border: 1px solid black;">
<span class="close-button" onclick="chiudiPopup()"
style="font-size: 30px; cursor: pointer; position: absolute; top: -10px; right: 10px; color: #BA890D;">X</span>
<h2
style="text-align: center; font-family: 'Libre Baskerville', serif; color: #000000;font-size: 30px;margin-top: 30px;">
IL TUO SERVIZIO PERSONALIZZATO</h2>
<h3 style="text-align: center; font-family: 'Montserrat', serif; color: #000000;font-size: 20px; margin-top: 30px;">
La nostra percentuale:</h3>
<div class="result" style="display: flex; justify-content: center; align-items: center;">
<p id="risultatoPopup" style="font-size: 60px; color: #BA890D; margin-top: 60px;"></p>
</div>
</div>
<script>
function mostraPopup() {
var checkboxes = document.getElementsByName("choice");
var count = 0;
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
count += parseInt(checkboxes[i].value);
}
}
count = count / 10; // Dividi il conteggio per 10
document.getElementById("risultatoPopup").innerHTML = count + "%";
document.getElementById("popup").style.display = "block"; // Mostra il popup
}
function chiudiPopup() {
document.getElementById("popup").style.display = "none"; // Nascondi il popup
}
function selezionaTutte() {
var checkboxes = document.querySelectorAll("input[name='choice']:not(.plus):not(:checked)");
var selectAllButton = document.querySelector("button[onclick='selezionaTutte()']");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = true;
}
if (checkboxes.length === 0) {
selectAllButton.innerHTML = "Seleziona tutte";
}
}
function deselezionaTutte() {
var checkboxes = document.querySelectorAll("input[name='choice']:not(.plus)");
var deselectAllButton = document.querySelector("button[onclick='deselezionaTutte()']");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false;
}
if (checkboxes.length === 0) {
}
}
function selezionaTuttePlus() {
var checkboxes = document.querySelectorAll("input[name='choice'].plus:not(:checked)");
var selectAllButton = document.querySelector("button[onclick='selezionaTuttePlus()']");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = true;
}
if (checkboxes.length === 0) {
selectAllButton.innerHTML = "Seleziona tutte";
} else {
}
}
function deselezionaTuttePlus() {
var checkboxes = document.querySelectorAll("input[name='choice'].plus");
var deselectAllPlusButton = document.querySelector("button[onclick='deselezionaTutte()']");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false;
}
if (checkboxes.length === 0) {
deselectAllPlusButton.innerHTML = "Deseleziona tutte";
}
}
</script>
</body>
</html>