Skip to content

Timeline section redesign #146

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
OmikAcharya merged 12 commits into from
Mar 19, 2026
+754 −170
Merged

Timeline section redesign #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d66271a
ui: redesigned what you get section
Soundcreates Mar 16, 2026
b652b1c
ui: Hint for users to know how to play the game
Soundcreates Mar 16, 2026
42f15ab
ui: added responsiveness for what you get section
Soundcreates Mar 16, 2026
e8cbc20
Merge branch 'hackx' of github.com:kjsce-codecell/Hackathon into what…
OmikAcharya Mar 18, 2026
8acffae
qMerge branch 'hackx' of github.com:kjsce-codecell/Hackathon into
Soundcreates Mar 18, 2026
a7eb410
Merge branch 'hackx' of github.com:kjsce-codecell/Hackathon into what…
Soundcreates Mar 18, 2026
48cb13e
Merge branch 'hackx' of github.com:kjsce-codecell/Hackathon into what…
Soundcreates Mar 18, 2026
c215a23
ui: redesigned timeline page
Soundcreates Mar 18, 2026
d73c849
ui: smoothened the node graph line
Soundcreates Mar 18, 2026
f096001
fix: fixed merge conflicts
Soundcreates Mar 18, 2026
4f5dbe4
Merge branch 'hackx' of github.com:kjsce-codecell/Hackathon into what…
Soundcreates Mar 19, 2026
d575690
ui: modified what you get section's text content
Soundcreates Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
184 changes: 127 additions & 57 deletions hackx/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,32 +175,32 @@ <h1 class="glitch-text" data-text="// PRIZES">// PRIZES</h1>

<!-- SECTION 5: WHAT YOU GET -->
<section id="perks-section" class="section">
<canvas id="perks-bg-canvas"></canvas>
<div class="section-content">
<h1 class="glitch-text" data-text="// WHAT YOU GET">// WHAT YOU GET</h1>
<div class="perks-bento">
<div class="bento-cell bento-hero">
<div class="bento-val">₹3L+</div>
<div class="bento-label">IN PRIZES</div>
<div class="bento-sub">ACROSS BOTH TRACKS</div>
</div>
<div class="bento-cell bento-center">
<div class="bento-val">24H</div>
<div class="bento-label">FOOD & CAFFEINE</div>
</div>
<div class="bento-cell bento-center">
<div class="bento-val">1:1</div>
<div class="bento-label">MENTORSHIP</div>
</div>
<div class="bento-cell centered-text-flex bento-network-row">
<div class="bento-val">200+</div>
<div class="bento-label">NETWORK</div>
</div>
<div class="bento-cell bento-wide centered-text-flex">
<div class="bento-val">SWAG + CERTS + WIFI + VIBES</div>
<div class="bento-label">EVERYTHING ELSE IS ON US</div>
</div>
</div>
<canvas id="perks-bg-canvas"></canvas>
<div class="section-content">
<h1 class="glitch-text" data-text="// WHAT YOU GET">// WHAT YOU GET</h1>
<div class="perks-bento">
<div class="bento-cell bento-hero">
<div class="bento-val">₹3L+</div>
<div class="bento-label">IN PRIZES</div>
<div class="bento-sub">ACROSS BOTH TRACKS</div>
</div>
<div class="bento-cell bento-center">
<div class="bento-val">24H</div>
<div class="bento-label">FOOD & CAFFEINE</div>
</div>
<div class="bento-cell bento-center">
<div class="bento-val">1:1</div>
<div class="bento-label">MENTORSHIP</div>
</div>
<div class="bento-cell centered-text-flex bento-network-row">
<div class="bento-val">200+</div>
<div class="bento-label">NETWORK</div>
</div>
<div class="bento-cell bento-wide centered-text-flex">
<div class="bento-val">SWAGS + CERTS + VIBES</div>
<div class="bento-label">EVERYTHING IS ON US</div>
</div>
</div>
</section>

<!-- SECTION 7: SPONSORS -->
Expand Down Expand Up @@ -382,39 +382,109 @@ <h1 class="glitch-text" data-text="// SPONSORS">//SPONSORS</h1>

