Skip to content

Commit 01942ee

Browse files
djkurlanderdjkurlander
committed
Improve desktop panel navigation and scrolling
- Add mouse drag-to-scroll on desktop grid - Disable scroll snap during drag; smoothly animate to nearest panel on release - Skip globe canvas on drag to preserve Three.js rotation behavior - Nav clicks only scroll if panel is not already fully visible - Remove onclick navigation from panels; add click-to-highlight instead - Speed up panel border transition from 1.0s to 0.2s - Speed up nav item highlight transition to color 0.05s only
1 parent 4c30057 commit 01942ee

1 file changed

Lines changed: 58 additions & 14 deletions

File tree

‎index.html‎

Lines changed: 58 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
}
9999
.d-nav-item {
100100
color: var(--ui-grey-dim); font-size: 1.6em; cursor: pointer;
101-
display: flex; align-items: center; gap: 4px; transition: 0.3s;
101+
display: flex; align-items: center; gap: 4px; transition: color 0.05s;
102102
flex: 0 0 auto;
103103
}
104104
.d-nav-item span { font-size: 0.5em; font-weight: bold; letter-spacing: 1px; }
@@ -139,8 +139,7 @@
139139
flex-direction: column;
140140
cursor: pointer;
141141
box-sizing: border-box;
142-
/* SLOW-IN-SLOW-OUT TRANSITION */
143-
transition: all 1.0s cubic-bezier(0.65, 0, 0.35, 1);
142+
transition: all 0.2s;
144143
}
145144

146145
#d-box-feed {
@@ -325,17 +324,17 @@ <h1>BOTS ARE KNOCKING <span class="status-dot"></span></h1>
325324
</div>
326325

327326
<div class="d-grid" id="d-slider-container">
328-
<div class="d-box" id="d-box-feed" onclick="dJump(0)"><h2>LIVE FEED: LOGIN ATTEMPTS</h2><div id="d-feed" class="d-content"></div></div>
327+
<div class="d-box" id="d-box-feed"><h2>LIVE FEED: LOGIN ATTEMPTS</h2><div id="d-feed" class="d-content"></div></div>
329328
<div class="d-box" id="d-box-globe"><h2>GLOBE VIEW</h2><div id="d-globe-location" style="text-align:center; margin-bottom:10px;"><div id="d-globe-loc-text" style="color:var(--neon-green);"></div><div id="d-globe-loc-isp" style="color:var(--data-blue); font-size:0.85em;"></div></div><div id="d-globe-pane" class="d-content globe-pane"></div></div>
330-
<div class="d-box" onclick="dJump(2)"><h2>LOCATION</h2><div id="d-loc" class="d-content"></div></div>
331-
<div class="d-box" onclick="dJump(3)"><h2>USERNAME</h2><div id="d-user" class="d-content"></div></div>
332-
<div class="d-box" onclick="dJump(4)"><h2>PASSWORD</h2><div id="d-pass" class="d-content"></div></div>
333-
<div class="d-box" onclick="dJump(5)"><h2>ISP</h2><div id="d-prov" class="d-content"></div></div>
334-
<div class="d-box" onclick="dJump(6)"><h2>IP ADDRESS</h2><div id="d-ip" class="d-content"></div></div>
335-
<div class="d-box" id="d-box-info" onclick="dJump(7)"><h2>STATS</h2><div id="d-details" class="d-content"></div></div>
336-
<div class="d-box" id="d-box-trivia" onclick="dJump(8)"><h2>TRIVIA</h2><div id="d-trivia" class="d-content"></div></div>
337-
<div class="d-box" id="d-box-jokes" onclick="dJump(9)"><h2>KNOCK-KNOCK JOKES</h2><div id="d-jokes" class="d-content" style="color:var(--neon-green); line-height:1.6;"></div></div>
338-
<div class="d-box" onclick="dJump(10)"><h2>ABOUT</h2><div class="d-content" style="color:var(--neon-green); line-height:1.6;">
329+
<div class="d-box"><h2>LOCATION</h2><div id="d-loc" class="d-content"></div></div>
330+
<div class="d-box"><h2>USERNAME</h2><div id="d-user" class="d-content"></div></div>
331+
<div class="d-box"><h2>PASSWORD</h2><div id="d-pass" class="d-content"></div></div>
332+
<div class="d-box"><h2>ISP</h2><div id="d-prov" class="d-content"></div></div>
333+
<div class="d-box"><h2>IP ADDRESS</h2><div id="d-ip" class="d-content"></div></div>
334+
<div class="d-box" id="d-box-info"><h2>STATS</h2><div id="d-details" class="d-content"></div></div>
335+
<div class="d-box" id="d-box-trivia"><h2>TRIVIA</h2><div id="d-trivia" class="d-content"></div></div>
336+
<div class="d-box" id="d-box-jokes"><h2>KNOCK-KNOCK JOKES</h2><div id="d-jokes" class="d-content" style="color:var(--neon-green); line-height:1.6;"></div></div>
337+
<div class="d-box"><h2>ABOUT</h2><div class="d-content" style="color:var(--neon-green); line-height:1.6;">
339338
<div style="font-size:1.4em; font-weight:bold; margin-bottom:20px;">KNOCK-KNOCK.NET</div>
340339
<p>Set up an unprotected server on the net, and the bots start swarming!</p><p> This site shows bots attempting (unsuccessfully) to break into an ordinary internet server.</p>
341340
<p>This constant chatter of bots knocking on the doors of machines on the net has been referred to as <em>"the background radiation of the Internet".</em></p>
@@ -1080,6 +1079,45 @@ <h1>BOTS ARE KNOCKING <span class="status-dot"></span></h1>
10801079
}
10811080

