Skip to content

Commit 58aa20e

Browse files
iamwatchdogsiamwatchdogs
authored
PR #36: Dark Mode Magic
added a website Merge pull request #36 from Inija-2503/dark
2 parents 4f67eeb + cf5f64c commit 58aa20e

File tree

3 files changed

+822
-0
lines changed

3 files changed

+822
-0
lines changed

‎Darkmode-website/index.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<script src="main.js"></script>
8+
<title>Dark Mode Magic</title>
9+
</head>
10+
<body>
11+
<!-- design inspired by ttps://www.authkit.com/ -->
12+
<div class="header">
13+
<h2><a href="https://codepen.io/RAFA3L" target="_blank" rel="noopener noreferrer">RAFA</a></h2>
14+
<div class="mid-spot" onclick="document.body.classList.toggle('gold');"></div>
15+
<button class="contact-btn">
16+
<span class="glow"></span>
17+
<span class="contact-btn-content">Contact Us</span>
18+
</button>
19+
20+
<div class="spotlight">
21+
<div></div>
22+
<div></div>
23+
<div></div>
24+
</div>
25+
</div>
26+
27+
<canvas id="particleCanvas"></canvas>
28+
29+
<div class="accent-lines">
30+
<div>
31+
<div></div>
32+
<div></div>
33+
<div></div>
34+
<div></div>
35+
<div></div>
36+
</div>
37+
<div>
38+
<div></div>
39+
<div></div>
40+
<div></div>
41+
<div></div>
42+
</div>
43+
</div>
44+
<div class="heroSubP">
45+
<p>Introducing</p>
46+
</div>
47+
<div class="hero">
48+
<div class="heroT">
49+
<h2>Neuroplanet</h2>
50+
<h2>Eclipx</h2>
51+
</div>
52+
</div>
53+
<p class="heroP">The world's best platform, <br>
54+
powered by Neuro-OS + React.</p>
55+
<div class="mountains">
56+
<div></div>
57+
<div></div>
58+
<div></div>
59+
</div>
60+
<div class="hero-spacer"></div>
61+
62+
<div class="content-section">
63+
<div class="content-acc">
64+
<div></div>
65+
<div></div>
66+
</div>
67+
<p class="subt">Revolutionary by design</p>
68+
<h3 class="title">Harness. Empower.<br>
69+
Unmatched Versatility.</h3>
70+
<p class="subp">At the core lies our revolutionary framework, <br>ensuring adaptability across all application architectures.</p>
71+
</div>
72+
</body>
73+
</html>

‎Darkmode-website/script.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
const canvas = document.getElementById('particleCanvas');
2+
const ctx = canvas.getContext('2d');
3+
4+
// Initial canvas size
5+
canvas.width = window.innerWidth;
6+
canvas.height = window.innerHeight;
7+
8+
let particles = [];
9+
let particleCount = calculateParticleCount();
10+
11+
class Particle {
12+
constructor() {
13+
this.reset();
14+
this.y = Math.randm() * canvas.height;
15+
this.fadeDelay = Math.random() * 600 + 100;
16+
this.fadeStart = Date.now() + this.fadeDelay;
17+
this.fadingOut = false;
18+
}
19+
20+
reset() {
21+
this.x = Math.random() * canvas.width;
22+
this.y = Math.random() * canvas.height;
23+
this.speed = Math.random() / 5 + 0.1;
24+
this.opacity = 1;
25+
this.fadeDelay = Math.random() * 600 + 100;
26+
this.fadeStart = Date.now() + this.fadeDelay;
27+
this.fadingOut = false;
28+
}
29+
30+
update() {
31+
this.y -= this.speed;
32+
if (this.y < 0) {
33+
this.reset();
34+
}
35+
36+
if (!this.fadingOut && Date.now() > this.fadeStart) {
37+
this.fadingOut = true;
38+
}
39+
40+
if (this.fadingOut) {
41+
this.opacity -= 0.008;
42+
if (this.opacity <= 0) {
43+
this.reset();
44+
}
45+
}
46+
}
47+
48+
draw() {
49+
ctx.fillStyle = `rgba(${255 - (Math.random() * 255/2)}, 255, 255, ${this.opacity})`;
50+
ctx.fillRect(this.x, this.y, 0.4, Math.random() * 2 + 1);
51+
}
52+
}
53+
54+
function initParticles() {
55+
particles = [];
56+
for (let i = 0; i < particleCount; i++) {
57+
particles.push(new Particle());
58+
}
59+
}
60+
61+
function animate() {
62+
ctx.clearRect(0, 0, canvas.width, canvas.height);
63+
particles.forEach(particle => {
64+
particle.update();
65+
particle.draw();
66+
});
67+
requestAnimationFrame(animate);
68+
}
69+
70+
function calculateParticleCount() {
71+
return Math.floor((canvas.width * canvas.height) / 6000);
72+
}
73+
74+
function onResize() {
75+
canvas.width = window.innerWidth;
76+
canvas.height = window.innerHeight;
77+
particleCount = calculateParticleCount();
78+
initParticles();
79+
}
80+
81+
window.addEventListener('resize', onResize);
82+
83+
initParticles();
84+
animate();

0 commit comments

Comments
 (0)