eliate-security.github.io/index.html at main · eliate-security/eliate-security.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
<!DOCTYPE html>
<html lang="en" class="overflow-x-hidden">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>eliate | fractional security engineering</title>
    <meta name="description" content="eliate provides fractional security engineering. We embed staff-level expertise into your team for security programmes, cloud engineering, and product security.">
    <meta name="keywords" content="Fractional Security Engineer, Security Engineering, Cloud Security, Product Security, DevSecOps, Richard Clarke">
    <meta name="author" content="Richard Clarke">
    <meta name="robots" content="index, follow">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'sha256-XFUh/MT9he/zMKGP1qxkItNHzzHKTr4kcps8NuGgEzo='; style-src 'self' https://fonts.cdnfonts.com; font-src 'self' https://fonts.cdnfonts.com; img-src 'self'; object-src 'none'; base-uri 'self'; form-action 'none'; manifest-src 'self';">
    <meta name="referrer" content="strict-origin-when-cross-origin">
    <meta name="theme-color" content="#ffffff">

    <link rel="icon" type="image/png" href="/icon.png">
    <link rel="icon" type="image/svg+xml" href="/icon.svg">
    <link rel="icon" href="/favicon.ico" sizes="any">
    <link rel="apple-touch-icon" href="/icon.png">
    <link rel="manifest" href="/site.webmanifest">

    <link rel="preconnect" href="https://fonts.cdnfonts.com" crossorigin>
    <link href="https://fonts.cdnfonts.com/css/geist-mono" rel="stylesheet">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://eliate.com/">
    <meta property="og:title" content="eliate | fractional security engineering">
    <meta property="og:description" content="Security as Craftsmanship. We embed a staff-level security engineer into your team to provide high-leverage expertise without the full-time headcount.">
    <meta property="og:image" content="https://eliate.com/social-card.png">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://eliate.com/">
    <meta property="twitter:title" content="Eliate | fractional security engineering">
    <meta property="twitter:description" content="Security as Craftsmanship. We embed a staff-level security engineer into your team to provide high-leverage expertise without the full-time headcount.">
    <meta property="twitter:image" content="https://eliate.com/social-card.png">

    <link rel="canonical" href="https://eliate.com/">
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@graph": [
        {
          "@type": "WebSite",
          "name": "eliate",
          "alternateName": "eliate security",
          "url": "https://eliate.com/"
        },
        {
          "@type": "ProfessionalService",
          "name": "eliate",
          "image": "https://eliate.com/logo.png",
          "url": "https://eliate.com",
          "email": "richard@eliate.com",
          "priceRange": "$$$",
          "description": "eliate provides fractional security engineering services, embedding staff-level expertise into engineering teams.",
          "address": {
            "@type": "PostalAddress",
            "addressLocality": "Perth",
            "addressRegion": "WA",
            "addressCountry": "AU"
          },
          "founder": {
            "@type": "Person",
            "name": "Richard Clarke"
          },
          "areaServed": "Global",
          "sameAs": [
            "https://www.linkedin.com/company/eliate-security",
            "https://www.linkedin.com/in/-rsclarke/",
            "https://github.com/eliate-security",
            "https://github.com/rsclarke",
            "https://x.com/rsclarke"
          ]
        }
      ]
    }
    </script>
    <link href="./styles.css" rel="stylesheet">
