File size: 5,476 Bytes
34a6964 ba8f00b 34a6964 ba8f00b 34a6964 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
document.addEventListener('DOMContentLoaded', () => {
// Initialize search functionality
const demoListings = [
{title:"Studio Amsterdam Centrum €1200", city:"Amsterdam", price:1200, beds:1, img:"https://static.photos/apartment/640x360/1"},
{title:"2-Bed Rotterdam €1450", city:"Rotterdam", price:1450, beds:2, img:"https://static.photos/apartment/640x360/2"},
{title:"Appartamento Utrecht €1390", city:"Utrecht", price:1390, beds:2, img:"https://static.photos/apartment/640x360/3"}
];
document.getElementById('searchForm').addEventListener('submit', async e => {
e.preventDefault();
const city = document.getElementById('city').value;
const maxPrice = document.getElementById('maxPrice').value;
const bedrooms = document.getElementById('bedrooms').value.match(/\d+/)[0];
showLoading();
await new Promise(r => setTimeout(r, 1500)); // Simulate API delay
renderResults(demoListings.filter(h =>
h.city.toLowerCase().includes(city.toLowerCase()) &&
h.price <= maxPrice &&
h.beds <= parseInt(bedrooms)
));
updateTimestamp();
});
function renderResults(houses) {
const container = document.getElementById('resultsContainer');
container.innerHTML = houses.map(h => `
<div class="bg-white/10 backdrop-blur-xl rounded-2xl p-6 border border-purple-500/30 hover:border-purple-400 hover:scale-105 transition-all group">
<img src="${h.img}" class="w-full h-48 object-cover rounded-xl mb-4 group-hover:scale-105 transition">
<h3 class="text-xl font-bold mb-2">${h.title}</h3>
<div class="flex justify-between text-lg font-semibold text-purple-400">
<span>€${h.price}/mo</span>
<span>${h.beds} 🛏️</span>
</div>
<a href="#" class="mt-4 block bg-gradient-to-r from-purple-600 to-pink-600 text-white py-2 px-4 rounded-xl text-center hover:scale-105 transition">Vedi Dettagli</a>
</div>
`).join('') || '<div class="col-span-full text-center py-16 text-gray-400"><i data-feather="home" class="w-16 h-16 mx-auto mb-4"></i><p>Nessun risultato. Prova altri filtri!</p></div>';
feather.replace();
}
function showLoading() {
document.getElementById('resultsContainer').innerHTML = '<div class="col-span-full text-center py-16"><div class="animate-spin w-12 h-12 border-4 border-purple-500 border-t-transparent rounded-full mx-auto mb-4"></div><p>🔍 Cercando su Pararius...</p></div>';
}
function updateTimestamp() {
document.getElementById('lastUpdate').textContent = `Ultimo update: ${new Date().toLocaleString('it-IT')} (ogni 60min)`;
}
// Auto-update every 60min
setInterval(() => {
if (document.visibilityState === 'visible') {
document.getElementById('searchForm').dispatchEvent(new Event('submit'));
}
}, 3600000);
updateTimestamp();
// Add interactive hover effects
const cards = document.querySelectorAll('div[class*="bg-gradient"]');
cards.forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-5px)';
card.style.boxShadow = '0 20px 25px -5px rgba(0, 0, 0, 0.3)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'translateY(0)';
card.style.boxShadow = 'none';
});
});
// Add floating animation to hero section
const hero = document.querySelector('section:first-of-type');
if (hero) {
hero.classList.add('animate-float');
}
// Add particles background
const canvas = document.createElement('canvas');
canvas.style.position = 'fixed';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.width = '100vw';
canvas.style.height = '100vh';
canvas.style.pointerEvents = 'none';
canvas.style.zIndex = '-1';
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const particles = [];
const particleCount = 50;
for (let i = 0; i < particleCount; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 3 + 1,
speedX: Math.random() * 1 - 0.5,
speedY: Math.random() * 1 - 0.5,
color: `rgba(159, 122, 234, ${Math.random() * 0.5})`
});
}
function animateParticles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
ctx.fillStyle = particle.color;
ctx.fill();
particle.x += particle.speedX;
particle.y += particle.speedY;
if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1;
if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1;
});
requestAnimationFrame(animateParticles);
}
animateParticles();
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
}); |