diff --git a/README.md b/README.md new file mode 100644 index 0000000000..0db5520e77 --- /dev/null +++ b/README.md @@ -0,0 +1,10 @@ +I am Sristi Rai . This is my first open source contribution + +Added a new modern UI version of the menu + +- Created a separate "crazy-ui" branch and folder +- Implemented neon/glassmorphism design +- Improved user interaction and responsiveness +- Kept original design unchanged + +This adds an alternative UI without affecting existing code. diff --git a/app.js b/app.js index d6f8965841..aa08f91e70 100644 --- a/app.js +++ b/app.js @@ -1,3 +1,4 @@ + const lineContainer = document.querySelector(".line-container"); const menu = document.querySelector(".menu"); @@ -5,3 +6,19 @@ lineContainer.addEventListener("click", () => { lineContainer.classList.toggle("active"); menu.classList.toggle("active"); }); + +// Close when clicking outside +document.addEventListener("click", (e) => { + if (!lineContainer.contains(e.target) && !menu.contains(e.target)) { + lineContainer.classList.remove("active"); + menu.classList.remove("active"); + } +}); + +// Close on ESC key +document.addEventListener("keydown", (e) => { + if (e.key === "Escape") { + lineContainer.classList.remove("active"); + menu.classList.remove("active"); + } +}); diff --git a/index.html b/index.html index 6125160f4c..99cdaa6c6d 100644 --- a/index.html +++ b/index.html @@ -1,73 +1,67 @@ - + + - - - - - Menu Design + + + Crazy Menu UI + + + + -
-
- -

Igloo

-
-
-
- - -
-
-
-
-
-
-
-
-
+ +
+
+ +

Igloo

+
+ +
+
+ + +
+
+ +
+
+
+
+
-
-
-
- - -
-
-
-
- - Home -
-
- - Pages -
-
- - Groups -
-
- - People -
-
- - Updates -
-
-
-
- - John Doe -
- -
+
+
+ +
+
+
+ +
- +
+ +
+
Home
+
Pages
+
Groups
+
People
+
Updates
+
+ +
+
+ + John Doe +
+ +
+
+ + + - \ No newline at end of file + diff --git a/style.css b/style.css index 02305ec086..51bdda0948 100644 --- a/style.css +++ b/style.css @@ -1,189 +1,140 @@ + * { margin: 0; - color: white; + padding: 0; + box-sizing: border-box; } +/* BODY */ body { - overflow: hidden; + font-family: 'Segoe UI', sans-serif; + background: linear-gradient(135deg, #0f172a, #1e293b, #020617); + color: white; + font-size: 18px; } +/* TOPBAR */ .topbar { - width: 100%; - height: 50px; - background-color: black; + height: 70px; + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(15px); display: flex; align-items: center; + justify-content: space-between; + padding: 0 25px; + box-shadow: 0 0 20px rgba(0,255,255,0.2); } -.topbar-left { - display: flex; - flex: 0.2; - align-items: center; - display: flex; - justify-content: center; -} - +/* LOGO */ .logo { - font-size: 25px; + font-size: 32px; + color: #00f5ff; + text-shadow: 0 0 10px #00f5ff; } +/* TITLE */ h1 { - font-size: 20px; - margin-left: 20px; -} - -.topbar-center { - font-family: sans-serif; - flex: 0.7; - display: flex; - justify-content: center; + margin-left: 10px; + font-size: 30px; + font-weight: bold; } +/* SEARCH */ .topbar-search { - width: 50%; - height: 24px; - background-color: whitesmoke; - border-radius: 10px; + background: rgba(255,255,255,0.1); + padding: 10px 15px; + border-radius: 30px; display: flex; align-items: center; + transition: 0.3s; } -.topbar-search .search-icon { - margin: 0 10px; +.topbar-search:hover { + box-shadow: 0 0 10px #00f5ff; } .topbar-search input { - border: 0; - background-color: whitesmoke; - width: 70%; - color: black; -} - -.topbar-search input:focus { + border: none; + background: transparent; + color: white; + margin-left: 10px; + font-size: 16px; outline: none; } -.topbar-right { - flex: 0.1; - display: flex; - justify-content: flex-end; -} - -.line-container { - margin-right: 20px; - width: 24px; - height: 18px; - display: flex; - flex-direction: column; - justify-content: space-between; - cursor: pointer; -} - +/* MENU ICON */ .line { - width: 100%; - height: 2px; - background-color: white; - border-radius: 20px; - transition: transform 1s ease, opacity 0.5s ease; - transform-origin: left; + width: 30px; + height: 4px; + background: #00f5ff; + margin: 6px; + border-radius: 10px; + transition: 0.4s; } +/* SIDEBAR */ .menu { - width: 200px; - height: calc(100vh - 50px); - background-color: black; - position: absolute; - top: 50px; - right: -250px; - padding: 0 20px; - display: flex; - flex-direction: column; - font-family: sans-serif; - transition: all 1s ease; + position: fixed; + top: 70px; + right: -300px; + width: 300px; + height: 100%; + background: rgba(0,0,0,0.95); + backdrop-filter: blur(20px); + padding: 25px; + transition: 0.5s; } -.menu-top { - flex: 0.1; - display: flex; - align-items: center; - justify-content: center; +.menu.active { + right: 0; } -.menu-search { - width: 100%; - height: 30px; - background-color: lightgray; - border-radius: 20px; +/* MENU ITEMS */ +.menu-item { + margin: 20px 0; + padding: 14px; + border-radius: 10px; + cursor: pointer; display: flex; align-items: center; - justify-content: space-evenly; -} - -.search-icon { - color: gray; -} - -.menu-search input { - width: 75%; - border: none; - background-color: lightgray; - color: black; -} - -.menu-search input:focus { - outline: none; -} - -.menu-center { - flex: 0.8; + font-size: 20px; + transition: 0.3s; } -.menu-item { - margin-top: 20px; - cursor: pointer; +.menu-item i { + margin-right: 12px; + font-size: 22px; } -.menu-item span { - margin-left: 10px; +.menu-item:hover { + background: rgba(0,255,255,0.1); + color: #00f5ff; + transform: translateX(10px) scale(1.05); + box-shadow: 0 0 10px #00f5ff; } +/* USER */ .menu-bottom { - flex: 0.1; - display: flex; - align-items: center; - justify-content: space-between; + position: absolute; + bottom: 25px; } .menu-bottom-user { display: flex; align-items: center; - cursor: pointer; -} - -.menu-bottom-user span { - font-size: 14px; + font-size: 18px; } -.menu img { - width: 32px; - height: 32px; +.menu-bottom-user img { + width: 40px; border-radius: 50%; - object-fit: cover; margin-right: 10px; + border: 2px solid #00f5ff; } -.menu.active { - transform: translateX(-250px); -} - -.line-container.active .line-1 { - transform: rotate(45deg); -} - -.line-container.active .line-2 { - opacity: 0; -} - -.line-container.active .line-3 { - transform: rotate(-45deg); +/* RESPONSIVE */ +@media (max-width: 600px) { + .topbar-center { + display: none; + } }