PageSourceSearch

https://23165-88-ave-fort-langley.netlify.app/

html 23165-88-ave-fort-langley.netlify.app collected 2026-10-03 10:22:53 UTC 114,088 bytes, 1,116 lines download raw bytes

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>23165 88 Ave</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]">23165 88 Ave</h1>
54                <div class="flex items-center gap-6 text-slate-400 font-bold uppercase tracking-[0.2em] text-xs md:text-sm"><span>Langley</span><span class="opacity-20">|</span><span class="text-white">4 BED • 2 BATH • 2323 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                    <div onclick="switchTab('streetview')" id="btn-streetview" class="tab-btn whitespace-nowrap px-2 py-2 text-[11px] font-black uppercase tracking-[0.2em]">Street View</div>
68                    
69                </div>
70
71                <div id="gallery" class="tab-content active">
72                    <div class="flex flex-nowrap md:block md:columns-2 overflow-x-auto md:overflow-visible snap-x snap-mandatory gap-4 md:gap-6 pb-6 md:pb-0 mobile-gallery-scrollbar">
73                        
74                            <div onclick="openLightbox(0)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
75                                <img src="images/gallery/img_0.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
76                            </div>
77                        
78                            <div onclick="openLightbox(1)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
79                                <img src="images/gallery/img_1.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
80                            </div>
81                        
82                            <div onclick="openLightbox(2)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
83                                <img src="images/gallery/img_2.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
84                            </div>
85                        
86                            <div onclick="openLightbox(3)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
87                                <img src="images/gallery/img_3.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
88                            </div>
89                        
90                            <div onclick="openLightbox(4)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
91                                <img src="images/gallery/img_4.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
92                            </div>
93                        
94                            <div onclick="openLightbox(5)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
95                                <img src="images/gallery/img_5.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
96                            </div>
97                        
98                            <div onclick="openLightbox(6)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
99                                <img src="images/gallery/img_6.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
100                            </div>
101                        
102                            <div onclick="openLightbox(7)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
103                                <img src="images/gallery/img_7.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
104                            </div>
105                        
106                            <div onclick="openLightbox(8)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
107                                <img src="images/gallery/img_8.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
108                            </div>
109                        
110                            <div onclick="openLightbox(9)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
111                                <img src="images/gallery/img_9.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
112                            </div>
113                        
114                            <div onclick="openLightbox(10)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
115                                <img src="images/gallery/img_10.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
116                            </div>
117                        
118                            <div onclick="openLightbox(11)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
119                                <img src="images/gallery/img_11.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
120                            </div>
121                        
122                            <div onclick="openLightbox(12)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
123                                <img src="images/gallery/img_12.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
124                            </div>
125                        
126                            <div onclick="openLightbox(13)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
127                                <img src="images/gallery/img_13.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
128                            </div>
129                        
130                            <div onclick="openLightbox(14)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
131                                <img src="images/gallery/img_14.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
132                            </div>
133                        
134                            <div onclick="openLightbox(15)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
135                                <img src="images/gallery/img_15.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
136                            </div>
137                        
138                            <div onclick="openLightbox(16)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
139                                <img src="images/gallery/img_16.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
140                            </div>
141                        
142                            <div onclick="openLightbox(17)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
143                                <img src="images/gallery/img_17.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
144                            </div>
145                        
146                            <div onclick="openLightbox(18)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
147                                <img src="images/gallery/img_18.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
148                            </div>
149                        
150                            <div onclick="openLightbox(19)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
151                                <img src="images/gallery/img_19.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
152                            </div>
153                        
154                            <div onclick="openLightbox(20)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
155                                <img src="images/gallery/img_20.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
156                            </div>
157                        
158                            <div onclick="openLightbox(21)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
159                                <img src="images/gallery/img_21.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
160                            </div>
161                        
162                            <div onclick="openLightbox(22)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
163                                <img src="images/gallery/img_22.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
164                            </div>
165                        
166                            <div onclick="openLightbox(23)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
167                                <img src="images/gallery/img_23.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
168                            </div>
169                        
170                            <div onclick="openLightbox(24)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
171                                <img src="images/gallery/img_24.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
172                            </div>
173                        
174                            <div onclick="openLightbox(25)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
175                                <img src="images/gallery/img_25.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
176                            </div>
177                        
178                            <div onclick="openLightbox(26)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
179                                <img src="images/gallery/img_26.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
180                            </div>
181                        
182                            <div onclick="openLightbox(27)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
183                                <img src="images/gallery/img_27.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
184                            </div>
185                        
186                            <div onclick="openLightbox(28)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
187                                <img src="images/gallery/img_28.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
188                            </div>
189                        
190                            <div onclick="openLightbox(29)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
191                                <img src="images/gallery/img_29.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
192                            </div>
193                        
194                            <div onclick="openLightbox(30)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
195                                <img src="images/gallery/img_30.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
196                            </div>
197                        
198                            <div onclick="openLightbox(31)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl 
198overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
199                                <img src="images/gallery/img_31.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
200                            </div>
201                        
202                            <div onclick="openLightbox(32)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
203                                <img src="images/gallery/img_32.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
204                            </div>
205                        
206                            <div onclick="openLightbox(33)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
207                                <img src="images/gallery/img_33.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
208                            </div>
209                        
210                            <div onclick="openLightbox(34)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
211                                <img src="images/gallery/img_34.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
212                            </div>
213                        
214                            <div onclick="openLightbox(35)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
215                                <img src="images/gallery/img_35.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
216                            </div>
217                        
218                            <div onclick="openLightbox(36)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
219                                <img src="images/gallery/img_36.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
220                            </div>
221                        
222                            <div onclick="openLightbox(37)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
223                                <img src="images/gallery/img_37.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
224                            </div>
225                        
226                            <div onclick="openLightbox(38)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
227                                <img src="images/gallery/img_38.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
228                            </div>
229                        
230                            <div onclick="openLightbox(39)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
231                                <img src="images/gallery/img_39.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
232                            </div>
233                        
234                            <div onclick="openLightbox(40)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
235                                <img src="images/gallery/img_40.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
236                            </div>
237                        
238                            <div onclick="openLightbox(41)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
239                                <img src="images/gallery/img_41.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
240                            </div>
241                        
242                            <div onclick="openLightbox(42)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
243                                <img src="images/gallery/img_42.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
244                            </div>
245                        
246                            <div onclick="openLightbox(43)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
247                                <img src="images/gallery/img_43.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
248                            </div>
249                        
250                            <div onclick="openLightbox(44)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
251                                <img src="images/gallery/img_44.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
252                            </div>
253                        
254                            <div onclick="openLightbox(45)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
255                                <img src="images/gallery/img_45.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
256                            </div>
257                        
258                            <div onclick="openLightbox(46)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
259                                <img src="images/gallery/img_46.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
260                            </div>
261                        
262                            <div onclick="openLightbox(47)" class="flex-none w-[85vw] snap-center md:w-full md:break-inside-avoid rounded-3xl overflow-hidden border border-white/5 bg-slate-900 shadow-xl mb-0 md:mb-6 cursor-pointer group">
263                                <img src="images/gallery/img_47.jpg" loading="lazy" decoding="async" class="w-full h-auto hover:scale-105 transition-transform duration-700">
264                            </div>
265                        
266                    </div>
267                </div>
268                
269                <div id="floorplan" class="tab-content">
270                    
271                    <div class="space-y-8">
272                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-6 glass-panel roun
272ded-3xl border border-white/10">
273                            <div>
274                                <h3 class="text-sm font-black text-white uppercase tracking-wider">Architectural Floor Plan</h3>
275                                <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-0.5">Click numbered hotspot pins to view room photography</p>
276                            </div>
277                            <div class="flex items-center gap-3">
278                                <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">🎯 16 Hotspots</div>
279                                <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">
280                                    <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>
281                                    Download Floor Plan
282                                </a>
283                            </div>
284                        </div>
285                        <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">
286                            <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">
287                                <div class="flex flex-wrap items-center gap-2">
288                                    <span class="text-[10px] font-black text-orange-400 uppercase tracking-widest mr-1">🔍 Blueprint Zoom:</span>
289                                    <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>
290                                    <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>
291                                    <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>
292                                    <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>
293                                    <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>
294                                    <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>
295                                    <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>
296                                </div>
297                                <div class="flex items-center gap-2">
298                                    <span class="hidden sm:inline-block text-[9px] font-bold text-slate-500 uppercase tracking-widest">Pins stay small when zoomed</span>
299                                    <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">
300                                        <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>
301                                        Download
302                                    </a>
303                                </div>
304                            </div>
305                            <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">
306                                <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">
307                                    <img src="images/floorplan.jpg" class="block w-full h-auto pointer-events-none">
308                                    
309                                        <div style="left: 9%; top: 68%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
310                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
311                                            <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">
312                                                1
313                                            </button>
314                                            <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">
315                                                <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>
316                                                <div class="space-y-1">
317                                                    <div class="flex items-center justify-between">
318                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #1</span>
319                                                        <span class="text-[8px] font-bold text-slate-500">Spot #1</span>
320                                                    </div>
321                                                    
322                                                    <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>
323                                                </div>
324                                            </div>
325                                        </div>
326                                        
327                                        <div style="left: 8%; top: 53%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
328                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
329                                            <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">
330                                                2
331                                            </button>
332                                            <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">
333                                                <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>
334                                                <div class="space-y-1">
335                                                    <div class="flex items-center justify-between">
336                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #2</span>
337                                                        <span class="text-[8px] font-bold text-slate-500">Spot #2</span>
338                                                    </div>
339                                                    
340                                                    <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>
341                                                </div>
342                                            </div>
343                                        </div>
344                                        
345                                        <div style="left: 20%; top: 53%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
346                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
347                                            <button onclick="openLightbox(11, 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">
348                                                3
349                                            </button>
350                                            <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">
351                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_11.jpg" class="w-full h-full object-cover"></div>
352                                                <div class="space-y-1">
353                                                    <div class="flex items-center justify-between">
354                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #3</span>
355                                                        <span class="text-[8px] font-bold text-slate-500">Spot #3</span>
356                                                    </div>
357                                                    
358                                                    <button onclick="openLightbox(11, 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>
359                                                </div>
360                                            </div>
361                                        </div>
362                                        
363                                        <div style="left: 36%; top: 46%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
364                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
365                                            <button onclick="openLightbox(15, 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">
366                                                4
367                                            </button>
368                                            <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">
369                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_15.jpg" class="w-full h-full object-cover"></div>
370                                                <div class="space-y-1">
371                                                    <div class="flex items-center justify-between">
372                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #4</span>
373                                                        <span class="text-[8px] font-bold text-slate-500">Spot #4</span>
374                                                    </div>
375                                                    
376                                                    <button onclick="openLightbox(15, 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>
377                                                </div>
378                                            </div>
379                                        </div>
380                                        
381                                        <div style="left: 38%; top: 62%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
382                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
383                                            <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">
384                                                5
385                                            </button>
386                                            <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">
387                                                <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>
388                                                <div class="space-y-1">
389                                                    <div class="flex items-center justify-between">
390                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #5</span>
391                                                        <span class="text-[8px] font-bold text-slate-500">Spot #5</span>
392                                                    </div>
393                                                    
394                                                    <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>
395                                                </div>
396                                            </div>
397                                        </div>
398                                        
399                                        <div style="left: 27%; top: 69%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
400                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
401                                            <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">
402                                                6
403                                            </button>
404                                            <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">
405                                                <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>
406                                                <div class="space-y-1">
407                                                    <div class="flex items-center justify-between">
408                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #6</span>
409                                                        <span class="text-[8px] font-bold text-slate-500">Spot #6</span>
410                                                    </div>
411                                                    
412                                                    <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>
413                                                </div>
414                                            </div>
415                                        </div>
416                                        
417                                        <div style="left: 28%; top: 46%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
418                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
419                                            <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">
420                                                7
421                                            </button>
422                                            <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">
423                                                <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>
424                                                <div class="space-y-1">
425                                                    <div class="flex items-center justify-between">
426                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #7</span>
427                                                        <span class="text-[8px] font-bold text-slate-500">Spot #7</span>
428                                                    </div>
429                                                    
430                                                    <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>
431                                                </div>
432                                            </div>
433                                        </div>
434                                        
435                                        <div style="left: 10%; top: 39%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
436                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
437                                            <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">
438                                                8
439                                            </button>
440                                            <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">
441                                                <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>
442                                                <div class="space-y-1">
443                                                    <div class="flex items-center justify-between">
444                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #8</span>
445                                                        <span class="text-[8px] font-bold text-slate-500">Spot #8</span>
446                                                    </div>
447                                                    
448                                                    <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>
449                                                </div>
450                                            </div>
451                                        </div>
452                                        
453                                        <div style="left: 47%; top: 54%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
454                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
455                                            <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">
456                                                9
457                                            </button>
458                                            <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">
459                                                <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>
460                                                <div class="space-y-1">
461                                                    <div class="flex items-center justify-between">
462                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #9</span>
463                                                        <span class="text-[8px] font-bold text-slate-500">Spot #9</span>
464                                                    </div>
465                                                    
466                                                    <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>
467                                                </div>
468                                            </div>
469                                        </div>
470                                        
471                                        <div style="left: 46%; top: 40%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
472                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
473                                            <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">
474                                                10
475                                            </button>
476                                            <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">
477                                                <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>
478                                                <div class="space-y-1">
479                                                    <div class="flex items-center justify-between">
480                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #10</span>
481                                                        <span class="text-[8px] font-bold text-slate-500">Spot #10</span>
482                                                    </div>
483                                                    
484                                                    <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>
485                                                </div>
486                                            </div>
487                                        </div>
488                                        
489                                        <div style="left: 20%; top: 73%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
490                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
491                                            <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">
492                                                11
493                                            </button>
494                                            <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">
495                                                <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>
496                                                <div class="space-y-1">
497                                                    <div class="flex items-center justify-between">
498                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #11</span>
499                                                        <span class="text-[8px] font-bold text-slate-500">Spot #11</span>
500                                                    </div>
501                                                    
502                                                    <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>
503                                                </div>
504                                            </div>
505                                        </div>
506                                        
507                                        <div style="left: 57%; top: 33%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
508                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
509                                            <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">
510                                                12
511                                            </button>
512                                            <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">
513                                                <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>
514                                                <div class="space-y-1">
515                                                    <div class="flex items-center justify-between">
516                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #12</span>
517                                                        <span class="text-[8px] font-bold text-slate-500">Spot #12</span>
518                                                    </div>
519                                                    
520                                                    <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>
521                                                </div>
522                                            </div>
523                                        </div>
524                                        
525                                        <div style="left: 64%; top: 39%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
526                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
527                                            <button onclick="openLightbox(34, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
528                                                13
529                                            </button>
530                                            <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">
531                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_34.jpg" class="w-full h-full object-cover"></div>
532                                                <div class="space-y-1">
533                                                    <div class="flex items-center justify-between">
534                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #13</span>
535                                                        <span class="text-[8px] font-bold text-slate-500">Spot #13</span>
536                                                    </div>
537                                                    
538                                                    <button onclick="openLightbox(34, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
539                                                </div>
540                                            </div>
541                                        </div>
542                                        
543                                        <div style="left: 63%; top: 53%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
544                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
545                                            <button onclick="openLightbox(36, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
546                                                14
547                                            </button>
548                                            <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">
549                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_36.jpg" class="w-full h-full object-cover"></div>
550                                                <div class="space-y-1">
551                                                    <div class="flex items-center justify-between">
552                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #14</span>
553                                                        <span class="text-[8px] font-bold text-slate-500">Spot #14</span>
554                                                    </div>
555                                                    
556                                                    <button onclick="openLightbox(36, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
557                                                </div>
558                                            </div>
559                                        </div>
560                                        
561                                        <div style="left: 71%; top: 40%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
562                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
563                                            <button onclick="openLightbox(37, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
564                                                15
565                                            </button>
566                                            <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">
567                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_37.jpg" class="w-full h-full object-cover"></div>
568                                                <div class="space-y-1">
569                                                    <div class="flex items-center justify-between">
570                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #15</span>
571                                                        <span class="text-[8px] font-bold text-slate-500">Spot #15</span>
572                                                    </div>
573                                                    
574                                                    <button onclick="openLightbox(37, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
575                                                </div>
576                                            </div>
577                                        </div>
578                                        
579                                        <div style="left: 68%; top: 49%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
580                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
581                                            <button onclick="openLightbox(38, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
582                                                16
583                                            </button>
584                                            <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">
585                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_38.jpg" class="w-full h-full object-cover"></div>
586                                                <div class="space-y-1">
587                                                    <div class="flex items-center justify-between">
588                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #16</span>
589                                                        <span class="text-[8px] font-bold text-slate-500">Spot #16</span>
590                                                    </div>
591                                                    
592                                                    <button onclick="openLightbox(38, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
593                                                </div>
594                                            </div>
595                                        </div>
596                                        
597                                </div>
598                            </div>
599                        </div>
600                    </div>
601                    
602                    <div class="p-6 glass-panel rounded-3xl border border-white/10 space-y-4">
603                        <h4 class="text-xs font-black text-slate-400 uppercase tracking-widest">
604                            Hotspot Directory (16 Pins)
605                        </h4>
606                        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
607                            
608                                <div onclick="openLightbox(1, true, false)" class="p-3 rounded-2xl bg-slate-900/60 border border-white/5 hover:border-orange-500/50 hover:bg-slate-900 transition-all cursor-pointer flex gap-3 items-center group">
609                                    <div class="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center shrink-0 text-orange-400 font-black text-xs group-hover:scale-105 transition-transform">
610                                        #1
611                                    </div>
612                                    <div class="w-12 h-12 rounded-lg overflow-hidden shrink-0 border border-white/10"><img src="images/gallery/img_1.jpg" class="w-full h-full object-cover"></div>
613                                    <div class="min-w-0 flex-1">
614                                        <h5 class="text-xs font-black text-white uppercase tracking-tight truncate group-hover:text-orange-400 transition-colors">
615                                            Hotspot Pin #1
616                                        </h5>
617                                        
618                                    </div>
619                                </div>
620                                
621                                <div onclick="openLightbox(9, true, false)" class="p-3 rounded-2xl bg-slate-900/60 border border-white/5 hover:border-orange-500/50 hover:bg-slate-900 transition-all cursor-pointer flex gap-3 items-center group">
622                                    <div class="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center shrink-0 text-orange-400 font-black text-xs group-hover:scale-105 transition-transform">
623                                        #2
624                                    </div>
625                                    <div class="w-12 h-12 rounded-lg overflow-hidden shrink-0 border border-white/10"><img src="images/gallery/img_9.jpg" class="w-full h-full object-cover"></div>
626                                    <div class="min-w-0 flex-1">
627                                        <h5 class="text-xs font-black text-white uppercase tracking-tight truncate group-hover:text-orange-400 transition-colors">
628                                            Hotspot Pin #2
629                                        </h5>
630                                        
631                                    </div>
632                                </div>
633                                
634                                <div onclick="openLightbox(11, true, false)" class="p-3 rounded-2xl bg-slate-900/60 border border-white/5 hover:border-orange-500/50 hover:bg-slate-900 transition-all cursor-pointer flex gap-3 items-center group">
635                                    <div class="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center shrink-0 text-orange-400 font-black text-xs group-hover:scale-105 transition-transform">
636                                        #3
637                                    </div>
638                                    <div class="w-12 h-12 rounded-lg overflow-hidden shrink-0 border border-white/10"><img src="images/gallery/img_11.jpg" class="w-full h-full object-cover"></div>
639                                    <div class="min-w-0 flex-1">
640                                        <h5 class="text-xs font-black text-white uppercase tracking-tight truncate group-hover:text-orange-400 transition-colors">
641                                            Hotspot Pin #3
642                                        </h5>
643                                        
644                                    </div>
645                                </div>
646                                
647                                <div onclick="openLightbox(15, true, false)" class="p-3 rounded-2xl bg-slate-900/60 border border-white/5 hover:border-orange-500/50 hover:bg-slate-900 transition-all cursor-pointer flex gap-3 items-center group">
648                                    <div class="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center shrink-0 text-orange-400 font-black text-xs group-hover:scale-105 transition-transform">
649                                        #4
650                                    </div>
651                                    <div class="w-12 h-12 rounded-lg overflow-hidden shrink-0 border border-white/10"><img src="images/gallery/img_15.jpg" class="w-full h-full object-cover"></div>
652                                    <div class="min-w-0 flex-1">
653                                        <h5 class="text-xs font-black text-white uppercase tracking-tight truncate group-hover:text-orange-400 transition-colors">
654                                            Hotspot Pin #4
655                                        </h5>
656                                        
657                                    </div>
658                                </div>
659                                
660                                <div onclick="openLightbox(18, true, false)" class="p-3 rounded-2xl bg-slate-900/60 border border-white/5 hover:border-orange-500/50 hover:bg-slate-900 transition-all cursor-pointer flex gap-3 items-center group">
661                                    <div class="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center shrink-0 text-orange-400 font-black text-xs group-hover:scale-105 transition-transform">
662                                        #5
663                                    </div>
664                                    <div class="w-12 h-12 rounded-lg overflow-hidden shrink-0 border border-white/10"><img src="images/gallery/img_18.jpg" class="w-full h-full object-cover"></div>
665                                    <div class="min-w-0 flex-1">
666                                        <h5 class="text-xs font-black text-white uppercase tracking-tight truncate group-hover:text-orange-400 transition-colors">
667                                            Hotspot Pin #5
668                                        </h5>
669                                        
670                                    </div>
671                                </div>
672                                
673                                <div onclick="openLightbox(19, true, false)" class="p-3 rounded-2xl bg-slate-900/60 border border-white/5 hover:border-orange-500/50 hover:bg-slate-900 transition-all cursor-pointer flex gap-3 items-center group">
674                                    <div class="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center shrink-0 text-orange-400 font-black text-xs group-hover:scale-105 transition-transform">
675                                        #6
676                                    </div>
677                                    <div class="w-12 h-12 rounded-lg overflow-hidden shrink-0 border border-white/10"><img src="images/gallery/img_19.jpg" class="w-full h-full object-cover"></div>
678                                    <div class="min-w-0 flex-1">
679                                        <h5 class="text-xs font-black text-white uppercase tracking-tight truncate group-hover:text-orange-400 transition-colors">
680                                            Hotspot Pin #6
681                                        </h5>
682                                        
683                                    </div>
684                                </div>
685                                
686                                <div onclick="openLightbox(20, true, false)" class="p-3 rounded-2xl bg-slate-900/60 border border-white/5 hover:border-orange-500/50 hover:bg-slate-900 transition-all cursor-pointer flex gap-3 items-center group">
687                                    <div class="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center shrink-0 text-orange-400 font-black text-xs group-hover:scale-105 transition-transform">
688                                        #7
689                                    </div>
690                                    <div class="w-12 h-12 rounded-lg overflow-hidden shrink-0 border border-white/10"><img src="images/gallery/img_20.jpg" class="w-full h-full object-cover"></div>
691                                    <div class="min-w-0 flex-1">
692                                        <h5 class="text-xs font-black text-white uppercase tracking-tight truncate group-hover:text-orange-400 transition-colors">
693                                            Hotspot Pin #7
694                                        </h5>
695                                        
696                                    </div>
697                                </div>
698                                
699                                <div onclick="openLightbox(25, true, false)" class="p-3 rounded-2xl bg-slate-900/60 border border-white/5 hover:border-orange-500/50 hover:bg-slate-900 transition-all cursor-pointer flex gap-3 items-center group">
700                                    <div class="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center shrink-0 text-orange-400 font-black text-xs group-hover:scale-105 transition-transform">
701                                        #8
702                                    </div>
703                                    <div class="w-12 h-12 rounded-lg overflow-hidden shrink-0 border border-white/10"><img src="images/gallery/img_25.jpg" class="w-full h-full object-cover"></div>
704                                    <div class="min-w-0 flex-1">
705                                        <h5 class="text-xs font-black text-white uppercase tracking-tight truncate group-hover:text-orange-400 transition-colors">
706                                            Hotspot Pin #8
707                                        </h5>
708                                        
709                                    </div>
710                                </div>
711                                
712                                <div onclick="openLightbox(31, true, false)" class="p-3 rounded-2xl bg-slate-900/60 border border-white/5 hover:border-orange-500/50 hover:bg-slate-900 transition-all cursor-pointer flex gap-3 items-center group">
713                                    <div class="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center shrink-0 text-orange-400 font-black text-xs group-hover:scale-105 transition-transform">
714                                        #9
715                                    </div>
716                                    <div class="w-12 h-12 rounded-lg overflow-hidden shrink-0 border border-white/10"><img src="images/gallery/img_31.jpg" class="w-full h-full object-cover"></div>
717                                    <div class="min-w-0 flex-1">
718                                        <h5 class="text-xs font-black text-white uppercase tracking-tight truncate group-hover:text-orange-400 transition-colors">
719                                            Hotspot Pin #9
720                                        </h5>
721                                        
722                                    </div>
723                                </div>
724                                
725                                <div onclick="openLightbox(30, true, false)" class="p-3 rounded-2xl bg-slate-900/60 border border-white/5 hover:border-orange-500/50 hover:bg-slate-900 transition-all cursor-pointer flex gap-3 items-center group">
726                                    <div class="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center shrink-0 text-orange-400 font-black text-xs group-hover:scale-105 transition-transform">
727                                        #10
728                                    </div>
729                                    <div class="w-12 h-12 rounded-lg overflow-hidden shrink-0 border border-white/10"><img src="images/gallery/img_30.jpg" class="w-full h-full object-cover"></div>
730                                    <div class="min-w-0 flex-1">
731                                        <h5 class="text-xs font-black text-white uppercase tracking-tight truncate group-hover:text-orange-400 transition-colors">
732                                            Hotspot Pin #10
733                                        </h5>
734                                        
735                                    </div>
736                                </div>
737                                
738                                <div onclick="openLightbox(32, true, false)" class="p-3 rounded-2xl bg-slate-900/6
7380 border border-white/5 hover:border-orange-500/50 hover:bg-slate-900 transition-all cursor-pointer flex gap-3 items-center group">
739                                    <div class="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center shrink-0 text-orange-400 font-black text-xs group-hover:scale-105 transition-transform">
740                                        #11
741                                    </div>
742                                    <div class="w-12 h-12 rounded-lg overflow-hidden shrink-0 border border-white/10"><img src="images/gallery/img_32.jpg" class="w-full h-full object-cover"></div>
743                                    <div class="min-w-0 flex-1">
744                                        <h5 class="text-xs font-black text-white uppercase tracking-tight truncate group-hover:text-orange-400 transition-colors">
745                                            Hotspot Pin #11
746                                        </h5>
747                                        
748                                    </div>
749                                </div>
750                                
751                                <div onclick="openLightbox(33, true, false)" class="p-3 rounded-2xl bg-slate-900/60 border border-white/5 hover:border-orange-500/50 hover:bg-slate-900 transition-all cursor-pointer flex gap-3 items-center group">
752                                    <div class="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center shrink-0 text-orange-400 font-black text-xs group-hover:scale-105 transition-transform">
753                                        #12
754                                    </div>
755                                    <div class="w-12 h-12 rounded-lg overflow-hidden shrink-0 border border-white/10"><img src="images/gallery/img_33.jpg" class="w-full h-full object-cover"></div>
756                                    <div class="min-w-0 flex-1">
757                                        <h5 class="text-xs font-black text-white uppercase tracking-tight truncate group-hover:text-orange-400 transition-colors">
758                                            Hotspot Pin #12
759                                        </h5>
760                                        
761                                    </div>
762                                </div>
763                                
764                                <div onclick="openLightbox(34, true, false)" class="p-3 rounded-2xl bg-slate-900/60 border border-white/5 hover:border-orange-500/50 hover:bg-slate-900 transition-all cursor-pointer flex gap-3 items-center group">
765                                    <div class="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center shrink-0 text-orange-400 font-black text-xs group-hover:scale-105 transition-transform">
766                                        #13
767                                    </div>
768                                    <div class="w-12 h-12 rounded-lg overflow-hidden shrink-0 border border-white/10"><img src="images/gallery/img_34.jpg" class="w-full h-full object-cover"></div>
769                                    <div class="min-w-0 flex-1">
770                                        <h5 class="text-xs font-black text-white uppercase tracking-tight truncate group-hover:text-orange-400 transition-colors">
771                                            Hotspot Pin #13
772                                        </h5>
773                                        
774                                    </div>
775                                </div>
776                                
777                                <div onclick="openLightbox(36, true, false)" class="p-3 rounded-2xl bg-slate-900/60 border border-white/5 hover:border-orange-500/50 hover:bg-slate-900 transition-all cursor-pointer flex gap-3 items-center group">
778                                    <div class="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center shrink-0 text-orange-400 font-black text-xs group-hover:scale-105 transition-transform">
779                                        #14
780                                    </div>
781                                    <div class="w-12 h-12 rounded-lg overflow-hidden shrink-0 border border-white/10"><img src="images/gallery/img_36.jpg" class="w-full h-full object-cover"></div>
782                                    <div class="min-w-0 flex-1">
783                                        <h5 class="text-xs font-black text-white uppercase tracking-tight truncate group-hover:text-orange-400 transition-colors">
784                                            Hotspot Pin #14
785                                        </h5>
786                                        
787                                    </div>
788                                </div>
789                                
790                                <div onclick="openLightbox(37, true, false)" class="p-3 rounded-2xl bg-slate-900/60 border border-white/5 hover:border-orange-500/50 hover:bg-slate-900 transition-all cursor-pointer flex gap-3 items-center group">
791                                    <div class="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center shrink-0 text-orange-400 font-black text-xs group-hover:scale-105 transition-transform">
792                                        #15
793                                    </div>
794                                    <div class="w-12 h-12 rounded-lg overflow-hidden shrink-0 border border-white/10"><img src="images/gallery/img_37.jpg" class="w-full h-full object-cover"></div>
795                                    <div class="min-w-0 flex-1">
796                                        <h5 class="text-xs font-black text-white uppercase tracking-tight truncate group-hover:text-orange-400 transition-colors">
797                                            Hotspot Pin #15
798                                        </h5>
799                                        
800                                    </div>
801                                </div>
802                                
803                                <div onclick="openLightbox(38, true, false)" class="p-3 rounded-2xl bg-slate-900/60 border border-white/5 hover:border-orange-500/50 hover:bg-slate-900 transition-all cursor-pointer flex gap-3 items-center group">
804                                    <div class="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center shrink-0 text-orange-400 font-black text-xs group-hover:scale-105 transition-transform">
805                                        #16
806                                    </div>
807                                    <div class="w-12 h-12 rounded-lg overflow-hidden shrink-0 border border-white/10"><img src="images/gallery/img_38.jpg" class="w-full h-full object-cover"></div>
808                                    <div class="min-w-0 flex-1">
809                                        <h5 class="text-xs font-black text-white uppercase tracking-tight truncate group-hover:text-orange-400 transition-colors">
810                                            Hotspot Pin #16
811                                        </h5>
812                                        
813                                    </div>
814                                </div>
815                                
816                        </div>
817                    </div>
818                    
819                    
820                </div>
821                
822                <div id="interactive" class="tab-content space-y-12">
823                    <div class="w-full h-[65vh] sm:h-[75vh] min-h-[420px] rounded-[2rem] 
823sm:rounded-[2.5rem] overflow-hidden border border-white/10 bg-black shadow-2xl"><iframe src="https://kuula.co/share/collection/7TCDK?logo=-1&info=0&fs=1&vr=1&gyro=0&initload=0&autorotate=0.36&autop=10&autopalt=1&thumbs=1&alpha=0.60" width="100%" height="100%" frameBorder="0" allowFullScreen></iframe></div>
824                    
825                </div>
826
827                <div id="streetview" class="tab-content space-y-8">
828                    <div class="space-y-4">
829                        <div class="flex items-center justify-between gap-4">
830                            <div class="space-y-1">
831                                <h3 class="text-xl font-black text-white uppercase tracking-tighter">Street-Level Panorama</h3>
832                                <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Interactive 360 Exterior Context</p>
833                            </div>
834                        </div>
835                        <div class="w-full h-[60vh] sm:h-[70vh] min-h-[380px] md:aspect-video rounded-[2rem] sm:rounded-[2.5rem] overflow-hidden border border-white/10 bg-slate-900 shadow-2xl relative">
836                            <iframe id="streetview-iframe" width="100%" height="100%" frameBorder="0" src="https://www.google.com/maps/embed/v1/streetview?key=AIzaSyAz-4dCrl-lCwQbFqwvqIb73KltSkSfCkc&location=23165%2088%20Ave%2C%20Langley&heading=210&pitch=10" allowFullScreen loading="lazy"></iframe>
837                            <div class="absolute top-4 left-4 sm:top-6 sm:left-6 px-3 py-1.5 sm:px-4 sm:py-2 bg-black/80 backdrop-blur-md rounded-xl border border-white/10 flex items-center gap-3">
838                               <div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
839                               <span class="text-[9px] sm:text-[10px] font-black text-white uppercase tracking-widest">360 Immersive View</span>
840                            </div>
841                        </div>
842                    </div>
843
844                    <div class="space-y-4 pt-4 border-t border-white/5">
845                        <div class="flex items-center justify-between gap-4">
846                            <div class="space-y-1">
847                                <h3 class="text-xl font-black text-white uppercase tracking-tighter">Location Map</h3>
848                                <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Neighborhood Context & Direct Directions</p>
849                            </div>
850                            <div>
851                                <button onclick="openInMaps()" class="px-4 py-2 bg-white/5 border border-white/10 text-white rounded-xl hover:bg-white/10 font-black uppercase tracking-widest text-[9px] transition-colors">
852                                    Open in Google Maps
853                                </button>
854                            </div>
855                        </div>
856                        <div class="w-full h-[50vh] sm:h-[60vh] min-h-[320px] md:aspect-video rounded-[2rem] sm:rounded-[2.5rem] overflow-hidden border border-white/10 bg-slate-900 shadow-2xl relative">
857                            <iframe width="100%" height="100%" frameBorder="0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAz-4dCrl-lCwQbFqwvqIb73KltSkSfCkc&q=23165%2088%20Ave%2C%20Langley" allowFullScreen loading="lazy"></iframe>
858                        </div>
859                    </div>
860                </div>
861                
862                
863                
864
865            </div>
866
867            <div class="lg:col-span-4">
868                <div class="sticky top-10 space-y-6">
869                    <div class="p-8 md:p-10 glass-panel rounded-[3rem] border border-white/10 space-y-8 text-center">
870                        <div class="flex items-center justify-center gap-3">
871                            <div class="w-28 h-28 rounded-full border-4 p-1 overflow-hidden shadow-2xl shrink-0" style="border-color: var(--brand)">
872                                <img src="images/headshot.jpg" class="w-full h-full object-cover rounded-full">
873                            </div>
874                        </div>
875                        <div class="space-y-4">
876                            <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">Listing Associate</span>
877                            
878                            <div class="space-y-1">
879                                <h3 class="text-xl font-black text-white uppercase tracking-tighter">Mark Sawatzky PREC</h3>
880                                <p class="font-bold text-[10px] uppercase tracking-widest" style="color: var(--brand)">2% Realty</p>
881                                <div class="flex flex-col gap-0.5 pt-1 text-[10px] font-bold uppercase text-slate-400">
882                                   <div class="text-white">604-866-8670</div>
883                                   <div class="truncate">[email protected]</div>
884                                </div>
885                            </div>
886
887                            <a href="https://www.mark2percentvalley.ca" target="_blank" rel="noopener noreferrer" class="block truncate pt-2 underline underline-offset-4 text-[10px] font-bold uppercase" style="color: var(--brand)">www.mark2percentvalley.ca</a>
888                        </div>
889                        <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>
890                    </div>
891
892                    
893
894                    <div class="flex justify-center">
895                        <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">
896                    </div>
897                </div>
898            </div>
899        </div>
900    </div>
901
902    <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">
903        <div class="max-w-md w-full glass-panel p-8 md:p-10 rounded-[2.5rem] border border-white/10 shadow-2xl relative">
904            <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>
905            <div id="form-container" class="space-y-8">
906                <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: 23165 88 Ave</p></div>
907                <form class='space-y-4' method='POST' name='property-inquiry'>
908                    <input type="hidden" name="form-name" value="property-inquiry" /><input type="hidden" name="property_address" value="23165 88 Ave" />
909                    <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>
910                    <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>
911                    <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>
912                    <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>
913                </form>
914            </div>
915        </div>
916    </div>
917
918    
918<script>
919        const PROPERTY_LOC = "23165 88 Ave, Langley";
920        const PROPERTY_CITY = "Langley";
921        const BRAND_COLOR = "#f97316";
922        const GALLERY_IMAGES = ["images/gallery/img_0.jpg","images/gallery/img_1.jpg","images/gallery/img_2.jpg","images/gallery/img_3.jpg","images/gallery/img_4.jpg","images/gallery/img_5.jpg","images/gallery/img_6.jpg","images/gallery/img_7.jpg","images/gallery/img_8.jpg","images/gallery/img_9.jpg","images/gallery/img_10.jpg","images/gallery/img_11.jpg","images/gallery/img_12.jpg","images/gallery/img_13.jpg","images/gallery/img_14.jpg","images/gallery/img_15.jpg","images/gallery/img_16.jpg","images/gallery/img_17.jpg","images/gallery/img_18.jpg","images/gallery/img_19.jpg","images/gallery/img_20.jpg","images/gallery/img_21.jpg","images/gallery/img_22.jpg","images/gallery/img_23.jpg","images/gallery/img_24.jpg","images/gallery/img_25.jpg","images/gallery/img_26.jpg","images/gallery/img_27.jpg","images/gallery/img_28.jpg","images/gallery/img_29.jpg","images/gallery/img_30.jpg","images/gallery/img_31.jpg","images/gallery/img_32.jpg","images/gallery/img_33.jpg","images/gallery/img_34.jpg","images/gallery/img_35.jpg","images/gallery/img_36.jpg","images/gallery/img_37.jpg","images/gallery/img_38.jpg","images/gallery/img_39.jpg","images/gallery/img_40.jpg","images/gallery/img_41.jpg","images/gallery/img_42.jpg","images/gallery/img_43.jpg","images/gallery/img_44.jpg","images/gallery/img_45.jpg","
922images/gallery/img_46.jpg","images/gallery/img_47.jpg"];
923        const EMBEDDED_PANOS = {};
924        let activeLightboxIdx = 0;
925        
926        function switchTab(tabId) {
927            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
928            document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
929            const target = document.getElementById(tabId);
930            if (target) target.classList.add('active');
931            const btn = document.getElementById('btn-' + tabId);
932            if (btn) btn.classList.add('active');
933            if(tabId === 'streetview' || tabId === 'drone360') window.dispatchEvent(new Event('resize')); 
934        }
935        
936        function toggleModal(show) { document.getElementById('contact-modal').style.display = show ? 'flex' : 'none'; }
937
938        let currentExportZoom = 1;
939        function setExportFloorPlanZoom(level) {
940            currentExportZoom = Math.min(3, Math.max(1, level));
941            const canvas = document.getElementById('export-floorplan-canvas');
942            if (canvas) {
943                canvas.style.transform = 'scale(' + currentExportZoom + ')';
944                canvas.style.marginRight = currentExportZoom > 1 ? ((currentExportZoom - 1) * 100) + '%' : '0';
945                canvas.style.marginBottom = currentExportZoom > 1 ? ((currentExportZoom - 1) * 100) + '%' : '0';
946            }
947            const pins = document.querySelectorAll('.export-hotspot-pin');
948            const invScale = 1 / currentExportZoom;
949            pins.forEach(function(pin) {
950                pin.style.transform = 'translate(-50%, -50%) scale(' + invScale + ')';
951            });
952        }
953        function zoomExportFloorPlan(delta) {
954            setExportFloorPlanZoom(+(currentExportZoom + delta).toFixed(2));
955        }
956
957        function openInMaps() {
958            const url = "https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent(PROPERTY_LOC);
959            window.open(url, '_blank');
960        }
961
962        let pannellumViewer = null;
963        let isHotspotLightbox = false;
964        let hotspotIs360 = false;
965
966        function checkIs360(src, cb) {
967            if (!src) return cb(false);
968            if (isHotspotLightbox && hotspotIs360) {
969                return cb(true);
970            }
971            cb(false);
972        }
973
974        function openLightbox(index, isHotspot, is360) {
975            isHotspotLightbox = !!isHotspot;
976            hotspotIs360 = !!is360;
977            activeLightboxIdx = index;
978            updateLightbox();
979            document.getElementById('lightbox').classList.add('active');
980            document.body.style.overflow = 'hidden';
981        }
982        
983        function closeLightbox() {
984            if (pannellumViewer) {
985                try { pannellumViewer.destroy(); } catch(e){}
986                pannellumViewer = null;
987            }
988            document.getElementById('lightbox').classList.remove('active');
989            document.body.style.overflow = 'auto';
990        }
991
992        function changeLightbox(delta) {
993            if (isHotspotLightbox) return;
994            activeLightboxIdx = (activeLightboxIdx + delta + GALLERY_IMAGES.length) % GALLERY_IMAGES.length;
995            updateLightbox();
996        }
997
998        function updateLightbox() {
999            const relativeSrc = GALLERY_IMAGES[activeLightboxIdx];
1000            const dataSrc = (EMBEDDED_PANOS && EMBEDDED_PANOS[activeLightboxIdx]) ? EMBEDDED_PANOS[activeLightboxIdx] : relativeSrc;
1001            const imgEl = document.getElementById('lightbox-img');
1002            const panoEl = document.getElementById('lightbox-pano');
1003            const badgeEl = document.getElementById('lightbox-badge');
1004            const counter = document.getElementById('lightbox-counter');
1005            const prevBtn = document.getElementById('lightbox-prev');
1006            const nextBtn = document.getElementById('lightbox-next');
1007
1008            if (prevBtn) prevBtn.style.display = isHotspotLightbox ? 'none' : 'block';
1009            if (nextBtn) nextBtn.style.display = isHotspotLightbox ? 'none' : 'block';
1010            if (counter) counter.innerText = isHotspotLightbox ? 'Hotspot Photo' : ((activeLightboxIdx + 1) + ' / ' + GALLERY_IMAGES.length);
1011
1012            if (pannellumViewer) {
1013                try { pannellumViewer.destroy(); } catch(e){}
1014                pannellumViewer = null;
1015            }
1016            if (panoEl) panoEl.innerHTML = '';
1017
1018            checkIs360(dataSrc, function(is360) {
1019                if (is360) {
1020                    imgEl.style.display = 'none';
1021                    panoEl.style.display = 'block';
1022                    badgeEl.style.display = 'flex';
1023
1024                    function initPannellum() {
1025                        if (window.pannellum) {
1026                            panoEl.innerHTML = '';
1027                            function createViewer(panoPath) {
1028                                try {
1029                                    pannellumViewer = pannellum.viewer('lightbox-pano', {
1030                                        type: 'equirectangular',
1031                                        panorama: panoPath,
1032                                        autoLoad: true,
1033                                        showZoomCtrl: true,
1034                                        compass: false,
1035                                        hfov: 100,
1036                                        minHfov: 30,
1037                                        maxHfov: 120,
1038                                        haov: 360,
1039                                        vaov: 180,
1040                                        vOffset: 0,
1041                                        friction: 0.15
1042                                    });
1043                                    setTimeout(function() {
1044                                        if (pannellumViewer) try { pannellumViewer.resize(); } catch(err){}
1045                                    }, 200);
1046                                } catch (e) {
1047                                    console.error("Pannellum init error:", e);
1048                                    if (panoPath !== relativeSrc) {
1049                                        createViewer(relativeSrc);
1050                                    }
1051                                }
1052                            }
1053                            createViewer(dataSrc);
1054                        } else {
1055                            setTimeout(initPannellum, 100);
1056                        }
1057                    }
1058                    initPannellum();
1059                } else {
1060                    panoEl.style.display = 'none';
1061                    badgeEl.style.display = 'none';
1062                    imgEl.style.display = 'block';
1063                    imgEl.src = relativeSrc;
1064                }
1065            });
1066        }
1067
1068        document.addEventListener('keydown', e => {
1069            if (!document.getElementById('lightbox').classList.contains('active')) return;
1070            if (e.key === 'Escape') closeLightbox();
1071            if (!isHotspotLightbox) {
1072                if (e.key === 'ArrowLeft') changeLightbox(-1);
1073                if (e.key === 'ArrowRight') changeLightbox(1);
1074            }
1075        });
1076
1077        // Geocode the address for Street View in exported page
1078        const streetviewAddress = "23165 88 Ave, Langley";
1079        const mapsApiKey = "AIzaSyAz-4dCrl-lCwQbFqwvqIb73KltSkSfCkc";
1080        const iframe = document.getElementById('streetview-iframe');
1081
1082        if (streetviewAddress && mapsApiKey && iframe) {
1083            // Attempt 1: Nominatim (bypasses CORS in local context and key restrictions)
1084            fetch("https://nominatim.openstreetmap.org/search?q=" + encodeURIComponent(streetviewAddress) + "&format=json&limit=1", {
1085                headers: {
1086                    'Accept': 'application/json'
1087                }
1088            })
1089                .then(res => res.json())
1090                .then(data => {
1091                    if (data && data.length > 0 && data[0].lat && data[0].lon) {
1092                        iframe.src = "https://www.google.com/maps/embed/v1/streetview?key=" + mapsApiKey + "&location=" + data[0].lat + "," + data[0].lon + "&heading=210&pitch=10";
1093                    } else {
1094                        throw new Error('Nominatim returned no results');
1095                    }
1096                })
1097                .catch(() => {
1098                    // Attempt 2: Direct Google Geocoding (fallback)
1099                    fetch("https://maps.googleapis.com/maps/api/geocode/json?address=" + encodeURIComponent(streetviewAddress) + "&key=" + mapsApiKey)
1100                        .then(res => res.json())
1101                        .then(data => {
1102                            if (data.status === 'OK' && data.results && data.results[0] && data.results[0].geometry) {
1103                                const loc = data.results[0].geometry.location;
1104                                iframe.src = "https://www.google.com/maps/embed/v1/streetview?key=" + mapsApiKey + "&location=" + loc.lat + "," + loc.lng + "&heading=210&pitch=10";
1105                            } else {
1106                                iframe.src = "https://www.google.com/maps/embed/v1/place?key=" + mapsApiKey + "&q=" + encodeURIComponent(streetviewAddress);
1107                            }
1108                        })
1109                        .catch(() => {
1110                            iframe.src = "https://www.google.com/maps/embed/v1/place?key=" + mapsApiKey + "&q=" + encodeURIComponent(streetviewAddress);
1111                        });
1112                });
1113        }
1114    </script>
1114
1115</body>
1116</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.