forked from UKSOURCE/ipv6
400 lines
21 KiB
HTML
400 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>IPv6 SUMMIT 2026 | Admin Console</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@600;700&family=Geist:wght@600&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"secondary-fixed": "#ffddb2",
|
|
"outline-variant": "#4e4639",
|
|
"surface-container-highest": "#353534",
|
|
"on-tertiary-fixed": "#1c1b20",
|
|
"inverse-surface": "#e5e2e1",
|
|
"tertiary-fixed": "#e5e1e8",
|
|
"background": "#0F0F0F",
|
|
"primary": "#e9c176",
|
|
"surface-bright": "#3a3939",
|
|
"inverse-on-surface": "#313030",
|
|
"on-background": "#e5e2e1",
|
|
"on-secondary-fixed": "#291800",
|
|
"inverse-primary": "#775a19",
|
|
"on-tertiary-fixed-variant": "#48464c",
|
|
"on-primary": "#412d00",
|
|
"surface-dim": "#131313",
|
|
"on-surface": "#e5e2e1",
|
|
"on-tertiary-container": "#3c3a40",
|
|
"primary-fixed-dim": "#e9c176",
|
|
"primary-fixed": "#ffdea5",
|
|
"on-surface-variant": "#d1c5b4",
|
|
"surface-container-lowest": "#0e0e0e",
|
|
"on-primary-container": "#4e3700",
|
|
"on-secondary-fixed-variant": "#5d4216",
|
|
"secondary-container": "#604418",
|
|
"tertiary-fixed-dim": "#c9c5cc",
|
|
"surface-variant": "#353534",
|
|
"primary-container": "#c5a059",
|
|
"surface-container": "#201f1f",
|
|
"surface-container-low": "#1c1b1b",
|
|
"secondary": "#e9c088",
|
|
"error": "#ffb4ab",
|
|
"surface": "#131313",
|
|
"on-primary-fixed-variant": "#5d4201",
|
|
"tertiary-container": "#a7a4ab",
|
|
"on-secondary-container": "#d9b27c",
|
|
"error-container": "#93000a",
|
|
"surface-tint": "#e9c176",
|
|
"on-tertiary": "#313035",
|
|
"on-error": "#690005",
|
|
"surface-container-high": "#2a2a2a",
|
|
"outline": "#9a8f80",
|
|
"secondary-fixed-dim": "#e9c088",
|
|
"on-primary-fixed": "#261900",
|
|
"on-error-container": "#ffdad6",
|
|
"tertiary": "#c9c5cc",
|
|
"on-secondary": "#442b02"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"stack-sm": "8px",
|
|
"stack-lg": "32px",
|
|
"stack-md": "16px",
|
|
"unit": "4px",
|
|
"section-gap": "80px",
|
|
"margin-safe": "40px",
|
|
"gutter": "24px"
|
|
},
|
|
"fontFamily": {
|
|
"body-base": ["Inter"],
|
|
"title-sm": ["Inter"],
|
|
"display-lg": ["Space Grotesk"],
|
|
"label-caps": ["Geist"],
|
|
"headline-md": ["Space Grotesk"],
|
|
"mono": ["JetBrains Mono"]
|
|
},
|
|
"fontSize": {
|
|
"body-base": ["16px", {"lineHeight": "1.6", "letterSpacing": "0", "fontWeight": "400"}],
|
|
"title-sm": ["20px", {"lineHeight": "1.4", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
|
"display-lg": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"label-caps": ["12px", {"lineHeight": "1", "letterSpacing": "0.1em", "fontWeight": "600"}],
|
|
"headline-md": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.glass-panel {
|
|
background: rgba(26, 25, 30, 0.7);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
.gold-border-focus:focus {
|
|
border-bottom: 1px solid #e9c176;
|
|
outline: none;
|
|
}
|
|
.metallic-gold-gradient {
|
|
background: linear-gradient(135deg, #e9c176 0%, #c5a059 100%);
|
|
}
|
|
.status-led {
|
|
box-shadow: 0 0 8px currentColor;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body-base min-h-screen flex">
|
|
<!-- Sidebar: Fixed, slim -->
|
|
<aside class="fixed left-0 top-0 h-full w-20 md:w-24 bg-surface-container-lowest border-r border-outline-variant/20 flex flex-col items-center py-stack-lg z-50">
|
|
<div class="mb-12">
|
|
<div class="w-12 h-12 metallic-gold-gradient flex items-center justify-center rounded-lg shadow-lg">
|
|
<span class="material-symbols-outlined text-on-primary text-3xl" style="font-variation-settings: 'FILL' 1;">cloud_done</span>
|
|
</div>
|
|
</div>
|
|
<nav class="flex flex-col gap-8 flex-1">
|
|
<button class="group flex flex-col items-center gap-1 text-primary">
|
|
<span class="material-symbols-outlined text-2xl transition-all duration-300 group-hover:scale-110" style="font-variation-settings: 'FILL' 1;">dashboard</span>
|
|
<span class="font-label-caps text-[8px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">Panel</span>
|
|
</button>
|
|
<button class="group flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary">
|
|
<span class="material-symbols-outlined text-2xl transition-all duration-300 group-hover:scale-110">group</span>
|
|
<span class="font-label-caps text-[8px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">Users</span>
|
|
</button>
|
|
<button class="group flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary">
|
|
<span class="material-symbols-outlined text-2xl transition-all duration-300 group-hover:scale-110">hourglass_empty</span>
|
|
<span class="font-label-caps text-[8px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">Pending</span>
|
|
</button>
|
|
<button class="group flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary">
|
|
<span class="material-symbols-outlined text-2xl transition-all duration-300 group-hover:scale-110">check_circle</span>
|
|
<span class="font-label-caps text-[8px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">Approved</span>
|
|
</button>
|
|
<button class="group flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary">
|
|
<span class="material-symbols-outlined text-2xl transition-all duration-300 group-hover:scale-110">cancel</span>
|
|
<span class="font-label-caps text-[8px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">Rejected</span>
|
|
</button>
|
|
</nav>
|
|
<button class="group flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary">
|
|
<span class="material-symbols-outlined text-2xl transition-all duration-300 group-hover:rotate-45">settings</span>
|
|
<span class="font-label-caps text-[8px] uppercase tracking-widest">Settings</span>
|
|
</button>
|
|
</aside>
|
|
<!-- Main Content Wrapper -->
|
|
<div class="flex-1 ml-20 md:ml-24 flex flex-col">
|
|
<!-- Header: Sticky Glass Panel -->
|
|
<header class="sticky top-0 w-full z-40 glass-panel py-4 px-gutter flex items-center justify-between border-b border-outline-variant/10">
|
|
<div class="flex items-center gap-4">
|
|
<div class="hidden md:block">
|
|
<h1 class="font-display-lg text-title-sm text-primary uppercase tracking-tighter">Admin Console</h1>
|
|
<p class="font-label-caps text-on-surface-variant text-[10px]">IPv6 SUMMIT 2026 / Infrastructure Core</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 max-w-xl mx-8">
|
|
<div class="relative group">
|
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-outline">search</span>
|
|
<input class="w-full bg-surface-container-low border-none rounded-full py-2.5 pl-12 pr-4 text-body-base text-on-surface focus:ring-1 focus:ring-primary/30 gold-border-focus transition-all" placeholder="Command Search (e.g. attendee name or company)" type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex flex-col items-end hidden lg:flex">
|
|
<span class="font-title-sm text-sm text-on-surface">Director Chen</span>
|
|
<span class="font-label-caps text-[10px] text-primary">Systems Admin</span>
|
|
</div>
|
|
<div class="w-10 h-10 rounded-full border border-primary/40 p-0.5 overflow-hidden">
|
|
<img alt="Admin Profile" class="w-full h-full object-cover rounded-full bg-surface-container-high" data-alt="A professional, high-resolution portrait illustration of a tech executive. The person has a modern, minimalist appearance with subtle glowing cybernetic highlights. The background is a soft, dark gray charcoal with elegant gold lighting accents to match a premium high-tech UI theme." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBL5I0HI-Q2dFLcJYnL30VBYPbnA_kiLY4AfC84YxaO3pOwYn3wVHKoCU78x037a47B6SVaLtkXaIWkgeNJl1Y3ymDBWGzVq_jey8olRQvKfUfRl4coRUe5NennfYDf2SnyPHxmWjXzEeE1yE_sbWQNv0HBLWeKXMBzx7NEzdjO9ZgCKQe7LHIV7HP3kfyw_V7rKNwPwCRUi0Za5P6-cOn6yvMOb-rbOu_dNJymmqL_lGFYtJG9rfaracohIUqfdQRfWiD9ZQZhaDKO"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Dashboard Canvas -->
|
|
<main class="p-gutter max-w-7xl mx-auto w-full flex flex-col gap-stack-lg">
|
|
<!-- Top Stat Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-gutter">
|
|
<!-- Total -->
|
|
<div class="glass-panel p-6 rounded-xl relative overflow-hidden group">
|
|
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
|
<span class="material-symbols-outlined text-6xl">database</span>
|
|
</div>
|
|
<p class="font-label-caps text-on-surface-variant mb-2">Total Requests</p>
|
|
<h3 class="font-display-lg text-headline-md text-on-surface">1,284</h3>
|
|
<div class="mt-4 flex items-center gap-2">
|
|
<span class="text-xs text-primary">+12% vs last week</span>
|
|
</div>
|
|
</div>
|
|
<!-- Pending -->
|
|
<div class="glass-panel p-6 rounded-xl relative overflow-hidden border-l-4 border-secondary group">
|
|
<p class="font-label-caps text-secondary mb-2 flex items-center gap-2">
|
|
<span class="status-led w-2 h-2 rounded-full bg-secondary"></span>
|
|
Pending Approval
|
|
</p>
|
|
<h3 class="font-display-lg text-headline-md text-on-surface">42</h3>
|
|
<div class="mt-4 flex items-center gap-2">
|
|
<span class="text-xs text-secondary-fixed">Critical threshold: 50</span>
|
|
</div>
|
|
</div>
|
|
<!-- Confirmed -->
|
|
<div class="glass-panel p-6 rounded-xl relative overflow-hidden border-l-4 border-primary group">
|
|
<p class="font-label-caps text-primary mb-2 flex items-center gap-2">
|
|
<span class="status-led w-2 h-2 rounded-full bg-primary"></span>
|
|
Confirmed
|
|
</p>
|
|
<h3 class="font-display-lg text-headline-md text-on-surface">856</h3>
|
|
<div class="mt-4 flex items-center gap-2">
|
|
<span class="text-xs text-primary-fixed-dim">Capacity at 74%</span>
|
|
</div>
|
|
</div>
|
|
<!-- Conversion -->
|
|
<div class="glass-panel p-6 rounded-xl relative overflow-hidden group">
|
|
<p class="font-label-caps text-on-surface-variant mb-2">Conversion Rate</p>
|
|
<h3 class="font-display-lg text-headline-md text-on-surface">67%</h3>
|
|
<div class="mt-4 w-full bg-surface-container-high h-1.5 rounded-full overflow-hidden">
|
|
<div class="h-full metallic-gold-gradient w-2/3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Filter Bar -->
|
|
<section class="glass-panel px-6 py-4 rounded-xl flex flex-col lg:flex-row items-center justify-between gap-stack-md">
|
|
<div class="flex flex-wrap items-center gap-4 w-full lg:w-auto">
|
|
<div class="flex flex-col gap-1">
|
|
<label class="font-label-caps text-[10px] text-outline">Status</label>
|
|
<select class="bg-surface-container border border-outline-variant/30 text-on-surface text-sm rounded-lg px-3 py-1.5 focus:ring-primary/50 focus:border-primary">
|
|
<option>All Operations</option>
|
|
<option>Pending</option>
|
|
<option>Approved</option>
|
|
<option>Rejected</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<label class="font-label-caps text-[10px] text-outline">Company</label>
|
|
<select class="bg-surface-container border border-outline-variant/30 text-on-surface text-sm rounded-lg px-3 py-1.5 focus:ring-primary/50 focus:border-primary">
|
|
<option>Global Tier 1</option>
|
|
<option>Cloud Providers</option>
|
|
<option>Enterprise</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<label class="font-label-caps text-[10px] text-outline">Timeframe</label>
|
|
<input class="bg-surface-container border border-outline-variant/30 text-on-surface text-sm rounded-lg px-3 py-1.5" type="date"/>
|
|
</div>
|
|
</div>
|
|
<button class="w-full lg:w-auto border border-primary text-primary font-label-caps px-6 py-2 rounded transition-all hover:bg-primary hover:text-on-primary flex items-center justify-center gap-2">
|
|
<span class="material-symbols-outlined text-sm">download</span>
|
|
Export to Excel
|
|
</button>
|
|
</section>
|
|
<!-- Data Table -->
|
|
<div class="glass-panel rounded-xl overflow-hidden shadow-2xl">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-surface-container border-b border-outline-variant/20">
|
|
<th class="px-6 py-4 font-label-caps text-outline text-[11px] uppercase tracking-widest">ID</th>
|
|
<th class="px-6 py-4 font-label-caps text-outline text-[11px] uppercase tracking-widest">Submit Date</th>
|
|
<th class="px-6 py-4 font-label-caps text-outline text-[11px] uppercase tracking-widest">Name</th>
|
|
<th class="px-6 py-4 font-label-caps text-outline text-[11px] uppercase tracking-widest">Company</th>
|
|
<th class="px-6 py-4 font-label-caps text-outline text-[11px] uppercase tracking-widest">Email / Phone</th>
|
|
<th class="px-6 py-4 font-label-caps text-outline text-[11px] uppercase tracking-widest">Status</th>
|
|
<th class="px-6 py-4 font-label-caps text-outline text-[11px] uppercase tracking-widest text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-outline-variant/10">
|
|
<!-- Row 1 -->
|
|
<tr class="hover:bg-surface-container-high/40 transition-colors">
|
|
<td class="px-6 py-4 font-mono text-sm text-primary">#V6-4821</td>
|
|
<td class="px-6 py-4 text-sm text-on-surface-variant">24 OCT 2025</td>
|
|
<td class="px-6 py-4">
|
|
<div class="font-title-sm text-sm">Elena Rodriguez</div>
|
|
<div class="text-xs text-outline">Network Architect</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm">Cloudflare, Inc.</td>
|
|
<td class="px-6 py-4">
|
|
<div class="text-sm">e.rodriguez@cloudflare.com</div>
|
|
<div class="text-xs text-outline">+1 (555) 012-9988</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-3 py-1 rounded-full text-[10px] font-label-caps border border-primary text-primary bg-primary/10 flex items-center gap-1.5 w-fit">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-primary status-led"></span>
|
|
Approved
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex items-center justify-end gap-2">
|
|
<button class="p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-on-surface transition-all">
|
|
<span class="material-symbols-outlined text-lg">visibility</span>
|
|
</button>
|
|
<button class="p-2 rounded-lg hover:bg-primary/20 text-primary transition-all">
|
|
<span class="material-symbols-outlined text-lg">edit</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 2 -->
|
|
<tr class="hover:bg-surface-container-high/40 transition-colors">
|
|
<td class="px-6 py-4 font-mono text-sm text-primary">#V6-4819</td>
|
|
<td class="px-6 py-4 text-sm text-on-surface-variant">23 OCT 2025</td>
|
|
<td class="px-6 py-4">
|
|
<div class="font-title-sm text-sm">Marcus Thorne</div>
|
|
<div class="text-xs text-outline">Senior Devops</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm">Akamai Technologies</td>
|
|
<td class="px-6 py-4">
|
|
<div class="text-sm">m.thorne@akamai.io</div>
|
|
<div class="text-xs text-outline">+44 20 7946 0123</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-3 py-1 rounded-full text-[10px] font-label-caps border border-secondary text-secondary bg-secondary/10 flex items-center gap-1.5 w-fit">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-secondary status-led"></span>
|
|
Pending
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex items-center justify-end gap-2">
|
|
<button class="p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-on-surface">
|
|
<span class="material-symbols-outlined text-lg">visibility</span>
|
|
</button>
|
|
<button class="p-2 rounded-lg hover:bg-primary text-on-primary" title="Approve">
|
|
<span class="material-symbols-outlined text-lg" style="font-variation-settings: 'FILL' 1;">check</span>
|
|
</button>
|
|
<button class="p-2 rounded-lg hover:bg-error/20 text-error" title="Reject">
|
|
<span class="material-symbols-outlined text-lg">close</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 3 -->
|
|
<tr class="hover:bg-surface-container-high/40 transition-colors">
|
|
<td class="px-6 py-4 font-mono text-sm text-primary">#V6-4790</td>
|
|
<td class="px-6 py-4 text-sm text-on-surface-variant">22 OCT 2025</td>
|
|
<td class="px-6 py-4">
|
|
<div class="font-title-sm text-sm">Kenji Yamamoto</div>
|
|
<div class="text-xs text-outline">CTO</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm">NTT Data Japan</td>
|
|
<td class="px-6 py-4">
|
|
<div class="text-sm">yamamoto@ntt.jp</div>
|
|
<div class="text-xs text-outline">+81 3 1234 5678</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-3 py-1 rounded-full text-[10px] font-label-caps border border-error text-error bg-error/10 flex items-center gap-1.5 w-fit">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-error status-led"></span>
|
|
Rejected
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex items-center justify-end gap-2">
|
|
<button class="p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-on-surface">
|
|
<span class="material-symbols-outlined text-lg">visibility</span>
|
|
</button>
|
|
<button class="p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant">
|
|
<span class="material-symbols-outlined text-lg">history</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Pagination -->
|
|
<div class="px-6 py-4 border-t border-outline-variant/10 flex items-center justify-between">
|
|
<p class="text-xs text-outline">Showing 1 to 10 of 1,284 entries</p>
|
|
<div class="flex items-center gap-2">
|
|
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant/30 text-outline hover:border-primary hover:text-primary transition-all">
|
|
<span class="material-symbols-outlined text-sm">chevron_left</span>
|
|
</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded bg-primary text-on-primary text-xs font-bold">1</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant/30 text-on-surface-variant hover:border-primary hover:text-primary transition-all text-xs">2</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant/30 text-on-surface-variant hover:border-primary hover:text-primary transition-all text-xs">3</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant/30 text-outline hover:border-primary hover:text-primary transition-all">
|
|
<span class="material-symbols-outlined text-sm">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="mt-auto border-t border-outline-variant/20 py-8 px-gutter flex flex-col md:flex-row items-center justify-between gap-4">
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-headline-md text-sm text-primary uppercase">IPv6 SUMMIT 2026</span>
|
|
<span class="text-xs text-outline">| Systems Infrastructure Core v2.4.0</span>
|
|
</div>
|
|
<p class="text-[11px] font-label-caps text-outline tracking-widest">© 2026 IPv6 for AI & Data Centre Summit. Infrastructure for the Future.</p>
|
|
<div class="flex items-center gap-6">
|
|
<a class="text-[10px] font-label-caps text-on-surface-variant hover:text-primary transition-colors" href="#">Privacy</a>
|
|
<a class="text-[10px] font-label-caps text-on-surface-variant hover:text-primary transition-colors" href="#">Terms</a>
|
|
<a class="text-[10px] font-label-caps text-on-surface-variant hover:text-primary transition-colors" href="#">Support</a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<!-- Background Decorative Glows -->
|
|
<div class="fixed top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 blur-[120px] rounded-full -z-10"></div>
|
|
<div class="fixed bottom-[-10%] right-[-10%] w-[30%] h-[30%] bg-secondary/5 blur-[100px] rounded-full -z-10"></div>
|
|
</body></html> |