볼륨 그룹 스냅샷

<div class="snapshot"><div class="heading">GROUP SNAPSHOT <span id="moment">T1</span></div><div class="tracks"><div class="track"><b>DATA PVC</b><div class="rail"><i></i></div></div><div class="track"><b>LOG PVC</b><div class="rail"><i></i></div></div><div class="marker" id="marker"></div></div><div class="scrub"><span>T0</span><input id="time" type="range" min="0" max="3" value="0" aria-label="Snapshot time"><span>T3</span></div><div class="caption">one recovery point across both volumes</div></div>

.snapshot{width:min(94vw,760px);height:min(88vh,330px);padding:clamp(10px,2.5vmin,20px);border:1px solid var(--line);border-radius:14px;background:var(--surface);font:600 clamp(12px,2.5vmin,16px)/1.3 var(--font-sans);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px)}.heading{display:flex;justify-content:space-between;color:var(--accent);font-weight:800}.tracks{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,2vmin,18px)}.track{display:flex;align-items:center;gap:8px}.track b{width:76px;flex:none}.rail{height:clamp(18px,5vmin,32px);flex:1;border:1px solid var(--line);border-radius:5px;background:repeating-linear-gradient(90deg,var(--bg) 0 24%,var(--line) 24% 25%)}.rail i{display:block;width:0;height:100%;background:color-mix(in srgb,var(--accent) 55%,transparent);transition:width .4s}.marker{position:absolute;left:calc(76px + 8px);top:15%;height:70%;border-left:3px solid var(--accent-3);transition:left .4s;z-index:1}.scrub{display:flex;align-items:center;gap:7px;color:var(--muted)}.scrub input{flex:1;min-width:0;accent-color:var(--accent)}.caption{color:var(--muted)}

const slider=document.getElementById('time');const marker=document.getElementById('marker');const rails=[...document.querySelectorAll('.rail i')];let step=0;let timer;function draw(value){step=Number(value);document.getElementById('moment').textContent='T'+step;rails.forEach(rail=>rail.style.width=(step/3*100)+'%');marker.style.left='calc(76px + 8px + (100% - 84px) * '+(step/3)+')';slider.value=String(step)}draw(0);timer=setInterval(()=>draw((step+1)%4),900);slider.addEventListener('input',()=>{clearInterval(timer);draw(slider.value)})