Files
TenerifeProp/public/property.html
TenerifeProp Dev 432e90edf0 fix: similar properties loaded from API and admin password hash
- Replace hardcoded similar properties with dynamic API loading
- Similar properties now use correct slugs for navigation
- Fix admin password hash for authentication (admin123)
- Remove duplicate HTML footer tags from previous fix
2026-04-05 21:05:13 +01:00

1668 lines
89 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Terreno urbano con vistas al mar en Adeje, Tenerife. 2500m², licencia de obras, comunicaciones disponibles.">
<meta name="robots" content="noindex, nofollow">
<title>Terreno Urbano en Adeje | TenerifeProp</title>
<!-- Canonical -->
<link rel="canonical" href="https://tenerifeprop.com/property/terreno-urbano-adeje">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<!-- AOS Animation -->
<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
<!-- Leaflet CSS -->
<link href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css" rel="stylesheet">
<!-- Lightbox -->
<link href="https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/css/lightbox.min.css" rel="stylesheet">
<style>
:root {
--primary: #1a5f4a;
--primary-light: #2d8f6f;
--primary-dark: #0d4535;
--secondary: #d4a853;
--secondary-light: #e6c57a;
--accent: #e85d04;
--dark: #1a1a2e;
--light: #f8f9fa;
--gray: #6c757d;
--success: #28a745;
--shadow: 0 10px 40px rgba(0,0,0,0.1);
--shadow-lg: 0 25px 50px rgba(0,0,0,0.15);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Open Sans', sans-serif;
color: var(--dark);
background: var(--light);
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 700; }
/* ============ UTILITY ============ */
.text-primary-custom { color: var(--primary) !important; }
.bg-primary-custom { background-color: var(--primary) !important; }
.btn-primary-custom {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
border: none; color: white; padding: 15px 40px; font-weight: 600;
border-radius: 50px; transition: all 0.4s ease; text-transform: uppercase;
letter-spacing: 1px; font-size: 0.9rem; text-decoration: none;
}
.btn-primary-custom:hover {
transform: translateY(-3px); box-shadow: 0 15px 35px rgba(26,95,74,0.4);
color: white; background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
}
.btn-outline-primary-custom {
background: transparent; border: 2px solid var(--primary); color: var(--primary);
padding: 13px 38px; font-weight: 600; border-radius: 50px; transition: all 0.4s ease;
text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; text-decoration: none;
}
.btn-outline-primary-custom:hover {
background: var(--primary); color: white; transform: translateY(-3px);
}
.btn-whatsapp {
background: #25D366; border: none; color: white; padding: 15px 35px;
font-weight: 600; border-radius: 50px; transition: all 0.4s ease;
font-size: 1rem; text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
}
.btn-whatsapp:hover {
background: #128C7E; color: white; transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(37,211,102,0.4);
}
.section-padding { padding: 80px 0; }
/* ============ NAVBAR ============ */
.navbar {
padding: 20px 0; transition: all 0.4s ease;
background: rgba(255,255,255,0.98); box-shadow: var(--shadow);
}
.navbar-brand {
font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.8rem;
color: var(--primary) !important;
}
.navbar-brand span { color: var(--secondary); }
.nav-link {
color: var(--dark) !important; font-weight: 500; padding: 10px 20px !important;
transition: all 0.3s ease; position: relative;
}
.nav-link:hover { color: var(--primary) !important; }
.nav-link::after {
content: ''; position: absolute; bottom: 5px; left: 20px;
width: 0; height: 2px; background: var(--secondary); transition: width 0.3s ease;
}
.nav-link:hover::after { width: calc(100% - 40px); }
.lang-switcher { display: flex; gap: 5px; margin-left: 20px; }
.lang-btn {
padding: 8px 16px; border: 2px solid var(--primary); border-radius: 25px;
background: transparent; color: var(--primary); font-weight: 600; font-size: 0.85rem;
cursor: pointer; transition: all 0.3s ease; text-decoration: none;
}
.lang-btn.active { background: var(--primary); color: white; }
.lang-btn:hover { transform: scale(1.05); }
.navbar-toggler { border: none; padding: 10px; }
.navbar-toggler:focus { box-shadow: none; }
/* ============ BREADCRUMB ============ */
.breadcrumb-section {
background: white; padding: 20px 0; border-bottom: 1px solid #eee;
}
.breadcrumb {
margin: 0; font-size: 0.9rem;
}
.breadcrumb-item a { color: var(--gray); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--primary); }
.breadcrumb-item.active { color: var(--dark); }
.breadcrumb-item + .breadcrumb-item::before {
content: ">"; color: var(--gray);
}
/* ============ GALLERY SECTION ============ */
.gallery-section {
background: var(--dark); padding: 0;
}
.gallery-main {
position: relative; height: 60vh; min-height: 450px; overflow: hidden;
}
.gallery-main img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.5s ease;
}
.gallery-main:hover img { transform: scale(1.05); }
.gallery-main-overlay {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.7));
padding: 40px 30px 30px;
}
.gallery-badge {
position: absolute; top: 20px; left: 20px;
padding: 10px 25px; border-radius: 50px; font-weight: 600; font-size: 0.85rem;
text-transform: uppercase; z-index: 5;
}
.gallery-badge.exclusive { background: var(--secondary); color: var(--dark); }
.gallery-badge.new { background: var(--accent); color: white; }
.gallery-badge.urban { background: #4a90d9; color: white; }
.gallery-actions {
display: flex; gap: 15px; position: absolute; top: 20px; right: 20px; z-index: 5;
}
.gallery-action-btn {
width: 50px; height: 50px; background: white; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--dark); font-size: 1.2rem; cursor: pointer; transition: all 0.3s ease;
border: none; text-decoration: none;
}
.gallery-action-btn:hover { background: var(--primary); color: white; transform: scale(1.1); }
.gallery-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 50px; height: 50px; background: rgba(255,255,255,0.9);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.3s ease; border: none; z-index: 5;
}
.gallery-nav:hover { background: white; transform: translateY(-50%) scale(1.1); }
.gallery-nav.prev { left: 20px; }
.gallery-nav.next { right: 20px; }
.gallery-thumbnails {
display: flex; gap: 10px; padding: 15px 30px;
background: rgba(0,0,0,0.8); overflow-x: auto;
}
.gallery-thumb {
width: 80px; height: 60px; border-radius: 8px; overflow: hidden;
cursor: pointer; opacity: 0.6; transition: all 0.3s ease; flex-shrink: 0;
border: 2px solid transparent;
}
.gallery-thumb:hover, .gallery-thumb.active {
opacity: 1; border-color: var(--secondary);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* ============ PROPERTY HEADER ============ */
.property-header {
background: white; padding: 40px 0; border-bottom: 1px solid #eee;
}
.property-title-main {
font-size: 2.5rem; margin-bottom: 10px; color: var(--dark);
}
.property-location-main {
color: var(--gray); font-size: 1.1rem; margin-bottom: 20px;
}
.property-location-main i { color: var(--primary); margin-right: 8px; }
.property-quick-info {
display: flex; flex-wrap: wrap; gap: 25px; margin-bottom: 25px;
}
.quick-info-item {
display: flex; align-items: center; gap: 10px;
padding: 12px 20px; background: #f8f9fa; border-radius: 12px;
}
.quick-info-item i {
font-size: 1.3rem; color: var(--primary);
}
.quick-info-item span { font-weight: 600; color: var(--dark); }
.property-price-main {
font-size: 2.8rem; font-weight: 800; color: var(--primary);
}
.property-price-main span {
font-size: 1rem; font-weight: 400; color: var(--gray);
}
.price-per-m2 {
font-size: 1.1rem; color: var(--gray); margin-top: 5px;
}
/* ============ PROPERTY CONTENT ============ */
.property-content { padding: 60px 0; }
.property-sidebar {
position: sticky; top: 100px;
}
.contact-card {
background: white; border-radius: 20px; padding: 35px;
box-shadow: var(--shadow); margin-bottom: 30px;
}
.contact-card h4 { margin-bottom: 25px; font-size: 1.3rem; }
.agent-info {
display: flex; align-items: center; gap: 15px; margin-bottom: 25px;
padding-bottom: 25px; border-bottom: 1px solid #eee;
}
.agent-avatar {
width: 70px; height: 70px; border-radius: 50%; object-fit: cover;
border: 3px solid var(--secondary);
}
.agent-name { font-size: 1.1rem; margin-bottom: 5px; }
.agent-role { color: var(--gray); font-size: 0.9rem; }
.agent-verified {
color: var(--primary); font-size: 0.85rem; margin-top: 3px;
}
.agent-verified i { margin-right: 5px; }
.contact-form .form-control, .contact-form .form-select {
border: 2px solid #e9ecef; border-radius: 12px; padding: 14px 18px;
margin-bottom: 15px; transition: all 0.3s ease;
}
.contact-form .form-control:focus, .contact-form .form-select:focus {
border-color: var(--primary); box-shadow: 0 0 0 0.2rem rgba(26,95,74,0.15);
}
.contact-form .btn { width: 100%; margin-top: 10px; }
.contact-actions {
display: flex; flex-direction: column; gap: 12px; margin-top: 20px;
}
.contact-action {
display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 14px; border-radius: 12px; font-weight: 600; text-decoration: none;
transition: all 0.3s ease;
}
.contact-action.phone {
background: var(--primary); color: white;
}
.contact-action.phone:hover {
background: var(--primary-dark); color: white; transform: translateY(-3px);
}
.contact-action.whatsapp {
background: #25D366; color: white;
}
.contact-action.whatsapp:hover {
background: #128C7E; color: white; transform: translateY(-3px);
}
.contact-action.email {
background: #f8f9fa; color: var(--dark); border: 2px solid #eee;
}
.contact-action.email:hover {
border-color: var(--primary); color: var(--primary); transform: translateY(-3px);
}
.property-highlights {
background: white; border-radius: 20px; padding: 30px;
box-shadow: var(--shadow);
}
.property-highlights h5 {
margin-bottom: 20px; font-size: 1.1rem;
}
.highlight-item {
display: flex; align-items: center; gap: 15px;
padding: 15px 0; border-bottom: 1px solid #f0f0f0;
}
.highlight-item:last-child { border-bottom: none; }
.highlight-icon {
width: 45px; height: 45px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem;
}
.highlight-icon.available { background: rgba(26,95,74,0.1); color: var(--primary); }
.highlight-icon.unavailable { background: rgba(231,76,60,0.1); color: #e74c3c; }
.highlight-text { flex: 1; }
.highlight-text strong { display: block; font-size: 0.95rem; }
.highlight-text span { font-size: 0.85rem; color: var(--gray); }
.share-section {
background: white; border-radius: 20px; padding: 25px;
box-shadow: var(--shadow); margin-top: 30px;
}
.share-section h6 { margin-bottom: 15px; font-size: 1rem; }
.share-buttons { display: flex; gap: 10px; }
.share-btn {
width: 45px; height: 45px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: white; font-size: 1.1rem; text-decoration: none; transition: all 0.3s ease;
}
.share-btn:hover { transform: translateY(-5px); color: white; }
.share-btn.facebook { background: #1877f2; }
.share-btn.twitter { background: #1da1f2; }
.share-btn.whatsapp { background: #25D366; }
.share-btn.telegram { background: #0088cc; }
.share-btn.copy { background: var(--gray); }
/* ============ DESCRIPTION ============ */
.description-section { margin-bottom: 50px; }
.section-title {
font-size: 1.8rem; margin-bottom: 25px; position: relative;
display: inline-block;
}
.section-title::after {
content: ''; position: absolute; bottom: -8px; left: 0;
width: 60px; height: 4px; background: var(--secondary); border-radius: 2px;
}
.description-text {
font-size: 1.05rem; line-height: 1.9; color: var(--gray);
}
.description-text p { margin-bottom: 20px; }
/* ============ TABS ============ */
.property-tabs { margin-bottom: 50px; }
.nav-tabs-custom {
display: flex; gap: 10px; border-bottom: 2px solid #eee; margin-bottom: 30px;
overflow-x: auto; padding-bottom: 2px;
}
.nav-tab-custom {
padding: 15px 30px; border: none; background: transparent;
color: var(--gray); font-weight: 600; cursor: pointer;
transition: all 0.3s ease; white-space: nowrap;
border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.nav-tab-custom:hover { color: var(--primary); }
.nav-tab-custom.active {
color: var(--primary); border-bottom-color: var(--primary);
}
.tab-content-custom { display: none; }
.tab-content-custom.active { display: block; }
.features-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.feature-item {
display: flex; align-items: center; gap: 15px;
padding: 20px; background: #f8f9fa; border-radius: 12px;
}
.feature-item i { font-size: 1.5rem; color: var(--primary); }
.feature-item span { font-weight: 500; }
/* ============ UTILITIES DETAIL ============ */
.utilities-section { margin-bottom: 50px; }
.utility-card {
background: white; border-radius: 15px; padding: 25px;
text-align: center; box-shadow: 0 5px 20px rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.utility-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.utility-icon-big {
width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 15px;
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem;
}
.utility-card.available .utility-icon-big {
background: rgba(26,95,74,0.1); color: var(--primary);
}
.utility-card.available .utility-card-title { color: var(--primary); }
.utility-card.unavailable .utility-icon-big {
background: rgba(231,76,60,0.1); color: #e74c3c;
}
.utility-card.planned .utility-icon-big {
background: rgba(212,168,83,0.1); color: var(--secondary);
}
.utility-card-title { font-size: 1rem; font-weight: 600; margin-bottom: 5px; }
.utility-card-status { font-size: 0.85rem; color: var(--gray); }
/* ============ DOCUMENTS ============ */
.documents-section { margin-bottom: 50px; }
.document-item {
display: flex; align-items: center; gap: 20px;
padding: 20px; background: #f8f9fa; border-radius: 12px;
margin-bottom: 15px; transition: all 0.3s ease;
}
.document-item:hover { background: #f0f0f0; }
.document-icon {
width: 50px; height: 50px; background: white; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: var(--primary); font-size: 1.5rem;
}
.document-info { flex: 1; }
.document-info h6 { margin-bottom: 5px; font-size: 1rem; }
.document-info p { font-size: 0.85rem; color: var(--gray); margin: 0; }
.document-status {
padding: 8px 20px; border-radius: 50px; font-size: 0.85rem; font-weight: 600;
}
.document-status.complete { background: rgba(26,95,74,0.1); color: var(--primary); }
.document-status.pending { background: rgba(212,168,83,0.1); color: var(--secondary); }
/* ============ MAP SECTION ============ */
.map-section { margin-bottom: 50px; }
.property-map-container {
height: 400px; border-radius: 20px; overflow: hidden;
box-shadow: var(--shadow);
}
#propertyMap { height: 100%; }
.location-info {
background: white; border-radius: 15px; padding: 25px;
margin-top: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.location-info h5 { margin-bottom: 20px; }
.location-item {
display: flex; align-items: center; gap: 15px;
padding: 15px 0; border-bottom: 1px solid #f0f0f0;
}
.location-item:last-child { border-bottom: none; }
.location-item i { color: var(--primary); font-size: 1.2rem; width: 25px; }
.location-item span { color: var(--gray); }
.location-distance { margin-left: auto; font-weight: 600; color: var(--dark); }
/* ============ SIMILAR PROPERTIES ============ */
.similar-section {
background: linear-gradient(180deg, #f8f9fa 0%, white 100%);
padding: 80px 0;
}
.similar-card {
background: white; border-radius: 20px; overflow: hidden;
box-shadow: var(--shadow); transition: all 0.4s ease;
margin-bottom: 30px;
}
.similar-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.similar-card-image {
position: relative; height: 200px; overflow: hidden;
}
.similar-card-image img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.5s ease;
}
.similar-card:hover .similar-card-image img { transform: scale(1.1); }
.similar-card-badge {
position: absolute; top: 15px; left: 15px;
padding: 5px 15px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;
}
.similar-card-badge.agricultural { background: var(--primary); color: white; }
.similar-card-badge.urban { background: #4a90d9; color: white; }
.similar-card-badge.house { background: #9b59b6; color: white; }
.similar-card-badge.apartment { background: var(--secondary); color: var(--dark); }
.similar-card-badge.ruins { background: #e74c3c; color: white; }
.similar-card-content { padding: 20px; }
.similar-card-title {
font-size: 1.1rem; margin-bottom: 8px; color: var(--dark);
text-decoration: none; display: block;
}
.similar-card-title:hover { color: var(--primary); }
.similar-card-location { color: var(--gray); font-size: 0.9rem; margin-bottom: 15px; }
.similar-card-location i { margin-right: 5px; }
.similar-card-footer {
display: flex; justify-content: space-between; align-items: center;
padding-top: 15px; border-top: 1px solid #eee;
}
.similar-card-price { font-size: 1.2rem; font-weight: 700; color: var(--primary); }
.similar-card-area { color: var(--gray); font-size: 0.9rem; }
.similar-card-area i { margin-right: 5px; }
/* ============ CALCULATOR ============ */
.calculator-section { margin-bottom: 50px; }
.calculator-card {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
border-radius: 25px; padding: 40px; color: white;
}
.calculator-card h4 { margin-bottom: 30px; }
.calculator-form .form-control {
background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.3);
color: white; border-radius: 12px; padding: 14px 18px; margin-bottom: 15px;
}
.calculator-form .form-control::placeholder { color: rgba(255,255,255,0.7); }
.calculator-form .form-control:focus {
background: rgba(255,255,255,0.2); border-color: white;
box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.25);
}
.calculator-form select option { color: var(--dark); }
.calculator-result {
background: rgba(255,255,255,0.15); border-radius: 15px; padding: 25px;
margin-top: 25px;
}
.calculator-result h5 { margin-bottom: 20px; font-size: 1.1rem; }
.result-item {
display: flex; justify-content: space-between; padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.result-item:last-child { border-bottom: none; font-weight: 700; font-size: 1.2rem; }
/* ============ FAQ SECTION ============ */
.faq-section { margin-bottom: 50px; }
.accordion-item {
border: none; margin-bottom: 15px; border-radius: 15px !important;
overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.accordion-button {
padding: 20px 25px; font-weight: 600; font-size: 1.05rem;
background: white; color: var(--dark);
}
.accordion-button:not(.collapsed) { background: var(--primary); color: white; }
.accordion-button:focus { box-shadow: none; border-color: transparent; }
.accordion-button:not(.collapsed)::after {
filter: brightness(0) invert(1);
}
.accordion-body {
padding: 25px; line-height: 1.8; color: var(--gray);
}
/* ============ FOOTER ============ */
footer {
background: var(--dark); color: white; padding: 60px 0 30px;
}
.footer-brand {
font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 800; margin-bottom: 20px;
}
.footer-brand span { color: var(--secondary); }
.footer-about {
color: rgba(255,255,255,0.7); line-height: 1.8; margin-bottom: 25px;
}
.footer-title {
font-size: 1.2rem; font-weight: 700; margin-bottom: 25px; color: white;
}
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a {
color: rgba(255,255,255,0.7); text-decoration: none; transition: all 0.3s ease;
}
.footer-links a:hover { color: var(--secondary); padding-left: 10px; }
.footer-contact-item {
display: flex; align-items: center; gap: 15px; margin-bottom: 15px;
color: rgba(255,255,255,0.7);
}
.footer-contact-item i { color: var(--secondary); font-size: 1.2rem; }
.social-links { display: flex; gap: 15px; margin-top: 30px; }
.social-link {
width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: white; font-size: 1.3rem; transition: all 0.3s ease; text-decoration: none;
}
.social-link:hover {
background: var(--primary); color: white; transform: translateY(-5px);
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1); margin-top: 40px;
padding-top: 25px; display: flex; justify-content: space-between;
align-items: center; flex-wrap: wrap; gap: 20px;
}
.footer-bottom p { margin: 0; color: rgba(255,255,255,0.5); font-size: 0.9rem; }
.footer-legal { display: flex; gap: 25px; }
.footer-legal a {
color: rgba(255,255,255,0.5); font-size: 0.9rem; text-decoration: none;
transition: color 0.3s ease;
}
.footer-legal a:hover { color: var(--secondary); }
/* ============ WHATSAPP ============ */
.whatsapp-float {
position: fixed; bottom: 30px; right: 30px; z-index: 1000;
}
.whatsapp-btn {
width: 65px; height: 65px; background: #25D366; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: white; font-size: 2rem; box-shadow: 0 5px 25px rgba(37,211,102,0.4);
transition: all 0.3s ease; text-decoration: none; text-align: center; line-height: 65px;
}
.whatsapp-btn:hover { transform: scale(1.1); color: white; box-shadow: 0 10px 35px rgba(37,211,102,0.5); }
/* ============ LIGHTBOX CUSTOM ============ */
.lightbox-overlay {
background: rgba(0,0,0,0.95) !important;
}
/* ============ RESPONSIVE ============ */
@media (max-width: 991px) {
.property-title-main { font-size: 1.8rem; }
.property-price-main { font-size: 2rem; }
.gallery-main { height: 40vh; min-height: 300px; }
.property-sidebar { position: static; }
}
@media (max-width: 767px) {
.gallery-main { height: 35vh; min-height: 250px; }
.gallery-thumbnails { display: none; }
.property-title-main { font-size: 1.5rem; }
.quick-info-item { padding: 10px 15px; font-size: 0.9rem; }
.footer-bottom { flex-direction: column; text-align: center; }
}
/* Print Styles */
@media print {
.navbar, .whatsapp-float, .contact-sidebar, .share-section, .gallery-actions { display: none !important; }
.property-content { padding-top: 0; }
}
</style>
</head>
<body>
<!-- ============ NAVBAR ============ -->
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">
Tenerife<span>Prop</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav align-items-center">
<li class="nav-item">
<a class="nav-link" href="index.html" data-i18n="nav.home">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#catalog" data-i18n="nav.catalog">Catálogo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#services" data-i18n="nav.services">Servicios</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#testimonials" data-i18n="nav.testimonials">Testimonios</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#contact" data-i18n="nav.contact">Contacto</a>
</li>
<li class="nav-item">
<div class="lang-switcher">
<a href="property.html" class="lang-btn active" data-lang="es">ES</a>
<a href="property-ru.html" class="lang-btn" data-lang="ru">RU</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- ============ BREADCRUMB ============ -->
<section class="breadcrumb-section" style="margin-top: 80px;">
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html" data-i18n="breadcrumb.home">Inicio</a></li>
<li class="breadcrumb-item"><a href="index.html#catalog" data-i18n="breadcrumb.catalog">Catálogo</a></li>
<li class="breadcrumb-item"><a href="#" data-i18n="breadcrumb.type">Terrenos Urbanos</a></li>
<li class="breadcrumb-item active" aria-current="page" data-i18n="breadcrumb.current">Terreno en Adeje</li>
</ol>
</nav>
</div>
</section>
<!-- ============ GALLERY ============ -->
<section class="gallery-section">
<div class="gallery-main" id="galleryMain">
<img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1920&q=80" alt="Terreno urbano en Adeje" id="mainImage">
<span class="gallery-badge exclusive" id="mainBadge">
<i class="bi bi-star-fill me-1"></i><span data-i18n="badge.exclusive">Exclusivo</span>
</span>
<div class="gallery-actions">
<button class="gallery-action-btn" onclick="shareProperty()" title="Compartir">
<i class="bi bi-share"></i>
</button>
<button class="gallery-action-btn" id="favoriteBtn" onclick="toggleFavorite()" title="Favoritos">
<i class="bi bi-heart"></i>
</button>
<a href="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1920&q=80"
class="gallery-action-btn" data-lightbox="gallery" data-title="Terreno urbano en Adeje">
<i class="bi bi-arrows-fullscreen"></i>
</a>
</div>
<button class="gallery-nav prev" onclick="prevImage()">
<i class="bi bi-chevron-left"></i>
</button>
<button class="gallery-nav next" onclick="nextImage()">
<i class="bi bi-chevron-right"></i>
</button>
<div class="gallery-main-overlay">
<div class="d-flex justify-content-between align-items-end">
<div>
<h1 class="text-white mb-2" style="font-size: 1.8rem;" id="galleryTitle" data-i18n="gallery.title">Terreno Urbano en Adeje</h1>
<p class="text-white-50 mb-0">
<i class="bi bi-geo-alt me-1"></i>
<span id="galleryLocation" data-i18n="gallery.location">Adeje, Tenerife Sur</span>
</p>
</div>
<div class="d-none d-md-block">
<div class="text-white text-end">
<div style="font-size: 2rem; font-weight: 800;" id="galleryPrice" data-i18n="gallery.price">385.000 €</div>
<div class="text-white-50" style="font-size: 0.9rem;" id="galleryPriceM2">154 €/m²</div>
</div>
</div>
</div>
</div>
</div>
<div class="gallery-thumbnails">
<div class="gallery-thumb active" onclick="setMainImage(0)">
<img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=200&q=60" alt="Vista 1">
</div>
<div class="gallery-thumb" onclick="setMainImage(1)">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=200&q=60" alt="Vista 2">
</div>
<div class="gallery-thumb" onclick="setMainImage(2)">
<img src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=200&q=60" alt="Vista 3">
</div>
<div class="gallery-thumb" onclick="setMainImage(3)">
<img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=200&q=60" alt="Vista 4">
</div>
<div class="gallery-thumb" onclick="setMainImage(4)">
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200&q=60" alt="Vista 5">
</div>
<div class="gallery-thumb" onclick="setMainImage(5)">
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=200&q=60" alt="Vista 6">
</div>
</div>
</section>
<!-- ============ PROPERTY HEADER ============ -->
<section class="property-header">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-8">
<h1 class="property-title-main" id="propertyTitle" data-i18n="property.title">Terreno Urbano en Adeje</h1>
<p class="property-location-main">
<i class="bi bi-geo-alt-fill"></i>
<span id="propertyLocation" data-i18n="property.location">Avda. de la Constitución, Adeje, Tenerife Sur, 38670</span>
</p>
<div class="property-quick-info">
<div class="quick-info-item">
<i class="bi bi-rulers"></i>
<span id="quickArea">2.500 m²</span>
</div>
<div class="quick-info-item">
<i class="bi bi-signpost-split"></i>
<span data-i18n="property.urbanLand">Terreno Urbano</span>
</div>
<div class="quick-info-item">
<i class="bi bi-calendar-check"></i>
<span data-i18n="property.buildable">Edificable</span>
</div>
<div class="quick-info-item">
<i class="bi bi-water"></i>
<span data-i18n="property.withWater">Con agua</span>
</div>
<div class="quick-info-item">
<i class="bi bi-lightning"></i>
<span data-i18n="property.withElectricity">Con luz</span>
</div>
</div>
</div>
<div class="col-lg-4 text-lg-end mt-4 mt-lg-0">
<div class="property-price-main" id="propertyPrice">385.000 €</div>
<div class="price-per-m2" id="pricePerM2">154 €/m²</div>
</div>
</div>
</div>
</section>
<!-- ============ PROPERTY CONTENT ============ -->
<section class="property-content">
<div class="container">
<div class="row">
<!-- Main Content -->
<div class="col-lg-8">
<!-- Description -->
<div class="description-section" data-aos="fade-up">
<h3 class="section-title" data-i18n="description.title">Descripción</h3>
<div class="description-text">
<p id="descriptionText1" data-i18n="description.text1">
Increíble oportunidad de adquirir este terreno urbano de 2.500 m² en la prestigiosa zona de Adeje, al sur de Tenerife. La propiedad goza de una ubicación privilegiada con acceso directo a la carretera principal y a tan solo 5 minutos en coche de las famosas playas de Costa Adeje.
</p>
<p id="descriptionText2" data-i18n="description.text2">
El terreno cuenta con licencia de obras vigente, lo que permite la construcción de una vivienda unifamiliar de hasta 500 m² cuadrados. La orientación sur garantiza sol durante todo el día y vistas parciales al mar. El suelo es compacto y firme, ideal para la construcción sin necesidad de cimentación especial.
</p>
<p id="descriptionText3" data-i18n="description.text3">
En las inmediaciones encontrará todo tipo de servicios: supermercados, colegios internacionales, centros médicos, campos de golf y una amplia variedad de restaurantes y tiendas. La zona es conocida por su alta demanda inmobiliaria y excelentes perspectivas de revalorización.
</p>
</div>
</div>
<!-- Tabs -->
<div class="property-tabs" data-aos="fade-up">
<div class="nav-tabs-custom">
<button class="nav-tab-custom active" onclick="switchTab('features')" data-i18n="tabs.features">Características</button>
<button class="nav-tab-custom" onclick="switchTab('utilities')" data-i18n="tabs.utilities">Comunicaciones</button>
<button class="nav-tab-custom" onclick="switchTab('documents')" data-i18n="tabs.documents">Documentación</button>
<button class="nav-tab-custom" onclick="switchTab('location')" data-i18n="tabs.location">Ubicación</button>
</div>
<!-- Features Tab -->
<div class="tab-content-custom active" id="featuresTab">
<div class="features-grid">
<div class="feature-item">
<i class="bi bi-rulers"></i>
<span data-i18n="features.area">Superficie: 2.500 m²</span>
</div>
<div class="feature-item">
<i class="bi bi-grid-3x3"></i>
<span data-i18n="features.type">Tipo: Urbano</span>
</div>
<div class="feature-item">
<i class="bi bi-building"></i>
<span data-i18n="features.buildable">Edificabilidad: 0,5 m²/m²</span>
</div>
<div class="feature-item">
<i class="bi bi-ruler-combined"></i>
<span data-i18n="features.maxHeight">Altura máx.: 2 plantas (7m)</span>
</div>
<div class="feature-item">
<i class="bi bi-sun"></i>
<span data-i18n="features.orientation">Orientación: Sur</span>
</div>
<div class="feature-item">
<i class="bi bi-eye"></i>
<span data-i18n="features.views">Vistas: Mar parciales</span>
</div>
<div class="feature-item">
<i class="bi bi-tree"></i>
<span data-i18n="features.topography">Topografía: Llana</span>
</div>
<div class="feature-item">
<i class="bi bi-car-front"></i>
<span data-i18n="features.access">Acceso: Carretera asfaltada</span>
</div>
<div class="feature-item">
<i class="bi bi-calendar-plus"></i>
<span data-i18n="features.license">Licencia obras: Vigente</span>
</div>
<div class="feature-item">
<i class="bi bi-wallet2"></i>
<span data-i18n="features.catastro">Referencia Catastral: 1234567TS8</span>
</div>
</div>
</div>
<!-- Utilities Tab -->
<div class="tab-content-custom" id="utilitiesTab">
<div class="row g-4">
<div class="col-md-4">
<div class="utility-card available">
<div class="utility-icon-big">
<i class="bi bi-droplet-fill"></i>
</div>
<h5 class="utility-card-title" data-i18n="utilities.water">Agua Potable</h5>
<p class="utility-card-status" data-i18n="utilities.available">Disponible</p>
<small class="text-muted" data-i18n="utilities.waterDesc">Conexión a 50m</small>
</div>
</div>
<div class="col-md-4">
<div class="utility-card available">
<div class="utility-icon-big">
<i class="bi bi-lightning-fill"></i>
</div>
<h5 class="utility-card-title" data-i18n="utilities.electricity">Electricidad</h5>
<p class="utility-card-status" data-i18n="utilities.available">Disponible</p>
<small class="text-muted" data-i18n="utilities.electricityDesc">Conexión trifásica</small>
</div>
</div>
<div class="col-md-4">
<div class="utility-card available">
<div class="utility-icon-big">
<i class="bi bi-phone-fill"></i>
</div>
<h5 class="utility-card-title" data-i18n="utilities.phone">Teléfono</h5>
<p class="utility-card-status" data-i18n="utilities.available">Disponible</p>
<small class="text-muted" data-i18n="utilities.phoneDesc">Fibra óptica</small>
</div>
</div>
<div class="col-md-4">
<div class="utility-card available">
<div class="utility-icon-big">
<i class="bi bi-droplet"></i>
</div>
<h5 class="utility-card-title" data-i18n="utilities.drainage">Alcantarillado</h5>
<p class="utility-card-status" data-i18n="utilities.available">Disponible</p>
<small class="text-muted" data-i18n="utilities.drainageDesc">Red municipal</small>
</div>
</div>
<div class="col-md-4">
<div class="utility-card available">
<div class="utility-icon-big">
<i class="bi bi-car-front-fill"></i>
</div>
<h5 class="utility-card-title" data-i18n="utilities.road">Acceso Rodado</h5>
<p class="utility-card-status" data-i18n="utilities.available">Excelente</p>
<small class="text-muted" data-i18n="utilities.roadDesc">Asfalto hasta la puerta</small>
</div>
</div>
<div class="col-md-4">
<div class="utility-card planned">
<div class="utility-icon-big">
<i class="bi bi-geo-alt"></i>
</div>
<h5 class="utility-card-title" data-i18n="utilities.gas">Gas Natural</h5>
<p class="utility-card-status" data-i18n="utilities.planned">En proyecto</p>
<small class="text-muted" data-i18n="utilities.gasDesc">Previsto 2025</small>
</div>
</div>
</div>
</div>
<!-- Documents Tab -->
<div class="tab-content-custom" id="documentsTab">
<div class="document-item">
<div class="document-icon"><i class="bi bi-file-earmark-check"></i></div>
<div class="document-info">
<h6 data-i18n="docs.scribbled">Escritura Pública</h6>
<p data-i18n="docs.scribbledDesc">Registro de la Propiedad de Adeje</p>
</div>
<span class="document-status complete" data-i18n="docs.complete">Completa</span>
</div>
<div class="document-item">
<div class="document-icon"><i class="bi bi-geo-alt"></i></div>
<div class="document-info">
<h6 data-i18n="docs.catastro">Referencia Catastral</h6>
<p data-i18n="docs.catastroDesc">Número: 1234567TS8</p>
</div>
<span class="document-status complete" data-i18n="docs.complete">Completa</span>
</div>
<div class="document-item">
<div class="document-icon"><i class="bi bi-file-text"></i></div>
<div class="document-info">
<h6 data-i18n="docs.license">Licencia de Obras</h6>
<p data-i18n="docs.licenseDesc">Licencia municipal vigente desde 2023</p>
</div>
<span class="document-status complete" data-i18n="docs.complete">Completa</span>
</div>
<div class="document-item">
<div class="document-icon"><i class="bi bi-building"></i></div>
<div class="document-info">
<h6 data-i18n="docs.plan">Plan General</h6>
<p data-i18n="docs.planDesc">Clasificado como Suelo Urbano</p>
</div>
<span class="document-status complete" data-i18n="docs.complete">Completa</span>
</div>
<div class="document-item">
<div class="document-icon"><i class="bi bi-file-earmark-pdf"></i></div>
<div class="document-info">
<h6 data-i18n="docs.certificate">Certificado Energético</h6>
<p data-i18n="docs.certificateDesc">Pendiente de emitir (obra nueva)</p>
</div>
<span class="document-status pending" data-i18n="docs.pending">Pendiente</span>
</div>
<div class="document-item">
<div class="document-icon"><i class="bi bi-shield-check"></i></div>
<div class="document-info">
<h6 data-i18n="docs.deudas">Certificado de No Deudas</h6>
<p data-i18n="docs.deudasDesc">Sin cargas ni deudas pendientes</p>
</div>
<span class="document-status complete" data-i18n="docs.complete">Completa</span>
</div>
</div>
<!-- Location Tab -->
<div class="tab-content-custom" id="locationTab">
<div class="property-map-container mb-4">
<div id="propertyMap"></div>
</div>
<div class="location-info">
<h5><i class="bi bi-signpost-split me-2"></i><span data-i18n="location.distances">Distancias</span></h5>
<div class="location-item">
<i class="bi bi-water"></i>
<span data-i18n="location.beach">Playa de Costa Adeje</span>
<span class="location-distance">3,2 km</span>
</div>
<div class="location-item">
<i class="bi bi-bag"></i>
<span data-i18n="location.shopping">Centro Comercial Gran Sur</span>
<span class="location-distance">1,5 km</span>
</div>
<div class="location-item">
<i class="bi bi-airplane"></i>
<span data-i18n="location.airport">Aeropuerto Sur (TFS)</span>
<span class="location-distance">18 km</span>
</div>
<div class="location-item">
<i class="bi bi-hospital"></i>
<span data-i18n="location.hospital">Hospital Quirón</span>
<span class="location-distance">4 km</span>
</div>
<div class="location-item">
<i class="bi bi-flower1"></i>
<span data-i18n="location.golf">Campo de Golf Costa Adeje</span>
<span class="location-distance">2,8 km</span>
</div>
<div class="location-item">
<i class="bi bi-box"></i>
<span data-i18n="location.school">Colegio Internacional</span>
<span class="location-distance">2 km</span>
</div>
</div>
</div>
</div>
<!-- Calculator -->
<div class="calculator-section" data-aos="fade-up">
<div class="calculator-card">
<h4><i class="bi bi-calculator me-2"></i><span data-i18n="calculator.title">Calculadora de Hipoteca</span></h4>
<form class="calculator-form" id="calculatorForm">
<div class="row">
<div class="col-md-6">
<input type="number" class="form-control" id="calcAmount" placeholder="Importe del préstamo" value="269500">
</div>
<div class="col-md-6">
<select class="form-select" id="calcYears">
<option value="10">10 años</option>
<option value="15">15 años</option>
<option value="20" selected>20 años</option>
<option value="25">25 años</option>
<option value="30">30 años</option>
</select>
</div>
<div class="col-md-12">
<input type="number" class="form-control" id="calcInterest" placeholder="Tipo de interés (%)" value="3.5" step="0.1">
</div>
</div>
<div class="calculator-result" id="calculatorResult">
<h5 data-i18n="calculator.result">Resultado estimado</h5>
<div class="result-item">
<span data-i18n="calculator.monthly">Cuota mensual</span>
<span id="monthlyPayment">1.570 €/mes</span>
</div>
<div class="result-item">
<span data-i18n="calculator.totalInterest">Total intereses</span>
<span id="totalInterest">107.300 €</span>
</div>
<div class="result-item">
<span data-i18n="calculator.totalAmount">Total a devolver</span>
<span id="totalAmount">376.800 €</span>
</div>
</div>
</form>
</div>
</div>
<!-- Property FAQ -->
<div class="faq-section" data-aos="fade-up">
<h3 class="section-title" data-i18n="faq.title">Preguntas Frecuentes</h3>
<div class="accordion" id="propertyFaq">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
<span data-i18n="faq.q1">¿Se puede construir una piscina?</span>
</button>
</h2>
<div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#propertyFaq">
<div class="accordion-body" data-i18n="faq.a1">
Sí, el terreno permite la construcción de una piscina privada de hasta 50 m². Solo necesitará solicitar la licencia de obra menor en el ayuntamiento. El clima de Tenerife permite usar la piscina durante todo el año.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
<span data-i18n="faq.q2">¿Se puede dividir el terreno?</span>
</button>
</h2>
<div id="faq2" class="accordion-collapse collapse" data-bs-parent="#propertyFaq">
<div class="accordion-body" data-i18n="faq.a2">
Técnicamente es posible dividir el terreno en parcelas más pequeñas, pero requiere un proceso de segregación urbana que puede durar varios meses. Le recomendamos consultar con nuestro departamento jurídico para evaluar esta opción.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
<span data-i18n="faq.q3">¿Qué tiempo tengo para construir?</span>
</button>
</h2>
<div id="faq3" class="accordion-collapse collapse" data-bs-parent="#propertyFaq">
<div class="accordion-body" data-i18n="faq.a3">
La licencia de obras tiene una validez de 3 años desde su concesión, prorrogable por 2 años adicionales. En total dispone de hasta 5 años para iniciar las obras de construcción.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
<span data-i18n="faq.q4">¿Hay restricciones de construcción?</span>
</button>
</h2>
<div id="faq4" class="accordion-collapse collapse" data-bs-parent="#propertyFaq">
<div class="accordion-body" data-i18n="faq.a4">
El terreno tiene algunas restricciones urbanísticas: ocupación máxima del 40%, altura máxima de 2 plantas (7 metros), retranqueos mínimos de 5 metros a linderos. Consulte el Plan General de Ordenación para detalles completos.
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="col-lg-4">
<div class="property-sidebar">
<!-- Contact Card -->
<div class="contact-card" data-aos="fade-left">
<h4><i class="bi bi-person-badge me-2"></i><span data-i18n="contact.title">Contactar Agente</span></h4>
<div class="agent-info">
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=150&h=150&fit=crop" alt="Carlos Martínez" class="agent-avatar">
<div>
<h5 class="agent-name">Carlos Martínez</h5>
<p class="agent-role" data-i18n="contact.agentRole">Agente Inmobiliario Senior</p>
<p class="agent-verified"><i class="bi bi-patch-check-fill"></i><span data-i18n="contact.verified">Verificado</span></p>
</div>
</div>
<form class="contact-form" id="contactForm">
<input type="text" class="form-control" id="contactName" required placeholder="Nombre *">
<input type="tel" class="form-control" id="contactPhone" required placeholder="Teléfono *">
<input type="email" class="form-control" id="contactEmail" placeholder="Email">
<select class="form-select" id="contactInterest">
<option value="viewing" data-i18n="contact.viewing">Solicitar visita</option>
<option value="purchase" data-i18n="contact.purchase">Información de compra</option>
<option value="financing" data-i18n="contact.financing">Opciones de financiación</option>
<option value="other" data-i18n="contact.other">Otro</option>
</select>
<input type="date" class="form-control" id="contactDate" placeholder="Fecha preferida">
<textarea class="form-control" id="contactMessage" rows="3" placeholder="Mensaje"></textarea>
<button type="submit" class="btn btn-primary-custom">
<i class="bi bi-send me-2"></i><span data-i18n="contact.submit">Enviar Mensaje</span>
</button>
</form>
<div class="contact-actions">
<a href="tel:+34922123456" class="contact-action phone">
<i class="bi bi-telephone"></i>+34 922 123 456
</a>
<a href="https://wa.me/34600123456?text=Hola%2C%20me%20interesa%20el%20terreno%20en%20Adeje" class="contact-action whatsapp" target="_blank">
<i class="bi bi-whatsapp"></i><span data-i18n="contact.whatsapp">WhatsApp</span>
</a>
<a href="mailto:info@tenerifeprop.com?subject=Consulta%20Terreno%20Adeje" class="contact-action email">
<i class="bi bi-envelope"></i>Email
</a>
</div>
</div>
<!-- Highlights -->
<div class="property-highlights" data-aos="fade-left" data-aos-delay="100">
<h5><i class="bi bi-star me-2"></i><span data-i18n="highlights.title">Destacados</span></h5>
<div class="highlight-item">
<div class="highlight-icon available"><i class="bi bi-check-lg"></i></div>
<div class="highlight-text">
<strong data-i18n="highlights.license.title">Licencia de Obras</strong>
<span data-i18n="highlights.license.text">Vigente ytransferible</span>
</div>
</div>
<div class="highlight-item">
<div class="highlight-icon available"><i class="bi bi-check-lg"></i></div>
<div class="highlight-text">
<strong data-i18n="highlights.utilities.title">Todos los Servicios</strong>
<span data-i18n="highlights.utilities.text">Agua, luz, teléfono</span>
</div>
</div>
<div class="highlight-item">
<div class="highlight-icon available"><i class="bi bi-check-lg"></i></div>
<div class="highlight-text">
<strong data-i18n="highlights.views.title">Vistas al Mar</strong>
<span data-i18n="highlights.views.text">Parciales desde planta alta</span>
</div>
</div>
<div class="highlight-item">
<div class="highlight-icon available"><i class="bi bi-check-lg"></i></div>
<div class="highlight-text">
<strong data-i18n="highlights.location.title">Ubicación Premium</strong>
<span data-i18n="highlights.location.text">Zona en desarrollo</span>
</div>
</div>
<div class="highlight-item">
<div class="highlight-icon available"><i class="bi bi-check-lg"></i></div>
<div class="highlight-text">
<strong data-i18n="highlights.investment.title">Alta Rentabilidad</strong>
<span data-i18n="highlights.investment.text">+8% anual en alquiler</span>
</div>
</div>
</div>
<!-- Share -->
<div class="share-section" data-aos="fade-left" data-aos-delay="200">
<h6><i class="bi bi-share me-2"></i><span data-i18n="share.title">Compartir</span></h6>
<div class="share-buttons">
<a href="#" class="share-btn facebook" onclick="shareFacebook()"><i class="bi bi-facebook"></i></a>
<a href="#" class="share-btn twitter" onclick="shareTwitter()"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="share-btn whatsapp" onclick="shareWhatsapp()"><i class="bi bi-whatsapp"></i></a>
<a href="#" class="share-btn telegram" onclick="shareTelegram()"><i class="bi bi-telegram"></i></a>
<a href="#" class="share-btn copy" onclick="copyLink()"><i class="bi bi-link-45deg"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ SIMILAR PROPERTIES ============ -->
<section class="similar-section">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<h2 class="section-title" data-i18n="similar.title" style="font-size: 2rem;">Propiedades Similares</h2>
<p class="text-muted" data-i18n="similar.subtitle">Otras opciones que podrían interesarte</p>
</div>
<div class="row" id="similarPropertiesGrid">
<!-- Dynamically loaded -->
</div>
</div>
</section>
<!-- ============ FOOTER ============ -->
<footer>
<div class="container">
<div class="row g-4">
<div class="col-lg-4">
<div class="footer-brand">Tenerife<span>Prop</span></div>
<p class="footer-about" data-i18n="footer.about">
Su socio de confianza en la compra de propiedades en Tenerife. Más de 12 años ayudando a clientes de todo el mundo a encontrar su hogar en el paraíso.
</p>
<div class="social-links">
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"><i class="bi bi-instagram"></i></a>
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
<a href="#" class="social-link"><i class="bi bi-telegram"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-4">
<h5 class="footer-title" data-i18n="footer.navigation">Navegación</h5>
<ul class="footer-links">
<li><a href="index.html" data-i18n="nav.home">Inicio</a></li>
<li><a href="index.html#catalog" data-i18n="nav.catalog">Catálogo</a></li>
<li><a href="index.html#services" data-i18n="nav.services">Servicios</a></li>
<li><a href="index.html#contact" data-i18n="nav.contact">Contacto</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-4">
<h5 class="footer-title" data-i18n="footer.properties">Propiedades</h5>
<ul class="footer-links">
<li><a href="#" data-i18n="footer.terrain">Terrenos agrícolas</a></li>
<li><a href="#" data-i18n="footer.urban">Terrenos urbanos</a></li>
<li><a href="#" data-i18n="footer.houses">Casas y villas</a></li>
<li><a href="#" data-i18n="footer.apartments">Apartamentos</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-4">
<h5 class="footer-title" data-i18n="footer.contact">Contacto</h5>
<div class="footer-contact-item">
<i class="bi bi-geo-alt"></i>
<span>Adeje, Tenerife, España</span>
</div>
<div class="footer-contact-item">
<i class="bi bi-telephone"></i>
<span>+34 922 123 456</span>
</div>
<div class="footer-contact-item">
<i class="bi bi-envelope"></i>
<span>info@tenerifeprop.com</span>
</div>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2024 TenerifeProp. <span data-i18n="footer.rights">Todos los derechos reservados.</span></p>
<div class="footer-legal">
<a href="#" data-i18n="footer.privacy">Política de Privacidad</a>
<a href="#" data-i18n="footer.terms">Términos de Uso</a>
</div>
</div>
</div>
</footer>
<!-- ============ WHATSAPP FLOAT ============ -->
<div class="whatsapp-float">
<a href="https://wa.me/34600123456?text=Hola%2C%20me%20interesa%20el%20terreno%20en%20Adeje" class="whatsapp-btn" target="_blank">
<i class="bi bi-whatsapp"></i>
</a>
</div>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/js/lightbox.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-mask-plugin@1.14.16/dist/jquery.mask.min.js"></script>
<script>
// ============ LANGUAGE DATA ============
const translations = {
es: {
nav: { home: 'Inicio', catalog: 'Catálogo', services: 'Servicios', testimonials: 'Testimonios', contact: 'Contacto' },
breadcrumb: { home: 'Inicio', catalog: 'Catálogo', type: 'Terrenos Urbanos', current: 'Terreno en Adeje' },
gallery: { title: 'Terreno Urbano en Adeje', location: 'Adeje, Tenerife Sur', price: '385.000 €' },
badge: { exclusive: 'Exclusivo', new: 'Nuevo' },
property: { title: 'Terreno Urbano en Adeje', location: 'Avda. de la Constitución, Adeje, Tenerife Sur, 38670', urbanLand: 'Terreno Urbano', buildable: 'Edificable', withWater: 'Con agua', withElectricity: 'Con luz' },
description: { title: 'Descripción', text1: 'Increíble oportunidad de adquirir este terreno urbano de 2.500 m² en la prestigiosa zona de Adeje, al sur de Tenerife. La propiedad goza de una ubicación privilegiada con acceso directo a la carretera principal y a tan solo 5 minutos en coche de las famosas playas de Costa Adeje.', text2: 'El terreno cuenta con licencia de obras vigente, lo que permite la construcción de una vivienda unifamiliar de hasta 500 m² cuadrados. La orientación sur garantiza sol durante todo el día y vistas parciales al mar. El suelo es compacto y firme, ideal para la construcción sin necesidad de cimentación especial.', text3: 'En las inmediaciones encontrará todo tipo de servicios: supermercados, colegios internacionales, centros médicos, campos de golf y una amplia variedad de restaurantes y tiendas. La zona es conocida por su alta demanda inmobiliaria y excelentes perspectivas de revalorización.' },
tabs: { features: 'Características', utilities: 'Comunicaciones', documents: 'Documentación', location: 'Ubicación' },
features: { area: 'Superficie: 2.500 m²', type: 'Tipo: Urbano', buildable: 'Edificabilidad: 0,5 m²/m²', maxHeight: 'Altura máx.: 2 plantas (7m)', orientation: 'Orientación: Sur', views: 'Vistas: Mar parciales', topography: 'Topografía: Llana', access: 'Acceso: Carretera asfaltada', license: 'Licencia obras: Vigente', catastro: 'Referencia Catastral: 1234567TS8' },
utilities: { water: 'Agua Potable', waterDesc: 'Conexión a 50m', electricity: 'Electricidad', electricityDesc: 'Conexión trifásica', phone: 'Teléfono', phoneDesc: 'Fibra óptica', drainage: 'Alcantarillado', drainageDesc: 'Red municipal', road: 'Acceso Rodado', roadDesc: 'Asfalto hasta la puerta', gas: 'Gas Natural', gasDesc: 'Previsto 2025', available: 'Disponible', planned: 'En proyecto' },
docs: { scribbled: 'Escritura Pública', scribbledDesc: 'Registro de la Propiedad de Adeje', catastro: 'Referencia Catastral', catastroDesc: 'Número: 1234567TS8', license: 'Licencia de Obras', licenseDesc: 'Licencia municipal vigente desde 2023', plan: 'Plan General', planDesc: 'Clasificado como Suelo Urbano', certificate: 'Certificado Energético', certificateDesc: 'Pendiente de emitir (obra nueva)', deudas: 'Certificado de No Deudas', deudasDesc: 'Sin cargas ni deudas pendientes', complete: 'Completa', pending: 'Pendiente' },
location: { distances: 'Distancias', beach: 'Playa de Costa Adeje', shopping: 'Centro Comercial Gran Sur', airport: 'Aeropuerto Sur (TFS)', hospital: 'Hospital Quirón', golf: 'Campo de Golf Costa Adeje', school: 'Colegio Internacional' },
calculator: { title: 'Calculadora de Hipoteca', result: 'Resultado estimado', monthly: 'Cuota mensual', totalInterest: 'Total intereses', totalAmount: 'Total a devolver' },
faq: { title: 'Preguntas Frecuentes', q1: '¿Se puede construir una piscina?', a1: 'Sí, el terreno permite la construcción de una piscina privada de hasta 50 m². Solo necesitará solicitar la licencia de obra menor en el ayuntamiento. El clima de Tenerife permite usar la piscina durante todo el año.', q2: '¿Se puede dividir el terreno?', a2: 'Técnicamente es posible dividir el terreno en parcelas más pequeñas, pero requiere un proceso de segregación urbana que puede durar varios meses. Le recomendamos consultar con nuestro departamento jurídico para evaluar esta opción.', q3: '¿Qué tiempo tengo para construir?', a3: 'La licencia de obras tiene una validez de 3 años desde su concesión, prorrogable por 2 años adicionales. En total dispone de hasta 5 años para iniciar las obras de construcción.', q4: '¿Hay restricciones de construcción?', a4: 'El terreno tiene algunas restricciones urbanísticas: ocupación máxima del 40%, altura máxima de 2 plantas (7 metros), retranqueos mínimos de 5 metros a linderos. Consulte el Plan General de Ordenación para detalles completos.' },
contact: { title: 'Contactar Agente', agentRole: 'Agente Inmobiliario Senior', verified: 'Verificado', viewing: 'Solicitar visita', purchase: 'Información de compra', financing: 'Opciones de financiación', other: 'Otro', submit: 'Enviar Mensaje', whatsapp: 'WhatsApp' },
highlights: { title: 'Destacados', license: { title: 'Licencia de Obras', text: 'Vigente y transferible' }, utilities: { title: 'Todos los Servicios', text: 'Agua, luz, teléfono' }, views: { title: 'Vistas al Mar', text: 'Parciales desde planta alta' }, location: { title: 'Ubicación Premium', text: 'Zona en desarrollo' }, investment: { title: 'Alta Rentabilidad', text: '+8% anual en alquiler' } },
share: { title: 'Compartir' },
similar: { title: 'Propiedades Similares', subtitle: 'Otras opciones que podrían interesarte', urban: 'Urbano', agricultural: 'Agrícola', house: 'Casa', card1: { title: 'Parcela Urbana en Granadilla' }, card2: { title: 'Terreno Agrícola en Güímar' }, card3: { title: 'Villa con Vistas al Mar' } },
footer: { about: 'Su socio de confianza en la compra de propiedades en Tenerife. Más de 12 años ayudando a clientes de todo el mundo a encontrar su hogar en el paraíso.', navigation: 'Navegación', properties: 'Propiedades', contact: 'Contacto', terrain: 'Terrenos agrícolas', urban: 'Terrenos urbanos', houses: 'Casas y villas', apartments: 'Apartamentos', rights: 'Todos los derechos reservados.', privacy: 'Política de Privacidad', terms: 'Términos de Uso' },
form: { success: '¡Mensaje enviado con éxito! Le contactaremos pronto.', error: 'Error al enviar. Por favor, inténtelo de nuevo.' }
},
ru: {
nav: { home: 'Главная', catalog: 'Каталог', services: 'Услуги', testimonials: 'Отзывы', contact: 'Контакты' },
breadcrumb: { home: 'Главная', catalog: 'Каталог', type: 'Городские участки', current: 'Участок в Адехе' },
gallery: { title: 'Городской участок в Адехе', location: 'Адехе, Южное Тенерифе', price: '385.000 €' },
badge: { exclusive: 'Эксклюзив', new: 'Новинка' },
property: { title: 'Городской участок в Адехе', location: 'Авда. де ла Конститусьон, Адехе, Южное Тенерифе, 38670', urbanLand: 'Городской участок', buildable: 'Под строительство', withWater: 'Вода', withElectricity: 'Электричество' },
description: { title: 'Описание', text1: 'Невероятная возможность приобрести этот городской участок площадью 2.500 м² в престижном районе Адехе на юге Тенерифе. Недвижимость имеет привилегированное расположение с прямым доступом к главной дороге и всего в 5 минутах езды на машине от знаменитых пляжей Коста Адехе.', text2: 'Участок имеет действующее разрешение на строительство, что позволяет построить индивидуальный жилой дом площадью до 500 м². Южная ориентация обеспечивает солнце в течение всего дня и частичный вид на море. Почва плотная и твёрдая, идеально подходит для строительства без специального фундамента.', text3: 'Поблизости вы найдёте всевозможные услуги: супермаркеты, международные школы, медицинские центры, гольф-поля и большое разнообразие ресторанов и магазинов. Район известен высоким спросом на недвижимость и отличными перспективами роста стоимости.' },
tabs: { features: 'Характеристики', utilities: 'Коммуникации', documents: 'Документация', location: 'Расположение' },
features: { area: 'Площадь: 2.500 м²', type: 'Тип: Городской', buildable: 'Застрояемость: 0,5 м²/м²', maxHeight: 'Макс. высота: 2 этажа (7м)', orientation: 'Ориентация: Юг', views: 'Виды: Частично море', topography: 'Рельеф: Ровный', access: 'Подъезд: Асфальт', license: 'Лицензия: Действующая', catastro: 'Кадастр: 1234567TS8' },
utilities: { water: 'Водоснабжение', waterDesc: 'Подключение в 50м', electricity: 'Электричество', electricityDesc: 'Трёхфазное', phone: 'Телефон', phoneDesc: 'Оптоволокно', drainage: 'Канализация', drainageDesc: 'Муницип. сеть', road: 'Подъезд', roadDesc: 'Асфальт до участка', gas: 'Газ', gasDesc: 'Планируется 2025', available: 'Доступно', planned: 'В проекте' },
docs: { scribbled: 'Публичный акт', scribbledDesc: 'Реестр собственности Адехе', catastro: 'Кадастровая справка', catastroDesc: 'Номер: 1234567TS8', license: 'Разрешение на стройку', licenseDesc: 'Муницип. лицензия с 2023г', plan: 'Генеральный план', planDesc: 'Классифицирован как Городская земля', certificate: 'Энерг. сертификат', certificateDesc: 'Ожидает выдачи (новостройка)', deudas: 'Справка об отсутствии долгов', deudasDesc: 'Без обременений', complete: 'Готово', pending: 'В процессе' },
location: { distances: 'Расстояния', beach: 'Пляж Коста Адехе', shopping: 'ТЦ Гран Сур', airport: 'Аэропорт Южный (ТФС)', hospital: 'Клиника Кирон', golf: 'Гольф-поле Коста Адехе', school: 'Международная школа' },
calculator: { title: 'Ипотечный калькулятор', result: 'Расчётная стоимость', monthly: 'Ежемесячный платёж', totalInterest: 'Всего процентов', totalAmount: 'Итого к возврату' },
faq: { title: 'Часто задаваемые вопросы', q1: 'Можно ли построить бассейн?', a1: 'Да, участок позволяет построить частный бассейн до 50 м². Вам просто нужно запросить разрешение на малые строительные работы в мэрии. Климат Тенерифе позволяет использовать бассейн круглый год.', q2: 'Можно ли разделить участок?', a2: 'Технически можно разделить участок на более мелкие части, но это требует процесса городского разделения, который может занять несколько месяцев. Мы рекомендуем проконсультироваться с нашим юридическим отделом.', q3: 'Сколько времени есть на строительство?', a3: 'Разрешение на строительство действительно в течение 3 лет с момента выдачи, с возможностью продления на 2 дополнительных года. Всего у вас есть до 5 лет для начала строительных работ.', q4: 'Есть ли ограничения на строительство?', a4: 'Участок имеет некоторые градостроительные ограничения: максимальная застройка 40%, максимальная высота 2 этажа (7 метров), минимальные отступы 5 метров от границ. Полные детали смотрите в Генеральном плане.' },
contact: { title: 'Связаться с агентом', agentRole: 'Старший риэлтор', verified: 'Проверен', viewing: 'Запрос просмотра', purchase: 'Информация о покупке', financing: 'Варианты финансирования', other: 'Другое', submit: 'Отправить сообщение', whatsapp: 'WhatsApp' },
highlights: { title: 'Преимущества', license: { title: 'Разрешение на стройку', text: 'Действующее, передаваемое' }, utilities: { title: 'Все коммуникации', text: 'Вода, свет, телефон' }, views: { title: 'Вид на море', text: 'Частично с верхнего этажа' }, location: { title: 'Премиум локация', text: 'Развивающийся район' }, investment: { title: 'Высокая доходность', text: '+8% годовых в аренде' } },
share: { title: 'Поделиться' },
similar: { title: 'Похожие объекты', subtitle: 'Другие варианты, которые могут вас заинтересовать', urban: 'Городской', agricultural: 'Сельхоз', house: 'Дом', card1: { title: 'Городской участок в Гранадилье' }, card2: { title: 'Сельхозучасток в Гуимаре' }, card3: { title: 'Вилла с видом на море' } },
footer: { about: 'Ваш надёжный партнёр в покупке недвижимости на Тенерифе. Более 12 лет помогаем клиентам со всего мира найти свой дом в раю.', navigation: 'Навигация', properties: 'Объекты', contact: 'Контакты', terrain: 'Сельхозучастки', urban: 'Городские участки', houses: 'Дома и виллы', apartments: 'Апартаменты', rights: 'Все права защищены.', privacy: 'Политика конфиденциальности', terms: 'Условия использования' },
form: { success: 'Сообщение успешно отправлено! Мы свяжемся с вами в ближайшее время.', error: 'Ошибка отправки. Пожалуйста, попробуйте ещё раз.' }
}
};
let currentLang = 'es';
// ============ GALLERY ============
const images = [
'https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1920&q=80',
'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1920&q=80',
'https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=1920&q=80',
'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=1920&q=80',
'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1920&q=80',
'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&q=80'
];
let currentImageIndex = 0;
function setMainImage(index) {
currentImageIndex = index;
$('#mainImage').attr('src', images[index]);
$('.gallery-thumb').removeClass('active');
$('.gallery-thumb').eq(index).addClass('active');
}
function prevImage() {
currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
setMainImage(currentImageIndex);
}
function nextImage() {
currentImageIndex = (currentImageIndex + 1) % images.length;
setMainImage(currentImageIndex);
}
// ============ TABS ============
function switchTab(tabName) {
$('.nav-tab-custom').removeClass('active');
$(`.nav-tab-custom:contains('${tabName}'), .nav-tab-custom[data-tab='${tabName}']`).addClass('active');
$('.tab-content-custom').removeClass('active');
$(`#${tabName}Tab`).addClass('active');
// Update active state
document.querySelectorAll('.nav-tab-custom').forEach(btn => {
btn.classList.remove('active');
if (btn.textContent.trim().toLowerCase().includes(tabName.toLowerCase())) {
btn.classList.add('active');
}
});
// Show correct tab content
document.querySelectorAll('.tab-content-custom').forEach(content => {
content.classList.remove('active');
});
document.getElementById(tabName + 'Tab')?.classList.add('active');
// Refresh map if location tab
if (tabName === 'location' && propertyMap) {
setTimeout(() => propertyMap.invalidateSize(), 100);
}
}
// ============ FAVORITE ============
function toggleFavorite() {
const btn = $('#favoriteBtn');
btn.toggleClass('active');
if (btn.hasClass('active')) {
btn.find('i').removeClass('bi-heart').addClass('bi-heart-fill');
} else {
btn.find('i').removeClass('bi-heart-fill').addClass('bi-heart');
}
}
// ============ SHARE ============
function shareProperty() {
const url = encodeURIComponent(window.location.href);
const title = encodeURIComponent(document.title);
if (navigator.share) {
navigator.share({ title, url });
}
}
function shareFacebook() {
window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}`, '_blank');
}
function shareTwitter() {
window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(window.location.href)}&text=${encodeURIComponent(document.title)}`, '_blank');
}
function shareWhatsapp() {
window.open(`https://wa.me/?text=${encodeURIComponent(document.title + ' ' + window.location.href)}`, '_blank');
}
function shareTelegram() {
window.open(`https://t.me/share/url?url=${encodeURIComponent(window.location.href)}&title=${encodeURIComponent(document.title)}`, '_blank');
}
function copyLink() {
navigator.clipboard.writeText(window.location.href);
showNotification('success', currentLang === 'es' ? '¡Enlace copiado!' : 'Ссылка скопирована!');
}
// ============ CALCULATOR ============
function calculateMortgage() {
const amount = parseFloat($('#calcAmount').val()) || 0;
const years = parseFloat($('#calcYears').val()) || 20;
const interest = parseFloat($('#calcInterest').val()) / 100 / 12;
const months = years * 12;
if (amount > 0 && interest > 0) {
const monthly = amount * (interest * Math.pow(1 + interest, months)) / (Math.pow(1 + interest, months) - 1);
const total = monthly * months;
const totalInterest = total - amount;
$('#monthlyPayment').text(monthly.toFixed(0) + ' €/mes');
$('#totalInterest').text(totalInterest.toFixed(0) + ' €');
$('#totalAmount').text(total.toFixed(0) + ' €');
}
}
// ============ NOTIFICATION ============
function showNotification(type, message) {
const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
const icon = type === 'success' ? 'check-circle' : 'exclamation-circle';
const notification = $(`
<div class="alert ${alertClass} position-fixed" style="top: 100px; right: 20px; z-index: 9999; animation: fadeInRight 0.5s ease;">
<i class="bi bi-${icon} me-2"></i>${message}
</div>
`);
$('body').append(notification);
setTimeout(() => notification.fadeOut(500, function() { $(this).remove(); }), 4000);
}
// ============ MAP ============
let propertyMap;
function initMap() {
propertyMap = L.map('propertyMap').setView([28.1221, -16.7306], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors'
}).addTo(propertyMap);
// Main marker
const mainMarker = L.marker([28.1221, -16.7306]).addTo(propertyMap);
mainMarker.bindPopup(`
<div style="text-align: center; padding: 10px;">
<strong>Terreno Urbano en Adeje</strong><br>
<span style="color: var(--primary); font-weight: bold;">385.000 €</span>
</div>
`);
// Area indicator (approximate)
L.rectangle([
[28.1215, -16.7315],
[28.1227, -16.7295]
], { color: '#1a5f4a', fillOpacity: 0.2, weight: 2 }).addTo(propertyMap);
}
// ============ LANGUAGE ============
function switchLanguage(lang) {
currentLang = lang;
$('html').attr('lang', lang);
$('[data-i18n]').each(function() {
const key = $(this).data('i18n');
const value = getNestedValue(translations[lang], key);
if (value) {
if ($(this).is('input, textarea')) {
$(this).attr('placeholder', value);
} else {
$(this).html(value);
}
}
});
}
function getNestedValue(obj, path) {
return path.split('.').reduce((acc, part) => acc && acc[part], obj);
}
// ============ INIT ============
$(document).ready(function() {
// AOS
AOS.init({ duration: 800, once: true, offset: 100 });
// Init map
initMap();
// Phone mask
$('#contactPhone').mask('+34 000 000 000');
// Calculator
$('#calculatorForm input, #calculatorForm select').on('change input', calculateMortgage);
calculateMortgage();
// Contact form
$('#contactForm').submit(function(e) {
e.preventDefault();
const formData = {
name: $('#contactName').val(),
phone: $('#contactPhone').val(),
email: $('#contactEmail').val(),
interest: $('#contactInterest').val(),
date: $('#contactDate').val(),
message: $('#contactMessage').val(),
property: 'Terreno Urbano Adeje'
};
console.log('Contact form submitted:', formData);
showNotification('success', translations[currentLang].form.success);
$(this)[0].reset();
});
// Add animation keyframes
$('head').append(`
<style>
@keyframes fadeInRight {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}
</style>
`);
// Smooth scroll
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
const target = $(this.getAttribute('href'));
if (target.length) {
$('html, body').stop().animate({
scrollTop: target.offset().top - 80
}, 800);
}
});
// Check URL for language
const urlParams = new URLSearchParams(window.location.search);
const lang = urlParams.get('lang') || 'es';
switchLanguage(lang);
// Load similar properties
loadSimilarProperties();
});
// ============ SIMILAR PROPERTIES ============
async function loadSimilarProperties() {
const container = $('#similarPropertiesGrid');
const currentSlug = window.location.pathname.split('/').pop() || 'terreno-urbano-adeje';
try {
const response = await fetch('/api/properties?limit=3');
const result = await response.json();
if (!result.success || !result.data) {
container.html('<div class="col-12 text-center text-muted">No hay propiedades disponibles</div>');
return;
}
// Filter out current property and get first 3
const similarProps = result.data
.filter(p => p.slug !== currentSlug)
.slice(0, 3);
const typeLabels = {
urban: { es: 'Urbano', ru: 'Городской', class: 'urban' },
agricultural: { es: 'Agrícola', ru: 'Сельхоз', class: 'agricultural' },
house: { es: 'Casa', ru: 'Дом', class: 'house' },
apartment: { es: 'Apartamento', ru: 'Апартаменты', class: 'apartment' }
};
container.empty();
similarProps.forEach((property, index) => {
const typeInfo = typeLabels[property.type] || typeLabels.urban;
const typeLabel = typeInfo[currentLang];
const images = JSON.parse(property.images || '[]');
const mainImage = images[0] || 'https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=600&q=80';
const priceFormatted = new Intl.NumberFormat('es-ES').format(property.price);
const areaFormatted = new Intl.NumberFormat('es-ES').format(property.area);
const title = property[`title_${currentLang}`] || property.title_es;
const card = `
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="${(index + 1) * 100}">
<div class="similar-card">
<a href="/property/${property.slug}" class="similar-card-image">
<img src="${mainImage}" alt="${title}">
<span class="similar-card-badge ${typeInfo.class}">${typeLabel}</span>
</a>
<div class="similar-card-content">
<a href="/property/${property.slug}" class="similar-card-title">${title}</a>
<p class="similar-card-location">
<i class="bi bi-geo-alt"></i> ${property.city}
</p>
<div class="similar-card-footer">
<span class="similar-card-price">${priceFormatted} €</span>
<span class="similar-card-area">
<i class="bi bi-rulers"></i> ${areaFormatted}
</span>
</div>
</div>
</div>
</div>
`;
container.append(card);
});
} catch (error) {
console.error('Error loading similar properties:', error);
container.html('<div class="col-12 text-center text-muted">Error al cargar propiedades</div>');
}
}
</script>
</body>
</html>