parv.ashwani
/
ByeByeMouse


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>🐭 Bye Bye Mouse</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    :root {
      /* 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-dark: #23272e;
      --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: -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-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;
      right: 2rem;
      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;
    }

    .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;
      background: rgba(0,0,0,0.08);
      padding: 0.5rem 0;
      border-radius: 1rem;
      margin: 0 auto 1rem auto;
      max-width: 600px;
      overflow: hidden;
      white-space: nowrap;
      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: 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-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-light);
      text-decoration: none;
      transition: color 0.2s;
    }

    body.dark a {
      color: var(--primary-dark);
    }

    a:hover {
      color: var(--accent-light);
      text-decoration: underline;
    }

    body.dark a:hover {
      color: var(--accent-dark);
    }

    .toc {
      background: var(--code-bg-light);
      border-radius: 1rem;
      padding: 1.2rem 1.5rem;
      margin-bottom: 2rem;
      border: 1px solid var(--border-light);
      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);
      color: #2d2d2d;
      border-radius: 0.5rem;
      padding: 0.2em 0.5em;
      font-size: 1em;
      transition: background 0.3s, color 0.3s;
    }

    pre {
      display: block;
      padding: 1em;
      margin: 1.2em 0;
      overflow-x: auto;
      background: var(--code-bg-light);
      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-light);
      color: #222;
      padding: 0.7em 1em;
      border-radius: 0.7em;
      margin: 1em 0;
      font-size: 1.05em;
      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;
      margin: 1.5em 0;
      font-size: 1em;
      background: var(--code-bg-light);
      border-radius: 1em;
      overflow: hidden;
      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-light);
      color: #fff;
      font-weight: 700;
    }

    body.dark th {
      background: var(--primary-dark);
    }

    kbd {
      background: var(--kbd-bg-light);
      color: var(--kbd-text-light);
      border-radius: 0.3em;
      padding: 0.2em 0.5em;
      font-size: 1em;
      font-family: inherit;
      border: 1px solid var(--border-light);
      box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04);
      margin: 0 0.1em;
      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-light);
      text-decoration: none;
      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-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;
      }
      header {
        padding: 1.5rem 0 0.7rem 0;
      }
      .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>

  <!-- Enhanced 3D and theme polish -->
  <style>
    /* ---------- THEME TUNE-UP ---------- */
    :root {
      /* Light theme tune-up */
      --primary-light: #2563eb;    /* richer blue */
      --accent-light: #f97316;     /* warm orange */
      --bg-light: #f6f8fb;         /* softer background */
      --text-light: #0f172a;
      --card-light: #ffffff;
      --border-light: #e6e8ee;
      --code-bg-light: #f2f5f9;
      --kbd-bg-light: #eef2f6;
      --kbd-text-light: #0f172a;
      --shadow-light-1: 0 2px 10px rgba(28, 35, 49, 0.08), 0 8px 32px rgba(28, 35, 49, 0.08);
      --shadow-light-2: 0 12px 30px rgba(28, 35, 49, 0.12), 0 30px 60px rgba(28, 35, 49, 0.10);
    }

    body.dark {
      /* Dark theme tune-up */
      --primary-dark: #30e06a;     /* softer neon green */
      --accent-dark: #ff7a18;      /* warm orange */
      --bg-dark: #0b1220;          /* deep navy */
      --text-dark: #e6edf3;
      --card-dark: #0f172a;        /* slate */
      --border-dark: #1a2333;
      --code-bg-dark: #0b1324;     /* midnight */
      --kbd-bg-dark: #0e1a2b;
      --kbd-text-dark: #e6edf3;
      --shadow-dark-1: 0 12px 30px rgba(0, 0, 0, 0.45), 0 6px 16px rgba(0, 0, 0, 0.35);
      --shadow-dark-2: 0 24px 60px rgba(0, 0, 0, 0.55), 0 12px 24px rgba(0, 0, 0, 0.45);
    }

    /* Background ambiance */
    body {
      background:
        radial-gradient(1200px 400px at -10% -10%, rgba(37, 99, 235, 0.08), transparent 60%),
        radial-gradient(700px 300px at 110% 110%, rgba(249, 115, 22, 0.08), transparent 65%),
        var(--bg-light);
    }
    body.dark {
      background:
        radial-gradient(1000px 400px at -10% -10%, rgba(48, 224, 106, 0.08), transparent 60%),
        radial-gradient(900px 500px at 110% 120%, rgba(255, 122, 24, 0.06), transparent 70%),
        var(--bg-dark);
    }

    /* Optional noise texture for subtle texture */
    body::after {
      content: "";
      position: fixed; inset: 0;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='.0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 .06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      opacity: .4;
      mix-blend-mode: soft-light;
    }

    /* Header with 3D sheen */
    header {
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--border-light);
      box-shadow: var(--shadow-light-1);
      background: linear-gradient(120deg, var(--primary-light) 0%, #60a5fa 40%, var(--accent-light) 100%);
    }
    body.dark header {
      border-bottom: 1px solid var(--border-dark);
      box-shadow: var(--shadow-dark-1);
      background:
        radial-gradient(120% 100% at 10% -10%, rgba(48,224,106,0.25), transparent 60%),
        radial-gradient(100% 120% at 110% 120%, rgba(255,122,24,0.15), transparent 65%),
        linear-gradient(120deg, #0d1220, #101a2e 60%, #0d1326);
    }
    header::after {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 40%);
      pointer-events: none;
      z-index: 1;
    }

    /* Keep header content above orbs */
    header .repo-link,
    header .toggle-mode,
    header h1,
    header .marquee,
    header p {
      position: relative;
      z-index: 2;
    }

    /* 3D parallax decorative orbs */
    .hero-orbs {
      position: absolute; inset: 0;
      overflow: hidden; pointer-events: none;
      z-index: 1;
    }
    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(1px) saturate(1.1);
      transform: translateZ(0);
      transition: transform .2s ease-out;
    }
    .orb-1 { width: 160px; height: 160px; background: radial-gradient(circle at 30% 30%, #fff, rgba(37,99,235,.5) 30%, transparent 60%); top: -30px; left: -30px; opacity: .5; }
    .orb-2 { width: 220px; height: 220px; background: radial-gradient(circle at 60% 40%, #fff, rgba(48,224,106,.45) 35%, transparent 65%); bottom: -60px; right: -40px; opacity: .45; }
    .orb-3 { width: 120px; height: 120px; background: radial-gradient(circle at 40% 60%, #fff, rgba(255,122,24,.45) 35%, transparent 65%); top: 30px; right: 20%; opacity: .35; }
    body.dark .orb-1 { opacity: .35; }
    body.dark .orb-2 { opacity: .3; }
    body.dark .orb-3 { opacity: .25; }

    /* 3D main wrapper */
    main {
      border-radius: 1.25rem;
      border: 1px solid var(--border-light);
      background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.7)) !important;
      box-shadow: var(--shadow-light-2);
      backdrop-filter: blur(8px) saturate(1.05);
    }
    body.dark main {
      border: 1px solid var(--border-dark);
      background:
        radial-gradient(200% 140% at 0% 0%, rgba(48,224,106,0.03), transparent 35%),
        radial-gradient(180% 140% at 100% 100%, rgba(255,122,24,0.03), transparent 40%),
        linear-gradient(180deg, rgba(12,19,35,.85), rgba(14,21,41,.85)) !important;
      box-shadow: var(--shadow-dark-2);
      backdrop-filter: blur(10px) saturate(1.1);
    }

    /* Sections as 3D cards with tilt */
    main { perspective: 900px; }
    main section {
      background: var(--card-light);
      border: 1px solid var(--border-light);
      border-radius: 1rem;
      padding: 1.1rem 1rem 1.2rem;
      margin: 1.25rem 0;
      box-shadow: var(--shadow-light-1);
      transform-style: preserve-3d;
      will-change: transform;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    }
    main section:hover {
      box-shadow: 0 12px 35px rgba(28, 35, 49, 0.14);
    }
    body.dark main section {
      background: linear-gradient(180deg, rgba(18,26,44,.9), rgba(16,24,42,.9));
      border: 1px solid var(--border-dark);
      box-shadow: var(--shadow-dark-1);
    }
    body.dark main section:hover {
      box-shadow: 0 26px 60px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.45);
    }

    /* Headings */
    h2, h3 {
      letter-spacing: -0.2px;
      text-shadow: 0 1px 0 rgba(255,255,255,.35);
    }
    body.dark h2, body.dark h3 {
      text-shadow: 0 0 0 transparent;
    }

    /* Glassy buttons with 3D depth */
    .repo-link,
    .toggle-mode {
      position: absolute;
      background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
      border: 1px solid rgba(255,255,255,.35);
      box-shadow: 0 8px 16px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.35);
      backdrop-filter: blur(6px) saturate(1.1);
      color: #fff;
      text-shadow: 0 1px 0 rgba(0,0,0,.25);
    }
    body.dark .repo-link,
    body.dark .toggle-mode {
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 12px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
    }

    /* 3D toggle switch style */
    .toggle-mode {
      right: 2rem;
      padding: .5rem 2.6rem .5rem .9rem;
      border-radius: 999px;
      font-weight: 600;
      transform: translateZ(0);
    }
    .toggle-mode::before {
      content: "";
      position: absolute;
      right: .4rem; top: 50%;
      width: 1.6rem; height: 1.6rem;
      border-radius: 50%;
      transform: translateY(-50%);
      background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.3) 40%, rgba(0,0,0,.02) 60%);
      box-shadow: 0 6px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.5);
      transition: right .25s ease, background .2s ease, transform .2s ease;
    }
    body.dark .toggle-mode {
      padding-left: 2.6rem; padding-right: .9rem;
    }
    body.dark .toggle-mode::before {
      right: auto; left: .4rem;
      background: radial-gradient(circle at 35% 35%, #7cffb0, rgba(48,224,106,.35) 35%, rgba(0,0,0,.05) 60%);
    }

    /* Notes with depth */
    .note {
      border-radius: .8rem;
      background: linear-gradient(180deg, #ffedcc, #ffd39b);
      color: #4b2c00;
      border: 1px solid #f8c887;
      box-shadow: 0 10px 22px rgba(255,149,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
    }
    body.dark .note {
      background: linear-gradient(180deg, rgba(255,122,24,.18), rgba(255,122,24,.12));
      color: #ffe9d5;
      border: 1px solid rgba(255,122,24,.35);
      box-shadow: 0 10px 22px rgba(255,122,24,.22), inset 0 1px 0 rgba(255,255,255,.06);
    }

    /* Code blocks with accent edge and glow */
    pre {
      background: var(--code-bg-light);
      border-left: 3px solid var(--primary-light);
      box-shadow: 0 12px 24px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.4);
    }
    body.dark pre {
      background: linear-gradient(180deg, rgba(12,19,35,.6), rgba(12,19,35,.5));
      border-color: var(--primary-dark);
      box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(48,224,106,.08) inset;
    }

    /* Tables and kbd tweaks */
    table {
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
    }
    body.dark table {
      box-shadow: 0 16px 40px rgba(0,0,0,.35);
    }
    kbd {
      box-shadow: 0 2px 4px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.5);
    }
    body.dark kbd {
      box-shadow: 0 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
    }

    /* Smooth marquee (GPU-friendly) */
    .marquee {
      overflow: hidden;
      white-space: nowrap;
      display: block;
      animation: marqueeX 16s linear infinite;
    }
    @keyframes marqueeX {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
    }

    /* Theme indicator badge */
    .theme-indicator {
      box-shadow: 0 8px 20px rgba(0,0,0,.15);
    }

    /* Scrollbar (webkit) */
    *::-webkit-scrollbar { height: 10px; width: 10px; }
    *::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--primary-light), var(--accent-light));
      border-radius: 999px;
    }
    body.dark *::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--primary-dark), var(--accent-dark));
    }

    /* Mobile polishing */
    @media (max-width: 700px) {
      main section { padding: 1rem; }
      .repo-link, .toggle-mode { position: static; margin: .5rem .5rem 0 0; display: inline-flex; }
    }

    /* Accessibility: respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .marquee, .orb { animation: none; transition: none; }
      main section { transition: none; }
    }
  </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>

    <!-- 3D floating orbs (decorative) -->
    <div class="hero-orbs" aria-hidden="true">
      <span class="orb orb-1"></span>
      <span class="orb orb-2"></span>
      <span class="orb orb-3"></span>
    </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>
      <ol>
        <li><a href="#copy-a-file">copy a file</a></li>
        <li><a href="#duplicate-a-file">duplicate a file</a></li>
        <li><a href="#copy-a-directory">copy a directory</a></li>
        <li><a href="#duplicate-a-directory">duplicate a directory</a></li>
        <li><a href="#move-a-file">move a file</a></li>
        <li><a href="#rename-a-file">rename a file</a></li>
        <li><a href="#move-a-directory">move a directory</a></li>
        <li><a href="#rename-a-directory">rename a directory</a></li>
        <li><a href="#merge-directories">merge directories</a></li>
        <li><a href="#create-a-new-file">create a new file</a></li>
        <li><a href="#create-a-new-directory">create a new directory</a></li>
        <li><a href="#show-filedirectory-size">show file/directory size</a></li>
        <li><a href="#show-filedirectory-info">show file/directory info</a></li>
        <li><a href="#open-a-file-with-the-default-program">open a file with the default program</a></li>
        <li><a href="#open-a-file-in-any-application">open a file in any application</a></li>
        <li><a href="#zip-a-directory">zip a directory</a></li>
        <li><a href="#unzip-a-directory">unzip a directory</a></li>
        <li><a href="#peek-files-in-a-zip-file">peek files in a zip file</a></li>
        <li><a href="#remove-a-file">remove a file</a></li>
        <li><a href="#remove-a-directory">remove a directory</a></li>
        <li><a href="#remove-all-files-of-certain-criteria">remove all files of certain criteria</a></li>
        <li><a href="#list-directory-contents">list directory contents</a></li>
        <li><a href="#tree-view-a-directory-and-its-subdirectories">tree view a directory and its subdirectories</a></li>
        <li><a href="#find-a-stale-file">find a stale file</a></li>
        <li><a href="#show-a-calendar">show a calendar</a></li>
        <li><a href="#find-a-future-date">find a future date</a></li>
        <li><a href="#use-a-calculator">use a calculator</a></li>
        <li><a href="#force-quit-a-program">force quit a program</a></li>
        <li><a href="#check-server-response">check server response</a></li>
        <li><a href="#view-content-of-a-file">view content of a file</a></li>
        <li><a href="#search-for-a-text-in-a-file">search for a text in a file</a></li>
        <li><a href="#search-in-all-files-in-current-working-directory-quickly-entire-disk-in-less-than-15-minutes">search in all files in current working directory, quickly (entire disk in less than 15 minutes)</a></li>
        <li><a href="#view-an-image">view an image</a></li>
        <li><a href="#show-disk-size">show disk size</a></li>
        <li><a href="#check-cpu-usage-processes-and-ram">check cpu usage, processes and RAM</a></li>
        <li><a href="#know-whether-your-computer-is-under-load-and-whether-its-due-to-memory-or-cpu">know whether your computer is under load, and whether it's due to memory or CPU</a></li>
        <li><a href="#poweroff-or-reboot-your-computer">poweroff or reboot your computer</a></li>
        <li><a href="#locate-usb-drives">locate USB drives</a></li>
        <li><a href="#unmount-usb-drives">unmount USB drives</a></li>
        <li><a href="#format-usb-drives">format USB drives</a></li>
        <li><a href="#check-usb-format">check USB format</a></li>
        <li><a href="#run-command-on-all-files-of-a-directory">run command on all files of a directory</a></li>
        <li><a href="#check-network-connectivity-to-a-remote-address-and-port">check network connectivity to a remote address and port</a></li>
        <li><a href="#check-dns-config-of-a-domain">check DNS config of a domain</a></li>
        <li><a href="#check-the-ownership-and-registration-of-a-domain">check the ownership and registration of a domain</a></li>
        <li><a href="#hotkeys">Hotkeys</a></li>
        <li><a href="#i-cant-remember-these-cryptic-commands">I can't remember these cryptic commands</a></li>
      </ol>
    </section>

    <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>
      <p>Copy <code>readme.txt</code> to the <code>documents</code> directory</p>
      <pre><code>$ cp readme.txt documents/</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="duplicate-a-file">
      <h3>duplicate a file</h3>
      <div class="note">STOP RIGHT CLICKING AND DUPLICATE A FILE 👎</div>
      <pre><code>$ cp readme.txt readme.bak.txt</code></pre>
      <p>More advanced:</p>
      <pre><code>$ cp readme{,.bak}.txt
# Note: learn how the {} works with touch foo{1,2,3}.txt and see what happens.</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="copy-a-directory">
      <h3>copy a directory</h3>
      <div class="note">STOP DRAG AND DROPPING A DIRECTORY, OR CMD/CTRL + C, CMD/CTRL + V A DIRECTORY 👎</div>
      <p>Copy <code>myMusic</code> directory to the <code>myMedia</code> directory</p>
      <pre><code>$ cp -a myMusic myMedia/
# or
$ cp -a myMusic/ myMedia/myMusic/</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="duplicate-a-directory">
      <h3>duplicate a directory</h3>
      <div class="note">STOP RIGHT CLICKING AND DUPLICATE A DIRECTORY 👎</div>
      <pre><code>$ cp -a myMusic/ myMedia/
# or if `myMedia` folder doesn't exist
$ cp -a myMusic myMedia/</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="move-a-file">
      <h3>move a file</h3>
      <div class="note">STOP DRAG AND DROPPING A FILE, OR CMD/CTRL + X, CMD/CTRL + V A FILE 👎</div>
      <pre><code>$ mv readme.txt documents/</code></pre>
      <p><b>Always</b> use a trailing slash when moving files, <a href="http://unix.stackexchange.com/a/50533" target="_blank">for this reason</a>.</p>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="rename-a-file">
      <h3>rename a file</h3>
      <div class="note">STOP RIGHT CLICKING AND RENAME A FILE 👎</div>
      <pre><code>$ mv readme.txt README.md</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="move-a-directory">
      <h3>move a directory</h3>
      <div class="note">STOP DRAG AND DROPPING A DIRECTORY, OR CMD/CTRL + X, CMD/CTRL + V A DIRECTORY 👎</div>
      <pre><code>$ mv myMedia myMusic/
# or
$ mv myMedia/ myMusic/myMedia</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="rename-a-directory">
      <h3>rename a directory</h3>
      <div class="note">STOP RIGHT CLICKING AND RENAME A DIRECTORY 👎</div>
      <pre><code>$ mv myMedia/ myMusic/</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="merge-directories">
      <h3>merge directories</h3>
      <div class="note">STOP DRAG AND DROPPING TO MERGE DIRECTORIES 👎</div>
      <pre><code>$ rsync -a /images/ /images2/	# note: may over-write files with the same name, so be careful!</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="create-a-new-file">
      <h3>create a new file</h3>
      <div class="note">STOP RIGHT CLICKING AND CREATE A NEW FILE 👎</div>
      <pre><code>$ touch 'new file'    # updates the file's access and modification timestamp if it already exists
# or
$ > 'new file'        # note: erases the content if it already exists</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="create-a-new-directory">
      <h3>create a new directory</h3>
      <div class="note">STOP RIGHT CLICKING AND CREATE A NEW DIRECTORY 👎</div>
      <pre><code>$ mkdir 'untitled folder'
# or
$ mkdir -p 'path/may/not/exist/untitled folder'</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="show-filedirectory-size">
      <h3>show file/directory size</h3>
      <div class="note">STOP RIGHT CLICKING AND SHOW FILE/directory INFO 👎</div>
      <pre><code>$ du -sh node_modules/</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="show-filedirectory-info">
      <h3>show file/directory info</h3>
      <div class="note">STOP RIGHT CLICKING AND SHOW FILE/DIRECTORY INFO 👎</div>
      <pre><code>$ stat -x readme.md   # on macOS
$ stat readme.md      # on Linux</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="open-a-file-with-the-default-program">
      <h3>open a file with the default program</h3>
      <div class="note">STOP DOUBLE CLICKING ON A FILE 👎</div>
      <pre><code>$ xdg-open file   # on Linux
$ open file       # on MacOS
$ start file      # on Windows</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="open-a-file-in-any-application">
      <h3>open a file in any application</h3>
      <div class="note">STOP RIGHT CLICKING AND OPEN WITH 👎</div>
      <pre><code>$ open -a appName file</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="zip-a-directory">
      <h3>zip a directory</h3>
      <div class="note">STOP RIGHT CLICKING AND COMPRESS DIRECTORY 👎</div>
      <pre><code>$ zip -r archive_name.zip folder_to_compress</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="unzip-a-directory">
      <h3>unzip a directory</h3>
      <div class="note">STOP RIGHT CLICKING AND UNCOMPRESS DIRECTORY 👎</div>
      <pre><code>$ unzip archive_name.zip</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="peek-files-in-a-zip-file">
      <h3>peek files in a zip file</h3>
      <div class="note">STOP USING WinRAR 👎</div>
      <pre><code>$ zipinfo archive_name.zip
# or
$ unzip -l archive_name.zip</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="remove-a-file">
      <h3>remove a file</h3>
      <div class="note">STOP RIGHT CLICKING AND DELETE A FILE PERMANENTLY 👎</div>
      <pre><code>$ rm my_useless_file</code></pre>
      <p><b>IMPORTANT</b>: The <code>rm</code> command deletes <code>my_useless_file</code> permanently, which is equivalent to move <code>my_useless_file</code> to Recycle Bin and hit Empty Recycle Bin.</p>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="remove-a-directory">
      <h3>remove a directory</h3>
      <div class="note">STOP RIGHT CLICKING AND DELETE A DIRECTORY PERMANENTLY 👎</div>
      <pre><code>$ rm -r my_useless_folder</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="remove-all-files-of-certain-criteria">
      <h3>remove all files of certain criteria</h3>
      <pre><code>$ find . -name "*.bak" -type f -delete</code></pre>
      <p><b>IMPORTANT</b>: run <code>find . -name "*.bak" -type f</code> first to see exactly which files you will remove.</p>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="list-directory-contents">
      <h3>list directory contents</h3>
      <div class="note">STOP OPENING YOUR FINDER OR FILE EXPLORER 👎</div>
      <pre><code>$ ls my_folder        # Simple
$ ls -la my_folder    # -l: show in list format. -a: show all files, including hidden. -la combines those options.
$ ls -ltrha my_folder # -r: reverse output. -t: sort by time (modified). -h: output human-readable sizes.</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="tree-view-a-directory-and-its-subdirectories">
      <h3>tree view a directory and its subdirectories</h3>
      <div class="note">STOP OPENING YOUR FINDER OR FILE EXPLORER 👎</div>
      <pre><code>$ tree                                                        # on Linux
$ find . -print | sed -e 's;[^/]*/;|____;g;s;____|; |;g'      # on MacOS
# Note: install homebrew (https://brew.sh) to be able to use (some) Linux utilities such as tree.
# brew install tree</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="find-a-stale-file">
      <h3>find a stale file</h3>
      <div class="note">STOP USING YOUR FILE EXPLORER TO FIND A FILE 👎</div>
      <p>Find all files modified more than 5 days ago</p>
      <pre><code>$ find my_folder -mtime +5</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="show-a-calendar">
      <h3>show a calendar</h3>
      <div class="note">STOP LOOKING UP WHAT THIS MONTH LOOKS LIKE BY CALENDAR WIDGETS 👎</div>
      <p>Display a text calendar</p>
      <pre><code>$ cal</code></pre>
      <p>Display selected month and year calendar</p>
      <pre><code>$ cal 11 2018</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="find-a-future-date">
      <h3>find a future date</h3>
      <div class="note">STOP USING WEBAPPS TO CALCULATE FUTURE DATES 👎</div>
      <p>What is today's date?</p>
      <pre><code>$ date +%m/%d/%Y</code></pre>
      <p>What about a week from now?</p>
      <pre><code>$ date -d "+7 days"                                           # on Linux
