Home Explore
Register Sign In
parv.ashwani
/
ByeByeMouse
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
ByeByeMouse
/
index.html

index.html 44 KB
Permalink History Raw

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.   <meta charset="UTF-8">
    5. 

  5.   <title>๐Ÿญ Bye Bye Mouse</title>
    6. 

  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.   <style>
    8. 

  8.     :root {
    9. 

  9.       /* Light Theme */
    10. 

  10.       --primary-light: #2563eb;
    11. 

  11.       --accent-light: #f97316;
    12. 

  12.       --bg-light: #f6f8fb;
    13. 

  13.       --text-light: #0f172a;
    14. 

  14.       --card-light: #ffffff;
    15. 

  15.       --border-light: #e6e8ee;
    16. 

  16.       --code-bg-light: #f2f5f9;
    17. 

  17.       --kbd-bg-light: #eef2f6;
    18. 

  18.       --kbd-text-light: #0f172a;
    19. 

  19.       --shadow-light-1: 0 2px 10px rgba(28, 35, 49, 0.08), 0 8px 32px rgba(28, 35, 49, 0.08);
    20. 

  20.       --shadow-light-2: 0 12px 30px rgba(28, 35, 49, 0.12), 0 30px 60px rgba(28, 35, 49, 0.10);
    21. 

  21.       --button-bg-light: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
    22. 

  22.       --button-border-light: 1px solid rgba(255,255,255,.35);
    23. 

  23.       --button-shadow-light: 0 8px 16px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.35);
    24. 

  24. 

  25.       /* Dark Theme */
    26. 

  26.       --primary-dark: #30e06a;
    27. 

  27.       --accent-dark: #ff7a18;
    28. 

  28.       --bg-dark: #0b1220;
    29. 

  29.       --text-dark: #e6edf3;
    30. 

  30.       --card-dark: #0f172a;
    31. 

  31.       --border-dark: #1a2333;
    32. 

  32.       --code-bg-dark: #0b1324;
    33. 

  33.       --kbd-bg-dark: #0e1a2b;
    34. 

  34.       --kbd-text-dark: #e6edf3;
    35. 

  35.       --shadow-dark-1: 0 12px 30px rgba(0, 0, 0, 0.45), 0 6px 16px rgba(0, 0, 0, 0.35);
    36. 

  36.       --shadow-dark-2: 0 24px 60px rgba(0, 0, 0, 0.55), 0 12px 24px rgba(0, 0, 0, 0.45);
    37. 

  37.       --button-bg-dark: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    38. 

  38.       --button-border-dark: 1px solid rgba(255,255,255,.12);
    39. 

  39.       --button-shadow-dark: 0 12px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
    40. 

  40.     }
    41. 

  41. 

  42.     html {
    43. 

  43.       scroll-behavior: smooth;
    44. 

  44.     }
    45. 

  45. 

  46.     body {
    47. 

  47.       font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Arial, sans-serif;
    48. 

  48.       background:
    49. 

  49.         radial-gradient(1200px 400px at -10% -10%, rgba(37, 99, 235, 0.08), transparent 60%),
    50. 

  50.         radial-gradient(700px 300px at 110% 110%, rgba(249, 115, 22, 0.08), transparent 65%),
    51. 

  51.         var(--bg-light);
    52. 

  52.       color: var(--text-light);
    53. 

  53.       margin: 0;
    54. 

  54.       padding: 0;
    55. 

  55.       transition: background 0.5s ease, color 0.5s ease;
    56. 

  56.     }
    57. 

  57. 

  58.     body.dark {
    59. 

  59.       font-family: 'Ubuntu Mono', 'Fira Code', monospace;
    60. 

  60.       background:
    61. 

  61.         radial-gradient(1000px 400px at -10% -10%, rgba(48, 224, 106, 0.08), transparent 60%),
    62. 

  62.         radial-gradient(900px 500px at 110% 120%, rgba(255, 122, 24, 0.06), transparent 70%),
    63. 

  63.         var(--bg-dark);
    64. 

  64.       color: var(--text-dark);
    65. 

  65.     }
    66. 

  66. 

  67.     /* Noise texture */
    68. 

  68.     body::after {
    69. 

  69.       content: "";
    70. 

  70.       position: fixed;
    71. 

  71.       inset: 0;
    72. 

  72.       pointer-events: none;
    73. 

  73.       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");
    74. 

  74.       opacity: .4;
    75. 

  75.       mix-blend-mode: soft-light;
    76. 

  76.     }
    77. 

  77. 

  78.     /* Header */
    79. 

  79.     header {
    80. 

  80.       position: relative;
    81. 

  81.       overflow: hidden;
    82. 

  82.       border-bottom: 1px solid var(--border-light);
    83. 

  83.       box-shadow: var(--shadow-light-1);
    84. 

  84.       background: linear-gradient(120deg, var(--primary-light) 0%, #60a5fa 40%, var(--accent-light) 100%);
    85. 

  85.       color: #fff;
    86. 

  86.       padding: 2rem 0 1rem 0;
    87. 

  87.       text-align: center;
    88. 

  88.     }
    89. 

  89. 

  90.     body.dark header {
    91. 

  91.       border-bottom: 1px solid var(--border-dark);
    92. 

  92.       box-shadow: var(--shadow-dark-1);
    93. 

  93.       background:
    94. 

  94.         radial-gradient(120% 100% at 10% -10%, rgba(48,224,106,0.25), transparent 60%),
    95. 

  95.         radial-gradient(100% 120% at 110% 120%, rgba(255,122,24,0.15), transparent 65%),
    96. 

  96.         linear-gradient(120deg, #0d1220, #101a2e 60%, #0d1326);
    97. 

  97.     }
    98. 

  98. 

  99.     header::after {
    100. 

  100.       content: "";
    101. 

  101.       position: absolute;
    102. 

  102.       inset: 0;
    103. 

  103.       background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 40%);
    104. 

  104.       pointer-events: none;
    105. 

  105.       z-index: 1;
    106. 

  106.     }
    107. 

  107. 

  108.     /* Buttons - Fixed Positioning */
    109. 

  109.     .repo-link,
    110. 

  110.     .toggle-mode {
    111. 

  111.       position: absolute;
    112. 

  112.       top: 1.5rem;
    113. 

  113.       background: var(--button-bg-light);
    114. 

  114.       border: var(--button-border-light);
    115. 

  115.       box-shadow: var(--button-shadow-light);
    116. 

  116.       backdrop-filter: blur(6px) saturate(1.1);
    117. 

  117.       color: #fff;
    118. 

  118.       text-shadow: 0 1px 0 rgba(0,0,0,.25);
    119. 

  119.       border-radius: 2rem;
    120. 

  120.       padding: 0.5rem 1.2rem;
    121. 

  121.       font-size: 1rem;
    122. 

  122.       cursor: pointer;
    123. 

  123.       transition: all 0.3s ease, transform 0.2s ease;
    124. 

  124.       text-decoration: none;
    125. 

  125.       display: inline-block;
    126. 

  126.       z-index: 2; /* Above orbs */
    127. 

  127.     }
    128. 

  128. 

  129.     body.dark .repo-link,
    130. 

  130.     body.dark .toggle-mode {
    131. 

  131.       background: var(--button-bg-dark);
    132. 

  132.       border: var(--button-border-dark);
    133. 

  133.       box-shadow: var(--button-shadow-dark);
    134. 

  134.     }
    135. 

  135. 

  136.     .repo-link:hover,
    137. 

  137.     .toggle-mode:hover {
    138. 

  138.       transform: translateY(-2px);
    139. 

  139.       box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    140. 

  140.     }
    141. 

  141. 

  142.     body.dark .repo-link:hover,
    143. 

  143.     body.dark .toggle-mode:hover {
    144. 

  144.       box-shadow: 0 15px 30px rgba(0,0,0,0.4);
    145. 

  145.     }
    146. 

  146. 

  147.     .repo-link:active,
    148. 

  148.     .toggle-mode:active {
    149. 

  149.       transform: translateY(0);
    150. 

  150.     }
    151. 

  151. 

  152.     .repo-link {
    153. 

  153.       right: 12rem; /* Adjusted to avoid overlap */
    154. 

  154.     }
    155. 

  155. 

  156.     .toggle-mode {
    157. 

  157.       right: 2rem;
    158. 

  158.       padding: .5rem 2.6rem .5rem .9rem;
    159. 

  159.       border-radius: 999px;
    160. 

  160.       font-weight: 600;
    161. 

  161.     }
    162. 

  162. 

  163.     /* Toggle Switch Thumb */
    164. 

  164.     .toggle-mode::before {
    165. 

  165.       content: "";
    166. 

  166.       position: absolute;
    167. 

  167.       right: .4rem;
    168. 

  168.       top: 50%;
    169. 

  169.       width: 1.6rem;
    170. 

  170.       height: 1.6rem;
    171. 

  171.       border-radius: 50%;
    172. 

  172.       transform: translateY(-50%);
    173. 

  173.       background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.3) 40%, rgba(0,0,0,.02) 60%);
    174. 

  174.       box-shadow: 0 6px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.5);
    175. 

  175.       transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Smooth, bouncy animation */
    176. 

  176.     }
    177. 

  177. 

  178.     body.dark .toggle-mode {
    179. 

  179.       padding-left: 2.6rem;
    180. 

  180.       padding-right: .9rem;
    181. 

  181.     }
    182. 

  182. 

  183.     body.dark .toggle-mode::before {
    184. 

  184.       right: auto;
    185. 

  185.       left: .4rem;
    186. 

  186.       background: radial-gradient(circle at 35% 35%, #7cffb0, rgba(48,224,106,.35) 35%, rgba(0,0,0,.05) 60%);
    187. 

  187.     }
    188. 

  188. 

  189.     /* Header Content */
    190. 

  190.     header h1,
    191. 

  191.     header .marquee,
    192. 

  192.     header p {
    193. 

  193.       position: relative;
    194. 

  194.       z-index: 2;
    195. 

  195.     }
    196. 

  196. 

  197.     h1 {
    198. 

  198.       font-size: 2.5rem;
    199. 

  199.       margin: 0 0 0.5rem 0;
    200. 

  200.       letter-spacing: -1px;
    201. 

  201.     }
    202. 

  202. 

  203.     .marquee {
    204. 

  204.       font-size: 1.1rem;
    205. 

  205.       color: #fff;
    206. 

  206.       background: rgba(0,0,0,0.08);
    207. 

  207.       padding: 0.5rem 0;
    208. 

  208.       border-radius: 1rem;
    209. 

  209.       margin: 0 auto 1rem auto;
    210. 

  210.       max-width: 600px;
    211. 

  211.       overflow: hidden;
    212. 

  212.       white-space: nowrap;
    213. 

  213.       box-sizing: border-box;
    214. 

  214.       animation: marqueeX 16s linear infinite;
    215. 

  215.     }
    216. 

  216. 

  217.     @keyframes marqueeX {
    218. 

  218.       0% { transform: translateX(100%); }
    219. 

  219.       100% { transform: translateX(-100%); }
    220. 

  220.     }
    221. 

  221. 

  222.     /* Orbs */
    223. 

  223.     .hero-orbs {
    224. 

  224.       position: absolute;
    225. 

  225.       inset: 0;
    226. 

  226.       overflow: hidden;
    227. 

  227.       pointer-events: none;
    228. 

  228.       z-index: 1;
    229. 

  229.     }
    230. 

  230. 

  231.     .orb {
    232. 

  232.       position: absolute;
    233. 

  233.       border-radius: 50%;
    234. 

  234.       filter: blur(1px) saturate(1.1);
    235. 

  235.       transform: translateZ(0);
    236. 

  236.       transition: transform .2s ease-out;
    237. 

  237.     }
    238. 

  238. 

  239.     .orb-1 {
    240. 

  240.       width: 160px;
    241. 

  241.       height: 160px;
    242. 

  242.       background: radial-gradient(circle at 30% 30%, #fff, rgba(37,99,235,.5) 30%, transparent 60%);
    243. 

  243.       top: -30px;
    244. 

  244.       left: -30px;
    245. 

  245.       opacity: .5;
    246. 

  246.     }
    247. 

  247. 

  248.     .orb-2 {
    249. 

  249.       width: 220px;
    250. 

  250.       height: 220px;
    251. 

  251.       background: radial-gradient(circle at 60% 40%, #fff, rgba(48,224,106,.45) 35%, transparent 65%);
    252. 

  252.       bottom: -60px;
    253. 

  253.       right: -40px;
    254. 

  254.       opacity: .45;
    255. 

  255.     }
    256. 

  256. 

  257.     .orb-3 {
    258. 

  258.       width: 120px;
    259. 

  259.       height: 120px;
    260. 

  260.       background: radial-gradient(circle at 40% 60%, #fff, rgba(255,122,24,.45) 35%, transparent 65%);
    261. 

  261.       top: 30px;
    262. 

  262.       right: 20%;
    263. 

  263.       opacity: .35;
    264. 

  264.     }
    265. 

  265. 

  266.     body.dark .orb-1 { opacity: .35; }
    267. 

  267.     body.dark .orb-2 { opacity: .3; }
    268. 

  268.     body.dark .orb-3 { opacity: .25; }
    269. 

  269. 

  270.     /* Main Content */
    271. 

  271.     main {
    272. 

  272.       max-width: 900px;
    273. 

  273.       margin: 2rem auto;
    274. 

  274.       padding: 2rem;
    275. 

  275.       background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.7)) !important;
    276. 

  276.       border-radius: 1.25rem;
    277. 

  277.       border: 1px solid var(--border-light);
    278. 

  278.       box-shadow: var(--shadow-light-2);
    279. 

  279.       backdrop-filter: blur(8px) saturate(1.05);
    280. 

  280.       transition: background 0.5s ease, border 0.5s ease, box-shadow 0.5s ease;
    281. 

  281.     }
    282. 

  282. 

  283.     body.dark main {
    284. 

  284.       background:
    285. 

  285.         radial-gradient(200% 140% at 0% 0%, rgba(48,224,106,0.03), transparent 35%),
    286. 

  286.         radial-gradient(180% 140% at 100% 100%, rgba(255,122,24,0.03), transparent 40%),
    287. 

  287.         linear-gradient(180deg, rgba(12,19,35,.85), rgba(14,21,41,.85)) !important;
    288. 

  288.       border: 1px solid var(--border-dark);
    289. 

  289.       box-shadow: var(--shadow-dark-2);
    290. 

  290.       backdrop-filter: blur(10px) saturate(1.1);
    291. 

  291.     }
    292. 

  292. 

  293.     /* Sections */
    294. 

  294.     main section {
    295. 

  295.       background: var(--card-light);
    296. 

  296.       border: 1px solid var(--border-light);
    297. 

  297.       border-radius: 1rem;
    298. 

  298.       padding: 1.1rem 1rem 1.2rem;
    299. 

  299.       margin: 1.25rem 0;
    300. 

  300.       box-shadow: var(--shadow-light-1);
    301. 

  301.       transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    302. 

  302.     }
    303. 

  303. 

  304.     main section:hover {
    305. 

  305.       box-shadow: 0 12px 35px rgba(28, 35, 49, 0.14);
    306. 

  306.     }
    307. 

  307. 

  308.     body.dark main section {
    309. 

  309.       background: linear-gradient(180deg, rgba(18,26,44,.9), rgba(16,24,42,.9));
    310. 

  310.       border: 1px solid var(--border-dark);
    311. 

  311.       box-shadow: var(--shadow-dark-1);
    312. 

  312.     }
    313. 

  313. 

  314.     body.dark main section:hover {
    315. 

  315.       box-shadow: 0 26px 60px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.45);
    316. 

  316.     }
    317. 

  317. 

  318.     h2, h3 {
    319. 

  319.       color: var(--primary-light);
    320. 

  320.       margin-top: 2.5rem;
    321. 

  321.       margin-bottom: 1rem;
    322. 

  322.       font-weight: 700;
    323. 

  323.       letter-spacing: -0.2px;
    324. 

  324.       text-shadow: 0 1px 0 rgba(255,255,255,.35);
    325. 

  325.       transition: color 0.5s ease;
    326. 

  326.     }
    327. 

  327. 

  328.     body.dark h2, body.dark h3 {
    329. 

  329.       color: var(--primary-dark);
    330. 

  330.       text-shadow: 0 0 0 transparent;
    331. 

  331.     }
    332. 

  332. 

  333.     h3 {
    334. 

  334.       font-size: 1.3rem;
    335. 

  335.       margin-top: 2rem;
    336. 

  336.     }
    337. 

  337. 

  338.     p {
    339. 

  339.       line-height: 1.7;
    340. 

  340.       margin: 1rem 0;
    341. 

  341.     }
    342. 

  342. 

  343.     ul, ol {
    344. 

  344.       margin: 1rem 0 1rem 2rem;
    345. 

  345.     }
    346. 

  346. 

  347.     a {
    348. 

  348.       color: var(--primary-light);
    349. 

  349.       text-decoration: none;
    350. 

  350.       transition: color 0.2s;
    351. 

  351.     }
    352. 

  352. 

  353.     body.dark a {
    354. 

  354.       color: var(--primary-dark);
    355. 

  355.     }
    356. 

  356. 

  357.     a:hover {
    358. 

  358.       color: var(--accent-light);
    359. 

  359.       text-decoration: underline;
    360. 

  360.     }
    361. 

  361. 

  362.     body.dark a:hover {
    363. 

  363.       color: var(--accent-dark);
    364. 

  364.     }
    365. 

  365. 

  366.     /* Table of Contents */
    367. 

  367.     .toc {
    368. 

  368.       background: var(--code-bg-light);
    369. 

  369.       border-radius: 1rem;
    370. 

  370.       padding: 1.2rem 1.5rem;
    371. 

  371.       margin-bottom: 2rem;
    372. 

  372.       border: 1px solid var(--border-light);
    373. 

  373.       font-size: 1.05rem;
    374. 

  374.       box-shadow: 0 2px 8px 0 rgba(0,0,0,0.03);
    375. 

  375.       transition: background 0.5s ease, border 0.5s ease;
    376. 

  376.     }
    377. 

  377. 

  378.     body.dark .toc {
    379. 

  379.       background: var(--code-bg-dark);
    380. 

  380.       border: 1px solid var(--border-dark);
    381. 

  381.     }
    382. 

  382. 

  383.     .toc ol {
    384. 

  384.       margin: 0;
    385. 

  385.       padding-left: 1.2rem;
    386. 

  386.     }
    387. 

  387. 

  388.     .toc li {
    389. 

  389.       margin-bottom: 0.3rem;
    390. 

  390.     }
    391. 

  391. 

  392.     /* Code */
    393. 

  393.     code, pre {
    394. 

  394.       font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
    395. 

  395.       background: var(--code-bg-light);
    396. 

  396.       color: #2d2d2d;
    397. 

  397.       border-radius: 0.5rem;
    398. 

  398.       padding: 0.2em 0.5em;
    399. 

  399.       font-size: 1em;
    400. 

  400.       transition: background 0.5s ease, color 0.5s ease;
    401. 

  401.     }
    402. 

  402. 

  403.     pre {
    404. 

  404.       display: block;
    405. 

  405.       padding: 1em;
    406. 

  406.       margin: 1.2em 0;
    407. 

  407.       overflow-x: auto;
    408. 

  408.       background: var(--code-bg-light);
    409. 

  409.       color: #2d2d2d;
    410. 

  410.       border-left: 3px solid var(--primary-light);
    411. 

  411.       border: 1px solid var(--border-light);
    412. 

  412.       box-shadow: 0 12px 24px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.4);
    413. 

  413.     }
    414. 

  414. 

  415.     body.dark code, body.dark pre {
    416. 

  416.       background: linear-gradient(180deg, rgba(12,19,35,.6), rgba(12,19,35,.5));
    417. 

  417.       color: #f7f8fa;
    418. 

  418.       border-color: var(--border-dark);
    419. 

  419.       border-left: 3px solid var(--primary-dark);
    420. 

  420.       box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(48,224,106,.08) inset;
    421. 

  421.     }
    422. 

  422. 

  423.     /* Note */
    424. 

  424.     .note {
    425. 

  425.       background: linear-gradient(180deg, #ffedcc, #ffd39b);
    426. 

  426.       color: #4b2c00;
    427. 

  427.       padding: 0.7em 1em;
    428. 

  428.       border-radius: 0.7em;
    429. 

  429.       margin: 1em 0;
    430. 

  430.       font-size: 1.05em;
    431. 

  431.       font-weight: 500;
    432. 

  432.       display: inline-block;
    433. 

  433.       border: 1px solid #f8c887;
    434. 

  434.       box-shadow: 0 10px 22px rgba(255,149,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
    435. 

  435.       transition: background 0.5s ease, color 0.5s ease, border 0.5s ease, box-shadow 0.5s ease;
    436. 

  436.     }
    437. 

  437. 

  438.     body.dark .note {
    439. 

  439.       background: linear-gradient(180deg, rgba(255,122,24,.18), rgba(255,122,24,.12));
    440. 

  440.       color: #ffe9d5;
    441. 

  441.       border: 1px solid rgba(255,122,24,.35);
    442. 

  442.       box-shadow: 0 10px 22px rgba(255,122,24,.22), inset 0 1px 0 rgba(255,255,255,.06);
    443. 

  443.     }
    444. 

  444. 

  445.     /* Table */
    446. 

  446.     .table-wrap {
    447. 

  447.       overflow-x: auto;
    448. 

  448.       margin: 2em 0;
    449. 

  449.     }
    450. 

  450. 

  451.     table {
    452. 

  452.       width: 100%;
    453. 

  453.       border-collapse: collapse;
    454. 

  454.       margin: 1.5em 0;
    455. 

  455.       font-size: 1em;
    456. 

  456.       background: var(--code-bg-light);
    457. 

  457.       border-radius: 1em;
    458. 

  458.       overflow: hidden;
    459. 

  459.       box-shadow: 0 8px 24px rgba(0,0,0,.06);
    460. 

  460.       transition: background 0.5s ease, box-shadow 0.5s ease;
    461. 

  461.     }
    462. 

  462. 

  463.     body.dark table {
    464. 

  464.       background: var(--code-bg-dark);
    465. 

  465.       box-shadow: 0 16px 40px rgba(0,0,0,.35);
    466. 

  466.     }
    467. 

  467. 

  468.     th, td {
    469. 

  469.       padding: 0.7em 1em;
    470. 

  470.       border-bottom: 1px solid var(--border-light);
    471. 

  471.       text-align: left;
    472. 

  472.       transition: border 0.5s ease;
    473. 

  473.     }
    474. 

  474. 

  475.     body.dark th, body.dark td {
    476. 

  476.       border-bottom: 1px solid var(--border-dark);
    477. 

  477.     }
    478. 

  478. 

  479.     th {
    480. 

  480.       background: var(--primary-light);
    481. 

  481.       color: #fff;
    482. 

  482.       font-weight: 700;
    483. 

  483.     }
    484. 

  484. 

  485.     body.dark th {
    486. 

  486.       background: var(--primary-dark);
    487. 

  487.     }
    488. 

  488. 

  489.     /* Kbd */
    490. 

  490.     kbd {
    491. 

  491.       background: var(--kbd-bg-light);
    492. 

  492.       color: var(--kbd-text-light);
    493. 

  493.       border-radius: 0.3em;
    494. 

  494.       padding: 0.2em 0.5em;
    495. 

  495.       font-size: 1em;
    496. 

  496.       font-family: inherit;
    497. 

  497.       border: 1px solid var(--border-light);
    498. 

  498.       box-shadow: 0 2px 4px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.5);
    499. 

  499.       margin: 0 0.1em;
    500. 

  500.       display: inline-block;
    501. 

  501.       transition: background 0.5s ease, color 0.5s ease, border 0.5s ease, box-shadow 0.5s ease;
    502. 

  502.     }
    503. 

  503. 

  504.     body.dark kbd {
    505. 

  505.       background: var(--kbd-bg-dark);
    506. 

  506.       color: var(--kbd-text-dark);
    507. 

  507.       border: 1px solid var(--border-dark);
    508. 

  508.       box-shadow: 0 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
    509. 

  509.     }
    510. 

  510. 

  511.     /* Back to Top */
    512. 

  512.     .back-to-top {
    513. 

  513.       display: inline-block;
    514. 

  514.       margin-top: 1.5em;
    515. 

  515.       font-size: 0.95em;
    516. 

  516.       color: var(--primary-light);
    517. 

  517.       text-decoration: none;
    518. 

  518.       border-bottom: 1px dashed var(--primary-light);
    519. 

  519.       transition: color 0.2s, border 0.2s;
    520. 

  520.     }
    521. 

  521. 

  522.     body.dark .back-to-top {
    523. 

  523.       color: var(--primary-dark);
    524. 

  524.       border-bottom: 1px dashed var(--primary-dark);
    525. 

  525.     }
    526. 

  526. 

  527.     .back-to-top:hover {
    528. 

  528.       color: var(--accent-light);
    529. 

  529.       border-bottom: 1px dashed var(--accent-light);
    530. 

  530.     }
    531. 

  531. 

  532.     body.dark .back-to-top:hover {
    533. 

  533.       color: var(--accent-dark);
    534. 

  534.       border-bottom: 1px dashed var(--accent-dark);
    535. 

  535.     }
    536. 

  536. 

  537.     /* Footer */
    538. 

  538.     footer {
    539. 

  539.       text-align: center;
    540. 

  540.       padding: 2rem 0;
    541. 

  541.       margin-top: 2rem;
    542. 

  542.     }
    543. 

  543. 

  544.     .love-btn {
    545. 

  545.       background: linear-gradient(90deg, var(--primary-light) 0%, var(--accent-light) 100%);
    546. 

  546.       color: white;
    547. 

  547.       padding: 0.8rem 2rem;
    548. 

  548.       border-radius: 2rem;
    549. 

  549.       text-decoration: none;
    550. 

  550.       font-weight: 600;
    551. 

  551.       box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    552. 

  552.       transition: transform 0.2s, box-shadow 0.2s, background 0.5s ease;
    553. 

  553.       display: inline-block;
    554. 

  554.     }
    555. 

  555. 

  556.     body.dark .love-btn {
    557. 

  557.       background: linear-gradient(90deg, var(--primary-dark) 0%, var(--accent-dark) 100%);
    558. 

  558.     }
    559. 

  559. 

  560.     .love-btn:hover {
    561. 

  561.       transform: translateY(-2px);
    562. 

  562.       box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    563. 

  563.       text-decoration: none;
    564. 

  564.     }
    565. 

  565. 

  566.     /* Theme Indicator */
    567. 

  567.     .theme-indicator {
    568. 

  568.       position: fixed;
    569. 

  569.       bottom: 10px;
    570. 

  570.       right: 10px;
    571. 

  571.       padding: 5px 10px;
    572. 

  572.       border-radius: 3px;
    573. 

  573.       font-size: 12px;
    574. 

  574.       font-family: monospace;
    575. 

  575.       z-index: 1000;
    576. 

  576.       background: var(--primary-light);
    577. 

  577.       color: white;
    578. 

  578.       box-shadow: 0 8px 20px rgba(0,0,0,.15);
    579. 

  579.       transition: background 0.5s ease, color 0.5s ease;
    580. 

  580.     }
    581. 

  581. 

  582.     body.dark .theme-indicator {
    583. 

  583.       background: var(--primary-dark);
    584. 

  584.       color: #0a0a0a;
    585. 

  585.     }
    586. 

  586. 

  587.     /* Scrollbar */
    588. 

  588.     *::-webkit-scrollbar {
    589. 

  589.       height: 10px;
    590. 

  590.       width: 10px;
    591. 

  591.     }
    592. 

  592. 

  593.     *::-webkit-scrollbar-thumb {
    594. 

  594.       background: linear-gradient(180deg, var(--primary-light), var(--accent-light));
    595. 

  595.       border-radius: 999px;
    596. 

  596.       transition: background 0.5s ease;
    597. 

  597.     }
    598. 

  598. 

  599.     body.dark *::-webkit-scrollbar-thumb {
    600. 

  600.       background: linear-gradient(180deg, var(--primary-dark), var(--accent-dark));
    601. 

  601.     }
    602. 

  602. 

  603.     /* Responsive */
    604. 

  604.     @media (max-width: 700px) {
    605. 

  605.       main {
    606. 

  606.         padding: 1rem;
    607. 

  607.         margin: 1rem;
    608. 

  608.       }
    609. 

  609. 

  610.       .toc {
    611. 

  611.         padding: 1rem;
    612. 

  612.       }
    613. 

  613. 

  614.       header {
    615. 

  615.         padding: 1.5rem 0 0.7rem 0;
    616. 

  616.       }
    617. 

  617. 

  618.       /* Stack buttons on mobile */
    619. 

  619.       .repo-link,
    620. 

  620.       .toggle-mode {
    621. 

  621.         position: static;
    622. 

  622.         display: block;
    623. 

  623.         margin: 0.5rem auto;
    624. 

  624.         width: fit-content;
    625. 

  625.       }
    626. 

  626. 

  627.       h1 {
    628. 

  628.         font-size: 2rem;
    629. 

  629.       }
    630. 

  630. 

  631.       .marquee {
    632. 

  632.         font-size: 1rem;
    633. 

  633.         max-width: 90%;
    634. 

  634.       }
    635. 

  635.     }
    636. 

  636. 

  637.     /* Accessibility */
    638. 

  638.     @media (prefers-reduced-motion: reduce) {
    639. 

  639.       .marquee,
    640. 

  640.       .orb,
    641. 

  641.       main section,
    642. 

  642.       .toggle-mode::before,
    643. 

  643.       body,
    644. 

  644.       a,
    645. 

  645.       code,
    646. 

  646.       pre,
    647. 

  647.       .note,
    648. 

  648.       table,
    649. 

  649.       kbd,
    650. 

  650.       .back-to-top,
    651. 

  651.       .love-btn,
    652. 

  652.       .theme-indicator,
    653. 

  653.       *::-webkit-scrollbar-thumb {
    654. 

  654.         animation: none;
    655. 

  655.         transition: none;
    656. 

  656.         transform: none;
    657. 

  657.       }
    658. 

  658.     }
    659. 

  659.   </style>
    660. 

  660. </head>
    661. 

  661. <body>
    662. 

  662.   <header>
    663. 

  663.     <a href="https://gitgog.alwaysdata.net/parv.ashwani/ByeByeMouse.git"
    664. 

  664.        class="repo-link"
    665. 

  665.        target="_blank">๐Ÿ“ Repo Link</a>
    666. 

  666.     <button class="toggle-mode" id="toggleModeBtn" aria-label="Toggle light/dark mode">
    667. 

  667.       <span class="button-text">๐ŸŒ™ Dark</span>
    668. 

  668.     </button>
    669. 

  669.     <h1>๐Ÿญ Bye Bye Mouse</h1>
    670. 

  670.     <div class="marquee">Because real power users don't double-clickโ€”they type :)</div>
    671. 

  671.     <div class="hero-orbs" aria-hidden="true">
    672. 

  672.       <span class="orb orb-1"></span>
    673. 

  673.       <span class="orb orb-2"></span>
    674. 

  674.       <span class="orb orb-3"></span>
    675. 

  675.     </div>
    676. 

  676.     <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>
    677. 

  677.   </header>
    678. 

  678.   <main>
    679. 

  679.     <section class="toc" id="quick-links">
    680. 

  680.       <h2 style="margin-top:0;">Quick Links</h2>
    681. 

  681.       <ol>
    682. 

  682.         <li><a href="#copy-a-file">copy a file</a></li>
    683. 

  683.         <li><a href="#duplicate-a-file">duplicate a file</a></li>
    684. 

  684.         <li><a href="#copy-a-directory">copy a directory</a></li>
    685. 

  685.         <li><a href="#duplicate-a-directory">duplicate a directory</a></li>
    686. 

  686.         <li><a href="#move-a-file">move a file</a></li>
    687. 

  687.         <li><a href="#rename-a-file">rename a file</a></li>
    688. 

  688.         <li><a href="#move-a-directory">move a directory</a></li>
    689. 

  689.         <li><a href="#rename-a-directory">rename a directory</a></li>
    690. 

  690.         <li><a href="#merge-directories">merge directories</a></li>
    691. 

  691.         <li><a href="#create-a-new-file">create a new file</a></li>
    692. 

  692.         <li><a href="#create-a-new-directory">create a new directory</a></li>
    693. 

  693.         <li><a href="#show-filedirectory-size">show file/directory size</a></li>
    694. 

  694.         <li><a href="#show-filedirectory-info">show file/directory info</a></li>
    695. 

  695.         <li><a href="#open-a-file-with-the-default-program">open a file with the default program</a></li>
    696. 

  696.         <li><a href="#open-a-file-in-any-application">open a file in any application</a></li>
    697. 

  697.         <li><a href="#zip-a-directory">zip a directory</a></li>
    698. 

  698.         <li><a href="#unzip-a-directory">unzip a directory</a></li>
    699. 

  699.         <li><a href="#peek-files-in-a-zip-file">peek files in a zip file</a></li>
    700. 

  700.         <li><a href="#remove-a-file">remove a file</a></li>
    701. 

  701.         <li><a href="#remove-a-directory">remove a directory</a></li>
    702. 

  702.         <li><a href="#remove-all-files-of-certain-criteria">remove all files of certain criteria</a></li>
    703. 

  703.         <li><a href="#list-directory-contents">list directory contents</a></li>
    704. 

  704.         <li><a href="#tree-view-a-directory-and-its-subdirectories">tree view a directory and its subdirectories</a></li>
    705. 

  705.         <li><a href="#find-a-stale-file">find a stale file</a></li>
    706. 

  706.         <li><a href="#show-a-calendar">show a calendar</a></li>
    707. 

  707.         <li><a href="#find-a-future-date">find a future date</a></li>
    708. 

  708.         <li><a href="#use-a-calculator">use a calculator</a></li>
    709. 

  709.         <li><a href="#force-quit-a-program">force quit a program</a></li>
    710. 

  710.         <li><a href="#check-server-response">check server response</a></li>
    711. 

  711.         <li><a href="#view-content-of-a-file">view content of a file</a></li>
    712. 

  712.         <li><a href="#search-for-a-text-in-a-file">search for a text in a file</a></li>
    713. 

  713.         <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>
    714. 

  714.         <li><a href="#view-an-image">view an image</a></li>
    715. 

  715.         <li><a href="#show-disk-size">show disk size</a></li>
    716. 

  716.         <li><a href="#check-cpu-usage-processes-and-ram">check cpu usage, processes and RAM</a></li>
    717. 

  717.         <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>
    718. 

  718.         <li><a href="#poweroff-or-reboot-your-computer">poweroff or reboot your computer</a></li>
    719. 

  719.         <li><a href="#locate-usb-drives">locate USB drives</a></li>
    720. 

  720.         <li><a href="#unmount-usb-drives">unmount USB drives</a></li>
    721. 

  721.         <li><a href="#format-usb-drives">format USB drives</a></li>
    722. 

  722.         <li><a href="#check-usb-format">check USB format</a></li>
    723. 

  723.         <li><a href="#run-command-on-all-files-of-a-directory">run command on all files of a directory</a></li>
    724. 

  724.         <li><a href="#check-network-connectivity-to-a-remote-address-and-port">check network connectivity to a remote address and port</a></li>
    725. 

  725.         <li><a href="#check-dns-config-of-a-domain">check DNS config of a domain</a></li>
    726. 

  726.         <li><a href="#check-the-ownership-and-registration-of-a-domain">check the ownership and registration of a domain</a></li>
    727. 

  727.         <li><a href="#hotkeys">Hotkeys</a></li>
    728. 

  728.         <li><a href="#i-cant-remember-these-cryptic-commands">I can't remember these cryptic commands</a></li>
    729. 

  729.       </ol>
    730. 

  730.     </section>
    731. 

  731.     <section id="copy-a-file">
    732. 

  732.       <h3>copy a file</h3>
    733. 

  733.       <div class="note">STOP DRAG AND DROPPING A FILE, OR CMD/CTRL + C, CMD/CTRL + V A FILE ๐Ÿ‘Ž</div>
    734. 

  734.       <p>Copy <code>readme.txt</code> to the <code>documents</code> directory</p>
    735. 

  735.       <pre><code>$ cp readme.txt documents/</code></pre>
    736. 

  736.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    737. 

  737.     </section>
    738. 

  738.     <section id="duplicate-a-file">
    739. 

  739.       <h3>duplicate a file</h3>
    740. 

  740.       <div class="note">STOP RIGHT CLICKING AND DUPLICATE A FILE ๐Ÿ‘Ž</div>
    741. 

  741.       <pre><code>$ cp readme.txt readme.bak.txt</code></pre>
    742. 

  742.       <p>More advanced:</p>
    743. 

  743.       <pre><code>$ cp readme{,.bak}.txt
    744. 

  744. # Note: learn how the {} works with touch foo{1,2,3}.txt and see what happens.</code></pre>
    745. 

  745.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    746. 

  746.     </section>
    747. 

  747.     <section id="copy-a-directory">
    748. 

  748.       <h3>copy a directory</h3>
    749. 

  749.       <div class="note">STOP DRAG AND DROPPING A DIRECTORY, OR CMD/CTRL + C, CMD/CTRL + V A DIRECTORY ๐Ÿ‘Ž</div>
    750. 

  750.       <p>Copy <code>myMusic</code> directory to the <code>myMedia</code> directory</p>
    751. 

  751.       <pre><code>$ cp -a myMusic myMedia/
    752. 

  752. # or
    753. 

  753. $ cp -a myMusic/ myMedia/myMusic/</code></pre>
    754. 

  754.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    755. 

  755.     </section>
    756. 

  756.     <section id="duplicate-a-directory">
    757. 

  757.       <h3>duplicate a directory</h3>
    758. 

  758.       <div class="note">STOP RIGHT CLICKING AND DUPLICATE A DIRECTORY ๐Ÿ‘Ž</div>
    759. 

  759.       <pre><code>$ cp -a myMusic/ myMedia/
    760. 

  760. # or if `myMedia` folder doesn't exist
    761. 

  761. $ cp -a myMusic myMedia/</code></pre>
    762. 

  762.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    763. 

  763.     </section>
    764. 

  764.     <section id="move-a-file">
    765. 

  765.       <h3>move a file</h3>
    766. 

  766.       <div class="note">STOP DRAG AND DROPPING A FILE, OR CMD/CTRL + X, CMD/CTRL + V A FILE ๐Ÿ‘Ž</div>
    767. 

  767.       <pre><code>$ mv readme.txt documents/</code></pre>
    768. 

  768.       <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>
    769. 

  769.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    770. 

  770.     </section>
    771. 

  771.     <section id="rename-a-file">
    772. 

  772.       <h3>rename a file</h3>
    773. 

  773.       <div class="note">STOP RIGHT CLICKING AND RENAME A FILE ๐Ÿ‘Ž</div>
    774. 

  774.       <pre><code>$ mv readme.txt README.md</code></pre>
    775. 

  775.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    776. 

  776.     </section>
    777. 

  777.     <section id="move-a-directory">
    778. 

  778.       <h3>move a directory</h3>
    779. 

  779.       <div class="note">STOP DRAG AND DROPPING A DIRECTORY, OR CMD/CTRL + X, CMD/CTRL + V A DIRECTORY ๐Ÿ‘Ž</div>
    780. 

  780.       <pre><code>$ mv myMedia myMusic/
    781. 

  781. # or
    782. 

  782. $ mv myMedia/ myMusic/myMedia</code></pre>
    783. 

  783.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    784. 

  784.     </section>
    785. 

  785.     <section id="rename-a-directory">
    786. 

  786.       <h3>rename a directory</h3>
    787. 

  787.       <div class="note">STOP RIGHT CLICKING AND RENAME A DIRECTORY ๐Ÿ‘Ž</div>
    788. 

  788.       <pre><code>$ mv myMedia/ myMusic/</code></pre>
    789. 

  789.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    790. 

  790.     </section>
    791. 

  791.     <section id="merge-directories">
    792. 

  792.       <h3>merge directories</h3>
    793. 

  793.       <div class="note">STOP DRAG AND DROPPING TO MERGE DIRECTORIES ๐Ÿ‘Ž</div>
    794. 

  794.       <pre><code>$ rsync -a /images/ /images2/	# note: may over-write files with the same name, so be careful!</code></pre>
    795. 

  795.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    796. 

  796.     </section>
    797. 

  797.     <section id="create-a-new-file">
    798. 

  798.       <h3>create a new file</h3>
    799. 

  799.       <div class="note">STOP RIGHT CLICKING AND CREATE A NEW FILE ๐Ÿ‘Ž</div>
    800. 

  800.       <pre><code>$ touch 'new file'    # updates the file's access and modification timestamp if it already exists
    801. 

  801. # or
    802. 

  802. $ > 'new file'        # note: erases the content if it already exists</code></pre>
    803. 

  803.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    804. 

  804.     </section>
    805. 

  805.     <section id="create-a-new-directory">
    806. 

  806.       <h3>create a new directory</h3>
    807. 

  807.       <div class="note">STOP RIGHT CLICKING AND CREATE A NEW DIRECTORY ๐Ÿ‘Ž</div>
    808. 

  808.       <pre><code>$ mkdir 'untitled folder'
    809. 

  809. # or
    810. 

  810. $ mkdir -p 'path/may/not/exist/untitled folder'</code></pre>
    811. 

  811.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    812. 

  812.     </section>
    813. 

  813.     <section id="show-filedirectory-size">
    814. 

  814.       <h3>show file/directory size</h3>
    815. 

  815.       <div class="note">STOP RIGHT CLICKING AND SHOW FILE/directory INFO ๐Ÿ‘Ž</div>
    816. 

  816.       <pre><code>$ du -sh node_modules/</code></pre>
    817. 

  817.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    818. 

  818.     </section>
    819. 

  819.     <section id="show-filedirectory-info">
    820. 

  820.       <h3>show file/directory info</h3>
    821. 

  821.       <div class="note">STOP RIGHT CLICKING AND SHOW FILE/DIRECTORY INFO ๐Ÿ‘Ž</div>
    822. 

  822.       <pre><code>$ stat -x readme.md   # on macOS
    823. 

  823. $ stat readme.md      # on Linux</code></pre>
    824. 

  824.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    825. 

  825.     </section>
    826. 

  826.     <section id="open-a-file-with-the-default-program">
    827. 

  827.       <h3>open a file with the default program</h3>
    828. 

  828.       <div class="note">STOP DOUBLE CLICKING ON A FILE ๐Ÿ‘Ž</div>
    829. 

  829.       <pre><code>$ xdg-open file   # on Linux
    830. 

  830. $ open file       # on MacOS
    831. 

  831. $ start file      # on Windows</code></pre>
    832. 

  832.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    833. 

  833.     </section>
    834. 

  834.     <section id="open-a-file-in-any-application">
    835. 

  835.       <h3>open a file in any application</h3>
    836. 

  836.       <div class="note">STOP RIGHT CLICKING AND OPEN WITH ๐Ÿ‘Ž</div>
    837. 

  837.       <pre><code>$ open -a appName file</code></pre>
    838. 

  838.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    839. 

  839.     </section>
    840. 

  840.     <section id="zip-a-directory">
    841. 

  841.       <h3>zip a directory</h3>
    842. 

  842.       <div class="note">STOP RIGHT CLICKING AND COMPRESS DIRECTORY ๐Ÿ‘Ž</div>
    843. 

  843.       <pre><code>$ zip -r archive_name.zip folder_to_compress</code></pre>
    844. 

  844.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    845. 

  845.     </section>
    846. 

  846.     <section id="unzip-a-directory">
    847. 

  847.       <h3>unzip a directory</h3>
    848. 

  848.       <div class="note">STOP RIGHT CLICKING AND UNCOMPRESS DIRECTORY ๐Ÿ‘Ž</div>
    849. 

  849.       <pre><code>$ unzip archive_name.zip</code></pre>
    850. 

  850.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    851. 

  851.     </section>
    852. 

  852.     <section id="peek-files-in-a-zip-file">
    853. 

  853.       <h3>peek files in a zip file</h3>
    854. 

  854.       <div class="note">STOP USING WinRAR ๐Ÿ‘Ž</div>
    855. 

  855.       <pre><code>$ zipinfo archive_name.zip
    856. 

  856. # or
    857. 

  857. $ unzip -l archive_name.zip</code></pre>
    858. 

  858.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    859. 

  859.     </section>
    860. 

  860.     <section id="remove-a-file">
    861. 

  861.       <h3>remove a file</h3>
    862. 

  862.       <div class="note">STOP RIGHT CLICKING AND DELETE A FILE PERMANENTLY ๐Ÿ‘Ž</div>
    863. 

  863.       <pre><code>$ rm my_useless_file</code></pre>
    864. 

  864.       <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>
    865. 

  865.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    866. 

  866.     </section>
    867. 

  867.     <section id="remove-a-directory">
    868. 

  868.       <h3>remove a directory</h3>
    869. 

  869.       <div class="note">STOP RIGHT CLICKING AND DELETE A DIRECTORY PERMANENTLY ๐Ÿ‘Ž</div>
    870. 

  870.       <pre><code>$ rm -r my_useless_folder</code></pre>
    871. 

  871.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    872. 

  872.     </section>
    873. 

  873.     <section id="remove-all-files-of-certain-criteria">
    874. 

  874.       <h3>remove all files of certain criteria</h3>
    875. 

  875.       <pre><code>$ find . -name "*.bak" -type f -delete</code></pre>
    876. 

  876.       <p><b>IMPORTANT</b>: run <code>find . -name "*.bak" -type f</code> first to see exactly which files you will remove.</p>
    877. 

  877.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    878. 

  878.     </section>
    879. 

  879.     <section id="list-directory-contents">
    880. 

  880.       <h3>list directory contents</h3>
    881. 

  881.       <div class="note">STOP OPENING YOUR FINDER OR FILE EXPLORER ๐Ÿ‘Ž</div>
    882. 

  882.       <pre><code>$ ls my_folder        # Simple
    883. 

  883. $ ls -la my_folder    # -l: show in list format. -a: show all files, including hidden. -la combines those options.
    884. 

  884. $ ls -ltrha my_folder # -r: reverse output. -t: sort by time (modified). -h: output human-readable sizes.</code></pre>
    885. 

  885.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    886. 

  886.     </section>
    887. 

  887.     <section id="tree-view-a-directory-and-its-subdirectories">
    888. 

  888.       <h3>tree view a directory and its subdirectories</h3>
    889. 

  889.       <div class="note">STOP OPENING YOUR FINDER OR FILE EXPLORER ๐Ÿ‘Ž</div>
    890. 

  890.       <pre><code>$ tree                                                        # on Linux
    891. 

  891. $ find . -print | sed -e 's;[^/]*/;|____;g;s;____|; |;g'      # on MacOS
    892. 

  892. # Note: install homebrew (https://brew.sh) to be able to use (some) Linux utilities such as tree.
    893. 

  893. # brew install tree</code></pre>
    894. 

  894.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    895. 

  895.     </section>
    896. 

  896.     <section id="find-a-stale-file">
    897. 

  897.       <h3>find a stale file</h3>
    898. 

  898.       <div class="note">STOP USING YOUR FILE EXPLORER TO FIND A FILE ๐Ÿ‘Ž</div>
    899. 

  899.       <p>Find all files modified more than 5 days ago</p>
    900. 

  900.       <pre><code>$ find my_folder -mtime +5</code></pre>
    901. 

  901.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    902. 

  902.     </section>
    903. 

  903.     <section id="show-a-calendar">
    904. 

  904.       <h3>show a calendar</h3>
    905. 

  905.       <div class="note">STOP LOOKING UP WHAT THIS MONTH LOOKS LIKE BY CALENDAR WIDGETS ๐Ÿ‘Ž</div>
    906. 

  906.       <p>Display a text calendar</p>
    907. 

  907.       <pre><code>$ cal</code></pre>
    908. 

  908.       <p>Display selected month and year calendar</p>
    909. 

  909.       <pre><code>$ cal 11 2018</code></pre>
    910. 

  910.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    911. 

  911.     </section>
    912. 

  912.     <section id="find-a-future-date">
    913. 

  913.       <h3>find a future date</h3>
    914. 

  914.       <div class="note">STOP USING WEBAPPS TO CALCULATE FUTURE DATES ๐Ÿ‘Ž</div>
    915. 

  915.       <p>What is today's date?</p>
    916. 

  916.       <pre><code>$ date +%m/%d/%Y</code></pre>
    917. 

  917.       <p>What about a week from now?</p>
    918. 

  918.       <pre><code>$ date -d "+7 days"                                           # on Linux
    919. 

  919. $ date -j -v+7d                                               # on MacOS</code></pre>
    920. 

  920.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    921. 

  921.     </section>
    922. 

  922.     <section id="use-a-calculator">
    923. 

  923.       <h3>use a calculator</h3>
    924. 

  924.       <div class="note">STOP USING CALCULATOR WIDGET ๐Ÿ‘Ž</div>
    925. 

  925.       <pre><code>$ bc -l</code></pre>
    926. 

  926.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    927. 

  927.     </section>
    928. 

  928.     <section id="force-quit-a-program">
    929. 

  929.       <h3>force quit a program</h3>
    930. 

  930.       <div class="note">STOP CTRL + ALT + DELETE and choose the program to kill ๐Ÿ‘Ž</div>
    931. 

  931.       <pre><code>$ killall -9 program_name</code></pre>
    932. 

  932.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    933. 

  933.     </section>
    934. 

  934.     <section id="check-server-response">
    935. 

  935.       <h3>check server response</h3>
    936. 

  936.       <div class="note">STOP OPENING A BROWSER ๐Ÿ‘Ž</div>
    937. 

  937.       <pre><code>$ curl -i rbtreevi.web.app
    938. 

  938. # curl's -i (--include) option includes HTTP response headers in its output.</code></pre>
    939. 

  939.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    940. 

  940.     </section>
    941. 

  941.     <section id="view-content-of-a-file">
    942. 

  942.       <h3>view content of a file</h3>
    943. 

  943.       <div class="note">STOP DOUBLE CLICKING A FILE ๐Ÿ‘Ž</div>
    944. 

  944.       <pre><code>$ cat apps/settings.py
    945. 

  945. # 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.
    946. 

  946. $ less apps/settings.py</code></pre>
    947. 

  947.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    948. 

  948.     </section>
    949. 

  949.     <section id="search-for-a-text-in-a-file">
    950. 

  950.       <h3>search for a text in a file</h3>
    951. 

  951.       <div class="note">STOP CMD/CTRL + F IN A FILE ๐Ÿ‘Ž</div>
    952. 

  952.       <pre><code>$ grep -i "Query" file.txt</code></pre>
    953. 

  953.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    954. 

  954.     </section>
    955. 

  955.     <section id="search-in-all-files-in-current-working-directory-quickly-entire-disk-in-less-than-15-minutes">
    956. 

  956.       <h3>search in all files in current working directory, quickly (entire disk in less than 15 minutes)</h3>
    957. 

  957.       <div class="note">STOP CMD/CTRL + F IN A DIRECTORY ๐Ÿ‘Ž</div>
    958. 

  958.       <pre><code>$ ripgrep -i "Query"
    959. 

  959. # brew install ripgrep</code></pre>
    960. 

  960.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    961. 

  961.     </section>
    962. 

  962.     <section id="view-an-image">
    963. 

  963.       <h3>view an image</h3>
    964. 

  964.       <div class="note">STOP USING PREVIEW ๐Ÿ‘Ž</div>
    965. 

  965.       <pre><code>$ imgcat image.png
    966. 

  966. # Note: requires iTerm2 terminal.</code></pre>
    967. 

  967.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    968. 

  968.     </section>
    969. 

  969.     <section id="show-disk-size">
    970. 

  970.       <h3>show disk size</h3>
    971. 

  971.       <div class="note">STOP RIGHT CLICKING DISK ICON OR OPENING DISK UTILITY ๐Ÿ‘Ž</div>
    972. 

  972.       <pre><code>$ df -h</code></pre>
    973. 

  973.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    974. 

  974.     </section>
    975. 

  975.     <section id="check-cpu-usage-processes-and-ram">
    976. 

  976.       <h3>check cpu usage, processes and RAM</h3>
    977. 

  977.       <div class="note">STOP OPENING YOUR ACTIVITY MONITOR OR TASK MANAGER ๐Ÿ‘Ž</div>
    978. 

  978.       <pre><code>$ top</code></pre>
    979. 

  979.       <p>if you want some more details:</p>
    980. 

  980.       <pre><code>$ htop</code></pre>
    981. 

  981.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    982. 

  982.     </section>
    983. 

  983.     <section id="know-whether-your-computer-is-under-load-and-whether-its-due-to-memory-or-cpu">
    984. 

  984.       <h3>know whether your computer is under load, and whether it's due to memory or CPU</h3>
    985. 

  985.       <pre><code>$ glances
    986. 

  986. # brew install glances
    987. 

  987. # pip install --user 'glances[all]'</code></pre>
    988. 

  988.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    989. 

  989.     </section>
    990. 

  990.     <section id="poweroff-or-reboot-your-computer">
    991. 

  991.       <h3>poweroff or reboot your computer</h3>
    992. 

  992.       <p>This can be useful when you're patching a server that is accessed via SSH and you don't have a GUI.</p>
    993. 

  993.       <pre><code># poweroff
    994. 

  994. $ sudo shutdown -h now
    995. 

  995. # reboot
    996. 

  996. $ sudo shutdown -r now</code></pre>
    997. 

  997.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    998. 

  998.     </section>
    999. 

  999.     <section id="locate-usb-drives">
    1000. 

  1000.       <h3>locate USB drives</h3>
    1001. 

  1001.       <pre><code>$ df</code></pre>
    1002. 

  1002.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    1003. 

  1003.     </section>
    1004. 

  1004.     <section id="unmount-usb-drives">
    1005. 

  1005.       <h3>unmount USB drives</h3>
    1006. 

  1006.       <pre><code>$ sudo umount /dev/sdb1</code></pre>
    1007. 

  1007.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    1008. 

  1008.     </section>
    1009. 

  1009.     <section id="format-usb-drives">
    1010. 

  1010.       <h3>format USB drives</h3>
    1011. 

  1011.       <pre><code># FAT32
    1012. 

  1012. $ sudo mkfs.vfat /dev/sdb1
    1013. 

  1013. # NTFS
    1014. 

  1014. $ sudo mkfs.ntfs /dev/sdb1
    1015. 

  1015. # exFAT
    1016. 

  1016. $ sudo mkfs.exfat /dev/sdb1</code></pre>
    1017. 

  1017.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    1018. 

  1018.     </section>
    1019. 

  1019.     <section id="check-usb-format">
    1020. 

  1020.       <h3>check USB format</h3>
    1021. 

  1021.       <pre><code>$ sudo fsck /dev/sdb1</code></pre>
    1022. 

  1022.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    1023. 

  1023.     </section>
    1024. 

  1024.     <section id="run-command-on-all-files-of-a-directory">
    1025. 

  1025.       <h3>run command on all files of a directory</h3>
    1026. 

  1026.       <div class="note">STOP CLICKING THE FILES ONE BY ONE ๐Ÿ‘Ž</div>
    1027. 

  1027.       <pre><code>$ for FILE in *; do echo $FILE; done</code></pre>
    1028. 

  1028.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    1029. 

  1029.     </section>
    1030. 

  1030.     <section id="check-network-connectivity-to-a-remote-address-and-port">
    1031. 

  1031.       <h3>check network connectivity to a remote address and port</h3>
    1032. 

  1032.       <div class="note">STOP USING NETWORK UTILITY</div>
    1033. 

  1033.       <pre><code>$ nc -vz www.google.com 443
    1034. 

  1034. $ nc -vz 1.1.1.1 53</code></pre>
    1035. 

  1035.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    1036. 

  1036.     </section>
    1037. 

  1037.     <section id="check-dns-config-of-a-domain">
    1038. 

  1038.       <h3>check DNS config of a domain</h3>
    1039. 

  1039.       <div class="note">STOP USING NETWORK UTILITY</div>
    1040. 

  1040.       <pre><code>$ dig www.google.com</code></pre>
    1041. 

  1041.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    1042. 

  1042.     </section>
    1043. 

  1043.     <section id="check-the-ownership-and-registration-of-a-domain">
    1044. 

  1044.       <h3>check the ownership and registration of a domain</h3>
    1045. 

  1045.       <div class="note">STOP USING NETWORK UTILITY AND THE WEBSITE OF DOMAIN REGISTRATION PROVIDERS</div>
    1046. 

  1046.       <pre><code>$ whois www.google.com</code></pre>
    1047. 

  1047.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    1048. 

  1048.     </section>
    1049. 

  1049.     <section id="hotkeys">
    1050. 

  1050.       <h3>Hotkeys</h3>
    1051. 

  1051.       <div class="table-wrap">
    1052. 

  1052.         <table>
    1053. 

  1053.           <thead>
    1054. 

  1054.             <tr>
    1055. 

  1055.               <th>Hotkey</th>
    1056. 

  1056.               <th>Description</th>
    1057. 

  1057.             </tr>
    1058. 

  1058.           </thead>
    1059. 

  1059.           <tbody>
    1060. 

  1060.             <tr><td><kbd>Ctrl</kbd>+<kbd>A</kbd></td><td>Go to the beginning of the line you are currently typing on</td></tr>
    1061. 

  1061.             <tr><td><kbd>Ctrl</kbd>+<kbd>E</kbd></td><td>Go to the end of the line you are currently typing on</td></tr>
    1062. 

  1062.             <tr><td><kbd>Ctrl</kbd>+<kbd>L</kbd></td><td>Clears the Screen, similar to the clear command</td></tr>
    1063. 

  1063.             <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>
    1064. 

  1064.             <tr><td><kbd>Ctrl</kbd>+<kbd>H</kbd></td><td>Same as backspace</td></tr>
    1065. 

  1065.             <tr><td><kbd>Ctrl</kbd>+<kbd>R</kbd></td><td>Lets you search through previously used commands</td></tr>
    1066. 

  1066.             <tr><td><kbd>Ctrl</kbd>+<kbd>C</kbd></td><td>Kill whatever you are running</td></tr>
    1067. 

  1067.             <tr><td><kbd>Ctrl</kbd>+<kbd>D</kbd></td><td>Exit the current shell</td></tr>
    1068. 

  1068.             <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>
    1069. 

  1069.             <tr><td><kbd>Ctrl</kbd>+<kbd>W</kbd></td><td>Delete the word before the cursor</td></tr>
    1070. 

  1070.             <tr><td><kbd>Ctrl</kbd>+<kbd>K</kbd></td><td>Clear the line after the cursor</td></tr>
    1071. 

  1071.             <tr><td><kbd>Ctrl</kbd>+<kbd>T</kbd></td><td>Swap the last two characters before the cursor</td></tr>
    1072. 

  1072.             <tr><td><kbd>Ctrl</kbd>+<kbd>F</kbd></td><td>Move cursor forward one character</td></tr>
    1073. 

  1073.             <tr><td><kbd>Ctrl</kbd>+<kbd>B</kbd></td><td>Move cursor backward one character</td></tr>
    1074. 

  1074.             <tr><td><kbd>Esc</kbd>+<kbd>T</kbd></td><td>Swap the last two words before the cursor</td></tr>
    1075. 

  1075.             <tr><td><kbd>Alt</kbd>+<kbd>T</kbd></td><td>Same as <kbd>Esc</kbd> + <kbd>T</kbd></td></tr>
    1076. 

  1076.             <tr><td><kbd>Alt</kbd>+<kbd>F</kbd></td><td>Move cursor forward one word on the current line</td></tr>
    1077. 

  1077.             <tr><td><kbd>Alt</kbd>+<kbd>B</kbd></td><td>Move cursor backward one word on the current line</td></tr>
    1078. 

  1078.             <tr><td><kbd>Esc</kbd>+<kbd>F</kbd></td><td>Same as <kbd>Alt</kbd> + <kbd>F</kbd></td></tr>
    1079. 

  1079.             <tr><td><kbd>Esc</kbd>+<kbd>B</kbd></td><td>Same as <kbd>Alt</kbd> + <kbd>B</kbd></td></tr>
    1080. 

  1080.             <tr><td><kbd>Alt</kbd>+<kbd>.</kbd></td><td>Paste the last word of the most recently command</td></tr>
    1081. 

  1081.             <tr><td><kbd>Tab</kbd></td><td>Auto-complete files and directory names</td></tr>
    1082. 

  1082.           </tbody>
    1083. 

  1083.         </table>
    1084. 

  1084.       </div>
    1085. 

  1085.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    1086. 

  1086.     </section>
    1087. 

  1087.     <section id="i-cant-remember-these-cryptic-commands">
    1088. 

  1088.       <h3>I can't remember these cryptic commands</h3>
    1089. 

  1089.       <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>
    1090. 

  1090.       <a class="back-to-top" href="#quick-links">Go to table of contents ๐Ÿ”ผ</a>
    1091. 

  1091.     </section>
    1092. 

  1092.   </main>
    1093. 

  1093.   <footer>
    1094. 

  1094.     <a href="https://instagram.com/parvcodes" class="love-btn" target="_blank">
    1095. 

  1095.       Made With โค๏ธ by Parv Ashwani
    1096. 

  1096.     </a>
    1097. 

  1097.   </footer>
    1098. 

  1098.   <div class="theme-indicator" id="themeIndicator">MacOS Theme</div>
    1099. 

  1099.   <script>
    1100. 

  1100.     const btn = document.getElementById('toggleModeBtn');
    1101. 

  1101.     const themeIndicator = document.getElementById('themeIndicator');
    1102. 

  1102.     const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    1103. 

  1103.     const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    1104. 

  1104. 

  1105.     function setMode(dark) {
    1106. 

  1106.       document.body.classList.toggle('dark', dark);
    1107. 

  1107.       const buttonText = dark ? 'โ˜€๏ธ Light' : '๐ŸŒ™ Dark';
    1108. 

  1108.       // Update button text
    1109. 

  1109.       const textSpan = btn.querySelector('.button-text');
    1110. 

  1110.       if (textSpan) {
    1111. 

  1111.           textSpan.textContent = buttonText;
    1112. 

  1112.       } else {
    1113. 

  1113.           btn.innerHTML = `<span class="button-text">${buttonText}</span>`;
    1114. 

  1114.       }
    1115. 

  1115.       localStorage.setItem('theme', dark ? 'dark' : 'light');
    1116. 

  1116.       themeIndicator.textContent = dark ? 'Linux Theme' : 'MacOS Theme';
    1117. 

  1117.     }
    1118. 

  1118. 

  1119.     (function() {
    1120. 

  1120.       const saved = localStorage.getItem('theme');
    1121. 

  1121.       if (saved) setMode(saved === 'dark');
    1122. 

  1122.       else setMode(prefersDark);
    1123. 

  1123.     })();
    1124. 

  1124. 

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

  1126. 

  1127.     // Parallax orbs
    1128. 

  1128.     function enableOrbsParallax() {
    1129. 

  1129.       if (reduceMotion) return;
    1130. 

  1130.       const orbs = document.querySelectorAll('.orb');
    1131. 

  1131.       if (!orbs.length) return;
    1132. 

  1132.       document.addEventListener('pointermove', (e) => {
    1133. 

  1133.         const cx = window.innerWidth / 2;
    1134. 

  1134.         const cy = window.innerHeight / 2;
    1135. 

  1135.         const dx = (e.clientX - cx) / cx;
    1136. 

  1136.         const dy = (e.clientY - cy) / cy;
    1137. 

  1137.         orbs.forEach((orb, i) => {
    1138. 

  1138.           const depth = (i + 1) * 6;
    1139. 

  1139.           orb.style.transform = `translate(${dx * depth}px, ${dy * depth}px) translateZ(0)`;
    1140. 

  1140.         });
    1141. 

  1141.       });
    1142. 

  1142.     }
    1143. 

  1143. 

  1144.     enableOrbsParallax();
    1145. 

  1145.   </script>
    1146. 

  1146. </body>
    1147. 

  1147. </html>
    1148.