<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FII Team | Zero Errors Celebration</title>
<style>
:root {
--bg: #080b18;
--card: #12172b;
--purple: #a78bfa;
--cyan: #55e6ff;
--white: #f8faff;
--muted: #b8c2dc;
--border: rgba(167, 139, 250, 0.28);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 14px;
overflow-x: hidden;
font-family: Inter, "Segoe UI", Arial, sans-serif;
color: var(--white);
text-align: center;
background:
radial-gradient(ellipse at 15% 10%, #35205d 0, transparent 40%),
radial-gradient(ellipse at 90% 85%, #073b50 0, transparent 38%),
var(--bg);
}
.card {
position: relative;
isolation: isolate;
width: 100%;
max-width: 650px;
padding: 36px 28px;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 28px;
background: linear-gradient(
145deg,
rgba(27, 32, 60, 0.97),
rgba(12, 18, 37, 0.98)
);
box-shadow:
0 25px 80px #0008,
0 0 45px #8b5cf615;
animation: appear 0.8s ease-out;
}
.card::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 12%;
width: 76%;
height: 2px;
background: linear-gradient(
90deg,
transparent,
var(--cyan),
var(--purple),
transparent
);
}
.trophy {
display: inline-flex;
width: 100px;
height: 100px;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
border: 1px solid #a78bfa55;
border-radius: 28px;
background: linear-gradient(145deg, #35265e, #102c46);
box-shadow: 0 0 35px #8b5cf625;
font-size: 58px;
animation: float 2.5s ease-in-out infinite;
}
.eyebrow {
margin: 0 0 12px;
color: var(--cyan);
font-size: 12px;
font-weight: 800;
letter-spacing: 4px;
text-transform: uppercase;
}
h1 {
margin: 0 auto 18px;
max-width: 540px;
font-size: clamp(27px, 6vw, 43px);
line-height: 1.18;
font-weight: 900;
letter-spacing: -1.2px;
background: linear-gradient(100deg, #ffffff 15%, var(--cyan) 55%, var(--purple));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.subtitle {
margin: 0;
color: var(--muted);
font-size: 15px;
line-height: 1.8;
}
.leadership {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 28px 0;
}
.leader {
padding: 17px 12px;
border: 1px solid #ffffff14;
border-radius: 17px;
background: linear-gradient(135deg, #ffffff0b, #a78bfa0a);
}
.leader-label {
display: block;
margin-bottom: 8px;
color: var(--cyan);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.8px;
}
.leader-name {
font-size: 15px;
line-height: 1.5;
font-weight: 700;
overflow-wrap: anywhere;
}
.achievement {
position: relative;
margin: 24px 0;
padding: 24px 12px;
border: 1px solid #55e6ff45;
border-radius: 22px;
background:
radial-gradient(ellipse at center, #0c536633, transparent 75%),
#071526;
}
.status {
display: inline-block;
padding: 6px 12px;
margin-bottom: 12px;
border: 1px solid #55e6ff50;
border-radius: 30px;
color: var(--cyan);
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.zero {
margin: 0;
font-size: clamp(38px, 9vw, 64px);
line-height: 1.1;
font-weight: 950;
letter-spacing: -2px;
color: #fff;
text-shadow: 0 0 28px #55e6ff35;
}
.zero span {
color: var(--cyan);
}
.week {
margin: 14px 0 0;
color: var(--purple);
font-size: 13px;
font-weight: 800;
letter-spacing: 3px;
}
.message {
margin: 25px 0;
color: var(--muted);
font-size: 15px;
line-height: 1.9;
}
.message strong {
color: white;
}
.keep-going {
margin: 0 0 25px;
font-size: 21px;
font-weight: 850;
color: var(--white);
}
.keep-going span {
color: var(--cyan);
}
.team-heading {
margin: 30px 0 14px;
color: var(--muted);
font-size: 11px;
font-weight: 800;
letter-spacing: 3px;
text-transform: uppercase;
}
.team-list {
display: grid;
gap: 12px;
text-align: left;
}
.team {
padding: 18px;
border: 1px solid #ffffff12;
border-left: 3px solid var(--purple);
border-radius: 15px;
background: linear-gradient(110deg, #ffffff0a, #ffffff03);
transition: transform 0.25s, border-color 0.25s;
}
.team:nth-child(2) {
border-left-color: var(--cyan);
}
.team:nth-child(3) {
border-left-color: #f0abfc;
}
.phase-title {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 10px;
color: var(--purple);
font-size: 13px;
font-weight: 850;
letter-spacing: 1.5px;
}
.team:nth-child(2) .phase-title {
color: var(--cyan);
}
.team:nth-child(3) .phase-title {
color: #f0abfc;
}
.team-members {
margin: 0;
color: #e1e7f7;
font-size: 14px;
line-height: 2;
overflow-wrap: anywhere;
}
.footer {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid #ffffff14;
}
button {
padding: 15px 26px;
border: 0;
border-radius: 14px;
background: linear-gradient(110deg, var(--purple), var(--cyan));
color: #101426;
font-size: 15px;
font-weight: 850;
cursor: pointer;
box-shadow: 0 8px 28px #55e6ff20;
transition: transform 0.2s, box-shadow 0.2s;
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px #55e6ff35;
}
button:focus-visible {
outline: 3px solid white;
outline-offset: 4px;
}
.footer-note {
margin: 18px 0 0;
color: #8d9ab9;
font-size: 11px;
letter-spacing: 2px;
}
#confetti {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 5;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes appear {
from {
opacity: 0;
transform: translateY(20px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (hover: hover) {
.team:hover {
transform: translateX(4px);
border-color: #a78bfa70;
}
}
@media (max-width: 480px) {
.card {
padding: 27px 17px;
border-radius: 22px;
}
.leadership {
gap: 9px;
}
.leader {
padding: 14px 8px;
}
.leader-name {
font-size: 13px;
}
.team {
padding: 15px 13px;
}
.team-members {
font-size: 13px;
}
.message {
font-size: 14px;
}
.zero {
letter-spacing: -1.5px;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
}
</style>
</head>
<body>
<canvas id="confetti" aria-hidden="true"></canvas>
<main class="card">
<div class="trophy" aria-hidden="true">🏆</div>
<p class="eyebrow">Excellence • Quality • Teamwork</p>
<h1>CONGRATULATIONS FII TEAM!</h1>
<p class="subtitle">
Celebrating another milestone in quality and performance.
</p>
<section class="leadership" aria-label="Team leadership">
<div class="leader">
<span class="leader-label">⭐ TEAM LEAD</span>
<div class="leader-name">Sathya Narayanan M</div>
</div>
<div class="leader">
<span class="leader-label">⭐ ASSISTANT TEAM LEAD</span>
<div class="leader-name">Karthikeyan U</div>
</div>
</section>
<section class="achievement" aria-label="Weekly achievement">
<div class="status">✓ QUALITY MILESTONE</div>
<h2 class="zero"><span>ZERO</span> ERRORS!</h2>
<p class="week">THIS WEEK</p>
</section>
<p class="message">
Outstanding teamwork and amazing dedication!<br>
Your commitment to quality made this achievement possible.
<br><br>
<strong>Every detail matters. Every team member counts.</strong>
</p>
<h2 class="keep-going">KEEP IT UP! <span>🚀</span></h2>
<div class="team-heading">The people behind the success</div>
<div class="team-list">
<section class="team">
<div class="phase-title">🏅 PHASE 01</div>
<p class="team-members">
Mohammed Ashiq A • Bhuvaneshwaran S • Keerthivasan N •
Sundaraj T • Dinesh Kumar S • Subhash W • Baalaji M
</p>
</section>
<section class="team">
<div class="phase-title">🏅 PHASE 02</div>
<p class="team-members">
Vijay N • Premkumar Y • Venkatesh Kumar R
</p>
</section>
<section class="team">
<div class="phase-title">🏅 PHASE 06</div>
<p class="team-members">
Madesh R • Santhosh Kumar S • Sri Hari Prasath S •
Kavithan N • Krithi Raj N
</p>
</section>
</div>
<footer class="footer">
<button type="button" id="celebrateBtn">
🎉 Celebrate Again!
</button>
<p class="footer-note">ONE TEAM. ONE STANDARD. ZERO ERRORS.</p>
</footer>
</main>
<script>
const canvas = document.getElementById("confetti");
const ctx = canvas.getContext("2d");
let pieces = [];
let animationFrame = null;
const colors = [
"#a78bfa",
"#55e6ff",
"#f0abfc",
"#ffffff",
"#67f5c0"
];
function resize() {
const dpr = Math.min(window.devicePixelRatio || 1, 2);
canvas.width = window.innerWidth * dpr;
canvas.height = window.innerHeight * dpr;
canvas.style.width = window.innerWidth + "px";
canvas.style.height = window.innerHeight + "px";
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
window.addEventListener("resize", resize);
resize();
function celebrate() {
const maxPieces = 450;
const available = Math.max(0, maxPieces - pieces.length);
const count = Math.min(160, available);
for (let i = 0; i < count; i++) {
pieces.push({
x: Math.random() * window.innerWidth,
y: -20 - Math.random() * window.innerHeight * 0.6,
s: 4 + Math.random() * 6,
v: 2 + Math.random() * 4,
drift: Math.random() * 2 - 1,
c: colors[Math.floor(Math.random() * colors.length)],
r: Math.random() * 6
});
}
if (animationFrame === null) {
draw();
}
}
function draw() {
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
for (const p of pieces) {
p.y += p.v;
p.x += Math.sin(p.y / 30) * 0.8 + p.drift * 0.3;
p.r += 0.07;
ctx.save();
ctx.translate(p.x, p.y);
ctx.rotate(p.r);
ctx.fillStyle = p.c;
ctx.fillRect(0, 0, p.s, p.s * 1.5);
ctx.restore();
}
pieces = pieces.filter(
p => p.y < window.innerHeight + 20
);
if (pieces.length > 0) {
animationFrame = requestAnimationFrame(draw);
} else {
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
animationFrame = null;
}
}
document.getElementById("celebrateBtn")
.addEventListener("click", celebrate);
const reducedMotion = window.matchMedia(
"(prefers-reduced-motion: reduce)"
);
if (!reducedMotion.matches) {
celebrate();
}
</script>
</body>
</html>