Skip to content

Commit c98f254

Browse files
PSS2134PSS2134
authored
Revert "Added dark/light mode toggle button in the website"
1 parent 6e24266 commit c98f254

File tree

3 files changed

+113
-260
lines changed

3 files changed

+113
-260
lines changed

‎public/index.html

+111-255
Original file line numberDiff line numberDiff line change
@@ -8,286 +8,142 @@
88
<meta name="theme-color" content="#000000" />
99
<meta name="description" content="Web site created using create-react-app" />
1010
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
11+
<!--
12+
manifest.json provides metadata used when your web app is installed on a
13+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
14+
-->
1115
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16+
<!--
17+
Notice the use of %PUBLIC_URL% in the tags above.
18+
It will be replaced with the URL of the `public` folder during the build.
19+
Only files inside the `public` folder can be referenced from the HTML.
20+
21+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22+
work correctly both with client-side routing and a non-root public URL.
23+
Learn how to configure a non-root public URL by running `npm run build`.
24+
-->
1225
<!-- fontawesome -->
1326
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
1427
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
1528
crossorigin="anonymous" referrerpolicy="no-referrer" />
1629
<title>CareerZunction</title>
17-
18-
1930
<style>
20-
/* Default Theme (Dark Mode) */
21-
22-
body {
23-
background-color: black;
24-
color: white;
25-
}
26-
27-
.container {
28-
background-color: black;
29-
height: 100vh;
30-
width: 100vw;
31-
display: flex;
32-
justify-content: center;
33-
align-items: center;
34-
}
35-
36-
.loading {
37-
-webkit-animation: sk-scaleout 1s infinite ease-in-out;
38-
animation: sk-scaleout 1s infinite ease-in-out;
39-
background-color: rgb(148, 22, 233);
40-
border-radius: 100%;
41-
height: 4em;
42-
width: 4em;
43-
}
44-
45-
@keyframes sk-scaleout {
46-
0% {
47-
-webkit-transform: scale(0);
48-
transform: scale(0);
49-
}
50-
51-
100% {
52-
-webkit-transform: scale(1);
53-
opacity: 0.5;
54-
transform: scale(1);
55-
}
56-
}
57-
5831

5932

