22/03/2024 - Alka ha scritto:
21/03/2024 - fedefled ha scritto:
Hai ragione praticamente dovrei mettere una mappa interattiva uguale o quanto più simile possibile a quella infondo a questa pagina https://anfina.ch/wunschimmobilie/ … e di questa ho la cartella con tutti i file tra cui l'index che ha estensione d.ts
I file con estensione .ts sono in linguaggio TypeScript: occorre creare un'applicazione Node e usare il relativo transpiler per poter gestire quel codice. Quante e quali sono le tue conoscenze in merito? Se sono a zero, è ovvio che non si può fare un corso in un forum.
In secondo luogo, ho capito qual è il tuo obiettivo, ma non hai comunque risposto alle domande che ho fatto, ossia
21/03/2024 - Alka ha scritto:
Qual è il codice che hai scritto fino a ora? Cosa non riesci a fare di specifico?
Hai dato un'occhiata a come funziona una Image Map in HTML?
Se non hai scritto alcun codice, se prendi spunto da una pagina in un linguaggio che non conosci, per il quale devi usare dei tool che non hai mai usato, e non hai approfondito nulla di quello che serve per poter realizzare quanto ti serve, non ha molto senso proseguire questa discussione, perché il forum può dare una mano ma non sostituisce libri, corsi, formazione e studio.
Allora ti typeScript non ne capisco purtroppo, e proprio per questo speravo che avendo codice e file gia pronti potesse “bastare” includerli nel mio file. Il codice che ho scritto te lo scrivo qui sotto, questo lo mastico ma non essendo espertissima volevo consiglio su come rendere la mappa piu simile possibile a quella del sito.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Immobilienfragebogen</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-image: url(camera.jpg);
background-size: cover;
background-position: center center;
color: #4d3529; /* Brown text color */
}
.container {
max-width: 800px;
margin: 50px auto;
background-color: #d7c6bd; /* Lighter beige container background */
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #4d3529; /* Dark brown header text color */
margin-bottom: 30px;
}
form {
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
select {
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: 1px solid #d3b7a7; /* Light brown border */
box-sizing: border-box;
font-size: 16px;
width: 100%;
}
input[type="checkbox"] {
margin-right: 5px;
}
button {
display: inline-block;
padding: 15px 30px;
background-color: #a67b5b; /* Dark brown button background */
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #82573a; /* Darker brown button background on hover */
}
box{
width: 33.33%; float: left;}
</style>
</head>
<body>
<div class="container">
<h1>Immobilienfragebogen</h1>
<form id="propertyForm" onsubmit="return submitForm()">
<label for="propertyType">Was für eine Immobilie suchen Sie?</label>
<select id="propertyType">
<option value="kaufen">Kaufen</option>
<option value="mieten">Mieten</option>
</select>
<label for="propertyCategory">Welche Art von Immobilie suchen Sie?</label>
<select id="propertyCategory">
<option value="Wohnung">Wohnung</option>
<option value="Villa">Villa</option>
<option value="Ferienhaus">Ferienhaus</option>
</select>
<label for="minRooms">Wie viele Zimmer soll die Immobilie mindestens haben?</label>
<select id="minRooms">
<option value="1">1 Zimmer</option>
<option value="2">2 Zimmer</option>
<option value="3">3 Zimmer</option>
<option value="4">4 Zimmer</option>
<option value="5">5 Zimmer</option>
<option value="6">6 Zimmer</option>
<option value="7">7 Zimmer</option>
<option value="8">8 Zimmer</option>
<option value="9">9 Zimmer</option>
<option value="10">10 Zimmer</option>
</select>
<label for="maxRooms">Wie viele Zimmer soll die Immobilie maximal haben?</label>
<select id="maxRooms">
<option value="1">1 Zimmer</option>
<option value="2">2 Zimmer</option>
<option value="3">3 Zimmer</option>
<option value="4">4 Zimmer</option>
<option value="5">5 Zimmer</option>
<option value="6">6 Zimmer</option>
<option value="7">7 Zimmer</option>
<option value="8">8 Zimmer</option>
<option value="9">9 Zimmer</option>
<option value="10">10 Zimmer</option>
</select>
<label for="style">In welchem Stil sollte die Immobilie sein?</label>
<select id="style">
<option value="modern">Modern</option>
<option value="vintage">Vintage</option>
<option value="klassisch">Klassisch</option>
<option value="80er">80er Jahre</option>
</select>
<div class="box">
<label for="box"> Welche Ausstattungsmerkmale sollte die Immobilie haben?</label>
<input type="checkbox" id="garden" value="Garten">
<label for="garden">Garten</label>
<input type="checkbox" id="fireplace" value="Kamin">
<label for="fireplace">Kamin</label>
<input type="checkbox" id="balconies" value="Balkone">
<label for="balconies">Balkone</label></div>
<div></div>
<div></div>
<label for="area"> In welcher Gegend suchen Sie die Immobilie?</label>
<select id="area">
<option value="zentral">Zentral</option>
<option value="vororte">Vororte</option>
<option value="see">See</option>
<option value="meer">Meer</option>
<option value="berge">Berge</option>
</select>
<div></div>
<button type="button" onclick="submitForm()">Absenden</button>
</form>
</div>
<script>
function submitForm() {
var propertyType = document.getElementById("propertyType").value;
var propertyCategory = document.getElementById("propertyCategory").value;
var minRooms = document.getElementById("minRooms").value;
var maxRooms = document.getElementById("maxRooms").value;
var style = document.getElementById("style").value;
var amenities = [];
if (document.getElementById("garden").checked) amenities.push("Garten");
if (document.getElementById("fireplace").checked) amenities.push("Kamin");
if (document.getElementById("balconies").checked) amenities.push("Balkone");
var area = document.getElementById("area").value;
// Here you can process the form data, e.g., send it to a server for analysis
// For now, let's just display the results
alert("Vielen Dank für Ihre Antworten!\n\n1) Immobilienart: " + propertyType + "\n2) Art der Immobilie: " + propertyCategory + "\n3) Mindestanzahl Zimmer: " + minRooms + "\n4) Maximalanzahl Zimmer: " + maxRooms + "\n5) Stil: " + style + "\n6) Ausstattungsmerkmale: " + amenities.join(", ") + "\n7) Gegend: " + area);
}
</script>
<script>
function submitForm() {
var propertyType = document.getElementById("propertyType").value;
var propertyCategory = document.getElementById("propertyCategory").value;
var minRooms = document.getElementById("minRooms").value;
var maxRooms = document.getElementById("maxRooms").value;
var style = document.getElementById("style").value;
var amenities = [];
if (document.getElementById("garden").checked) amenities.push("Garten");
if (document.getElementById("fireplace").checked) amenities.push("Kamin");
if (document.getElementById("balconies").checked) amenities.push("Balkone");
var area = document.getElementById("area").value;
// Define redirection URLs based on user responses
var redirectionUrl;
if (propertyType === "kaufen" && propertyCategory === "Wohnung" && style === "modern") {
redirectionUrl = "https://anfina.ch/immobilien/?availabilities%5B%5D=active&availabilities%5B%5D=reserved&welcome=true";
} else if (propertyType === "mieten" && propertyCategory === "Villa" && amenities.includes("Garten")) {
redirectionUrl = "https://anfina.ch/immobilien/?availabilities%5B%5D=active&availabilities%5B%5D=reserved&welcome=true";
} else {
redirectionUrl = "https://anfina.ch/immobilien/?availabilities%5B%5D=active&availabilities%5B%5D=reserved&welcome=truem"; // Default URL
}
// Redirect the user to the appropriate URL
window.location.href = redirectionUrl;
// Prevent the form from submitting and reloading the page
return false;
}
</script>
</body>
</html>