Skip to content

Commit 898df5f

Browse files
Ziqian-Huang0607Ziqian-Huang0607
committed
Upgrade UI: Added Glassmorphism, Dark Mode, and Effects
1 parent d9f698b commit 898df5f

File tree

3 files changed

+343
-249
lines changed

3 files changed

+343
-249
lines changed

‎index.html‎

Lines changed: 89 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,122 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" data-theme="dark">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Drive For Java</title>
7-
8-
<!-- CSS -->
97
<link rel="stylesheet" href="style.css">
10-
11-
<!-- AOS Animations -->
128
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
139
</head>
1410
<body>
1511

12+
<!-- Theme Toggle -->
13+
<button id="theme-toggle" class="theme-toggle-btn" aria-label="Toggle Theme">
14+
<!-- Sun Icon -->
15+
<svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
16+
<!-- Moon Icon -->
17+
<svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
18+
</button>
19+
1620
<!-- Hero Section -->
1721
<section id="hero">
1822
<div id="particles-js"></div>
1923
<div class="hero-content" data-aos="zoom-in" data-aos-duration="1200">
20-
<img src="https://github.com/Drive-for-Java.png" alt="Drive For Java Logo" class="logo">
24+
<div class="logo-container">
25+
<img src="https://github.com/Drive-for-Java.png" alt="Drive For Java Logo" class="logo">
26+
</div>
2127
<h1>Drive For Java</h1>
2228
<p class="tagline">Connect · Code · Collaborate</p>
2329
<a href="#bio" class="cta-btn">Explore More</a>
2430
</div>
2531
</section>
2632

27-
<!-- Bio Section -->
28-
<section id="bio" data-aos="fade-up">
29-
<h2>About Us</h2>
30-
<p>
31-
Drive For Java is a passionate global community dedicated to empowering developers.
32-
Our mission is simple: to connect learners and professionals, to share knowledge, and to build
33-
powerful projects together.
34-
</p>
35-
<p>
36-
Beyond code, we foster meaningful collaboration and mentorship, ensuring that everyone
37-
has the opportunity to grow their skills.
38-
Whether you are a beginner eager to contribute or a seasoned developer looking to
39-
collaborate on advanced projects — this is your home.
40-
</p>
41-
<p>
42-
At <b>Drive For Java</b>, collaboration is not just encouraged, it is celebrated.
43-
Together, we’re creating innovative tools, open-source repositories, and a
44-
supportive network that inspires future generations of developers.
45-
</p>
46-
</section>
33+
<!-- Main Content Wrapper -->
34+
<main class="content-wrapper">
4735

48-
<!-- Code of Conduct Section -->
49-
<section id="coc" data-aos="fade-up">
50-
<h2>Code of Conduct</h2>
51-
<p>
52-
To ensure a welcoming and inclusive environment, we ask all members of our community
53-
to follow this Code of Conduct:
54-
</p>
55-
<ul>
56-
<li><b>Respect and Inclusivity:</b> Treat all contributors with kindness. We do not tolerate harassment, discrimination, or disrespectful behavior.</li>
57-
<li><b>Collaboration:</b> Support one another, share knowledge, and contribute constructively to discussions and code reviews.</li>
58-
<li><b>Openness:</b> Value diverse perspectives and experiences. Different backgrounds bring stronger solutions.</li>
59-
<li><b>Professionalism:</b> Use welcoming and appropriate language across all interactions, whether in code, issues, or discussions.</li>
60-
<li><b>Constructive Feedback:</b> Critique ideas, not people. Provide actionable and respectful suggestions.</li>
61-
<li><b>Zero Tolerance for Harassment:</b> Any form of intimidation, offensive comments, or personal attacks are prohibited.</li>
62-
<li><b>Reporting Issues:</b> If you experience or witness a violation, report it to the maintainers immediately.
63-
We are committed to investigating and addressing issues promptly.</li>
64-
<li><b>Shared Responsibility:</b> Every member is responsible for creating a safe and positive community space.</li>
65-
</ul>
66-
<p>
67-
By participating in this community, you agree to uphold these values and contribute to an environment
68-
where collaboration thrives and every voice matters.
69-
</p>
70-
</section>
36+
<!-- Bio Section -->
37+
<section id="bio" class="glass-card" data-aos="fade-up">
38+
<div class="card-glow"></div>
39+
<h2>About Us</h2>
40+
<div class="text-content">
41+
<p>Drive For Java is a passionate global community dedicated to empowering developers. Our mission is simple: to connect learners and professionals, to share knowledge, and to build powerful projects together.</p>
42+
<p>Beyond code, we foster meaningful collaboration and mentorship, ensuring that everyone has the opportunity to grow their skills. Whether you are a beginner eager to contribute or a seasoned developer looking to collaborate on advanced projects — this is your home.</p>
43+
<p>At <b>Drive For Java</b>, collaboration is not just encouraged, it is celebrated. Together, we’re creating innovative tools, open-source repositories, and a supportive network that inspires future generations of developers.</p>
44+
</div>
45+
</section>
7146