6033
.circle {
61-
62-
position: absolute;
63-
width: 20px;
64-
height: 20px;
65-
border-radius: 50%;
66-
pointer-events: none;
67-
background: radial-gradient(circle, rgba(63, 18, 93, 0.8), rgba(201, 24, 255, 0.5));
68-
transition: transform 0.1s, left 0.1s, top 0.1s;
69-
}
70-
71-
.circle-container {
72-
position: fixed;
73-
top: 0;
74-
left: 0;
75-
width: 100%;
76-
height: 100%;
77-
pointer-events: none;
78-
z-index: 9999;
79-
}
80-
81-
@media (max-width: 768px) {
82-
.circle-container {
83-
display: none;
84-
}
85-
}
86-
87-
#theme-toggle-btn {
88-
position: fixed;
89-
top: 10px;
90-
left: 10px;
91-
background: #fff;
92-
border: none;
93-
border-radius: 50%;
94-
padding: 5px;
95-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
96-
cursor: pointer;
97-
z-index: 10000;
98-
width: 40px;
99-
height: 40px;
100-
display: flex;
101-
justify-content: center;
102-
align-items: center;
103-
overflow: hidden; /* Ensure only one icon is visible */
104-
}
105-
106-
#theme-toggle-btn i {
107-
color: #000;
108-
font-size: 20px;
109-
display: none; /* Hide all icons by default */
110-
}
111-
112-
#theme-toggle-btn .dark-theme {
113-
display: block; /* Show sun icon for dark theme */
114-
}
115-
116-
body.light-theme #theme-toggle-btn .dark-theme {
117-
display: none; /* Hide sun icon for light theme */
118-
}
119-
120-
body.light-theme #theme-toggle-btn .light-theme {
121-
display: block; /* Show moon icon for light theme */
122-
}
123-
124-
#scrollToTopBtn {
125-
position: fixed;
126-
bottom: 20px;
127-
right: 20px;
128-
background: #fff;
129-
border: none;
130-
border-radius: 50%;
131-
padding: 8px;
132-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
133-
cursor: pointer;
134-
z-index: 10000;
135-
display: none;
136-
width: 40px;
137-
height: 40px;
138-
display: flex;
139-
justify-content: center;
140-
align-items: center;
141-
}
142-
143-
#scrollToTopBtn.show {
144-
display: flex;
145-
}
146-
147-
#scrollToTopBtn i {
148-
color: #000;
149-
font-size: 20px;
150-
}
151-
152-
.noscript-message {
153-
color: #f00;
154-
background: #fff;
155-
padding: 10px;
156-
border: 1px solid #f00;
157-
border-radius: 5px;
158-
text-align: center;
159-
}
160-
161-
/* Light Theme Styles */
162-
body.light-theme {
163-
background-color: white;
164-
color: black;
165-
}
166-
167-
body.light-theme .container {
168-
background-color: white;
169-
}
170-
171-
body.light-theme #theme-toggle-btn {
172-
background: #971df4;
173-
}
174-
175-
body.light-theme #theme-toggle-btn i {
176-
color: #fff;
177-
}
178-
179-
34+
position: absolute;
35+
width: 28px;
36+
height: 28px;
37+
border-radius: 50%;
38+
pointer-events: none;
39+
background: radial-gradient(circle, rgba(63, 18, 93, 0.8), rgba(201, 24, 255, 0.5));
40+
transition: transform 0.1s, left 0.1s, top 0.1s;
41+
}
42+
43+
.circle-container {
44+
position: fixed;
45+
top: 0;
46+
left: 0;
47+
width: 100%;
48+
height: 100%;
49+
pointer-events: none;
50+
z-index: 99999;
51+
}
52+
53+
@media (max-width: 768px) {
54+
.circle-container{
55+
display: none;
56+
}
57+
}
58+
18059
</style>
18160
</head>
18261

18362
<body>
184-
185-
186-
<button id="theme-toggle-btn">
187-
<i class="fa-solid fa-sun dark-theme"></i>
188-
<i class="fa-solid fa-moon light-theme"></i>
189-
</button>
190-
191-
<!-- Existing content here -->
192-
<div id="spinner" class="container">
193-
<div class="loading"></div>
194-
</div>
195-
196-
19763
<div id="root"></div>
19864

