Update 'index.html'

index.html

@@ -6,45 +6,62 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
     :root {
-      --primary: #4f8cff;
-      --accent: #ffb86c;
-      --bg-light: #f7f8fa;
-      --bg-dark: #181a1b;
-      --text-light: #222;
-      --text-dark: #f7f8fa;
-      --card-light: #fff;
-      --card-dark: #23272e;
+      /* MacOS-like Light Theme */
+      --primary-light: #0070E0;
+      --accent-light: #FF9500;
+      --bg-light: #f5f5f7;
+      --text-light: #333;
+      --card-light: #ffffff;
       --border-light: #e0e0e0;
+      --code-bg-light: #f8f8f8;
+      --kbd-bg-light: #f0f0f0;
+      --kbd-text-light: #222;
+      --shadow-light: 0 4px 32px rgba(0,0,0,0.07);
+      
+      /* Linux-like Dark Theme */
+      --primary-dark: #3AD900;
+      --accent-dark: #FF7700;
+      --bg-dark: #0a0a0a;
+      --text-dark: #e0e0e0;
+      --card-dark: #1a1a1a;
       --border-dark: #333;
-      --code-bg-light: #f4f4f4;
       --code-bg-dark: #23272e;
-      --kbd-bg-light: #eaeaea;
-      --kbd-bg-dark: #333;
-      --kbd-text-light: #222;
-      --kbd-text-dark: #f7f8fa;
+      --kbd-bg-dark: #222;
+      --kbd-text-dark: #e0e0e0;
+      --shadow-dark: 0 4px 32px rgba(0,0,0,0.3);
     }
+
     html {
       scroll-behavior: smooth;
     }
+
     body {
-      font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
+      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Arial, sans-serif;
       background: var(--bg-light);
       color: var(--text-light);
       margin: 0;
       padding: 0;
       transition: background 0.3s, color 0.3s;
     }
+
     body.dark {
+      font-family: 'Ubuntu Mono', 'Fira Code', monospace;
       background: var(--bg-dark);
       color: var(--text-dark);
     }
+
     header {
-      background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
+      background: linear-gradient(90deg, var(--primary-light) 0%, var(--accent-light) 100%);
       color: #fff;
       padding: 2rem 0 1rem 0;
       text-align: center;
       position: relative;
     }
+
+    body.dark header {
+      background: linear-gradient(90deg, var(--primary-dark) 0%, var(--accent-dark) 100%);
+    }
+
     .toggle-mode {
       position: absolute;
       top: 1.5rem;
@@ -58,14 +75,37 @@
       cursor: pointer;
       transition: background 0.2s;
     }
+
     .toggle-mode:hover {
       background: rgba(0,0,0,0.15);
     }
+
+    .repo-link {
+      position: absolute;
+      top: 1.5rem;
+      right: 10rem;
+      background: rgba(255,255,255,0.15);
+      border: none;
+      border-radius: 2rem;
+      padding: 0.5rem 1.2rem;
+      color: #fff;
+      font-size: 1rem;
+      cursor: pointer;
+      transition: background 0.2s;
+      text-decoration: none;
+      display: inline-block;
+    }
+
+    .repo-link:hover {
+      background: rgba(0,0,0,0.15);
+    }
+
     h1 {
       font-size: 2.5rem;
       margin: 0 0 0.5rem 0;
       letter-spacing: -1px;
     }
+
     .marquee {
       font-size: 1.1rem;
       color: #fff;
@@ -79,50 +119,73 @@
       box-sizing: border-box;
       animation: marquee 15s linear infinite;
     }
+
     @keyframes marquee {
       0% { text-indent: 100% }
       100% { text-indent: -100% }
     }
+
     main {
       max-width: 900px;
       margin: 2rem auto;
       padding: 2rem;
       background: var(--card-light);
       border-radius: 1.5rem;
-      box-shadow: 0 4px 32px 0 rgba(0,0,0,0.07);
+      box-shadow: var(--shadow-light);
       border: 1px solid var(--border-light);
       transition: background 0.3s, border 0.3s;
     }
+
     body.dark main {
       background: var(--card-dark);
       border: 1px solid var(--border-dark);
+      box-shadow: var(--shadow-dark);
     }
+
     h2, h3 {
-      color: var(--primary);
+      color: var(--primary-light);
       margin-top: 2.5rem;
       margin-bottom: 1rem;
       font-weight: 700;
     }