72-
<!-- Importance of Collaboration -->
73-
<section id="importance" data-aos="fade-up">
74-
<h2>Why Collaboration Matters</h2>
75-
<p>
76-
Collaboration is the heartbeat of Drive For Java.
77-
In the world of software development, teamwork fuels innovation and leads to impactful outcomes.
78-
</p>
79-
<ul>
80-
<li><b>Learn Faster:</b> Share experiences and learn from peers worldwide.</li>
81-
<li><b>Build Bigger:</b> Collaborate on projects beyond the scope of individual effort.</li>
82-
<li><b>Stronger Network:</b> Connect with developers, mentors, and innovators across the globe.</li>
83-
<li><b>Empower Others:</b> Contributing to open-source inspires and helps future developers.</li>
84-
</ul>
85-
<p>
86-
Together, we are not just coding — we are building a better tomorrow for developers everywhere.
87-
</p>
88-
</section>
47+
<!-- Code of Conduct -->
48+
<section id="coc" class="glass-card" data-aos="fade-up">
49+
<div class="card-glow"></div>
50+
<h2>Code of Conduct</h2>
51+
<div class="text-content">
52+
<p>To ensure a welcoming and inclusive environment, we ask all members of our community to follow this Code of Conduct:</p>
53+
<ul class="interactive-list">
54+
<li><b>Respect and Inclusivity:</b> Treat all contributors with kindness. We do not tolerate harassment, discrimination, or disrespectful behavior.</li>
55+
<li><b>Collaboration:</b> Support one another, share knowledge, and contribute constructively to discussions and code reviews.</li>
56+
<li><b>Openness:</b> Value diverse perspectives and experiences. Different backgrounds bring stronger solutions.</li>
57+
<li><b>Professionalism:</b> Use welcoming and appropriate language across all interactions, whether in code, issues, or discussions.</li>
58+
<li><b>Constructive Feedback:</b> Critique ideas, not people. Provide actionable and respectful suggestions.</li>
59+
<li><b>Zero Tolerance for Harassment:</b> Any form of intimidation, offensive comments, or personal attacks are prohibited.</li>
60+
<li><b>Reporting Issues:</b> If you experience or witness a violation, report it to the maintainers immediately. We are committed to investigating and addressing issues promptly.</li>
61+
<li><b>Shared Responsibility:</b> Every member is responsible for creating a safe and positive community space.</li>
62+
</ul>
63+
<p>By participating in this community, you agree to uphold these values and contribute to an environment where collaboration thrives and every voice matters.</p>
64+
</div>
65+
</section>
8966

