PageSourceSearch

https://2488-latimer-ave-coquitlam.netlify.app/

html 2488-latimer-ave-coquitlam.netlify.app collected 2026-10-03 10:23:16 UTC 61,737 bytes, 598 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>2488 Latimer Avenue </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    <style>
10        :root { --brand: #eb1d2c; }
11        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #020617; color: #f8fafc; overflow-x: hidden; }
12        .glass-panel { background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); }
13        .tab-content { display: none; }
14        .tab-content.active { display: block; animation: fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
15        @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
16        @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%); } }
17        .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; }
18        .tab-btn { color: #64748b; border-bottom: 2px solid transparent; transition: all 0.3s; cursor: pointer; }
19        .tab-btn.active { color: var(--brand); border-color: var(--brand); }
20        .mobile-gallery-scrollbar::-webkit-scrollbar { height: 6px; display: block; }
21        .mobile-gallery-scrollbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; }
22        .mobile-gallery-scrollbar::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 10px; }
23        .scrollbar-hide::-webkit-scrollbar { display: none; }
24        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
25        #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: 2rem; }
26        #lightbox.active { display: flex; animation: fade-in-up 0.3s ease-out; }
27        .lightbox-control { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: white; padding: 1rem; border-radius: 1rem; transition: all 0.2s; cursor: pointer; }
28        .lightbox-control:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--brand); }
29    </style>
30</head>
31<body>
32    <div id="lightbox" onclick="if(event.target === this) closeLightbox()">
33        <button onclick="closeLightbox()" class="absolute top-8 right-8 lightbox-control"><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>
34        <button onclick="changeLightbox(-1)" class="absolute left-8 top-1/2 -translate-y-1/2 lightbox-control"><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="M15.75 19.5L8.25 12l7.5-7.5" /></svg></button>
35        <button onclick="changeLightbox(1)" class="absolute right-8 top-1/2 -translate-y-1/2 lightbox-control"><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="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg></button>
36        <img id="lightbox-img" src="" class="max-w-full max-h-[85vh] object-contain shadow-2xl rounded-2xl border border-white/5">
37        <div class="mt-6 text-[10px] font-black uppercase tracking-widest text-slate-500" id="lightbox-counter">0 / 0</div>
38    </div>
39
40    <div class="h-[65vh] md:h-[80vh] w-full relative overflow-hidden">
41        <div class="sun-flare-main"></div>
42        <img src="images/gallery/img_0.jpeg" class="w-full h-full object-cover">
43        <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent"></div>
44        <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">
45            <div class="space-y-4">
46                
47                <h1 class="text-[clamp(1.5rem,4vw,4.5rem)] font-black text-white uppercase tracking-tighter leading-[1.1]">2488 Latimer Avenue </h1>
48                <div class="flex items-center gap-6 text-slate-400 font-bold uppercase tracking-[0.2em] text-xs md:text-sm"><span>Coquitlam</span><span class="opacity-20">|</span><span class="text-white">6 BED • 7 BATH • 5141 SQFT</span></div>
49            </div>
50            <div class="p-4 md:p-6 glass-panel rounded-3xl border border-white/10 hidden md:flex"><img src="https://cmyixvfqicuycuhgqjnv.supabase.co/storage/v1/object/public/clients/Jeff%20Ho%20PREC/logo.png" class="h-16 object-contain"></div>
51        </div>
52    </div>
53
54    <div class="max-w-[1440px] mx-auto px-6 md:px-12 pt-12 md:pt-20 pb-32">
55        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 md:gap-20">
56            <div class="lg:col-span-8">
57                <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">
58                    <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>
59                    <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>
60                    <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>
61                    <div onclick="switchTab('neighborhood')" id="btn-neighborhood" class="tab-btn whitespace-nowrap px-2 py-2 text-[11px] font-black uppercase tracking-[0.2em]">Local Guide</div>
62                    <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>
63                </div>
64
65                <div id="gallery" class="tab-content active">
66                    <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">
67                        
68                            <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">
69                                <img src="images/gallery/img_0.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
70                            </div>
71                        
72                            <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">
73                                <img src="images/gallery/img_1.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
74                            </div>
75                        
76                            <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">
77                                <img src="images/gallery/img_2.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
78                            </div>
79                        
80                            <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">
81                                <img src="images/gallery/img_3.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
82                            </div>
83                        
84                            <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">
85                                <img src="images/gallery/img_4.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
86                            </div>
87                        
88                            <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">
89                                <img src="images/gallery/img_5.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
90                            </div>
91                        
92                            <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">
93                                <img src="images/gallery/img_6.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
94                            </div>
95                        
96                            <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">
97                                <img src="images/gallery/img_7.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
98                            </div>
99                        
100                            <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">
101                                <img src="images/gallery/img_8.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
102                            </div>
103                        
104                            <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">
105                                <img src="images/gallery/img_9.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
106                            </div>
107                        
108                            <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">
109                                <img src="images/gallery/img_10.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
110                            </div>
111                        
112                            <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">
113                                <img src="images/gallery/img_11.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
114                            </div>
115                        
116                            <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">
117                                <img src="images/gallery/img_12.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
118                            </div>
119                        
120                            <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">
121                                <img src="images/gallery/img_13.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
122                            </div>
123                        
124                            <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">
125                                <img src="images/gallery/img_14.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
126                            </div>
127                        
128                            <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">
129                                <img src="images/gallery/img_15.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
130                            </div>
131                        
132                            <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">
133                                <img src="images/gallery/img_16.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
134                            </div>
135                        
136                            <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">
137                                <img src="images/gallery/img_17.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
138                            </div>
139                        
140                            <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">
141                                <img src="images/gallery/img_18.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
142                            </div>
143                        
144                            <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">
145                                <img src="images/gallery/img_19.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
146                            </div>
147                        
148                            <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">
149                                <img src="images/gallery/img_20.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
150                            </div>
151                        
152                            <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">
153                                <img src="images/gallery/img_21.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
154                            </div>
155                        
156                            <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">
157                                <img src="images/gallery/img_22.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
158                            </div>
159                        
160                            <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">
161                                <img src="images/gallery/img_23.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
162                            </div>
163                        
164                            <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">
165                                <img src="images/gallery/img_24.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
166                            </div>
167                        
168                            <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">
169                                <img src="images/gallery/img_25.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
170                            </div>
171                        
172                            <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">
173                                <img src="images/gallery/img_26.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
174                            </div>
175                        
176                            <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">
177                                <img src="images/gallery/img_27.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
178                            </div>
179                        
180                            <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">
181                                <img src="images/gallery/img_28.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
182                            </div>
183                        
184                            <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">
185                                <img src="images/gallery/img_29.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
186                            </div>
187                        
188                            <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">
189                                <img src="images/gallery/img_30.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
190                            </div>
191                        
192                            <div onclick="openLightbox(31)" 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">
193                                <img src="images/gallery/img_31.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
194                            </div>
195                        
196                            <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">
197                                <img src="images/gallery/img_32.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
198                     
198       </div>
199                        
200                            <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">
201                                <img src="images/gallery/img_33.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
202                            </div>
203                        
204                            <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">
205                                <img src="images/gallery/img_34.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
206                            </div>
207                        
208                            <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">
209                                <img src="images/gallery/img_35.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
210                            </div>
211                        
212                            <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">
213                                <img src="images/gallery/img_36.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
214                            </div>
215                        
216                            <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">
217                                <img src="images/gallery/img_37.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
218                            </div>
219                        
220                            <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">
221                                <img src="images/gallery/img_38.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
222                            </div>
223                        
224                            <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">
225                                <img src="images/gallery/img_39.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
226                            </div>
227                        
228                            <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">
229                                <img src="images/gallery/img_40.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
230                            </div>
231                        
232                            <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">
233                                <img src="images/gallery/img_41.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
234                            </div>
235                        
236                            <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">
237                                <img src="images/gallery/img_42.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
238                            </div>
239                        
240                            <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">
241                                <img src="images/gallery/img_43.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
242                            </div>
243                        
244                            <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">
245                                <img src="images/gallery/img_44.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
246                            </div>
247                        
248                            <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">
249                                <img src="images/gallery/img_45.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
250                            </div>
251                        
252                            <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">
253                                <img src="images/gallery/img_46.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
254                            </div>
255                        
256                            <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">
257                                <img src="images/gallery/img_47.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
258                            </div>
259                        
260                            <div onclick="openLightbox(48)" 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">
261                                <img src="images/gallery/img_48.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
262                            </div>
263                        
264                            <div onclick="openLightbox(49)" 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">
265                                <img src="images/gallery/img_49.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
266                            </div>
267                        
268                            <div onclick="openLightbox(50)" 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">
269                                <img src="images/gallery/img_50.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
270                            </div>
271                        
272                            <div onclick="openLightbox(51)" 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">
273                                <img src="images/gallery/img_51.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
274                            </div>
275                        
276                            <div onclick="openLightbox(52)" 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">
277                                <img src="images/gallery/img_52.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
278                            </div>
279                        
280                            <div onclick="openLightbox(53)" 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">
281                                <img src="images/gallery/img_53.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
282                            </div>
283                        
284                            <div onclick="openLightbox(54)" 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">
285                                <img src="images/gallery/img_54.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
286                            </div>
287                        
288                            <div onclick="openLightbox(55)" 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">
289                                <img src="images/gallery/img_55.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
290                            </div>
291                        
292                            <div onclick="openLightbox(56)" 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">
293                                <img src="images/gallery/img_56.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
294                            </div>
295                        
296                            <div onclick="openLightbox(57)" 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">
297                                <img src="images/gallery/img_57.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
298                            </div>
299                        
300                            <div onclick="openLightbox(58)" 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">
301                                <img src="images/gallery/img_58.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
302                            </div>
303                        
304                            <div onclick="openLightbox(59)" 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">
305                                <img src="images/gallery/img_59.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
306                            </div>
307                        
308                            <div onclick="openLightbox(60)" 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">
309                                <img src="images/gallery/img_60.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
310                            </div>
311                        
312                            <div onclick="openLightbox(61)" 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">
313                                <img src="images/gallery/img_61.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
314                            </div>
315                        
316                            <div onclick="openLightbox(62)" 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">
317                                <img src="images/gallery/img_62.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
318                            </div>
319                        
320                            <div onclick="openLightbox(63)" 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">
321                                <img src="images/gallery/img_63.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
322                            </div>
323                        
324                            <div onclick="openLightbox(64)" 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">
325                                <img src="images/gallery/img_64.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
326                            </div>
327                        
328                            <div onclick="openLightbox(65)" 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">
329                                <img src="images/gallery/img_65.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
330                            </div>
331                        
332                            <div onclick="openLightbox(66)" 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">
333                                <img src="images/gallery/img_66.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
334                            </div>
335                        
336                            <div onclick="openLightbox(67)" 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">
337                                <img src="images/gallery/img_67.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
338                            </div>
339                        
340                            <div onclick="openLightbox(68)" 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">
341                                <img src="images/gallery/img_68.jpeg" class="w-full h-auto hover:scale-105 transition-transform duration-700">
342                            </div>
343                        
344                    </div>
345                </div>
346                
347                <div id="floorplan" class="tab-content">
348                    <div class="p-6 md:p-10 bg-white rounded-[2.5rem] flex justify-center shadow-2xl"><img src="images/floorplan.jpeg" class="max-w-full h-auto"></div>
349                </div>
350                
351                <div id="interactive" class="tab-content space-y-12">
352                    <div class=
352"aspect-video w-full rounded-[2.5rem] overflow-hidden border border-white/10 bg-black shadow-2xl"><iframe src="https://kuula.co/share/collection/7MZ0k?logo=-1&info=0&fs=1&vr=1&initload=0&autorotate=0.41&autop=10&thumbs=1" width="100%" height="100%" frameBorder="0" allowFullScreen></iframe></div>
353                    
354                </div>
355
356                <div id="streetview" class="tab-content">
357                    <div class="aspect-video w-full rounded-[2.5rem] overflow-hidden border border-white/10 bg-slate-900 shadow-2xl relative">
358                        <iframe width="100%" height="100%" frameBorder="0" src="https://www.google.com/maps/embed/v1/streetview?key=AIzaSyAz-4dCrl-lCwQbFqwvqIb73KltSkSfCkc&location=49.247264,-122.825&fov=90" allowFullScreen loading="lazy"></iframe>
359                        <div class="absolute top-6 left-6 px-4 py-2 bg-black/80 backdrop-blur-md rounded-xl border border-white/10 flex items-center gap-3">
360                           <div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
361                           <span class="text-[10px] font-black text-white uppercase tracking-widest">360 Immersive View</span>
362                        </div>
363                    </div>
364                </div>
365                
366                <div id="neighborhood" class="tab-content space-y-12">
367                    <div class="grid grid-cols-3 gap-3 md:gap-8 mb-12">
368                        <div class="glass-panel p-6 rounded-[2rem] flex flex-col items-center text-center space-y-3">
369                            <div class="text-[8px] font-black text-slate-500 uppercase tracking-widest">Walk Score</div>
370                            <div class="text-4xl font-black text-white tracking-tighter">75</div>
371                            <div class="text-[9px] font-bold text-slate-400 uppercase tracking-tighter bg-white/5 px-2 py-1 rounded-full">Very Walkable</div>
372                        </div>
373                        <div class="glass-panel p-6 rounded-[2rem] flex flex-col items-center text-center space-y-3">
374                            <div class="text-[8px] font-black text-slate-500 uppercase tracking-widest">Transit</div>
375                            <div class="text-4xl font-black text-white tracking-tighter">80</div>
376                            <div class="text-[9px] font-bold text-slate-400 uppercase tracking-tighter bg-white/5 px-2 py-1 rounded-full">Excellent Transit</div>
377                        </div>
378                        <div class="glass-panel p-6 rounded-[2rem] flex flex-col items-center text-center space-y-3">
379                            <div class="text-[8px] font-black text-slate-500 uppercase tracking-widest">Bike Score</div>
380                            <div class="text-4xl font-black text-white tracking-tighter">65</div>
381                            <div class="text-[9px] font-bold text-slate-400 uppercase tracking-tighter bg-white/5 px-2 py-1 rounded-full">Bikeable</div>
382                        </div>
383                    </div>
384                    
385                    <div class="grid grid-cols-1 md:grid-cols-2 gap-12" id="neighborhood-map-container">
386                        <div class="space-y-8">
387                            <h3 class="text-xl font-black text-white uppercase tracking-tighter">Local Essentials</h3>
388                            <div class="space-y-4">
389        <div class="glass-panel p-5 rounded-[1.5rem] border border-white/5 mb-4 hover:bg-white/5 transition-all">
390          <div class="space-y-1">
391             <span class="text-[9px] font-black text-slate-500 uppercase tracking-widest">Grocery</span>
392             <h4 class="text-lg font-black text-white uppercase truncate">Save-On-Foods</h4>
393             <div class="flex items-center gap-6 mt-3">
394                <a href="https://www.saveonfoods.com" target="_blank" rel="noopener noreferrer" class="text-xs font-black uppercase tracking-widest flex items-center gap-2" style="color: var(--brand)">
395                  Website
396                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth="3" stroke="currentColor"><path d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
397                </a>
398                <button onclick="handleGetDirections('Save-On-Foods')" class="text-xs font-black uppercase tracking-widest text-emerald-500 flex items-center gap-2">
399                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="3" stroke="currentColor"><path d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25A7.5 7.5 0 1119.5 10.5z" /></svg>
400                  Map Route
401                </button>
402             </div>
403          </div>
404        </div>
405      
406        <div class="glass-panel p-5 rounded-[1.5rem] border border-white/5 mb-4 hover:bg-white/5 transition-all">
407          <div class="space-y-1">
408             <span class="text-[9px] font-black text-slate-500 uppercase tracking-widest">Pharmacy</span>
409             <h4 class="text-lg font-black text-white uppercase truncate">Save-On-Foods Pharmacy</h4>
410             <div class="flex items-center gap-6 mt-3">
411                <a href="https://www.saveonfoods.com" target="_blank" rel="noopener noreferrer" class="text-xs font-black uppercase tracking-widest flex items-center gap-2" style="color: var(--brand)">
412                  Website
413                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth="3" stroke="currentColor"><path d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
414                </a>
415                <button onclick="handleGetDirections('Save-On-Foods Pharmacy')" class="text-xs font-black uppercase tracking-widest text-emerald-500 flex items-center gap-2">
416                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="3" stroke="currentColor"><path d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25A7.5 7.5 0 1119.5 10.5z" /></svg>
417                  Map Route
418                </button>
419             </div>
420          </div>
421        </div>
422      
423        <div class="glass-panel p-5 rounded-[1.5rem] border border-white/5 mb-4 hover:bg-white/5 transition-all">
424          <div class="space-y-1">
425             <span class="text-[9px] font-black text-slate-500 uppercase tracking-widest">Dining</span>
426             <h4 class="text-lg font-black text-white uppercase truncate">On & Off Kitchen + Bar</h4>
427             <div class="flex items-center gap-6 mt-3">
428                <a href="https://www.google.com/search?q=On%20%26%20Off%20Kitchen%20%2B%20Bar%20official%20website" target="_blank" rel="noopener noreferrer" class="text-xs font-black uppercase tracking-widest flex items-center gap-2" style="color: var(--brand)">
429                  Website
430                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth="3" stroke="currentColor"><path d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
431                </a>
432                <button onclick="handleGetDirections('On & Off Kitchen + Bar')" class="text-xs font-black uppercase tracking-widest text-emerald-500 flex items-center gap-2">
433                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="3" stroke="currentColor"><path d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25A7.5 7.5 0 1119.5 10.5z" /></svg>
434                  Map Route
435                </button>
436             </div>
437          </div>
438        </div>
439      
440        <div class="glass-panel p-5 rounded-[1.5rem] border border-white/5 mb-4 hover:bg-white/5 transition-all">
441          <div class="space-y-1">
442             <span class="text-[9px] font-black text-slate-500 uppercase tracking-widest">Park</span>
443             <h4 class="text-lg font-black text-white uppercase truncate">Hickey Street Reservoir Park</h4>
444             <div class="flex items-center gap-6 mt-3">
445                <a href="https://www.google.com/search?q=Hickey%20Street%20Reservoir%20Park%20official%20website" target="_blank" rel="noopener noreferrer" class="text-xs font-black uppercase tracking-widest flex items-center gap-2" style="color: var(--brand)">
446                  Website
447                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth="3" stroke="currentColor"><path d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
448                </a>
449                <button onclick="handleGetDirections('Hickey Street Reservoir Park')" class="text-xs font-black uppercase tracking-widest text-emerald-500 flex items-center gap-2">
450                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="3" stroke="currentColor"><path d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25A7.5 7.5 0 1119.5 10.5z" /></svg>
451                  Map Route
452                </button>
453             </div>
454          </div>
455        </div>
456      
457        <div class="glass-panel p-5 rounded-[1.5rem] border border-white/5 mb-4 hover:bg-white/5 transition-all">
458          <div class="space-y-1">
459             <span class="text-[9px] font-black text-slate-500 uppercase tracking-widest">Transit</span>
460             <h4 class="text-lg font-black text-white uppercase truncate">Southbound Hickey Dr @ Austin Ave Bus Stop</h4>
461             <div class="flex items-center gap-6 mt-3">
462                <a href="https://www.google.com/search?q=Southbound%20Hickey%20Dr%20%40%20Austin%20Ave%20Bus%20Stop%20official%20website" target="_blank" rel="noopener noreferrer" class="text-xs font-black uppercase tracking-widest flex items-center gap-2" style="color: var(--brand)">
463                  Website
464                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth="3" stroke="currentColor"><path d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
465                </a>
466                <button onclick="handleGetDirections('Southbound Hickey Dr @ Austin Ave Bus Stop')" class="text-xs font-black uppercase tracking-widest text-emerald-500 flex items-center gap-2">
467                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="3" stroke="currentColor"><path d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25A7.5 7.5 0 1119.5 10.5z" /></svg>
468                  Map Route
469                </button>
470             </div>
471          </div>
472        </div>
473      </div>
474                        </div>
475                        <div class="space-y-6">
476                            <div class="flex items-center justify-between">
477                                <h3 id="map-title" class="text-lg font-black text-white uppercase">Neighborhood Map</h3>
478                                <div class="flex items-center gap-2">
479                                    <button onclick="openInMaps()" class="px-4 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg text-[9px] font-black uppercase tracking-widest border border-white/5 flex items-center gap-2">
480                                        <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="3"><path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
481                                        Open in Maps
482                                    </button>
483                                    <button id="reset-map-btn" onclick="resetMap()" class="hidden px-4 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg text-[9px] font-black uppercase tracking-widest border border-white/5">Reset Map</button>
484                                </div>
485                            </div>
486                            <div class="aspect-square w-full rounded-[2.5rem] overflow-hidden border border-white/10 bg-slate-900 shadow-2xl relative">
487                               <iframe id="map-iframe" width="100%" height="100%" frameBorder="0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAz-4dCrl-lCwQbFqwvqIb73KltSkSfCkc&q=2488%20Latimer%20Avenue%20%2C%20Coquitlam&zoom=16" style="filter: saturate(1.2) sepia(0.1) brightness(1.05)"></iframe>
488                               <div class="absolute top-6 left-6 px-4 py-2 bg-black/80 backdrop-blur-md rounded-xl border border-white/10 flex items-center gap-3">
489                                  <div id="status-dot" class="w-2 h-2 rounded-full animate-pulse" style="background-color: var(--brand)"></div>
490                                  <span id="status-text" class="text-[10px] font-black text-white uppercase tracking-widest">
490Lifestyle Context</span>
491                               </div>
492                            </div>
493                        </div>
494                    </div>
495                </div>
496            </div>
497
498            <div class="lg:col-span-4 space-y-10">
499                <div class="p-8 md:p-10 glass-panel rounded-[3rem] border border-white/10 space-y-10 text-center sticky top-10">
500                    <div class="w-32 h-32 rounded-full border-4 p-1 mx-auto overflow-hidden shadow-2xl" style="border-color: var(--brand)">
501                        <img src="https://cmyixvfqicuycuhgqjnv.supabase.co/storage/v1/object/public/clients/Jeff%20Ho%20PREC/headshot.png" class="w-full h-full object-cover rounded-full">
502                    </div>
503                    <div class="space-y-2">
504                        <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">Listing Associate</span>
505                        <h3 class="text-2xl font-black text-white uppercase tracking-tighter">Jeff Ho PREC</h3>
506                        <p class="font-bold text-xs uppercase tracking-widest" style="color: var(--brand)">Royal LePage West Real Estate Services</p>
507                        <div class="flex flex-col gap-1.5 pt-4 border-t border-white/5 opacity-80 text-[10px] font-bold uppercase text-slate-400">
508                           <div class="text-white">778-996-6600</div>
509                           <div class="truncate">[email protected]</div>
510                           
511                        </div>
512                    </div>
513                    <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>
514                </div>
515            </div>
516        </div>
517    </div>
518
519    <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">
520        <div class="max-w-md w-full glass-panel p-8 md:p-10 rounded-[2.5rem] border border-white/10 shadow-2xl relative">
521            <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>
522            <div id="form-container" class="space-y-8">
523                <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: 2488 Latimer Avenue </p></div>
524                <form name="property-inquiry" method="POST" data-netlify="true" class="space-y-4">
525                    <input type="hidden" name="form-name" value="property-inquiry" /><input type="hidden" name="property_address" value="2488 Latimer Avenue " />
526                    <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>
527                    <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>
528                    <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>
529                    <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>
530                </form>
531            </div>
532        </div>
533    </div>
534
535    
535<script>
536        const PROPERTY_LOC = "2488 Latimer Avenue , Coquitlam";
537        const PROPERTY_CITY = "Coquitlam";
538        const BRAND_COLOR = "#eb1d2c";
539        const GALLERY_IMAGES = ["images/gallery/img_0.jpeg","images/gallery/img_1.jpeg","images/gallery/img_2.jpeg","images/gallery/img_3.jpeg","images/gallery/img_4.jpeg","images/gallery/img_5.jpeg","images/gallery/img_6.jpeg","images/gallery/img_7.jpeg","images/gallery/img_8.jpeg","images/gallery/img_9.jpeg","images/gallery/img_10.jpeg","images/gallery/img_11.jpeg","images/gallery/img_12.jpeg","images/gallery/img_13.jpeg","images/gallery/img_14.jpeg","images/gallery/img_15.jpeg","images/gallery/img_16.jpeg","images/gallery/img_17.jpeg","images/gallery/img_18.jpeg","images/gallery/img_19.jpeg","images/gallery/img_20.jpeg","images/gallery/img_21.jpeg","images/gallery/img_22.jpeg","images/gallery/img_23.jpeg","images/gallery/img_24.jpeg","images/gallery/img_25.jpeg","images/gallery/img_26.jpeg","images/gallery/img_27.jpeg","images/gallery/img_28.jpeg","images/gallery/img_29.jpeg","images/gallery/img_30.jpeg","images/gallery/img_31.jpeg","images/gallery/img_32.jpeg","images/gallery/img_33.jpeg","images/gallery/img_34.jpeg","images/gallery/img_35.jpeg","images/gallery/img_36.jpeg","images/gallery/img_37.jpeg","images/gallery/img_38.jpeg","images/gallery/img_39.jpeg","images/gallery/img_40.jpeg","images/gallery/img_41.jpeg","images/gallery/img_42.jpeg","images/gallery/img_43.jpeg","images/gallery/img_44.jpeg","images/gallery/img_45.jpeg","images/gallery/img_46.jpeg","images/gallery/img_47.jpeg","images/gallery/img_48.jpeg","images/gallery/img_49.jpeg","images/gallery/img_50.jpeg","images/gallery/img_51.jpeg","images/gallery/img_52.jpeg","images/gallery/img_53.jpeg","images/gallery/img_54.jpeg","images/gallery/img_55.jpeg","images/gallery/img_56.jpeg","images/gallery/img_57.jpeg","images/gallery/img_58.jpeg","images/gallery/img_59.jpeg","images/gallery/img_60.jpeg","images/gallery/img_61.jpeg","images/gallery/img_62.jpeg","images/gallery/img_63.jpeg","images/gallery/img_64.jpeg","images/gallery/img_65.jpeg","images/gallery/img_66.jpeg","images/gallery/img_67.jpeg","images/gallery/img_68.jpeg"];
540        let currentTargetPlace = null;
541        let activeLightboxIdx = 0;
542
543        function switchTab(tabId) {
544            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
545            document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
546            const target = document.getElementById(tabId);
547            if (target) target.classList.add('active');
548            const btn = document.getElementById('btn-' + tabId);
549            if (btn) btn.classList.add('active');
550            if(tabId === 'neighborhood' || tabId === 'streetview') window.dispatchEvent(new Event('resize')); 
551        }
552        
553        function toggleModal(show) { document.getElementById('contact-modal').style.display = show ? 'flex' : 'none'; }
554
555        function handleGetDirections(placeName) {
556            const iframe = document.getElementById('map-iframe');
557            const title = document.getElementById('map-title');
558            const resetBtn = document.getElementById('reset-map-btn');
559            const dot = document.getElementById('status-dot');
560            const text = document.getElementById('status-text');
561            currentTargetPlace = placeName;
562            const url = "https://www.google.com/maps/embed/v1/directions?key=AIzaSyAz-4dCrl-lCwQbFqwvqIb73KltSkSfCkc&origin=" + encodeURIComponent(PROPERTY_LOC) + "&destination=" + encodeURIComponent(placeName + " " + PROPERTY_CITY);
563            iframe.src = url; iframe.style.filter = "none"; title.innerText = "Route to " + placeName; resetBtn.classList.remove('hidden'); dot.style.backgroundColor = "#10b981"; text.innerText = "Live Routing";
564            document.getElementById('neighborhood-map-container').scrollIntoView({ behavior: 'smooth', block: 'center' });
565        }
566
567        function resetMap() {
568            const iframe = document.getElementById('map-iframe');
569            const title = document.getElementById('map-title');
570            const resetBtn = document.getElementById('reset-map-btn');
571            const dot = document.getElementById('status-dot');
572            const text = document.getElementById('status-text');
573            currentTargetPlace = null;
574            iframe.src = "https://www.google.com/maps/embed/v1/place?key=AIzaSyAz-4dCrl-lCwQbFqwvqIb73KltSkSfCkc&q=" + encodeURIComponent(PROPERTY_LOC) + "&zoom=16";
575            iframe.style.filter = "saturate(1.2) sepia(0.1) brightness(1.05)"; title.innerText = "Neighborhood Map"; resetBtn.classList.add('hidden'); dot.style.backgroundColor = BRAND_COLOR;
575 text.innerText = "Lifestyle Context";
576        }
577
578        function openInMaps() {
579            let url;
580            if (currentTargetPlace) url = "https://www.google.com/maps/dir/?api=1&origin=" + encodeURIComponent(PROPERTY_LOC) + "&destination=" + encodeURIComponent(currentTargetPlace + " " + PROPERTY_CITY);
581            else url = "https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent(PROPERTY_LOC);
582            window.open(url, '_blank');
583        }
584
585        function openLightbox(index) { activeLightboxIdx = index; updateLightbox(); document.getElementById('lightbox').classList.add('active'); document.body.style.overflow = 'hidden'; }
586        function closeLightbox() { document.getElementById('lightbox').classList.remove('active'); document.body.style.overflow = 'auto'; }
587        function changeLightbox(delta) { activeLightboxIdx = (activeLightboxIdx + delta + GALLERY_IMAGES.length) % GALLERY_IMAGES.length; updateLightbox(); }
588        function updateLightbox() { const img = document.getElementById('lightbox-img'); const counter = document.getElementById('lightbox-counter'); img.src = GALLERY_IMAGES[activeLightboxIdx]; counter.innerText = (activeLightboxIdx + 1) + ' / ' + GALLERY_IMAGES.length; }
589
590        document.addEventListener('keydown', e => {
591            if (!document.getElementById('lightbox').classList.contains('active')) return;
592            if (e.key === 'Escape') closeLightbox();
593            if (e.key === 'ArrowLeft') changeLightbox(-1);
594            if (e.key === 'ArrowRight') changeLightbox(1);
595        });
596    </script>
596
597</body>
598</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.