ignashq/coastaldreamhomes
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Territory Map | Karklės Jūra</title>7 <link rel="stylesheet" href="styles.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="map.js" defer></script>11</head>12<body class="font-sans antialiased text-gray-800 bg-gray-100">13 <!-- Navigation -->14 <nav class="bg-white shadow-lg sticky top-0 z-50">15 <div class="max-w-6xl mx-auto px-4">16 <div class="flex justify-between items-center py-4">17 <div class="flex items-center">18 <a href="index.html" class="text-2xl font-bold text-blue-800">Karklės Jūra</a>19 </div>20 <div class="hidden md:flex space-x-8">21 <a href="index.html#homes" class="text-gray-700 hover:text-blue-600 transition">Namai</a>22 <a href="index.html#territory" class="text-gray-700 hover:text-blue-600 transition">Teritorija</a>23 <a href="map.html" class="text-blue-600 font-medium">Žemėlapis</a>24 <a href="index.html#about" class="text-gray-700 hover:text-blue-600 transition">Apie Projektą</a>25 <a href="gallery.html" class="text-gray-700 hover:text-blue-600 transition">Galerija</a>26 <a href="index.html#contact" class="text-gray-700 hover:text-blue-600 transition">Kontaktai</a>27 </div>28 <div class="md:hidden">29 <button class="mobile-menu-button p-2 focus:outline-none">30 <i data-feather="menu"></i>31 </button>32 </div>33 </div>34 </div>35 </nav>36 37 <!-- Map Section -->38 <section class="py-12">39 <div class="max-w-6xl mx-auto px-4">40 <h1 class="text-3xl font-bold text-center mb-8">Teritorijos Žemėlapis</h1>41 <div class="bg-white p-6 rounded-lg shadow-lg">42 <div id="map-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">43 <!-- Loading houses... -->44 </div>45 <div id="map-error" class="hidden text-center py-8">46 <i data-feather="alert-triangle" class="w-12 h-12 text-yellow-500 mx-auto mb-4"></i>47 <p class="text-xl font-medium">Nepavyko įkelti namų duomenų</p>48 <button id="retry-loading" class="mt-4 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded transition duration-300">49 Bandyti dar kartą50 </button>51 </div>52 <div class="mt-6 bg-blue-50 p-4 rounded-lg">53 <h3 class="text-xl font-semibold mb-2">Legenda:</h3>54 <div class="flex flex-wrap items-center gap-4">55 <div class="flex items-center">56 <div class="w-6 h-6 bg-green-500 rounded-full mr-2"></div>57 <span>Laisvas</span>58 </div>59 <div class="flex items-center">60 <div class="w-6 h-6 bg-yellow-500 rounded-full mr-2"></div>61 <span>Rezervuotas</span>62 </div>63 <div class="flex items-center">64 <div class="w-6 h-6 bg-red-500 rounded-full mr-2"></div>65 <span>Parduotas</span>66 </div>67 </div>68 </div>69 </div>70 </div>71 </section>72 73 <!-- House Info Modal -->74 <div id="house-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">75 <div class="bg-white rounded-lg max-w-3xl w-full max-h-[90vh] overflow-y-auto">76 <div class="p-8">77 <div class="flex justify-between items-start mb-6">78 <h3 id="modal-title" class="text-3xl font-bold">Namas #1</h3>79 <button id="close-modal" class="text-gray-500 hover:text-gray-700">80 <i data-feather="x" class="w-6 h-6"></i>81 </button>82 </div>83 <div id="modal-content" class="space-y-6">84 <div class="grid md:grid-cols-2 gap-8">85 <div>86 <img id="modal-image" src="http://static.photos/house/640x360/1" alt="House" class="w-full rounded-lg shadow-md">87 </div>88 <div>89 <div class="space-y-4">90 <div>91 <h4 class="text-lg font-semibold text-gray-700">Statusas:</h4>92 <p id="modal-status" class="text-xl"><span class="text-green-600">Laisvas</span></p>93 </div>94 <div>95 <h4 class="text-lg font-semibold text-gray-700">Plotas:</h4>96 <p id="modal-area" class="text-lg">150 m²</p>97 </div>98 <div>99 <h4 class="text-lg font-semibold text-gray-700">Kambariai:</h4>100 <p id="modal-rooms" class="text-lg">4</p>101 </div>102 <div>103 <h4 class="text-lg font-semibold text-gray-700">Kaina:</h4>104 <p id="modal-price" class="text-2xl font-bold">€250,000</p>105 </div>106 </div>107 <div class="mt-8 flex flex-col gap-4">108 <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 text-center">109 Susisiekti dėl šio namo110 </a>111 <a href="index.html#homes" class="border border-blue-600 text-blue-600 hover:bg-blue-50 font-bold py-3 px-6 rounded-lg transition duration-300 text-center">112 Visi Namai113 </a>114 </div>115 </div>116 </div>117 <div id="modal-features" class="pt-6 border-t border-gray-200">118 <h4 class="text-xl font-semibold mb-4">Papildoma informacija</h4>119 <ul id="features-list" class="grid grid-cols-2 gap-4">120 <!-- Features will be added by JavaScript -->121 </ul>122 </div>123 </div>124 </div>125 </div>126 </div>127 128 <style>129 .house-card {130 transition: all 0.3s ease;131 border-radius: 0.75rem;132 overflow: hidden;133 }134 .house-card:hover {135 transform: translateY(-5px);136 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);137 }138 .status-available {139 background-color: #d1fae5;140 color: #065f46;141 }142 .status-reserved {143 background-color: #fef3c7;144 color: #92400e;145 }146 .status-sold {147 background-color: #fee2e2;148 color: #991b1b;149 }150 </style>151 152 <!-- Footer -->153 <footer class="bg-gray-900 text-white py-12 mt-12">154 <div class="max-w-6xl mx-auto px-4">155 <div class="grid md:grid-cols-3 gap-8">156 <div>157 <h3 class="text-xl font-bold mb-4">Karklės Jūra</h3>158 <p>Privačių namų teritorija, apjungianti pajūrio gamtos grožį ir patogų miesto gyvenimą.</p>159 </div>160 <div>161 <h3 class="text-xl font-bold mb-4">Nuorodos</h3>162 <ul class="space-y-2">163 <li><a href="index.html#homes" class="hover:text-blue-400 transition">Namai</a></li>164 <li><a href="index.html#territory" class="hover:text-blue-400 transition">Teritorija</a></li>165 <li><a href="map.html" class="text-blue-400">Žemėlapis</a></li>166 <li><a href="index.html#about" class="hover:text-blue-400 transition">Apie Projektą</a></li>167 </ul>168 </div>169 <div>170 <h3 class="text-xl font-bold mb-4">Kontaktai</h3>171 <div class="space-y-2">172 <div class="flex items-center">173 <i data-feather="phone" class="mr-2 w-4 h-4"></i>174 <span>+370 6XX XXXXX</span>175 </div>176 <div class="flex items-center">177 <i data-feather="mail" class="mr-2 w-4 h-4"></i>178 <span>info@karklesjura.lt</span>179 </div>180 <div class="flex items-center">181 <i data-feather="map-pin" class="mr-2 w-4 h-4"></i>182 <span>Karklė, Lietuva</span>183 </div>184 </div>185 </div>186 </div>187 <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">188 <p>© 2023 Karklės Jūra. Visos teisės saugomos.</p>189 </div>190 </div>191 </footer>192 193 <script>194 feather.replace();195 </script>196</body>197</html>