From d66271a3265134a3fe5991c053040e7f7fd43109 Mon Sep 17 00:00:00 2001 From: Soundcreates Date: Mon, 16 Mar 2026 20:37:42 +0530 Subject: [PATCH 1/6] ui: redesigned what you get section --- hackx/index.html | 4 ++-- hackx/style.css | 19 +++++++++++++++++-- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/hackx/index.html b/hackx/index.html index 1fa5999c..83468fe0 100644 --- a/hackx/index.html +++ b/hackx/index.html @@ -162,11 +162,11 @@

// WHAT YOU GET

1:1
MENTORSHIP
-
+
200+
NETWORK
-
+
SWAG + CERTS + WIFI + VIBES
EVERYTHING ELSE IS ON US
diff --git a/hackx/style.css b/hackx/style.css index aa1adb91..9086f4ce 100644 --- a/hackx/style.css +++ b/hackx/style.css @@ -648,7 +648,7 @@ body { .perks-bento { display: grid; grid-template-columns: 2fr 1fr 1fr; - grid-template-rows: auto auto; + grid-template-rows: auto auto auto; gap: 3px; max-width: 750px; margin: 0 auto; @@ -676,9 +676,24 @@ body { } .bento-wide { + grid-column: 1 / 4; +} + +.bento-network-row { grid-column: 2 / 4; + grid-row: 2 / 3; + z-index: 2; + position: relative; } + + +.centered-text-flex{ + display:flex; + flex-direction:column; + justify-content:center; + align-items:center; +} .bento-val { font-size: clamp(28px, 4vw, 44px); font-weight: bold; @@ -1347,7 +1362,7 @@ body { text-align: center; padding: 30px 16px; } - + .bento-wide { grid-column: 1 / -1; } From b652b1c5ca11d1153c0ffe14ca0a03aa75003d74 Mon Sep 17 00:00:00 2001 From: Soundcreates Date: Mon, 16 Mar 2026 20:46:56 +0530 Subject: [PATCH 2/6] ui: Hint for users to know how to play the game --- hackx/sections.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/hackx/sections.js b/hackx/sections.js index 66cc5f88..d4ce9849 100644 --- a/hackx/sections.js +++ b/hackx/sections.js @@ -474,8 +474,17 @@ setTimeout(() => bar.classList.remove('visible'), 5000); } + // Show normal announcements as before setTimeout(show, 30000); setInterval(show, 30000 + Math.random() * 15000); + + // Show periodic hint every 2 minutes + function showHint() { + bar.textContent = 'Hint: Try dragging over certain numbers to progress in the game!'; + bar.classList.add('visible'); + setTimeout(() => bar.classList.remove('visible'), 7000); + } + setInterval(showHint, 2 * 60 * 1000); // every 2 minutes } // ===== CURSOR GLOW ===== From 42f15ab26cba87b32fe33aacee58f6d068a6b630 Mon Sep 17 00:00:00 2001 From: Soundcreates Date: Mon, 16 Mar 2026 21:09:34 +0530 Subject: [PATCH 3/6] ui: added responsiveness for what you get section --- hackx/index.html | 4 ++-- hackx/style.css | 37 +++++++++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 2 deletions(-) diff --git a/hackx/index.html b/hackx/index.html index 83468fe0..22beeb25 100644 --- a/hackx/index.html +++ b/hackx/index.html @@ -154,11 +154,11 @@

// WHAT YOU GET

IN PRIZES
ACROSS BOTH TRACKS
-
+
24H
FOOD & CAFFEINE
-
+
1:1
MENTORSHIP
diff --git a/hackx/style.css b/hackx/style.css index 9086f4ce..d3d74032 100644 --- a/hackx/style.css +++ b/hackx/style.css @@ -656,6 +656,43 @@ body { z-index: 1; } +@media (max-width: 480px) { + .perks-bento { + display: flex; + flex-direction: column; + gap: 8px; + max-width: 98vw; + width: 100%; + align-items: stretch; + } + .bento-cell { + width: 100%; + min-width: 0; + padding: 20px 12px; + box-sizing: border-box; + border-radius: 8px; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + .bento-hero, .bento-wide, .bento-network-row { + width: 100%; + min-width: 0; + border-radius: 8px; + grid-column: unset; + grid-row: unset; + } + .centered-text-flex{ + display:flex; + flex-direction:column; + justify-content:center; + align-items:center; + } +} + + .bento-cell { border: 1px solid #FF174418; padding: 36px 24px; From c215a23d513af78a92e6bce17c060324a057c09a Mon Sep 17 00:00:00 2001 From: Soundcreates Date: Thu, 19 Mar 2026 01:29:14 +0530 Subject: [PATCH 4/6] ui: redesigned timeline page --- hackx/index.html | 132 +++++++++++++---- hackx/sections.js | 260 ++++++++++++++++++++++++++++----- hackx/style.css | 357 ++++++++++++++++++++++++++++++++++++---------- 3 files changed, 614 insertions(+), 135 deletions(-) diff --git a/hackx/index.html b/hackx/index.html index e0935dff..68b27b3a 100644 --- a/hackx/index.html +++ b/hackx/index.html @@ -279,39 +279,109 @@

// SPONSORS

-
+

// TIMELINE

-
-
-
-
MAR 15
-
REGISTRATION OPENS
-
-
-
-
APR 08
-
REGISTRATION CLOSES
-
-
-
-
APR 11
-
OPENING CEREMONY
-
-
-
-
APR 11-12
-
24 HOURS OF HACKING
-
-
-
-
APR 12
-
DEMOS & JUDGING
+
+
+
+
DATE + DAY
+
APR 11-12
+
FRIDAY — SATURDAY
+
+ +
+
EVENT DETAILS
+
24 HOURS OF HACKING
+
+11:00 AM — Hacking Period Starts +01:00 PM — Lunch +04:30 PM — Evening Snacks +06:00 PM — Mentoring Round 1 +08:30 PM — Dinner +12:00 AM — Midnight Snacks +01:00 AM — Mentoring Round 2 +08:00 AM — Breakfast +11:00 AM — Hacking Period Ends +
+
-
-
-
APR 12
-
- CLOSING CEREMONY & PRIZES + +
+ + + +
+ + + + + + + + + + +
diff --git a/hackx/sections.js b/hackx/sections.js index 7702985b..2a8ba85f 100644 --- a/hackx/sections.js +++ b/hackx/sections.js @@ -362,6 +362,7 @@ initFooterCanvas(); // Core (one-time CSS transitions, no jank) initScrollFadeIn(); + initTimelineLineDraw(); initPrizeCounters(); // initScrollProgressBar(); // removed — was showing blue line at top initAnnouncements(); @@ -1122,13 +1123,27 @@ void main() { draw(); } - // ===== SCROLL FADE-IN (smoother: 0.6s ease-out) ===== + // ===== SCROLL REVEAL (timeline toggles in/out on viewport entry/exit) ===== function initScrollFadeIn() { - const observer = new IntersectionObserver( + const timelineObserver = new IntersectionObserver( (entries) => { + entries.forEach((entry) => { + entry.target.classList.toggle("visible", entry.isIntersecting); + }); + }, + { threshold: 0.2 }, + ); + + document + .querySelectorAll(".timeline-item") + .forEach((item) => timelineObserver.observe(item)); + + const statObserver = new IntersectionObserver( + (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("visible"); + observer.unobserve(entry.target); } }); }, @@ -1136,8 +1151,8 @@ void main() { ); document - .querySelectorAll(".timeline-item, .about-stat") - .forEach((item) => observer.observe(item)); + .querySelectorAll(".about-stat") + .forEach((item) => statObserver.observe(item)); document.querySelectorAll(".section-content").forEach((el) => { el.style.opacity = "0"; @@ -1424,41 +1439,131 @@ void main() { }); } - // ===== SUBTLE-BUT-WILD: Timeline Line Draw on Scroll ===== - // The timeline vertical line "draws" downward as you scroll through the section + // ===== TIMELINE: Bottom Thread + Pinch Nodes ===== function initTimelineLineDraw() { const timelineSection = document.getElementById("timeline-section"); if (!timelineSection) return; - const timelineLine = timelineSection.querySelector(".timeline-line"); - if (!timelineLine) return; + const threadWrap = timelineSection.querySelector("#timeline-thread-wrap"); + const threadSvg = timelineSection.querySelector(".timeline-thread-svg"); + const nodeTrack = timelineSection.querySelector("#timeline-node-track"); + const threadPath = timelineSection.querySelector("#timeline-thread-path"); + const nodes = Array.from(timelineSection.querySelectorAll(".timeline-node")); + const panelDate = timelineSection.querySelector("#timeline-panel-date"); + const panelDay = timelineSection.querySelector("#timeline-panel-day"); + const panelTitle = timelineSection.querySelector("#timeline-panel-title"); + const panelBody = timelineSection.querySelector("#timeline-panel-body"); + + if ( + !threadWrap || + !threadSvg || + !nodeTrack || + !threadPath || + !nodes.length || + !panelDate || + !panelDay || + !panelTitle || + !panelBody + ) { + return; + } - // Store original height, then set to 0 - const computedStyle = window.getComputedStyle(timelineLine); - const fullHeight = timelineLine.offsetHeight || timelineLine.scrollHeight; - timelineLine.style.height = "0px"; - timelineLine.style.transition = "none"; - timelineLine.style.overflow = "visible"; + nodeTrack.style.setProperty("--node-count", String(nodes.length)); - function update() { - const rect = timelineSection.getBoundingClientRect(); - const sectionTop = rect.top; - const sectionHeight = rect.height; - const viewportHeight = window.innerHeight; - - // Start drawing when section enters viewport, finish when section leaves - const scrollStart = viewportHeight * 0.8; - const scrollEnd = -sectionHeight * 0.2; - const progress = Math.max( - 0, - Math.min(1, (scrollStart - sectionTop) / (scrollStart - scrollEnd)), - ); + let activeIndex = nodes.findIndex((node) => node.classList.contains("active")); + if (activeIndex < 0) activeIndex = 0; - timelineLine.style.height = progress * fullHeight + "px"; - requestAnimationFrame(update); + function setPanelContent(node) { + panelDate.textContent = node.dataset.date || ""; + panelDay.textContent = node.dataset.day || ""; + panelTitle.textContent = node.dataset.title || ""; + panelBody.textContent = String(node.dataset.detail || "").replace(/\r\n?/g, "\n"); + panelBody.scrollTop = 0; } - requestAnimationFrame(update); + function applyPinch(index) { + nodes.forEach((node, nodeIndex) => { + const distance = Math.abs(nodeIndex - index); + const liftPx = distance === 0 ? 64 : distance === 1 ? 28 : distance === 2 ? 10 : 0; + node.style.setProperty("--lift", `${liftPx}px`); + const isActive = nodeIndex === index; + node.classList.toggle("active", isActive); + node.setAttribute("aria-pressed", isActive ? "true" : "false"); + }); + } + + function pointFromNode(node) { + const dot = node.querySelector(".timeline-node-dot") || node; + const wrapRect = threadWrap.getBoundingClientRect(); + const dotRect = dot.getBoundingClientRect(); + return { + x: dotRect.left + dotRect.width / 2 - wrapRect.left, + y: dotRect.top + dotRect.height / 2 - wrapRect.top, + }; + } + + function buildThreadPath(points) { + if (!points.length) return ""; + if (points.length === 1) { + const point = points[0]; + return `M ${point.x.toFixed(2)} ${point.y.toFixed(2)} L ${point.x.toFixed(2)} ${point.y.toFixed(2)}`; + } + + let d = `M ${points[0].x.toFixed(2)} ${points[0].y.toFixed(2)}`; + for (let index = 1; index < points.length; index += 1) { + const point = points[index]; + d += ` L ${point.x.toFixed(2)} ${point.y.toFixed(2)}`; + } + return d; + } + + function drawThread() { + const width = Math.max(1, threadWrap.clientWidth); + const height = Math.max(1, threadWrap.clientHeight); + threadSvg.setAttribute("viewBox", `0 0 ${width} ${height}`); + + const points = nodes.map((node) => pointFromNode(node)); + if (!points.length) { + threadPath.setAttribute("d", ""); + return; + } + + const extendedPoints = [ + { x: 0, y: points[0].y }, + ...points, + { x: width, y: points[points.length - 1].y }, + ]; + + threadPath.setAttribute("d", buildThreadPath(extendedPoints)); + } + + function setActive(index) { + activeIndex = index; + applyPinch(index); + setPanelContent(nodes[index]); + drawThread(); + } + + nodes.forEach((node, index) => { + node.addEventListener("mouseenter", () => setActive(index)); + node.addEventListener("focus", () => setActive(index)); + node.addEventListener("click", () => setActive(index)); + node.addEventListener("keydown", (event) => { + if (event.key !== "Enter" && event.key !== " ") return; + event.preventDefault(); + setActive(index); + }); + }); + + window.addEventListener("resize", drawThread, { passive: true }); + + function animateThread() { + drawThread(); + requestAnimationFrame(animateThread); + } + + setActive(activeIndex); + requestAnimationFrame(animateThread); } // ===== PERKS BG — Rising particles ===== @@ -2365,7 +2470,7 @@ void main() { setTimeout(pulse, 8000 + Math.random() * 4000); } - // ===== INTERACTION: Hover Line Trace — Cyan Border Trace ===== + // ===== INTERACTION: Hover Traces — Lines + Timeline Box Draw ===== function initHoverLineTrace() { const style = document.createElement("style"); style.textContent = ` @@ -2379,20 +2484,111 @@ void main() { ._line-trace-wrap:hover ._line-trace { width: 100%; } + + ._timeline-box-wrap { + position: relative; + } + + ._timeline-box-trace { + position: absolute; + inset: -10px -14px; + pointer-events: none; + opacity: 0; + transition: opacity 160ms ease-out; + } + + ._timeline-box-trace span { + position: absolute; + background: ${RED}; + box-shadow: 0 0 10px rgba(${RED_RGB.join(",")}, 0.24); + } + + ._timeline-box-trace ._trace-top, + ._timeline-box-trace ._trace-bottom { + left: 0; + right: 0; + height: 1px; + transform: scaleX(0); + transform-origin: var(--trace-origin, left); + transition: transform 260ms ease-out; + } + + ._timeline-box-trace ._trace-top { + top: 0; + } + + ._timeline-box-trace ._trace-bottom { + bottom: 0; + } + + ._timeline-box-trace ._trace-left, + ._timeline-box-trace ._trace-right { + top: 0; + bottom: 0; + width: 1px; + transform: scaleY(0); + transform-origin: top; + transition: transform 220ms ease-out 240ms; + } + + ._timeline-box-trace ._trace-left { + left: 0; + } + + ._timeline-box-trace ._trace-right { + right: 0; + } + + ._timeline-box-wrap:hover ._timeline-box-trace { + opacity: 1; + } + + ._timeline-box-wrap:hover ._timeline-box-trace ._trace-top, + ._timeline-box-wrap:hover ._timeline-box-trace ._trace-bottom { + transform: scaleX(1); + } + + ._timeline-box-wrap:hover ._timeline-box-trace ._trace-left, + ._timeline-box-wrap:hover ._timeline-box-trace ._trace-right { + transform: scaleY(1); + } `; document.head.appendChild(style); document - .querySelectorAll(".readout-row, .prize-entry, .timeline-item") + .querySelectorAll(".readout-row, .prize-entry") .forEach((el) => { el.classList.add("_line-trace-wrap"); if (el.style.position === "" || el.style.position === "static") { el.style.position = "relative"; } + if (el.querySelector("._line-trace")) return; const line = document.createElement("div"); line.className = "_line-trace"; el.appendChild(line); }); + + document.querySelectorAll(".timeline-item").forEach((item) => { + item.classList.remove("_line-trace-wrap"); + item.querySelectorAll("._line-trace").forEach((line) => line.remove()); + }); + + document.querySelectorAll(".timeline-copy").forEach((copy) => { + copy.classList.add("_timeline-box-wrap"); + if (copy.style.position === "" || copy.style.position === "static") { + copy.style.position = "relative"; + } + if (copy.querySelector("._timeline-box-trace")) return; + const box = document.createElement("div"); + box.className = "_timeline-box-trace"; + box.innerHTML = ` + + + + + `; + copy.appendChild(box); + }); } // ===== INTERACTION: Reveal on Scroll — Glitch Text Entrance ===== diff --git a/hackx/style.css b/hackx/style.css index 830c7fe0..d654e078 100644 --- a/hackx/style.css +++ b/hackx/style.css @@ -641,89 +641,184 @@ label { border-top: 2px solid #4fd1d920; } -.timeline { - position: relative; - max-width: 800px; - margin: 0 auto; +.timeline-content { + width: min(calc(100vw - 36px), 1360px); + max-width: none; padding-left: 0; + padding-right: 0; + padding-top: 74px; + padding-bottom: 26px; } -.timeline::before { - content: ""; - position: absolute; - left: 140px; - top: 0; - bottom: 0; - width: 1px; - background: #4fd1d920; +.timeline-hub { + min-height: clamp(390px, 56vh, 540px); + display: flex; + flex-direction: column; + justify-content: flex-start; + gap: 12px; } -.timeline-item { - position: relative; +.timeline-panels { + display: grid; + grid-template-columns: minmax(280px, 0.95fr) minmax(440px, 1.7fr); + gap: 22px; + align-items: stretch; +} + +.timeline-panel { + border: 1px solid #4fd1d92a; + background: rgba(10, 22, 40, 0.82); + box-shadow: + inset 0 0 36px #4fd1d908, + 0 0 22px #4fd1d914; + padding: clamp(22px, 3vw, 36px); + height: clamp(250px, 34vh, 340px); display: flex; - align-items: baseline; - gap: 40px; - padding: 30px 0; - border-bottom: 1px solid #4fd1d910; - opacity: 0; - transform: translateY(10px); - transition: all 0.6s ease; + flex-direction: column; } -.timeline-item.visible { - opacity: 1; - transform: translateY(0); +.timeline-panel-label { + font-size: 10px; + letter-spacing: 4px; + color: var(--text-dim); + margin-bottom: 18px; } -.timeline-dot { +.timeline-panel-date { + font-size: clamp(46px, 6.2vw, 84px); + letter-spacing: 0.04em; + color: var(--gold); + line-height: 1; + margin-bottom: 16px; + text-shadow: 0 0 22px #4fd1d92a; +} + +.timeline-panel-day { + font-size: clamp(13px, 1.7vw, 18px); + letter-spacing: 2.4px; + color: #4fd1d9cf; +} + +.timeline-panel-title { + font-size: clamp(20px, 2.5vw, 34px); + letter-spacing: 2px; + color: var(--gold); + margin-bottom: 16px; +} + +.timeline-panel-body { + font-size: clamp(13px, 1.35vw, 17px); + line-height: 1.8; + letter-spacing: 1.2px; + color: var(--text); + white-space: pre-line; + flex: 1 1 auto; + min-height: 0; + max-height: none; + overflow-y: auto; + padding-right: 6px; +} + +.timeline-thread-wrap { + position: relative; + width: 100%; + height: clamp(104px, 14vh, 140px); + overflow: hidden; + margin-top: 10px; +} + +.timeline-thread-svg { position: absolute; - left: 136px; - top: 38px; - width: 9px; - height: 9px; - border: 1px solid #4fd1d940; - background: #0a1628; - transition: all 0.4s ease; + inset: 0; + width: 100%; + height: 100%; z-index: 1; + pointer-events: none; } -.timeline-item.visible .timeline-dot { - border-color: #4fd1d9cc; - box-shadow: 0 0 8px #4fd1d930; +#timeline-thread-path { + fill: none; + stroke: #4fd1d9f2; + stroke-width: 3.4; + stroke-linecap: round; + stroke-linejoin: round; + filter: drop-shadow(0 0 16px #4fd1d9a0); } -.timeline-item.active .timeline-dot { - background: var(--gold); - border-color: var(--gold); - box-shadow: 0 0 20px #4fd1d960; +.timeline-node-track { + --node-count: 6; + position: absolute; + inset: 0; + z-index: 2; + display: grid; + grid-template-columns: repeat(var(--node-count), minmax(0, 1fr)); + align-items: end; + padding: 0 clamp(8px, 1.4vw, 20px) clamp(6px, 1.2vh, 12px); } -.timeline-date { - font-size: clamp(20px, 3vw, 32px); - font-weight: bold; - letter-spacing: 0.06em; - color: #4fd1d9b0; - min-width: 120px; - text-align: right; - flex-shrink: 0; +.timeline-node { + --lift: 0px; + appearance: none; + border: none; + background: transparent; + color: inherit; + font-family: inherit; + display: flex; + flex-direction: column; + align-items: center; + justify-self: center; + gap: 10px; + padding: 0 4px; + cursor: pointer; + transform: translateY(calc(var(--lift) * -1)); + transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1); } -.timeline-item.active .timeline-date { - color: var(--gold); - text-shadow: 0 0 20px #4fd1d930; +.timeline-node-dot { + width: 14px; + height: 14px; + border-radius: 50%; + border: 2px solid #4fd1d980; + background: #0a1628; + box-shadow: + 0 0 0 4px #4fd1d912, + 0 0 10px #4fd1d940; + transition: + transform 0.3s ease, + border-color 0.3s ease, + background 0.3s ease, + box-shadow 0.3s ease; } -.timeline-event { - font-size: clamp(14px, 2vw, 18px); - letter-spacing: 3px; - padding-left: 30px; - color: var(--text); +.timeline-node-label { + font-size: clamp(11px, 1.3vw, 15px); + letter-spacing: 2px; + color: #4fd1d9b7; + white-space: nowrap; + transition: color 0.3s ease; } -.timeline-item.active .timeline-event { +.timeline-node:hover .timeline-node-dot, +.timeline-node:focus-visible .timeline-node-dot, +.timeline-node.active .timeline-node-dot { + border-color: var(--gold); + background: var(--gold); + box-shadow: + 0 0 0 4px #4fd1d924, + 0 0 18px #4fd1d978; + transform: scale(1.08); +} + +.timeline-node:hover .timeline-node-label, +.timeline-node:focus-visible .timeline-node-label, +.timeline-node.active .timeline-node-label { color: var(--gold); } +.timeline-node:focus-visible { + outline: none; +} + /* ===== FAQ SECTION ===== */ #faq-section { border-top: 2px solid #4fd1d920; @@ -1587,12 +1682,14 @@ a.team-card { /* ===== TIMELINE LINE DRAW ===== */ .timeline-line { position: absolute; - left: 140px; + left: 50%; top: 0; + transform: translateX(-50%); width: 1px; height: 0; background: var(--red); z-index: 1; + pointer-events: none; transition: none; } @@ -1700,30 +1797,75 @@ a.team-card { } /* Timeline */ - .timeline::before { - left: 0; + .timeline-content { + width: min(calc(100vw - 24px), 1180px); + padding-top: 58px; + padding-bottom: 20px; } - .timeline-item { - flex-direction: column; - gap: 4px; - padding-left: 20px; + .timeline-hub { + min-height: clamp(400px, 58vh, 520px); + gap: 12px; } - .timeline-dot { - left: -4px; - top: 34px; + .timeline-panels { + grid-template-columns: 1fr; + gap: 14px; + transform: none; + } + + .timeline-panel-datebox, + .timeline-panel-detailbox { + transform: none; + } + + .timeline-panel { + height: auto; + padding: 22px 18px; + } + + .timeline-panel-date { + font-size: clamp(40px, 8.2vw, 64px); + margin-bottom: 10px; + } + + .timeline-panel-day { + font-size: 12px; + letter-spacing: 2px; } - .timeline-date { - text-align: left; - min-width: auto; - font-size: clamp(16px, 4vw, 24px); + .timeline-panel-title { + font-size: clamp(16px, 4.4vw, 26px); } - .timeline-event { - padding-left: 0; + .timeline-panel-body { font-size: 12px; + line-height: 1.75; + flex: initial; + min-height: initial; + max-height: 220px; + } + + .timeline-thread-wrap { + height: 102px; + } + + .timeline-node-track { + padding-bottom: 8px; + } + + .timeline-node { + gap: 8px; + } + + .timeline-node-dot { + width: 12px; + height: 12px; + } + + .timeline-node-label { + font-size: 10px; + letter-spacing: 1.4px; } /* FAQ */ @@ -1866,6 +2008,77 @@ a.team-card { font-size: clamp(32px, 12vw, 48px); } + /* Timeline */ + .timeline-content { + width: calc(100vw - 16px); + padding-top: 46px; + padding-bottom: 14px; + } + + .timeline-hub { + min-height: 360px; + gap: 10px; + } + + .timeline-panel { + height: auto; + padding: 18px 14px; + } + + .timeline-panel-label { + font-size: 9px; + letter-spacing: 2.4px; + margin-bottom: 12px; + } + + .timeline-panel-date { + font-size: clamp(34px, 11vw, 52px); + } + + .timeline-panel-day { + font-size: 10px; + letter-spacing: 1.5px; + } + + .timeline-panel-title { + font-size: 14px; + letter-spacing: 1.2px; + margin-bottom: 10px; + } + + .timeline-panel-body { + font-size: 11px; + line-height: 1.65; + max-height: 176px; + } + + .timeline-thread-wrap { + height: 92px; + } + + .timeline-node-track { + padding: 0 4px 6px; + } + + .timeline-node-dot { + width: 10px; + height: 10px; + } + + .timeline-node-label { + font-size: 9px; + letter-spacing: 1px; + } + + .timeline-panels { + transform: none; + } + + .timeline-panel-datebox, + .timeline-panel-detailbox { + transform: none; + } + /* Team */ .team-card { min-width: 90px; From d73c849668809c3de6c06f0885458b744fed2fc9 Mon Sep 17 00:00:00 2001 From: Soundcreates Date: Thu, 19 Mar 2026 01:41:40 +0530 Subject: [PATCH 5/6] ui: smoothened the node graph line --- hackx/sections.js | 47 +++++++++++++++++++++++++--- hackx/style.css | 78 +++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 110 insertions(+), 15 deletions(-) diff --git a/hackx/sections.js b/hackx/sections.js index 2a8ba85f..15765112 100644 --- a/hackx/sections.js +++ b/hackx/sections.js @@ -1448,6 +1448,7 @@ void main() { const threadSvg = timelineSection.querySelector(".timeline-thread-svg"); const nodeTrack = timelineSection.querySelector("#timeline-node-track"); const threadPath = timelineSection.querySelector("#timeline-thread-path"); + const timelinePanels = timelineSection.querySelector(".timeline-panels"); const nodes = Array.from(timelineSection.querySelectorAll(".timeline-node")); const panelDate = timelineSection.querySelector("#timeline-panel-date"); const panelDay = timelineSection.querySelector("#timeline-panel-day"); @@ -1472,6 +1473,7 @@ void main() { let activeIndex = nodes.findIndex((node) => node.classList.contains("active")); if (activeIndex < 0) activeIndex = 0; + let panelAnimationTimeout = null; function setPanelContent(node) { panelDate.textContent = node.dataset.date || ""; @@ -1481,6 +1483,25 @@ void main() { panelBody.scrollTop = 0; } + function animatePanels(direction) { + if (!timelinePanels || direction === 0) return; + + const animationClass = direction > 0 ? "panel-in-right" : "panel-in-left"; + + timelinePanels.classList.remove("panel-in-left", "panel-in-right"); + void timelinePanels.offsetWidth; + timelinePanels.classList.add(animationClass); + + if (panelAnimationTimeout) { + window.clearTimeout(panelAnimationTimeout); + } + + panelAnimationTimeout = window.setTimeout(() => { + timelinePanels.classList.remove("panel-in-left", "panel-in-right"); + panelAnimationTimeout = null; + }, 360); + } + function applyPinch(index) { nodes.forEach((node, nodeIndex) => { const distance = Math.abs(nodeIndex - index); @@ -1509,11 +1530,23 @@ void main() { return `M ${point.x.toFixed(2)} ${point.y.toFixed(2)} L ${point.x.toFixed(2)} ${point.y.toFixed(2)}`; } + const tension = 0.25; let d = `M ${points[0].x.toFixed(2)} ${points[0].y.toFixed(2)}`; - for (let index = 1; index < points.length; index += 1) { - const point = points[index]; - d += ` L ${point.x.toFixed(2)} ${point.y.toFixed(2)}`; + + for (let index = 0; index < points.length - 1; index += 1) { + const p0 = points[index - 1] || points[index]; + const p1 = points[index]; + const p2 = points[index + 1]; + const p3 = points[index + 2] || p2; + + const cp1x = p1.x + (p2.x - p0.x) * tension; + const cp1y = p1.y + (p2.y - p0.y) * tension; + const cp2x = p2.x - (p3.x - p1.x) * tension; + const cp2y = p2.y - (p3.y - p1.y) * tension; + + d += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)} ${cp2x.toFixed(2)} ${cp2y.toFixed(2)} ${p2.x.toFixed(2)} ${p2.y.toFixed(2)}`; } + return d; } @@ -1537,10 +1570,14 @@ void main() { threadPath.setAttribute("d", buildThreadPath(extendedPoints)); } - function setActive(index) { + function setActive(index, shouldAnimatePanels = true) { + const direction = index === activeIndex ? 0 : index > activeIndex ? 1 : -1; activeIndex = index; applyPinch(index); setPanelContent(nodes[index]); + if (shouldAnimatePanels && direction !== 0) { + animatePanels(direction); + } drawThread(); } @@ -1562,7 +1599,7 @@ void main() { requestAnimationFrame(animateThread); } - setActive(activeIndex); + setActive(activeIndex, false); requestAnimationFrame(animateThread); } diff --git a/hackx/style.css b/hackx/style.css index d654e078..62234d88 100644 --- a/hackx/style.css +++ b/hackx/style.css @@ -655,14 +655,26 @@ label { display: flex; flex-direction: column; justify-content: flex-start; - gap: 12px; + gap: 16px; } .timeline-panels { + --timeline-panel-height: clamp(250px, 34vh, 340px); + --timeline-swap-duration: 320ms; display: grid; grid-template-columns: minmax(280px, 0.95fr) minmax(440px, 1.7fr); gap: 22px; align-items: stretch; + height: var(--timeline-panel-height); + flex: 0 0 var(--timeline-panel-height); +} + +.timeline-panels.panel-in-left .timeline-panel { + animation: timelinePanelFadeInLeft var(--timeline-swap-duration) cubic-bezier(0.22, 1, 0.36, 1) both; +} + +.timeline-panels.panel-in-right .timeline-panel { + animation: timelinePanelFadeInRight var(--timeline-swap-duration) cubic-bezier(0.22, 1, 0.36, 1) both; } .timeline-panel { @@ -672,9 +684,42 @@ label { inset 0 0 36px #4fd1d908, 0 0 22px #4fd1d914; padding: clamp(22px, 3vw, 36px); - height: clamp(250px, 34vh, 340px); + height: 100%; + min-height: 0; display: flex; flex-direction: column; + will-change: transform, opacity; +} + +@keyframes timelinePanelFadeInLeft { + from { + opacity: 0; + transform: translateX(-22px); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes timelinePanelFadeInRight { + from { + opacity: 0; + transform: translateX(22px); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +@media (prefers-reduced-motion: reduce) { + .timeline-panels.panel-in-left .timeline-panel, + .timeline-panels.panel-in-right .timeline-panel { + animation: none; + } } .timeline-panel-label { @@ -685,12 +730,14 @@ label { } .timeline-panel-date { - font-size: clamp(46px, 6.2vw, 84px); + font-size: clamp(42px, 5.8vw, 74px); letter-spacing: 0.04em; color: var(--gold); - line-height: 1; + line-height: 1.02; margin-bottom: 16px; text-shadow: 0 0 22px #4fd1d92a; + white-space: nowrap; + min-height: 1.1em; } .timeline-panel-day { @@ -724,7 +771,8 @@ label { width: 100%; height: clamp(104px, 14vh, 140px); overflow: hidden; - margin-top: 10px; + margin-top: 14px; + flex: 0 0 clamp(104px, 14vh, 140px); } .timeline-thread-svg { @@ -1805,13 +1853,15 @@ a.team-card { .timeline-hub { min-height: clamp(400px, 58vh, 520px); - gap: 12px; + gap: 14px; } .timeline-panels { + --timeline-panel-height: auto; grid-template-columns: 1fr; gap: 14px; - transform: none; + height: auto; + flex: initial; } .timeline-panel-datebox, @@ -1848,6 +1898,8 @@ a.team-card { .timeline-thread-wrap { height: 102px; + margin-top: 10px; + flex: initial; } .timeline-node-track { @@ -1859,8 +1911,8 @@ a.team-card { } .timeline-node-dot { - width: 12px; - height: 12px; + width: 15px; + height: 15px; } .timeline-node-label { @@ -2017,7 +2069,7 @@ a.team-card { .timeline-hub { min-height: 360px; - gap: 10px; + gap: 12px; } .timeline-panel { @@ -2033,6 +2085,8 @@ a.team-card { .timeline-panel-date { font-size: clamp(34px, 11vw, 52px); + white-space: normal; + min-height: 0; } .timeline-panel-day { @@ -2049,11 +2103,15 @@ a.team-card { .timeline-panel-body { font-size: 11px; line-height: 1.65; + flex: initial; + min-height: initial; max-height: 176px; } .timeline-thread-wrap { height: 92px; + margin-top: 8px; + flex: initial; } .timeline-node-track { From d575690a8f3d4e49cec4f45e88d3eabe03bcf82a Mon Sep 17 00:00:00 2001 From: Soundcreates Date: Thu, 19 Mar 2026 19:55:58 +0530 Subject: [PATCH 6/6] ui: modified what you get section's text content --- hackx/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/hackx/index.html b/hackx/index.html index 207a5bbd..c3f8f3d8 100644 --- a/hackx/index.html +++ b/hackx/index.html @@ -197,8 +197,8 @@

// WHAT YOU GET

NETWORK
-
SWAG + CERTS + WIFI + VIBES
-
EVERYTHING ELSE IS ON US
+
SWAGS + CERTS + VIBES
+
EVERYTHING IS ON US