From e5a7a5a06991779d8d32e75fe3566919f44c173c Mon Sep 17 00:00:00 2001
From: m7mad <m7mad66118@hotmail.com>
Date: Mon, 28 Jul 2025 14:33:36 +0300
Subject: [PATCH] Added new features like JavaScript interactions

---
 css/leon.css | 55 ++++++++++++++++++++++++++++++++++++++++++++++++----
 index.html   |  8 ++++++--
 js/main.js   | 42 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 99 insertions(+), 6 deletions(-)
 create mode 100644 js/main.js

diff --git a/css/leon.css b/css/leon.css
index 148e660..4771214 100644
--- a/css/leon.css
+++ b/css/leon.css
@@ -1,4 +1,11 @@
+
+
+
+
+
+
 /* Start Variables */
+
 :root {
   --main-color: #10cab7;
   --secondary-color: #2c4755;
@@ -83,9 +90,9 @@ body {
 .header .links {
   position: relative;
 }
-.header .links:hover .icon span:nth-child(2) {
+/* .header .links:hover .icon span:nth-child(2) {
   width: 100%;
-}
+} */
 .header .links .icon {
   width: 30px;
   display: flex;
@@ -128,9 +135,9 @@ body {
   right: 5px;
   top: -20px;
 }
-.header .links:hover ul {
+/* .header .links:hover ul {
   display: block;
-}
+} */
 .header .links ul li a {
   display: block;
   padding: 15px;
@@ -419,3 +426,43 @@ body {
   color: var(--main-color);
 }
 /* End Footer */
+
+
+
+
+.links ul {
+  display: none; /* مخفي بشكل افتراضي */
+  background: #fff;
+  position: absolute;
+  top: 50px; /* حسب مكان الأيقونة عندك */
+  right: 20px;
+  padding: 10px;
+  list-style: none;
+  box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
+}
+
+.links ul.show {
+  display: block;
+}
+.header .icon span:nth-child(2).show {
+  width: 100%;
+} 
+#backToTop {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  background-color: var(--main-color);
+  color: white;
+  border: none;
+  padding: 12px 15px;
+  border-radius: 50%;
+  font-size: 20px;
+  cursor: pointer;
+  display: none; /* مخفي في البداية */
+  transition: opacity 0.5s ease;
+  z-index: 999;
+}
+
+#backToTop:hover {
+  background-color: #555;
+}
diff --git a/index.html b/index.html
index 401c29c..bc39e32 100644
--- a/index.html
+++ b/index.html
@@ -24,12 +24,12 @@
       <div class="container">
         <img class="logo" src="images/logo.png" alt="" />
         <div class="links">
-          <span class="icon">
+          <span class="icon" id="menuToggle">
             <span></span>
             <span></span>
             <span></span>
           </span>
-          <ul>
+          <ul id="menuList" >
             <li><a href="#services">Services</a></li>
             <li><a href="#portfolio">Portfolio</a></li>
             <li><a href="#about">About</a></li>
@@ -208,5 +208,9 @@ <h2 class="special-heading">Contact</h2>
     <!-- Start Footer -->
     <div class="footer">&copy; 2021 <span>Leon</span> All Right Reserved</div>
     <!-- End Footer -->
+<button id="backToTop" title="Go to top">↑</button>
+
+
+    <script src="js/main.js"></script>
   </body>
 </html>
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..c31e83f
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,42 @@
+
+  const menuToggle = document.getElementById('menuToggle');
+const menuList = document.getElementById('menuList');
+const menuChild = document.querySelector('.icon span:nth-child(2)')
+
+  // عند الضغط على الأيقونة، يظهر أو يختفي
+  menuToggle.addEventListener('click', (e) => {
+    e.stopPropagation(); // يمنع غلق القائمة فوراً عند الضغط على الأيقونة
+    menuList.classList.toggle('show');
+    menuChild.classList.toggle('show');
+  });
+
+  // إذا ضغط المستخدم في أي مكان آخر، نخفي القائمة
+  document.addEventListener('click', (e) => {
+    if (!menuList.contains(e.target) && !menuToggle.contains(e.target)) {
+        menuList.classList.remove('show');
+         menuChild.classList.toggle('show');
+    }
+  });
+
+//   
+// زر الرجوع للأعلى
+const backToTopBtn = document.getElementById("backToTop");
+
+// عند التمرير لأسفل 700px نظهر الزر
+window.addEventListener("scroll", () => {
+  if (window.scrollY > 700) {
+    backToTopBtn.style.display = "block";
+  } else {
+    backToTopBtn.style.display = "none";
+  }
+});
+
+// عند الضغط على الزر نصعد لأعلى بسلاسة
+backToTopBtn.addEventListener("click", () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  });
+});
+
+