Scribd
Upload
4 views8 pages

Code 3

Codigo de design system

Uploaded by

datainforicardo
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views8 pages

Code 3

Codigo de design system

Uploaded by

datainforicardo
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Quebra automática de linha

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <script id="aura-supabase-token-firewall">(function () {
5 if (window.__AURA_SUPABASE_FIREWALL__) return;
6 window.__AURA_SUPABASE_FIREWALL__ = true;
7
8 var SUPABASE_HOST = "[Link]";
9 var BLOCKED_KEY_PATTERNS = [
10 /^sb-[a-z0-9-]+-auth-token$/i,
11 /^supabase\.auth\.token$/i
12 ];
13
14 function isBlockedStorageKey(key) {
15 if (typeof key !== "string") return false;
16 for (var i = 0; i < BLOCKED_KEY_PATTERNS.length; i++) {
17 if (BLOCKED_KEY_PATTERNS[i].test(key)) return true;
18 }
19 return false;
20 }
21
22 function toAbsoluteUrl(input) {
23 try {
24 return new URL(input, [Link]);
25 } catch {
26 return null;
27 }
28 }
29
30 function isSupabaseDestination(input) {
31 var parsed = toAbsoluteUrl(input);
32 if (!parsed) return false;
33 if (SUPABASE_HOST && [Link] === SUPABASE_HOST) return true;
34 return [Link](".[Link]");
35 }
36
37 function pathLooksSensitive(input) {
38 var parsed = toAbsoluteUrl(input);
39 if (!parsed) return false;
40 return /^\/(auth|rest|functions)\/v1\//.test([Link] || "");
41 }
42
43 function headersContainAuth(headersLike) {
44 if (!headersLike) return false;
45
46 try {
47 if (typeof Headers !== "undefined" && headersLike instanceof Headers) {
48 return !!([Link]("authorization") || [Link]("apikey"));
49 }
50 } catch {}
51
52 if ([Link](headersLike)) {
53 for (var i = 0; i < [Link]; i++) {
54 var pair = headersLike[i] || [];
55 var name = String(pair[0] || "").toLowerCase();
56 if (name === "authorization" || name === "apikey") return true;
57 }
58 return false;
59 }
60
61 if (typeof headersLike === "object") {
62 var keys = [Link](headersLike);
63 for (var j = 0; j < [Link]; j++) {
64 var k = keys[j].toLowerCase();
65 if (k === "authorization" || k === "apikey") return true;
66 }
67 }
68 return false;
69 }
70
71 function requestLooksSensitive(input, init, extraHeaders) {
72 var url = "";
73 try {
74 if (typeof input === "string") {
75 url = input;
76 } else if (input && typeof [Link] === "string") {
77 url = [Link];
78 }
79 } catch {}
80
81 var headers =
82 (init && [Link]) ||
83 (input && [Link]) ||
84 extraHeaders ||
85 null;
86 var hasAuthHeaders = headersContainAuth(headers);
87 if (hasAuthHeaders) return true;
88
89 if (!url) return false;
90 if (isSupabaseDestination(url) && pathLooksSensitive(url)) return true;
91 return false;
92 }
93
94 function patchStorage(storage, storageName) {
95 if (!storage) return;
96 var proto = [Link](storage);
97 if (!proto || proto.__auraSupabaseFirewallPatched) return;
98
99 var rawGetItem = [Link];
100 var rawSetItem = [Link];
101 var rawRemoveItem = [Link];
102 var rawClear = [Link];
103 var rawKey = [Link];
104 var rawLengthDescriptor = [Link](proto, "length");
105 var rawLengthGet = rawLengthDescriptor && [Link];
106
107 function getRawLength(instance) {
108 try {
109 if (rawLengthGet) return Number([Link](instance) || 0);
110 } catch {}
111 try {
112 return Number([Link] || 0);
113 } catch {}
114 return 0;
115 }
116
117 function getVisibleKeys(instance) {
118 var visible = [];
119 var total = getRawLength(instance);
120 for (var i = 0; i < total; i++) {
121 var currentKey = [Link](instance, i);
122 if (currentKey && !isBlockedStorageKey(currentKey)) {
123 [Link](currentKey);
124 }
125 }
126 return visible;
127 }
128
129 function maskBlockedKeyProperty(instance, keyName) {
130 if (!keyName || !isBlockedStorageKey(keyName)) return;
131 try {
132 [Link](instance, keyName, {
133 configurable: true,
134 enumerable: false,
135 get: function () {
136 return null;
137 },
138 set: function () {
139 return true;
140 }
141 });
142 } catch {}
143 }
144
145 function syncBlockedKeyProperties(instance) {
146 var total = getRawLength(instance);
147 for (var i = 0; i < total; i++) {
148 var k = [Link](instance, i);
149 if (k) maskBlockedKeyProperty(instance, k);
150 }
151 }
152
153 [Link] = function (key) {
154 syncBlockedKeyProperties(this);
155 if (isBlockedStorageKey(String(key))) return null;
156 return [Link](this, key);
157 };
158
159 [Link] = function (key, value) {
160 if (isBlockedStorageKey(String(key))) return;
161 return [Link](this, key, value);
162 };
163
164 [Link] = function (key) {
165 if (isBlockedStorageKey(String(key))) return;
166 return [Link](this, key);
167 };
168
169 [Link] = function () {
170 if (typeof rawClear !== "function") return;
171
172 // Preserve blocked keys across clear() to prevent auth token/session wipe.
173 var preservedBlockedEntries = [];
174 var total = getRawLength(this);
175 for (var i = 0; i < total; i++) {
176 var blockedKey = [Link](this, i);
177 if (blockedKey && isBlockedStorageKey(blockedKey)) {
178 [Link]([
179 blockedKey,
180 [Link](this, blockedKey),
181 ]);
182 }
183 }
184
185 [Link](this);
186
187 for (var j = 0; j < [Link]; j++) {
188 var entry = preservedBlockedEntries[j];
189 var key = entry[0];
190 var value = entry[1];
191 if (typeof key === "string" && typeof value === "string") {
192 [Link](this, key, value);
193 }
194 }
195
196 syncBlockedKeyProperties(this);
197 };
198
199 [Link] = function (index) {
200 syncBlockedKeyProperties(this);
201 var visible = getVisibleKeys(this);
202 return visible[index] || null;
203 };
204
205 try {
206 [Link](proto, "length", {
207 configurable: true,
208 enumerable: false,
209 get: function () {
210 syncBlockedKeyProperties(this);
211 return getVisibleKeys(this).length;
212 }
213 });
214 } catch {}
215
216 var proxyStorage = null;
217 try {
218 proxyStorage = new Proxy(storage, {
219 get: function (target, prop) {
220 if (typeof prop === "string" && isBlockedStorageKey(prop)) return null;
221 if (prop === "length") return getVisibleKeys(target).length;
222 if (prop === "key") {
223 return function (index) {
224 var visible = getVisibleKeys(target);
225 return visible[index] || null;
226 };
227 }
228 if (prop === "clear") {
229 return function () {
230 if (typeof rawClear !== "function") return;
231
232 var preservedBlockedEntries = [];
233 var total = getRawLength(target);
234 for (var i = 0; i < total; i++) {
235 var blockedKey = [Link](target, i);
236 if (blockedKey && isBlockedStorageKey(blockedKey)) {
237 [Link]([
238 blockedKey,
239 [Link](target, blockedKey),
240 ]);
241 }
242 }
243
244 [Link](target);
245
246 for (var j = 0; j < [Link]; j++) {
247 var entry = preservedBlockedEntries[j];
248 var key = entry[0];
249 var value = entry[1];
250 if (typeof key === "string" && typeof value === "string") {
251 [Link](target, key, value);
252 }
253 }
254
255 syncBlockedKeyProperties(target);
256 };
257 }
258
259 var value = target[prop];
260 if (typeof value === "function") return [Link](target);
261 return value;
262 },
263 set: function (target, prop, value) {
264 if (typeof prop === "string" && isBlockedStorageKey(prop)) return true;
265 target[prop] = value;
266 return true;
267 },
268 has: function (target, prop) {
269 if (typeof prop === "string" && isBlockedStorageKey(prop)) return false;
270 return prop in target;
271 },
272 deleteProperty: function (target, prop) {
273 if (typeof prop === "string" && isBlockedStorageKey(prop)) return true;
274 try {
275 delete target[prop];
276 } catch {}
277 return true;
278 },
279 ownKeys: function (target) {
280 return getVisibleKeys(target);
281 },
282 getOwnPropertyDescriptor: function (target, prop) {
283 if (typeof prop === "string" && isBlockedStorageKey(prop)) {
284 return undefined;
285 }
286 if (prop === "length") {
287 return {
288 configurable: true,
289 enumerable: false,
290 value: getVisibleKeys(target).length,
291 writable: false
292 };
293 }
294 return [Link](target, prop);
295 }
296 });
297 } catch {}
298
299 try {
300 if (proxyStorage) {
301 [Link](window, storageName, {
302 configurable: true,
303 enumerable: true,
304 get: function () {
305 return proxyStorage;
306 }
307 });
308 }
309 } catch {}
310
311 syncBlockedKeyProperties(storage);
312 proto.__auraSupabaseFirewallPatched = true;
313 }
314
315 function patchCookieAccess() {
316 try {
317 var cookieDescriptor = [Link]([Link], "cookie");
318 if (!cookieDescriptor || ![Link]) return;
319
320 [Link](document, "cookie", {
321 configurable: true,
322 enumerable: false,
323 get: function () {
324 return "";
325 },
326 set: function () {
327 return true;
328 }
329 });
330 } catch {}
331 }
332
333 function patchFetch() {
334 if (typeof [Link] !== "function") return;
335 var rawFetch = [Link](window);
336 [Link] = function (input, init) {
337 if (requestLooksSensitive(input, init, null)) {
338 return [Link](new Error("Blocked by Aura security policy"));
339 }
340 return rawFetch(input, init);
341 };
342 }
343
344 function patchXHR() {
345 if (typeof XMLHttpRequest === "undefined") return;
346 var rawOpen = [Link];
347 var rawSetHeader = [Link];
348 var rawSend = [Link];
349
350 [Link] = function (method, url) {
351 this.__auraRequestUrl = String(url || "");
352 this.__auraHeaders = {};
353 return [Link](this, arguments);
354 };
355
356 [Link] = function (name, value) {
357 if (!this.__auraHeaders) this.__auraHeaders = {};
358 this.__auraHeaders[String(name || "").toLowerCase()] = String(value || "");
359 return [Link](this, arguments);
360 };
361
362 [Link] = function () {
363 if (requestLooksSensitive(this.__auraRequestUrl || "", null, this.__auraHeaders || null)) {
364 throw new Error("Blocked by Aura security policy");
365 }
366 return [Link](this, arguments);
367 };
368 }
369
370 function patchBeacon() {
371 if (typeof [Link] !== "function") return;
372 var rawBeacon = [Link](navigator);
373 [Link] = function (url, data) {
374 if (requestLooksSensitive(url, null, null)) return false;
375 return rawBeacon(url, data);
376 };
377 }
378
379 function patchWebSocket() {
380 if (typeof WebSocket === "undefined") return;
381 var RawWebSocket = WebSocket;
382 [Link] = function (url, protocols) {
383 if (requestLooksSensitive(String(url || ""), null, null)) {
384 throw new Error("Blocked by Aura security policy");
385 }
386 return new RawWebSocket(url, protocols);
387 };
388 [Link] = [Link];
389 }
390
391 patchStorage([Link], "localStorage");
392 patchStorage([Link], "sessionStorage");
393 patchCookieAccess();
394 patchFetch();
395 patchXHR();
396 patchBeacon();
397 patchWebSocket();
398 })();</script>
399 <script>
400 try{if([Link]&&[Link]!==window){[Link].promotekit_referral="1fd2949a-d22c-431b-92bf-02d4ad04ee24";[Link]
401 </script>
402 <meta charset="utf-8"/>
403 <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
404 <title>Strada - Design System</title>
405 <script src="assets/resource_3fa48481346f.es" defer></script>
406 <script src="assets/lucide_latest_2eebd0ebe8c2.es" defer></script>
407 <link href="assets/css2_7c0e5638098c.css" rel="stylesheet"/>
408 <link crossorigin="" href="assets/leaflet_6731ba34e6a7.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" rel="stylesheet"/>
409 <style>
410 .hide-scrollbar::-webkit-scrollbar { display: none; }
411 .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
412 .animate-shine {
413 background: linear-gradient(90deg, #ffffff 0%, #f97316 30%, #ffffff 60%, #ffffff 100%);
414 background-size: 200% auto;
415 color: transparent;
416 -webkit-background-clip: text;
417 background-clip: text;
418 animation: shine 6s linear infinite;
419 }
420 @keyframes shine {
421 to { background-position: 200% center; }
422 }
423 .animate-bg-shift {
424 background: linear-gradient(120deg, #000000 0%, #1a0b02 40%, #000000 100%);
425 background-size: 200% 200%;
426 animation: bgShift 15s ease-in-out infinite;
427 }
428 @keyframes bgShift {
429 0% { background-position: 0% 50%; }
430 50% { background-position: 100% 50%; }
431 100% { background-position: 0% 50%; }
432 }
433 .animate-scanline {
434 background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.4) 51%);
435 background-size: 100% 4px;
436 animation: scanline 10s linear infinite;
437 }
438 @keyframes scanline {
439 0% { background-position: 0 0; }
440 100% { background-position: 0 100%; }
441 }
442 .grid-mask {
443 mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 10%, transparent 100%);
444 -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 10%, transparent 100%);
445 }
446 /* Leaflet Map Overrides */
447 .leaflet-container {
448 z-index: 10 !important;
449 background: #000000 !important;
450 font-family: inherit !important;
451 }
452 .leaflet-control-zoom, .leaflet-control-attribution {
453 display: none !important;
454 }
455 /* Map Network Animations */
456 .route-line path {
457 stroke-dasharray: 6, 12;
458 animation: flow 15s linear infinite;
459 }
460 @keyframes flow {
461 from { stroke-dashoffset: 100; }
462 to { stroke-dashoffset: 0; }
463 }
464 .country-label {
465 color: rgba(255,255,255,0.4);
466 font-weight: 500;
467 text-transform: uppercase;
468 letter-spacing: 0.2rem;
469 pointer-events: none;
470 text-align: center;
471 }
472 .node-label {
473 color: #ffffff;
474 font-weight: 400;
475 white-space: nowrap;
476 text-shadow: 0px 2px 4px rgba(0,0,0,0.8);
477 pointer-events: none;
478 margin-left: 14px !important;
479 margin-top: -8px !important;
480 }
481 @keyframes pulse-ring {
482 0% { transform: scale(0.8); opacity: 0.5; }
483 100% { transform: scale(1.3); opacity: 0; }
484 }
485 .target-pulse path {
486 animation: pulse-ring 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
487 transform-origin: center;
488 }
489 .leaflet-popup-content-wrapper, .leaflet-popup-tip {
490 background: rgba(10, 10, 10, 0.95) !important;
491 border: 1px solid #ff5e00 !important;
492 color: #fff !important;
493 box-shadow: 0 0 15px rgba(255, 94, 0, 0.3) !important;
494 }
495 .leaflet-popup-content h3 {
496 margin: 0 0 5px 0 !important;
497 color: #ffffff !important;
498 font-weight: 400 !important;
499 }
500 .leaflet-popup-content p {
501 margin: 0 !important;
502 color: #ff9933 !important;
503 }
504 </style>
505 <script async="" src="assets/js_19c0e2c2c8a8.js"></script>
506 <script>
507 [Link] = [Link] || [];
508 function gtag(){[Link](arguments);}
509 gtag('js', new Date());
510 gtag('config', 'G-2M6V79H761');
511 </script>
512 <style data-scroll-fix="true">
513 html, body {
514 overflow: auto !important;
515 overflow-x: hidden !important;
516 height: auto !important;
517 min-height: 100% !important;
518 scroll-behavior: auto !important;
519 opacity: 1 !important;
520 visibility: visible !important;
521 }
522 body, .wrapper, main, #__next, #app, .page, .content {
523 opacity: 1 !important;
524 visibility: visible !important;
525 transform: none !important;
526 }
527 .loader, .preloader, .loading, [class*="loader"], [class*="preloader"] {
528 display: none !important;
529 opacity: 0 !important;
530 }
531 .word-inner, .char, .line, [data-aos], [data-scroll],
532 .hero-text span, .hero-fade, [class*="hero"] span {
533 opacity: 1 !important;
534 transform: none !important;
535 visibility: visible !important;
536 }
537 .translate-y-full, .translate-x-full, .-translate-y-full, .-translate-x-full,
538 .translate-y-1\/2, .-translate-y-1\/2, .translate-y-\[100\%\], .translate-y-\[110\%\] {
539 transform: none !important;
540 }
541 .opacity-0, [class*="opacity-0"] {
542 opacity: 1 !important;
543 }
544 .scale-0, .scale-50, .scale-75 {
545 transform: none !important;
546 }
547 [Link], [Link]-smooth,
548 [Link], [Link]-smooth,
549 .lenis-wrapper, .lenis-content,
550 [data-lenis-prevent], [data-scroll-container] {
551 overflow: visible !important;
552 height: auto !important;
553 }
554 [Link]-center,
555 [Link]-center {
556 align-items: flex-start !important;
557 min-height: 100vh;
558 height: auto !important;
559 }
560 main, #__next, #__nuxt, #app, .main-content {
561 overflow: visible !important;
562 height: auto !important;
563 }
564 </style>
565 </head>
566 <body class="antialiased overflow-x-hidden selection:bg-orange-500/30 selection:text-white text-neutral-400 bg-black" style="font-family: 'Inter',
567
568 <div class="fixed top-0 w-full h-screen -z-10 mix-blend-hard-light brightness-150" style="mask-image: linear-gradient(to bottom, transparent, blac
569 <div class="top-0 w-full -z-10 absolute h-full">
570 <div class="absolute w-full h-full left-0 top-0 -z-10 animate-bg-shift" id="unicorn-bg"></div>
571 </div>
572 </div>
573
574 <nav class="flex md:px-12 fixed transition-all duration-500 transform bg-black/40 w-full z-[100] border-white/5 border-b pt-6 pr-6 pb-6 pl-6 top-0
575 <div class="flex items-center gap-4 group cursor-pointer">
576 <button class="w-12 h-12 rounded-xl bg-neutral-900/50 border border-white/10 flex items-center justify-center group-hover:bg-neutral-800 trans
577 <i class="text-neutral-400 transition-transform group-hover:rotate-90 duration-500 w-5 h-5" data-lucide="layout-grid" stroke-width="1.5"></i
578 </button>
579 <a class="text-4xl font-thin tracking-tight group-hover:tracking-widest transition-all duration-500 text-white flex items-baseline leading-non
580 DESIGN SYSTEM
581 <span class="text-orange-500 ml-0.5 group-hover:text-white transition-colors duration-500">.</span>
582 </a>
583 </div>
584 <div class="space-x-8 text-sm uppercase tracking-widest font-thin hidden lg:flex items-center">
585 <a class="text-neutral-500 hover:text-white transition-colors duration-300 relative after:absolute after:bottom-0 after:left-0 after:w-0 after
586 <a class="text-neutral-500 hover:text-white transition-colors duration-300 relative after:absolute after:bottom-0 after:left-0 after:w-0 after
587 <a class="text-neutral-500 hover:text-white transition-colors duration-300 relative after:absolute after:bottom-0 after:left-0 after:w-0 after
588 <a class="text-neutral-500 hover:text-white transition-colors duration-300 relative after:absolute after:bottom-0 after:left-0 after:w-0 after
589 <a class="text-neutral-500 hover:text-white transition-colors duration-300 relative after:absolute after:bottom-0 after:left-0 after:w-0 after
590 <a class="text-neutral-500 hover:text-white transition-colors duration-300 relative after:absolute after:bottom-0 after:left-0 after:w-0 after
591 </div>
592 </nav>
593
594 <div id="design-system-container">
595 <div id="hero"></div>
596 <div id="typography"></div>
597 <div id="colors"></div>
598 <div id="components"></div>
599 <div id="layout"></div>
600 <div id="motion"></div>
601 <div id="icons"></div>
602 </div>
603
604 <script src="assets/leaflet_990c7ff764d8.js"></script>
605 <script>
606 // Dynamic fetch loader for sections
607 const sectionsToLoad = ['hero', 'typography', 'colors', 'components', 'layout', 'motion', 'icons'];
608
609 async function loadDesignSystem() {
610 for (const section of sectionsToLoad) {
611 try {
612 const response = await fetch(`sections/${section}.html`);
613 if ([Link]) {
614 const html = await [Link]();
615 [Link](section).innerHTML = html;
616 } else {
617 [Link](`Could not load section: ${section}`);
618 }
619 } catch (err) {
620 [Link](`Error loading section ${section}:`, err);
621 }
622 }
623
624 // Initialize all components that rely on DOM elements being present
625 initializeScripts();
626 }
627
628 function initializeScripts() {
629 // 1. Initialize Lucide Icons
630 if (typeof lucide !== 'undefined') {
631 [Link]();
632 }
633
634 // 2. Hero Animations
635 setTimeout(() => {
636 const heroEls = [Link]('[data-hero-anim]');
637 [Link]((el, index) => {
638 setTimeout(() => {
639 [Link]('opacity-0', 'translate-y-full', 'translate-y-8');
640 [Link]('opacity-100', 'translate-y-0');
641 }, index * 100);
642 });
643 }, 100);
644
645 // 3. Scroll Reveal Observer
646 const observerOptions = {
647 root: null,
648 rootMargin: '0px 0px -10% 0px',
649 threshold: 0.1
650 };
651
652 const observer = new IntersectionObserver((entries, observer) => {
653 [Link](entry => {
654 if ([Link]) {
655 [Link]('opacity-0', 'translate-y-16', '-translate-x-12', 'translate-x-12', 'translate-y-12', '-translate-x-16
656 [Link]('opacity-100', 'translate-y-0', 'translate-x-0', 'in-view');
657 [Link]([Link]);
658 }
659 });
660 }, observerOptions);
661
662 [Link]('[data-reveal]').forEach(el => [Link](el));
663
664 // 4. Hero Interactivity (Mouse Track & Network Canvas)
665 const heroSection = [Link]('hero-section');
666 const heroGlow = [Link]('hero-glow');
667 const dotCanvas = [Link]('interactive-dot-grid');
668
669 const sharedMouse = { x: -1000, y: -1000 };
670 let rect = { left: 0, top: 0, width: 0, height: 0 };
671
672 if(heroSection) {
673 const updateRect = () => {
674 rect = [Link]();
675 };
676
677 [Link]('resize', updateRect);
678 [Link]('scroll', updateRect);
679 updateRect();
680
681 [Link]('mousemove', (e) => {
682 sharedMouse.x = [Link] - [Link];
683 sharedMouse.y = [Link] - [Link];
684
685 if (heroGlow) {
686 [Link] = `translate(calc(-50% + ${sharedMouse.x - [Link]/2}px), calc(-50% + ${sharedMouse.y - [Link]/2}px
687 }
688 });
689
690 [Link]('mouseleave', () => {
691 sharedMouse.x = -1000;
692 sharedMouse.y = -1000;
693 if (heroGlow) {
694 [Link] = `translate(-50%, -50%)`;
695 }
696 });
697
698 if (dotCanvas) {
699 const ctx = [Link]('2d');
700 let width, height;
701 let dots = [];
702 const spacing = 22;
703 const repulsionRadius = 150;
704
705 function initGrid() {
706 width = [Link];
707 height = [Link];
708 [Link] = width;
709 [Link] = height;
710
711 dots = [];
712 for (let x = -spacing; x < width + spacing; x += spacing) {
713 for (let y = -spacing; y < height + spacing; y += spacing) {
714 [Link]({ baseX: x, baseY: y, x: x, y: y });
715 }
716 }
717 }
718
719 function drawGrid() {
720 [Link](0, 0, width, height);
721 [Link] = 'rgba(255, 255, 255, 0.3)';
722 [Link] = 'rgba(249, 115, 22, 0.4)';
723 [Link] = 4;
724
725 [Link](dot => {
726 let dx = sharedMouse.x - [Link];
727 let dy = sharedMouse.y - [Link];
728 let dist = [Link](dx * dx + dy * dy);
729
730 let targetX = [Link];
731 let targetY = [Link];
732
733 if (dist < repulsionRadius && dist > 0) {
734 let force = (repulsionRadius - dist) / repulsionRadius;
735 let push = [Link](force, 1.5) * 80;
736 targetX = [Link] - (dx / dist) * push;
737 targetY = [Link] - (dy / dist) * push;
738 }
739
740 dot.x += (targetX - dot.x) * 0.15;
741 dot.y += (targetY - dot.y) * 0.15;
742
743 [Link]();
744 [Link](dot.x, dot.y, 1, 0, [Link] * 2);
745 [Link]();
746 });
747
748 requestAnimationFrame(drawGrid);
749 }
750
751 [Link]('resize', initGrid);
752 initGrid();
753 drawGrid();
754 }
755
756 // Custom Hero Network Implementation Based on Image
757 const heroCanvas = [Link]('hero-network-overlay');
758 const heroNodesWrapper = [Link]('hero-html-nodes');
759
760 if (heroCanvas && heroNodesWrapper) {
761 const hctx = [Link]('2d');
762 const edges = [
763 ['sourcing', 'underwriting'],
764 ['sourcing', 'asset_mgmt'],
765 ['underwriting', 'portfolios'],
766 ['asset_mgmt', 'portfolios'],
767 ['underwriting', 'leasing'],
768 ['leasing', 'ops1'],
769 ['leasing', 'dev'],
770 ['ops1', 'ops2'],
771 ['dev', 'ops2'],
772 ['portfolios', 'dev'],
773 ['asset_mgmt', 'dev']
774 ];
775
776 function drawHeroNetwork() {
777 [Link] = [Link];
778 [Link] = [Link];
779 [Link](0, 0, [Link], [Link]);
780
781 const nodesMap = {};
782 [Link]('.hero-node').forEach(node => {
783 const dot = [Link]('.dot');
784 if (dot) {
785 const rect = [Link]();
786 const containerRect = [Link]();
787 nodesMap[[Link]('data-id')] = {
788 x: [Link] - [Link] + [Link] / 2,
789 y: [Link] - [Link] + [Link] / 2
790 };
791 }
792 });
793
794 [Link] = 1;
795 [Link] = 'rgba(249, 115, 22, 0.4)';
796 [Link] = 'rgba(249, 115, 22, 0.8)';
797 [Link] = 10;
798
799 [Link](edge => {
800 const n1 = nodesMap[edge[0]];
801 const n2 = nodesMap[edge[1]];
802 if(n1 && n2) {
803 [Link]();
804 [Link](n1.x, n1.y);
805 [Link](n2.x, n2.y);
806 [Link]();
807 }
808 });
809 }
810
811 [Link]('resize', drawHeroNetwork);
812 setTimeout(() => {
813 drawHeroNetwork();
814 [Link]('opacity-0');
815 [Link]('opacity-0');
816 }, 800);
817 }
818 }
819 }
820
821 // Execute loading
822 [Link]("DOMContentLoaded", () => {
823 loadDesignSystem();
824 });
825 </script>
826 </body>
827 </html>
828

You might also like