217 lines
7.0 KiB
HTML
217 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Home pricing tool</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f2f2f2;
|
|
padding: 20px;
|
|
}
|
|
|
|
h2 {
|
|
color: #333;
|
|
}
|
|
|
|
form {
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: #555;
|
|
}
|
|
|
|
input[type="text"],
|
|
select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin-bottom: 15px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
box-sizing: border-box; /* Ensure padding and border are included in element's total width and height */
|
|
}
|
|
|
|
input[type="button"] {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
padding: 15px 30px; /* Adjusted padding to make it larger */
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
display: block; /* Centering the button */
|
|
margin: 0 auto; /* Centering the button */
|
|
}
|
|
|
|
input[type="button"]:hover {
|
|
background-color: #45a049;
|
|
}
|
|
|
|
#response {
|
|
margin-top: 20px;
|
|
border: 1px solid #ccc;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
#response h3 {
|
|
color: #333;
|
|
margin-top: 0;
|
|
}
|
|
|
|
#response pre {
|
|
background-color: #f9f9f9;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
border: 1px solid #ccc;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h2>Home pricing tool</h2>
|
|
|
|
<form id="propertyForm" action="#" method="post">
|
|
<label for="powierzchnia">Powierzchnia:</label>
|
|
<input type="text" id="powierzchnia" name="powierzchnia">
|
|
|
|
<label for="rok_budowy">Rok budowy:</label>
|
|
<input type="text" id="rok_budowy" name="rok_budowy">
|
|
|
|
<label for="ilosc_pokoi">Ilość pokoi:</label>
|
|
<input type="text" id="ilosc_pokoi" name="ilosc_pokoi">
|
|
|
|
<label for="numer_pietra">Numer piętra:</label>
|
|
<input type="text" id="numer_pietra" name="numer_pietra">
|
|
|
|
<label for="forma_wlasnosci">Forma własności:</label>
|
|
<select id="forma_wlasnosci" name="forma_wlasnosci">
|
|
<option value="pełna własność">pełna własność</option>
|
|
<option value="spółdzielcze wł. prawo do lokalu">spółdzielcze wł. prawo do lokalu</option>
|
|
</select>
|
|
|
|
<label for="dzielnica">Dzielnica:</label>
|
|
<select id="dzielnica" name="dzielnica">
|
|
<option value="Bartoszowice">Bartoszowice</option>
|
|
<option value="Bieńkowice">Bieńkowice</option>
|
|
<option value="Biskupin">Biskupin</option>
|
|
<option value="Borek">Borek</option>
|
|
<option value="Brochów">Brochów</option>
|
|
<option value="Dąbie">Dąbie</option>
|
|
<option value="Gaj">Gaj</option>
|
|
<option value="Gajowice">Gajowice</option>
|
|
<option value="Grabiszyn">Grabiszyn</option>
|
|
<option value="Grabiszynek">Grabiszynek</option>
|
|
<option value="Gądów">Gądów</option>
|
|
<option value="Huby">Huby</option>
|
|
<option value="Iwiny">Iwiny</option>
|
|
<option value="Jagodno">Jagodno</option>
|
|
<option value="Karłowice">Karłowice</option>
|
|
<option value="Klecina">Klecina</option>
|
|
<option value="Kleczków">Kleczków</option>
|
|
<option value="Kowale">Kowale</option>
|
|
<option value="Kozanów">Kozanów</option>
|
|
<option value="Krzyki">Krzyki</option>
|
|
<option value="Księże">Księże</option>
|
|
<option value="Kuźniki">Kuźniki</option>
|
|
<option value="Leśnica">Leśnica</option>
|
|
<option value="Ligota">Ligota</option>
|
|
<option value="Lipa Piotrowska">Lipa Piotrowska</option>
|
|
<option value="Maślice">Maślice</option>
|
|
<option value="Muchobór Mały">Muchobór Mały</option>
|
|
<option value="Muchobór Wielki">Muchobór Wielki</option>
|
|
<option value="Nadodrze">Nadodrze</option>
|
|
<option value="Nowy Dwór">Nowy Dwór</option>
|
|
<option value="Oporów">Oporów</option>
|
|
<option value="Osobowice">Osobowice</option>
|
|
<option value="Ołbin">Ołbin</option>
|
|
<option value="Ołtaszyn">Ołtaszyn</option>
|
|
<option value="Partynice">Partynice</option>
|
|
<option value="Pawłowice">Pawłowice</option>
|
|
<option value="Pilczyce">Pilczyce</option>
|
|
<option value="Plac Grunwaldzki">Plac Grunwaldzki</option>
|
|
<option value="Polanowice">Polanowice</option>
|
|
<option value="Popowice Północne">Popowice Północne</option>
|
|
<option value="Powstańców Śląskich">Powstańców Śląskich</option>
|
|
<option value="Poświętne">Poświętne</option>
|
|
<option value="Pracze Odrzańskie">Pracze Odrzańskie</option>
|
|
<option value="Przedmieście Oławskie">Przedmieście Oławskie</option>
|
|
<option value="Przedmieście Świdnickie">Przedmieście Świdnickie</option>
|
|
<option value="Psie Pole">Psie Pole</option>
|
|
<option value="Radomierzyce">Radomierzyce</option>
|
|
<option value="Radwanice">Radwanice</option>
|
|
<option value="Różanka">Różanka</option>
|
|
<option value="Sołtysowice">Sołtysowice</option>
|
|
<option value="Stare Miasto">Stare Miasto</option>
|
|
<option value="Strachocin">Strachocin</option>
|
|
<option value="Strachowice">Strachowice</option>
|
|
<option value="Swojczyce">Swojczyce</option>
|
|
<option value="Szczepin">Szczepin</option>
|
|
<option value="Szczytniki">Szczytniki</option>
|
|
<option value="Sępolno">Sępolno</option>
|
|
<option value="Tarnogaj">Tarnogaj</option>
|
|
<option value="Widawa">Widawa</option>
|
|
<option value="Wilczyce">Wilczyce</option>
|
|
<option value="Wojszyce">Wojszyce</option>
|
|
<option value="Wysoka">Wysoka</option>
|
|
<option value="Zawidawie">Zawidawie</option>
|
|
<option value="Żerniki">Żerniki</option>
|
|
</select>
|
|
|
|
<label for="stan_nieruchomosci">Stan nieruchomości:</label>
|
|
<select id="stan_nieruchomosci" name="stan_nieruchomosci">
|
|
<option value="do remontu">do remontu</option>
|
|
<option value="do wykończenia">do wykończenia</option>
|
|
<option value="do zamieszkania">do zamieszkania</option>
|
|
</select>
|
|
|
|
<input type="button" value="Wylicz cenę" onclick="submitForm()">
|
|
</form>
|
|
|
|
<div id="response">
|
|
<h3>Spodziewana cena: </h3>
|
|
<div id="response_value"></div>
|
|
</div>
|
|
|
|
<script>
|
|
function submitForm() {
|
|
var formData = {
|
|
powierzchnia: document.getElementById("powierzchnia").value,
|
|
rok_budowy: document.getElementById("rok_budowy").value,
|
|
ilosc_pokoi: document.getElementById("ilosc_pokoi").value,
|
|
numer_pietra: document.getElementById("numer_pietra").value,
|
|
forma_wlasnosci: document.getElementById("forma_wlasnosci").value,
|
|
dzielnica: document.getElementById("dzielnica").value,
|
|
stan_nieruchomosci: document.getElementById("stan_nieruchomosci").value
|
|
};
|
|
const url = 'http://localhost:8081/calculate_price';
|
|
|
|
fetch(url, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(formData),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
document.getElementById("response_value").textContent = data["estimated_price"] + " PLN"
|
|
console.log(data["estimated_price"])
|
|
})
|
|
.catch(error => console.error('Error:', error));
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|