+
+    body.dark h2, body.dark h3 {
+      color: var(--primary-dark);
+    }
+
     h3 {
       font-size: 1.3rem;
       margin-top: 2rem;
     }
+
     p {
       line-height: 1.7;
       margin: 1rem 0;
     }
+
     ul, ol {
       margin: 1rem 0 1rem 2rem;
     }
+
     a {
-      color: var(--primary);
+      color: var(--primary-light);
       text-decoration: none;
       transition: color 0.2s;
     }
+
+    body.dark a {
+      color: var(--primary-dark);
+    }
+
     a:hover {
-      color: var(--accent);
+      color: var(--accent-light);
       text-decoration: underline;
     }
+
+    body.dark a:hover {
+      color: var(--accent-dark);
+    }
+
     .toc {
       background: var(--code-bg-light);
       border-radius: 1rem;
@@ -132,17 +195,21 @@
       font-size: 1.05rem;
       box-shadow: 0 2px 8px 0 rgba(0,0,0,0.03);
     }
+
     body.dark .toc {
       background: var(--code-bg-dark);
       border: 1px solid var(--border-dark);
     }
+
     .toc ol {
       margin: 0;
       padding-left: 1.2rem;
     }
+
     .toc li {
       margin-bottom: 0.3rem;
     }
+
     code, pre {
       font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
       background: var(--code-bg-light);
@@ -152,6 +219,7 @@
       font-size: 1em;
       transition: background 0.3s, color 0.3s;
     }
+
     pre {
       display: block;
       padding: 1em;
@@ -161,13 +229,15 @@
       color: #2d2d2d;
       border: 1px solid var(--border-light);
     }
+
     body.dark code, body.dark pre {
       background: var(--code-bg-dark);
       color: #f7f8fa;
       border-color: var(--border-dark);
     }
+
     .note {
-      background: var(--accent);
+      background: var(--accent-light);
       color: #222;
       padding: 0.7em 1em;
       border-radius: 0.7em;
@@ -176,10 +246,16 @@
       font-weight: 500;
       display: inline-block;
     }
+
+    body.dark .note {
+      background: var(--accent-dark);
+    }
+
     .table-wrap {
       overflow-x: auto;
       margin: 2em 0;
     }
+
     table {
       width: 100%;
       border-collapse: collapse;
@@ -191,22 +267,31 @@
       box-shadow: 0 2px 8px 0 rgba(0,0,0,0.03);
       transition: background 0.3s;
     }
+
     body.dark table {
       background: var(--code-bg-dark);
     }
+
     th, td {
       padding: 0.7em 1em;
       border-bottom: 1px solid var(--border-light);
       text-align: left;
     }
+
     body.dark th, body.dark td {
       border-bottom: 1px solid var(--border-dark);
     }
+
     th {
-      background: var(--primary);
+      background: var(--primary-light);
       color: #fff;
       font-weight: 700;
     }
+
+    body.dark th {
+      background: var(--primary-dark);
+    }
+
     kbd {
       background: var(--kbd-bg-light);
       color: var(--kbd-text-light);
@@ -220,27 +305,88 @@
       display: inline-block;
       transition: background 0.3s, color 0.3s, border 0.3s;
     }
+
     body.dark kbd {
       background: var(--kbd-bg-dark);
       color: var(--kbd-text-dark);
       border: 1px solid var(--border-dark);
     }
+
     .back-to-top {
       display: inline-block;
       margin-top: 1.5em;
       font-size: 0.95em;
-      color: var(--primary);
+      color: var(--primary-light);
       text-decoration: none;
-      border-bottom: 1px dashed var(--primary);
+      border-bottom: 1px dashed var(--primary-light);
       transition: color 0.2s, border 0.2s;
     }