<!-- SECTION 8: TIMELINE -->
<section id="timeline-section" class="section">
<div class="section-content">
<div class="section-content timeline-content">
<h1 class="glitch-text" data-text="// TIMELINE">// TIMELINE</h1>
<div class="timeline">
<div class="timeline-item" data-aos>
<div class="timeline-dot"></div>
<div class="timeline-date">MAR 15</div>
<div class="timeline-event">REGISTRATION OPENS</div>
</div>
<div class="timeline-item" data-aos>
<div class="timeline-dot"></div>
<div class="timeline-date">APR 08</div>
<div class="timeline-event">REGISTRATION CLOSES</div>
</div>
<div class="timeline-item" data-aos>
<div class="timeline-dot"></div>
<div class="timeline-date">APR 11</div>
<div class="timeline-event">OPENING CEREMONY</div>
</div>
<div class="timeline-item active" data-aos>
<div class="timeline-dot"></div>
<div class="timeline-date">APR 11-12</div>
<div class="timeline-event">24 HOURS OF HACKING</div>
</div>
<div class="timeline-item" data-aos>
<div class="timeline-dot"></div>
<div class="timeline-date">APR 12</div>
<div class="timeline-event">DEMOS & JUDGING</div>
<div class="timeline-hub" data-aos>
<div class="timeline-panels">
<article class="timeline-panel timeline-panel-datebox">
<div class="timeline-panel-label">DATE + DAY</div>
<div class="timeline-panel-date" id="timeline-panel-date">APR 11-12</div>
<div class="timeline-panel-day" id="timeline-panel-day">FRIDAY — SATURDAY</div>
</article>

<article class="timeline-panel timeline-panel-detailbox">
<div class="timeline-panel-label">EVENT DETAILS</div>
<div class="timeline-panel-title" id="timeline-panel-title">24 HOURS OF HACKING</div>
<div class="timeline-panel-body" id="timeline-panel-body">
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
</div>
</article>
</div>
<div class="timeline-item" data-aos>
<div class="timeline-dot"></div>
<div class="timeline-date">APR 12</div>
<div class="timeline-event">
CLOSING CEREMONY & PRIZES

<div class="timeline-thread-wrap" id="timeline-thread-wrap">
<svg class="timeline-thread-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<path id="timeline-thread-path"></path>
</svg>
<div class="timeline-node-track" id="timeline-node-track">
<button
type="button"
class="timeline-node"
data-date="MAR 15"
data-day="SATURDAY"
data-title="REGISTRATION OPENS"
data-detail="Participant applications go live. Build your team and lock your slot before the rush."
>
<span class="timeline-node-dot" aria-hidden="true"></span>
<span class="timeline-node-label">MAR 15</span>
</button>

<button
type="button"
class="timeline-node"
data-date="APR 08"
data-day="WEDNESDAY"
data-title="REGISTRATION CLOSES"
data-detail="Final registration closes. Make sure your team, profile, and idea draft are submitted."
>
<span class="timeline-node-dot" aria-hidden="true"></span>
<span class="timeline-node-label">APR 08</span>
</button>

<button
type="button"
class="timeline-node"
data-date="APR 11"
data-day="FRIDAY"
data-title="OPENING CEREMONY"
data-detail="08:30 AM — Reporting&#10;09:30 AM — Inauguration Ceremony in KJSSE Auditorium"
>
<span class="timeline-node-dot" aria-hidden="true"></span>
<span class="timeline-node-label">APR 11</span>
</button>

<button
type="button"
class="timeline-node active"
data-date="APR 11-12"
data-day="FRIDAY — SATURDAY"
data-title="24 HOURS OF HACKING"
data-detail="11:00 AM — Hacking Period Starts&#10;01:00 PM — Lunch&#10;04:30 PM — Evening Snacks&#10;06:00 PM — Mentoring Round 1&#10;08:30 PM — Dinner&#10;12:00 AM — Midnight Snacks&#10;01:00 AM — Mentoring Round 2&#10;08:00 AM — Breakfast&#10;11:00 AM — Hacking Period Ends"
>
<span class="timeline-node-dot" aria-hidden="true"></span>
<span class="timeline-node-label">APR 11-12</span>
</button>

<button
type="button"
class="timeline-node"
data-date="APR 12"
data-day="SATURDAY"
data-title="DEMOS & JUDGING"
data-detail="11:15 AM — Evaluation Round 1&#10;01:00 PM — Lunch&#10;03:30 PM — Final Evaluation Round"
>
<span class="timeline-node-dot" aria-hidden="true"></span>
<span class="timeline-node-label">APR 12</span>
</button>

<button
type="button"
class="timeline-node"
data-date="APR 12"
data-day="SATURDAY"
data-title="CLOSING CEREMONY & PRIZES"
data-detail="04:30 PM — Evening Snacks&#10;05:30 PM — Prize Distribution & Closing Remarks"
>
<span class="timeline-node-dot" aria-hidden="true"></span>
<span class="timeline-node-label">APR 12</span>
</button>
</div>
</div>
</div>
Expand Down
Loading