|
|
@@ -409,6 +409,295 @@
|
|
|
}
|
|
|
}
|
|
|
</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>
|
|
|
@@ -418,6 +707,14 @@
|
|
|
<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>
|
|
|
|
|
|
@@ -893,38 +1190,81 @@ $ nc -vz 1.1.1.1 53</code></pre>
|
|
|
<div class="theme-indicator" id="themeIndicator">MacOS Theme</div>
|
|
|
|
|
|
<script>
|
|
|
- // Light/Dark mode toggle
|
|
|
+ // 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
|
|
|
- if (dark) {
|
|
|
- themeIndicator.textContent = 'Linux Theme';
|
|
|
- } else {
|
|
|
- themeIndicator.textContent = 'MacOS Theme';
|
|
|
- }
|
|
|
-
|
|
|
- // Add subtle theme transition
|
|
|
- document.body.style.transition = 'background 0.5s ease, color 0.5s ease';
|
|
|
- setTimeout(() => {
|
|
|
- document.body.style.transition = '';
|
|
|
- }, 500);
|
|
|
- }
|
|
|
-
|
|
|
- // On load
|
|
|
+ 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>
|
