diff --git a/waterfall.html b/waterfall.html index 55f85a8..36703b7 100644 --- a/waterfall.html +++ b/waterfall.html @@ -40,6 +40,15 @@ transform: translateX(-50%); } + .grid-line { + position: absolute; + top: 25px; + bottom: 0; + width: 1px; + background: rgba(119, 119, 119, 0.15); + pointer-events: none; + } + .waterfall-row { display: flex; align-items: center; diff --git a/waterfall.js b/waterfall.js index 575930b..65dfddc 100644 --- a/waterfall.js +++ b/waterfall.js @@ -50,11 +50,12 @@ function renderWaterfall() { let html = ''; - // Add time scale header + // Add time scale header with grid lines html += '
'; for (let sec = 0; sec <= Math.ceil(maxTime); sec++) { const pos = sec * scale; html += `
${sec}s
`; + html += `
`; } html += '
';