Skip to content

sanchitaupdate index.html #6

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
sanchitas-github wants to merge 1 commit into
base: main
Choose a base branch
from
Open

sanchitaupdate index.html #6

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
101 changes: 101 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,72 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MultiColor Window</title>
<style>
.dark {
background-color: #1a202c;
color: white;
}
.dark nav {
background-color: #2d3748;
}
.dark a {
color: white;
}
</style>
<link rel="icon" type="image/x-icon" href="./icon/icon.png">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<nav class="bg-gray-800 transition-colors duration-300">
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div class="relative flex h-16 items-center justify-between">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">

<button type="button" id="mobile-menu-button" class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:ring-2 focus:ring-white focus:outline-none focus:ring-inset" aria-controls="mobile-menu" aria-expanded="false">
<span class="absolute -inset-0.5"></span>
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg id="close-icon" class="hidden size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
<div class="flex shrink-0 items-center">
<img class="h-8 w-auto" src="https://tailwindui.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
</div>
<div class="hidden sm:ml-6 sm:block">
<div class="flex space-x-4">
<a href="#" class="rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white" aria-current="page">Dashboard</a>
<a href="#" class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Team</a>
<a href="#" class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Projects</a>
<a href="#" class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Calendar</a>
</div>
</div>
</div>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
<button id="theme-toggle" class="p-2 rounded-md bg-gray-700 text-white hover:bg-gray-600 focus:ring-2 focus:ring-white">
<span id="sun-icon" class="hidden">☀️</span>
<span id="moon-icon">🌙</span>
</button>
</div>

</div>
</div>


<div class="hidden sm:hidden" id="mobile-menu">
<div class="space-y-1 px-2 pt-2 pb-3">
<a href="#" class="block rounded-md bg-gray-900 px-3 py-2 text-base font-medium text-white" aria-current="page">Dashboard</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Team</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Projects</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Calendar</a>
</div>
</div>
</nav>

<div class="flex flex-col h-screen justify-center items-center font-bold">
<h1 id="name" class="text-2xl bold">MultiColor Window</h1>
<button
Expand All @@ -21,6 +83,45 @@ <h1 id="name" class="text-2xl bold">MultiColor Window</h1>
Click Me
</button>
</div>
<script>
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const menuIcon = document.getElementById('menu-icon');
const closeIcon = document.getElementById('close-icon');

mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
menuIcon.classList.toggle('hidden');
closeIcon.classList.toggle('hidden');
});

const themeToggle = document.getElementById('theme-toggle');
const sunIcon = document.getElementById('sun-icon');
const moonIcon = document.getElementById('moon-icon');

themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark');
if (document.body.classList.contains('dark')) {
localStorage.setItem('theme', 'dark');
sunIcon.classList.remove('hidden');
moonIcon.classList.add('hidden');
} else {
localStorage.setItem('theme', 'light');
sunIcon.classList.add('hidden');
moonIcon.classList.remove('hidden');
}
});

if (localStorage.getItem('theme') === 'dark') {
document.body.classList.add('dark');
sunIcon.classList.remove('hidden');
moonIcon.classList.add('hidden');
} else {
document.body.classList.remove('dark');
sunIcon.classList.add('hidden');
moonIcon.classList.remove('hidden');
}
</script>
<script src="script.js"></script>
</body>
</html>