19965
<div class="circle-container">
20066
<div class="circle"></div>
201-
<!-- Add more circles as needed -->
67+
<div class="circle"></div>
68+
<div class="circle"></div>
69+
<div class="circle"></div>
70+
<div class="circle"></div>
71+
<div class="circle"></div>
72+
<div class="circle"></div>
73+
<div class="circle"></div>
74+
<div class="circle"></div>
75+
<div class="circle"></div>
76+
<div class="circle"></div>
77+
<div class="circle"></div>
78+
<div class="circle"></div>
79+
<div class="circle"></div>
80+
<div class="circle"></div>
81+
<div class="circle"></div>
82+
<div class="circle"></div>
83+
<div class="circle"></div>
84+
<div class="circle"></div>
85+
<div class="circle"></div>
86+
<div class="circle"></div>
87+
<div class="circle"></div>
88+
<div class="circle"></div>
89+
<div class="circle"></div>
90+
<div class="circle"></div>
91+
<div class="circle"></div>
92+
<div class="circle"></div>
93+
<div class="circle"></div>
94+
<div class="circle"></div>
95+
<div class="circle"></div>
20296
</div>
203-
204-
<!-- Scroll to Top Button -->
205-
<button id="scrollToTopBtn"><i class="fa-solid fa-arrow-up"></i></button>
206-
207-
<noscript>
208-
<div class="noscript-message">
209-
You need to enable JavaScript to run this app.
210-
</div>
211-
</noscript>
212-
21397
<script>
214-
document.addEventListener("DOMContentLoaded", function () {
215-
const coords = { x: 0, y: 0 };
216-
const circles = document.querySelectorAll(".circle");
217-
218-
circles.forEach(function (circle) {
219-
circle.x = 0;
220-
circle.y = 0;
221-
});
222-
223-
window.addEventListener("mousemove", function (e) {
224-
coords.x = e.pageX;
225-
coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
226-
});
227-
228-
function animateCircles() {
229-
let x = coords.x;
230-
let y = coords.y;
231-
232-
circles.forEach(function (circle, index) {
233-
circle.style.left = `${x - 10}px`;
234-
circle.style.top = `${y - 10}px`;
235-
circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
236-
237-
const nextCircle = circles[index + 1] || circles[0];
238-
circle.x = x;
239-
circle.y = y;
240-
98+
document.addEventListener("DOMContentLoaded", function () {
99+
const coords = { x: 0, y: 0 };
100+
const circles = document.querySelectorAll(".circle");
101+
102+
circles.forEach(function (circle) {
103+
circle.x = 0;
104+
circle.y = 0;
105+
});
106+
107+
window.addEventListener("mousemove", function (e) {
108+
coords.x = e.pageX;
109+
coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
110+
});
111+
112+
function animateCircles() {
113+
let x = coords.x;
114+
let y = coords.y;
115+
116+
circles.forEach(function (circle, index) {
117+
circle.style.left = `${x - 12}px`;
118+
circle.style.top = `${y - 12}px`;
119+
circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
120+
121+
const nextCircle = circles[index + 1] || circles[0];
122+
circle.x = x;
123+
circle.y = y;
124+
125+
x += (nextCircle.x - x) * 0.3;
126+
y += (nextCircle.y - y) * 0.3;
127+
});
128+
129+
requestAnimationFrame(animateCircles);
130+
}
241131

242-
x += (nextCircle.x - x) * 0.3;
243-
y += (nextCircle.y - y) * 0.3;
132+
animateCircles();
244133
});
245134

246-
requestAnimationFrame(animateCircles);
247-
}
248-
249-
animateCircles();
250-
251-
// Theme Toggle Button Functionality
252-
const themeToggleButton = document.getElementById('theme-toggle-btn');
253-
254-
const updateThemeIcon = () => {
255-
const isLightTheme = document.body.classList.contains('light-theme');
256-
// Set icon based on the current theme
257-
document.querySelector('.dark-theme').style.display = isLightTheme ? 'none' : 'block';
258-
document.querySelector('.light-theme').style.display = isLightTheme ? 'block' : 'none';
259-
};
260-
261-
themeToggleButton.addEventListener('click', () => {
262-
document.body.classList.toggle('light-theme');
263-
updateThemeIcon();
264-
});
265-
266-
// Initial icon update
267-
updateThemeIcon();
268-
269-
// Scroll to Top Button Functionality
270-
let mybutton = document.getElementById("scrollToTopBtn");
271-
272-
window.onscroll = function () {
273-
scrollFunction();
274-
};
135+
</script>
275136

276-
function scrollFunction() {
277-
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
278-
mybutton.classList.add("show");
279-
} else {
280-
mybutton.classList.remove("show");
281-
}
282-
}
137+
<!--
138+
This HTML file is a template.
139+
If you open it directly in the browser, you will see an empty page.
283140
284-
mybutton.onclick = function () {
285-
window.scrollTo({ top: 0, behavior: 'smooth' });
286-
};
287-
});
141+
You can add webfonts, meta tags, or analytics to this file.
142+
The build step will place the bundled scripts into the <body> tag.
288143
289-
</script>
290-
144+
To begin the development, run `npm start` or `yarn start`.
145+
To create a production bundle, use `npm run build` or `yarn build`.
146+
-->
291147
</body>
292148

293-
</html>
149+
</html>

0 commit comments

Comments
 (0)