<div class="page-body">
<div class="dock-container">
<div class="dock-item">
<div class="dock-icon">
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</div>
<span class="dock-tooltip">Home</span>
</div>
<div class="dock-item">
<div class="dock-icon">
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
</div>
<span class="dock-tooltip">Messages</span>
</div>
<div class="dock-item">
<div class="dock-icon">
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
</div>
<span class="dock-tooltip">Monitor</span>
</div>
<div class="dock-item">
<div class="dock-icon">
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
</div>
<span class="dock-tooltip">Settings</span>
</div>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: url("https://placehold.co/1920x1080/0f172a/1e293b?text=Desktop+Wallpaper") center/cover no-repeat;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding-bottom: 30px;
}
.dock-container {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 12px;
border-radius: 24px;
display: flex;
align-items: flex-end;
gap: 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.dock-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.dock-icon {
width: 50px;
height: 50px;
background: #ffffff;
border-radius: 14px;
display: flex;
justify-content: center;
align-items: center;
color: #3b82f6;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
will-change: transform;
}
.dock-tooltip {
position: absolute;
top: -45px;
background: rgba(0, 0, 0, 0.8);
color: #ffffff;
padding: 6px 12px;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 500;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
white-space: nowrap;
}
.dock-item:hover .dock-tooltip {
opacity: 1;
}
const icons = document.querySelectorAll(".dock-icon");
const dock = document.querySelector(".dock-container");
dock.addEventListener("mousemove", function(e) {
icons.forEach(function(icon) {
const rect = icon.getBoundingClientRect();
// Calculate distance from cursor to the center of the icon
const centerX = rect.left + rect.width / 2;
const distance = Math.abs(e.clientX - centerX);
// Scale effect based on distance (closer = bigger)
// Max scale is 1.5, min scale is 1
const maxDistance = 150;
let scale = 1;
if (distance < maxDistance) {
scale = 1 + (0.5 * (1 - distance / maxDistance));
}
icon.style.transform = "scale(" + scale + ") translateY(-" + ((scale - 1) * 20) + "px)";
});
});
dock.addEventListener("mouseleave", function() {
// Reset all icons when cursor leaves the dock
icons.forEach(function(icon) {
icon.style.transform = "scale(1) translateY(0)";
});
});