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>33993 McPhee Place</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]">33993 McPhee Place</h1> 54 <div class="flex items-center gap-6 text-slate-400 font-bold uppercase tracking-[0.2em] text-xs md:text-sm"><span>Mission</span><span class="opacity-20">|</span><span class="text-white">5 BED ⢠4 BATH ⢠2616 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="41" 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]">/ 42</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 </div> 334 335 <!-- PROMINENT BUTTON ON THE WEBSITE BELOW THE SCROLL BAR --> 336 <div class="pt-2 border-t border-white/5"> 337 <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"> 338 <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"> 339 <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" /> 340 </svg> 341 <span>See as Gallery (Populate All Images)</span> 342 </button> 343 </div> 344 </div> 345 </div> 346 347 <!-- Slideshow Mode Container --> 348 <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"> 349 <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]"> 350 <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> 351 <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> 352 <div class="absolute bottom-4 inset-x-4 flex items-center justify-between pointer-events-none">
353 <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 42</span> 354 <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> 355 </div> 356 </div> 357 358 <!-- Gallery Grid View Container (Hidden initially when in slideshow mode) --> 359 <div id="export-gallery-container" style="display: none;" class="w-full"> 360 <div class="columns-1 sm:columns-2 gap-4 md:gap-6"> 361 362 <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"> 363 <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"> 364 </div> 365 366 <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"> 367 <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"> 368 </div> 369 370 <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"> 371 <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"> 372 </div> 373 374 <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"> 375 <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"> 376 </div> 377 378 <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"> 379 <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"> 380 </div> 381 382 <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"> 383 <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"> 384 </div> 385 386 <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"> 387 <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"> 388 </div> 389 390 <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"> 391 <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"> 392 </div> 393 394 <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"> 395 <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"> 396 </div> 397 398 <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"> 399 <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"> 400 </div> 401 402 <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"> 403 <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"> 404 </div> 405 406 <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"> 407 <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"> 408 </div> 409 410 <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"> 411 <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"> 412 </div> 413 414 <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"> 415 <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"> 416 </div> 417 418 <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"> 419 <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"> 420 </div> 421 422 <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"> 423 <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"> 424 </div> 425 426 <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"> 427 <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"> 428 </div> 429 430 <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"> 431 <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"> 432 </div> 433 434 <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"> 435 <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"> 436 </div> 437 438 <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"> 439 <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"> 440 </div> 441 442 <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"> 443 <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"> 444 </div> 445 446 <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"> 447 <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"> 448 </div> 449 450 <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"> 451 <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"> 452 </div> 453 454 <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"> 455 <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"> 456 </div> 457 458 <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"> 459 <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"> 460 </div> 461 462 <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"> 463 <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"> 464 </div> 465 466 <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"> 467 <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"> 468 </div> 469 470 <div id="export-gallery-photo-27" onclick="openLightbox(27)" class="break-inside-avoid w-full roun
470ded-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_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"> 472 </div> 473 474 <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"> 475 <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"> 476 </div> 477 478 <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"> 479 <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"> 480 </div> 481 482 <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"> 483 <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"> 484 </div> 485 486 <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"> 487 <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"> 488 </div> 489 490 <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"> 491 <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"> 492 </div> 493 494 <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"> 495 <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"> 496 </div> 497 498 <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"> 499 <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"> 500 </div> 501 502 <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"> 503 <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"> 504 </div> 505 506 <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"> 507 <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"> 508 </div> 509 510 <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"> 511 <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"> 512 </div> 513 514 <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"> 515 <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"> 516 </div> 517 518 <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"> 519 <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"> 520 </div> 521 522 <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"> 523 <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"> 524 </div> 525 526 <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"> 527 <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"> 528 </div> 529 530 </div> 531 </div> 532 </div> 533 534 <div id="floorplan" class="tab-content"> 535 536 <div class="space-y-8"> 537 <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-6 glass-panel roun
537ded-3xl border border-white/10"> 538 <div> 539 <h3 class="text-sm font-black text-white uppercase tracking-wider">Architectural Floor Plan</h3> 540 <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-0.5">Click numbered hotspot pins to view room photography</p> 541 </div> 542 <div class="flex items-center gap-3"> 543 <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">ð¯ 18 Hotspots</div> 544 <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"> 545 <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> 546 Download Floor Plan 547 </a> 548 </div> 549 </div> 550 <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"> 551 <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"> 552 <div class="flex flex-wrap items-center gap-2"> 553 <span class="text-[10px] font-black text-orange-400 uppercase tracking-widest mr-1">ð Blueprint Zoom:</span> 554 <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> 555 <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> 556 <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> 557 <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> 558 <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> 559 <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> 560 <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> 561 </div> 562 <div class="flex items-center gap-2"> 563 <span class="hidden sm:inline-block text-[9px] font-bold text-slate-500 uppercase tracking-widest">Pins stay small when zoomed</span> 564 <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"> 565 <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> 566 Download 567 </a> 568 </div> 569 </div> 570 <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"> 571 <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"> 572 <img src="images/floorplan.jpg" class="block w-full h-auto pointer-events-none"> 573 574 <div style="left: 37%; top: 52%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 575 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 576 <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"> 577 1 578 </button> 579 <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"> 580 <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> 581 <div class="space-y-1"> 582 <div class="flex items-center justify-between">
583 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #1</span> 584 <span class="text-[8px] font-bold text-slate-500">Spot #1</span> 585 </div> 586 587 <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> 588 </div> 589 </div> 590 </div> 591 592 <div style="left: 26%; top: 56%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 593 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 594 <button onclick="openLightbox(7, 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"> 595 2 596 </button> 597 <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"> 598 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_7.jpg" class="w-full h-full object-cover"></div> 599 <div class="space-y-1"> 600 <div class="flex items-center justify-between"> 601 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #2</span> 602 <span class="text-[8px] font-bold text-slate-500">Spot #2</span> 603 </div> 604 605 <button onclick="openLightbox(7, 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> 606 </div> 607 </div> 608 </div> 609 610 <div style="left: 15%; top: 46%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 611 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 612 <button onclick="openLightbox(9, 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"> 613 3 614 </button> 615 <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"> 616 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_9.jpg" class="w-full h-full object-cover"></div> 617 <div class="space-y-1"> 618 <div class="flex items-center justify-between">
619 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #3</span> 620 <span class="text-[8px] font-bold text-slate-500">Spot #3</span> 621 </div> 622 623 <button onclick="openLightbox(9, 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> 624 </div> 625 </div> 626 </div> 627 628 <div style="left: 22%; top: 79%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 629 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 630 <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"> 631 4 632 </button> 633 <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"> 634 <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> 635 <div class="space-y-1"> 636 <div class="flex items-center justify-between"> 637 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #4</span> 638 <span class="text-[8px] font-bold text-slate-500">Spot #4</span> 639 </div> 640 641 <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> 642 </div> 643 </div> 644 </div> 645 646 <div style="left: 12%; top: 79%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 647 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 648 <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"> 649 5 650 </button> 651 <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"> 652 <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> 653 <div class="space-y-1"> 654 <div class="flex items-center justify-between">
655 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #5</span> 656 <span class="text-[8px] font-bold text-slate-500">Spot #5</span> 657 </div> 658 659 <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> 660 </div> 661 </div> 662 </div> 663 664 <div style="left: 27%; top: 64%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin"> 665 <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div> 666 <button onclick="openLightbox(18, 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"> 667 6 668 </button> 669 <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"> 670 <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_18.jpg" class="w-full h-full object-cover"></div> 671 <div class="space-y-1"> 672 <div class="flex items-center justify-between"> 673 <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #6</span> 674 <span class="text-[8px] font-bold text-slate-500">Spot #6</span> 675 </div> 676 677 <button onclick="openLightbox(18, 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> 678 </div> 679 </div> 680 </div> 681 682 <div style="left: 15%; top: 65%; 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(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"> 685 7 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_19.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 #7</span> 692 <span class="text-[8px] font-bold text-slate-500">Spot #7</span> 693 </div> 694 695 <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> 696 </div> 697 </div> 698 </div> 699 700 <div style="left: 31%; top: 36%; 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(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"> 703 8 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_20.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 #8</span> 710 <span class="text-[8px] font-bold text-slate-500">Spot #8</span> 711 </div> 712 713 <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> 714 </div> 715 </div> 716 </div> 717 718 <div style="left: 38%; top: 72%; 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(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"> 721 9 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_24.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 #9</span> 728 <span class="text-[8px] font-bold text-slate-500">Spot #9</span> 729 </div> 730 731 <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> 732 </div> 733 </div> 734 </div> 735 736 <div style="left: 66%; top: 76%; 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(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"> 739 10 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_25.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 #10</span> 746 <span class="text-[8px] font-bold text-slate-500">Spot #10</span> 747 </div> 748 749 <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> 750 </div> 751 </div> 752 </div> 753 754 <div style="left: 55%; top: 68%; 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(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"> 757 11 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_26.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 #11</span> 764 <span class="text-[8px] font-bold text-slate-500">Spot #11</span> 765 </div> 766 767 <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> 768 </div> 769 </div> 770 </div> 771 772 <div style="left: 69%; top: 59%; 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(27, 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 12 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_27.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 #12</span> 782 <span class="text-[8px] font-bold text-slate-500">Spot #12</span> 783 </div> 784 785 <button onclick="openLightbox(27, 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: 61%; top: 59%; 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(28, 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 13 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_28.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 #13</span> 800 <span class="text-[8px] font-bold text-slate-500">Spot #13</span> 801 </div> 802 803 <button onclick="openLightbox(28, 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: 54%; top: 54%; 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(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"> 811 14 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_29.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 #14</span> 818 <span class="text-[8px] font-bold text-slate-500">Spot #14</span> 819 </div> 820 821 <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> 822 </div> 823 </div> 824 </div> 825 826 <div style="left: 66%; top: 51%; 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(30, 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 15 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_30.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 #15</span> 836 <span class="text-[8px] font-bold text-slate-500">Spot #15</span> 837 </div> 838 839 <button onclick="openLightbox(30, 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: 55%; top: 42%; 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(31, 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 16 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_31.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 #16</span> 854 <span class="text-[8px] font-bold text-slate-500">Spot #16</span> 855 </div> 856 857 <button onclick="openLightbox(31, 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: 65%; top: 36%; 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(32, 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 17 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_32.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 #17</span> 872 <span class="text-[8px] font-bold text-slate-500">Spot #17</span> 873 </div> 874 875 <button onclick="openLightbox(32, 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: 76%; top: 44%; 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(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"> 883 18 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_33.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 #18</span> 890 <span class="text-[8px] font-bold text-slate-500">Spot #18</span> 891 </div> 892 893 <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> 894 </div> 895 </div> 896 </div> 897 898 </div> 899 </div> 900 </div> 901 </div> 902 903 904 905 <div class="space-y-4 pt-2"> 906 <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"> 907 <div> 908 <div class="flex items-center gap-2"> 909 <span class="w-2 h-2 rounded-full bg-orange-500 animate-pulse"></span> 910 <h3 class="text-sm font-black text-white uppercase tracking-wider">3D Interactive Floor Plan</h3> 911 </div> 912 <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Explore the interactive 3D dollhouse and spatial walkthrough</p> 913 </div> 914 <div class="px-3.5 py-1.5 bg-orange-500/10 border border-orange-500/30 rounded-xl text-[10px] font-black text-orange-400 uppercase tracking-widest"> 915 3D Walkthrough 916 </div> 917 </div> 918 <div class="w-full h-[60vh] sm:h-[75vh] min-h-[420px] rounded-[2rem]
918sm:rounded-[2.5rem] overflow-hidden border border-white/10 bg-black shadow-2xl"> 919 <iframe src="https://3d.magicplan.app/#embed/?key=ZDQ5ZGEwN2U1ZjlhZDQ4NTMwZjJlNzljYzgxZGM4NDRjY2JhZjY1YWJlNWU0YTY3NTMwZWFjZjZlYzJhYThmY4Uc6Wg1%2Frvg0D5k%2FDqI5jyp5HAW358E3HOp9MfD0BBeDbxEqMqrF0LwE7JILOweifqaC%2BRFqFrrRnf4jGXbL4F4RiUj6NChsk9caiwgGeh6" 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="3D Floor Plan"></iframe> 920 </div> 921 </div> 922 923 </div> 924 925 <div id="interactive" class="tab-content space-y-12"> 926 <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/7Ty8t?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> 927 928 </div> 929 930 931 932 933 934 935 <div id="map" class="tab-content space-y-6"> 936 <!-- Map & Location Header --> 937 <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"> 938 <div> 939 <div class="flex items-center gap-2"> 940 <span class="w-2 h-2 rounded-full animate-pulse" style="background-color: var(--brand)"></span> 941 <h3 class="text-sm font-black text-white uppercase tracking-wider">Location & Neighborhood</h3> 942 </div> 943 <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1"> 944 33993 McPhee Place, Mission 945 </p> 946 </div> 947 <div class="flex items-center gap-2"> 948 <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"> 949 <span id="export-copy-icon">ð</span> <span id="export-copy-text">Copy Address</span> 950 </button> 951 </div> 952 </div> 953 954 <!-- Smart 1-Tap Navigation & Driving Directions --> 955 <div class="p-5 bg-slate-900/90 backdrop-blur-xl rounded-3xl border border-white/10 shadow-2xl space-y-4"> 956 <div class="flex items-center justify-between"> 957 <span class="text-[10px] font-black uppercase tracking-widest text-slate-400 flex items-center gap-1.5"> 958 <span>ð§</span> 1-Tap Navigation & Directions 959 </span> 960 <span class="text-[9px] font-bold text-emerald-400 uppercase tracking-wider flex items-center gap-1"> 961 <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span> Free GPS Deep Links 962 </span> 963 </div> 964 965 <div class="grid grid-cols-2 sm:grid-cols-4 gap-3"> 966 <a href="https://www.google.com/maps/dir/?api=1&destination=33993%20McPhee%20Place%2C%20Mission" 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">
967 <span class="text-xl group-hover:scale-110 transition-transform">ðºï¸</span> 968 <span class="text-[10px] font-black text-white uppercase tracking-wider">Google Maps</span> 969 <span class="text-[8px] font-bold text-slate-400">Live Traffic & Route</span> 970 </a> 971 972 <a href="https://maps.apple.com/?daddr=33993%20McPhee%20Place%2C%20Mission" 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"> 973 <span class="text-xl group-hover:scale-110 transition-transform">ð</span> 974 <span class="text-[10px] font-black text-white uppercase tracking-wider">Apple Maps</span> 975 <span class="text-[8px] font-bold text-slate-400">iOS & CarPlay</span> 976 </a> 977 978 <a href="https://waze.com/ul?q=33993%20McPhee%20Place%2C%20Mission&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"> 979 <span class="text-xl group-hover:scale-110 transition-transform">ð</span> 980 <span class="text-[10px] font-black text-white uppercase tracking-wider">Waze GPS</span> 981 <span class="text-[8px] font-bold text-slate-400">Real-Time Hazards</span> 982 </a> 983 984 <a href="https://www.google.com/maps/search/?api=1&query=33993%20McPhee%20Place%2C%20Mission" 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"> 985 <span class="text-xl group-hover:scale-110 transition-transform">ð¶</span> 986 <span class="text-[10px] font-black text-white uppercase tracking-wider">Street View</span> 987 <span class="text-[8px] font-bold text-slate-400">Walk The Block</span> 988 </a> 989 </div> 990 </div> 991 992 <!-- Map Layer Switcher & POI Category Filters --> 993 <div class="space-y-3"> 994 <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"> 995 <div class="flex flex-wrap items-center gap-2"> 996 <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest mr-1">ðºï¸ Layer:</span> 997 <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> 998 <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> 999 <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> 1000 </div> 1001 1002 <div class="flex items-center gap-2"> 1003 <a href="https://maps.google.com/maps?q=33993%20McPhee%20Place%2C%20Mission" 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"> 1004 <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> 1005 Full Map 1006 </a> 1007 </div> 1008 </div> 1009 1010 <!-- Points of Interest Pills --> 1011 <div class="flex items-center gap-2 overflow-x-auto py-2 px-1 scrollbar-hide">
1012 <span class="text-[9px] font-black uppercase tracking-widest text-slate-500 whitespace-nowrap mr-1">Nearby POIs:</span> 1013 <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> 1014 <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> 1015 <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> 1016 <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> 1017 <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> 1018 <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> 1019 <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> 1020 </div> 1021 1022 <!-- Active POI Search Indicator Banner --> 1023 <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"> 1024 <div class="flex items-center gap-2"> 1025 <span class="w-2 h-2 rounded-full bg-orange-400 animate-ping"></span> 1026 <span id="export-poi-banner-text" class="text-[10px] font-black text-white uppercase tracking-wider"></span> 1027 </div> 1028 <button onclick="setExportPoi('all', '')" class="text-[9px] font-black text-orange-400 hover:text-white uppercase tracking-wider cursor-pointer"> 1029 Reset to Property Pin â 1030 </button> 1031 </div> 1032 </div> 1033 1034 <!-- Embedded Interactive Map Canvas --> 1035 <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"> 1036 <iframe 1037 id="export-map-iframe" 1038 src="https://maps.google.com/maps?q=33993%20McPhee%20Place%2C%20Mission&t=&z=15&ie=UTF8&iwloc=&output=embed" 1039 width="100%" 1040 height="100%" 1041 frameBorder="0" 1042 allowFullScreen 1043 loading="lazy" 1044 referrerpolicy="no-referrer-when-downgrade" 1045 class="w-full h-full border-0" 1046 title="Property Location Map" 1047 ></iframe> 1048 </div> 1049 </div> 1050 1051 1052 </div> 1053 1054 <div class="lg:col-span-4"> 1055 <div class="sticky top-10 space-y-6">
1056 <div class="p-8 md:p-10 glass-panel rounded-[3rem] border border-white/10 space-y-8 text-center"> 1057 <div class="flex items-center justify-center gap-3"> 1058 <div class="w-28 h-28 rounded-full border-4 p-1 overflow-hidden shadow-2xl shrink-0" style="border-color: var(--brand)"> 1059 <img src="images/headshot.jpg" class="w-full h-full object-cover rounded-full"> 1060 </div> 1061 </div> 1062 <div class="space-y-4"> 1063 <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">Listing Associate</span> 1064 1065 <div class="space-y-1"> 1066 <h3 class="text-xl font-black text-white uppercase tracking-tighter">Sukh Sidhu</h3> 1067 <p class="font-bold text-[10px] uppercase tracking-widest" style="color: var(--brand)">Royal LePage Little Oak Realty Ltd.</p> 1068 <div class="flex flex-col gap-0.5 pt-1 text-[10px] font-bold uppercase text-slate-400"> 1069 1070 <div class="truncate">[email protected]</div> 1071 </div> 1072 </div> 1073 1074 1075 </div> 1076 <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> 1077 </div> 1078 1079 1080 1081 <div class="flex justify-center"> 1082 <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"> 1083 </div> 1084 </div> 1085 </div> 1086 </div> 1087 </div> 1088 1089 <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"> 1090 <div class="max-w-md w-full glass-panel p-8 md:p-10 rounded-[2.5rem] border border-white/10 shadow-2xl relative"> 1091 <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> 1092 <div id="form-container" class="space-y-8"> 1093 <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: 33993 McPhee Place</p></div> 1094 <form class='space-y-4' method='POST' name='property-inquiry'> 1095 <input type="hidden" name="form-name" value="property-inquiry" /><input type="hidden" name="property_address" value="33993 McPhee Place" /> 1096 <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> 1097 <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> 1098 <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> 1099 <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> 1100 </form> 1101 </div> 1102 </div> 1103 </div> 1104 1105
1105<script> 1106 const PROPERTY_LOC = "33993 McPhee Place, Mission"; 1107 const PROPERTY_CITY = "Mission"; 1108 const BRAND_COLOR = "#f97316"; 1109 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"]; 1110 const EMBEDDED_PANOS = {}; 1111 let activeLightboxIdx = 0; 1112 1113 function switchTab(tabId) { 1114 document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); 1115 document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); 1116 const target = document.getElementById(tabId); 1117 if (target) target.classList.add('active'); 1118 const btn = document.getElementById('btn-' + tabId); 1119 if (btn) btn.classList.add('active'); 1120 if(tabId === 'drone360') window.dispatchEvent(new Event('resize')); 1121 } 1122 1123 function toggleModal(show) { document.getElementById('contact-modal').style.display = show ? 'flex' : 'none'; } 1124 1125 let currentExportZoom = 1; 1126 function setExportFloorPlanZoom(level) { 1127 currentExportZoom = Math.min(3, Math.max(1, level)); 1128 const canvas = document.getElementById('export-floorplan-canvas'); 1129 if (canvas) { 1130 canvas.style.transform = 'scale(' + currentExportZoom + ')'; 1131 canvas.style.marginRight = currentExportZoom > 1 ? ((currentExportZoom - 1) * 100) + '%' : '0'; 1132 canvas.style.marginBottom = currentExportZoom > 1 ? ((currentExportZoom - 1) * 100) + '%' : '0'; 1133 } 1134 const pins = document.querySelectorAll('.export-hotspot-pin'); 1135 const invScale = 1 / currentExportZoom; 1136 pins.forEach(function(pin) { 1137 pin.style.transform = 'translate(-50%, -50%) scale(' + invScale + ')'; 1138 }); 1139 } 1140 function zoomExportFloorPlan(delta) { 1141 setExportFloorPlanZoom(+(currentExportZoom + delta).toFixed(2)); 1142 } 1143 1144 1145 1146 let pannellumViewer = null; 1147 let isHotspotLightbox = false; 1148 let hotspotIs360 = false; 1149 1150 function checkIs360(src, cb) { 1151 if (!src) return cb(false); 1152 if (isHotspotLightbox && hotspotIs360) { 1153 return cb(true); 1154 } 1155 cb(false); 1156 } 1157 1158 function openLightbox(index, isHotspot, is360) { 1159 isHotspotLightbox = !!isHotspot; 1160 hotspotIs360 = !!is360; 1161 activeLightboxIdx = index; 1162 updateLightbox(); 1163 document.getElementById('lightbox').classList.add('active'); 1164 document.body.style.overflow = 'hidden'; 1165 } 1166 1167 function closeLightbox() { 1168 if (pannellumViewer) { 1169 try { pannellumViewer.destroy(); } catch(e){} 1170 pannellumViewer = null; 1171 } 1172 document.getElementById('lightbox').classList.remove('active'); 1173 document.body.style.overflow = 'auto'; 1174 } 1175 1176 function changeLightbox(delta) { 1177 if (isHotspotLightbox) return; 1178 activeLightboxIdx = (activeLightboxIdx + delta + GALLERY_IMAGES.length) % GALLERY_IMAGES.length; 1179 updateLightbox(); 1180 } 1181 1182 function updateLightbox() { 1183 const relativeSrc = GALLERY_IMAGES[activeLightboxIdx]; 1184 const dataSrc = (EMBEDDED_PANOS && EMBEDDED_PANOS[activeLightboxIdx]) ? EMBEDDED_PANOS[activeLightboxIdx] : relativeSrc; 1185 const imgEl = document.getElementById('lightbox-img'); 1186 const panoEl = document.getElementById('lightbox-pano'); 1187 const badgeEl = document.getElementById('lightbox-badge'); 1188 const counter = document.getElementById('lightbox-counter'); 1189 const prevBtn = document.getElementById('lightbox-prev'); 1190 const nextBtn = document.getElementById('lightbox-next'); 1191 1192 if (prevBtn) prevBtn.style.display = isHotspotLightbox ? 'none' : 'block'; 1193 if (nextBtn) nextBtn.style.display = isHotspotLightbox ? 'none' : 'block'; 1194 if (counter) counter.innerText = isHotspotLightbox ? 'Hotspot Photo' : ((activeLightboxIdx + 1) + ' / ' + GALLERY_IMAGES.length); 1195 1196 if (pannellumViewer) { 1197 try { pannellumViewer.destroy(); } catch(e){} 1198 pannellumViewer = null; 1199 } 1200 if (panoEl) panoEl.innerHTML = ''; 1201 1202 checkIs360(dataSrc, function(is360) { 1203 if (is360) { 1204 imgEl.style.display = 'none'; 1205 panoEl.style.display = 'block'; 1206 badgeEl.style.display = 'flex'; 1207 1208 function initPannellum() { 1209 if (window.pannellum) { 1210 panoEl.innerHTML = ''; 1211 function createViewer(panoPath) { 1212 try { 1213 pannellumViewer = pannellum.viewer('lightbox-pano', { 1214 type: 'equirectangular', 1215 panorama: panoPath, 1216 autoLoad: true, 1217 showZoomCtrl: true, 1218 compass: false, 1219 hfov: 100, 1220 minHfov: 30, 1221 maxHfov: 120, 1222 haov: 360, 1223 vaov: 180, 1224 vOffset: 0, 1225 friction: 0.15 1226 }); 1227 setTimeout(function() { 1228 if (pannellumViewer) try { pannellumViewer.resize(); } catch(err){} 1229 }, 200); 1230 } catch (e) { 1231 console.error("Pannellum init error:", e); 1232 if (panoPath !== relativeSrc) { 1233 createViewer(relativeSrc); 1234 } 1235 } 1236 } 1237 createViewer(dataSrc); 1238 } else { 1239 setTimeout(initPannellum, 100); 1240 } 1241 } 1242 initPannellum(); 1243 } else { 1244 panoEl.style.display = 'none'; 1245 badgeEl.style.display = 'none'; 1246 imgEl.style.display = 'block'; 1247 imgEl.src = relativeSrc; 1248 } 1249 }); 1250 } 1251 1252 document.addEventListener('keydown', e => { 1253 if (!document.getElementById('lightbox').classList.contains('active')) return; 1254 if (e.key === 'Escape') closeLightbox(); 1255 if (!isHotspotLightbox) { 1256 if (e.key === 'ArrowLeft') changeLightbox(-1); 1257 if (e.key === 'ArrowRight') changeLightbox(1); 1258 } 1259 }); 1260 1261 // Website Slideshow & Fast Scroller Logic 1262 let exportViewMode = 'slideshow'; 1263 let exportSlideIndex = 0; 1264 let isExportPlaying = true; 1265 let exportTimerStartTime = Date.now(); 1266 let exportTimerInterval = null; 1267 let exportSlideCycleTimer = null; 1268 1269 function resetExportSlideshowTimer() { 1270 if (exportTimerInterval) clearInterval(exportTimerInterval); 1271 if (exportSlideCycleTimer) clearTimeout(exportSlideCycleTimer); 1272 const timerBar = document.getElementById('export-timer-bar'); 1273 1274 if (exportViewMode !== 'slideshow' || !isExportPlaying || GALLERY_IMAGES.length <= 1) { 1275 if (timerBar) timerBar.style.width = '0%'; 1276 return; 1277 } 1278 1279 exportTimerStartTime = Date.now(); 1280 if (timerBar) timerBar.style.width = '0%'; 1281 1282 exportTimerInterval = setInterval(function() {
1283 const elapsed = Date.now() - exportTimerStartTime; 1284 const pct = Math.min(100, (elapsed / 2000) * 100); 1285 if (timerBar) timerBar.style.width = pct + '%'; 1286 }, 50); 1287 1288 exportSlideCycleTimer = setTimeout(function() { 1289 changeExportSlide(1); 1290 }, 2000); 1291 } 1292 1293 function setExportSlide(idx) { 1294 if (!GALLERY_IMAGES || GALLERY_IMAGES.length === 0) return; 1295 exportSlideIndex = (idx + GALLERY_IMAGES.length) % GALLERY_IMAGES.length; 1296 1297 const imgEl = document.getElementById('export-slideshow-img'); 1298 const sliderInput = document.getElementById('export-slider-input'); 1299 const badgeEl = document.getElementById('export-slide-badge'); 1300 const hudEl = document.getElementById('export-slideshow-hud'); 1301 1302 if (imgEl && GALLERY_IMAGES[exportSlideIndex]) { 1303 imgEl.src = GALLERY_IMAGES[exportSlideIndex]; 1304 } 1305 if (sliderInput) sliderInput.value = exportSlideIndex; 1306 if (badgeEl) badgeEl.innerHTML = '#' + (exportSlideIndex + 1) + ' <span class="text-slate-500 text-[10px]">/ ' + GALLERY_IMAGES.length + '</span>'; 1307 if (hudEl) hudEl.innerText = 'Photo #' + (exportSlideIndex + 1) + ' of ' + GALLERY_IMAGES.length; 1308 1309 document.querySelectorAll('.export-thumb-item').forEach(function(el, i) { 1310 if (i === exportSlideIndex) { 1311 el.classList.add('scale-105', 'shadow-xl'); 1312 el.style.borderColor = BRAND_COLOR; 1313 el.style.boxShadow = '0 0 15px ' + BRAND_COLOR + '40'; 1314 el.style.opacity = '1'; 1315 } else { 1316 el.classList.remove('scale-105', 'shadow-xl'); 1317 el.style.borderColor = 'rgba(255,255,255,0.1)'; 1318 el.style.boxShadow = 'none'; 1319 el.style.opacity = '0.6'; 1320 } 1321 }); 1322 1323 if (exportViewMode === 'gallery') { 1324 var targetPhoto = document.getElementById('export-gallery-photo-' + exportSlideIndex); 1325 if (targetPhoto) { 1326 targetPhoto.scrollIntoView({ behavior: 'smooth', block: 'center' }); 1327 } 1328 } 1329 1330 resetExportSlideshowTimer(); 1331 } 1332 1333 function changeExportSlide(delta) { 1334 setExportSlide(exportSlideIndex + delta); 1335 } 1336 1337 function toggleExportSlideshowPlay() { 1338 isExportPlaying = !isExportPlaying; 1339 const btn = document.getElementById('export-play-btn'); 1340 const dot = document.getElementById('export-status-dot'); 1341 const sub = document.getElementById('export-status-sub'); 1342 1343 if (btn) { 1344 btn.innerText = isExportPlaying ? '⸠Pause' : 'ⶠPlay (2s)'; 1345 btn.style.backgroundColor = isExportPlaying ? BRAND_COLOR + '20' : 'rgba(16, 185, 129, 0.15)'; 1346 btn.style.color = isExportPlaying ? BRAND_COLOR : '#34d399'; 1347 } 1348 if (dot) { 1349 if (isExportPlaying) dot.classList.add('animate-ping'); 1350 else dot.classList.remove('animate-ping'); 1351 } 1352 if (sub) { 1353 sub.innerText = isExportPlaying ? 'Auto-advancing every 2 seconds' : 'Slideshow Paused'; 1354 } 1355 resetExportSlideshowTimer(); 1356 } 1357 1358 function toggleExportThumbStrip() { 1359 const strip = document.getElementById('export-thumb-strip'); 1360 if (strip) { 1361 strip.style.display = (strip.style.display === 'none' || !strip.style.display) ? 'flex' : 'none'; 1362 } 1363 } 1364 1365 function toggleExportViewMode() { 1366 exportViewMode = exportViewMode === 'slideshow' ? 'gallery' : 'slideshow'; 1367 const slideshowContainer = document.getElementById('export-slideshow-container'); 1368 const galleryContainer = document.getElementById('export-gallery-container'); 1369 const btn = document.getElementById('export-view-mode-btn'); 1370 const statusTitle = document.getElementById('export-status-title'); 1371 const timerTrack = document.getElementById('export-timer-track'); 1372 const playBtn = document.getElementById('export-play-btn'); 1373 1374 if (exportViewMode === 'slideshow') { 1375 if (slideshowContainer) slideshowContainer.style.display = 'flex'; 1376 if (galleryContainer) galleryContainer.style.display = 'none'; 1377 if (timerTrack) timerTrack.style.display = 'block'; 1378 if (playBtn) playBtn.style.display = 'inline-flex'; 1379 if (statusTitle) statusTitle.innerText = 'Slideshow Mode (2s Auto-Play)'; 1380 if (btn) { 1381 btn.style.backgroundColor = BRAND_COLOR; 1382 btn.style.borderColor = 'rgba(255,255,255,0.25)'; 1383 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>'; 1384 } 1385 } else { 1386 if (slideshowContainer) slideshowContainer.style.display = 'none'; 1387 if (galleryContainer) galleryContainer.style.display = 'block'; 1388 if (timerTrack) timerTrack.style.display = 'none'; 1389 if (playBtn) playBtn.style.display = 'none'; 1390 if (statusTitle) statusTitle.innerText = 'Gallery Grid (' + GALLERY_IMAGES.length + ' Photos)'; 1391 if (btn) { 1392 btn.style.backgroundColor = 'rgba(30, 41, 59,
13920.9)'; 1393 btn.style.borderColor = BRAND_COLOR + '50'; 1394 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>'; 1395 } 1396 } 1397 resetExportSlideshowTimer(); 1398 } 1399 1400 let currentExportMapLayer = 'roadmap'; 1401 let currentExportPoiQuery = ''; 1402 const BASE_MAP_ADDRESS = "33993 McPhee Place, Mission"; 1403 1404 function updateExportMapSrc() { 1405 const tParam = currentExportMapLayer === 'satellite' ? 'k' : (currentExportMapLayer === 'terrain' ? 'p' : ''); 1406 const zoom = currentExportPoiQuery ? 14 : (currentExportMapLayer === 'satellite' ? 17 : 15); 1407 const qStr = currentExportPoiQuery ? (currentExportPoiQuery + ' near ' + BASE_MAP_ADDRESS) : BASE_MAP_ADDRESS; 1408 const url = 'https://maps.google.com/maps?q=' + encodeURIComponent(qStr) + '&t=' + tParam + '&z=' + zoom + '&ie=UTF8&iwloc=&output=embed'; 1409 const iframe = document.getElementById('export-map-iframe'); 1410 if (iframe) iframe.src = url; 1411 } 1412 1413 function setExportMapLayer(layer) { 1414 currentExportMapLayer = layer; 1415 document.querySelectorAll('.export-layer-btn').forEach(function(btn) { 1416 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'; 1417 }); 1418 const activeBtn = document.getElementById('btn-layer-' + layer); 1419 if (activeBtn) { 1420 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'; 1421 } 1422 updateExportMapSrc(); 1423 } 1424 1425 function setExportPoi(poiId, query) { 1426 currentExportPoiQuery = query; 1427 document.querySelectorAll('.export-poi-btn').forEach(function(btn) { 1428 btn.style.backgroundColor = ''; 1429 btn.style.color = ''; 1430 btn.style.borderColor = ''; 1431 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'; 1432 }); 1433 const activeBtn = document.getElementById('poi-btn-' + poiId); 1434 if (activeBtn) { 1435 activeBtn.style.backgroundColor = BRAND_COLOR; 1436 activeBtn.style.color = '#ffffff'; 1437 activeBtn.style.borderColor = BRAND_COLOR; 1438 } 1439 const banner = document.getElementById('export-poi-banner'); 1440 const bannerText = document.getElementById('export-poi-banner-text'); 1441 if (banner && bannerText) { 1442 if (query) { 1443 banner.style.display = 'flex'; 1444 bannerText.textContent = 'Highlighting nearby ' + poiId.toUpperCase() + ' around ' + BASE_MAP_ADDRESS; 1445 } else { 1446 banner.style.display = 'none'; 1447 } 1448 } 1449 updateExportMapSrc(); 1450 } 1451 1452 function copyExportAddress() { 1453 navigator.clipboard.writeText(BASE_MAP_ADDRESS).then(function() { 1454 const text = document.getElementById('export-copy-text'); 1455 const icon = document.getElementById('export-copy-icon'); 1456 if (text) text.textContent = 'Address Copied!'; 1457 if (icon) icon.textContent = 'â '; 1458 setTimeout(function() { 1459 if (text) text.textContent = 'Copy Address'; 1460 if (icon) icon.textContent = 'ð'; 1461 }, 2500); 1462 }); 1463 } 1464 1465 setTimeout(function() { 1466 setExportSlide(0); 1467 }, 200); 1468 1469 1470 </script>
1470 1471</body> 1472</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.