Skip to content

Commit 0f3e393

Browse files
NekshaDeSilvaNekshaDeSilva
committed
updated
1 parent fd4f7d8 commit 0f3e393

File tree

4 files changed

+847
-5
lines changed

4 files changed

+847
-5
lines changed

‎assets/i/static-v3/hackclub.png‎

23.7 KB
Loading

‎index.html‎

Lines changed: 166 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
<nav class="navbar">
3535
<div class="nav-container">
3636
<a href="#" class="nav-brand">
37-
<img src="v/openrockets.png" alt="OpenRockets">
37+
<img src="i/assets/static/openthread_logo_bash-trans-removebg-preview (1).png" alt="OpenRockets">
3838
<span class="brand-text">platform</span>
3939
</a>
4040

@@ -44,6 +44,7 @@
4444
<li><a href="#about" class="nav-link">About</a></li>
4545
<li><a href="#projects" class="nav-link">Projects</a></li>
4646
<li><a href="#community" class="nav-link">Community</a></li>
47+
<li><a href="#hackclub-daydream" class="nav-link hackclub-highlight">🎮 DayDream SL</a></li>
4748
<li><a href="#events" class="nav-link">Events</a></li>
4849
<li><a href="join.html" class="nav-link">Join</a></li>
4950
</ul>
@@ -77,6 +78,10 @@ <h1 class="hero-title">
7778
<i class="fas fa-rocket"></i>
7879
Join the team
7980
</a>
81+
<a href="#hackclub-daydream" class="btn btn-hackclub btn-large">
82+
<i class="fas fa-gamepad"></i>
83+
DayDream Game Jam
84+
</a>
8085
<a href="#projects" class="btn btn-secondary btn-large">
8186
<i class="fas fa-code"></i>
8287
See around
@@ -91,6 +96,89 @@ <h1 class="hero-title">
9196
</div>
9297
</section>
9398

99+
<!-- HackClub DayDream Sri Lanka Event Banner -->
100+
<section id="hackclub-daydream" class="hackclub-event-banner">
101+
<div class="event-container">
102+
<div class="event-content">
103+
<div class="event-header">
104+
<img src="assets/i/static-v3/hackclub.png" alt="HackClub DayDream Sri Lanka" class="hackclub-logo">
105+
<div class="event-title-group">
106+
<h2 class="event-title">HackClub DayDream Sri Lanka</h2>
107+
<span class="event-date">Coming September 27th</span>
108+
</div>
109+
<div class="event-badge">LIVE EVENT</div>
110+
</div>
111+
112+
<div class="event-description">
113+
<p class="event-subtitle">
114+
🎮 Create amazing games in just 24 hours! Join developers across Colombo and various locations
115+
throughout Sri Lanka for an epic game development hackathon inspired by HackClub's global maker community.
116+
</p>
117+
118+
<div class="event-what-is">
119+
<h3>What is HackClub DayDream?</h3>
120+
<p>DayDream is a 24-hour game development jam where teenage developers and makers come together to create incredible games from scratch. Inspired by HackClub's philosophy of learning by building, this event encourages participants to explore game development, experiment with new tools, and collaborate with fellow builders.</p>
121+
122+
<h4>What You'll Do:</h4>
123+
<ul class="activity-list">
124+
<li>🎯 Form teams with other developers (or work solo)</li>
125+
<li>🎨 Brainstorm and design your game concept</li>
126+
<li>⚡ Build your game using Unity, Unreal Engine, Scratch, JavaScript, or any tool you prefer</li>
127+
<li>🎵 Create graphics, sounds, and gameplay mechanics</li>
128+
<li>🏆 Present your creation to judges and fellow participants</li>
129+
<li>🎉 Win awesome prizes and gain recognition in the community</li>
130+
</ul>
131+
132+
<h4>Perfect For:</h4>
133+
<ul class="skill-levels">
134+
<li>🔰 <strong>Beginners:</strong> New to coding? We'll provide tutorials and mentors!</li>
135+
<li>📈 <strong>Intermediate:</strong> Ready to try new frameworks and tools</li>
136+
<li>🚀 <strong>Advanced:</strong> Push the boundaries with complex game mechanics</li>
137+
</ul>
138+
</div>
139+
140+
<div class="event-details">
141+
<div class="detail-item">
142+
<i class="fas fa-map-marker-alt"></i>
143+
<span>Colombo & Multiple Locations, Sri Lanka</span>
144+
</div>
145+
<div class="detail-item">
146+
<i class="fas fa-clock"></i>
147+
<span>24-Hour Game Jam Challenge</span>
148+
</div>
149+
<div class="detail-item">
150+
<i class="fas fa-users"></i>
151+
<span>Open to All Skill Levels</span>
152+
</div>
153+
<div class="detail-item">
154+
<i class="fas fa-gamepad"></i>
155+
<span>Unity, Unreal, JavaScript & Any Game Engine</span>
156+
</div>
157+
<div class="detail-item">
158+
<i class="fas fa-trophy"></i>
159+
<span>Prizes, Recognition & Portfolio Building</span>
160+
</div>
161+
<div class="detail-item">
162+
<i class="fab fa-whatsapp"></i>
163+
<span>Live Community Support & Updates</span>
164+
</div>
165+
</div>
166+
167+
<div class="event-cta">
168+
<a href="https://whatsapp.com/channel/0029VbBBU1p3mFY2WbU2xL0v" target="_blank" class="btn btn-primary btn-hackclub">
169+
<i class="fab fa-whatsapp"></i>
170+
Join WhatsApp Updates
171+
</a>
172+
<a href="#events" class="btn btn-secondary">
173+
<i class="fas fa-info-circle"></i>
174+
Learn More
175+
</a>
176+
</div>
177+
</div>
178+
</div>
179+
</div>
180+
</section>
181+
94182
<!-- Stats Section -->
95183
<section class="stats">
96184
<div class="stats-grid">
@@ -310,6 +398,73 @@ <h3 class="feature-title">CityofGits</h3>
310398
</div>
311399
</section>
312400