$ date -j -v+7d                                               # on MacOS</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="use-a-calculator">
      <h3>use a calculator</h3>
      <div class="note">STOP USING CALCULATOR WIDGET 👎</div>
      <pre><code>$ bc -l</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="force-quit-a-program">
      <h3>force quit a program</h3>
      <div class="note">STOP CTRL + ALT + DELETE and choose the program to kill 👎</div>
      <pre><code>$ killall -9 program_name</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="check-server-response">
      <h3>check server response</h3>
      <div class="note">STOP OPENING A BROWSER 👎</div>
      <pre><code>$ curl -i rbtreevi.web.app
# curl's -i (--include) option includes HTTP response headers in its output.</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="view-content-of-a-file">
      <h3>view content of a file</h3>
      <div class="note">STOP DOUBLE CLICKING A FILE 👎</div>
      <pre><code>$ cat apps/settings.py
# if the file is too big to fit on one page, you can use a 'pager' (less) which shows you one page at a time.
$ less apps/settings.py</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="search-for-a-text-in-a-file">
      <h3>search for a text in a file</h3>
      <div class="note">STOP CMD/CTRL + F IN A FILE 👎</div>
      <pre><code>$ grep -i "Query" file.txt</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="search-in-all-files-in-current-working-directory-quickly-entire-disk-in-less-than-15-minutes">
      <h3>search in all files in current working directory, quickly (entire disk in less than 15 minutes)</h3>
      <div class="note">STOP CMD/CTRL + F IN A DIRECTORY 👎</div>
      <pre><code>$ ripgrep -i "Query"
