diff options
| author | elioat <elioat@tilde.institute> | 2025-03-29 23:59:24 -0400 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2025-03-29 23:59:24 -0400 |
| commit | 4818198455b61642351fdc25984b94a65f6014da (patch) | |
| tree | 036944b2635987bd66d43e1b7099bc145cb29067 | |
| parent | c731ff7653ee7bbd0d0443139af997435eaf63e1 (diff) | |
| download | tour-4818198455b61642351fdc25984b94a65f6014da.tar.gz | |
*
| -rw-r--r-- | js/leibovitz/index.html | 94 |
1 files changed, 82 insertions, 12 deletions
diff --git a/js/leibovitz/index.html b/js/leibovitz/index.html index b341ac8..876f50e 100644 --- a/js/leibovitz/index.html +++ b/js/leibovitz/index.html @@ -33,8 +33,12 @@ background-color: beige; overflow: hidden; } - #canvas { + .preview-container { flex: 1; + position: relative; + margin: 10px; + } + #canvas { width: 100%; height: 100%; object-fit: contain; @@ -42,7 +46,71 @@ background-color: transparent; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - margin: 10px; + } + .side-control { + position: absolute; + top: 50%; + transform: translateY(-50%); + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + padding: 15px; + background-color: rgba(255, 255, 255, 0.8); + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + z-index: 10; + } + .side-control.left { + left: 0; + } + .side-control.right { + right: 0; + } + .vertical-slider { + transform: rotate(-90deg); + width: 200px; + margin: 90px -70px; + cursor: pointer; + } + .vertical-slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 20px; + height: 20px; + background: #4285f4; + border-radius: 50%; + cursor: pointer; + } + .vertical-slider::-webkit-slider-runnable-track { + width: 100%; + height: 4px; + background: #ddd; + border-radius: 2px; + } + .vertical-slider::-moz-range-thumb { + width: 20px; + height: 20px; + background: #4285f4; + border-radius: 50%; + cursor: pointer; + border: none; + } + .vertical-slider::-moz-range-track { + width: 100%; + height: 4px; + background: #ddd; + border-radius: 2px; + } + .vertical-label { + font-size: 12px; + color: #666; + user-select: none; + } + #blur-value { + font-size: 12px; + color: #666; + user-select: none; } #controls { width: 100%; @@ -140,7 +208,18 @@ </head> <body> -<canvas id="canvas"></canvas> +<div class="preview-container"> + <div class="side-control left"> + <label class="vertical-label" for="blur-slider">Blur</label> + <input type="range" id="blur-slider" class="vertical-slider" min="0" max="20" value="0" step="1"> + <span id="blur-value">0%</span> + </div> + <canvas id="canvas"></canvas> + <div class="side-control right"> + <label class="vertical-label" for="contrast-slider">Contrast</label> + <input type="range" id="contrast-slider" class="vertical-slider" min="-255" max="255" value="0" step="1"> + </div> +</div> <div id="settings-container"> <div class="top-controls"> @@ -156,20 +235,11 @@ <button id="reset-color" title="Reset Color Tint">↺</button> </div> </div> - <div class="contrast-control"> - <label for="contrast-slider">Contrast</label> - <input type="range" id="contrast-slider" min="-255" max="255" value="0" step="1"> - </div> <div class="contrast-control" id="pixel-size-control" style="display: none;"> <label for="block-size-slider">Pixel Size</label> <input type="range" id="block-size-slider" min="1" max="12" value="4" step="1"> <span id="block-size-value">4px</span> </div> - <div class="contrast-control"> - <label for="blur-slider">Blur</label> - <input type="range" id="blur-slider" min="0" max="20" value="0" step="1"> - <span id="blur-value">0%</span> - </div> </div> <div id="controls"> |