Skip to content

Changes made in html file #484

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Changes made in html file #484

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cdbac34
Light/Dark Mode Toggle
Megha-Chakraborty Nov 7, 2024
8516696
Changes made in the html file
Megha-Chakraborty Nov 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
256 changes: 233 additions & 23 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,19 @@
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=DM+Serif+Display:ital@0;1&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=DM+Serif+Display:ital@0;1&family=Montserrat:ital,wght@0;1,100..900&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ... existing head content ... -->
<style>
/* Loader styling */
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background-color: #100d0d; */
background-image:url(src/assets/bk.jpg) ;
background-image: url('src/assets/bk.jpg'); /* Update with actual path */
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -33,36 +32,247 @@
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Theme Toggle Button Styling */
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
background-color: #250141;
color: white;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s;
}
.theme-toggle:hover {
background-color: #4b145e;
}

/* Tooltip styling */
.theme-toggle[aria-label]:hover::after {
content: attr(aria-label);
position: absolute;
top: 50px;
right: -10px;
background-color: #4b145e;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

/* Light and Dark Theme Styles */
body.light-mode {
background-color: #ffffff;
color: #000000;
}
body.dark-mode {
background-color: #100d0d;
color: #ffffff;
}

/* About Us and Contact Us Button Styles */
.top-buttons {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 10px;
}

.top-button {
width: 40px;
height: 40px;
background-color: #250141;
color: white;
font-size: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.3s;
}

.top-button:hover {
background-color: #4b145e;
}

/* Hidden sections for About Us and Contact Us */
.hidden-section {
display: none;
position: fixed;
top: 60px;
right: 20px;
background-color: #250141;
padding: 20px;
color: white;
border-radius: 10px;
width: 300px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

/* Notifications button */
.notifications-button {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #250141;
color: white;
font-size: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.3s;
}

.notifications-button:hover {
background-color: #4b145e;
}

/* Marquee styling for notifications */
.marquee-container {
position: fixed;
bottom: 80px;
right: 20px;
width: 300px;
background-color: #4b145e;
color: white;
font-size: 16px;
padding: 10px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
display: none; /* Initially hidden */
}

.marquee-container marquee {
font-size: 16px;
}

</style>
</head>
<body>
<body class="light-mode">
<div id="loader-wrapper">
<div class="loader"></div>
</div>

<!-- Theme Toggle Button -->
<button class="theme-toggle" id="themeToggleButton" aria-label="Switch to Dark Mode">🌞</button>

<!-- About Us, Contact Us Buttons -->
<div class="top-buttons">
<button class="top-button" id="aboutUsButton" aria-label="About Us">ℹ️</button>
<button class="top-button" id="contactUsButton" aria-label="Contact Us">📞</button>
</div>

<!-- Notifications Button -->
<button class="notifications-button" id="notificationsButton">🔔</button>

<!-- Marquee for Notifications -->
<div class="marquee-container" id="marqueeContainer">
<marquee behavior="scroll" direction="left">You have new notifications!</marquee>
</div>

<!-- Hidden Sections -->
<div class="hidden-section" id="aboutUsSection">
<h3>About Us</h3>
<p>We are a tech-driven team focused on building innovative solutions.</p>
</div>

<div class="hidden-section" id="contactUsSection">
<h3>Contact Us</h3>
<p>Email: support@techcompany.com</p>
<p>Phone: +1 123 456 7890</p>
</div>

<!-- Main Content -->
<div id="root"></div>

<!-- Chatbot Embed -->
<div id="chatbotContainer"></div>
<script>
window.embeddedChatbotConfig = {
chatbotId: "rfrWIJLugIrq6XpUHDKwC",
domain: "www.chatbase.co"
}
</script>
<script
src="https://www.chatbase.co/embed.min.js"
chatbotId="rfrWIJLugIrq6XpUHDKwC"
domain="www.chatbase.co"
defer>
</script>
<script type="module" src="./src/main.jsx"></script> <!-- Use relative path -->

<script type="module" src="./src/main.jsx"></script>
chatbotId: "rfrWIJLugIrq6XpUHDKwC", // Replace with actual Chatbase chatbot ID
domain: "www.chatbase.co"
};
</script>
<script src="https://www.chatbase.co/embed.min.js"></script>

<!-- Theme Toggle Script -->
<script>
const themeToggleButton = document.getElementById("themeToggleButton");

// Check LocalStorage for theme
function applyStoredTheme() {
const storedTheme = localStorage.getItem("theme");
if (storedTheme === "dark") {
document.body.classList.replace("light-mode", "dark-mode");
themeToggleButton.textContent = "🌜";
themeToggleButton.setAttribute("aria-label", "Switch to Light Mode");
}
}

// Toggle Theme on Button Click
themeToggleButton.addEventListener("click", () => {
if (document.body.classList.contains("light-mode")) {
document.body.classList.replace("light-mode", "dark-mode");
themeToggleButton.textContent = "🌜";
themeToggleButton.setAttribute("aria-label", "Switch to Light Mode");
localStorage.setItem("theme", "dark");
} else {
document.body.classList.replace("dark-mode", "light-mode");
themeToggleButton.textContent = "🌞";
themeToggleButton.setAttribute("aria-label", "Switch to Dark Mode");
localStorage.setItem("theme", "light");
}
});

// Apply stored theme on load
applyStoredTheme();

// Hide Loader after Page Load
window.addEventListener('load', function() {
setTimeout(function() {
document.getElementById('loader-wrapper').style.display = 'none';
}, 1000); // Hide loader after 1 second (adjust as needed)
}, 500); // Hide loader after 500ms
});

// Notifications Button (Just for Demo)
const notificationsButton = document.getElementById('notificationsButton');
const marqueeContainer = document.getElementById('marqueeContainer');
notificationsButton.addEventListener('click', () => {
if (marqueeContainer.style.display === "none" || marqueeContainer.style.display === "") {
marqueeContainer.style.display = "block";
} else {
marqueeContainer.style.display = "none";
}
});
</script>

// About Us and Contact Us Button Handlers
document.getElementById("aboutUsButton").addEventListener("click", function() {
const aboutUsSection = document.getElementById("aboutUsSection");
aboutUsSection.style.display = (aboutUsSection.style.display === "none" || aboutUsSection.style.display === "") ? "block" : "none";
});

document.getElementById("contactUsButton").addEventListener("click", function() {
const contactUsSection = document.getElementById("contactUsSection");
contactUsSection.style.display = (contactUsSection.style.display === "none" || contactUsSection.style.display === "") ? "block" : "none";
});
</script>
</body>
</html>
</html>