can you add a verticle line to the side of the site that tracks the views position and each segment is marked with a dot and the views location is marked with a color dote
Browse files- index.html +31 -3
index.html
CHANGED
|
@@ -28,9 +28,20 @@
|
|
| 28 |
}
|
| 29 |
</style>
|
| 30 |
</head>
|
| 31 |
-
<body class="bg-gray-50 text-gray-800">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 32 |
<!-- Navigation -->
|
| 33 |
-
|
| 34 |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 35 |
<div class="flex justify-between h-16">
|
| 36 |
<div class="flex items-center">
|
|
@@ -299,9 +310,26 @@ Send Message
|
|
| 299 |
});
|
| 300 |
});
|
| 301 |
});
|
| 302 |
-
|
| 303 |
// Initialize feather icons
|
| 304 |
feather.replace();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 305 |
</script>
|
| 306 |
</body>
|
| 307 |
</html>
|
|
|
|
| 28 |
}
|
| 29 |
</style>
|
| 30 |
</head>
|
| 31 |
+
<body class="bg-gray-50 text-gray-800 relative">
|
| 32 |
+
<!-- Scroll Indicator -->
|
| 33 |
+
<div class="fixed right-8 top-1/2 transform -translate-y-1/2 h-screen flex flex-col items-center justify-center z-40">
|
| 34 |
+
<div class="h-full w-px bg-gray-300 relative">
|
| 35 |
+
<div id="scroll-indicator" class="absolute left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full bg-red-600 transition-all duration-300"></div>
|
| 36 |
+
<div class="absolute left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full bg-gray-500 top-[20%]"></div>
|
| 37 |
+
<div class="absolute left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full bg-gray-500 top-[40%]"></div>
|
| 38 |
+
<div class="absolute left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full bg-gray-500 top-[60%]"></div>
|
| 39 |
+
<div class="absolute left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full bg-gray-500 top-[80%]"></div>
|
| 40 |
+
</div>
|
| 41 |
+
</div>
|
| 42 |
+
|
| 43 |
<!-- Navigation -->
|
| 44 |
+
<nav class="fixed w-full bg-white/80 backdrop-blur-md z-50 shadow-sm">
|
| 45 |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 46 |
<div class="flex justify-between h-16">
|
| 47 |
<div class="flex items-center">
|
|
|
|
| 310 |
});
|
| 311 |
});
|
| 312 |
});
|
|
|
|
| 313 |
// Initialize feather icons
|
| 314 |
feather.replace();
|
| 315 |
+
|
| 316 |
+
// Scroll position indicator
|
| 317 |
+
function updateScrollIndicator() {
|
| 318 |
+
const scrollPosition = window.scrollY;
|
| 319 |
+
const windowHeight = window.innerHeight;
|
| 320 |
+
const docHeight = document.body.scrollHeight;
|
| 321 |
+
const scrollPercentage = (scrollPosition / (docHeight - windowHeight)) * 100;
|
| 322 |
+
|
| 323 |
+
// Cap the percentage at 100%
|
| 324 |
+
const cappedPercentage = Math.min(scrollPercentage, 100);
|
| 325 |
+
|
| 326 |
+
// Update indicator position
|
| 327 |
+
document.getElementById('scroll-indicator').style.top = `${cappedPercentage}%`;
|
| 328 |
+
}
|
| 329 |
+
|
| 330 |
+
// Update on scroll and load
|
| 331 |
+
window.addEventListener('scroll', updateScrollIndicator);
|
| 332 |
+
window.addEventListener('load', updateScrollIndicator);
|
| 333 |
</script>
|
| 334 |
</body>
|
| 335 |
</html>
|