Skip to content

Commit

Permalink
Revert "Added dark/light mode toggle button in the website" (#555)
Browse files Browse the repository at this point in the history 
Reverts #497
  • Loading branch information
@PSS2134
PSS2134 authored Aug 9, 2024
2 parents 601669d + c98f254 commit df62467
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 260 deletions.
366 changes: 111 additions & 255 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,286 +8,142 @@
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<!-- fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>CareerZunction</title>


<style>
/* Default Theme (Dark Mode) */

body {
background-color: black;
color: white;
}

.container {
background-color: black;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}

.loading {
-webkit-animation: sk-scaleout 1s infinite ease-in-out;
animation: sk-scaleout 1s infinite ease-in-out;
background-color: rgb(148, 22, 233);
border-radius: 100%;
height: 4em;
width: 4em;
}

@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}

100% {
-webkit-transform: scale(1);
opacity: 0.5;
transform: scale(1);
}
}



.circle {

position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(63, 18, 93, 0.8), rgba(201, 24, 255, 0.5));
transition: transform 0.1s, left 0.1s, top 0.1s;
}

.circle-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
}

@media (max-width: 768px) {
.circle-container {
display: none;
}
}

#theme-toggle-btn {
position: fixed;
top: 10px;
left: 10px;
background: #fff;
border: none;
border-radius: 50%;
padding: 5px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
cursor: pointer;
z-index: 10000;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden; /* Ensure only one icon is visible */
}

#theme-toggle-btn i {
color: #000;
font-size: 20px;
display: none; /* Hide all icons by default */
}

#theme-toggle-btn .dark-theme {
display: block; /* Show sun icon for dark theme */
}

body.light-theme #theme-toggle-btn .dark-theme {
display: none; /* Hide sun icon for light theme */
}

body.light-theme #theme-toggle-btn .light-theme {
display: block; /* Show moon icon for light theme */
}

#scrollToTopBtn {
position: fixed;
bottom: 20px;
right: 20px;
background: #fff;
border: none;
border-radius: 50%;
padding: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
cursor: pointer;
z-index: 10000;
display: none;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}

#scrollToTopBtn.show {
display: flex;
}

#scrollToTopBtn i {
color: #000;
font-size: 20px;
}

.noscript-message {
color: #f00;
background: #fff;
padding: 10px;
border: 1px solid #f00;
border-radius: 5px;
text-align: center;
}

/* Light Theme Styles */
body.light-theme {
background-color: white;
color: black;
}

body.light-theme .container {
background-color: white;
}

body.light-theme #theme-toggle-btn {
background: #971df4;
}

body.light-theme #theme-toggle-btn i {
color: #fff;
}


position: absolute;
width: 28px;
height: 28px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(63, 18, 93, 0.8), rgba(201, 24, 255, 0.5));
transition: transform 0.1s, left 0.1s, top 0.1s;
}

.circle-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 99999;
}

@media (max-width: 768px) {
.circle-container{
display: none;
}
}

</style>
</head>

<body>


<button id="theme-toggle-btn">
<i class="fa-solid fa-sun dark-theme"></i>
<i class="fa-solid fa-moon light-theme"></i>
</button>

<!-- Existing content here -->
<div id="spinner" class="container">
<div class="loading"></div>
</div>


<div id="root"></div>

<div class="circle-container">
<div class="circle"></div>
<!-- Add more circles as needed -->
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>

<!-- Scroll to Top Button -->
<button id="scrollToTopBtn"><i class="fa-solid fa-arrow-up"></i></button>

<noscript>
<div class="noscript-message">
You need to enable JavaScript to run this app.
</div>
</noscript>

<script>
document.addEventListener("DOMContentLoaded", function () {
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

circles.forEach(function (circle) {
circle.x = 0;
circle.y = 0;
});

window.addEventListener("mousemove", function (e) {
coords.x = e.pageX;
coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
});

function animateCircles() {
let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {
circle.style.left = `${x - 10}px`;
circle.style.top = `${y - 10}px`;
circle.style.transform = `scale(${(circles.length - index) / circles.length})`;

const nextCircle = circles[index + 1] || circles[0];
circle.x = x;
circle.y = y;

document.addEventListener("DOMContentLoaded", function () {
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

circles.forEach(function (circle) {
circle.x = 0;
circle.y = 0;
});

window.addEventListener("mousemove", function (e) {
coords.x = e.pageX;
coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
});

function animateCircles() {
let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {
circle.style.left = `${x - 12}px`;
circle.style.top = `${y - 12}px`;
circle.style.transform = `scale(${(circles.length - index) / circles.length})`;

const nextCircle = circles[index + 1] || circles[0];
circle.x = x;
circle.y = y;

x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});

requestAnimationFrame(animateCircles);
}

x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
animateCircles();
});

requestAnimationFrame(animateCircles);
}

animateCircles();

// Theme Toggle Button Functionality
const themeToggleButton = document.getElementById('theme-toggle-btn');

const updateThemeIcon = () => {
const isLightTheme = document.body.classList.contains('light-theme');
// Set icon based on the current theme
document.querySelector('.dark-theme').style.display = isLightTheme ? 'none' : 'block';
document.querySelector('.light-theme').style.display = isLightTheme ? 'block' : 'none';
};

themeToggleButton.addEventListener('click', () => {
document.body.classList.toggle('light-theme');
updateThemeIcon();
});

// Initial icon update
updateThemeIcon();

// Scroll to Top Button Functionality
let mybutton = document.getElementById("scrollToTopBtn");

window.onscroll = function () {
scrollFunction();
};
</script>

function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.classList.add("show");
} else {
mybutton.classList.remove("show");
}
}
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
mybutton.onclick = function () {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
});
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
</script>

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>

</html>
</html>
Loading

0 comments on commit df62467

Please sign in to comment.