<!DOCTYPE html>
<html lang="es">
<head>
<link rel="icon" href="/favicons/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16-ultra.png">
<link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png">
<link rel="manifest" href="/favicons/site.webmanifest">
<meta name="theme-color" content="#000000">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="En alquiler en Torrox-Costa (Andalucía) : un apartamento muy bonito y tranquilo con vistas al mar. Alojamiento entero. A 1 minuto a pie de la playa.">
<title>Apto-Torrox Alquilamos un apartamento muy bonito con vistas al mar</title>
<link rel="canonical" href="https://www.apto-torrox.eu/index.html/">
<!-- Balises Open Graph de base -->
<meta property="og:title" content="Apartamento con vistas al mar En alquiler !!!">
<meta property="og:description" content="Torrox-Costa : El mejor clima de Europa">
<meta property="og:image" content="https://www.apto-torrox.eu/img/terraza2.jpg">
<meta property="og:url" content="https://www.apto-torrox.eu/index.html">
<meta property="og:type" content="website">
<!-- Balises supplémentaires recommandées -->
<meta property="og:site_name" content="Nom de votre site">
<meta property="og:locale" content="fr_FR">
<meta property="fb:app_id" content="votre-id-app-facebook"> <!-- Optionnel -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet">
<script>tailwind.config={theme:{extend:{colors:{primary:'#3176FF',secondary:'#0ea5e9'},borderRadius:{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}</script>
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
.calendar-day {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
transition: all 0.2s ease;
}
.calendar-day.available {
background-color: rgba(134, 239, 172, 0.1);
color: #86efac;
}
.calendar-day.available:hover {
background-color: rgba(134, 239, 172, 0.2);
}
.calendar-day.booked {
background-color: rgba(255, 0, 0, 0.2);
color: #fca5a5;
font-weight: bold;
}
.calendar-day.selected {
background-color: rgba(96, 165, 250, 0.2)!important;
color: #60a5fa!important;
font-weight: bold;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.neon-gradient {
background-image: linear-gradient(90deg, #ffff00, #ff0000);
background-size: 400% 400%;
animation: gradientShift 5s ease infinite;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
filter: drop-shadow(0 0 4px #ff0000) drop-shadow(0 0 6px #ff8800) drop-shadow(0 0 6px #ffff00);
}
/* Language Switcher Styles */
.language-switcher {
display: flex;
gap: 8px;
margin-left: 20px;
}
/* Language Switcher Styles */
.language-switcher {
position: relative;
z-index: 60;
}
.lang-btn {
/* Using same classes as the booking button */
background: #3176FF !important;
color: white !important;
border-radius: 8px !important;
border: 2px solid #fbbf24 !important; /* yellow-400 */
cursor: pointer;
transition: all 0.3s ease !important;
display: flex;
align-items: center;
justify-content: center;
min-width: 60px;
height: 44px;
}
.lang-btn:hover {
background: rgba(49, 118, 255, 0.8) !important; /* primary/80 */
}
.lang-btn:active {
transform: scale(0.95) !important;
}
/* Mobile dropdown styles */
.language-dropdown {
backdrop-filter: blur(10px);
background: rgba(55, 65, 81, 0.95);
border: 2px solid #fbbf24 !important; /* yellow-400 border */
}
.lang-option {
color: white;
font-size: 14px;
transition: all 0.2s ease;
}
.lang-option:hover {
background: rgba(255, 255, 255, 0.1);
}
/* Mobile-specific adjustments */
@media (max-width: 768px) {
.language-switcher {
margin-left: 10px;
}
.lang-btn {
min-width: 55px;
height: 40px;
padding: 6px 12px;
font-size: 13px;
}
.language-dropdown {
right: 0;
left: auto;
min-width: 150px;
}
}
/* Ensure dropdown doesn't get cut off on small screens */
@media (max-width: 340px) {
.language-dropdown {
right: 0;
left: auto;
transform: none;
}
}
/* Loading spinner */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body class="bg-gray-900 text-gray-100">
<header class="fixed w-full top-0 z-50 bg-gray-800/80 backdrop-blur-sm">
<nav class="container mx-auto px-4 py-4">
<div class="flex items-center justify-between">
<!-- Logo et titre -->
<div class="flex items-center space-x-1">
<a
href="https://apto-torrox.eu"
class="inline-block focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
title="Inicio"
aria-label="Logo Apto Torrox"
>
<picture>
<img
src="./img/logo.png"
alt="Apto Torrox - Apartamento en alquiler en Costa del Sol "
class="h-8 w-auto sm:h-8 md:h-10"
loading="lazy"
width="150"
height="40"
>
</picture>
</a>
<i class="ri-sun-line text-2xl sm:text-3xl text-yellow-400"></i>
<img class="h-6 sm:h-8 md:h-10" src="./img/Andalucia.png" alt="Andalucia">
</div>
<!-- Language Switcher -->
<div class="language-switcher relative">
<button class="lang-btn active flex items-center space-x-1 px-4 py-2 bg-primary text-white rounded-md border-2 border-yellow-400 hover:bg-primary/80 active:scale-95 transition">
<span class="current-lang">ES</span>
<i class="ri-arrow-down-s-line text-sm"></i>
</button>
<div class="language-dropdown hidden absolute top-full left-0 mt-1 bg-gray-800 border-2 border-yellow-400 rounded-lg shadow-lg z-50 min-w-[120px]">
<button class="lang-option w-full text-left px-4 py-2 hover:bg-gray-700 transition-colors" data-lang="es">
<span class="flex items-center space-x-2">
<span>ES</span>
<span class="text-sm text-gray-300">Español</span>
</span>
</button>
<button class="lang-option w-full text-left px-4 py-2 hover:bg-gray-700 transition-colors" data-lang="fr">
<span class="flex items-center space-x-2">
<span>FR</span>
<span class="text-sm text-gray-300">Français</span>
</span>
</button>
<button class="lang-option w-full text-left px-4 py-2 hover:bg-gray-700 transition-colors" data-lang="nl">
<span class="flex items-center space-x-2">
<span>NL</span>
<span class="text-sm text-gray-300">Nederlands</span>
</span>
</button>
<button class="lang-option w-full text-left px-4 py-2 hover:bg-gray-700 transition-colors" data-lang="de">
<span class="flex items-center space-x-2">
<span>DE</span>
<span class="text-sm text-gray-300">Deutsch</span>
</span>
</button>
<button class="lang-option w-full text-left px-4 py-2 hover:bg-gray-700 transition-colors" data-lang="en">
<span class="flex items-center space-x-2">
<span>EN</span>
<span class="text-sm text-gray-300">English</span>
</span>
</button>
</div>
</div>
<!-- Menu mobile toggle -->
<button id="menu-toggle" class="md:hidden text-yellow-400 text-3xl focus:outline-none">
<i class="ri-menu-line"></i>
</button>
<!-- Menu de navigation (desktop) -->
<div class="hidden md:flex items-center space-x-6">
<a href="#home" class="hover:text-yellow-300 transition-colors" data-translate="home">Inicio</a>
<a href="#gallery" class="hover:text-yellow-300 transition-colors" data-translate="gallery">Galería</a>
<a href="#booking" class="hover:text-yellow-300 transition-colors" data-translate="booking">Reservas</a>
<a href="#contact" class="hover:text-yellow-300 transition-colors" data-translate="contact">Contacto</a>
<button onclick="document.querySelector('#booking').scrollIntoView({behavior: 'smooth'})" class="bg-primary text-white px-4 py-2 rounded-md border-2 border-yellow-400 hover:bg-primary/80 active:scale-95 transition">
<span data-translate="bookNow">Reservar</span>
</button>
</div>
</div>
<!-- Menu mobile (hidden par défaut) -->
<div id="mobile-menu" class="md:hidden hidden flex-col mt-4 space-y-4 text-center">
<a href="#home" class="block hover:text-yellow-300" data-translate="home">Inicio</a>
<a href="#gallery" class="block hover:text-yellow-300" data-translate="gallery">Galería</a>
<a href="#booking" class="block hover:text-yellow-300" data-translate="booking">Reservas</a>
<a href="#contact" class="block hover:text-yellow-300" data-translate="contact">Contacto</a>
<button onclick="document.querySelector('#booking').scrollIntoView({behavior: 'smooth'})" class="bg-primary text-white px-4 py-2 rounded-md border-2 border-yellow-400 hover:bg-primary/80 active:scale-95 transition">
<span data-translate="bookNow">Reservar</span>
</button>
</div>
</nav>
</header>
<main class="pt-20">
<section id="home" class="relative h-screen">
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('./img/new/terraza2.jpg')"></div>
<div class="relative container mx-auto px-4 sm:px-6 h-full flex flex-col justify-center text-center text-white">
<div class="max-w-full">
<h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-6" data-translate="mainTitle">ALQUILER VACACIONAL EL MORCHE (MÁLAGA)</h1>
<h2 class="neon-gradient text-xl sm:text-2xl md:text-4xl lg:text-5xl font-bold italic mb-8 mx-auto inline-block text-transparent bg-clip-text" data-translate="slogan">
« El mejor clima de Europa »
</h2>
<h3 class="text-xl sm:text-2xl md:text-3xl font-bold mb-4" data-translate="subtitle">Apartamento tranquilo con vistas al mar para máx. 4 personas</h3>
<h4 class="text-lg sm:text-xl md:text-2xl font-bold mb-8" data-translate="location">Alojamiento entero<br>A 1 minuto a pie de la playa</h4>
<button onclick="document.querySelector('#booking').scrollIntoView({behavior: 'smooth'})"
class="bg-primary text-white px-6 py-3 rounded-button border-2 border-yellow-400 hover:bg-primary/80 transition-colors text-base sm:text-lg active:scale-95 transform transition-transform">
<span data-translate="checkAvailability">Ver disponibilidad</span>
</button>
</div>
</div>
</section>
<br><br>
<div class="md:col-span-full lg:col-span-3 gap-8">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold mb-12 text-center text-yellow-400"><i class="ri-sun-line text-2xl text-yellow-400"></i> <span data-translate="weatherTitle">TIEMPO El Morche TORROX COSTA en directo</span> <i class="ri-sun-line text-2xl text-yellow-400"></i></h2>
<div class="border-2 border-yellow-400 p-2 rounded-lg overflow-hidden object-cover">
<a class="weatherwidget-io" href="https://forecast7.com/es/36d73n3d95/torrox-costa/" data-label_1="TORROX COSTA" data-label_2="Mejor clima de europa" data-theme="sky" >TIEMPO TORROX COSTA</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>
</div>
</div>
<section id="quick-info" class="py-20 bg-gray-800">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="bg-gray-700 p-6 rounded-lg border-2 border-yellow-400">
<div class="w-12 h-12 flex items-center justify-center mb-4">
<i class="ri-hotel-bed-line text-3xl text-secondary"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-yellow-400" data-translate="bedrooms">2 Habitaciones</h3>
<p class="text-gray-400" data-translate="bedroomsDesc">1 dormitorio principal con cama doble <br>1 dormitorio con cama sencilla o convertible en doble</p>
</div>
<div class="bg-gray-700 p-6 rounded-lg border-2 border-yellow-400">
<div class="w-12 h-12 flex items-center justify-center mb-4">
<i class="ri-home-line text-3xl text-secondary"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-yellow-400" data-translate="livingRoom">Salón</h3>
<p class="text-gray-400" data-translate="livingRoomDesc">Salón con cocina abierta equipada</p>
</div>
<div class="bg-gray-700 p-6 rounded-lg border-2 border-yellow-400">
<div class="w-12 h-12 flex items-center justify-center mb-4">
<i class="ri-parking-box-line text-3xl text-secondary"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-yellow-400" data-translate="parking">Estacionamiento seguro</h3>
<p class="text-gray-400" data-translate="parkingDesc">Aparcamiento privado subterráneo </p>
</div>
<div class="bg-gray-700 p-6 rounded-lg border-2 border-yellow-400">
<div class="w-12 h-12 flex items-center justify-center mb-4">
<i class="ri-eye-line text-3xl text-secondary"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-yellow-400" data-translate="seaView">Vistas al mar</h3>
<p class="text-gray-400" data-translate="seaViewDesc">Desde el salón, la terraza y desde una de las habitaciones</p>
</div>
</div>
</div>
<br>
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="bg-gray-700 p-6 rounded-lg border-2 border-yellow-400">
<div class="w-12 h-12 flex items-center justify-center mb-4">
<i class="ri-snowflake-line text-3xl text-secondary"></i><i class="ri-sun-line text-3xl text-yellow-400 text-secondary"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-yellow-400" data-translate="airConditioning">Aire acondicionado</h3>
<p class="text-gray-400" data-translate="airConditioningDesc">una unidad por habitacion <br>y otra en el salón</p>
</div>
<div class="bg-gray-700 p-6 rounded-lg border-2 border-yellow-400">
<div class="w-12 h-12 flex items-center justify-center mb-4">
<i class="ri-tv-2-line text-3xl text-secondary"></i><i class="ri-fridge-line text-3xl text-secondary"></i><img class="w-10 h-6" src="./img/towel.png" alt="Towels">
</div>
<h3 class="text-xl font-semibold mb-2 text-yellow-400" data-translate="livingRoomEquipment">Equipamiento del salón</h3>
<p class="text-gray-400" data-translate="livingRoomEquipmentDesc">Cocina, Congelador, Microondas/parrilla, Lavadora, Cafetera eléctrica, Vajilla, <br>
Televisión y Receptor de satélite</p>
</div>
<div class="bg-gray-700 p-6 rounded-lg border-2 border-yellow-400">
<div class="w-12 h-12 flex items-center justify-center mb-4">
<i class="ri-emotion-happy-line text-3xl text-secondary"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-yellow-400" data-translate="miscEquipment">Equipamiento diverso</h3>
<p class="text-gray-200" data-translate="childrenWelcome">Niños bienvenidos</p><p class="text-gray-400" data-translate="miscEquipmentDesc">
(cuna bébé y silla trona disponibles),<br> Ropa de cama, Toallas de baño y Toallas de playa incluidas<br>Acceso a la terraza de la azotea (tendederos/ropas)</p>
</div>
<div class="bg-gray-700 p-6 rounded-lg border-2 border-yellow-400">
<div class="w-12 h-12 flex items-center justify-center mb-4">
<img class="w-10 h-6" src="./img/palm_tree.png" alt="Palm"><i class="ri-beer-line text-3xl text-secondary"></i>
<i class="ri-restaurant-line text-3xl text-secondary"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-yellow-400" data-translate="nearbyServices">Servicios en las proximidades</h3>
<p class="text-gray-400" data-translate="nearbyServicesDesc">Comercios, Bares, Restaurantes, Chiringuitos, Parques infantiles y deportivos, Paseo marítimo, Paradas de autobús, etc... </p>
</div>
</div>
</div>
</section>
<section id="booking" class="py-20 bg-gray-900">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold mb-12 text-center text-yellow-400" data-translate="bookYourStay">Reserve su estancia</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div class="bg-gray-800 p-8 rounded-lg border-2 border-yellow-400 p-2">
<div class="mb-8">
<h3 class="text-xl font-semibold mb-4 text-yellow-400" data-translate="selectDates">Seleccione sus fechas</h3>
<div id="calendar">
<div class="flex justify-center items-center py-8">
<div class="loading"></div>
<span class="ml-2" data-translate="loadingCalendar">Cargando calendario...</span>
</div>
</div>
</div>
<div class="text-sm text-gray-400 flex flex-wrap justify-center sm:justify-start gap-x-6 gap-y-2 mb-6">
<span class="flex items-center">
<span class="w-4 h-4 bg-[#86efac] rounded mr-2"></span><span data-translate="available">Disponible</span>
</span>
<span class="flex items-center">
<span class="w-4 h-4 bg-[#fca5a5] rounded mr-2"></span><span data-translate="booked">Reservado</span>
</span>
<span class="flex items-center">
<span class="w-4 h-4 bg-[#60a5fa] rounded mr-2"></span><span data-translate="selected">Seleccionado</span>
</span>
</div>
</div>
<div class="bg-gray-800 p-8 rounded-lg border-2 border-yellow-400 p-2">
<div class="mb-8">
<h3 class="text-xl font-semibold mb-4 text-yellow-400" data-translate="seasonalRates">Tarifas por temporada</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Temporada alta -->
<div class="bg-gray-700 p-4 rounded-lg text-center">
<div class="w-10 h-10 flex items-center justify-center mx-auto mb-2">
<i class="ri-sun-line text-2xl text-yellow-400"></i>
</div>
<h4 class="font-semibold mb-1" data-translate="highSeason">Temporada</h4>
<h4 class="font-semibold mb-1" data-translate="high">alta</h4>
<p class="text-lg">€ 750,-/semana</p>
<p class="text-sm text-gray-400" data-translate="highSeasonPeriod">Jul-Aug [&] Fin de año</p>
</div>
<!-- Temporada media -->
<div class="bg-gray-700 p-4 rounded-lg text-center">
<div class="w-10 h-10 flex items-center justify-center mx-auto mb-2">
<i class="ri-sun-foggy-line text-2xl text-yellow-400"></i>
</div>
<h4 class="font-semibold mb-1" data-translate="midSeason">Temporada</h4>
<h4 class="font-semibold mb-1" data-translate="mid">media</h4>
<p class="text-lg">€ 550,-/semana</p>
<p class="text-sm text-gray-400" data-translate="midSeasonPeriod">Apr-Jun [&] Sep-Oct</p>
</div>
<!-- Temporada baja -->
<div class="bg-gray-700 p-4 rounded-lg text-center">
<div class="w-10 h-10 flex items-center justify-center mx-auto mb-2">
<i class="ri-sun-foggy-line text-2xl text-gray-400"></i>
</div>
<h4 class="font-semibold mb-1" data-translate="lowSeason">Temporada</h4>
<h4 class="font-semibold mb-1" data-translate="low">baja</h4>
<p class="text-lg">€ 400,-/semana</p>
<p class="text-sm text-gray-400" data-translate="lowSeasonPeriod">Resto del año</p>
</div>
</div>
<br>
<label class="block mb-2 text-center text-yellow-400 text-sm" data-translate="nonSundayRental">Para alquileres fechas que no sean de domingo a domingo, <br>póngase en contacto con nosotros directamente.</label><br>
<h3 class="text-xl text-center font-semibold mb-6" data-translate="bookingSummary">Resumen de la reserva</h3>
<div class="space-y-4 mb-8">
<div class="space-y-4 pb-4 border-b border-gray-700">
<div>
<label class="block mb-2 text-sm" data-translate="fullName">Nombre y apellidos</label>
<input type="text" class="w-full px-4 py-2 bg-gray-700 rounded border-none text-sm" required>
</div>
<div>
<label class="block mb-2 text-sm" data-translate="phoneNumber">Número de teléfono</label>
<input type="tel" class="w-full px-4 py-2 bg-gray-700 rounded border-none text-sm" required>
</div>
<div>
<label class="block mb-2 text-sm" data-translate="emailAddress">Dirección de correo electrónico</label>
<input type="email" class="w-full px-4 py-2 bg-gray-700 rounded border-none text-sm" required>
</div>
</div>
<div class="flex justify-between">
<span data-translate="checkIn">Check-in</span>
<span id="check-in" data-translate="selectDate">Seleccione una fecha</span>
</div>
<div class="flex justify-between">
<span data-translate="checkOut">Check-out</span>
<span id="check-out" data-translate="selectDate">Seleccione una fecha</span>
</div>
<div class="flex justify-between">
<span data-translate="numberOfWeeks">Número de semanas</span>
<span id="weeks">0</span>
</div>
<div class="flex justify-between">
<div>
</div>
</div>
<div class="flex justify-between text-xl font-semibold mt-4 pt-4 border-t border-gray-700">
<span data-translate="total">Total</span>
<span id="total">€0</span>
</div>
<h4 class="text-sm mb-12 text-center text-yellow-400" data-translate="paymentTerms">25% de depósito en la reserva y el resto pagado antes de la estancia.</h4>
</div>
<button onclick="sendBookingSummary()" class="w-full bg-primary text-white py-3 !rounded-button hover:bg-primary/80 transition-colors">
<span data-translate="confirmBooking">Confirmar reserva</span>
</button>
<br><br>
</div>
</div>
</div>
</div>
</section>
<section id="gallery" class="py-20 bg-gray-800">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold mb-12 text-center text-yellow-400" data-translate="gallery">Galeria</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/new/terraza2.jpg" alt="Terraza" class="w-full h-full object-cover">
</div>
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/new/sala3.jpg" alt="Sala 3" class="w-full h-full object-cover">
</div>
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/new/sala.jpg" alt="Sala" class="w-full h-full object-cover">
</div>
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/new/sala2.jpg" alt="Sala 2" class="w-full h-full object-cover">
</div>
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/new/cocina.jpg" alt="Cocina" class="w-full h-full object-cover">
</div>
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/new/ducha.jpg" alt="Ducha" class="w-full h-full object-cover">
</div>
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/new/terraza.jpg" alt="Terraza" class="w-full h-full object-cover">
</div>
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/new/pieza2a.jpg" alt="Pieza 2" class="w-full h-full object-cover">
</div>
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/new/pieza2b.jpg" alt="Pieza 2" class="w-full h-full object-cover">
</div>
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/new/pieza1.jpg" alt="Pieza 1" class="w-full h-full object-cover">
</div>
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/new/tendedero.jpg" alt="Tendedero/Ropas" class="w-full h-full object-cover">
</div>
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/new/paseo_maritimo.jpg" alt="Paseo marítimo" class="w-full h-full object-cover">
</div>
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/new/vista3.jpg" alt="Vista" class="w-full h-full object-cover">
</div>
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/new/ascensor.jpg" alt="Ascensor" class="w-full h-full object-cover">
</div>
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/new/playa_noche.jpg" alt="Playa de noche" class="w-full h-full object-cover">
</div>
<div class="md:col-span-full lg:col-span-3 gap-8">
<div class="border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/hero.png" alt="Situation" class="w-full h-128 object-cover">
</div>
</div><br>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/8.jpg" alt="Playa" class="w-full h-full object-cover">
</div>
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<video src="./img/mp4a.mp4" alt="Video" controls="controls" width="100%" height="100%" preload="metadata" type="video/mp4" class="h-full w-full object-cover"></video>
</div>
<div class="mb-4 h-128 w-128 border-2 border-yellow-400 p-2 rounded-lg overflow-hidden">
<img src="./img/9.jpg" alt="Terrace" class="w-full h-full object-cover">
</div>
</div></div>
</section>
<section id="recordatorio" class="py-20 bg-gray-900">
<div class="container mx-auto px-6 border-2 border-yellow-400 p-2 rounded-lg">
<h2 class="text-1xl font-bold mb-12 text-center text-yellow-400" data-translate="otherAspects">Otros aspectos a destacar</h2>
<p class="text-gray-400 text-center" data-translate="otherAspectsDesc">
Apartamento para no fumadores y no se admiten mascotas.<br><br>
El estacionamiento está sujeto al tamaño del coche (2,12 x 4,50 m maximo).<br><br>
¡Queda terminantemente prohibido organizar fiestas u otros eventos en el edificio!<br><br>
La legislación española, nos exige solicitar documentos a todos los huéspedes.<br> No será posible ingresar en el propiedad sin proporcionar identificaciones, tenemos un proceso de check-in en línea que debe completarse antes de la llegada.
</p>
</div></section>
<section id="contact" class="py-20 bg-gray-900">
<div class="container mx-auto px-6 border-2 border-yellow-400 p-2 rounded-lg">
<h2 class="text-3xl font-bold mb-12 text-center text-yellow-400" data-translate="contact">Contacto</h2>
<p class="text-xl font-semibold mb-2 text-center">
<span data-translate="phoneWhatsApp">Teléfono o WhatsApp</span> : +32 473 269 927
</p>
<p class="text-gray-400 text-center" data-translate="weSpeakSpanish">¡Hablamos español!</p>
<div class="max-w-2xl mx-auto">
<form class="space-y-6" id="contactForm">
<div>
<label class="block mb-2" data-translate="fullName">Nombre completo</label>
<input type="text" class="w-full px-4 py-2 bg-gray-800 rounded border-none" required>
</div>
<div>
<label class="block mb-2" data-translate="emailAddress">Correo electrónico</label>
<input type="email" class="w-full px-4 py-2 bg-gray-800 rounded border-none" required>
</div>
<div>
<label class="block mb-2" data-translate="message">Mensaje</label>
<textarea class="w-full px-4 py-2 bg-gray-800 rounded border-none h-32" required></textarea>
</div>
<button type="button" onclick="sendContactMessage()" class="w-full bg-primary text-white py-3 !rounded-button hover:bg-primary/80 transition-colors">
<span data-translate="sendMessage">Enviar mensaje</span>
</button>
</form>
</div>
</div>
</section>
</div>
</main>
<footer class="bg-gray-800 py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-semibold mb-4 text-yellow-400" data-translate="aboutUs">Sobre Nosotros</h3>
<p class="text-gray-400" data-translate="aboutUsDesc">Somos belgas y estamos enamorados de España, el sol y la tranquilidad del mar. Hace dos años encontramos nuestro pequeño paraíso en El Morche, un rincón encantador de la Costa del Sol, donde venimos a recargar energías siempre que podemos.<br>
Este bonito apartamento con vistas al mar lo hemos preparado con mucho cariño para ofrecerles a nuestros huéspedes estancias inolvidables en «El mejor clima de Europa». <br>
Para nosotros no es solo un lugar de vacaciones, es un espacio que cuidamos con mucho cariño y que ahora queremos compartir con otras personas que, como nosotros, buscan descansar, disfrutar y sentirse como en casa.<br>
Alquilamos directamente y estamos siempre disponibles para responder a tus dudas y ayudarte a que tu estancia sea perfecta.<br>
¡Y sí, casi siempre traemos con nosotros nuestro chocolate belga! 😉</p>
<br>
<div>
<img style="" src="./img/turismo.jpg" height="110px" width="110px" alt="Junta de Andalucia"/>
<p class="text-gray-200"> VUT/MA/91969 </p>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-4 text-yellow-400" data-translate="apartmentAddress">Dirección del apartamento</h3>
<div class="text-gray-400">
<a
href="https://apto-torrox.eu"
class="inline-block focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
title="Inicio"
aria-label="Logo Apto Torrox"
>
<picture>
<img
src="./img/logo.png"
alt="Apto Torrox - Apartamento en alquiler en Costa del Sol "
class="h-8 w-auto sm:h-8 md:h-10"
loading="lazy"
width="150"
height="40"
>
</picture>
</a>
<p>29793 El Morche - TORROX COSTA (Provincia de Màlaga)</p>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
<p data-translate="copyright">© 2025 Apto-Torrox - Todos los derechos reservados.</p>
<i class="ri-leaf-fill"></i> <a href="mailto:Eric.Meesen@integral-solutions.eu" data-translate="developedBy">Sitio web desarrollado por Integral Solutions</a>
</div>
</div>
</footer>
<script>
// Language translations
const translations = {
es: {
// Navigation
"home": "Inicio",
"gallery": "Galería",
"booking": "Reservas",
"contact": "Contacto",
"bookNow": "Reservar",
// Hero section
"mainTitle": "ALQUILER VACACIONAL EL MORCHE (MÁLAGA)",
"slogan": "« El mejor clima de Europa »",
"subtitle": "Apartamento tranquilo con vistas al mar para máx. 4 personas",
"location": "Alojamiento entero<br>A 1 minuto a pie de la playa",
"checkAvailability": "Ver disponibilidad",
// Weather section
"weatherTitle": "TIEMPO El Morche TORROX COSTA en directo",
// Quick info section
"bedrooms": "2 Habitaciones",
"bedroomsDesc": "1 dormitorio principal con cama doble <br>1 dormitorio con cama sencilla o convertible en doble",
"livingRoom": "Salón",
"livingRoomDesc": "Salón con cocina abierta equipada",
"parking": "Estacionamiento seguro",
"parkingDesc": "Aparcamiento privado subterráneo",
"seaView": "Vistas al mar",
"seaViewDesc": "Desde el salón, la terraza y desde una de las habitaciones",
"airConditioning": "Aire acondicionado",
"airConditioningDesc": "una unidad por habitacion <br>y otra en el salón",
"livingRoomEquipment": "Equipamiento del salón",
"livingRoomEquipmentDesc": "Cocina, Congelador, Microondas/parrilla, Lavadora, Cafetera eléctrica, Vajilla, <br>Televisión y Receptor de satélite",
"miscEquipment": "Equipamiento diverso",
"childrenWelcome": "Niños bienvenidos",
"miscEquipmentDesc": "(cuna bébé y silla trona disponibles),<br> Ropa de cama, Toallas de baño y Toallas de playa incluidas<br>Acceso a la terraza de la azotea (tendederos/ropas)",
"nearbyServices": "Servicios en las proximidades",
"nearbyServicesDesc": "Comercios, Bares, Restaurantes, Chiringuitos, Parques infantiles y deportivos, Paseo marítimo, Paradas de autobús, etc...",
// Booking section
"bookYourStay": "Reserve su estancia",
"selectDates": "Seleccione sus fechas",
"available": "Disponible",
"booked": "Reservado",
"selected": "Seleccionado",
"seasonalRates": "Tarifas por temporada",
"highSeason": "Temporada",
"high": "alta",
"highSeasonPeriod": "Jul-Aug [&] Fin de año",
"midSeason": "Temporada",
"mid": "media",
"midSeasonPeriod": "Apr-Jun [&] Sep-Oct",
"lowSeason": "Temporada",
"low": "baja",
"lowSeasonPeriod": "Resto del año",
"nonSundayRental": "Para alquileres fechas que no sean de domingo a domingo, <br>póngase en contacto con nosotros directamente.",
"bookingSummary": "Resumen de la reserva",
"fullName": "Nombre y apellidos",
"phoneNumber": "Número de teléfono",
"emailAddress": "Dirección de correo electrónico",
"checkIn": "Check-in",
"checkOut": "Check-out",
"numberOfWeeks": "Número de semanas",
"total": "Total",
"paymentTerms": "25% de depósito en la reserva y el resto pagado antes de la estancia.",
"confirmBooking": "Confirmar reserva",
"selectDate": "Seleccione una fecha",
"loadingCalendar": "Cargando calendario...",
// Calendar translations
"january": "Enero",
"february": "Febrero",
"march": "Marzo",
"april": "Abril",
"may": "Mayo",
"june": "Junio",
"july": "Julio",
"august": "Agosto",
"september": "Septiembre",
"october": "Octubre",
"november": "Noviembre",
"december": "Diciembre",
"monday": "Lun",
"tuesday": "Mar",
"wednesday": "Mié",
"thursday": "Jue",
"friday": "Vie",
"saturday": "Sáb",
"sunday": "Dom",
// Gallery section
"gallery": "Galeria",
// Other aspects section
"otherAspects": "Otros aspectos a destacar",
"otherAspectsDesc": "Apartamento para no fumadores y no se admiten mascotas.<br><br>El estacionamiento está sujeto al tamaño del coche (2,12 x 4,50 m maximo).<br><br>¡Queda terminantemente prohibido organizar fiestas u otros eventos en el edificio!<br><br>La legislación española, nos exige solicitar documentos a todos los huéspedes.<br> No será posible ingresar en el propiedad sin proporcionar identificaciones, tenemos un proceso de check-in en línea que debe completarse antes de la llegada.",
// Contact section
"contact": "Contacto",
"phoneWhatsApp": "Teléfono o WhatsApp",
"weSpeakSpanish": "¡Hablamos español!",
"message": "Mensaje",
"sendMessage": "Enviar mensaje",
// Footer
"aboutUs": "Sobre Nosotros",
"aboutUsDesc": "Somos belgas y estamos enamorados de España, el sol y la tranquilidad del mar. Hace dos años encontramos nuestro pequeño paraíso en El Morche, un rincón encantador de la Costa del Sol, donde venimos a recargar energías siempre que podemos.<br>Este bonito apartamento con vistas al mar lo hemos preparado con mucho cariño para ofrecerles a nuestros huéspedes estancias inolvidables en «El mejor clima de Europa». <br>Para nosotros no es solo un lugar de vacaciones, es un espacio que cuidamos con mucho cariño y que ahora queremos compartir con otras personas que, como nosotros, buscan descansar, disfrutar y sentirse como en casa.<br>Alquilamos directamente y estamos siempre disponibles para responder a tus dudas y ayudarte a que tu estancia sea perfecta.<br> ¡Y sí, casi siempre traemos con nosotros nuestro chocolate belga! 😉",
"apartmentAddress": "Dirección del apartamento",
"copyright": "© 2025 Apto-Torrox - Todos los derechos reservados.",
"developedBy": "Sitio web desarrollado por Integral Solutions"
},
en: {
// Navigation
"home": "Home",
"gallery": "Gallery",
"booking": "Bookings",
"contact": "Contact",
"bookNow": "Book Now",
// Hero section
"mainTitle": "VACATION RENTAL EL MORCHE (MÁLAGA)",
"slogan": "« The best climate in Europe »",
"subtitle": "Quiet apartment with sea views for max. 4 people",
"location": "Entire accommodation<br>1 minute walk from the beach",
"checkAvailability": "Check availability",
// Weather section
"weatherTitle": "WEATHER El Morche TORROX COSTA live",
// Quick info section
"bedrooms": "2 Bedrooms",
"bedroomsDesc": "1 main bedroom with double bed <br>1 bedroom with single bed or convertible to double",
"livingRoom": "Living Room",
"livingRoomDesc": "Living room with equipped open kitchen",
"parking": "Secure Parking",
"parkingDesc": "Private underground parking",
"seaView": "Sea Views",
"seaViewDesc": "From the living room, terrace and from one of the bedrooms",
"airConditioning": "Air Conditioning",
"airConditioningDesc": "one unit per bedroom <br>and another in the living room",
"livingRoomEquipment": "Living Room Equipment",
"livingRoomEquipmentDesc": "Kitchen, Freezer, Microwave/grill, Washing machine, Electric coffee maker, Tableware, <br>Television and Satellite receiver",
"miscEquipment": "Miscellaneous Equipment",
"childrenWelcome": "Children welcome",
"miscEquipmentDesc": "(baby cot and high chair available),<br> Bed linen, Bath towels and Beach towels included<br>Access to the rooftop terrace (clotheslines)",
"nearbyServices": "Nearby Services",
"nearbyServicesDesc": "Shops, Bars, Restaurants, Beach bars, Children's and sports parks, Promenade, Bus stops, etc...",
// Booking section
"bookYourStay": "Book Your Stay",
"selectDates": "Select Your Dates",
"available": "Available",
"booked": "Booked",
"selected": "Selected",
"seasonalRates": "Seasonal Rates",
"highSeason": "High",
"high": "Season",
"highSeasonPeriod": "Jul-Aug [&] End of year",
"midSeason": "Mid",
"mid": "Season",
"midSeasonPeriod": "Apr-Jun [&] Sep-Oct",
"lowSeason": "Low",
"low": "Season",
"lowSeasonPeriod": "Rest of the year",
"nonSundayRental": "For rentals with dates other than Sunday to Sunday, <br>please contact us directly.",
"bookingSummary": "Booking Summary",
"fullName": "Full Name",
"phoneNumber": "Phone Number",
"emailAddress": "Email Address",
"checkIn": "Check-in",
"checkOut": "Check-out",
"numberOfWeeks": "Number of Weeks",
"total": "Total",
"paymentTerms": "25% deposit upon booking and the remainder paid before the stay.",
"confirmBooking": "Confirm Booking",
"selectDate": "Select a date",
"loadingCalendar": "Loading calendar...",
// Calendar translations
"january": "January",
"february": "February",
"march": "March",
"april": "April",
"may": "May",
"june": "June",
"july": "July",
"august": "August",
"september": "September",
"october": "October",
"november": "November",
"december": "December",
"monday": "Mon",
"tuesday": "Tue",
"wednesday": "Wed",
"thursday": "Thu",
"friday": "Fri",
"saturday": "Sat",
"sunday": "Sun",
// Gallery section
"gallery": "Gallery",
// Other aspects section
"otherAspects": "Other Aspects to Highlight",
"otherAspectsDesc": "Non-smoking apartment and pets are not allowed.<br><br>Parking is subject to the size of the car (2.12 x 4.50 m maximum).<br><br>It is strictly forbidden to organize parties or other events in the building!<br><br>Spanish legislation requires us to request documents from all guests.<br> It will not be possible to enter the property without providing identification, we have an online check-in process that must be completed before arrival.",
// Contact section
"contact": "Contact",
"phoneWhatsApp": "Phone or WhatsApp",
"weSpeakSpanish": "We speak English!",
"message": "Message",
"sendMessage": "Send Message",
// Footer
"aboutUs": "About Us",
"aboutUsDesc": "We are Belgian and we are in love with Spain, the sun and the tranquility of the sea. Two years ago we found our little paradise in El Morche, a charming corner of the Costa del Sol, where we come to recharge whenever we can.<br>We have prepared this beautiful apartment with sea views with great care to offer our guests unforgettable stays in «The best climate in Europe». <br>For us it is not just a vacation spot, it is a space that we care for with great affection and that we now want to share with other people who, like us, seek to rest, enjoy and feel at home.<br>We rent directly and we are always available to answer your questions and help make your stay perfect.<br> And yes, we almost always bring our Belgian chocolate with us! 😉",
"apartmentAddress": "Apartment Address",
"copyright": "© 2025 Apto-Torrox - All rights reserved.",
"developedBy": "Website developed by Integral Solutions"
},
fr: {
// Navigation
"home": "Accueil",
"gallery": "Galerie",
"booking": "Réservations",
"contact": "Contact",
"bookNow": "Réserver",
// Hero section
"mainTitle": "LOCATION DE VACANCES EL MORCHE (MÁLAGA)",
"slogan": "« Le meilleur climat d'Europe »",
"subtitle": "Appartement calme avec vue sur la mer pour max. 4 personnes",
"location": "Logement entier<br>À 1 minute à pied de la plage",
"checkAvailability": "Vérifier la disponibilité",
// Weather section
"weatherTitle": "MÉTÉO El Morche TORROX COSTA en direct",
// Quick info section
"bedrooms": "2 Chambres",
"bedroomsDesc": "1 chambre principale avec lit double <br>1 chambre avec lit simple ou convertible en double",
"livingRoom": "Salon",
"livingRoomDesc": "Salon avec cuisine ouverte équipée",
"parking": "Stationnement sécurisé",
"parkingDesc": "Parking privé souterrain",
"seaView": "Vue sur la mer",
"seaViewDesc": "Depuis le salon, la terrasse et depuis l'une des chambres",
"airConditioning": "Climatisation",
"airConditioningDesc": "une unité par chambre <br>et une autre dans le salon",
"livingRoomEquipment": "Équipement du salon",
"livingRoomEquipmentDesc": "Cuisine, Congélateur, Micro-ondes/gril, Lave-linge, Cafetière électrique, Vaisselle, <br>Télévision et Récepteur satellite",
"miscEquipment": "Équipement divers",
"childrenWelcome": "Enfants bienvenus",
"miscEquipmentDesc": "(lit bébé et chaise haute disponibles),<br> Literie, Serviettes de bain et Serviettes de plage incluses<br>Accès à la terrasse sur le toit (sèche-linge)",
"nearbyServices": "Services à proximité",
"nearbyServicesDesc": "Commerces, Bars, Restaurants, Chiringuitos, Parcs pour enfants et sportifs, Promenade maritime, Arrêts de bus, etc...",
// Booking section
"bookYourStay": "Réservez votre séjour",
"selectDates": "Sélectionnez vos dates",
"available": "Disponible",
"booked": "Réservé",
"selected": "Sélectionné",
"seasonalRates": "Tarifs par saison",
"highSeason": "Haute",
"high": "Saison",
"highSeasonPeriod": "Juillet-Août [&] Fin d'année",
"midSeason": "Moyenne",
"mid": "Saison",
"midSeasonPeriod": "Avril-Juin [&] Sept-Oct",
"lowSeason": "Basse",
"low": "Saison",
"lowSeasonPeriod": "Reste de l'année",
"nonSundayRental": "Pour les locations avec des dates autres que du dimanche au dimanche, <br>veuillez nous contacter directement.",
"bookingSummary": "Résumé de la réservation",
"fullName": "Nom et prénom",
"phoneNumber": "Numéro de téléphone",
"emailAddress": "Adresse e-mail",
"checkIn": "Check-in",
"checkOut": "Check-out",
"numberOfWeeks": "Nombre de semaines",
"total": "Total",
"paymentTerms": "25% d'acompte à la réservation et le reste payé avant le séjour.",
"confirmBooking": "Confirmer la réservation",
"selectDate": "Sélectionnez une date",
"loadingCalendar": "Chargement du calendrier...",
// Calendar translations
"january": "Janvier",
"february": "Février",
"march": "Mars",
"april": "Avril",
"may": "Mai",
"june": "Juin",
"july": "Juillet",
"august": "Août",
"september": "Septembre",
"october": "Octobre",
"november": "Novembre",
"december": "Décembre",
"monday": "Lun",
"tuesday": "Mar",
"wednesday": "Mer",
"thursday": "Jeu",
"friday": "Ven",
"saturday": "Sam",
"sunday": "Dim",
// Gallery section
"gallery": "Galerie",
// Other aspects section
"otherAspects": "Autres aspects à souligner",
"otherAspectsDesc": "Appartement non-fumeur et les animaux ne sont pas admis.<br><br>Le stationnement est soumis à la taille de la voiture (2,12 x 4,50 m maximum).<br><br>Il est strictement interdit d'organiser des fêtes ou autres événements dans l'immeuble!<br><br>La législation espagnole nous oblige à demander des documents à tous les invités.<br> Il ne sera pas possible d'entrer dans la propriété sans fournir d'identifications, nous avons un processus d'enregistrement en ligne qui doit être complété avant l'arrivée.",
// Contact section
"contact": "Contact",
"phoneWhatsApp": "Téléphone ou WhatsApp",
"weSpeakSpanish": "Nous parlons Français!",
"message": "Message",
"sendMessage": "Envoyer le message",
// Footer
"aboutUs": "À propos de nous",
"aboutUsDesc": "Nous sommes belges et nous sommes amoureux de l'Espagne, du soleil et de la tranquillité de la mer. Il y a deux ans, nous avons trouvé notre petit paradis à El Morche, un coin charmant de la Costa del Sol, où nous venons nous ressourcer dès que possible.<br>Nous avons préparé ce bel appartement avec vue sur la mer avec beaucoup de soin pour offrir à nos clients des séjours inoubliables dans «Le meilleur climat d'Europe». <br>Pour nous, ce n'est pas seulement un lieu de vacances, c'est un espace que nous entretenons avec beaucoup d'affection et que nous voulons maintenant partager avec d'autres personnes qui, comme nous, cherchent à se reposer, à profiter et à se sentir comme chez eux.<br>Nous louons directement et nous sommes toujours disponibles pour répondre à vos questions et vous aider à rendre votre séjour parfait.<br> Et oui, nous apportons presque toujours notre chocolat belge avec nous! 😉",
"apartmentAddress": "Adresse de l'appartement",
"copyright": "© 2025 Apto-Torrox - Tous droits réservés.",
"developedBy": "Site web développé par Integral Solutions"
},
de: {
// Navigation
"home": "Startseite",
"gallery": "Galerie",
"booking": "Buchungen",
"contact": "Kontakt",
"bookNow": "Buchen",
// Hero section
"mainTitle": "FERIENWOHNUNG EL MORCHE (MÁLAGA)",
"slogan": "« Das beste Klima Europas »",
"subtitle": "Ruhige Ferienwohnung mit Meerblick für max. 4 Personen",
"location": "Ganze Unterkunft<br>1 Minute zu Fuß zum Strand",
"checkAvailability": "Verfügbarkeit prüfen",
// Weather section
"weatherTitle": "WETTER El Morche TORROX COSTA live",
// Quick info section
"bedrooms": "2 Schlafzimmer",
"bedroomsDesc": "1 Hauptschlafzimmer mit Doppelbett <br>1 Schlafzimmer mit Einzelbett oder umwandelbar in Doppelbett",
"livingRoom": "Wohnzimmer",
"livingRoomDesc": "Wohnzimmer mit ausgestatteter offener Küche",
"parking": "Sicherer Parkplatz",
"parkingDesc": "Privater unterirdischer Parkplatz",
"seaView": "Meerblick",
"seaViewDesc": "Vom Wohnzimmer, der Terrasse et aus einem der Schlafzimmer",
"airConditioning": "Klimaanlage",
"airConditioningDesc": "eine Einheit pro Schlafzimmer <br>und eine weitere im Wohnzimmer",
"livingRoomEquipment": "Wohnzimmerausstattung",
"livingRoomEquipmentDesc": "Küche, Gefrierschrank, Mikrowelle/Grill, Waschmaschine, Elektrische Kaffeemaschine, Geschirr, <br>Fernseher und Satellitenempfänger",
"miscEquipment": "Verschiedene Ausstattung",
"childrenWelcome": "Kinder willkommen",
"miscEquipmentDesc": "(Kinderbett und Hochstuhl verfügbar),<br> Bettwäsche, Handtücher und Strandtücher inklusive<br>Zugang zur Dachterrasse (Wäscheständer)",
"nearbyServices": "Dienstleistungen in der Nähe",
"nearbyServicesDesc": "Geschäfte, Bars, Restaurants, Strandbars, Spielplätze und Sportparks, Strandpromenade, Bushaltestellen, etc...",
// Booking section
"bookYourStay": "Buchen Sie Ihren Aufenthalt",
"selectDates": "Wählen Sie Ihre Daten",
"available": "Verfügbar",
"booked": "Gebucht",
"selected": "Ausgewählt",
"seasonalRates": "Saisonale Preise",
"highSeason": "Hoch",
"high": "Saison",
"highSeasonPeriod": "Juli-Aug [&] Jahresende",
"midSeason": "Mittel",
"mid": "Saison",
"midSeasonPeriod": "Apr-Jun [&] Sep-Okt",
"lowSeason": "Niedrig",
"low": "Saison",
"lowSeasonPeriod": "Rest des Jahres",
"nonSundayRental": "Für Vermietungen mit anderen Daten als Sonntag bis Sonntag, <br>kontaktieren Sie uns bitte direkt.",
"bookingSummary": "Buchungsübersicht",
"fullName": "Vor- und Nachname",
"phoneNumber": "Telefonnummer",
"emailAddress": "E-Mail-Adresse",
"checkIn": "Check-in",
"checkOut": "Check-out",
"numberOfWeeks": "Anzahl Wochen",
"total": "Gesamt",
"paymentTerms": "25% Anzahlung bei Buchung und der Rest vor dem Aufenthalt.",
"confirmBooking": "Buchung bestätigen",
"selectDate": "Wählen Sie ein Datum",
"loadingCalendar": "Kalender wird geladen...",
// Calendar translations
"january": "Januar",
"february": "Februar",
"march": "März",
"april": "April",
"may": "Mai",
"june": "Juni",
"july": "Juli",
"august": "August",
"september": "September",
"october": "Oktober",
"november": "November",
"december": "Dezember",
"monday": "Mo",
"tuesday": "Di",
"wednesday": "Mi",
"thursday": "Do",
"friday": "Fr",
"saturday": "Sa",
"sunday": "So",
// Gallery section
"gallery": "Galerie",
// Other aspects section
"otherAspects": "Weitere hervorzuhebende Aspekte",
"otherAspectsDesc": "Nichtraucherwohnung und Haustiere sind nicht erlaubt.<br><br>Das Parken unterliegt der Größe des Autos (2,12 x 4,50 m maximal).<br><br>Das Organisieren von Partys oder anderen Veranstaltungen im Gebäude ist strengstens verboten!<br><br>Die spanische Gesetzgebung verpflichtet uns, von allen Gästen Dokumente anzufordern.<br> Es wird nicht möglich sein, die Unterkunft ohne Vorlage von Ausweisen zu betreten, wir haben einen Online-Check-in-Prozess, der vor der Ankunft abgeschlossen werden muss.",
// Contact section
"contact": "Kontakt",
"phoneWhatsApp": "Telefon oder WhatsApp",
"weSpeakSpanish": "Wir sprechen Deutsch!",
"message": "Nachricht",
"sendMessage": "Nachricht senden",
// Footer
"aboutUs": "Über uns",
"aboutUsDesc": "Wir sind Belgier und wir sind verliebt in Spanien, die Sonne und die Ruhe des Meeres. Vor zwei Jahren fanden wir unser kleines Paradies in El Morche, einer charmanten Ecke der Costa del Sol, wo wir immer, wenn es möglich ist, neue Energie tanken.<br>Wir haben diese schöne Wohnung mit Meerblick mit großer Sorgfalt vorbereitet, um unseren Gästen unvergessliche Aufenthalte im «besten Klima Europas» zu bieten. <br>Für uns ist es nicht nur ein Urlaubsort, es ist ein Raum, den wir mit viel Zuneigung pflegen und den wir jetzt mit anderen Menschen teilen möchten, die wie wir Ruhe suchen, genießen und sich wie zu Hause fühlen möchten.<br>Wir vermieten direkt und sind immer verfügbar, um Ihre Fragen zu beantworten und Ihnen zu helfen, Ihren Aufenthalt perfekt zu gestalten.<br> Und ja, wir bringen fast immer unsere belgische Schokolade mit! 😉",
"apartmentAddress": "Adresse der Wohnung",
"copyright": "© 2025 Apto-Torrox - Alle Rechte vorbehalten.",
"developedBy": "Website entwickelt von Integral Solutions"
},
nl: {
// Navigation
"home": "Home",
"gallery": "Galerij",
"booking": "Boekingen",
"contact": "Contact",
"bookNow": "Boek Nu",
// Hero section
"mainTitle": "VACATUREVERHUUR EL MORCHE (MÁLAGA)",
"slogan": "« Het beste klimaat van Europa »",
"subtitle": "Rustig appartement met uitzicht op zee voor max. 4 personen",
"location": "Volledige accommodatie<br>Op 1 minuut lopen van het strand",
"checkAvailability": "Beschikbaarheid controleren",
// Weather section
"weatherTitle": "WEER El Morche TORROX COSTA live",
// Quick info section
"bedrooms": "2 Slaapkamers",
"bedroomsDesc": "1 hoofdslaapkamer met tweepersoonsbed <br>1 slaapkamer met eenpersoonsbed or om te zetten in tweepersoonsbed",
"livingRoom": "Woonkamer",
"livingRoomDesc": "Woonkamer met uitgeruste open keuken",
"parking": "Veilig Parkeren",
"parkingDesc": "Privé ondergrondse parkeerplaats",
"seaView": "Uitzicht op zee",
"seaViewDesc": "Vanuit de woonkamer, het terras en vanuit een van de slaapkamers",
"airConditioning": "Airconditioning",
"airConditioningDesc": "een unit per slaapkamer <br>en een andere in de woonkamer",
"livingRoomEquipment": "Woonkameruitrusting",
"livingRoomEquipmentDesc": "Keuken, Vriezer, Magnetron/grill, Wasmachine, Elektrische koffiezetter, Servies, <br>Televisie en Satellietontvanger",
"miscEquipment": "Diverse Uitrusting",
"childrenWelcome": "Kinderen welkom",
"miscEquipmentDesc": "(kinderbedje en kinderstoel beschikbaar),<br> Beddengoed, Badhanddoeken en Strandhanddoeken inbegrepen<br>Toegang tot het dakterras (waslijnen)",
"nearbyServices": "Diensten in de buurt",
"nearbyServicesDesc": "Winkels, Bars, Restaurants, Strandtenten, Speel- en sportparken, Promenade, Bushaltes, etc...",
// Booking section
"bookYourStay": "Boek Uw Verblijf",
"selectDates": "Selecteer Uw Data",
"available": "Beschikbaar",
"booked": "Geboekt",
"selected": "Geselecteerd",
"seasonalRates": "Seizoensprijzen",
"highSeason": "Hoog",
"high": "Seizoen",
"highSeasonPeriod": "Jul-Aug [&] Einde van het jaar",
"midSeason": "Midden",
"mid": "Seizoen",
"midSeasonPeriod": "Apr-Jun [&] Sep-Okt",
"lowSeason": "Laag",
"low": "Seizoen",
"lowSeasonPeriod": "Rest van het jaar",
"nonSundayRental": "Voor verhuur met andere data dan zondag tot zondag, <br>neem rechtstreeks contact met ons op.",
"bookingSummary": "Boekingssamenvatting",
"fullName": "Volledige Naam",
"phoneNumber": "Telefoonnummer",
"emailAddress": "E-mailadres",
"checkIn": "Check-in",
"checkOut": "Check-out",
"numberOfWeeks": "Aantal Weken",
"total": "Totaal",
"paymentTerms": "25% aanbetaling bij boeking en de rest betaald voor het verblijf.",
"confirmBooking": "Bevestig Boeking",
"selectDate": "Selecteer een datum",
"loadingCalendar": "Kalender laden...",
// Calendar translations
"january": "Januari",
"february": "Februari",
"march": "Maart",
"april": "April",
"may": "Mei",
"june": "Juni",
"july": "Juli",
"august": "Augustus",
"september": "September",
"october": "Oktober",
"november": "November",
"december": "December",
"monday": "Ma",
"tuesday": "Di",
"wednesday": "Wo",
"thursday": "Do",
"friday": "Vr",
"saturday": "Za",
"sunday": "Zo",
// Gallery section
"gallery": "Galerij",
// Other aspects section
"otherAspects": "Andere aspecten om te benadrukken",
"otherAspectsDesc": "Niet-rokersappartement en huisdieren zijn niet toegestaan.<br><br>Parkeren is onderhevig aan de grootte van de auto (2,12 x 4,50 m maximaal).<br><br>Het is ten strengste verboden feesten of andere evenementen in het gebouw te organiseren!<br><br>De Spaanse wetgeving verplicht ons documenten aan te vragen van alle gasten.<br> Het zal niet mogelijk zijn de accommodatie te betreden zonder identificatie, we hebben een online incheckproces dat vóór aankomst moet worden voltooid.",
// Contact section
"contact": "Contact",
"phoneWhatsApp": "Telefoon of WhatsApp",
"weSpeakSpanish": "We spreken Nederlands!",
"message": "Bericht",
"sendMessage": "Bericht Verzenden",
// Footer
"aboutUs": "Over Ons",
"aboutUsDesc": "We zijn Belgen en we zijn verliefd op Spanje, de zon en de rust van de zee. Twee jaar geleden vonden we ons kleine paradijs in El Morche, een charmante hoek van de Costa del Sol, waar we komen opladen wanneer we maar kunnen.<br>We hebben dit mooie appartement met uitzicht op zee met veel zorg voorbereid om onze gasten onvergetelijke verblijven te bieden in «Het beste klimaat van Europa». <br>Voor ons is het niet alleen een vakantieplek, it is een ruimte die we met veel genegenheid verzorgen en die we nu willen delen met andere mensen die, net als wij, willen rusten, genieten en zich thuis willen voelen.<br>We verhuren rechtstreeks en we zijn altijd beschikbaar om uw vragen te beantwoorden en u te helpen uw verblijf perfect te maken.<br> En ja, we nemen bijna altijd onze Belgische chocolade mee! 😉",
"apartmentAddress": "Adres van het appartement",
"copyright": "© 2025 Apto-Torrox - Alle rechten voorbehouden.",
"developedBy": "Website ontwikkeld door Integral Solutions"
}
};
// Calendar data
let currentOffset = 0;
let selectedStart = null;
let selectedEnd = null;
let googleCalendarBookings = [];
// Language switching functionality
function switchLanguage(lang) {
// Update all elements with data-translate attribute
document.querySelectorAll('[data-translate]').forEach(element => {
const key = element.getAttribute('data-translate');
if (translations[lang] && translations[lang][key]) {
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
element.placeholder = translations[lang][key];
} else {
element.innerHTML = translations[lang][key];
}
}
});
// Update current language display
const currentLangElement = document.querySelector('.current-lang');
if (currentLangElement) {
currentLangElement.textContent = lang.toUpperCase();
}
// Update HTML lang attribute
document.documentElement.lang = lang;
// Update calendar
generateCalendar();
}
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
// Language switcher functionality
const langButton = document.querySelector('.lang-btn');
const dropdown = document.querySelector('.language-dropdown');
if (langButton && dropdown) {
// Toggle dropdown when clicking the language button
langButton.addEventListener('click', function(e) {
e.stopPropagation();
dropdown.classList.toggle('hidden');
});
// Handle language selection
document.querySelectorAll('.lang-option').forEach(option => {
option.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const lang = this.getAttribute('data-lang');
if (lang) {
switchLanguage(lang);
dropdown.classList.add('hidden');
}
});
});
// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
if (!langButton.contains(e.target) && !dropdown.contains(e.target)) {
dropdown.classList.add('hidden');
}
});
}
// Check for stored language preference
const savedLang = localStorage.getItem('preferred-language');
if (savedLang && savedLang !== 'es') {
switchLanguage(savedLang);
}
// Mobile menu functionality
const toggleButton = document.getElementById('menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');
if (toggleButton && mobileMenu) {
toggleButton.addEventListener('click', (e) => {
e.stopPropagation();
mobileMenu.classList.toggle('hidden');
});
mobileMenu.querySelectorAll('a, button').forEach(el => {
el.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
document.addEventListener('click', (event) => {
const isClickInside = mobileMenu.contains(event.target) || toggleButton.contains(event.target);
if (!isClickInside) {
mobileMenu.classList.add('hidden');
}
});
}
// Initialize calendar with Google Calendar data
fetchBookingsFromGoogle();
});
// Fetch bookings from Google Calendar
async function fetchBookingsFromGoogle() {
try {
// Replace with your actual Google Calendar ID and API Key
const calendarId = 'apto.torrox@gmail.com';
const apiKey = 'AIzaSyCFv3TlcOJlu2G6hEZ1oPK8aJ5-EG4Vxz8';
const timeMin = new Date().toISOString();
const timeMax = new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toISOString();
const url = `https://www.googleapis.com/calendar/v3/calendars/${encodeURIComponent(calendarId)}/events?key=${apiKey}&timeMin=${timeMin}&timeMax=${timeMax}&singleEvents=true&orderBy=startTime`;
const response = await fetch(url);
if (!response.ok) {
throw new Error('Failed to fetch calendar data');
}
const data = await response.json();
// Process the bookings
googleCalendarBookings = data.items.map(event => ({
start: event.start.dateTime || event.start.date,
end: event.end.dateTime || event.end.date
}));
// Generate calendar with the fetched data
generateCalendar();
} catch (error) {
console.error('Error fetching Google Calendar data:', error);
// Fallback to mock data if API fails
googleCalendarBookings = [
{ start: '2025-07-01', end: '2025-07-08' },
{ start: '2025-08-15', end: '2025-08-22' },
{ start: '2025-12-20', end: '2025-12-27' }
];
generateCalendar();
showToast('Error al cargar el calendario. Mostrando datos de ejemplo.', 'error');
}
}
function showToast(message, type = 'error') {
const toast = document.createElement('div');
toast.className = `
fixed top-20 left-1/2 transform -translate-x-1/2
max-w-sm w-[90%] px-6 py-3 rounded shadow-lg z-50
${type === 'error' ? 'bg-red-500' : 'bg-green-500'}
text-white text-center text-sm sm:text-base
`;
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => toast.remove(), 3000);
}
function updateSelection() {
document.querySelectorAll('.calendar-day').forEach(day => {
if (!day.textContent) return;
const dayNum = parseInt(day.textContent);
if (!dayNum) return;
const monthContainer = day.closest('.mb-8');
if (!monthContainer) return;
const monthHeader = monthContainer.querySelector('h4');
if (!monthHeader) return;
const monthText = monthHeader.textContent;
// Get month and year from the header
const currentLang = document.documentElement.lang || 'es';
const monthNames = Object.values(translations[currentLang]).slice(-12);
let monthIndex = -1;
let year = new Date().getFullYear();
// Find the month index
for (let i = 0; i < monthNames.length; i++) {
if (monthText.includes(monthNames[i])) {
monthIndex = i;
break;
}
}
// Extract year from the header
const yearMatch = monthText.match(/\d{4}/);
if (yearMatch) {
year = parseInt(yearMatch[0]);
}
if (monthIndex === -1) return;
const date = new Date(year, monthIndex, dayNum);
day.classList.remove('selected');
if (selectedStart && selectedEnd) {
if (date >= selectedStart && date <= selectedEnd) {
day.classList.add('selected');
}
} else if (selectedStart && date.getTime() === selectedStart.getTime()) {
day.classList.add('selected');
}
});
}
function updateSummary() {
const checkIn = document.getElementById('check-in');
const checkOut = document.getElementById('check-out');
const weeks = document.getElementById('weeks');
const total = document.getElementById('total');
if (selectedStart) {
const currentLang = document.documentElement.lang || 'es';
const dateOptions = { day: 'numeric', month: 'short', year: 'numeric' };
checkIn.textContent = selectedStart.toLocaleDateString(currentLang === 'es' ? 'es-ES' : currentLang, dateOptions);
if (selectedEnd) {
checkOut.textContent = selectedEnd.toLocaleDateString(currentLang === 'es' ? 'es-ES' : currentLang, dateOptions);
const diffTime = selectedEnd.getTime() - selectedStart.getTime();
const diffWeeks = Math.round(diffTime / (7 * 24 * 60 * 60 * 1000));
weeks.textContent = diffWeeks;
// Calculate total price based on season
let totalPrice = 0;
const seasonRanges = [
{ start: '2025-07-01', end: '2025-08-31', type: 'high', price: 750 },
{ start: '2025-12-15', end: '2025-12-31', type: 'high', price: 750 },
{ start: '2025-04-01', end: '2025-06-30', type: 'mid', price: 550 },
{ start: '2025-09-01', end: '2025-10-31', type: 'mid', price: 550 },
{ start: '2025-01-01', end: '2025-03-31', type: 'low', price: 400 },
{ start: '2025-11-01', end: '2025-12-14', type: 'low', price: 400 }
];
let currentDate = new Date(selectedStart);
while (currentDate < selectedEnd) {
const dateStr = currentDate.toISOString().split('T')[0];
const season = seasonRanges.find(range => dateStr >= range.start && dateStr <= range.end);
totalPrice += season ? season.price : 400; // Default to low season
currentDate.setDate(currentDate.getDate() + 1);
}
// Convert to weekly rate (divide by 7 and multiply by number of weeks)
totalPrice = (totalPrice / 7) * diffWeeks;
total.textContent = `€${Math.round(totalPrice).toLocaleString()}`;
} else {
checkOut.textContent = document.querySelector('[data-translate="selectDate"]')?.textContent || 'Select a date';
weeks.textContent = '0';
total.textContent = '€0';
}
} else {
checkIn.textContent = document.querySelector('[data-translate="selectDate"]')?.textContent || 'Select a date';
checkOut.textContent = document.querySelector('[data-translate="selectDate"]')?.textContent || 'Select a date';
weeks.textContent = '0';
total.textContent = '€0';
}
}
function generateCalendar() {
const calendar = document.getElementById('calendar');
const today = new Date();
today.setHours(0, 0, 0, 0);
// Clear loading message
calendar.innerHTML = '';
// Create navigation container
const navigationContainer = document.createElement('div');
navigationContainer.className = 'flex justify-between items-center mb-6';
// Create previous month button
const prevButton = document.createElement('button');
prevButton.className = 'w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed';
prevButton.innerHTML = '<i class="ri-arrow-left-s-line text-2xl text-bold text-yellow-400"></i>';
prevButton.disabled = currentOffset === 0;
prevButton.onclick = () => {
if (currentOffset > 0) {
currentOffset -= 2;
generateCalendar();
}
};
// Create next month button
const nextButton = document.createElement('button');
nextButton.className = 'w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-700 transition-colors';
nextButton.innerHTML = '<i class="ri-arrow-right-s-line text-2xl text-bold text-yellow-400"></i>';
nextButton.onclick = () => {
currentOffset += 2;
generateCalendar();
};
navigationContainer.appendChild(prevButton);
navigationContainer.appendChild(nextButton);
calendar.appendChild(navigationContainer);
// Get current language
const currentLang = document.documentElement.lang || 'es';
// Generate two months
for (let monthOffset = currentOffset; monthOffset < currentOffset + 2; monthOffset++) {
const currentDate = new Date(today.getFullYear(), today.getMonth() + monthOffset, 1);
const monthContainer = document.createElement('div');
monthContainer.className = 'mb-8';
// Month header with translated month name
const monthHeader = document.createElement('h4');
monthHeader.className = 'text-lg font-semibold mb-4';
// Get translated month name
const monthIndex = currentDate.getMonth();
const monthNames = [
translations[currentLang].january,
translations[currentLang].february,
translations[currentLang].march,
translations[currentLang].april,
translations[currentLang].may,
translations[currentLang].june,
translations[currentLang].july,
translations[currentLang].august,
translations[currentLang].september,
translations[currentLang].october,
translations[currentLang].november,
translations[currentLang].december
];
monthHeader.textContent = `${monthNames[monthIndex]} ${currentDate.getFullYear()}`;
monthContainer.appendChild(monthHeader);
// Days grid
const daysGrid = document.createElement('div');
daysGrid.className = 'grid grid-cols-7 gap-1';
// Day headers with translated day names
const dayNames = [
translations[currentLang].monday,
translations[currentLang].tuesday,
translations[currentLang].wednesday,
translations[currentLang].thursday,
translations[currentLang].friday,
translations[currentLang].saturday,
translations[currentLang].sunday
];
dayNames.forEach(day => {
const dayEl = document.createElement('div');
dayEl.className = 'calendar-day font-semibold text-sm';
dayEl.textContent = day;
daysGrid.appendChild(dayEl);
});
// Calculate first day of month (0 = Sunday, 1 = Monday, etc.)
const firstDay = (currentDate.getDay() + 6) % 7; // Convert to Monday-first week
const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
// Add empty cells for days before the first day of the month
for (let i = 0; i < firstDay; i++) {
const emptyDay = document.createElement('div');
daysGrid.appendChild(emptyDay);
}
// Add days of the month
for (let day = 1; day <= daysInMonth; day++) {
const dayEl = document.createElement('div');
const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
date.setHours(0, 0, 0, 0);
dayEl.className = 'calendar-day';
dayEl.textContent = day;
// Check if date is booked
const isBooked = googleCalendarBookings.some(booking => {
const start = new Date(booking.start);
const end = new Date(booking.end);
start.setHours(0, 0, 0, 0);
end.setHours(0, 0, 0, 0);
return date >= start && date < end;
});
const isPast = date < today;
const isSunday = date.getDay() === 0;
// Style the day element based on its state
if (isBooked || isPast) {
dayEl.classList.add('booked', 'opacity-50', 'cursor-not-allowed');
} else {
dayEl.classList.add('available', 'cursor-pointer', 'hover:bg-gray-700', 'transition-colors');
dayEl.addEventListener('click', () => selectDate(date));
}
// Add special styling for Sundays
if (isSunday) {
dayEl.classList.add('font-bold', 'text-secondary');
}
// Highlight selected dates
if (selectedStart && selectedEnd && date >= selectedStart && date <= selectedEnd) {
dayEl.classList.add('selected');
} else if (selectedStart && date.getTime() === selectedStart.getTime()) {
dayEl.classList.add('selected');
}
daysGrid.appendChild(dayEl);
}
monthContainer.appendChild(daysGrid);
calendar.appendChild(monthContainer);
}
}
function selectDate(date) {
const currentDate = new Date(date);
const today = new Date();
today.setHours(0, 0, 0, 0);
// Check if date is in the past
if (currentDate < today) {
showToast('No se pueden seleccionar fechas en el pasado', 'error');
return;
}
// Ensure the date is a Sunday
if (currentDate.getDay() !== 0) {
showToast('Las reservas deben empezar y terminar en domingo', 'error');
return;
}
// Check if date is already booked
const isBooked = googleCalendarBookings.some(booking => {
const start = new Date(booking.start);
const end = new Date(booking.end);
start.setHours(0, 0, 0, 0);
end.setHours(0, 0, 0, 0);
return currentDate >= start && currentDate < end;
});
if (isBooked) {
showToast('Esta fecha ya está reservada', 'error');
return;
}
// Handle date selection
if (!selectedStart || (selectedStart && selectedEnd)) {
selectedStart = currentDate;
selectedEnd = null;
} else {
if (currentDate > selectedStart) {
// Calculate weeks between dates
const diffTime = currentDate.getTime() - selectedStart.getTime();
const diffWeeks = Math.round(diffTime / (7 * 24 * 60 * 60 * 1000));
// Ensure the end date creates a complete week
if (diffWeeks < 1) {
showToast('Reserva mínima de 1 semana', 'error');
return;
}
// Check if the selected range includes any booked dates
const isRangeBooked = googleCalendarBookings.some(booking => {
const bookingStart = new Date(booking.start);
const bookingEnd = new Date(booking.end);
bookingStart.setHours(0, 0, 0, 0);
bookingEnd.setHours(0, 0, 0, 0);
return (bookingStart >= selectedStart && bookingStart <= currentDate) ||
(bookingEnd >= selectedStart && bookingEnd <= currentDate);
});
if (isRangeBooked) {
showToast('El rango seleccionado incluye fechas reservadas', 'error');
return;
}
selectedEnd = currentDate;
} else {
selectedStart = currentDate;
selectedEnd = null;
}
}
updateSelection();
updateSummary();
generateCalendar();
}
// Update the sendBookingSummary function
function sendBookingSummary() {
const currentLang = document.documentElement.lang || 'es';
const nameInput = document.querySelector('#booking input[type="text"]');
const phoneInput = document.querySelector('#booking input[type="tel"]');
const emailInput = document.querySelector('#booking input[type="email"]');
const formData = {
name: nameInput.value,
phone: phoneInput.value,
email: emailInput.value,
checkIn: document.getElementById('check-in').textContent,
checkOut: document.getElementById('check-out').textContent,
weeks: document.getElementById('weeks').textContent,
total: document.getElementById('total').textContent,
lang: currentLang
};
// Validation
if (!formData.name || !formData.phone || !formData.email) {
showToast(translations[currentLang].fillAllFields, 'error');
return;
}
if (formData.checkIn.includes('Seleccione') || formData.checkOut.includes('Seleccione') ||
formData.checkIn.includes('Select') || formData.checkOut.includes('Select')) {
showToast(translations[currentLang].selectDates, 'error');
return;
}
// Email validation
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(formData.email)) {
showToast(translations[currentLang].validEmail, 'error');
return;
}
// Send to PHP script
fetch('booking.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams(formData)
})
.then(response => response.json())
.then(data => {
if (data.success) {
showToast(data.message, 'success');
// Reset form
nameInput.value = '';
phoneInput.value = '';
emailInput.value = '';
selectedStart = null;
selectedEnd = null;
updateSelection();
updateSummary();
generateCalendar();
} else {
showToast(data.message, 'error');
}
})
.catch(error => {
console.error('Error:', error);
showToast(translations[currentLang].serverError, 'error');
});
}
// Update the sendContactMessage function
function sendContactMessage() {
const currentLang = document.documentElement.lang || 'es';
const form = document.getElementById('contactForm');
const name = form.querySelector('input[type="text"]').value.trim();
const email = form.querySelector('input[type="email"]').value.trim();
const message = form.querySelector('textarea').value.trim();
if (!name || !email || !message) {
showToast(translations[currentLang].fillAllFields, 'error');
return;
}
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
showToast(translations[currentLang].validEmail, 'error');
return;
}
// Send to PHP script
fetch('contact.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
name: name,
email: email,
message: message,
lang: currentLang
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
showToast(data.message, 'success');
form.reset();
} else {
showToast(data.message, 'error');
}
})
.catch(error => {
console.error('Error:', error);
showToast(translations[currentLang].serverError, 'error');
});
}
</script>
<!-- WhatsApp Floating Button -->
<a id="whatsappButton"
target="_blank"
class="group fixed bottom-5 right-5 flex items-center bg-primary text-white border-2 border-yellow-400 rounded-md shadow-lg hover:bg-primary/80 active:scale-95 transition-all duration-300 z-50 overflow-hidden opacity-0 translate-y-8 pointer-events-none">
<div class="flex items-center">
<div class="p-3">
<i class="ri-whatsapp-line text-2xl"></i>
</div>
<span id="whatsappLabel" class="hidden md:inline-block pr-4 font-medium opacity-0 translate-x-3 transition-all duration-300 ease-out">
Conversar
</span>
</div>
</a>
<script>
const phoneNumber = "32473269927";
const whatsappButton = document.getElementById("whatsappButton");
const whatsappLabel = document.getElementById("whatsappLabel");
// Map of language codes to messages and labels
const langMap = {
es: { message: "¡Hola! Estoy interesado en alquilar el apartamento en Torrox. ¿Podría tener más información?", label: "Conversar" },
fr: { message: "Bonjour ! Je suis intéressé par l’appartement à Torrox. Pourrais-je avoir plus d’informations ?", label: "Discuter" },
nl: { message: "Hallo! Ik ben geïnteresseerd in het appartement in Torrox. Mag ik wat meer informatie?", label: "Praten" },
de: { message: "Hallo! Ich interessiere mich für die Wohnung in Torrox. Könnte ich mehr Informationen bekommen?", label: "Chatten" },
en: { message: "Hello! I'm interested in the apartment in Torrox. Could I have more info?", label: "Chat" }
};
// Update WhatsApp button and animate label
function updateWhatsapp(lang) {
lang = lang?.toLowerCase() || 'es';
const { message, label } = langMap[lang] || langMap['es'];
// Animate label change
whatsappLabel.classList.add('opacity-0', '-translate-x-3');
setTimeout(() => {
whatsappLabel.textContent = label;
whatsappLabel.classList.remove('-translate-x-3');
whatsappLabel.classList.add('opacity-100', 'translate-x-0');
}, 200);
// Update WhatsApp link
const encodedMessage = encodeURIComponent(message);
const isMobile = /Android|iPhone|iPad|iPod|Windows Phone/i.test(navigator.userAgent);
const url = isMobile
? `https://api.whatsapp.com/send?phone=${phoneNumber}&text=${encodedMessage}`
: `https://web.whatsapp.com/send?phone=${phoneNumber}&text=${encodedMessage}`;
whatsappButton.href = url;
}
// Initial setup
updateWhatsapp(document.documentElement.lang);
// Listen to language buttons clicks
// Detect <html lang> changes dynamically
const observer = new MutationObserver(() => {
updateWhatsapp(document.documentElement.lang);
});
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['lang'] });
// Scroll trigger
window.addEventListener('scroll', () => {
if(window.scrollY > 300) {
whatsappButton.classList.remove('opacity-0', 'pointer-events-none', 'translate-y-8');
whatsappButton.classList.add('opacity-100', 'translate-y-0', 'animate-pulse-slow');
setTimeout(() => {
whatsappLabel.classList.remove('opacity-0', 'translate-x-3');
whatsappLabel.classList.add('opacity-100', 'translate-x-0');
}, 200);
} else {
whatsappButton.classList.add('opacity-0', 'pointer-events-none', 'translate-y-8');
whatsappButton.classList.remove('opacity-100', 'translate-y-0', 'animate-pulse-slow');
whatsappLabel.classList.add('opacity-0', 'translate-x-3');
whatsappLabel.classList.remove('opacity-100', 'translate-x-0');
}
});
</script>
<script type='application/ld+json'>
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "Apto-Torrox Alquilamos un apartamento muy bonito con vistas al mar",
"description": "Torrox-Costa : El mejor clima de Europa",
"url": "https://apto-torrox.eu",
"image": "https://www.apto-torrox.eu/img/terraza2.jpg"
}
</script>
<style>
@keyframes pulse-slow {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.animate-pulse-slow {
animation: pulse-slow 2.5s infinite;
}
</style>
</body>
</html>