90-
<!-- Invitation Section -->
91-
<section id="invite" data-aos="fade-up">
92-
<h2>Join Us</h2>
93-
<p>
94-
We’re always looking for <b>passionate members</b> to collaborate.
95-
Join our Community and Contribute to our awesome repos.
96-
</p>
97-
<div align="center">💖 Your Work can make this community glow and shine in Moonlight 💖</div>
67+
<!-- Importance of Collaboration -->
68+
<section id="importance" class="glass-card" data-aos="fade-up">
69+
<div class="card-glow"></div>
70+
<h2>Why Collaboration Matters</h2>
71+
<div class="text-content">
72+
<p>Collaboration is the heartbeat of Drive For Java. In the world of software development, teamwork fuels innovation and leads to impactful outcomes.</p>
73+
<ul class="interactive-list">
74+
<li><b>Learn Faster:</b> Share experiences and learn from peers worldwide.</li>
75+
<li><b>Build Bigger:</b> Collaborate on projects beyond the scope of individual effort.</li>
76+
<li><b>Stronger Network:</b> Connect with developers, mentors, and innovators across the globe.</li>
77+
<li><b>Empower Others:</b> Contributing to open-source inspires and helps future developers.</li>
78+
</ul>
79+
<p>Together, we are not just coding — we are building a better tomorrow for developers everywhere.</p>
80+
</div>
81+
</section>
9882

99-
<div align="center">
100-
<h3>🌟 Your Face Here?</h3>
101-
<table>
102-
<tr>
103-
<td>
104-
<p>
105-
<a href="https://github.com/Drive-for-Java/support/issues/new?assignees=&labels=invite+me+to+the+organisation&template=invitation.yml&title=Please+invite+me+to+the+GitHub+Community+Organization">
106-
<img src="https://avatars.githubusercontent.com/u/0?v=4" width="80" alt="Your Avatar" title="Your Avatar" /><br />
107-
<sub><b>Future Legend</b></sub><br />
108-
<sup>@yourusername</sup>
109-
</a>
110-
</p>
111-
</td>
112-
</tr>
113-
</table>
114-
<p>
115-
We're on the lookout for <strong>elite-level developers</strong> to join our fast-moving, global, modern team. <br />
116-
If you're a builder with vision, speed, and taste - we want to see you here.
117-
</p>
118-
<p>
119-
<a href="https://github.com/Drive-for-Java/support/issues/new?assignees=&labels=invite+me+to+the+organisation&template=invitation.yml&title=Please+invite+me+to+the+GitHub+Community+Organization">👾 Join the Drive-for-Java</a> and make your mark on the future.
120-
</p>
121-
</div>
122-
</section>
83+
<!-- Invitation Section -->
84+
<section id="invite" class="glass-card" data-aos="fade-up">
85+
<div class="card-glow"></div>
86+
<h2>Join Us</h2>
87+
<div class="text-content center-align">
88+
<p>We’re always looking for <b>passionate members</b> to collaborate. Join our Community and Contribute to our awesome repos.</p>
89+
90+
<div class="shimmer-text">
91+
💖 Your Work can make this community glow and shine in Moonlight 💖
92+
</div>
93+
94+
<div class="invite-box">
95+
<h3>🌟 Your Face Here?</h3>
96+
<div class="avatar-wrap">
97+
<a href="https://github.com/Drive-for-Java/support/issues/new?assignees=&labels=invite+me+to+the+organisation&template=invitation.yml&title=Please+invite+me+to+the+GitHub+Community+Organization" class="profile-link">
98+
<img src="https://avatars.githubusercontent.com/u/0?v=4" alt="Your Avatar">
99+
<div class="profile-info">
100+
<span class="rank">Future Legend</span>
101+
<span class="handle">@yourusername</span>
102+
</div>
103+
</a>
104+
</div>
105+
<p>We're on the lookout for <strong>elite-level developers</strong> to join our fast-moving, global, modern team. <br>If you're a builder with vision, speed, and taste - we want to see you here.</p>
106+
<a href="https://github.com/Drive-for-Java/support/issues/new?assignees=&labels=invite+me+to+the+organisation&template=invitation.yml&title=Please+invite+me+to+the+GitHub+Community+Organization" class="cta-btn small">👾 Join the Drive-for-Java</a>
107+
</div>
108+
</div>
109+
</section>
110+
111+
</main>
123112

124-
<!-- Footer -->
125113
<footer>
126114
<p>© 2025 Drive For Java. All rights reserved.</p>
127-
<div class="socials">
128-
<!-- Paste your social block here -->
129-
<div align="center">
130-
<!-- ✅ Your full socials block from earlier goes here -->
131-
</div>
132-
</div>
133115
</footer>
134116