10821081
// DESKTOP ROTATION LOGIC
1082+
(function() {
1083+
const slider = document.getElementById('d-slider-container');
1084+
let startX, startScrollLeft, isDragging = false, dragMoved = false;
1085+
slider.addEventListener('mousedown', e => {
1086+
if (e.button !== 0) return;
1087+
if (e.target.tagName === 'CANVAS') return;
1088+
isDragging = true; dragMoved = false;
1089+
startX = e.pageX; startScrollLeft = slider.scrollLeft;
1090+
slider.style.cursor = 'grabbing';
1091+
slider.style.scrollSnapType = 'none';
1092+
e.preventDefault();
1093+
});
1094+
window.addEventListener('mousemove', e => {
1095+
if (!isDragging) return;
1096+
const dx = e.pageX - startX;
1097+
if (Math.abs(dx) > 5) dragMoved = true;
1098+
slider.scrollLeft = startScrollLeft - dx;
1099+
});
1100+
window.addEventListener('mouseup', () => {
1101+
if (!isDragging) return;
1102+
isDragging = false;
1103+
slider.style.cursor = '';
1104+
const containerLeft = slider.getBoundingClientRect().left;
1105+
const boxes = Array.from(slider.children);
1106+
const nearest = boxes.reduce((best, box) => {
1107+
return Math.abs(box.getBoundingClientRect().left - containerLeft) <
1108+
Math.abs(best.getBoundingClientRect().left - containerLeft) ? box : best;
1109+
});
1110+
const targetLeft = slider.scrollLeft + nearest.getBoundingClientRect().left - containerLeft - 1;
1111+
slider.scrollTo({ left: targetLeft, behavior: 'smooth' });
1112+
});
1113+
slider.addEventListener('click', e => {
1114+
if (dragMoved) { e.stopPropagation(); dragMoved = false; }
1115+
}, true);
1116+
})();
1117+
1118+
Array.from(document.getElementById('d-slider-container').children)
1119+
.forEach((box, i) => box.addEventListener('click', () => dJump(i)));
1120+
10831121
function dJump(idx) {
10841122
const container = document.getElementById('d-slider-container');
10851123
const boxes = Array.from(container.children);
@@ -1090,7 +1128,13 @@ <h1>BOTS ARE KNOCKING <span class="status-dot"></span></h1>
10901128
box.style.order = '';
10911129
box.classList.toggle('is-active', i === idx);
10921130
});
1093-
container.scrollTo({ left: boxes[idx].offsetLeft - 4, behavior: 'smooth' });
1131+
const box = boxes[idx];
1132+
const boxRect = box.getBoundingClientRect();
1133+
const containerRect = container.getBoundingClientRect();
1134+
if (boxRect.left < containerRect.left || boxRect.right > containerRect.right) {
1135+
const targetLeft = container.scrollLeft + boxRect.left - containerRect.left - 1;
1136+
container.scrollTo({ left: targetLeft, behavior: 'smooth' });
1137+
}
10941138
}
10951139

10961140
const getFlag = (iso) => {

0 commit comments

Comments
 (0)