# brew install ripgrep</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="view-an-image">
      <h3>view an image</h3>
      <div class="note">STOP USING PREVIEW 👎</div>
      <pre><code>$ imgcat image.png
# Note: requires iTerm2 terminal.</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="show-disk-size">
      <h3>show disk size</h3>
      <div class="note">STOP RIGHT CLICKING DISK ICON OR OPENING DISK UTILITY 👎</div>
      <pre><code>$ df -h</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="check-cpu-usage-processes-and-ram">
      <h3>check cpu usage, processes and RAM</h3>
      <div class="note">STOP OPENING YOUR ACTIVITY MONITOR OR TASK MANAGER 👎</div>
      <pre><code>$ top</code></pre>
      <p>if you want some more details:</p>
      <pre><code>$ htop</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="know-whether-your-computer-is-under-load-and-whether-its-due-to-memory-or-cpu">
      <h3>know whether your computer is under load, and whether it's due to memory or CPU</h3>
      <pre><code>$ glances
# brew install glances
# pip install --user 'glances[all]'</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="poweroff-or-reboot-your-computer">
      <h3>poweroff or reboot your computer</h3>
      <p>This can be useful when you're patching a server that is accessed via SSH and you don't have a GUI.</p>
      <pre><code># poweroff
$ sudo shutdown -h now
# reboot
$ sudo shutdown -r now</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="locate-usb-drives">
      <h3>locate USB drives</h3>
      <pre><code>$ df</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="unmount-usb-drives">
      <h3>unmount USB drives</h3>
      <pre><code>$ sudo umount /dev/sdb1</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="format-usb-drives">
      <h3>format USB drives</h3>
      <pre><code># FAT32