401+
<!-- Events Section -->
402+
<section id="events" class="features">
403+
<div class="section-header">
404+
<h2 class="section-title">Upcoming <span class="text-gradient">Events</span></h2>
405+
<p class="section-subtitle">
406+
Join our exciting events, hackathons, and game jams happening around Sri Lanka and online.
407+
</p>
408+
</div>
409+
410+
<div class="features-grid">
411+
<div class="feature-card glow hackclub-featured">
412+
<div class="feature-icon">
413+
<img src="assets/i/static-v3/hackclub.png" alt="HackClub" style="width: 40px; height: 40px; border-radius: 8px;">
414+
</div>
415+
<h3 class="feature-title">HackClub DayDream Sri Lanka</h3>
416+
<p class="feature-description">
417+
🎮 The ultimate 24-hour game development hackathon! Create amazing games using Unity,
418+
Unreal Engine, or any game development tool. Perfect for beginners to advanced developers.
419+
Join us live in Colombo and multiple locations across Sri Lanka.
420+
</p>
421+
<div class="event-details-compact">
422+
<p><strong>What is DayDream?</strong> A 24-hour game jam inspired by HackClub's philosophy of learning by building. Teams collaborate to create games from scratch, experiment with new tools, and showcase their creativity.</p>
423+
<p><strong>Who can join?</strong> Any student or young developer interested in game development - from complete beginners to experienced programmers.</p>
424+
<p><strong>What you'll need:</strong> A laptop, creativity, and enthusiasm! We'll provide tutorials, mentors, and support.</p>
425+
</div>
426+
<div class="event-meta">
427+
<span class="event-location">📍 Colombo & Multiple Locations</span>
428+
<span class="event-timing">🕐 24-Hour Challenge</span>
429+
<span class="event-level">👥 All Skill Levels</span>
430+
<span class="event-tools">🎮 Unity, Unreal, JavaScript & More</span>
431+
<span class="event-community">📱 Live WhatsApp Updates & Support</span>
432+
</div>
433+
<a href="https://whatsapp.com/channel/0029VbBBU1p3mFY2WbU2xL0v" target="_blank" class="project-link event-register-link">
434+
<i class="fab fa-whatsapp"></i> Join WhatsApp Channel for Updates
435+
</a>
436+
</div>
437+
438+
<div class="feature-card">
439+
<div class="feature-icon">
440+
<i class="fas fa-calendar-alt"></i>
441+
</div>
442+
<h3 class="feature-title">Weekly Coding Sessions</h3>
443+
<p class="feature-description">
444+
Join our weekly coding sessions where we work on open-source projects,
445+
share knowledge, and help each other grow as developers.
446+
</p>
447+
<a href="calendar.html" class="project-link">
448+
<i class="fas fa-calendar"></i> View Calendar
449+
</a>
450+
</div>
451+
452+
<div class="feature-card">
453+
<div class="feature-icon">
454+
<i class="fab fa-github"></i>
455+
</div>
456+
<h3 class="feature-title">Contribution Challenges</h3>
457+
<p class="feature-description">
458+
Take part in our monthly contribution challenges. Solve GitHub issues,
459+
win prizes, and get recognition in the developer community.
460+
</p>
461+
<a href="https://github.com/OpenRockets" target="_blank" rel="noopener" class="project-link">
462+
<i class="fas fa-trophy"></i> View Challenges
463+
</a>
464+
</div>
465+
</div>
466+
</section>
467+
313468
<!-- Community Section -->
314469
<section id="community" class="features">
315470
<div class="section-header">
@@ -457,5 +612,15 @@ <h4>Connect</h4>
457612
</div>
458613

