forked from UKSOURCE/ipv6
357 lines
21 KiB
HTML
357 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"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@600;700&family=Geist:wght@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"/>
|
||
<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": {
|
||
"surface-tint": "#e9c176",
|
||
"on-secondary-container": "#d9b27c",
|
||
"surface-container-low": "#1c1b1b",
|
||
"primary-fixed-dim": "#e9c176",
|
||
"primary": "#e9c176",
|
||
"on-background": "#e5e2e1",
|
||
"surface-bright": "#3a3939",
|
||
"on-tertiary-fixed": "#1c1b20",
|
||
"tertiary-fixed-dim": "#c9c5cc",
|
||
"surface-container": "#201f1f",
|
||
"on-secondary-fixed-variant": "#5d4216",
|
||
"outline-variant": "#4e4639",
|
||
"on-secondary-fixed": "#291800",
|
||
"secondary-container": "#604418",
|
||
"secondary": "#e9c088",
|
||
"surface-container-lowest": "#0e0e0e",
|
||
"error": "#ffb4ab",
|
||
"error-container": "#93000a",
|
||
"on-error-container": "#ffdad6",
|
||
"inverse-primary": "#775a19",
|
||
"tertiary-container": "#a7a4ab",
|
||
"on-tertiary-fixed-variant": "#48464c",
|
||
"on-surface": "#e5e2e1",
|
||
"inverse-on-surface": "#313030",
|
||
"primary-container": "#c5a059",
|
||
"surface-container-high": "#2a2a2a",
|
||
"primary-fixed": "#ffdea5",
|
||
"secondary-fixed-dim": "#e9c088",
|
||
"on-tertiary": "#313035",
|
||
"surface": "#131313",
|
||
"secondary-fixed": "#ffddb2",
|
||
"background": "#131313",
|
||
"surface-container-highest": "#353534",
|
||
"tertiary": "#c9c5cc",
|
||
"on-primary": "#412d00",
|
||
"on-secondary": "#442b02",
|
||
"inverse-surface": "#e5e2e1",
|
||
"on-primary-container": "#4e3700",
|
||
"tertiary-fixed": "#e5e1e8",
|
||
"outline": "#9a8f80",
|
||
"on-surface-variant": "#d1c5b4",
|
||
"on-primary-fixed": "#261900",
|
||
"on-tertiary-container": "#3c3a40",
|
||
"on-primary-fixed-variant": "#5d4201",
|
||
"surface-dim": "#131313",
|
||
"surface-variant": "#353534",
|
||
"on-error": "#690005"
|
||
},
|
||
"borderRadius": {
|
||
"DEFAULT": "0.125rem",
|
||
"lg": "0.25rem",
|
||
"xl": "0.5rem",
|
||
"full": "0.75rem"
|
||
},
|
||
"spacing": {
|
||
"stack-lg": "32px",
|
||
"unit": "4px",
|
||
"stack-sm": "8px",
|
||
"margin-safe": "40px",
|
||
"stack-md": "16px",
|
||
"section-gap": "80px",
|
||
"gutter": "24px"
|
||
},
|
||
"fontFamily": {
|
||
"body-base": ["Inter"],
|
||
"display-lg": ["Space Grotesk"],
|
||
"title-sm": ["Inter"],
|
||
"label-caps": ["Geist"],
|
||
"headline-md": ["Space Grotesk"]
|
||
},
|
||
"fontSize": {
|
||
"body-base": ["16px", {"lineHeight": "1.6", "letterSpacing": "0", "fontWeight": "400"}],
|
||
"display-lg": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||
"title-sm": ["20px", {"lineHeight": "1.4", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||
"label-caps": ["12px", {"lineHeight": "1", "letterSpacing": "0.1em", "fontWeight": "600"}],
|
||
"headline-md": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600"}]
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style>
|
||
.gold-gradient-bg {
|
||
background: linear-gradient(135deg, #e9c176 0%, #775a19 100%);
|
||
}
|
||
.hero-glow {
|
||
background: radial-gradient(circle at 50% 50%, rgba(233, 193, 118, 0.15) 0%, rgba(15, 15, 15, 0) 70%);
|
||
}
|
||
.glass-panel {
|
||
background: rgba(26, 25, 30, 0.8);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
.input-focus-gold:focus {
|
||
outline: none;
|
||
border-color: #e9c176;
|
||
box-shadow: 0 0 0 1px #e9c176;
|
||
}
|
||
.material-symbols-outlined {
|
||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-background text-on-background font-body-base overflow-x-hidden">
|
||
<!-- TopNavBar -->
|
||
<header class="fixed top-0 w-full z-50 bg-surface-glass backdrop-blur-md border-b border-border-subtle">
|
||
<div class="flex justify-between items-center w-full px-gutter py-4 max-w-container-max mx-auto">
|
||
<div class="font-h1 text-[24px] font-bold text-on-surface tracking-tighter uppercase">
|
||
<span class="text-primary">IPv6 SUMMIT 2026</span>
|
||
</div>
|
||
<nav class="hidden md:flex gap-stack-md items-center">
|
||
<a class="text-on-surface-variant font-medium hover:text-secondary-fixed transition-colors duration-300 font-label-caps text-label-caps uppercase" href="#">Agenda</a>
|
||
<a class="text-on-surface-variant font-medium hover:text-secondary-fixed transition-colors duration-300 font-label-caps text-label-caps uppercase" href="#">Speakers</a>
|
||
<a class="text-on-surface-variant font-medium hover:text-secondary-fixed transition-colors duration-300 font-label-caps text-label-caps uppercase" href="#">Stats</a>
|
||
<a class="text-on-surface-variant font-medium hover:text-secondary-fixed transition-colors duration-300 font-label-caps text-label-caps uppercase" href="#">Venue</a>
|
||
</nav>
|
||
<div class="flex gap-stack-sm items-center">
|
||
<span class="text-on-surface-variant font-label-caps text-label-caps mr-4 cursor-pointer"><br/></span>
|
||
<button class="gold-gradient-bg text-on-primary px-6 py-2 rounded-lg font-label-caps text-label-caps uppercase hover:scale-95 transition-all duration-200">Register</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- Main Content & Hero Area -->
|
||
<main class="relative min-h-screen pt-32 pb-section-gap">
|
||
<!-- Background Hero Glow -->
|
||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[800px] hero-glow pointer-events-none -z-10"></div>
|
||
<div class="max-w-[800px] mx-auto px-gutter">
|
||
<!-- Header Title -->
|
||
<div class="text-center mb-section-gap">
|
||
<h1 class="font-display-lg text-[72px] leading-tight font-bold tracking-tighter mb-4 text-primary">Event Feedback</h1>
|
||
<p class="text-on-surface-variant text-title-sm font-title-sm max-w-2xl mx-auto">
|
||
Your insights drive the future of IPv6 infrastructure. Help us shape the 2027 experience.
|
||
<br/><br/></p>
|
||
</div>
|
||
<!-- Feedback Form -->
|
||
<form class="glass-panel p-stack-lg rounded-xl space-y-section-gap relative overflow-hidden">
|
||
<!-- Section 1: General Satisfaction -->
|
||
<section class="space-y-stack-lg">
|
||
<div class="border-l-2 border-primary pl-4">
|
||
<h2 class="font-headline-md text-headline-md text-on-surface mb-1 uppercase tracking-tight">1. GENERAL SATISFACTION</h2>
|
||
</div>
|
||
<div class="space-y-stack-md">
|
||
<label class="block font-label-caps text-label-caps text-primary uppercase">Overall Event Rating</label>
|
||
<div class="flex justify-between items-center gap-stack-sm max-w-md">
|
||
<span class="text-body-sm opacity-50">Poor</span>
|
||
<div class="flex gap-4">
|
||
<label class="cursor-pointer group">Overall Event Rating</label>
|
||
<label class="cursor-pointer group">
|
||
<input class="hidden peer" name="event-rating" type="radio" value="2"/>
|
||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">2</div>
|
||
</label>
|
||
<label class="cursor-pointer group">
|
||
<input class="hidden peer" name="event-rating" type="radio" value="3"/>
|
||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">3</div>
|
||
</label>
|
||
<label class="cursor-pointer group">
|
||
<input class="hidden peer" name="event-rating" type="radio" value="4"/>
|
||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">4</div>
|
||
</label>
|
||
<label class="cursor-pointer group">
|
||
<input class="hidden peer" name="event-rating" type="radio" value="5"/>
|
||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">5</div>
|
||
</label>
|
||
</div>
|
||
<span class="text-body-sm opacity-50">Excellent</span>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-stack-md">
|
||
<label class="block font-label-caps text-label-caps text-primary uppercase">Overall Event Rating</label>
|
||
<div class="flex justify-between items-center gap-stack-sm max-w-md">
|
||
<span class="text-body-sm opacity-50">Dissatisfied</span>
|
||
<div class="flex gap-4">
|
||
<label class="cursor-pointer group">Overall Event Rating</label>
|
||
<label class="cursor-pointer group">
|
||
<input class="hidden peer" name="venue-rating" type="radio" value="2"/>
|
||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">2</div>
|
||
</label>
|
||
<label class="cursor-pointer group">
|
||
<input class="hidden peer" name="venue-rating" type="radio" value="3"/>
|
||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">3</div>
|
||
</label>
|
||
<label class="cursor-pointer group">
|
||
<input class="hidden peer" name="venue-rating" type="radio" value="4"/>
|
||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">4</div>
|
||
</label>
|
||
<label class="cursor-pointer group">
|
||
<input class="hidden peer" name="venue-rating" type="radio" value="5"/>
|
||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">5</div>
|
||
</label>
|
||
</div>
|
||
<span class="text-body-sm opacity-50">Very Satisfied</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Section 2: Content Evaluation -->
|
||
<section class="space-y-stack-lg">
|
||
<div class="border-l-2 border-primary pl-4">
|
||
<h2 class="font-headline-md text-headline-md text-on-surface mb-1 uppercase tracking-tight">2. CONTENT EVALUATION</h2>
|
||
</div>
|
||
<div class="space-y-stack-md">
|
||
<label class="block font-label-caps text-label-caps text-primary uppercase">Most valuable session </label>
|
||
<select class="w-full bg-surface-container-low border border-white/10 rounded px-4 py-3 text-on-surface input-focus-gold appearance-none"><option value="">Select a session</option><option value="ai">AI in Data Centres</option><option value="green">Green Tech</option><option value="cyber">Cybersecurity</option><option value="policy">Policy & Scale</option><option value="local">Local Partner Session</option></select>
|
||
</div>
|
||
<div class="space-y-stack-md">
|
||
<label class="block font-label-caps text-label-caps text-primary uppercase">Keynote Speaker Rating </label>
|
||
<div class="flex justify-between items-center gap-stack-sm max-w-md">
|
||
<span class="text-body-sm opacity-50">Needs Improvement</span>
|
||
<div class="flex gap-4">
|
||
<label class="cursor-pointer group">
|
||
<input class="hidden peer" name="speaker-rating" type="radio" value="1"/>
|
||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">1</div>
|
||
</label>
|
||
<label class="cursor-pointer group">
|
||
<input class="hidden peer" name="speaker-rating" type="radio" value="2"/>
|
||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">2</div>
|
||
</label>
|
||
<label class="cursor-pointer group">
|
||
<input class="hidden peer" name="speaker-rating" type="radio" value="3"/>
|
||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">3</div>
|
||
</label>
|
||
<label class="cursor-pointer group">
|
||
<input class="hidden peer" name="speaker-rating" type="radio" value="4"/>
|
||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">4</div>
|
||
</label>
|
||
<label class="cursor-pointer group">
|
||
<input class="hidden peer" name="speaker-rating" type="radio" value="5"/>
|
||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">5</div>
|
||
</label>
|
||
</div>
|
||
<span class="text-body-sm opacity-50">Exceptional</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Section 3: Qualitative Feedback -->
|
||
<section class="space-y-stack-lg">
|
||
<div class="border-l-2 border-primary pl-4">
|
||
<h2 class="font-headline-md text-headline-md text-on-surface mb-1 uppercase tracking-tight">3. Qualitative Feedback</h2>
|
||
</div>
|
||
<div class="space-y-stack-md">
|
||
<label class="block font-label-caps text-label-caps text-primary uppercase">What can we improve for 2027? </label>
|
||
<textarea class="w-full bg-surface-container-low border border-white/10 rounded px-4 py-3 text-on-surface input-focus-gold resize-none" placeholder="Your suggestions for next year..." rows="4"></textarea>
|
||
</div>
|
||
<div class="space-y-stack-md">
|
||
<label class="block font-label-caps text-label-caps text-primary uppercase">General Comments </label>
|
||
<textarea class="w-full bg-surface-container-low border border-white/10 rounded px-4 py-3 text-on-surface input-focus-gold resize-none" placeholder="Any additional thoughts..." rows="3"></textarea>
|
||
</div>
|
||
</section>
|
||
<!-- Submit Button Area -->
|
||
<!-- Section 4: Industry & Technical Insights -->
|
||
<section class="space-y-stack-lg">
|
||
<div class="border-l-2 border-primary pl-4">
|
||
<h2 class="font-headline-md text-headline-md text-on-surface mb-1 uppercase tracking-tight">4. INDUSTRY & TECHNICAL INSIGHTS</h2>
|
||
</div>
|
||
<div class="space-y-stack-md">
|
||
<label class="block font-label-caps text-label-caps text-primary uppercase">IPv6 Readiness</label>
|
||
<p class="text-on-surface-variant text-sm mb-2">Your organization's current IPv6 deployment level</p>
|
||
<div class="flex justify-between items-center gap-stack-sm max-w-md">
|
||
<span class="text-body-sm opacity-50">1</span>
|
||
<div class="flex gap-4">
|
||
<label class="cursor-pointer group">IPv6 Readiness</label>
|
||
<label class="cursor-pointer group">IPv6 Readiness</label>
|
||
<label class="cursor-pointer group">IPv6 Readiness</label>
|
||
<label class="cursor-pointer group">IPv6 Readiness</label>
|
||
<label class="cursor-pointer group">IPv6 Readiness</label>
|
||
</div>
|
||
<span class="text-body-sm opacity-50">5</span>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-stack-md">
|
||
<label class="block font-label-caps text-label-caps text-primary uppercase">Infrastructure Challenges</label>
|
||
<p class="text-on-surface-variant text-sm mb-2">What is the biggest challenge for your AI infrastructure?</p>
|
||
<select class="w-full bg-surface-container-low border border-white/10 rounded px-4 py-3 text-on-surface input-focus-gold appearance-none"><option value="">Select a challenge</option><option value="budget">Budget</option><option value="technical">Technical Expertise</option><option value="policy">Policy/Regulatory</option><option value="workforce">Workforce</option><option value="hardware">Hardware Availability</option></select>
|
||
</div>
|
||
</section>
|
||
<!-- Section 5: Networking & Future Cooperation -->
|
||
<section class="space-y-stack-lg">
|
||
<div class="border-l-2 border-primary pl-4">
|
||
<h2 class="font-headline-md text-headline-md text-on-surface mb-1 uppercase tracking-tight">5. NETWORKING & FUTURE COOPERATION</h2>
|
||
</div>
|
||
<div class="space-y-stack-md">
|
||
<label class="block font-label-caps text-label-caps text-primary uppercase">Speaker Connection</label>
|
||
<p class="text-on-surface-variant text-sm mb-2">Are there any specific speakers or companies you wish to be introduced to?</p>
|
||
<input class="w-full bg-surface-container-low border border-white/10 rounded px-4 py-3 text-on-surface input-focus-gold" placeholder="Name of speaker or company..." type="text"/>
|
||
</div>
|
||
<div class="space-y-stack-md">
|
||
<label class="block font-label-caps text-label-caps text-primary uppercase">Collaboration Interests</label>
|
||
<p class="text-on-surface-variant text-sm mb-2">I am interested in:</p>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<label class="flex items-center gap-3 cursor-pointer group">Collaboration Interests</label>
|
||
<label class="flex items-center gap-3 cursor-pointer group">Collaboration Interests</label>
|
||
<label class="flex items-center gap-3 cursor-pointer group">Collaboration Interests</label>
|
||
<label class="flex items-center gap-3 cursor-pointer group">Collaboration Interests</label>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Section 6: Logistics Feedback -->
|
||
<section class="space-y-stack-lg">
|
||
<div class="border-l-2 border-primary pl-4">
|
||
<h2 class="font-headline-md text-headline-md text-on-surface mb-1 uppercase tracking-tight">6. LOGISTICS FEEDBACK</h2>
|
||
</div>
|
||
<div class="space-y-stack-md">
|
||
<label class="block font-label-caps text-label-caps text-primary uppercase">Venue Rating</label>
|
||
<p class="text-on-surface-variant text-sm mb-2">Venue Facilities & Location (Ho Chi Minh City)</p>
|
||
<div class="flex justify-between items-center gap-stack-sm max-w-md">
|
||
<span class="text-body-sm opacity-50">Poor</span>
|
||
<div class="flex gap-4">
|
||
<label class="cursor-pointer group">Venue Rating</label>
|
||
<label class="cursor-pointer group">Venue Rating</label>
|
||
<label class="cursor-pointer group">Venue Rating</label>
|
||
<label class="cursor-pointer group">Venue Rating</label>
|
||
<label class="cursor-pointer group">Venue Rating</label>
|
||
</div>
|
||
<span class="text-body-sm opacity-50">Excellent</span>
|
||
</div>
|
||
</div>
|
||
</section><div class="pt-stack-lg border-t border-white/5 flex flex-col items-center gap-4">
|
||
<button class="gold-gradient-bg text-on-primary w-full md:w-auto px-12 py-4 rounded-lg font-headline-md text-[18px] uppercase tracking-wider hover:shadow-[0_0_20px_rgba(233,193,118,0.4)] transition-all duration-300 transform active:scale-95" type="submit">SUBMIT FEEDBACK</button>
|
||
<p class="text-on-surface-variant font-label-caps text-[10px] opacity-60 uppercase text-center">
|
||
Thank you for your valuable contribution to the IPv6 ecosystem.
|
||
</p>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</main>
|
||
<!-- Footer -->
|
||
<footer class="w-full block border-t border-border-subtle bg-surface-container-lowest">
|
||
<div class="flex flex-col md:flex-row justify-between items-center px-gutter py-12 max-w-container-max mx-auto gap-stack-md">
|
||
<div class="flex flex-col gap-2">
|
||
<div class="font-h2 text-h2 text-primary uppercase font-bold tracking-tighter">IPv6 SUMMIT 2026</div>
|
||
<p class="font-body-sm text-body-sm text-text-slate opacity-70">
|
||
© 2026 IPv6 for AI & Data Centre Summit. Infrastructure for the Future.
|
||
</p>
|
||
</div>
|
||
<div class="flex flex-wrap gap-stack-md justify-center">
|
||
<a class="text-text-slate font-label-caps text-label-caps uppercase hover:text-accent-orange transition-opacity duration-300" href="#">Privacy </a>
|
||
<a class="text-text-slate font-label-caps text-label-caps uppercase hover:text-accent-orange transition-opacity duration-300" href="#">Terms </a>
|
||
<a class="text-text-slate font-label-caps text-label-caps uppercase hover:text-accent-orange transition-opacity duration-300" href="#">Contact </a>
|
||
<a class="text-text-slate font-label-caps text-label-caps uppercase hover:text-accent-orange transition-opacity duration-300" href="#">Sponsorship </a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</body></html> |