Consolidate duplicate utility functions into shared modules

Extract repeated helper functions from components into shared utils
(colors.ts, date.ts, file.ts) to reduce duplication:
- isLightColor, parseFilamentColor, hexToColorName → utils/colors.ts
- formatMediaTime, formatDurationFromHours → utils/date.ts
- formatFileSize guard hardened for NaN/negative → utils/file.ts
- formatBytes (ToastContext), formatTime (Timelapse*) deduplicated

Functions with subtly different behavior are intentionally kept local
(formatFilament, formatStorageSize, formatBytes, formatUptime,
formatDateTime, formatDate, formatTimeAgo) to preserve exact UI output.

frontend/src/components/FilamentHoverCard.tsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Droplets, Link2, Copy, Check, Settings2, ExternalLink, Package, Unlink } from 'lucide-react';
+import { isLightColor } from '../utils/colors';
 
 interface FilamentData {
   vendor: 'Bambu Lab' | 'Generic';
@@ -136,17 +137,6 @@ export function FilamentHoverCard({ data, children, disabled, className = '', sp
     return '#22c55e'; // green
   };
 
-  // Determine if color is light (for text contrast on swatch)
-  const isLightColor = (hex: string | null): boolean => {
-    if (!hex) return false;
-    const cleanHex = hex.replace('#', '');
-    const r = parseInt(cleanHex.slice(0, 2), 16);
-    const g = parseInt(cleanHex.slice(2, 4), 16);
-    const b = parseInt(cleanHex.slice(4, 6), 16);
-    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-    return luminance > 0.6;
-  };
-
   const colorHex = data.colorHex ? `#${data.colorHex.replace('#', '')}` : null;
   const assignedRemainingWeight = inventory?.assignedSpool?.remainingWeightGrams ?? null;
 

frontend/src/components/FileManagerModal.tsx

@@ -247,7 +247,6 @@ function formatStorageSize(bytes: number): string {
   return `${mb.toFixed(0)} MB`;
 }
 
-
 function getFileIcon(filename: string, isDirectory: boolean) {
   if (isDirectory) return Folder;
 

frontend/src/components/GitHubBackupSettings.tsx

@@ -37,6 +37,12 @@ import { ConfirmModal } from './ConfirmModal';
 import { useToast } from '../contexts/ToastContext';
 import { formatRelativeTime } from '../utils/date';
 
+function formatDateTime(dateStr: string | null): string {
+  if (!dateStr) return '-';
+  const date = new Date(dateStr);
+  return date.toLocaleString();
+}
+
 interface StatusBadgeProps {
   status: string | null;
 }
@@ -66,12 +72,6 @@ function StatusBadge({ status }: StatusBadgeProps) {
   );
 }
 
-function formatDateTime(dateStr: string | null): string {
-  if (!dateStr) return '-';
-  const date = new Date(dateStr);
-  return date.toLocaleString();
-}
-
 export function GitHubBackupSettings() {
   const queryClient = useQueryClient();
   const { showToast } = useToast();

frontend/src/components/SpoolUsageHistory.tsx

@@ -5,17 +5,16 @@ import { api } from '../api/client';
 import type { SpoolUsageRecord } from '../api/client';
 import { Button } from './Button';
 import { useToast } from '../contexts/ToastContext';
-
-interface SpoolUsageHistoryProps {
-  spoolId: number;
-}
-
 function formatDate(dateStr: string): string {
   const date = new Date(dateStr);
   return date.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: '2-digit' }) +
     ' ' + date.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
 }
 
+interface SpoolUsageHistoryProps {
+  spoolId: number;
+}
+
 const STATUS_COLORS: Record<string, string> = {
   completed: 'text-bambu-green',
   failed: 'text-red-400',

frontend/src/components/TimelapseEditorModal.tsx

@@ -18,6 +18,7 @@ import {
 import { Button } from './Button';
 import { api } from '../api/client';
 import { useToast } from '../contexts/ToastContext';
+import { formatMediaTime } from '../utils/date';
 
 interface TimelapseEditorModalProps {
   archiveId: number;
@@ -28,12 +29,6 @@ interface TimelapseEditorModalProps {
 
 const SPEED_OPTIONS = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4];
 
-function formatTime(seconds: number): string {
-  const mins = Math.floor(seconds / 60);
-  const secs = Math.floor(seconds % 60);
-  return `${mins}:${secs.toString().padStart(2, '0')}`;
-}
-
 export function TimelapseEditorModal({
   archiveId,
   timelapseSrc,
@@ -321,7 +316,7 @@ export function TimelapseEditorModal({
               <Scissors className="w-4 h-4" />
               <span>Trim</span>
               <span className="ml-auto">
-                {formatTime(trimStart)} - {formatTime(trimEnd)} ({formatTime(trimmedDuration)})
+                {formatMediaTime(trimStart)} - {formatMediaTime(trimEnd)} ({formatMediaTime(trimmedDuration)})
               </span>
             </div>
 
@@ -435,7 +430,7 @@ export function TimelapseEditorModal({
             <div className="flex items-center gap-2 text-sm text-bambu-gray">
               <Gauge className="w-4 h-4" />
               <span>Speed</span>
-              <span className="ml-auto">{speed}x (output: {formatTime(outputDuration)})</span>
+              <span className="ml-auto">{speed}x (output: {formatMediaTime(outputDuration)})</span>
             </div>
             <div className="flex gap-1">
               {SPEED_OPTIONS.map((s) => (
@@ -523,10 +518,10 @@ export function TimelapseEditorModal({
           {/* Summary */}
           <div className="p-3 bg-bambu-dark rounded-lg text-sm space-y-1">
             <p className="text-bambu-gray">
-              <span className="text-white">Original:</span> {formatTime(duration)} @ {videoInfo?.width}x{videoInfo?.height}
+              <span className="text-white">Original:</span> {formatMediaTime(duration)} @ {videoInfo?.width}x{videoInfo?.height}
             </p>
             <p className="text-bambu-gray">
-              <span className="text-white">Output:</span> {formatTime(outputDuration)} @ {speed}x speed
+              <span className="text-white">Output:</span> {formatMediaTime(outputDuration)} @ {speed}x speed
               {audioFile && ` + music overlay`}
             </p>
           </div>

frontend/src/components/TimelapseViewer.tsx

@@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from 'react';
 import { X, Download, Film, Play, Pause, SkipBack, SkipForward, Pencil } from 'lucide-react';
 import { Button } from './Button';
 import { TimelapseEditorModal } from './TimelapseEditorModal';
+import { formatMediaTime } from '../utils/date';
 
 interface TimelapseViewerProps {
   src: string;
@@ -97,12 +98,6 @@ export function TimelapseViewer({
     video.currentTime = Math.min(duration, video.currentTime + 5);
   };
 
-  const formatTime = (time: number) => {
-    const minutes = Math.floor(time / 60);
-    const seconds = Math.floor(time % 60);
-    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
-  };
-
   const handleDownload = () => {
     const link = document.createElement('a');
     link.href = src;
@@ -154,7 +149,7 @@ export function TimelapseViewer({
             {/* Progress bar */}
             <div className="flex items-center gap-3">
               <span className="text-xs text-bambu-gray w-12 text-right">
-                {formatTime(currentTime)}
+                {formatMediaTime(currentTime)}
               </span>
               <input
                 type="range"
@@ -168,7 +163,7 @@ export function TimelapseViewer({
                   [&::-webkit-slider-thumb]:cursor-pointer"
               />
               <span className="text-xs text-bambu-gray w-12">
-                {formatTime(duration)}
+                {formatMediaTime(duration)}
               </span>
             </div>
 

frontend/src/contexts/ToastContext.tsx

@@ -2,6 +2,7 @@ import { AlertCircle, CheckCircle, ChevronDown, ChevronUp, Info, Loader2, X, XCi
 import { createContext, useCallback, useContext, useEffect, useRef, useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { api } from '../api/client';
+import { formatFileSize } from '../utils/file';
 
 type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading';
 
@@ -76,14 +77,6 @@ export function ToastProvider({ children }: { children: ReactNode }) {
   const dispatchToastId = 'background-dispatch';
   const lastDispatchSummaryRef = useRef<string | null>(null);
 
-  const formatBytes = useCallback((bytes: number) => {
-    if (!Number.isFinite(bytes) || bytes < 0) return '0 B';
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-    return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
-  }, []);
-
   // Clean up all timeouts on unmount
   useEffect(() => {
     const timeouts = timeoutRefs.current;
@@ -502,7 +495,7 @@ export function ToastProvider({ children }: { children: ReactNode }) {
                           )}
                           {job.status === 'processing' && typeof job.uploadBytes === 'number' && typeof job.uploadTotalBytes === 'number' && job.uploadTotalBytes > 0 && (
                             <div className="text-[11px] text-bambu-gray truncate">
-                              {formatBytes(job.uploadBytes)} / {formatBytes(job.uploadTotalBytes)}
+                              {formatFileSize(job.uploadBytes)} / {formatFileSize(job.uploadTotalBytes)}
                               {typeof job.uploadProgressPct === 'number' ? ` (${job.uploadProgressPct.toFixed(1)}%)` : ''}
                             </div>
                           )}

frontend/src/pages/PrintersPage.tsx

@@ -71,6 +71,7 @@ import { PrintModal } from '../components/PrintModal';
 import { PrinterInfoModal } from '../components/PrinterInfoModal';
 import { getGlobalTrayId } from '../utils/amsHelpers';
 import { getPrinterImage, getWifiStrength } from '../utils/printer';
+import { hexToColorName, parseFilamentColor, isLightColor } from '../utils/colors';
 
 // Complete Bambu Lab filament color mapping by tray_id_name
 // Source: https://github.com/queengooborg/Bambu-Lab-RFID-Library
@@ -334,69 +335,6 @@ function getBambuColorName(trayIdName: string | null | undefined): string | null
   return BAMBU_COLOR_CODE_FALLBACK[colorCode] || null;
 }
 
-// Convert hex color to basic color name
-function hexToBasicColorName(hex: string | null | undefined): string {
-  if (!hex || hex.length < 6) return 'Unknown';
-
-  // Parse RGB from hex (format: RRGGBBAA or RRGGBB)
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-
-  // Calculate HSL for better color classification
-  const max = Math.max(r, g, b) / 255;
-  const min = Math.min(r, g, b) / 255;
-  const l = (max + min) / 2;
-
-  let h = 0;
-  let s = 0;
-
-  if (max !== min) {
-    const d = max - min;
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-
-    const rNorm = r / 255;
-    const gNorm = g / 255;
-    const bNorm = b / 255;
-
-    if (max === rNorm) {
-      h = ((gNorm - bNorm) / d + (gNorm < bNorm ? 6 : 0)) / 6;
-    } else if (max === gNorm) {
-      h = ((bNorm - rNorm) / d + 2) / 6;
-    } else {
-      h = ((rNorm - gNorm) / d + 4) / 6;
-    }
-  }
-
-  // Convert to degrees
-  h = h * 360;
-
-  // Classify by lightness first
-  if (l < 0.15) return 'Black';
-  if (l > 0.85) return 'White';
-
-  // Low saturation = gray
-  if (s < 0.15) {
-    if (l < 0.4) return 'Dark Gray';
-    if (l > 0.6) return 'Light Gray';
-    return 'Gray';
-  }
-
-  // Classify by hue
-  // Brown is orange/yellow hue with lower lightness
-  if (h >= 15 && h < 45 && l < 0.45) return 'Brown';
-  if (h >= 45 && h < 70 && l < 0.40) return 'Brown';
-
-  if (h < 15 || h >= 345) return 'Red';
-  if (h < 45) return 'Orange';
-  if (h < 70) return 'Yellow';
-  if (h < 150) return 'Green';
-  if (h < 200) return 'Cyan';
-  if (h < 260) return 'Blue';
-  if (h < 290) return 'Purple';
-  return 'Pink';
-}
-
 // Format K value with 3 decimal places, default to 0.020 if null
 function formatKValue(k: number | null | undefined): string {
   const value = k ?? 0.020;
@@ -418,25 +356,6 @@ function NozzleBadge({ side }: { side: 'L' | 'R' }) {
   );
 }
 
-// Parse RGBA hex to CSS color (skip if empty or all zeros)
-function parseFilamentColor(rgba: string): string | null {
-  if (!rgba || rgba === '00000000' || rgba.length < 6) return null;
-  const r = rgba.slice(0, 2);
-  const g = rgba.slice(2, 4);
-  const b = rgba.slice(4, 6);
-  const a = rgba.length >= 8 ? parseInt(rgba.slice(6, 8), 16) / 255 : 1;
-  if (a === 0) return null;
-  return `rgba(${parseInt(r, 16)}, ${parseInt(g, 16)}, ${parseInt(b, 16)}, ${a})`;
-}
-
-function isLightFilamentColor(rgba: string): boolean {
-  if (!rgba || rgba.length < 6) return false;
-  const r = parseInt(rgba.slice(0, 2), 16);
-  const g = parseInt(rgba.slice(2, 4), 16);
-  const b = parseInt(rgba.slice(4, 6), 16);
-  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.6;
-}
-
 // Expand nozzle type codes to material names
 // Handles full text ("hardened_steel"), 2-char codes ("HS"/"HH"), and 4-char codes ("HS01")
 // Material mapping: 00=stainless steel, 01=hardened steel, 05=tungsten carbide
@@ -830,7 +749,7 @@ function NozzleRackCard({ slots, filamentInfo }: { slots: import('../api/client'
         {rackSlots.map((slot, i) => {
           const isEmpty = !slot.nozzle_diameter && !slot.nozzle_type;
           const filamentBg = !isEmpty ? parseFilamentColor(slot.filament_color) : null;
-          const lightBg = filamentBg ? isLightFilamentColor(slot.filament_color) : false;
+          const lightBg = filamentBg ? isLightColor(slot.filament_color) : false;
 
           return (
             <NozzleSlotHoverCard key={slot.id >= 0 ? slot.id : `empty-${i}`} slot={slot} index={i} filamentName={slot.filament_id ? filamentInfo?.[slot.filament_id]?.name : undefined}>
@@ -2937,7 +2856,7 @@ function PrinterCard({
                                 const filamentData = tray?.tray_type ? {
                                   vendor: (isBambuLabSpool(tray) ? 'Bambu Lab' : 'Generic') as 'Bambu Lab' | 'Generic',
                                   profile: cloudInfo?.name || slotPreset?.preset_name || tray.tray_sub_brands || tray.tray_type,
-                                  colorName: getBambuColorName(tray.tray_id_name) || hexToBasicColorName(tray.tray_color),
+                                  colorName: getBambuColorName(tray.tray_id_name) || hexToColorName(tray.tray_color),
                                   colorHex: tray.tray_color || null,
                                   kFactor: formatKValue(tray.k),
                                   fillLevel: effectiveFill,
@@ -3159,7 +3078,7 @@ function PrinterCard({
                         const filamentData = tray?.tray_type ? {
                           vendor: (isBambuLabSpool(tray) ? 'Bambu Lab' : 'Generic') as 'Bambu Lab' | 'Generic',
                           profile: cloudInfo?.name || slotPreset?.preset_name || tray.tray_sub_brands || tray.tray_type,
-                          colorName: getBambuColorName(tray.tray_id_name) || hexToBasicColorName(tray.tray_color),
+                          colorName: getBambuColorName(tray.tray_id_name) || hexToColorName(tray.tray_color),
                           colorHex: tray.tray_color || null,
                           kFactor: formatKValue(tray.k),
                           fillLevel: htEffectiveFill,
@@ -3420,7 +3339,7 @@ function PrinterCard({
                               const extFilamentData = {
                                 vendor: (isBambuLabSpool(extTray) ? 'Bambu Lab' : 'Generic') as 'Bambu Lab' | 'Generic',
                                 profile: extCloudInfo?.name || extSlotPreset?.preset_name || extTray.tray_sub_brands || extTray.tray_type || 'Unknown',
-                                colorName: getBambuColorName(extTray.tray_id_name) || hexToBasicColorName(extTray.tray_color),
+                                colorName: getBambuColorName(extTray.tray_id_name) || hexToColorName(extTray.tray_color),
                                 colorHex: extTray.tray_color || null,
                                 kFactor: formatKValue(extTray.k),
                                 fillLevel: extEffectiveFill,

frontend/src/pages/ProjectDetailPage.tsx

@@ -32,7 +32,7 @@ import {
   Pencil,
 } from 'lucide-react';
 import { api } from '../api/client';
-import { parseUTCDate, formatDateOnly, formatDateTime, type TimeFormat } from '../utils/date';
+import { parseUTCDate, formatDateOnly, formatDateTime, formatDurationFromHours, type TimeFormat } from '../utils/date';
 import type { Archive, ProjectUpdate, BOMItem, BOMItemCreate, BOMItemUpdate } from '../api/client';
 import { Card, CardContent } from '../components/Card';
 import { Button } from '../components/Button';
@@ -45,15 +45,6 @@ import { ConfirmModal } from '../components/ConfirmModal';
 import { ProjectModal } from './ProjectsPage';
 import { getCurrencySymbol } from '../utils/currency';
 
-function formatDuration(hours: number): string {
-  if (hours < 1) {
-    return `${Math.round(hours * 60)}m`;
-  }
-  const h = Math.floor(hours);
-  const m = Math.round((hours - h) * 60);
-  return m > 0 ? `${h}h ${m}m` : `${h}h`;
-}
-
 function formatFilament(grams: number): string {
   if (grams >= 1000) {
     return `${(grams / 1000).toFixed(2)}kg`;
@@ -186,11 +177,6 @@ function PriorityBadge({ priority, t }: { priority: string; t: TFunction }) {
   );
 }
 
-function formatDate(dateString: string | null): string {
-  if (!dateString) return '';
-  return formatDateOnly(dateString, { year: 'numeric', month: 'short', day: 'numeric' });
-}
-
 function getDueDateStatus(dateString: string | null, t: TFunction): { color: string; label: string } | null {
   if (!dateString) return null;
   const dueDate = parseUTCDate(dateString);
@@ -610,7 +596,7 @@ export function ProjectDetailPage() {
           <StatCard
             icon={Clock}
             label={t('projectDetail.stats.printTime')}
-            value={formatDuration(stats.total_print_time_hours)}
+            value={formatDurationFromHours(stats.total_print_time_hours)}
             color="text-yellow-400"
           />
           <StatCard
@@ -738,7 +724,7 @@ export function ProjectDetailPage() {
           {project.due_date && (
             <div className="flex items-center gap-2">
               <Calendar className="w-4 h-4 text-bambu-gray" />
-              <span className="text-sm text-white">{formatDate(project.due_date)}</span>
+              <span className="text-sm text-white">{formatDateOnly(project.due_date, { year: 'numeric', month: 'short', day: 'numeric' })}</span>
               {getDueDateStatus(project.due_date, t) && (
                 <span className={`text-xs ${getDueDateStatus(project.due_date, t)!.color}`}>
                   ({getDueDateStatus(project.due_date, t)!.label})

frontend/src/pages/spoolbuddy/SpoolBuddySettingsPage.tsx

@@ -4,7 +4,6 @@ import { useOutletContext } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import type { SpoolBuddyOutletContext } from '../../components/spoolbuddy/SpoolBuddyLayout';
 import { spoolbuddyApi, type SpoolBuddyDevice, type DaemonUpdateCheck } from '../../api/client';
-
 function formatUptime(seconds: number): string {
   if (seconds < 60) return `${seconds}s`;
   if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;

frontend/src/utils/colors.ts

@@ -83,6 +83,9 @@ export function hexToColorName(hex: string | null | undefined): string {
     if (l > 0.6) return 'Light Gray';
     return 'Gray';
   }
+  // Brown is orange/yellow hue with lower lightness
+  if (h >= 15 && h < 45 && l < 0.45) return 'Brown';
+  if (h >= 45 && h < 70 && l < 0.40) return 'Brown';
   if (h < 15 || h >= 345) return 'Red';
   if (h < 45) return 'Orange';
   if (h < 70) return 'Yellow';
@@ -125,3 +128,30 @@ export function resolveSpoolColorName(colorName: string | null, rgba: string | n
   // Return null (displayed as "-") — better than showing a code
   return null;
 }
+
+/**
+ * Parse an RGBA hex string (e.g., "FF0000FF") to a CSS rgba() color.
+ * Returns null for empty, all-zero, or fully transparent colors.
+ */
+export function parseFilamentColor(rgba: string): string | null {
+  if (!rgba || rgba === '00000000' || rgba.length < 6) return null;
+  const r = rgba.slice(0, 2);
+  const g = rgba.slice(2, 4);
+  const b = rgba.slice(4, 6);
+  const a = rgba.length >= 8 ? parseInt(rgba.slice(6, 8), 16) / 255 : 1;
+  if (a === 0) return null;
+  return `rgba(${parseInt(r, 16)}, ${parseInt(g, 16)}, ${parseInt(b, 16)}, ${a})`;
+}
+
+/**
+ * Check if a hex color is light (for choosing text contrast).
+ * Uses luminance formula: 0.299*R + 0.587*G + 0.114*B.
+ */
+export function isLightColor(hex: string | null): boolean {
+  if (!hex || hex.length < 6) return false;
+  const cleanHex = hex.replace('#', '');
+  const r = parseInt(cleanHex.slice(0, 2), 16);
+  const g = parseInt(cleanHex.slice(2, 4), 16);
+  const b = parseInt(cleanHex.slice(4, 6), 16);
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.6;
+}

frontend/src/utils/date.ts

@@ -418,3 +418,28 @@ export function formatRelativeTime(
   // Older than 7 days
   return formatDateTime(dateStr, timeFormat);
 }
+
+/**
+ * Format seconds as MM:SS for media/video player display.
+ *
+ * @param seconds - Total seconds
+ * @returns Formatted string (e.g., "2:05", "0:30")
+ */
+export function formatMediaTime(seconds: number): string {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+/**
+ * Format a duration given in hours to a human-readable string.
+ *
+ * @param hours - Duration in hours (e.g., 2.5)
+ * @returns Formatted string (e.g., "2h 30m", "45m", "3h")
+ */
+export function formatDurationFromHours(hours: number): string {
+  if (hours < 1) return `${Math.round(hours * 60)}m`;
+  const h = Math.floor(hours);
+  const m = Math.round((hours - h) * 60);
+  return m > 0 ? `${h}h ${m}m` : `${h}h`;
+}

frontend/src/utils/file.ts

@@ -5,7 +5,7 @@
  * @returns A formatted string with the appropriate unit (B, KB, MB, GB, or TB).
  */
 export function formatFileSize(bytes: number): string {
-  if (bytes === 0) return '0 B';
+  if (!Number.isFinite(bytes) || bytes <= 0) return '0 B';
 
   const units = ['B', 'KB', 'MB', 'GB', 'TB'];
   const k = 1024;

static/index.html

@@ -23,7 +23,7 @@
 
     <!-- Splash screens for iOS -->
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
-    <script type="module" crossorigin src="/assets/index-PuCtc4fr.js"></script>
+    <script type="module" crossorigin src="/assets/index-BAl7JF0v.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-D5I4wfky.css">
   </head>
   <body>