PageSourceSearch

https://hwsec-csic.github.io/contact.html

html hwsec-csic.github.io collected 2026-10-03 09:19:07 UTC 25,146 bytes, 415 lines download raw bytes

1<!DOCTYPE html>
2<html class="dark" lang="en">
3<head>
4    <meta charset="utf-8"/>
5    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
6    <title>Contact & Inquiries | HWSec-CSIC</title>
7    <link href="https://fonts.googleapis.com" rel="preconnect"/>
8    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
9    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
10    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet"/>
11    <link rel="stylesheet" href="/css/style.css" />
12    
12<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
12
13    
13<script src="https://js.hcaptcha.com/1/api.js?hl=en" async defer></script>
13
14    
14<script src="https://web3forms.com/client/script.js" async defer></script>
14
15    
15<script id="tailwind-config">
16        tailwind.config = {
17            darkMode: "class",
18            theme: {
19                extend: {
20                    "colors": {
21                        "tertiary": "#adc6ff",
22                        "surface-container-lowest": "#060e20",
23                        "secondary-fixed-dim": "#4edea3",
24                        "inverse-primary": "#2d6197",
25                        "background": "#0b1326",
26                        "surface-container-highest": "#2d3449",
27                        "on-secondary-fixed": "#002113",
28                        "on-tertiary": "#002e6a",
29                        "tertiary-container": "#00479c",
30                        "on-secondary-container": "#00311f",
31                        "on-error-container": "#ffdad6",
32                        "surface-bright": "#31394d",
33                        "on-tertiary-fixed": "#001a42",
34                        "surface-dim": "#0b1326",
35                        "secondary-fixed": "#6ffbbe",
36                        "surface-container-low": "#131b2e",
37                        "primary-fixed-dim": "#a0c9ff",
38                        "on-error": "#690005",
39                        "tertiary-fixed": "#d8e2ff",
40                        "primary-fixed": "#d2e4ff",
41                        "outline-variant": "#42474f",
42                        "on-primary-fixed": "#001c37",
43                        "tertiary-fixed-dim": "#adc6ff",
44                        "surface-tint": "#a0c9ff",
45                        "on-surface": "#dae2fd",
46                        "on-surface-variant": "#c2c7d1",
47                        "surface-container": "#171f33",
48                        "surface-container-high": "#222a3d",
49                        "secondary": "#4edea3",
50                        "on-tertiary-container": "#9abaff",
51                        "error-container": "#93000a",
52                        "surface-variant": "#2d3449",
53                        "on-tertiary-fixed-variant": "#004395",
54                        "on-primary-fixed-variant": "#07497d",
55                        "inverse-on-surface": "#283044",
56                        "outline": "#8c919a",
57                        "primary-container": "#0f4c81",
58                        "surface": "#0b1326",
59                        "on-primary": "#00325a",
60                        "on-primary-container": "#8ebdf9",
61                        "inverse-surface": "#dae2fd",
62                        "error": "#ffb4ab",
63                        "on-background": "#dae2fd",
64                        "primary": "#a0c9ff",
65                        "secondary-container": "#00a572",
66                        "on-secondary-fixed-variant": "#005236",
67                        "on-secondary": "#003824"
68                    },
69                    "borderRadius": {
70                        "DEFAULT": "0.125rem",
71                        "lg": "0.25rem",
72                        "xl": "0.5rem",
73                        "full": "0.75rem"
74                    },
75                    "spacing": {
76                        "md": "1.5rem",
77                        "xl": "4rem",
78                        "sm": "1rem",
79                        "margin": "32px",
80                        "lg": "2.5rem",
81                        "base": "4px",
82                        "xs": "0.5rem",
83                        "gutter": "24px"
84                    },
85                    "fontFamily": {
86                        "label-sm": ["Space Grotesk"],
87                        "body-lg": ["Space Grotesk"],
88                        "display-xl": ["Space Grotesk"],
89                        "headline-lg": ["Space Grotesk"],
90                        "mono-data": ["Space Grotesk"],
91                        "body-md": ["Space Grotesk"],
92                        "headline-md": ["Space Grotesk"]
93                    },
94                    "fontSize": {
95                        "label-sm": ["13px", { "lineHeight": "1.0", "letterSpacing": "0.05em", "fontWeight": "600" }],
96                        "body-lg": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }],
97                        "display-xl": ["48px", { "lineHeight": "1.1", "fontWeight": "700" }],
98                        "headline-lg": ["32px", { "lineHeight": "1.2", "fontWeight": "600" }],
99                        "mono-data": ["14px", { "lineHeight": "1.4", "fontWeight": "400" }],
100                        "body-md": ["16px", { "lineHeight": "1.5", "fontWeight": "400" }],
101                        "headline-md": ["24px", { "lineHeight": "1.3", "fontWeight": "500" }]
102                    }
103                }
104            }
105        }
106    </script>
106
107<style>
108        .material-symbols-outlined {
109            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
110        }
111    </style>
112</head>
113<body class="bg-background text-on-background min-h-screen flex flex-col font-body-md text-body-md selection:bg-primary-container selection:text-on-primary-container">
114<header class="site-header docked full-width top-0 sticky bg-slate-950/80 backdrop-blur-md border-b border-blue-900/30 shadow-[0_4px_20px_-5px_rgba(15,76,129,0.3)] z-50">
115
116<div class="flex flex-row justify-between items-center w-full px-6 py-4 max-w-screen-2xl mx-auto relative">
117    <a class="text-2xl font-bold tracking-tighter text-blue-500 dark:text-blue-400 flex items-center gap-2 font-['Space_Grotesk'] z-10" href="index.html">
118        <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">memory</span>
119        HWSec-CSIC
120    </a>
121    
122    <!-- Burger Menu: Pushed to right via flex-row and ml-auto -->
123    <button class="menu-toggle md:hidden ml-auto z-10" aria-label="Toggle navigation" aria-expanded="false" aria-controls="primary-nav">
124        <span class="burger" aria-hidden="true">
125            <span class="bar bar1"></span>
126            <span class="bar bar2"></span>
127            <span class="bar bar3"></span>
128        </span>
129    </button>
130    
131    <!-- Navigation Menu -->
132    <nav id="primary-nav" class="site-nav hidden md:flex w-full md:w-auto flex-col md:flex-row gap-6 md:gap-8 items-center font-['Space_Grotesk'] absolute md:static top-[72px] left-0 bg-slate-950 md:bg-transparent p-6 md:p-0 z-50 border-b md:border-none border-blue-900/30 shadow-lg md:shadow-none" role="navigation">
133        <a class="text-slate-400 transition-colors font-label-sm text-label-sm nav-link" href="index.html">About</a>
134        <a class="text-slate-400 transition-colors font-label-sm text-label-sm nav-link" href="team.html">Team</a>
135        <a class="text-slate-400 transition-colors font-label-sm text-label-sm nav-link" href="publications.html">Publications</a>
136        <a class="text-slate-400 transition-colors font-label-sm text-label-sm nav-link" href="projects.html">Projects</a>
137        
138        <!-- Mobile ONLY Contact Button (hidden on desktop, shows in burger) -->
139        <a class="md:hidden mt-2 w-full text-center inline-flex items-center justify-center bg-primary-container text-on-primary-container font-label-sm text-label-sm px-4 py-2 rounded border border-primary/20" href="contact.html">
140            Contact Us
141        </a>
142    </nav>
143    
144    <!-- Added md:ml-8 to push it away from the Projects link -->
145    <div class="hidden md:flex items-center justify-end gap-3 z-10 md:ml-8">
146        <a class="inline-flex items-center justify-center bg-primary-container text-on-primary-container font-label-sm text-label-sm px-4 py-2 rounded border border-primary/20 hover:brightness-110 transition-all duration-200" href="contact.html">
147            Contact Us
148        </a>
149    </div>
150</div>
151
152
153<main class="flex-grow flex flex-col w-full">
154    
155    <section class="w-full bg-background border-b border-surface-variant relative overflow-hidden">
156        <div class="max-w-screen-2xl mx-auto px-6 py-xl relative z-10 flex flex-col gap-sm">
157            <h1 class="font-display-xl text-display-xl text-primary">Get in Touch</h1>
158            <p class="font-body-lg text-body-lg text-on-surface-variant max-w-3xl">
159                Have questions about our research, publications, or potential collaborations? We would love to hear from you.
160            </p>
161        </div>
162    </section>
163
164    <section class="max-w-screen-2xl w-full mx-auto px-6 py-12 md:py-16 grid grid-cols-1 lg:grid-cols-12 gap-12">
165        
166        <aside class="col-span-1 lg:col-span-4 flex flex-col">
167            <div class="flex flex-col gap-8">
168                <div class="flex items-start gap-4">
169                    <div class="w-12 h-12 rounded-lg bg-surface-container border border-primary/20 flex items-center justify-center text-secondary shrink-0 shadow-inner">
170                        <span class="material-symbols-outlined text-[24px]">location_on</span>
171                    </div>
172                    <div class="flex flex-col pt-1">
173                        <h4 class="text-xl font-bold text-on-surface mb-2 tracking-tight">Our Location</h4>
174                        <p class="text-on-surface-variant text-base leading-relaxed">
175                            Instituto de Microelectrónica<br>de Sevilla (IMSE-CNM)<br>
176                            Américo Vespucio, 28<br>
177                            Sevilla TechPark, 41092 Sevilla · Spain
178                        </p>
179                    </div>
180                </div>
181
182                <div class="flex items-start gap-4">
183                    <div class="w-12 h-12 rounded-lg bg-surface-container border border-primary/20 flex items-center justify-center text-emerald-400 shrink-0 shadow-inner">
184                        <span class="material-symbols-outlined text-[24px]">call</span>
185                    </div>
186                    <div class="flex flex-col pt-1">
187                        <h4 class="text-xl font-bold text-on-surface mb-2 tracking-tight">Phone</h4>
188                        <p class="text-on-surface-variant text-base">+34 954 466 666</p>
189                    </div>
190                </div>
191            </div>
192            
193            <div class="mt-10 rounded-xl border border-outline-variant/30 overflow-hidden shadow-[0_0_15px_rgba(0,0,0,0.5)] h-64 md:h-80 w-full relative group">
194                <iframe 
195                    src="https://maps.google.com/maps?q=Instituto%20de%20Microelectronica%20de%20Sevilla%20IMSE-CNM&t=&z=15&ie=UTF8&iwloc=&output=embed" 
196                    class="absolute top-0 left-0 w-full h-full border-0 grayscale opacity-80 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-500" 
197                    allowfullscreen="" 
198                    loading="lazy" 
199                    referrerpolicy="no-referrer-when-downgrade">
200                </iframe>
201            </div>
202        </aside>
203
204        <div class="col-span-1 lg:col-span-8">
205            <div class="bg-surface-container border border-primary/10 rounded-xl p-8 md:p-10 relative overflow-hidden shadow-2xl">
206                <div class="absolute left-0 top-0 bottom-0 w-1.5 bg-primary opacity-80"></div>
207                
208                <form id="contact-form" action="https://api.web3forms.com/submit" method="POST" class="grid grid-cols-1 md:grid-cols-2 gap-8">
209                    <input type="hidden" name="access_key" value="02c71a7c-a3b8-47b5-86c8-956b9497e57f">
210
211                    <div class="flex flex-col gap-2">
212                        <label for="name" class="text-sm font-bold text-primary uppercase tracking-widest">Full Name</label>
213                        <input type="text" id="name" name="name" required placeholder="Dr. Jane Doe"
214                            class="bg-surface border border-outline-variant text-on-surface rounded p-4 focus:border-secondary focus:ring-1 focus:ring-secondary focus:outline-none transition-all placeholder:text-slate-600 shadow-inner">
215                    </div>
216                    
217                    <div class="flex flex-col gap-2">
218                        <label for="email" class="text-sm font-bold text-primary uppercase tracking-widest">Your Email Address</label>
219                        <input type="email" id="email" name="email" required placeholder="[email protected]"
220                            class="bg-surface border border-outline-variant text-on-surface rounded p-4 focus:border-secondary focus:ring-1 focus:ring-secondary focus:outline-none transition-all placeholder:text-slate-600 shadow-inner">
221                    </div>
222
223                    <div class="flex flex-col gap-2 md:col-span-2">
224                        <label for="subject" class="text-sm font-bold text-primary uppercase tracking-widest">Subject</label>
225                        <input type="text" id="subject" name="subject" placeholder="Research Inquiry"
226                            class="bg-surface border border-outline-variant text-on-surface rounded p-4 focus:border-secondary focus:ring-1 focus:ring-secondary focus:outline-none transition-all placeholder:text-slate-600 shadow-inner">
227                    </div>
228
229                    <div class="flex flex-col gap-2 md:col-span-2">
230                        <label for="message" class="text-sm font-bold text-primary uppercase tracking-widest">Message</label>
231                        <textarea id="message" name="message" rows="7" required placeholder="How can we help you?"
232                                class="bg-surface border border-outline-variant text-on-surface rounded p-4 focus:border-secondary focus:ring-1 focus:ring-secondary focus:outline-none transition-all resize-none placeholder:text-slate-600 shadow-inner"></textarea>
233                    </div>
234
235                    <input type="checkbox" name="botcheck" class="hidden" style="display: none;">
236
237                    <div class="md:col-span-2 flex flex-col lg:flex-row items-center justify-between gap-6 mt-4">
238        
239                    <div class="w-full lg:w-auto flex justify-center lg:justify-start">
240                        <div class="h-captcha" data-captcha="true"></div>
241                    </div>
242
243                    <button id="submit-btn" type="submit" class="w-full lg:w-auto inline-flex items-center justify-center gap-3 px-8 py-4 rounded bg-primary-container text-on-primary-container font-bold text-base hover:brightness-125 hover:shadow-[0_0_20px_rgba(15,76,129,0.5)] transition-all duration-300 shrink-0">
244                        <span id="submit-text">Send Message</span>
245                        <span id="submit-icon" class="material-symbols-outlined text-[20px]">send</span>
246                    </button>
247                    
248                </div>
249                </form>
250            </div>
251        </div>
252    </section>
253
254    <div id="success-modal" class="fixed inset-0 z-[100] flex items-center justify-center bg-background/80 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300">
255    <div id="success-modal-content" class="bg-surface-container border border-primary/20 rounded-xl p-8 max-w-md w-full mx-4 shadow-2xl transform scale-95 transition-transform duration-300 flex flex-col items-center text-center">
256        <div class="w-16 h-16 rounded-full bg-secondary/20 text-secondary flex items-center justify-center mb-6 shadow-inner">
257            <span class="material-symbols-outlined text-4xl">check_circle</span>
258        </div>
259        <h3 class="font-headline-lg text-2xl text-on-surface mb-2">Transmission Successful</h3>
260        <p class="text-on-surface-variant font-body-md mb-8 leading-relaxed">Thank you for reaching out. The HWSec-CSIC team will review your inquiry and respond shortly.</p>
261        <button onclick="closeModal()" class="px-6 py-3 rounded bg-surface border border-outline-variant text-on-surface hover:bg-surface-variant transition-colors w-full font-bold uppercase tracking-wider text-sm shadow-sm">
262            Acknowledge
263        </button>
264    </div>
265</div>
266
267</main>
268
269<footer class="w-full border-t border-blue-900/20 bg-slate-950 mt-auto">
270<div class="grid grid-cols-1 lg:grid-cols-3 gap-12 px-8 py-12 max-w-screen-2xl mx-auto font-['Space_Grotesk'] text-sm text-blue-600 dark:text-blue-400">
271    
272    <div class="flex flex-col gap-4">
273        <span class="text-lg font-bold text-blue-500 flex items-center gap-2">
274            <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">memory</span>
275            HWSec-CSIC
276        </span>
277        <p class="text-slate-500 leading-relaxed max-w-xs">
278            Trusted Systems-on-Chip based on CMOS and integrated photonics technologies
279        </p>
280        <div class="text-slate-500 flex flex-col gap-1 mt-2 text-[13px]">
281            <span class="font-semibold text-slate-400">Instituto de Microelectrónica de Sevilla</span>
282            <span>Cl Américo Vespucio, 28.</span>
283            <span>Sevilla TechPark, 41092 Sevilla · Spain</span>
284            <span class="flex items-center gap-2 mt-1">
285                <span class="material-symbols-outlined text-[16px]">call</span> +34 954 466 666
286            </span>
287        </div>
288    </div>
289
290    <div class="flex flex-col gap-3 lg:mx-auto">
291        <h4 class="text-emerald-400 font-semibold mb-1">Institutions</h4>
292        <a class="text-slate-500 hover:text-emerald-400 transition-colors flex items-start gap-2" href="http://www.imse-cnm.csic.es/" target="_blank" rel="noopener noreferrer">
293            <span class="material-symbols-outlined text-[18px] shrink-0">science</span>
294            <span>Instituto de Microelectrónica de Sevilla <br> (IMSE-CNM, CSIC, US)</span>
295        </a>
296        <a class="text-slate-500 hover:text-emerald-400 transition-colors flex items-start gap-2" href="https://www.csic.es/" target="_blank" rel="noopener noreferrer">
297            <span class="material-symbols-outlined text-[18px] shrink-0">account_balance</span>
298            <span>Consejo Superior de Investigaciones Científicas</span>
299        </a>
300        <a class="text-slate-500 hover:text-emerald-400 transition-colors flex items-start gap-2" href="https://www.us.es/" target="_blank" rel="noopener noreferrer">
301            <span class="material-symbols-outlined text-[18px] shrink-0">school</span>
302            <span>Universidad de Sevilla</span>
303        </a>
304    </div>
305
306    <div class="flex flex-col gap-4 lg:items-end text-left lg:text-right">
307        <div class="flex flex-col gap-2 lg:items-end">
308            <h4 class="text-emerald-400 font-semibold mb-2">Connect</h4>
309            <div class="flex gap-4 mt-3 lg:justify-end">
310                <a class="text-slate-500 hover:text-emerald-400 transition-colors" href="https://github.com/HWSec-CSIC" title="GitHub Repository">
311                    <svg class="w-[20px] h-[20px]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158
311-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
312                </a>
313                <a class="text-slate-500 hover:text-emerald-400 transition-colors" href="https://www.linkedin.com/company/instituto-de-microelectr%C3%B3nica-de-sevilla-imse-cnm/" title="LinkedIn Profile">
314                    <svg class="w-[20px] h-[20px]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path></svg>
315                </a>
316                <a class="text-slate-500 hover:text-emerald-400 transition-colors" href="https://gitlab.com/groups/hwsec" title="GitLab Repository">
317                    <!-- GitLab SVG Icon -->
318                    <svg class="w-[20px] h-[20px]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
319                        <path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.91 2a.41.41 0 0 1 .48 0L12 6.8l6.61-4.81a.41.41 0 0 1 .48 0 .42.42 0 0 1 .2.16l2.44 7.51 1.22 3.78a.84.84 0 0 1-.3.94z" />
320                    </svg>
321                </a>
322            </div>
323        </div>
324        
325        <div class="mt-6 lg:mt-8">
326            <a href="http://www.imse-cnm.csic.es/" target="_blank" rel="noopener noreferrer">
327                <img src="assets/images/marca_imse_blanco.png" alt="IMSE-CNM Logo" class="h-14 w-auto opacity-70 hover:opacity-100 transition-opacity duration-300">
328            </a>
329        </div>
330    </div>
331
332    <div class="col-span-1 lg:col-span-3 mt-4 pt-8 border-t border-blue-900/10 text-center">
333        <p class="text-slate-500">© 2026 HWSec-CSIC. All rights reserved.</p>
334    </div>
335</div>
336</footer>
337
338<script src="/js/script.js" defer></script>
338
339
340<script>
341    const form = document.getElementById('contact-form');
342    const submitBtn = document.getElementById('submit-btn');
343    const submitText = document.getElementById('submit-text');
344    const submitIcon = document.getElementById('submit-icon');
345    const modal = document.getElementById('success-modal');
346    const modalContent = document.getElementById('success-modal-content');
347
348    form.addEventListener('submit', function(e) {
349        e.preventDefault(); // Halt default synchronous redirect
350        
351        // Assert lock on transmission state
352        submitBtn.disabled = true;
353        submitBtn.classList.add('opacity-75', 'cursor-not-allowed');
354        submitText.innerText = "Encrypting & Sending...";
355        submitIcon.innerText = "sync";
356        submitIcon.classList.add('animate-spin');
357
358        // Extract DOM payload, including injected hCaptcha token
359        const formData = new FormData(form);
360        const object = Object.fromEntries(formData);
361        const json = JSON.stringify(object);
362
363        fetch('https://api.web3forms.com/submit', {
364            method: 'POST',
365            headers: {
366                'Content-Type': 'application/json',
367                'Accept': 'application/json'
368            },
369            body: json
370        })
371        .then(async (response) => {
372            let jsonResponse = await response.json();
373            if (response.status === 200) {
374                // Wipe form vectors and reset captcha token state
375                form.reset();
376                if (typeof hcaptcha !== 'undefined') {
377                    hcaptcha.reset(); 
378                }
379                openModal();
380            } else {
381                console.error("API Gateway Error:", jsonResponse);
382                alert("Transmission failed: " + (jsonResponse.message || "Unknown anomaly"));
383            }
384        })
385        .catch(error => {
386            console.error("Network Architecture Fault:", error);
387            alert("A network timeout occurred. Check your connection layer and retry.");
388        })
389        .finally(() => {
390            // Release lock on transmission state
391            submitBtn.disabled = false;
392            submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');
393            submitText.innerText = "Send Message";
394            submitIcon.innerText = "send";
395            submitIcon.classList.remove('animate-spin');
396        });
397    });
398
399    function openModal() {
400        modal.classList.remove('opacity-0', 'pointer-events-none');
401        modal.classList.add('opacity-100');
402        modalContent.classList.remove('scale-95');
403        modalContent.classList.add('scale-100');
404    }
405
406    function closeModal() {
407        modal.classList.remove('opacity-100');
408        modal.classList.add('opacity-0', 'pointer-events-none');
409        modalContent.classList.remove('scale-100');
410        modalContent.classList.add('scale-95');
411    }
412</script>
412
413
414</body>
415</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.