459614
<script src="scripts/parrot-assistant.js"></script>
615+
616+
<!-- HackClub DayDream Floating Button -->
617+
<div class="hackclub-floating-btn" onclick="window.open('https://whatsapp.com/channel/0029VbBBU1p3mFY2WbU2xL0v', '_blank')">
618+
<img src="assets/i/static-v3/hackclub.png" alt="HackClub DayDream" class="float-logo">
619+
<div class="float-text">
620+
<span class="float-title">DayDream SL</span>
621+
<span class="float-date">Sept 27</span>
622+
</div>
623+
<div class="pulse-ring"></div>
624+
</div>
460625
</body>
461626
</html>

‎scripts/hackclub-interactions.js‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
/**
2+
* HackClub Style Interactions
3+
* Mobile menu and smooth scrolling functionality
4+
*/
5+
6+
document.addEventListener('DOMContentLoaded', function() {
7+
// Mobile Navigation Toggle
8+
const navToggle = document.querySelector('.nav-toggle');
9+
const navMenu = document.querySelector('.nav-menu');
10+
const navbar = document.querySelector('.navbar');
11+
12+
if (navToggle && navMenu) {
13+
navToggle.addEventListener('click', function() {
14+
navMenu.classList.toggle('active');
15+
navToggle.classList.toggle('active');
16+
17+
// Update icon
18+
const icon = navToggle.querySelector('i');
19+
if (icon) {
20+
if (navMenu.classList.contains('active')) {
21+
icon.className = 'fas fa-times';
22+
} else {
23+
icon.className = 'fas fa-bars';
24+
}
25+
}
26+
27+
// Prevent body scroll when menu is open
28+
document.body.classList.toggle('nav-open');
29+
});
30+
31+
// Close menu when clicking on nav links
32+
const navLinks = document.querySelectorAll('.nav-link');
33+
navLinks.forEach(link => {
34+
link.addEventListener('click', function() {
35+
navMenu.classList.remove('active');
36+
navToggle.classList.remove('active');
37+
document.body.classList.remove('nav-open');
38+
39+
const icon = navToggle.querySelector('i');
40+
if (icon) {
41+
icon.className = 'fas fa-bars';
42+
}
43+
});
44+
});
45+
46+
// Close menu when clicking outside
47+
document.addEventListener('click', function(e) {
48+
if (!navbar.contains(e.target)) {
49+
navMenu.classList.remove('active');
50+
navToggle.classList.remove('active');
51+
document.body.classList.remove('nav-open');
52+
53+
const icon = navToggle.querySelector('i');
54+
if (icon) {
55+
icon.className = 'fas fa-bars';
56+
}
57+
}
58+
});
59+
}
60+
61+
// Smooth scrolling for internal links
62+
const internalLinks = document.querySelectorAll('a[href^="#"]');
63+
internalLinks.forEach(link => {
64+
link.addEventListener('click', function(e) {
65+
const targetId = this.getAttribute('href');
66+
const targetElement = document.querySelector(targetId);
67+
68+
if (targetElement) {
69+
e.preventDefault();
70+
targetElement.scrollIntoView({
71+
behavior: 'smooth',
72+
block: 'start'
73+
});
74+
}
75+
});
76+
});
77+
78+
// Navbar scroll effect
79+
window.addEventListener('scroll', function() {
80+
if (window.scrollY > 100) {
81+
navbar.classList.add('scrolled');
82+
} else {
83+
navbar.classList.remove('scrolled');
84+
}
85+
});
86+
87+
// Active nav link highlighting
88+
const sections = document.querySelectorAll('section[id]');
89+
const navLinksActive = document.querySelectorAll('.nav-link');
90+
91+
window.addEventListener('scroll', function() {
92+
let current = '';
93+
sections.forEach(section => {
94+
const sectionTop = section.offsetTop;
95+
const sectionHeight = section.clientHeight;
96+
if (window.scrollY >= (sectionTop - 200)) {
97+
current = section.getAttribute('id');
98+
}
99+
});
100+
101+
navLinksActive.forEach(link => {
102+
link.classList.remove('active');
103+
if (link.getAttribute('href') === `#${current}`) {
104+
link.classList.add('active');
105+
}
106+
});
107+
});
108+
109+
// HackClub DayDream floating button functionality
110+
const hackclubBtn = document.querySelector('.hackclub-floating-btn');
111+
if (hackclubBtn) {
112+
// Add tooltip on hover
113+
hackclubBtn.setAttribute('title', 'Join HackClub DayDream Sri Lanka WhatsApp Channel');
114+
115+
// Add click analytics (if needed)
116+
hackclubBtn.addEventListener('click', function() {
117+
console.log('HackClub DayDream button clicked');
118+
// Add analytics tracking here if needed
119+
});
120+
}
121+
});

0 commit comments

Comments
 (0)