</head>
<body class="font-mono antialiased bg-white text-black overflow-x-hidden hyphens-none break-words">
    <!-- Mobile Menu State -->
    <input type="checkbox" id="menu-toggle" class="peer hidden">

    <!-- Navigation: Minimal & Fixed -->
    <nav class="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100">
        <div class="max-w-[1400px] mx-auto px-4 md:px-6 h-20 flex items-center justify-between">
            <a href="/" class="text-lg font-display font-bold tracking-tight flex items-center gap-2">
                <div class="w-5 h-5 bg-black flex items-center justify-center text-white">
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="square" stroke-linejoin="miter">
                        <path d="M6 10L12 4L18 10" />
                    </svg>
                </div>
                eliate.
            </a>

            <div class="flex items-center gap-4 md:hidden">
                <label for="menu-toggle" class="text-xs font-medium text-black uppercase tracking-widest hover:text-gray-500 transition-colors cursor-pointer select-none">
                    [ Menu ]
                </label>
                <a href="mailto:richard@eliate.com" class="hidden min-[380px]:block text-xs font-medium bg-black text-white px-3 py-2 transition-colors uppercase tracking-wide">
                    Enquire
                </a>
            </div>

            <div class="hidden md:flex items-center gap-12 text-xs font-medium text-gray-500 uppercase tracking-widest">
                <a href="#philosophy" class="hover:text-black transition-colors">[ Philosophy ]</a>
                <a href="#capabilities" class="hover:text-black transition-colors">[ Capabilities ]</a>
                <a href="#engineer" class="hover:text-black transition-colors">[ Engineer ]</a>
            </div>

            <a href="mailto:richard@eliate.com" class="hidden md:block text-xs font-medium bg-black text-white px-4 py-2 transition-colors uppercase tracking-wide">
                Enquire
            </a>
        </div>
    </nav>

    <!-- Mobile Menu Overlay -->
    <div id="mobile-menu" class="fixed inset-0 bg-black z-[60] hidden peer-checked:flex flex-col p-6">
        <div class="flex justify-between items-center mb-12">
            <a href="/" class="text-lg font-display font-bold tracking-tight flex items-center gap-2 text-white">
                <div class="w-5 h-5 bg-white flex items-center justify-center text-black">
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="square" stroke-linejoin="miter">
                        <path d="M6 10L12 4L18 10" />
                    </svg>
                </div>
                eliate.
            </a>
            <div class="flex items-center gap-4">
                <label for="menu-toggle" class="text-xs font-medium text-white uppercase tracking-widest hover:text-gray-400 transition-colors cursor-pointer select-none">
                    [ Close ]
                </label>
                <a href="mailto:richard@eliate.com" class="hidden min-[380px]:block text-xs font-medium bg-white text-black px-3 py-2 transition-colors uppercase tracking-wide">
                    Enquire
                </a>
            </div>
        </div>
        <nav class="flex flex-col gap-8 text-lg min-[320px]:text-xl sm:text-2xl font-display font-light text-white whitespace-nowrap">
            <a href="#philosophy" class="hover:text-gray-400 transition-colors">01 // Philosophy</a>
            <a href="#capabilities" class="hover:text-gray-400 transition-colors">02 // Capabilities</a>
            <a href="#engineer" class="hover:text-gray-400 transition-colors">03 // Engineer</a>
        </nav>
        <div class="mt-auto border-t border-gray-800 pt-8">
            <a href="mailto:richard@eliate.com" class="text-lg sm:text-xl font-display text-white hover:text-gray-400 transition-colors">richard@eliate.com</a>
        </div>
    </div>

    <!-- Hero: Typographic & Asymmetrical -->
    <section class="relative pt-40 pb-20 min-h-screen flex flex-col justify-center z-10">
        <div class="max-w-[1400px] mx-auto px-4 md:px-6 w-full">

            <div class="reveal max-w-6xl">

                <h1 class="-ml-0.5 md:-ml-1 lg:-ml-2 text-2xl min-[320px]:text-3xl sm:text-5xl md:text-8xl lg:text-9xl font-display font-light tracking-tighter leading-[0.9] mb-12 text-black break-words hyphens-none">
                    Security as<br>
                    <span class="font-medium">Craftsmanship</span><span class="text-black cursor-blink">_</span>
                </h1>
            </div>

            <div class="grid md:grid-cols-12 gap-8 items-end delay-100 border-t border-gray-200 pt-8">
                <div class="md:col-span-6 lg:col-span-5 text-sm md:text-base text-gray-800 font-medium leading-relaxed md:hyphens-none">
                    <p class="mb-4">
                        <span class="inline-flex items-center gap-1.5 -translate-y-[1px]">
                            <span class="w-4 h-4 bg-black flex items-center justify-center text-white">
                                <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="square" stroke-linejoin="miter">
                                    <path d="M6 10L12 4L18 10" />
                                </svg>
                            </span>
                            <span class="font-display font-bold tracking-tight text-black">eliate.</span>
                        </span> provides fractional security engineering.
                    </p>
                    <p>
                        We embed a staff-level security engineer into your Slack, GitHub, and Cloud. We give high-velocity teams the expertise to ship complex systems securely, without the full-time headcount.
                    </p>
                </div>

            </div>

        </div>
    </section>

    <!-- The Model: Defining Fractional -->
    <section class="py-20 border-t border-gray-200 bg-gray-50 z-10 relative">
        <div class="max-w-[1400px] mx-auto px-4 md:px-6">
            <h2 class="text-xs font-mono text-gray-500 font-bold uppercase tracking-widest mb-12">// The Model</h2>

            <div class="grid md:grid-cols-3 gap-12">
                <!-- 01 Traditional Consultant -->
                <div class="opacity-60 hover:opacity-100 transition-opacity">
                    <h3 class="font-display text-xl font-bold mb-4 text-gray-900">Consultant</h3>
                    <p class="text-sm font-medium text-gray-600 leading-relaxed">
                        Provides external advice that is often theoretical. Lacks the deep context of your codebase and operational realities.
                    </p>
                </div>

                <!-- 02 Full Time Hire -->
                <div class="opacity-60 hover:opacity-100 transition-opacity">
                    <h3 class="font-display text-xl font-bold mb-4 text-gray-900">Full-Time Hire</h3>
                    <p class="text-sm font-medium text-gray-600 leading-relaxed">
                        Total immersion and hands-on execution, but often an excessive commitment and cost for early-stage security maturity.
                    </p>
                </div>

                <!-- 03 Fractional Engineer -->
                <div class="relative">
                    <div class="hidden md:block absolute -left-6 top-0 bottom-0 w-px bg-black"></div>
                    <h3 class="font-display text-xl font-bold mb-4 text-black">Fractional Security Engineer</h3>
                    <p class="text-sm font-bold text-gray-900 leading-relaxed mb-6">
                        Embedded expertise. We integrate directly into your engineering teams to provide staff-level leverage without the full-time headcount.
                    </p>
                    <p class="text-sm text-gray-700 font-medium leading-relaxed">
                        Security belongs in the pull request, not the slide deck. By operating within your technology stack, we provide consistent, high-leverage expertise that scales with your development velocity.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- The Philosophy: Editorial Layout -->
    <section id="philosophy" class="py-32 border-t border-black bg-black text-white z-10 relative">
        <div class="max-w-[1400px] mx-auto px-4 md:px-6">
            <div class="grid md:grid-cols-2 gap-20">
                <div class="md:sticky md:top-32 h-fit">
                    <h2 class="text-xs font-mono text-gray-400 font-bold uppercase tracking-widest mb-6">// The Philosophy</h2>
                    <p class="text-2xl sm:text-4xl md:text-5xl font-display font-light leading-tight tracking-tight text-white break-words hyphens-none">
                        We approach security not as a checklist, but as a <span class="text-gray-400 italic">quality attribute</span> of elegant engineering.
                    </p>
                </div>
                <div class="space-y-24 delay-100">
                    <div class="space-y-6 border-l border-gray-800 pl-8">
                        <h3 class="text-lg font-bold font-display text-white">01. Velocity as Security</h3>
                        <p class="text-gray-300 font-medium leading-relaxed max-w-md text-sm">
                            Friction implies safety, but velocity demands precision. We build the guardrails that enable rapid deployment, ensuring that security accelerates your roadmap rather than arresting it.
                        </p>
                    </div>
                    <div class="space-y-6 border-l border-gray-800 pl-8">
                        <h3 class="text-lg font-bold font-display text-white">02. Engineering First</h3>
                        <p class="text-gray-300 font-medium leading-relaxed max-w-md text-sm">
                            Effective governance is written in code, not prose. We express security controls through Terraform and CI/CD pipelines, embedding compliance directly into the infrastructure layer.
                        </p>
                    </div>
                    <div class="space-y-6 border-l border-gray-800 pl-8">
                        <h3 class="text-lg font-bold font-display text-white">03. Precision Impact</h3>
                        <p class="text-gray-300 font-medium leading-relaxed max-w-md text-sm">
                            Senior engineering guidance requires clarity, not volume. We provide focused, high-signal direction that resolves complexity, delivering specialised architectural guidance that is often hard to hire for full-time.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Capabilities: Technical List -->
    <section id="capabilities" class="py-32 bg-white z-10 relative">
        <div class="max-w-[1400px] mx-auto px-4 md:px-6">
            <div class="mb-24">
                <h2 class="text-xs font-mono text-gray-500 font-bold uppercase tracking-widest mb-4">// Capabilities</h2>
                <p class="text-3xl font-display font-light text-black">Deep focus areas.</p>
            </div>

            <div class="border-t border-gray-200">
                <!-- Item 1 -->
                <div class="group border-b border-gray-200 hover:bg-gray-50 transition-colors duration-300">
                    <div class="py-12 grid md:grid-cols-12 gap-8 items-start">
                        <div class="md:col-span-1 text-xs text-gray-500 font-bold pt-2">01</div>
                        <div class="md:col-span-4">
                            <h3 class="text-xl sm:text-2xl font-display font-bold text-black">Security Programme</h3>
                        </div>
                        <div class="md:col-span-7 grid sm:grid-cols-2 gap-x-12 gap-y-4 text-sm text-gray-700 font-medium">
                            <p class="flex items-center gap-2"><span class="text-gray-400 font-bold">+</span> SOC2 Readiness</p>
                            <p class="flex items-center gap-2"><span class="text-gray-400 font-bold">+</span> Strategy & Roadmap</p>
                            <p class="flex items-center gap-2"><span class="text-gray-400 font-bold">+</span> Secure SDLC Design</p>
                            <p class="flex items-center gap-2"><span class="text-gray-400 font-bold">+</span> Architecture Review</p>
                        </div>
                    </div>
                </div>

                <!-- Item 2 -->
                <div class="group border-b border-gray-200 hover:bg-gray-50 transition-colors duration-300">
                    <div class="py-12 grid md:grid-cols-12 gap-8 items-start">
                        <div class="md:col-span-1 text-xs text-gray-500 font-bold pt-2">02</div>
                        <div class="md:col-span-4">
                            <h3 class="text-xl sm:text-2xl font-display font-bold text-black">Cloud Engineering</h3>
                        </div>
                        <div class="md:col-span-7 grid sm:grid-cols-2 gap-x-12 gap-y-4 text-sm text-gray-700 font-medium">
                            <p class="flex items-center gap-2"><span class="text-gray-400 font-bold">+</span> AWS Hardening</p>
                            <p class="flex items-center gap-2"><span class="text-gray-400 font-bold">+</span> IAM Architecture</p>
                            <p class="flex items-center gap-2"><span class="text-gray-400 font-bold">+</span> Infrastructure as Code</p>
                            <p class="flex items-center gap-2"><span class="text-gray-400 font-bold">+</span> Container Security</p>
                        </div>
                    </div>
                </div>

                <!-- Item 3 -->
                <div class="group border-b border-gray-200 hover:bg-gray-50 transition-colors duration-300">
                    <div class="py-12 grid md:grid-cols-12 gap-8 items-start">
                        <div class="md:col-span-1 text-xs text-gray-500 font-bold pt-2">03</div>
                        <div class="md:col-span-4">
                            <h3 class="text-xl sm:text-2xl font-display font-bold text-black">Product Security</h3>
                        </div>
                        <div class="md:col-span-7 grid sm:grid-cols-2 gap-x-12 gap-y-4 text-sm text-gray-700 font-medium">
                            <p class="flex items-center gap-2"><span class="text-gray-400 font-bold">+</span> AppSec Reviews</p>
                            <p class="flex items-center gap-2"><span class="text-gray-400 font-bold">+</span> DevSecOps Pipelines</p>
                            <p class="flex items-center gap-2"><span class="text-gray-400 font-bold">+</span> Threat Modelling</p>
                            <p class="flex items-center gap-2"><span class="text-gray-400 font-bold">+</span> Secret Management</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- The Fractional Security Engineer / Richard -->
    <section id="engineer" class="py-32 z-10 relative border-t border-gray-200 bg-gray-50">
        <div class="max-w-[1400px] mx-auto px-4 md:px-6">
            <h2 class="text-xs font-mono text-gray-400 uppercase tracking-widest mb-12">// Fractional Security Engineer</h2>

            <div class="grid md:grid-cols-12 gap-16 items-start">

                <!-- Portrait Column -->
                <div class="md:col-span-4 relative md:sticky md:top-32">
                    <div class="aspect-[3/4] bg-gray-100 relative overflow-hidden grayscale">
                        <img src="richard.jpeg" alt="Richard Clarke - Fractional Security Engineer" width="800" height="1067" loading="lazy" class="absolute inset-0 w-full h-full object-cover">
                    </div>
                </div>

                <!-- The Letter -->
                <div class="md:col-span-8 md:pl-12">
                    <div class="prose prose-lg prose-gray max-w-none font-display font-light leading-relaxed text-2xl">
                        <p class="mb-8">
                            "With a decade of experience spanning deep telecoms research to high-velocity gaming startups, I view security as an integral component of system reliability."
                        </p>
                    </div>

                    <div class="space-y-8 text-gray-600 font-mono text-sm leading-relaxed border-l border-gray-200 pl-8 mt-12">
                        <p>
                            Traditional advisory often separates strategy from execution. <span class="inline-flex items-center gap-1 align-baseline -translate-y-0.5"><span class="w-3 h-3 bg-black flex items-center justify-center text-white"><svg width="6" height="6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="square" stroke-linejoin="miter"><path d="M6 10L12 4L18 10" /></svg></span><span class="font-bold tracking-tight text-black">eliate.</span></span> was founded to bridge that gap. I believe that the most effective security roadmap is one that accounts for the nuances of your specific architecture.
                        </p>
                        <p>
                            <strong class="text-black">I am an engineer first.</strong> True value lies in implementation, refining IAM policies in Terraform, designing authentication flows alongside your developers, and treating security as a feature of your product quality.
                        </p>
                        <p>
                            When you engage with <span class="inline-flex items-center gap-1 align-baseline -translate-y-0.5"><span class="w-3 h-3 bg-black flex items-center justify-center text-white"><svg width="6" height="6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="square" stroke-linejoin="miter"><path d="M6 10L12 4L18 10" /></svg></span><span class="font-bold tracking-tight text-black">eliate.</span></span>, you are not hiring a roster. You are partnering directly with the craft.
                        </p>
                    </div>

                    <div class="mt-12 text-right">
                        <p class="font-display font-bold text-lg">~ Richard Clarke</p>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- Footer / Contact -->
    <footer class="py-20 border-t border-gray-200 bg-white z-10 relative">
        <div class="max-w-[1400px] mx-auto px-4 md:px-6">
            <div class="grid md:grid-cols-2 gap-20 mb-20">
                <div>
                    <h2 class="text-3xl sm:text-4xl md:text-6xl font-display font-light tracking-tighter">
                        Engineering with<br>Security.
                    </h2>
                </div>
                <div class="flex flex-col justify-end items-start delay-100">
                    <p class="text-sm font-mono text-gray-500 mb-8">
                        Currently accepting enquiries for Q1 2026. <br>
                        Retainers tailored to your velocity, starting from 1 day/week.
                    </p>
                    <a href="mailto:richard@eliate.com" class="group inline-flex items-center text-lg sm:text-2xl font-display font-medium hover:text-gray-600 transition-colors hyphens-none">
                        richard@eliate.com
                        <svg class="w-6 h-6 ml-4 transform group-hover:-translate-y-1 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="1.5" d="M7 17L17 7M17 7H7M17 7V17"></path></svg>
                    </a>
                </div>
            </div>

            <div class="flex justify-between items-end pt-8 border-t border-gray-200">
                <div class="flex flex-col gap-4">
                    <a href="/" class="text-sm font-display font-bold tracking-tight flex items-center gap-2 grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all">
                        <div class="w-4 h-4 bg-black flex items-center justify-center text-white">
                            <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="square" stroke-linejoin="miter">
                                <path d="M6 10L12 4L18 10" />
                            </svg>
                        </div>
                        eliate.
                    </a>
                    <div class="text-[10px] font-mono text-gray-400 uppercase tracking-wider">
                        © 2025 // Perth, WA
                    </div>
                </div>
                <div class="flex gap-8 text-[10px] font-mono text-gray-400 uppercase tracking-wider">
                    <a href="https://www.linkedin.com/company/eliate-security" target="_blank" rel="noopener noreferrer" class="hover:text-black transition-colors">LinkedIn</a>
                    <a href="https://github.com/eliate-security" target="_blank" rel="noopener noreferrer" class="hover:text-black transition-colors">GitHub</a>
                </div>
            </div>
        </div>
    </footer>
    <script>
document.addEventListener('DOMContentLoaded', () => {
    const menuToggle = document.getElementById('menu-toggle');
    if (!menuToggle) return;

    // Select all links inside the mobile menu (nav links, logo, enquire)
    const menuLinks = document.querySelectorAll('#mobile-menu a');
    menuLinks.forEach(link => {
        link.addEventListener('click', () => {
            menuToggle.checked = false;
        });
    });
});
    </script>
</body>
</html>