135-
<!-- Libraries -->
117+
<!-- Scripts -->
136118
<script src="https://cdn.jsdelivr.net/npm/particles.js"></script>
137119
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
138-
<script>
139-
AOS.init();
140-
</script>
141-
142-
<!-- Custom JS -->
143120
<script src="script.js"></script>
144121
</body>
145-
</html>
146-
122+
</html>

‎script.js‎

Lines changed: 54 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,56 @@
1-
/* Particles.js configuration */
2-
particlesJS("particles-js", {
3-
"particles": {
4-
"number": {
5-
"value": 80,
6-
"density": { "enable": true, "value_area": 800 }
7-
},
8-
"color": { "value": "#ffffff" },
9-
"shape": {
10-
"type": "circle",
11-
"stroke": { "width": 0, "color": "#000000" }
12-
},
13-
"opacity": {
14-
"value": 0.5,
15-
"random": false
16-
},
17-
"size": {
18-
"value": 4,
19-
"random": true
20-
},
21-
"line_linked": {
22-
"enable": true,
23-
"distance": 150,
24-
"color": "#ffffff",
25-
"opacity": 0.3,
26-
"width": 1
1+
// Init AOS
2+
document.addEventListener("DOMContentLoaded", function() {
3+
AOS.init({ once: true, offset: 50, duration: 800 });
4+
initTheme();
5+
});
6+
7+
function initTheme() {
8+
const toggleBtn = document.getElementById('theme-toggle');
9+
const html = document.documentElement;
10+
11+
// Check Storage or System Preference
12+
const savedTheme = localStorage.getItem('theme');
13+
const sysTheme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
14+
15+
const currentTheme = savedTheme || sysTheme;
16+
html.setAttribute('data-theme', currentTheme);
17+
updateParticles(currentTheme);
18+
19+
// Toggle Event
20+
toggleBtn.addEventListener('click', () => {
21+
const theme = html.getAttribute('data-theme');
22+
const newTheme = theme === 'dark' ? 'light' : 'dark';
23+
24+
html.setAttribute('data-theme', newTheme);
25+
localStorage.setItem('theme', newTheme);
26+
updateParticles(newTheme);
27+
});
28+
}
29+
30+
function updateParticles(theme) {
31+
const color = theme === 'dark' ? '#00f2ff' : '#4f46e5';
32+
const opacity = theme === 'dark' ? 0.4 : 0.6;
33+
34+
particlesJS("particles-js", {
35+
"particles": {
36+
"number": { "value": 60, "density": { "enable": true, "value_area": 800 } },
37+
"color": { "value": color },
38+
"shape": { "type": "circle" },
39+
"opacity": { "value": opacity, "random": true },
40+
"size": { "value": 3, "random": true },
41+
"line_linked": {
42+
"enable": true, "distance": 150, "color": color, "opacity": 0.2, "width": 1
43+
},
44+
"move": { "enable": true, "speed": 2, "direction": "none", "out_mode": "out" }
2745
},
28-
"move": {
29-
"enable": true,
30-
"speed": 3,
31-
"direction": "none",
32-
"random": false,
33-
"straight": false,
34-
"out_mode": "out"
35-
}
36-
},
37-
"interactivity": {
38-
"detect_on": "canvas",
39-
"events": {
40-
"onhover": { "enable": true, "mode": "repulse" },
41-
"onclick": { "enable": true, "mode": "push" }
46+
"interactivity": {
47+
"detect_on": "canvas",
48+
"events": {
49+
"onhover": { "enable": true, "mode": "repulse" },
50+
"onclick": { "enable": true, "mode": "push" }
51+
},
52+
"modes": { "repulse": { "distance": 100 }, "push": { "particles_nb": 4 } }
4253
},
43-
"modes": {
44-
"repulse": { "distance": 100 },
45-
"push": { "particles_nb": 4 }
46-
}
47-
},
48-
"retina_detect": true
49-
});
54+
"retina_detect": true
55+
});
56+
}

0 commit comments

Comments
 (0)