+
+    body.dark .back-to-top {
+      color: var(--primary-dark);
+      border-bottom: 1px dashed var(--primary-dark);
+    }
+
     .back-to-top:hover {
-      color: var(--accent);
-      border-bottom: 1px dashed var(--accent);
+      color: var(--accent-light);
+      border-bottom: 1px dashed var(--accent-light);
+    }
+
+    body.dark .back-to-top:hover {
+      color: var(--accent-dark);
+      border-bottom: 1px dashed var(--accent-dark);
+    }
+
+    footer {
+      text-align: center;
+      padding: 2rem 0;
+      margin-top: 2rem;
+    }
+
+    .love-btn {
+      background: linear-gradient(90deg, var(--primary-light) 0%, var(--accent-light) 100%);
+      color: white;
+      padding: 0.8rem 2rem;
+      border-radius: 2rem;
+      text-decoration: none;
+      font-weight: 600;
+      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+      transition: transform 0.2s, box-shadow 0.2s;
+      display: inline-block;
+    }
+
+    body.dark .love-btn {
+      background: linear-gradient(90deg, var(--primary-dark) 0%, var(--accent-dark) 100%);
+    }
+
+    .love-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(0,0,0,0.15);
+      text-decoration: none;
+    }
+
+    .theme-indicator {
+      position: fixed;
+      bottom: 10px;
+      right: 10px;
+      padding: 5px 10px;
+      border-radius: 3px;
+      font-size: 12px;
+      font-family: monospace;
+      z-index: 1000;
+      background: var(--primary-light);
+      color: white;
+    }
+
+    body.dark .theme-indicator {
+      background: var(--primary-dark);
+      color: #0a0a0a;
     }
+
     @media (max-width: 700px) {
       main {
         padding: 1rem;
+        margin: 1rem;
       }
       .toc {
         padding: 1rem;
@@ -248,20 +394,33 @@
       header {
         padding: 1.5rem 0 0.7rem 0;
       }
-      .toggle-mode {
-        right: 1rem;
-        top: 1rem;
+      .toggle-mode, .repo-link {
+        position: static;
+        display: block;
+        margin: 0.5rem auto;
+        width: fit-content;
+      }
+      h1 {
+        font-size: 2rem;
+      }
+      .marquee {
+        font-size: 1rem;
+        max-width: 90%;
       }
     }
   </style>
 </head>
 <body>
   <header>
+    <a href="https://gitgog.alwaysdata.net/parv.ashwani/ByeByeMouse.git" 
+       class="repo-link" 
+       target="_blank">📁 Repo Link</a>
     <button class="toggle-mode" id="toggleModeBtn" aria-label="Toggle light/dark mode">🌙 Dark</button>
     <h1>🐭 Bye Bye Mouse</h1>
-    <div class="marquee">Because real power users don’t double-click—they type :)</div>
+    <div class="marquee">Because real power users don't double-click—they type :)</div>
     <p style="margin:0.5em 0 0 0; font-size:1.1em; font-weight:500;">Escape the tyranny of the GUI one command at a time! This repo is your golden ticket to slick shell tricks, terminal wizardry, and keyboard-fueled productivity. Unplug that mouse and watch your workflow sprint.</p>
   </header>
+
   <main>
     <section class="toc" id="quick-links">
       <h2 style="margin-top:0;">Quick Links</h2>
@@ -316,7 +475,6 @@
       </ol>
     </section>
 
-    <!-- All sections below, one after another, with anchors for each -->
     <section id="copy-a-file">
       <h3>copy a file</h3>
       <div class="note">STOP DRAG AND DROPPING A FILE, OR CMD/CTRL + C, CMD/CTRL + V A FILE 👎</div>
@@ -725,21 +883,47 @@ $ nc -vz 1.1.1.1 53</code></pre>
       <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
     </section>
   </main>
+
+  <footer>
+    <a href="https://instagram.com/parvcodes" class="love-btn" target="_blank">
+      Made With ❤️ by Parv Ashwani
+    </a>
+  </footer>
+
+  <div class="theme-indicator" id="themeIndicator">MacOS Theme</div>
+
   <script>
     // Light/Dark mode toggle
     const btn = document.getElementById('toggleModeBtn');
+    const themeIndicator = document.getElementById('themeIndicator');
     const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    
     function setMode(dark) {
       document.body.classList.toggle('dark', dark);
       btn.textContent = dark ? '☀️ Light' : '🌙 Dark';
       localStorage.setItem('theme', dark ? 'dark' : 'light');
-    }
+      
+      // Update theme indicator
+      if (dark) {
+        themeIndicator.textContent = 'Linux Theme';
+      } else {
+        themeIndicator.textContent = 'MacOS Theme';
+      }
+      
+      // Add subtle theme transition
+      document.body.style.transition = 'background 0.5s ease, color 0.5s ease';
+      setTimeout(() => {
+        document.body.style.transition = '';
+      }, 500);
+    }
+    
     // On load
     (() => {
       const saved = localStorage.getItem('theme');
       if (saved) setMode(saved === 'dark');
       else setMode(prefersDark);
     })();
+    
     btn.onclick = () => setMode(!document.body.classList.contains('dark'));
   </script>
 </body>