forked from UKSOURCE/ipv6
284 lines
14 KiB
HTML
284 lines
14 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>Registration | IPv6 for AI & Data Centre Summit 2026</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Geist:wght@400;600&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 id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-primary-container": "#4e3700",
|
|
"on-tertiary-fixed-variant": "#48464c",
|
|
"secondary-fixed-dim": "#e9c088",
|
|
"secondary-fixed": "#ffddb2",
|
|
"on-secondary-container": "#d9b27c",
|
|
"secondary": "#e9c088",
|
|
"surface-container": "#201f1f",
|
|
"outline-variant": "#4e4639",
|
|
"surface": "#131313",
|
|
"surface-container-high": "#2a2a2a",
|
|
"secondary-container": "#604418",
|
|
"surface-dim": "#131313",
|
|
"primary-container": "#c5a059",
|
|
"on-tertiary": "#313035",
|
|
"outline": "#9a8f80",
|
|
"on-surface": "#e5e2e1",
|
|
"surface-container-low": "#1c1b1b",
|
|
"inverse-on-surface": "#313030",
|
|
"surface-container-highest": "#353534",
|
|
"on-error-container": "#ffdad6",
|
|
"on-background": "#e5e2e1",
|
|
"surface-variant": "#353534",
|
|
"on-primary": "#412d00",
|
|
"primary-fixed-dim": "#e9c176",
|
|
"on-error": "#690005",
|
|
"tertiary-fixed-dim": "#c9c5cc",
|
|
"background": "#131313",
|
|
"tertiary": "#c9c5cc",
|
|
"surface-tint": "#e9c176",
|
|
"primary": "#e9c176",
|
|
"surface-bright": "#3a3939",
|
|
"primary-fixed": "#ffdea5",
|
|
"on-tertiary-container": "#3c3a40",
|
|
"on-tertiary-fixed": "#1c1b20",
|
|
"on-secondary-fixed": "#291800",
|
|
"on-secondary-fixed-variant": "#5d4216",
|
|
"inverse-surface": "#e5e2e1",
|
|
"tertiary-container": "#a7a4ab",
|
|
"inverse-primary": "#775a19",
|
|
"on-surface-variant": "#d1c5b4",
|
|
"on-primary-fixed-variant": "#5d4201",
|
|
"on-secondary": "#442b02",
|
|
"error-container": "#93000a",
|
|
"error": "#ffb4ab",
|
|
"surface-container-lowest": "#0e0e0e",
|
|
"on-primary-fixed": "#261900",
|
|
"tertiary-fixed": "#e5e1e8"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"section-gap": "80px",
|
|
"gutter": "24px",
|
|
"stack-md": "16px",
|
|
"stack-lg": "32px",
|
|
"margin-safe": "40px",
|
|
"unit": "4px",
|
|
"stack-sm": "8px"
|
|
},
|
|
"fontFamily": {
|
|
"title-sm": ["Inter"],
|
|
"body-base": ["Inter"],
|
|
"display-lg": ["Space Grotesk"],
|
|
"label-caps": ["Geist"],
|
|
"headline-md": ["Space Grotesk"]
|
|
},
|
|
"fontSize": {
|
|
"title-sm": ["20px", {"lineHeight": "1.4", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
|
"body-base": ["16px", {"lineHeight": "1.6", "letterSpacing": "0", "fontWeight": "400"}],
|
|
"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"}],
|
|
"hero-title": ["72px", {"lineHeight": "1.1", "letterSpacing": "-0.03em", "fontWeight": "700"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: #0F0F0F;
|
|
color: #E5E2E1;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.gold-gradient-bg {
|
|
background: linear-gradient(135deg, #C5A059 0%, #E9C176 50%, #C5A059 100%);
|
|
}
|
|
|
|
.glass-panel {
|
|
background: rgba(26, 25, 30, 0.6);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.hero-glow {
|
|
position: fixed;
|
|
top: -20%;
|
|
right: -10%;
|
|
width: 60%;
|
|
height: 60%;
|
|
background: radial-gradient(circle, rgba(197, 160, 89, 0.08) 0%, rgba(15, 15, 15, 0) 70%);
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-glow-bottom {
|
|
position: fixed;
|
|
bottom: -20%;
|
|
left: -10%;
|
|
width: 50%;
|
|
height: 50%;
|
|
background: radial-gradient(circle, rgba(197, 160, 89, 0.05) 0%, rgba(15, 15, 15, 0) 70%);
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
input:focus, select:focus, textarea:focus {
|
|
outline: none !important;
|
|
border-color: #C5A059 !important;
|
|
box-shadow: 0 0 0 1px rgba(197, 160, 89, 0.3) !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-body-base text-body-base selection:bg-primary-container selection:text-on-primary-container">
|
|
<div class="hero-glow"></div>
|
|
<div class="hero-glow-bottom"></div>
|
|
<!-- TopNavBar -->
|
|
<header class="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-xl border-b border-white/5 shadow-sm">
|
|
<div class="max-w-[1280px] mx-auto px-gutter h-20 flex items-center justify-between">
|
|
<div class="flex items-center gap-stack-md">
|
|
<span class="font-headline-md text-headline-md font-bold text-primary tracking-tight">IPv6 SUMMIT 2026</span>
|
|
</div>
|
|
<nav class="hidden md:flex items-center gap-gutter">
|
|
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors" href="#">Agenda</a>
|
|
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors" href="#">Speakers</a>
|
|
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors" href="#">Venue</a>
|
|
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors" href="#">Sponsors</a>
|
|
</nav>
|
|
<div class="flex items-center gap-stack-md">
|
|
<button class="font-label-caps text-label-caps text-on-surface-variant hover:text-primary transition-colors flex items-center gap-unit">
|
|
<span class="material-symbols-outlined text-[18px]">language</span>
|
|
EN | VI
|
|
</button>
|
|
<a class="gold-gradient-bg px-6 py-2.5 rounded-lg text-on-primary font-title-sm text-[14px] font-bold active:scale-95 transition-all hover:shadow-[0_0_20px_rgba(197,160,89,0.3)]" href="#">
|
|
Register
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="pt-[160px] pb-section-gap px-gutter flex justify-center">
|
|
<div class="w-full max-w-[1280px]">
|
|
<div class="max-w-[800px] mx-auto">
|
|
<!-- Navigation Back -->
|
|
<div class="mb-stack-lg">
|
|
<a class="group flex items-center gap-stack-sm text-outline hover:text-primary transition-colors font-body-base" href="#">
|
|
<span class="material-symbols-outlined text-[20px] transition-transform group-hover:-translate-x-1">arrow_back</span>
|
|
Back to Home
|
|
</a>
|
|
</div>
|
|
<!-- Page Title -->
|
|
<div class="mb-stack-lg">
|
|
<h1 class="font-display-lg text-hero-title text-on-surface mb-stack-sm leading-[1.1]">Summit Registration</h1>
|
|
<p class="text-on-surface-variant font-body-base text-lg">Secure your presence at the forefront of IPv6 innovation for AI and Data Centres.</p>
|
|
</div>
|
|
<!-- Registration Card -->
|
|
<div class="glass-panel p-stack-lg md:p-12 rounded-xl shadow-2xl relative overflow-hidden">
|
|
<!-- Subtle internal accent -->
|
|
<div class="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-primary/20 to-transparent"></div>
|
|
<form class="space-y-stack-lg">
|
|
<!-- Section 1: Personal Info -->
|
|
<div class="space-y-stack-md">
|
|
<h2 class="font-headline-md text-title-sm text-primary border-l-2 border-primary pl-3">Personal Info / Thông tin cá nhân</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-md">
|
|
<div class="space-y-unit">
|
|
<label class="font-body-base text-base text-outline uppercase tracking-wider">Full Name </label>
|
|
<input class="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all font-body-base" placeholder="John Doe" type="text">
|
|
</div>
|
|
<div class="space-y-unit">
|
|
<label class="font-body-base text-base text-outline uppercase tracking-wider">Phone Number</label>
|
|
<input class="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all font-body-base" placeholder="+84 ..." type="tel">
|
|
</div>
|
|
<div class="md:col-span-2 space-y-unit">
|
|
<label class="font-body-base text-base text-outline uppercase tracking-wider">Business Email / Email công việc</label>
|
|
<input class="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all font-body-base" placeholder="john.doe@company.com" type="email">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="border-white/5">
|
|
<!-- Section 2: Professional Info -->
|
|
<div class="space-y-stack-md">
|
|
<h2 class="font-headline-md text-title-sm text-primary border-l-2 border-primary pl-3">Professional Info </h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-md">
|
|
<div class="space-y-unit">
|
|
<label class="font-body-base text-base text-outline uppercase tracking-wider">Company Name </label>
|
|
<input class="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all font-body-base" placeholder="Aurelian Cybernetics" type="text">
|
|
</div>
|
|
<div class="space-y-unit">
|
|
<label class="font-body-base text-base text-outline uppercase tracking-wider">Job Title </label>
|
|
<input class="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all font-body-base" placeholder="Network Architect" type="text">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="border-white/5">
|
|
<!-- Section 3: Industry -->
|
|
<div class="space-y-stack-md">
|
|
<h2 class="font-headline-md text-title-sm text-primary border-l-2 border-primary pl-3">Industry</h2>
|
|
<div class="space-y-unit">
|
|
<label class="font-body-base text-base text-outline uppercase tracking-wider">Select Industry / Chọn ngành</label>
|
|
<div class="relative">
|
|
<select class="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface appearance-none transition-all font-body-base">
|
|
<option disabled="" selected="" value="">Please choose...</option>
|
|
<option value="government">Government / Chính phủ</option>
|
|
<option value="telecom">Telecom / Viễn thông</option>
|
|
<option value="cloud">Cloud/Data Centre / Đám mây/Trung tâm dữ liệu</option>
|
|
<option value="ai">AI/Software / AI/Phần mềm</option>
|
|
<option value="others">Others / Khác</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-4 top-1/2 -translate-y-1/2 text-outline pointer-events-none">expand_more</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="border-white/5">
|
|
<!-- Section 4: Special requirements -->
|
|
<div class="space-y-stack-md">
|
|
<h2 class="font-headline-md text-title-sm text-primary border-l-2 border-primary pl-3">Additional Details </h2>
|
|
<div class="space-y-unit">
|
|
<label class="font-body-base text-base text-outline uppercase tracking-wider">Special requirements or Dietary restrictions </label>
|
|
<textarea class="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all resize-none font-body-base" placeholder="Vegetarian options, accessibility needs, etc." rows="4"></textarea>
|
|
</div>
|
|
</div>
|
|
<!-- Submit Action -->
|
|
<div class="pt-stack-md">
|
|
<button class="w-full gold-gradient-bg py-5 rounded-lg text-on-primary font-display-lg text-title-sm font-bold shadow-[0_10px_30px_rgba(197,160,89,0.15)] hover:shadow-[0_15px_40px_rgba(197,160,89,0.25)] hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] transition-all" type="submit">
|
|
Submit Registration </button>
|
|
<p class="mt-stack-md text-center text-outline font-body-base text-[11px] tracking-widest opacity-60 uppercase">
|
|
BY REGISTERING, YOU AGREE TO OUR PRIVACY POLICY AND TERMS OF SERVICE.
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="w-full mt-section-gap border-t border-white/5 bg-surface-container-lowest">
|
|
<div class="max-w-[1280px] mx-auto px-gutter py-stack-lg flex flex-col md:flex-row justify-between items-center gap-stack-md">
|
|
<span class="font-headline-md text-title-sm text-on-surface">IPv6 Summit 2026</span>
|
|
<div class="flex flex-wrap justify-center gap-gutter">
|
|
<a class="font-body-base text-label-caps text-on-tertiary-fixed-variant hover:text-secondary transition-colors" href="#">Contact Us</a>
|
|
<a class="font-body-base text-label-caps text-on-tertiary-fixed-variant hover:text-secondary transition-colors" href="#">Sponsorship Prospectus</a>
|
|
<a class="font-body-base text-label-caps text-on-tertiary-fixed-variant hover:text-secondary transition-colors" href="#">Privacy Policy</a>
|
|
<a class="font-body-base text-label-caps text-on-tertiary-fixed-variant hover:text-secondary transition-colors" href="#">Terms of Service</a>
|
|
</div>
|
|
<p class="font-body-base text-label-caps text-on-tertiary-fixed-variant opacity-60">
|
|
© 2026 IPv6 for AI & Data Centre Summit. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
</body></html> |