$ sudo mkfs.vfat /dev/sdb1
# NTFS
$ sudo mkfs.ntfs /dev/sdb1
# exFAT
$ sudo mkfs.exfat /dev/sdb1</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="check-usb-format">
      <h3>check USB format</h3>
      <pre><code>$ sudo fsck /dev/sdb1</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="run-command-on-all-files-of-a-directory">
      <h3>run command on all files of a directory</h3>
      <div class="note">STOP CLICKING THE FILES ONE BY ONE 👎</div>
      <pre><code>$ for FILE in *; do echo $FILE; done</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="check-network-connectivity-to-a-remote-address-and-port">
      <h3>check network connectivity to a remote address and port</h3>
      <div class="note">STOP USING NETWORK UTILITY</div>
      <pre><code>$ nc -vz www.google.com 443
$ nc -vz 1.1.1.1 53</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="check-dns-config-of-a-domain">
      <h3>check DNS config of a domain</h3>
      <div class="note">STOP USING NETWORK UTILITY</div>
      <pre><code>$ dig www.google.com</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="check-the-ownership-and-registration-of-a-domain">
      <h3>check the ownership and registration of a domain</h3>
      <div class="note">STOP USING NETWORK UTILITY AND THE WEBSITE OF DOMAIN REGISTRATION PROVIDERS</div>
      <pre><code>$ whois www.google.com</code></pre>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="hotkeys">
      <h3>Hotkeys</h3>
      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Hotkey</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            <tr><td><kbd>Ctrl</kbd>+<kbd>A</kbd></td><td>Go to the beginning of the line you are currently typing on</td></tr>
            <tr><td><kbd>Ctrl</kbd>+<kbd>E</kbd></td><td>Go to the end of the line you are currently typing on</td></tr>
            <tr><td><kbd>Ctrl</kbd>+<kbd>L</kbd></td><td>Clears the Screen, similar to the clear command</td></tr>
            <tr><td><kbd>Ctrl</kbd>+<kbd>U</kbd></td><td>Clears the line before the cursor position. If you are at the end of the line, clears the entire line.</td></tr>
            <tr><td><kbd>Ctrl</kbd>+<kbd>H</kbd></td><td>Same as backspace</td></tr>
            <tr><td><kbd>Ctrl</kbd>+<kbd>R</kbd></td><td>Lets you search through previously used commands</td></tr>
            <tr><td><kbd>Ctrl</kbd>+<kbd>C</kbd></td><td>Kill whatever you are running</td></tr>
            <tr><td><kbd>Ctrl</kbd>+<kbd>D</kbd></td><td>Exit the current shell</td></tr>
            <tr><td><kbd>Ctrl</kbd>+<kbd>Z</kbd></td><td>Puts whatever you are running into a suspended background process. fg restores it.</td></tr>
            <tr><td><kbd>Ctrl</kbd>+<kbd>W</kbd></td><td>Delete the word before the cursor</td></tr>
            <tr><td><kbd>Ctrl</kbd>+<kbd>K</kbd></td><td>Clear the line after the cursor</td></tr>
            <tr><td><kbd>Ctrl</kbd>+<kbd>T</kbd></td><td>Swap the last two characters before the cursor</td></tr>
            <tr><td><kbd>Ctrl</kbd>+<kbd>F</kbd></td><td>Move cursor forward one character</td></tr>
            <tr><td><kbd>Ctrl</kbd>+<kbd>B</kbd></td><td>Move cursor backward one character</td></tr>
            <tr><td><kbd>Esc</kbd>+<kbd>T</kbd></td><td>Swap the last two words before the cursor</td></tr>
            <tr><td><kbd>Alt</kbd>+<kbd>T</kbd></td><td>Same as <kbd>Esc</kbd> + <kbd>T</kbd></td></tr>
            <tr><td><kbd>Alt</kbd>+<kbd>F</kbd></td><td>Move cursor forward one word on the current line</td></tr>
            <tr><td><kbd>Alt</kbd>+<kbd>B</kbd></td><td>Move cursor backward one word on the current line</td></tr>
            <tr><td><kbd>Esc</kbd>+<kbd>F</kbd></td><td>Same as <kbd>Alt</kbd> + <kbd>F</kbd></td></tr>
            <tr><td><kbd>Esc</kbd>+<kbd>B</kbd></td><td>Same as <kbd>Alt</kbd> + <kbd>B</kbd></td></tr>
            <tr><td><kbd>Alt</kbd>+<kbd>.</kbd></td><td>Paste the last word of the most recently command</td></tr>
            <tr><td><kbd>Tab</kbd></td><td>Auto-complete files and directory names</td></tr>
          </tbody>
        </table>
      </div>
      <a class="back-to-top" href="#quick-links">Go to table of contents 🔼</a>
    </section>

    <section id="i-cant-remember-these-cryptic-commands">
      <h3>I can't remember these cryptic commands</h3>
      <p>You can always google or <code>man</code> the commands you are not familiar with. Or, checkout <a href="https://github.com/tldr-pages/tldr" target="_blank">tldr</a>, a collection of simplified and community-driven man pages.</p>
      <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>
    // Theme toggle and indicator (upgraded)
    const btn = document.getElementById('toggleModeBtn');
    const themeIndicator = document.getElementById('themeIndicator');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    function setMode(dark) {
      document.body.classList.toggle('dark', dark);
      btn.textContent = dark ? '☀️ Light' : '🌙 Dark';
      localStorage.setItem('theme', dark ? 'dark' : 'light');

      // Update theme indicator
      themeIndicator.textContent = dark ? 'Linux Theme' : 'MacOS Theme';

      // Subtle theme transition
      document.body.style.transition = reduceMotion ? '' : 'background 0.5s ease, color 0.5s ease';
      if (!reduceMotion) setTimeout(() => { document.body.style.transition = ''; }, 500);
    }

    (() => {
      const saved = localStorage.getItem('theme');
      if (saved) setMode(saved === 'dark');
      else setMode(prefersDark);
    })();

    btn.onclick = () => setMode(!document.body.classList.contains('dark'));

    // 3D tilt for sections
    function enableTilt() {
      if (reduceMotion) return;
      const cards = document.querySelectorAll('main section');
      const maxTilt = 6; // degrees
      const perspective = 900;
      const scale = 1.004;

      cards.forEach(card => {
        card.style.transform = `perspective(${perspective}px)`;
        card.addEventListener('pointermove', (e) => {
          const rect = card.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          const px = (x / rect.width) - 0.5;
          const py = (y / rect.height) - 0.5;
          const rx = (-py * maxTilt).toFixed(2);
          const ry = (px * maxTilt).toFixed(2);
          card.style.transform = `perspective(${perspective}px) rotateX(${rx}deg) rotateY(${ry}deg) scale(${scale})`;
        });
        card.addEventListener('pointerleave', () => {
          card.style.transform = `perspective(${perspective}px) rotateX(0) rotateY(0) scale(1)`;
        });
      });
    }

    // Parallax orbs
    function enableOrbsParallax() {
      if (reduceMotion) return;
      const orbs = document.querySelectorAll('.orb');
      if (!orbs.length) return;

      document.addEventListener('pointermove', (e) => {
        const cx = window.innerWidth / 2;
        const cy = window.innerHeight / 2;
        const dx = (e.clientX - cx) / cx;
        const dy = (e.clientY - cy) / cy;
        // Subtle movement with layers
        orbs.forEach((orb, i) => {
          const depth = (i + 1) * 6;
          orb.style.transform = `translate(${dx * depth}px, ${dy * depth}px) translateZ(0)`;
        });
      });
    }

    // Init 3D niceties
    enableTilt();
    enableOrbsParallax();
  </script>
</body>
</html>