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>5379 Wellburn Drive</title> 7
7<script src="https://cdn.tailwindcss.com"></script>
7 8 <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> 9 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/pannellum.css"/> 10
10<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/pannellum.js"></script>
10 11 <style> 12 :root { --brand: #f97316; } 13 body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #020617; color: #f8fafc; overflow-x: hidden; } 14 .glass-panel { background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); } 15 .tab-content { display: none; } 16 .tab-content.active { display: block; animation: fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } 17 @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } 18 @keyframes sun-flare-main { 0% { opacity: 0.3; transform: scale(1) translate(-20%, -20%); } 50% { opacity: 0.7; transform: scale(1.15) translate(-15%, -15%); } 100% { opacity: 0.3; transform: scale(1) translate(-20%, -20%); } } 19 .sun-flare-main { position: absolute; top: -10%; left: -10%; width: 70%; height: 70%; background: radial-gradient(circle at center, rgba(255,255,255,0.5) 0%, rgba(251,191,36,0.2) 30%, rgba(249,115,22,0.05) 50%, transparent 70%); filter: blur(70px); animation: sun-flare-main 12s infinite ease-in-out; pointer-events: none; z-index: 10; } 20 .tab-btn { color: #64748b; border-bottom: 2px solid transparent; transition: all 0.3s; cursor: pointer; } 21 .tab-btn.active { color: var(--brand); border-color: var(--brand); } 22 .mobile-gallery-scrollbar::-webkit-scrollbar { height: 6px; display: block; } 23 .mobile-gallery-scrollbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; } 24 .mobile-gallery-scrollbar::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 10px; } 25 .scrollbar-hide::-webkit-scrollbar { display: none; } 26 .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } 27 #lightbox { display: none; position: fixed; inset: 0; background: rgba(2, 6, 23, 0.98); backdrop-filter: blur(12px); z-index: 1000; flex-direction: column; align-items: center; justify-content: center; padding: 0.75rem; } 28 #lightbox.active { display: flex; animation: fade-in-up 0.3s ease-out; } 29 .lightbox-control { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; padding: 0.75rem; border-radius: 1rem; transition: all 0.2s; cursor: pointer; backdrop-filter: blur(8px); } 30 .lightbox-control:hover { background: rgba(255, 255, 255, 0.2); border-color: var(--brand); } 31 </style> 32</head> 33<body> 34 <div id="lightbox" onclick="if(event.target === this) closeLightbox()"> 35 <button onclick="closeLightbox()" class="absolute top-4 right-4 sm:top-8 sm:right-8 lightbox-control z-[1100]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" class="w-5 h-5 sm:w-6 sm:h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></button> 36 <button id="lightbox-prev" onclick="changeLightbox(-1)" class="absolute left-2 sm:left-8 top-1/2 -translate-y-1/2 lightbox-control z-[1100]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" class="w-5 h-5 sm:w-6 sm:h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg></button> 37 <button id="lightbox-next" onclick="changeLightbox(1)" class="absolute right-2 sm:right-8 top-1/2 -translate-y-1/2 lightbox-control z-[1100]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" class="w-5 h-5 sm:w-6 sm:h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg></button> 38 <div id="lightbox-badge" class="absolute top-4 left-4 sm:top-8 sm:left-8 px-3 py-1.5 sm:px-4 sm:py-2 bg-orange-600 text-white font-black text-[9px] sm:text-xs uppercase tracking-widest rounded-xl shadow-2xl flex items-center gap-2 z-[1100]" style="display: none;"> 39 <span>ð</span> 360° Interactive Panorama 40 </div> 41 <img id="lightbox-img" src="" class="max-w-full max-h-[82vh] object-contain shadow-2xl rounded-2xl border border-white/5"> 42 <div id="lightbox-pano" class="w-[96vw] sm:w-[90vw] max-w-5xl h-[75vh] sm:h-[80vh] rounded-2xl overflow-hidden shadow-2xl border border-white/10" style="display: none;"></div> 43 <div class="mt-4 sm:mt-6 text-[10px] font-black uppercase tracking-widest text-slate-500" id="lightbox-counter">0 / 0</div> 44 </div> 45 46 <div class="h-[65vh] md:h-[80vh] w-full relative overflow-hidden"> 47 <div class="sun-flare-main"></div> 48 <img src="images/gallery/img_0.jpg" fetchpriority="high" decoding="async" class="w-full h-full object-cover"> 49 <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent"></div> 50 <div class="absolute bottom-12 left-0 w-full px-6 md:px-12 max-w-[1400px] mx-auto right-0 flex flex-wrap items-end justify-between gap-6"> 51 <div class="space-y-4"> 52 53 <h1 class="text-[clamp(1.5rem,4vw,4.5rem)] font-black text-white uppercase tracking-tighter leading-[1.1]">5379 Wellburn Drive</h1> 54 <div class="flex items-center gap-6 text-slate-400 font-bold uppercase tracking-[0.2em] text-xs md:text-sm"><span>Delta</span><span class="opacity-20">|</span><span class="text-white">5 BED ⢠4.5 BATH ⢠2623 SQFT</span></div> 55 </div>
56 <div class="p-4 md:p-6 glass-panel rounded-3xl border border-white/10 hidden md:flex"><img src="images/logo.jpg" class="h-16 object-contain"></div> 57 </div> 58 </div> 59 60 <div class="max-w-[1440px] mx-auto px-6 md:px-12 pt-12 md:pt-20 pb-32"> 61 <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 md:gap-20"> 62 <div class="lg:col-span-8"> 63 <div class="flex justify-start md:justify-center gap-6 md:gap-12 overflow-x-auto border-b border-white/5 py-6 mb-8 scrollbar-hide"> 64 <div onclick="switchTab('gallery')" id="btn-gallery" class="tab-btn active whitespace-nowrap px-2 py-2 text-[11px] font-black uppercase tracking-[0.2em]">Gallery</div> 65 <div onclick="switchTab('floorplan')" id="btn-floorplan" class="tab-btn whitespace-nowrap px-2 py-2 text-[11px] font-black uppercase tracking-[0.2em]">Floor Plan</div> 66 <div onclick="switchTab('interactive')" id="btn-interactive" class="tab-btn whitespace-nowrap px-2 py-2 text-[11px] font-black uppercase tracking-[0.2em]">Interactive</div> 67 68 <div onclick="switchTab('map')" id="btn-map" class="tab-btn whitespace-nowrap px-2 py-2 text-[11px] font-black uppercase tracking-[0.2em]">Location & Map</div> 69 </div> 70 71 <div id="gallery" class="tab-content active"> 72 <!-- Website Fast Scroller & Slideshow Controller Ribbon --> 73 <div class="w-full mb-6"> 74 <div class="bg-slate-900/90 backdrop-blur-xl border border-white/10 rounded-3xl p-4 md:p-5 shadow-2xl space-y-3"> 75 <div class="flex flex-wrap items-center justify-between gap-3 px-1"> 76 <div class="flex items-center gap-2.5"> 77 <span id="export-status-dot" class="w-2.5 h-2.5 rounded-full animate-ping" style="background-color: #f97316"></span> 78 <div class="flex flex-col"> 79 <span id="export-status-title" class="text-[11px] font-black uppercase tracking-wider text-white">Slideshow Mode (2s Auto-Play)</span> 80 <span id="export-status-sub" class="text-[9px] font-mono text-slate-400">Auto-advancing every 2 seconds</span> 81 </div> 82 </div> 83 <div class="flex items-center gap-2"> 84 <button id="export-play-btn" type="button" onclick="toggleExportSlideshowPlay()" class="text-[10px] font-black uppercase px-3 py-1.5 rounded-xl border transition-all cursor-pointer" style="background-color: #f9731620; color: #f97316; border-color: #f9731640;"> 85 ⸠Pause 86 </button> 87 <button type="button" onclick="toggleExportThumbStrip()" class="text-[10px] font-bold px-3 py-1.5 rounded-xl border uppercase transition-all cursor-pointer" style="background-color: #f9731615; color: #f97316; border-color: #f9731630;"> 88 Thumbnails â¼ 89 </button> 90 <button type="button" onclick="setExportSlide(0)" class="text-[10px] font-bold text-slate-400 hover:text-white bg-slate-800/80 px-2.5 py-1.5 rounded-xl border border-white/5 uppercase transition-colors cursor-pointer"> 91 First ⬠92 </button> 93 <button type="button" onclick="setExportSlide(GALLERY_IMAGES.length - 1)" class="text-[10px] font-bold text-slate-400 hover:text-white bg-slate-800/80 px-2.5 py-1.5 rounded-xl border border-white/5 uppercase transition-colors cursor-pointer"> 94 Last ⬠95 </button> 96 </div> 97 </div> 98 99 <!-- 2-Second Timer Progress Bar --> 100 <div id="export-timer-track" class="w-full bg-slate-950 h-1.5 rounded-full overflow-hidden border border-white/5 relative"> 101 <div id="export-timer-bar" class="h-full rounded-full transition-all duration-75" style="width: 0%; background-color: #f97316; box-shadow: 0 0 10px #f9731680"></div> 102 </div> 103 104 <!-- Horizontal Slider / Range Bar --> 105 <div class="relative flex items-center gap-2.5 px-1 pt-1 pb-1"> 106 <button type="button" onclick="changeExportSlide(-1)" class="w-8 h-8 rounded-xl bg-slate-800 border border-white/10 text-slate-200 active:scale-95 flex items-center justify-center text-xs font-bold shrink-0 transition-all hover:bg-slate-700 cursor-pointer"> 107 â 108 </button> 109 <div class="relative flex-grow flex items-center h-8"> 110 <input id="export-slider-input" type="range" min="0" max="53" value="
1100" oninput="setExportSlide(parseInt(this.value, 10))" class="w-full h-3 bg-slate-800 border border-white/10 rounded-lg appearance-none cursor-pointer focus:outline-none" style="accent-color: #f97316"> 111 </div> 112 <button type="button" onclick="changeExportSlide(1)" class="w-8 h-8 rounded-xl bg-slate-800 border border-white/10 text-slate-200 active:scale-95 flex items-center justify-center text-xs font-bold shrink-0 transition-all hover:bg-slate-700 cursor-pointer"> 113 â¶ 114 </button> 115 <div id="export-slide-badge" class="shrink-0 px-3 py-1.5 rounded-xl text-xs font-mono font-black min-w-[65px] text-center border shadow-md" style="background-color: #f9731615; border-color: #f9731635; color: #f97316"> 116 #1 <span class="text-slate-500 text-[10px]">/ 54</span> 117 </div> 118 </div> 119 120 <!-- Collapsible Thumbnail Strip --> 121 <div id="export-thumb-strip" class="flex gap-2.5 overflow-x-auto py-3 px-1 scrollbar-thin mt-2 border-t border-white/5" style="display: none;"> 122 123 <button type="button" onclick="setExportSlide(0)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer scale-105 shadow-xl" style="border-color: #f97316; box-shadow: 0 0 15px #f9731640"> 124 <img src="images/gallery/img_0.jpg" loading="lazy" class="w-full h-full object-cover"> 125 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">1</span> 126 </button> 127 128 <button type="button" onclick="setExportSlide(1)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 129 <img src="images/gallery/img_1.jpg" loading="lazy" class="w-full h-full object-cover"> 130 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">2</span> 131 </button> 132 133 <button type="button" onclick="setExportSlide(2)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 134 <img src="images/gallery/img_2.jpg" loading="lazy" class="w-full h-full object-cover"> 135 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">3</span> 136 </button> 137 138 <button type="button" onclick="setExportSlide(3)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 139 <img src="images/gallery/img_3.jpg" loading="lazy" class="w-full h-full object-cover"> 140 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">4</span> 141 </button> 142 143 <button type="button" onclick="setExportSlide(4)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 144 <img src="images/gallery/img_4.jpg" loading="lazy" class="w-full h-full object-cover">
145 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">5</span> 146 </button> 147 148 <button type="button" onclick="setExportSlide(5)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 149 <img src="images/gallery/img_5.jpg" loading="lazy" class="w-full h-full object-cover"> 150 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">6</span> 151 </button> 152 153 <button type="button" onclick="setExportSlide(6)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 154 <img src="images/gallery/img_6.jpg" loading="lazy" class="w-full h-full object-cover"> 155 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">7</span> 156 </button> 157 158 <button type="button" onclick="setExportSlide(7)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 159 <img src="images/gallery/img_7.jpg" loading="lazy" class="w-full h-full object-cover"> 160 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">8</span> 161 </button> 162 163 <button type="button" onclick="setExportSlide(8)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 164 <img src="images/gallery/img_8.jpg" loading="lazy" class="w-full h-full object-cover"> 165 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">9</span> 166 </button> 167 168 <button type="button" onclick="setExportSlide(9)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 169 <img src="images/gallery/img_9.jpg" loading="lazy" class="w-full h-full object-cover"> 170 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">10</span> 171 </button> 172 173 <button type="button" onclick="setExportSlide(10)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 174 <img src="images/gallery/img_10.jpg" loading="lazy" class="w-full h-full object-cover"> 175 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">11</span> 176 </button> 177 178 <button type="button" onclick="setExportSlide(11)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 179 <img src="images/gallery/img_11.jpg" loading="lazy" class="w-full h-full object-cover">
180 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">12</span> 181 </button> 182 183 <button type="button" onclick="setExportSlide(12)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 184 <img src="images/gallery/img_12.jpg" loading="lazy" class="w-full h-full object-cover"> 185 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">13</span> 186 </button> 187 188 <button type="button" onclick="setExportSlide(13)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 189 <img src="images/gallery/img_13.jpg" loading="lazy" class="w-full h-full object-cover"> 190 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">14</span> 191 </button> 192 193 <button type="button" onclick="setExportSlide(14)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 194 <img src="images/gallery/img_14.jpg" loading="lazy" class="w-full h-full object-cover"> 195 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">15</span> 196 </button> 197 198 <button type="button" onclick="setExportSlide(15)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 199 <img src="images/gallery/img_15.jpg" loading="lazy" class="w-full h-full object-cover"> 200 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">16</span> 201 </button> 202 203 <button type="button" onclick="setExportSlide(16)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 204 <img src="images/gallery/img_16.jpg" loading="lazy" class="w-full h-full object-cover"> 205 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">17</span> 206 </button> 207 208 <button type="button" onclick="setExportSlide(17)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 209 <img src="images/gallery/img_17.jpg" loading="lazy" class="w-full h-full object-cover"> 210 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">18</span> 211 </button> 212 213 <button type="button" onclick="setExportSlide(18)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 214 <img src="images/gallery/img_18.jpg" loading="lazy" class="w-full h-full object-cover">
215 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">19</span> 216 </button> 217 218 <button type="button" onclick="setExportSlide(19)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 219 <img src="images/gallery/img_19.jpg" loading="lazy" class="w-full h-full object-cover"> 220 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">20</span> 221 </button> 222 223 <button type="button" onclick="setExportSlide(20)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 224 <img src="images/gallery/img_20.jpg" loading="lazy" class="w-full h-full object-cover"> 225 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">21</span> 226 </button> 227 228 <button type="button" onclick="setExportSlide(21)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 229 <img src="images/gallery/img_21.jpg" loading="lazy" class="w-full h-full object-cover"> 230 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">22</span> 231 </button> 232 233 <button type="button" onclick="setExportSlide(22)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 234 <img src="images/gallery/img_22.jpg" loading="lazy" class="w-full h-full object-cover"> 235 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">23</span> 236 </button> 237 238 <button type="button" onclick="setExportSlide(23)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 239 <img src="images/gallery/img_23.jpg" loading="lazy" class="w-full h-full object-cover"> 240 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">24</span> 241 </button> 242 243 <button type="button" onclick="setExportSlide(24)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 244 <img src="images/gallery/img_24.jpg" loading="lazy" class="w-full h-full object-cover"> 245 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">25</span> 246 </button> 247 248 <button type="button" onclick="setExportSlide(25)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 249 <img src="images/gallery/img_25.jpg" loading="lazy" class="w-full h-full object-cover">
250 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">26</span> 251 </button> 252 253 <button type="button" onclick="setExportSlide(26)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 254 <img src="images/gallery/img_26.jpg" loading="lazy" class="w-full h-full object-cover"> 255 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">27</span> 256 </button> 257 258 <button type="button" onclick="setExportSlide(27)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 259 <img src="images/gallery/img_27.jpg" loading="lazy" class="w-full h-full object-cover"> 260 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">28</span> 261 </button> 262 263 <button type="button" onclick="setExportSlide(28)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 264 <img src="images/gallery/img_28.jpg" loading="lazy" class="w-full h-full object-cover"> 265 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">29</span> 266 </button> 267 268 <button type="button" onclick="setExportSlide(29)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 269 <img src="images/gallery/img_29.jpg" loading="lazy" class="w-full h-full object-cover"> 270 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">30</span> 271 </button> 272 273 <button type="button" onclick="setExportSlide(30)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 274 <img src="images/gallery/img_30.jpg" loading="lazy" class="w-full h-full object-cover"> 275 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">31</span> 276 </button> 277 278 <button type="button" onclick="setExportSlide(31)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 279 <img src="images/gallery/img_31.jpg" loading="lazy" class="w-full h-full object-cover"> 280 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">32</span> 281 </button> 282 283 <button type="button" onclick="setExportSlide(32)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 284 <img src="images/gallery/img_32.jpg" loading="lazy" class="w-full h-full object-cover">
285 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">33</span> 286 </button> 287 288 <button type="button" onclick="setExportSlide(33)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 289 <img src="images/gallery/img_33.jpg" loading="lazy" class="w-full h-full object-cover"> 290 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">34</span> 291 </button> 292 293 <button type="button" onclick="setExportSlide(34)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 294 <img src="images/gallery/img_34.jpg" loading="lazy" class="w-full h-full object-cover"> 295 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">35</span> 296 </button> 297 298 <button type="button" onclick="setExportSlide(35)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 299 <img src="images/gallery/img_35.jpg" loading="lazy" class="w-full h-full object-cover"> 300 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">36</span> 301 </button> 302 303 <button type="button" onclick="setExportSlide(36)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 304 <img src="images/gallery/img_36.jpg" loading="lazy" class="w-full h-full object-cover"> 305 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">37</span> 306 </button> 307 308 <button type="button" onclick="setExportSlide(37)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 309 <img src="images/gallery/img_37.jpg" loading="lazy" class="w-full h-full object-cover"> 310 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">38</span> 311 </button> 312 313 <button type="button" onclick="setExportSlide(38)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 314 <img src="images/gallery/img_38.jpg" loading="lazy" class="w-full h-full object-cover"> 315 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">39</span> 316 </button> 317 318 <button type="button" onclick="setExportSlide(39)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 319 <img src="images/gallery/img_39.jpg" loading="lazy" class="w-full h-full object-cover">
320 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">40</span> 321 </button> 322 323 <button type="button" onclick="setExportSlide(40)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 324 <img src="images/gallery/img_40.jpg" loading="lazy" class="w-full h-full object-cover"> 325 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">41</span> 326 </button> 327 328 <button type="button" onclick="setExportSlide(41)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 329 <img src="images/gallery/img_41.jpg" loading="lazy" class="w-full h-full object-cover"> 330 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">42</span> 331 </button> 332 333 <button type="button" onclick="setExportSlide(42)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 334 <img src="images/gallery/img_42.jpg" loading="lazy" class="w-full h-full object-cover"> 335 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">43</span> 336 </button> 337 338 <button type="button" onclick="setExportSlide(43)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 339 <img src="images/gallery/img_43.jpg" loading="lazy" class="w-full h-full object-cover"> 340 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">44</span> 341 </button> 342 343 <button type="button" onclick="setExportSlide(44)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 344 <img src="images/gallery/img_44.jpg" loading="lazy" class="w-full h-full object-cover"> 345 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">45</span> 346 </button> 347 348 <button type="button" onclick="setExportSlide(45)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 349 <img src="images/gallery/img_45.jpg" loading="lazy" class="w-full h-full object-cover"> 350 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">46</span> 351 </button> 352 353 <button type="button" onclick="setExportSlide(46)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 354 <img src="images/gallery/img_46.jpg" loading="lazy" class="w-full h-full object-cover">
355 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">47</span> 356 </button> 357 358 <button type="button" onclick="setExportSlide(47)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 359 <img src="images/gallery/img_47.jpg" loading="lazy" class="w-full h-full object-cover"> 360 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">48</span> 361 </button> 362 363 <button type="button" onclick="setExportSlide(48)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 364 <img src="images/gallery/img_48.jpg" loading="lazy" class="w-full h-full object-cover"> 365 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">49</span> 366 </button> 367 368 <button type="button" onclick="setExportSlide(49)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 369 <img src="images/gallery/img_49.jpg" loading="lazy" class="w-full h-full object-cover"> 370 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">50</span> 371 </button> 372 373 <button type="button" onclick="setExportSlide(50)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 374 <img src="images/gallery/img_50.jpg" loading="lazy" class="w-full h-full object-cover"> 375 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">51</span> 376 </button> 377 378 <button type="button" onclick="setExportSlide(51)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 379 <img src="images/gallery/img_51.jpg" loading="lazy" class="w-full h-full object-cover"> 380 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">52</span> 381 </button> 382 383 <button type="button" onclick="setExportSlide(52)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 384 <img src="images/gallery/img_52.jpg" loading="lazy" class="w-full h-full object-cover"> 385 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">53</span> 386 </button> 387 388 <button type="button" onclick="setExportSlide(53)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style=""> 389 <img src="images/gallery/img_53.jpg" loading="lazy" class="w-full h-full object-cover">
390 <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">54</span> 391 </button> 392 393 </div> 394 395 <!-- PROMINENT BUTTON ON THE WEBSITE BELOW THE SCROLL BAR --> 396 <div class="pt-2 border-t border-white/5"> 397 <button id="export-view-mode-btn" type="button" onclick="toggleExportViewMode()" class="w-full py-3.5 px-5 rounded-2xl font-black uppercase tracking-wider text-xs shadow-2xl transition-all flex items-center justify-center gap-3 border active:scale-[0.99] cursor-pointer" style="background-color: #f97316; border-color: rgba(255,255,255,0.25); color: #ffffff; box-shadow: 0 10px 25px -5px #f9731660"> 398 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-white"> 399 <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25a2.25 2.25 0 0 1-2.25 2.25h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z" /> 400 </svg> 401 <span>See as Gallery (Populate All Images)</span> 402 </button> 403 </div> 404 </div> 405 </div> 406 407 <!-- Slideshow Mode Container --> 408 <div id="export-slideshow-container" class="relative group rounded-3xl overflow-hidden bg-slate-900 border border-white/10 shadow-2xl aspect-[16/10] max-h-[700px] flex items-center justify-center"> 409 <img id="export-slideshow-img" src="images/gallery/img_0.jpg" onclick="openLightbox(exportSlideIndex)" class="w-full h-full object-contain cursor-pointer transition-transform duration-500 hover:scale-[1.02]"> 410 <button type="button" onclick="changeExportSlide(-1)" class="absolute left-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-slate-950/70 border border-white/20 text-white flex items-center justify-center opacity-80 hover:opacity-100 hover:scale-110 active:scale-95 transition-all shadow-2xl backdrop-blur-md cursor-pointer">â</button> 411 <button type="button" onclick="changeExportSlide(1)" class="absolute right-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-slate-950/70 border border-white/20 text-white flex items-center justify-center opacity-80 hover:opacity-100 hover:scale-110 active:scale-95 transition-all shadow-2xl backdrop-blur-md cursor-pointer">â¶</button> 412 <div class="absolute bottom-4 inset-x-4 flex items-center justify-between pointer-events-none"> 413 <span id="export-slideshow-hud" class="px-3.5 py-1.5 rounded-full bg-slate-950/80 backdrop-blur-md border border-white/15 text-xs font-mono font-bold text-white shadow-lg">Photo #1 of 54</span> 414 <span class="px-3.5 py-1.5 rounded-full bg-slate-950/80 backdrop-blur-md border border-white/15 text-[10px] font-bold uppercase text-slate-300 shadow-lg">Click photo to expand ð</span> 415 </div> 416 </div> 417 418 <!-- Gallery Grid View Container (Hidden initially when in slideshow mode) --> 419 <div id="export-gallery-container" style="display: none;" class="w-full"> 420 <div class="columns-1 sm:columns-2 gap-4 md:gap-6"> 421 422 <div id="export-gallery-photo-0" onclick="openLightbox(0)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 423 <img src="images/gallery/img_0.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 1"> 424 </div> 425 426 <div id="export-gallery-photo-1" onclick="openLightbox(1)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 427 <img src="images/gallery/img_1.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 2"> 428 </div> 429 430 <div id="export-gallery-photo-2" onclick="openLightbox(2)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 431 <img src="images/gallery/img_2.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 3"> 432 </div> 433 434 <div id="export-gallery-photo-3" onclick="openLightbox(3)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 435 <img src="images/gallery/img_3.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 4"> 436 </div> 437 438 <div id="export-gallery-photo-4" onclick="openLightbox(4)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 439 <img src="images/gallery/img_4.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 5"> 440 </div> 441 442 <div id="export-gallery-photo-5" onclick="openLightbox(5)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 443 <img src="images/gallery/img_5.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 6"> 444 </div> 445 446 <div id="export-gallery-photo-6" onclick="openLightbox(6)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 447 <img src="images/gallery/img_6.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 7"> 448 </div> 449 450 <div id="export-gallery-photo-7" onclick="openLightbox(7)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 451 <img src="images/gallery/img_7.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 8"> 452 </div> 453 454 <div id="export-gallery-photo-8" onclick="openLightbox(8)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 455 <img src="images/gallery/img_8.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 9"> 456 </div> 457 458 <div id="export-gallery-photo-9" onclick="openLightbox(9)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 459 <img src="images/gallery/img_9.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 10"> 460 </div> 461 462 <div id="export-gallery-photo-10" onclick="openLightbox(10)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 463 <img src="images/gallery/img_10.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 11"> 464 </div> 465 466 <div id="export-gallery-photo-11" onclick="openLightbox(11)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 467 <img src="images/gallery/img_11.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 12"> 468 </div> 469 470 <div id="export-gallery-photo-12" onclick="openLightbox(12)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 471 <img src="images/gallery/img_12.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 13"> 472 </div> 473 474 <div id="export-gallery-photo-13" onclick="openLightbox(13)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 475 <img src="images/gallery/img_13.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 14"> 476 </div> 477 478 <div id="export-gallery-photo-14" onclick="openLightbox(14)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 479 <img src="images/gallery/img_14.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 15"> 480 </div> 481 482 <div id="export-gallery-photo-15" onclick="openLightbox(15)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 483 <img src="images/gallery/img_15.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 16"> 484 </div> 485 486 <div id="export-gallery-photo-16" onclick="openLightbox(16)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 487 <img src="images/gallery/img_16.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 17"> 488 </div> 489 490 <div id="export-gallery-photo-17" onclick="openLightbox(17)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 491 <img src="images/gallery/img_17.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 18"> 492 </div> 493 494 <div id="export-gallery-photo-18" onclick="openLightbox(18)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 495 <img src="images/gallery/img_18.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 19"> 496 </div> 497 498 <div id="export-gallery-photo-19" onclick="openLightbox(19)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 499 <img src="images/gallery/img_19.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 20"> 500 </div> 501 502 <div id="export-gallery-photo-20" onclick="openLightbox(20)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 503 <img src="images/gallery/img_20.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 21"> 504 </div> 505 506 <div id="export-gallery-photo-21" onclick="openLightbox(21)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 507
507 <img src="images/gallery/img_21.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 22"> 508 </div> 509 510 <div id="export-gallery-photo-22" onclick="openLightbox(22)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 511 <img src="images/gallery/img_22.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 23"> 512 </div> 513 514 <div id="export-gallery-photo-23" onclick="openLightbox(23)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 515 <img src="images/gallery/img_23.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 24"> 516 </div> 517 518 <div id="export-gallery-photo-24" onclick="openLightbox(24)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 519 <img src="images/gallery/img_24.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 25"> 520 </div> 521 522 <div id="export-gallery-photo-25" onclick="openLightbox(25)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 523 <img src="images/gallery/img_25.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 26"> 524 </div> 525 526 <div id="export-gallery-photo-26" onclick="openLightbox(26)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 527 <img src="images/gallery/img_26.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 27"> 528 </div> 529 530 <div id="export-gallery-photo-27" onclick="openLightbox(27)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 531 <img src="images/gallery/img_27.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 28"> 532 </div> 533 534 <div id="export-gallery-photo-28" onclick="openLightbox(28)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 535 <img src="images/gallery/img_28.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 29"> 536 </div> 537 538 <div id="export-gallery-photo-29" onclick="openLightbox(29)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 539 <img src="images/gallery/img_29.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 30"> 540 </div> 541 542 <div id="export-gallery-photo-30" onclick="openLightbox(30)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 543 <img src="images/gallery/img_30.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 31"> 544 </div> 545 546 <div id="export-gallery-photo-31" onclick="openLightbox(31)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 547 <img src="images/gallery/img_31.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 32"> 548 </div> 549 550 <div id="export-gallery-photo-32" onclick="openLightbox(32)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 551 <img src="images/gallery/img_32.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 33"> 552 </div> 553 554 <div id="export-gallery-photo-33" onclick="openLightbox(33)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 555 <img src="images/gallery/img_33.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 34"> 556 </div> 557 558 <div id="export-gallery-photo-34" onclick="openLightbox(34)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 559 <img src="images/gallery/img_34.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 35"> 560 </div> 561 562 <div id="export-gallery-photo-35" onclick="openLightbox(35)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 563 <img src="images/gallery/img_35.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 36"> 564 </div> 565 566 <div id="export-gallery-photo-36" onclick="openLightbox(36)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 567 <img src="images/gallery/img_36.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 37"> 568 </div> 569 570 <div id="export-gallery-photo-37" onclick="openLightbox(37)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 571 <img src="images/gallery/img_37.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 38"> 572 </div> 573 574 <div id="export-gallery-photo-38" onclick="openLightbox(38)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 575 <img src="images/gallery/img_38.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 39"> 576 </div> 577 578 <div id="export-gallery-photo-39" onclick="openLightbox(39)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 579 <img src="images/gallery/img_39.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 40"> 580 </div> 581 582 <div id="export-gallery-photo-40" onclick="openLightbox(40)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 583 <img src="images/gallery/img_40.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 41"> 584 </div> 585 586 <div id="export-gallery-photo-41" onclick="openLightbox(41)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 587 <img src="images/gallery/img_41.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 42"> 588 </div> 589 590 <div id="export-gallery-photo-42" onclick="openLightbox(42)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 591 <img src="images/gallery/img_42.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 43"> 592 </div> 593 594 <div id="export-gallery-photo-43" onclick="openLightbox(43)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 595 <img src="images/gallery/img_43.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 44"> 596 </div> 597 598 <div id="export-gallery-photo-44" onclick="openLightbox(44)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 599 <img src="images/gallery/img_44.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 45"> 600 </div> 601 602 <div id="export-gallery-photo-45" onclick="openLightbox(45)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 603 <img src="images/gallery/img_45.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 46"> 604 </div> 605 606 <div id="export-gallery-photo-46" onclick="openLightbox(46)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 607 <img src="images/gallery/img_46.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 47"> 608 </div> 609 610 <div id="export-gallery-photo-47" onclick="openLightbox(47)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 611 <img src="images/gallery/img_47.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 48"> 612 </div> 613 614 <div id="export-gallery-photo-48" onclick="openLightbox(48)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 615 <img src="images/gallery/img_48.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 49"> 616 </div> 617 618 <div id="export-gallery-photo-49" onclick="openLightbox(49)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 619 <img src="images/gallery/img_49.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 50"> 620 </div> 621 622 <div id="
622export-gallery-photo-50" onclick="openLightbox(50)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 623 <img src="images/gallery/img_50.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 51"> 624 </div> 625 626 <div id="export-gallery-photo-51" onclick="openLightbox(51)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 627 <img src="images/gallery/img_51.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 52"> 628 </div> 629 630 <div id="export-gallery-photo-52" onclick="openLightbox(52)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 631 <img src="images/gallery/img_52.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 53"> 632 </div> 633 634 <div id="export-gallery-photo-53" onclick="openLightbox(53)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300"> 635 <img src="images/gallery/img_53.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 54"> 636 </div> 637 638 </div> 639 </div> 640 </div> 641 642 <div id="floorplan" class="tab-content"> 643 644 <div class="space-y-8"> 645 <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-6 glass-panel rounded-3xl border border-white/10"> 646 <div> 647 <h3 class="text-sm font-black text-white uppercase tracking-wider">Architectural Floor Plan</h3> 648 <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-0.5">Click numbered hotspot pins to view room photography</p> 649 </div> 650 <div class="flex items-center gap-3"> 651 <div class="px-3 py-1.5 bg-orange-500/10 border border-orange-500/30 rounded-xl text-[10px] font-black text-orange-400 uppercase tracking-widest">ð¯ 19 Hotspots</div> 652 <a href="images/floorplan.jpg" download="FloorPlan.png" class="px-4 py-2.5 bg-gradient-to-r from-orange-600 to-amber-600 hover:from-orange-500 hover:to-amber-500 text-white font-black text-[10px] uppercase tracking-widest rounded-xl shadow-lg transition-all flex items-center gap-2"> 653 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-3.5 h-3.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg> 654 Download Floor Plan 655 </a> 656 </div> 657 </div> 658 <div class="p-4 sm:p-8 bg-slate-900 rounded-[2.5rem] border border-white/10 flex flex-col items-center justify-center shadow-2xl relative overflow-hidden group"> 659 <div class="w-full flex flex-wrap items-center justify-between gap-3 mb-4 p-3.5 bg-slate-950/80 backdrop-blur-md rounded-2xl border border-white/10 z-30"> 660 <div class="flex flex-wrap items-center gap-2">
661 <span class="text-[10px] font-black text-orange-400 uppercase tracking-widest mr-1">ð Blueprint Zoom:</span> 662 <button onclick="zoomExportFloorPlan(-0.25)" class="w-7 h-7 rounded-lg bg-slate-800 hover:bg-slate-700 text-white font-black text-xs flex items-center justify-center border border-white/10 cursor-pointer">-</button> 663 <button onclick="setExportFloorPlanZoom(1)" class="px-2.5 py-1 rounded-lg text-[10px] font-black bg-slate-900 text-slate-400 border border-white/10 hover:text-white cursor-pointer">100%</button> 664 <button onclick="setExportFloorPlanZoom(1.25)" class="px-2.5 py-1 rounded-lg text-[10px] font-black bg-slate-900 text-slate-400 border border-white/10 hover:text-white cursor-pointer">125%</button> 665 <button onclick="setExportFloorPlanZoom(1.5)" class="px-2.5 py-1 rounded-lg text-[10px] font-black bg-slate-900 text-slate-400 border border-white/10 hover:text-white cursor-pointer">150%</button> 666 <button onclick="setExportFloorPlanZoom(2)" class="px-2.5 py-1 rounded-lg text-[10px] font-black bg-slate-900 text-slate-400 border border-white/10 hover:text-white cursor-pointer">200%</button> 667 <button onclick="setExportFloorPlanZoom(2.5)" class="px-2.5 py-1 rounded-lg text-[10px] font-black bg-slate-900 text-slate-400 border border-white/10 hover:text-white cursor-pointer">250%</button> 668 <button onclick="zoomExportFloorPlan(0.25)" class="w-7 h-7 rounded-lg bg-slate-800 hover:bg-slate-700 text-white font-black text-xs flex items-center justify-center border border-white/10 cursor-pointer">+</button> 669 </div> 670 <div class="flex items-center gap-2"> 671 <span class="hidden sm:inline-block text-[9px] font-bold text-slate-500 uppercase tracking-widest">Pins stay small when zoomed</span> 672 <a href="images/floorplan.jpg" download="FloorPlan.png" class="px-3 py-1.5 bg-slate-900 hover:bg-slate-800 text-white border border-white/20 rounded-xl text-[10px] font-black uppercase tracking-wider backdrop-blur-md shadow-xl flex items-center gap-1.5 transition-all"> 673 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-3.5 h-3.5 text-orange-400"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg> 674 Download 675 </a> 676 </div> 677 </div> 678 <div id="export-floorplan-scroll" class="w-full max-h-[75vh] overflow-auto rounded-2xl p-1 bg-slate-950/60 border border-white/5 flex justify-start items-start select-none"> 679 <div id="export-floorplan-canvas" class="relative w-full max-w-4xl bg-white rounded-2xl overflow-hidden shadow-2xl transition-transform duration-200 shrink-0 origin-top-left"> 680 <img src="images/floorplan.jpg" class="block w-full h-auto pointer-events-none"> 681 682 <div style="left: 41%; top: 76%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 683 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 684 <button onclick="openLightbox(1, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 685 1 686 </button> 687 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 688 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_1.jpg" class="w-full h-full object-cover"></div> 689 <div class="space-y-1"> 690 <div class="flex items-center justify-between">
691 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #1</span> 692 <span class="text-[8px] font-bold text-slate-500">Spot #1</span> 693 </div> 694 695 <button onclick="openLightbox(1, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 696 </div> 697 </div> 698 </div> 699 700 <div style="left: 41%; top: 65%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 701 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 702 <button onclick="openLightbox(4, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 703 2 704 </button> 705 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 706 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_4.jpg" class="w-full h-full object-cover"></div> 707 <div class="space-y-1"> 708 <div class="flex items-center justify-between"> 709 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #2</span> 710 <span class="text-[8px] font-bold text-slate-500">Spot #2</span> 711 </div> 712 713 <button onclick="openLightbox(4, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 714 </div> 715 </div> 716 </div> 717 718 <div style="left: 29%; top: 42%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 719 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 720 <button onclick="openLightbox(6, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 721 3 722 </button> 723 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 724 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_6.jpg" class="w-full h-full object-cover"></div> 725 <div class="space-y-1"> 726 <div class="flex items-center justify-between">
727 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #3</span> 728 <span class="text-[8px] font-bold text-slate-500">Spot #3</span> 729 </div> 730 731 <button onclick="openLightbox(6, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 732 </div> 733 </div> 734 </div> 735 736 <div style="left: 41%; top: 50%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 737 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 738 <button onclick="openLightbox(14, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 739 4 740 </button> 741 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 742 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_14.jpg" class="w-full h-full object-cover"></div> 743 <div class="space-y-1"> 744 <div class="flex items-center justify-between"> 745 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #4</span> 746 <span class="text-[8px] font-bold text-slate-500">Spot #4</span> 747 </div> 748 749 <button onclick="openLightbox(14, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 750 </div> 751 </div> 752 </div> 753 754 <div style="left: 39%; top: 40%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 755 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 756 <button onclick="openLightbox(17, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 757 5 758 </button> 759 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 760 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_17.jpg" class="w-full h-full object-cover"></div> 761 <div class="space-y-1"> 762 <div class="flex items-center justify-between">
763 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #5</span> 764 <span class="text-[8px] font-bold text-slate-500">Spot #5</span> 765 </div> 766 767 <button onclick="openLightbox(17, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 768 </div> 769 </div> 770 </div> 771 772 <div style="left: 9%; top: 50%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 773 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 774 <button onclick="openLightbox(19, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 775 6 776 </button> 777 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 778 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_19.jpg" class="w-full h-full object-cover"></div> 779 <div class="space-y-1"> 780 <div class="flex items-center justify-between"> 781 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #6</span> 782 <span class="text-[8px] font-bold text-slate-500">Spot #6</span> 783 </div> 784 785 <button onclick="openLightbox(19, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 786 </div> 787 </div> 788 </div> 789 790 <div style="left: 6%; top: 58%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 791 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 792 <button onclick="openLightbox(20, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 793 7 794 </button> 795 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 796 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_20.jpg" class="w-full h-full object-cover"></div> 797 <div class="space-y-1"> 798 <div class="flex items-center justify-between">
799 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #7</span> 800 <span class="text-[8px] font-bold text-slate-500">Spot #7</span> 801 </div> 802 803 <button onclick="openLightbox(20, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 804 </div> 805 </div> 806 </div> 807 808 <div style="left: 15%; top: 59%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 809 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 810 <button onclick="openLightbox(21, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 811 8 812 </button> 813 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 814 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_21.jpg" class="w-full h-full object-cover"></div> 815 <div class="space-y-1"> 816 <div class="flex items-center justify-between"> 817 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #8</span> 818 <span class="text-[8px] font-bold text-slate-500">Spot #8</span> 819 </div> 820 821 <button onclick="openLightbox(21, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 822 </div> 823 </div> 824 </div> 825 826 <div style="left: 8%; top: 72%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 827 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 828 <button onclick="openLightbox(23, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 829 9 830 </button> 831 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 832 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_23.jpg" class="w-full h-full object-cover"></div> 833 <div class="space-y-1"> 834 <div class="flex items-center justify-between">
835 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #9</span> 836 <span class="text-[8px] font-bold text-slate-500">Spot #9</span> 837 </div> 838 839 <button onclick="openLightbox(23, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 840 </div> 841 </div> 842 </div> 843 844 <div style="left: 27%; top: 78%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 845 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 846 <button onclick="openLightbox(24, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 847 10 848 </button> 849 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 850 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_24.jpg" class="w-full h-full object-cover"></div> 851 <div class="space-y-1"> 852 <div class="flex items-center justify-between"> 853 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #10</span> 854 <span class="text-[8px] font-bold text-slate-500">Spot #10</span> 855 </div> 856 857 <button onclick="openLightbox(24, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 858 </div> 859 </div> 860 </div> 861 862 <div style="left: 32%; top: 69%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 863 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 864 <button onclick="openLightbox(25, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 865 11 866 </button> 867 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 868 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_25.jpg" class="w-full h-full object-cover"></div> 869 <div class="space-y-1"> 870 <div class="flex items-center justify-between">
871 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #11</span> 872 <span class="text-[8px] font-bold text-slate-500">Spot #11</span> 873 </div> 874 875 <button onclick="openLightbox(25, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 876 </div> 877 </div> 878 </div> 879 880 <div style="left: 58%; top: 53%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 881 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 882 <button onclick="openLightbox(26, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 883 12 884 </button> 885 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 886 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_26.jpg" class="w-full h-full object-cover"></div> 887 <div class="space-y-1"> 888 <div class="flex items-center justify-between"> 889 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #12</span> 890 <span class="text-[8px] font-bold text-slate-500">Spot #12</span> 891 </div> 892 893 <button onclick="openLightbox(26, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 894 </div> 895 </div> 896 </div> 897 898 <div style="left: 71%; top: 47%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 899 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 900 <button onclick="openLightbox(29, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 901 13 902 </button> 903 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 904 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_29.jpg" class="w-full h-full object-cover"></div> 905 <div class="space-y-1"> 906 <div class="flex items-center justify-between">
907 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #13</span> 908 <span class="text-[8px] font-bold text-slate-500">Spot #13</span> 909 </div> 910 911 <button onclick="openLightbox(29, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 912 </div> 913 </div> 914 </div> 915 916 <div style="left: 66%; top: 72%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 917 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 918 <button onclick="openLightbox(33, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 919 14 920 </button> 921 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 922 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_33.jpg" class="w-full h-full object-cover"></div> 923 <div class="space-y-1"> 924 <div class="flex items-center justify-between"> 925 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #14</span> 926 <span class="text-[8px] font-bold text-slate-500">Spot #14</span> 927 </div> 928 929 <button onclick="openLightbox(33, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 930 </div> 931 </div> 932 </div> 933 934 <div style="left: 55%; top: 64%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 935 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 936 <button onclick="openLightbox(34, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 937 15 938 </button> 939 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 940 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_34.jpg" class="w-full h-full object-cover"></div> 941 <div class="space-y-1"> 942 <div class="flex items-center justify-between">
943 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #15</span> 944 <span class="text-[8px] font-bold text-slate-500">Spot #15</span> 945 </div> 946 947 <button onclick="openLightbox(34, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 948 </div> 949 </div> 950 </div> 951 952 <div style="left: 84%; top: 42%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 953 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 954 <button onclick="openLightbox(35, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 955 16 956 </button> 957 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 958 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_35.jpg" class="w-full h-full object-cover"></div> 959 <div class="space-y-1"> 960 <div class="flex items-center justify-between"> 961 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #16</span> 962 <span class="text-[8px] font-bold text-slate-500">Spot #16</span> 963 </div> 964 965 <button onclick="openLightbox(35, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 966 </div> 967 </div> 968 </div> 969 970 <div style="left: 92%; top: 46%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 971 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 972 <button onclick="openLightbox(36, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 973 17 974 </button> 975 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 976 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_36.jpg" class="w-full h-full object-cover"></div> 977 <div class="space-y-1"> 978 <div class="flex items-center justify-between">
979 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #17</span> 980 <span class="text-[8px] font-bold text-slate-500">Spot #17</span> 981 </div> 982 983 <button onclick="openLightbox(36, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 984 </div> 985 </div> 986 </div> 987 988 <div style="left: 92%; top: 59%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 989 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 990 <button onclick="openLightbox(37, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 991 18 992 </button> 993 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 994 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_37.jpg" class="w-full h-full object-cover"></div> 995 <div class="space-y-1"> 996 <div class="flex items-center justify-between"> 997 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #18</span> 998 <span class="text-[8px] font-bold text-slate-500">Spot #18</span> 999 </div> 1000 1001 <button onclick="openLightbox(37, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 1002 </div> 1003 </div> 1004 </div> 1005 1006 <div style="left: 42%; top: 33%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 1007 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 1008 <button onclick="openLightbox(38, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all"> 1009 19 1010 </button> 1011 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50"> 1012 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_38.jpg" class="w-full h-full object-cover"></div> 1013 <div class="space-y-1"> 1014 <div class="flex items-center justify-between">
1015 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #19</span> 1016 <span class="text-[8px] font-bold text-slate-500">Spot #19</span> 1017 </div> 1018 1019 <button onclick="openLightbox(38, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button> 1020 </div> 1021 </div> 1022 </div> 1023 1024 </div> 1025 </div> 1026 </div> 1027 </div> 1028 1029 1030 1031 </div> 1032 1033 <div id="interactive" class="tab-content space-y-12"> 1034 <div class="w-full h-[72vh] sm:h-[82vh] min-h-[520px] md:min-h-[640px] rounded-[2rem] sm:rounded-[2.5rem] overflow-hidden border border-white/10 bg-black shadow-2xl"><iframe src="https://kuula.co/share/collection/7TTMW?logo=-1&info=0&fs=1&vr=1&gyro=0&initload=0&autorotate=0.67&autop=10&autopalt=1&thumbs=1&alpha=0.60&nav=1&sd=1" width="100%" height="100%" frameBorder="0" allowFullScreen allow="xr-spatial-tracking; accelerometer; gyroscope; magnetometer; fullscreen; autoplay; web-share" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="w-full h-full border-0" title="Matterport 3D Tour"></iframe></div> 1035 1036 </div> 1037 1038 1039 1040 1041 1042 1043 <div id="map" class="tab-content space-y-6"> 1044 <!-- Map & Location Header --> 1045 <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-6 glass-panel rounded-3xl border border-white/10"> 1046 <div> 1047 <div class="flex items-center gap-2"> 1048 <span class="w-2 h-2 rounded-full animate-pulse" style="background-color: var(--brand)"></span> 1049 <h3 class="text-sm font-black text-white uppercase tracking-wider">Location & Neighborhood</h3> 1050 </div> 1051 <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1"> 1052 5379 Wellburn Drive, Delta 1053 </p> 1054 </div> 1055 <div class="flex items-center gap-2"> 1056 <button onclick="copyExportAddress()" class="px-4 py-2 bg-slate-900 hover:bg-slate-800 text-slate-200 hover:text-white border border-white/10 rounded-xl text-[10px] font-black uppercase tracking-wider transition-all flex items-center gap-2 cursor-pointer shadow-lg"> 1057 <span id="export-copy-icon">ð</span> <span id="export-copy-text">Copy Address</span> 1058 </button> 1059 </div> 1060 </div> 1061 1062 <!-- Smart 1-Tap Navigation & Driving Directions --> 1063 <div class="p-5 bg-slate-900/90 backdrop-blur-xl rounded-3xl border border-white/10 shadow-2xl space-y-4"> 1064 <div class="flex items-center justify-between"> 1065 <span class="text-[10px] font-black uppercase tracking-widest text-slate-400 flex items-center gap-1.5"> 1066 <span>ð§</span> 1-Tap Navigation & Directions 1067 </span> 1068 <span class="text-[9px] font-bold text-emerald-400 uppercase tracking-wider flex items-center gap-1"> 1069 <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span> Free GPS Deep Links 1070 </span> 1071 </div> 1072 1073 <div class="grid grid-cols-2 sm:grid-cols-4 gap-3"> 1074 <a href="https://www.google.com/maps/dir/?api=1&destination=5379%20Wellburn%20Drive%2C%20Delta" target="_blank" rel="noopener noreferrer" class="p-3.5 bg-slate-950/70 hover:bg-slate-800/80 border border-white/10 hover:border-blue-500/50 rounded-2xl flex flex-col items-center justify-center gap-1.5 text-center group transition-all">
1075 <span class="text-xl group-hover:scale-110 transition-transform">ðºï¸</span> 1076 <span class="text-[10px] font-black text-white uppercase tracking-wider">Google Maps</span> 1077 <span class="text-[8px] font-bold text-slate-400">Live Traffic & Route</span> 1078 </a> 1079 1080 <a href="https://maps.apple.com/?daddr=5379%20Wellburn%20Drive%2C%20Delta" target="_blank" rel="noopener noreferrer" class="p-3.5 bg-slate-950/70 hover:bg-slate-800/80 border border-white/10 hover:border-slate-400/50 rounded-2xl flex flex-col items-center justify-center gap-1.5 text-center group transition-all"> 1081 <span class="text-xl group-hover:scale-110 transition-transform">ð</span> 1082 <span class="text-[10px] font-black text-white uppercase tracking-wider">Apple Maps</span> 1083 <span class="text-[8px] font-bold text-slate-400">iOS & CarPlay</span> 1084 </a> 1085 1086 <a href="https://waze.com/ul?q=5379%20Wellburn%20Drive%2C%20Delta&navigate=yes" target="_blank" rel="noopener noreferrer" class="p-3.5 bg-slate-950/70 hover:bg-slate-800/80 border border-white/10 hover:border-cyan-500/50 rounded-2xl flex flex-col items-center justify-center gap-1.5 text-center group transition-all"> 1087 <span class="text-xl group-hover:scale-110 transition-transform">ð</span> 1088 <span class="text-[10px] font-black text-white uppercase tracking-wider">Waze GPS</span> 1089 <span class="text-[8px] font-bold text-slate-400">Real-Time Hazards</span> 1090 </a> 1091 1092 <a href="https://www.google.com/maps/search/?api=1&query=5379%20Wellburn%20Drive%2C%20Delta" target="_blank" rel="noopener noreferrer" class="p-3.5 bg-slate-950/70 hover:bg-slate-800/80 border border-white/10 hover:border-amber-500/50 rounded-2xl flex flex-col items-center justify-center gap-1.5 text-center group transition-all"> 1093 <span class="text-xl group-hover:scale-110 transition-transform">ð¶</span> 1094 <span class="text-[10px] font-black text-white uppercase tracking-wider">Street View</span> 1095 <span class="text-[8px] font-bold text-slate-400">Walk The Block</span> 1096 </a> 1097 </div> 1098 </div> 1099 1100 <!-- Map Layer Switcher & POI Category Filters --> 1101 <div class="space-y-3"> 1102 <div class="flex flex-wrap items-center justify-between gap-3 p-3.5 bg-slate-950/80 backdrop-blur-md rounded-2xl border border-white/10"> 1103 <div class="flex flex-wrap items-center gap-2"> 1104 <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest mr-1">ðºï¸ Layer:</span> 1105 <button onclick="setExportMapLayer('roadmap')" id="btn-layer-roadmap" class="export-layer-btn px-3 py-1.5 rounded-xl text-[10px] font-black transition-all cursor-pointer bg-slate-800 text-white border border-white/20">Roadmap</button> 1106 <button onclick="setExportMapLayer('satellite')" id="btn-layer-satellite" class="export-layer-btn px-3 py-1.5 rounded-xl text-[10px] font-black transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white">ð°ï¸ Satellite</button> 1107 <button onclick="setExportMapLayer('terrain')" id="btn-layer-terrain" class="export-layer-btn px-3 py-1.5 rounded-xl text-[10px] font-black transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white">ðï¸ Terrain</button> 1108 </div> 1109 1110 <div class="flex items-center gap-2"> 1111 <a href="https://maps.google.com/maps?q=5379%20Wellburn%20Drive%2C%20Delta" target="_blank" rel="noopener noreferrer" class="px-3.5 py-1.5 bg-slate-900 hover:bg-slate-800 text-slate-300 hover:text-white border border-white/10 rounded-xl text-[10px] font-black uppercase tracking-wider transition-all flex items-center gap-1.5 shadow-lg"> 1112 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-3.5 h-3.5 text-blue-400"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg> 1113 Full Map 1114 </a> 1115 </div> 1116 </div> 1117 1118 <!-- Points of Interest Pills --> 1119 <div class="flex items-center gap-2 overflow-x-auto py-2 px-1 scrollbar-hide">
1120 <span class="text-[9px] font-black uppercase tracking-widest text-slate-500 whitespace-nowrap mr-1">Nearby POIs:</span> 1121 <button onclick="setExportPoi('all', '')" id="poi-btn-all" class="export-poi-btn px-3 py-1.5 rounded-xl text-[10px] font-black whitespace-nowrap transition-all cursor-pointer border" style="background-color: var(--brand); color: #fff; border-color: var(--brand);">ð Property Pin</button> 1122 <button onclick="setExportPoi('schools', 'schools')" id="poi-btn-schools" class="export-poi-btn px-3 py-1.5 rounded-xl text-[10px] font-black whitespace-nowrap transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white">ð« Schools</button> 1123 <button onclick="setExportPoi('dining', 'restaurants cafes')" id="poi-btn-dining" class="export-poi-btn px-3 py-1.5 rounded-xl text-[10px] font-black whitespace-nowrap transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white">â Cafes & Dining</button> 1124 <button onclick="setExportPoi('parks', 'parks recreation')" id="poi-btn-parks" class="export-poi-btn px-3 py-1.5 rounded-xl text-[10px] font-black whitespace-nowrap transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white">ð² Parks & Rec</button> 1125 <button onclick="setExportPoi('transit', 'transit train station')" id="poi-btn-transit" class="export-poi-btn px-3 py-1.5 rounded-xl text-[10px] font-black whitespace-nowrap transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white">ð Transit</button> 1126 <button onclick="setExportPoi('shopping', 'grocery store shopping')" id="poi-btn-shopping" class="export-poi-btn px-3 py-1.5 rounded-xl text-[10px] font-black whitespace-nowrap transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white">ðï¸ Groceries & Retail</button> 1127 <button onclick="setExportPoi('health', 'hospital urgent care')" id="poi-btn-health" class="export-poi-btn px-3 py-1.5 rounded-xl text-[10px] font-black whitespace-nowrap transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white">ð¥ Medical</button> 1128 </div> 1129 1130 <!-- Active POI Search Indicator Banner --> 1131 <div id="export-poi-banner" style="display: none;" class="p-3 bg-slate-900/90 rounded-xl border border-white/10 flex items-center justify-between"> 1132 <div class="flex items-center gap-2"> 1133 <span class="w-2 h-2 rounded-full bg-orange-400 animate-ping"></span> 1134 <span id="export-poi-banner-text" class="text-[10px] font-black text-white uppercase tracking-wider"></span> 1135 </div> 1136 <button onclick="setExportPoi('all', '')" class="text-[9px] font-black text-orange-400 hover:text-white uppercase tracking-wider cursor-pointer"> 1137 Reset to Property Pin â 1138 </button> 1139 </div> 1140 </div> 1141 1142 <!-- Embedded Interactive Map Canvas --> 1143 <div class="w-full h-[62vh] sm:h-[72vh] min-h-[460px] rounded-[2rem] sm:rounded-[2.5rem] overflow-hidden border border-white/10 bg-slate-950 shadow-2xl relative group"> 1144 <iframe 1145 id="export-map-iframe" 1146 src="https://maps.google.com/maps?q=5379%20Wellburn%20Drive%2C%20Delta&t=&z=15&ie=UTF8&iwloc=&output=embed" 1147 width="100%" 1148 height="100%" 1149 frameBorder="0" 1150 allowFullScreen 1151 loading="lazy" 1152 referrerpolicy="no-referrer-when-downgrade" 1153 class="w-full h-full border-0" 1154 title="Property Location Map" 1155 ></iframe> 1156 </div> 1157 </div> 1158 1159 1160 </div> 1161 1162 <div class="lg:col-span-4"> 1163 <div class="sticky top-10 space-y-6">
1164 <div class="p-8 md:p-10 glass-panel rounded-[3rem] border border-white/10 space-y-8 text-center"> 1165 <div class="flex items-center justify-center gap-3"> 1166 <div class="w-28 h-28 rounded-full border-4 p-1 overflow-hidden shadow-2xl shrink-0" style="border-color: var(--brand)"> 1167 <img src="images/headshot.jpg" class="w-full h-full object-cover rounded-full"> 1168 </div> 1169 </div> 1170 <div class="space-y-4"> 1171 <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">Listing Associate</span> 1172 1173 <div class="space-y-1"> 1174 <h3 class="text-xl font-black text-white uppercase tracking-tighter">Dinnell Real Estate Group</h3> 1175 <p class="font-bold text-[10px] uppercase tracking-widest" style="color: var(--brand)">ReMax Westcoast</p> 1176 <div class="flex flex-col gap-0.5 pt-1 text-[10px] font-bold uppercase text-slate-400"> 1177 1178 <div class="truncate">[email protected]</div> 1179 </div> 1180 </div> 1181 1182 <a href="https://dinnell.ca" target="_blank" rel="noopener noreferrer" class="block truncate pt-2 underline underline-offset-4 text-[10px] font-bold uppercase" style="color: var(--brand)">dinnell.ca</a> 1183 </div> 1184 <button onclick="toggleModal(true)" class="w-full py-5 rounded-2xl bg-white text-slate-950 font-black uppercase tracking-widest text-[11px] shadow-xl hover:scale-105 transition-transform">Request Private Viewing</button> 1185 </div> 1186 1187 1188 1189 <div class="flex justify-center"> 1190 <img src="https://cmyixvfqicuycuhgqjnv.supabase.co/storage/v1/object/public/clients/logo2025_convertedpng.png" class="max-h-8 w-auto object-contain opacity-60 hover:opacity-100 transition-opacity" alt="Broker Logo"> 1191 </div> 1192 </div> 1193 </div> 1194 </div> 1195 </div> 1196 1197 <div id="contact-modal" class="fixed inset-0 z-[200] bg-slate-950/90 backdrop-blur-xl hidden items-center justify-center p-4" style="display: none"> 1198 <div class="max-w-md w-full glass-panel p-8 md:p-10 rounded-[2.5rem] border border-white/10 shadow-2xl relative"> 1199 <button onclick="toggleModal(false)" class="absolute top-6 right-6 p-2 text-slate-500 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" class="w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></button> 1200 <div id="form-container" class="space-y-8"> 1201 <div class="space-y-2"><h3 class="text-3xl font-black text-white uppercase tracking-tighter">Private Viewing</h3><p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Property: 5379 Wellburn Drive</p></div> 1202 <form class='space-y-4' method='POST' name='property-inquiry'> 1203 <input type="hidden" name="form-name" value="property-inquiry" /><input type="hidden" name="property_address" value="5379 Wellburn Drive" /> 1204 <div class="space-y-1"><label class="text-[9px] font-black text-slate-500 uppercase tracking-widest">Full Name</label><input required type="text" name="name" class="w-full bg-slate-900/50 border border-white/5 rounded-xl px-4 py-3 text-sm text-white focus:ring-1 focus:ring-orange-500 outline-none" /></div> 1205 <div class="space-y-1"><label class="text-[9px] font-black text-slate-500 uppercase tracking-widest">Email Address</label><input required type="email" name="email" class="w-full bg-slate-900/50 border border-white/5 rounded-xl px-4 py-3 text-sm text-white focus:ring-1 focus:ring-orange-500 outline-none" /></div> 1206 <div class="space-y-1"><label class="text-[9px] font-black text-slate-500 uppercase tracking-widest">Message</label><textarea name="message" rows="3" class="w-full bg-slate-900/50 border border-white/5 rounded-xl px-4 py-3 text-sm text-white focus:ring-1 focus:ring-orange-500 outline-none resize-none"></textarea></div> 1207 <button type="submit" class="w-full py-4 mt-4 rounded-xl font-black uppercase tracking-widest text-[11px] text-white shadow-xl" style="background-color: var(--brand)">Send Inquiry</button> 1208 </form> 1209 </div> 1210 </div> 1211 </div> 1212 1213
1213<script> 1214 const PROPERTY_LOC = "5379 Wellburn Drive, Delta"; 1215 const PROPERTY_CITY = "Delta"; 1216 const BRAND_COLOR = "#f97316"; 1217 const GALLERY_IMAGES = ["images/gallery/img_0.jpg","images/gallery/img_1.jpg","images/gallery/img_2.jpg","images/gallery/img_3.jpg","images/gallery/img_4.jpg","images/gallery/img_5.jpg","images/gallery/img_6.jpg","images/gallery/img_7.jpg","images/gallery/img_8.jpg","images/gallery/img_9.jpg","images/gallery/img_10.jpg","images/gallery/img_11.jpg","images/gallery/img_12.jpg","images/gallery/img_13.jpg","images/gallery/img_14.jpg","images/gallery/img_15.jpg","images/gallery/img_16.jpg","images/gallery/img_17.jpg","images/gallery/img_18.jpg","images/gallery/img_19.jpg","images/gallery/img_20.jpg","images/gallery/img_21.jpg","images/gallery/img_22.jpg","images/gallery/img_23.jpg","images/gallery/img_24.jpg","images/gallery/img_25.jpg","images/gallery/img_26.jpg","images/gallery/img_27.jpg","images/gallery/img_28.jpg","images/gallery/img_29.jpg","images/gallery/img_30.jpg","images/gallery/img_31.jpg","images/gallery/img_32.jpg","images/gallery/img_33.jpg","images/gallery/img_34.jpg","images/gallery/img_35.jpg","images/gallery/img_36.jpg","images/gallery/img_37.jpg","images/gallery/img_38.jpg","images/gallery/img_39.jpg","images/gallery/img_40.jpg","images/gallery/img_41.jpg","images/gallery/img_42.jpg","images/gallery/img_43.jpg","images/gallery/img_44.jpg","images/gallery/img_45.jpg","
1217images/gallery/img_46.jpg","images/gallery/img_47.jpg","images/gallery/img_48.jpg","images/gallery/img_49.jpg","images/gallery/img_50.jpg","images/gallery/img_51.jpg","images/gallery/img_52.jpg","images/gallery/img_53.jpg"]; 1218 const EMBEDDED_PANOS = {}; 1219 let activeLightboxIdx = 0; 1220 1221 function switchTab(tabId) { 1222 document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); 1223 document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); 1224 const target = document.getElementById(tabId); 1225 if (target) target.classList.add('active'); 1226 const btn = document.getElementById('btn-' + tabId); 1227 if (btn) btn.classList.add('active'); 1228 if(tabId === 'drone360') window.dispatchEvent(new Event('resize')); 1229 } 1230 1231 function toggleModal(show) { document.getElementById('contact-modal').style.display = show ? 'flex' : 'none'; } 1232 1233 let currentExportZoom = 1; 1234 function setExportFloorPlanZoom(level) { 1235 currentExportZoom = Math.min(3, Math.max(1, level)); 1236 const canvas = document.getElementById('export-floorplan-canvas'); 1237 if (canvas) { 1238 canvas.style.transform = 'scale(' + currentExportZoom + ')'; 1239 canvas.style.marginRight = currentExportZoom > 1 ? ((currentExportZoom - 1) * 100) + '%' : '0'; 1240 canvas.style.marginBottom = currentExportZoom > 1 ? ((currentExportZoom - 1) * 100) + '%' : '0'; 1241 } 1242 const pins = document.querySelectorAll('.export-hotspot-pin'); 1243 const invScale = 1 / currentExportZoom; 1244 pins.forEach(function(pin) { 1245 pin.style.transform = 'translate(-50%, -50%) scale(' + invScale + ')'; 1246 }); 1247 } 1248 function zoomExportFloorPlan(delta) { 1249 setExportFloorPlanZoom(+(currentExportZoom + delta).toFixed(2)); 1250 } 1251 1252 1253 1254 let pannellumViewer = null; 1255 let isHotspotLightbox = false; 1256 let hotspotIs360 = false; 1257 1258 function checkIs360(src, cb) { 1259 if (!src) return cb(false); 1260 if (isHotspotLightbox && hotspotIs360) { 1261 return cb(true); 1262 } 1263 cb(false); 1264 } 1265 1266 function openLightbox(index, isHotspot, is360) { 1267 isHotspotLightbox = !!isHotspot; 1268 hotspotIs360 = !!is360; 1269 activeLightboxIdx = index; 1270 updateLightbox(); 1271 document.getElementById('lightbox').classList.add('active'); 1272 document.body.style.overflow = 'hidden'; 1273 } 1274 1275 function closeLightbox() { 1276 if (pannellumViewer) { 1277 try { pannellumViewer.destroy(); } catch(e){} 1278 pannellumViewer = null; 1279 } 1280 document.getElementById('lightbox').classList.remove('active'); 1281 document.body.style.overflow = 'auto'; 1282 } 1283 1284 function changeLightbox(delta) { 1285 if (isHotspotLightbox) return; 1286 activeLightboxIdx = (activeLightboxIdx + delta + GALLERY_IMAGES.length) % GALLERY_IMAGES.length; 1287 updateLightbox(); 1288 } 1289 1290 function updateLightbox() { 1291 const relativeSrc = GALLERY_IMAGES[activeLightboxIdx]; 1292 const dataSrc = (EMBEDDED_PANOS && EMBEDDED_PANOS[activeLightboxIdx]) ? EMBEDDED_PANOS[activeLightboxIdx] : relativeSrc; 1293 const imgEl = document.getElementById('lightbox-img'); 1294 const panoEl = document.getElementById('lightbox-pano'); 1295 const badgeEl = document.getElementById('lightbox-badge'); 1296 const counter = document.getElementById('lightbox-counter'); 1297 const prevBtn = document.getElementById('lightbox-prev'); 1298 const nextBtn = document.getElementById('lightbox-next'); 1299 1300 if (prevBtn) prevBtn.style.display = isHotspotLightbox ? 'none' : 'block'; 1301 if (nextBtn) nextBtn.style.display = isHotspotLightbox ? 'none' : 'block'; 1302 if (counter) counter.innerText = isHotspotLightbox ? 'Hotspot Photo' : ((activeLightboxIdx + 1) + ' / ' + GALLERY_IMAGES.length); 1303 1304 if (pannellumViewer) { 1305 try { pannellumViewer.destroy(); } catch(e){} 1306 pannellumViewer = null; 1307 } 1308 if (panoEl) panoEl.innerHTML = ''; 1309 1310 checkIs360(dataSrc, function(is360) { 1311 if (is360) { 1312 imgEl.style.display = 'none'; 1313 panoEl.style.display = 'block'; 1314 badgeEl.style.display = 'flex'; 1315 1316 function initPannellum() { 1317 if (window.pannellum) { 1318 panoEl.innerHTML = ''; 1319 function createViewer(panoPath) { 1320 try { 1321 pannellumViewer = pannellum.viewer('lightbox-pano', { 1322 type: 'equirectangular', 1323 panorama: panoPath, 1324 autoLoad: true, 1325 showZoomCtrl: true, 1326 compass: false, 1327 hfov: 100, 1328 minHfov: 30, 1329 maxHfov: 120, 1330 haov: 360, 1331 vaov: 180, 1332 vOffset: 0, 1333 friction: 0.15 1334 }); 1335 setTimeout(function() { 1336 if (pannellumViewer) try { pannellumViewer.resize(); } catch(err){} 1337 }, 200); 1338 } catch (e) { 1339 console.error("Pannellum init error:", e); 1340 if (panoPath !== relativeSrc) { 1341 createViewer(relativeSrc); 1342 } 1343 } 1344 } 1345 createViewer(dataSrc); 1346 } else { 1347 setTimeout(initPannellum, 100); 1348 } 1349 } 1350 initPannellum(); 1351 } else { 1352 panoEl.style.display = 'none'; 1353 badgeEl.style.display = 'none'; 1354 imgEl.style.display = 'block'; 1355 imgEl.src = relativeSrc; 1356 } 1357 }); 1358 } 1359 1360 document.addEventListener('keydown', e => { 1361 if (!document.getElementById('lightbox').classList.contains('active')) return; 1362 if (e.key === 'Escape') closeLightbox(); 1363 if (!isHotspotLightbox) { 1364 if (e.key === 'ArrowLeft') changeLightbox(-1); 1365 if (e.key === 'ArrowRight') changeLightbox(1); 1366 } 1367 }); 1368 1369 // Website Slideshow & Fast Scroller Logic 1370 let exportViewMode = 'slideshow'; 1371 let exportSlideIndex = 0; 1372 let isExportPlaying = true; 1373 let exportTimerStartTime = Date.now(); 1374 let exportTimerInterval = null; 1375 let exportSlideCycleTimer = null; 1376 1377 function resetExportSlideshowTimer() { 1378 if (exportTimerInterval) clearInterval(exportTimerInterval); 1379 if (exportSlideCycleTimer) clearTimeout(exportSlideCycleTimer); 1380 const timerBar = document.getElementById('export-timer-bar'); 1381 1382 if (exportViewMode !== 'slideshow' || !isExportPlaying || GALLERY_IMAGES.length <= 1) { 1383 if (timerBar) timerBar.style.width = '0%'; 1384 return; 1385 } 1386 1387 exportTimerStartTime = Date.now(); 1388 if (timerBar) timerBar.style.width = '0%'; 1389 1390 exportTimerInterval = setInterval(function() {
1391 const elapsed = Date.now() - exportTimerStartTime; 1392 const pct = Math.min(100, (elapsed / 2000) * 100); 1393 if (timerBar) timerBar.style.width = pct + '%'; 1394 }, 50); 1395 1396 exportSlideCycleTimer = setTimeout(function() { 1397 changeExportSlide(1); 1398 }, 2000); 1399 } 1400 1401 function setExportSlide(idx) { 1402 if (!GALLERY_IMAGES || GALLERY_IMAGES.length === 0) return; 1403 exportSlideIndex = (idx + GALLERY_IMAGES.length) % GALLERY_IMAGES.length; 1404 1405 const imgEl = document.getElementById('export-slideshow-img'); 1406 const sliderInput = document.getElementById('export-slider-input'); 1407 const badgeEl = document.getElementById('export-slide-badge'); 1408 const hudEl = document.getElementById('export-slideshow-hud'); 1409 1410 if (imgEl && GALLERY_IMAGES[exportSlideIndex]) { 1411 imgEl.src = GALLERY_IMAGES[exportSlideIndex]; 1412 } 1413 if (sliderInput) sliderInput.value = exportSlideIndex; 1414 if (badgeEl) badgeEl.innerHTML = '#' + (exportSlideIndex + 1) + ' <span class="text-slate-500 text-[10px]">/ ' + GALLERY_IMAGES.length + '</span>'; 1415 if (hudEl) hudEl.innerText = 'Photo #' + (exportSlideIndex + 1) + ' of ' + GALLERY_IMAGES.length; 1416 1417 document.querySelectorAll('.export-thumb-item').forEach(function(el, i) { 1418 if (i === exportSlideIndex) { 1419 el.classList.add('scale-105', 'shadow-xl'); 1420 el.style.borderColor = BRAND_COLOR; 1421 el.style.boxShadow = '0 0 15px ' + BRAND_COLOR + '40'; 1422 el.style.opacity = '1'; 1423 } else { 1424 el.classList.remove('scale-105', 'shadow-xl'); 1425 el.style.borderColor = 'rgba(255,255,255,0.1)'; 1426 el.style.boxShadow = 'none'; 1427 el.style.opacity = '0.6'; 1428 } 1429 }); 1430 1431 if (exportViewMode === 'gallery') { 1432 var targetPhoto = document.getElementById('export-gallery-photo-' + exportSlideIndex); 1433 if (targetPhoto) { 1434 targetPhoto.scrollIntoView({ behavior: 'smooth', block: 'center' }); 1435 } 1436 } 1437 1438 resetExportSlideshowTimer(); 1439 } 1440 1441 function changeExportSlide(delta) { 1442 setExportSlide(exportSlideIndex + delta); 1443 } 1444 1445 function toggleExportSlideshowPlay() { 1446 isExportPlaying = !isExportPlaying; 1447 const btn = document.getElementById('export-play-btn'); 1448 const dot = document.getElementById('export-status-dot'); 1449 const sub = document.getElementById('export-status-sub'); 1450 1451 if (btn) { 1452 btn.innerText = isExportPlaying ? '⸠Pause' : 'ⶠPlay (2s)'; 1453 btn.style.backgroundColor = isExportPlaying ? BRAND_COLOR + '20' : 'rgba(16, 185, 129, 0.15)'; 1454 btn.style.color = isExportPlaying ? BRAND_COLOR : '#34d399'; 1455 } 1456 if (dot) { 1457 if (isExportPlaying) dot.classList.add('animate-ping'); 1458 else dot.classList.remove('animate-ping'); 1459 } 1460 if (sub) { 1461 sub.innerText = isExportPlaying ? 'Auto-advancing every 2 seconds' : 'Slideshow Paused'; 1462 } 1463 resetExportSlideshowTimer(); 1464 } 1465 1466 function toggleExportThumbStrip() { 1467 const strip = document.getElementById('export-thumb-strip'); 1468 if (strip) { 1469 strip.style.display = (strip.style.display === 'none' || !strip.style.display) ? 'flex' : 'none'; 1470 } 1471 } 1472 1473 function toggleExportViewMode() { 1474 exportViewMode = exportViewMode === 'slideshow' ? 'gallery' : 'slideshow'; 1475 const slideshowContainer = document.getElementById('export-slideshow-container'); 1476 const galleryContainer = document.getElementById('export-gallery-container'); 1477 const btn = document.getElementById('export-view-mode-btn'); 1478 const statusTitle = document.getElementById('export-status-title'); 1479 const timerTrack = document.getElementById('export-timer-track'); 1480 const playBtn = document.getElementById('export-play-btn'); 1481 1482 if (exportViewMode === 'slideshow') { 1483 if (slideshowContainer) slideshowContainer.style.display = 'flex'; 1484 if (galleryContainer) galleryContainer.style.display = 'none'; 1485 if (timerTrack) timerTrack.style.display = 'block'; 1486 if (playBtn) playBtn.style.display = 'inline-flex'; 1487 if (statusTitle) statusTitle.innerText = 'Slideshow Mode (2s Auto-Play)'; 1488 if (btn) { 1489 btn.style.backgroundColor = BRAND_COLOR; 1490 btn.style.borderColor = 'rgba(255,255,255,0.25)'; 1491 btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-white"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25a2.25 2.25 0 0 1-2.25 2.25h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z" /></svg><span>See as Gallery (Populate All Images)</span>'; 1492 } 1493 } else { 1494 if (slideshowContainer) slideshowContainer.style.display = 'none'; 1495 if (galleryContainer) galleryContainer.style.display = 'block'; 1496 if (timerTrack) timerTrack.style.display = 'none'; 1497 if (playBtn) playBtn.style.display = 'none'; 1498 if (statusTitle) statusTitle.innerText = 'Gallery Grid (' + GALLERY_IMAGES.length + ' Photos)'; 1499 if (btn) { 1500 btn.style.backgroundColor = 'rgba(30, 41, 59,
15000.9)'; 1501 btn.style.borderColor = BRAND_COLOR + '50'; 1502 btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-orange-400"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" /></svg><span>See as Slideshow (Auto 2s Per Image)</span>'; 1503 } 1504 } 1505 resetExportSlideshowTimer(); 1506 } 1507 1508 let currentExportMapLayer = 'roadmap'; 1509 let currentExportPoiQuery = ''; 1510 const BASE_MAP_ADDRESS = "5379 Wellburn Drive, Delta"; 1511 1512 function updateExportMapSrc() { 1513 const tParam = currentExportMapLayer === 'satellite' ? 'k' : (currentExportMapLayer === 'terrain' ? 'p' : ''); 1514 const zoom = currentExportPoiQuery ? 14 : (currentExportMapLayer === 'satellite' ? 17 : 15); 1515 const qStr = currentExportPoiQuery ? (currentExportPoiQuery + ' near ' + BASE_MAP_ADDRESS) : BASE_MAP_ADDRESS; 1516 const url = 'https://maps.google.com/maps?q=' + encodeURIComponent(qStr) + '&t=' + tParam + '&z=' + zoom + '&ie=UTF8&iwloc=&output=embed'; 1517 const iframe = document.getElementById('export-map-iframe'); 1518 if (iframe) iframe.src = url; 1519 } 1520 1521 function setExportMapLayer(layer) { 1522 currentExportMapLayer = layer; 1523 document.querySelectorAll('.export-layer-btn').forEach(function(btn) { 1524 btn.className = 'export-layer-btn px-3 py-1.5 rounded-xl text-[10px] font-black transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white'; 1525 }); 1526 const activeBtn = document.getElementById('btn-layer-' + layer); 1527 if (activeBtn) { 1528 activeBtn.className = 'export-layer-btn px-3 py-1.5 rounded-xl text-[10px] font-black transition-all cursor-pointer bg-slate-800 text-white border border-white/20 shadow-md'; 1529 } 1530 updateExportMapSrc(); 1531 } 1532 1533 function setExportPoi(poiId, query) { 1534 currentExportPoiQuery = query; 1535 document.querySelectorAll('.export-poi-btn').forEach(function(btn) { 1536 btn.style.backgroundColor = ''; 1537 btn.style.color = ''; 1538 btn.style.borderColor = ''; 1539 btn.className = 'export-poi-btn px-3 py-1.5 rounded-xl text-[10px] font-black whitespace-nowrap transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white'; 1540 }); 1541 const activeBtn = document.getElementById('poi-btn-' + poiId); 1542 if (activeBtn) { 1543 activeBtn.style.backgroundColor = BRAND_COLOR; 1544 activeBtn.style.color = '#ffffff'; 1545 activeBtn.style.borderColor = BRAND_COLOR; 1546 } 1547 const banner = document.getElementById('export-poi-banner'); 1548 const bannerText = document.getElementById('export-poi-banner-text'); 1549 if (banner && bannerText) { 1550 if (query) { 1551 banner.style.display = 'flex'; 1552 bannerText.textContent = 'Highlighting nearby ' + poiId.toUpperCase() + ' around ' + BASE_MAP_ADDRESS; 1553 } else { 1554 banner.style.display = 'none'; 1555 } 1556 } 1557 updateExportMapSrc(); 1558 } 1559 1560 function copyExportAddress() { 1561 navigator.clipboard.writeText(BASE_MAP_ADDRESS).then(function() { 1562 const text = document.getElementById('export-copy-text'); 1563 const icon = document.getElementById('export-copy-icon'); 1564 if (text) text.textContent = 'Address Copied!'; 1565 if (icon) icon.textContent = 'â '; 1566 setTimeout(function() { 1567 if (text) text.textContent = 'Copy Address'; 1568 if (icon) icon.textContent = 'ð'; 1569 }, 2500); 1570 }); 1571 } 1572 1573 setTimeout(function() { 1574 setExportSlide(0); 1575 }, 200); 1576 1577 1578 </script>
1578 1579</body> 1580</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.