diff options
| author | elioat <elioat@tilde.institute> | 2025-03-30 09:23:33 -0400 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2025-03-30 09:23:33 -0400 |
| commit | 172a0d1b2a817ce75c1d9d1572b3cc8eee5d9f26 (patch) | |
| tree | 4e72f6ad6ff3c1924e8e57f42a0f23b11530ff04 | |
| parent | fff8c88a6cac323ec0c7ffbb74d3917fe53af1aa (diff) | |
| download | tour-172a0d1b2a817ce75c1d9d1572b3cc8eee5d9f26.tar.gz | |
*
| -rw-r--r-- | js/leibovitz/index.html | 116 |
1 files changed, 98 insertions, 18 deletions
diff --git a/js/leibovitz/index.html b/js/leibovitz/index.html index dcae8c7..451ef9f 100644 --- a/js/leibovitz/index.html +++ b/js/leibovitz/index.html @@ -56,6 +56,62 @@ border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } + .slide-controls { + position: absolute; + bottom: 20px; + left: 0; + right: 0; + display: flex; + justify-content: space-around; + align-items: center; + background-color: rgba(255, 255, 255, 0.8); + padding: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + z-index: 10; + margin: 0 20px; + } + .slider-group { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + flex: 1; + max-width: 200px; + } + .slider-group label { + font-size: 12px; + color: #666; + font-family: 'ChicagoFLF', sans-serif; + } + .slider-group input[type="range"] { + width: 100%; + height: 4px; + -webkit-appearance: none; + background: rgba(0, 0, 0, 0.2); + border-radius: 2px; + outline: none; + } + .slider-group input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + width: 16px; + height: 16px; + background: teal; + border-radius: 0; + cursor: pointer; + } + .slider-group input[type="range"]::-moz-range-thumb { + width: 16px; + height: 16px; + background: teal; + border-radius: 0; + cursor: pointer; + border: none; + } + .slider-group .value { + font-size: 12px; + color: #666; + font-family: 'ChicagoFLF', sans-serif; + } .side-control { position: absolute; top: 50%; @@ -123,7 +179,6 @@ padding: 0 5px; } #blur-value { - transform: rotate(90deg); font-size: 12px; color: #666; user-select: none; @@ -132,7 +187,6 @@ padding: 0 5px; } #contrast-value { - transform: rotate(90deg); font-size: 12px; color: #666; user-select: none; @@ -279,32 +333,58 @@ background-color: #ccc; color: #5c5c5c; } + + @media (max-width: 600px) { + .slide-controls { + flex-direction: column; + gap: 12px; + padding: 15px; + } + .slider-group { + width: 100%; + max-width: none; + flex-direction: row; + align-items: center; + gap: 12px; + } + .slider-group label { + min-width: 60px; + text-align: right; + } + .slider-group input[type="range"] { + flex: 1; + } + .slider-group .value { + min-width: 40px; + text-align: left; + } + } </style> </head> <body> <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"> - <span id="contrast-value">0</span> + <div class="slide-controls"> + <div class="slider-group"> + <label for="blur-slider">Blur</label> + <input type="range" id="blur-slider" min="0" max="20" value="0" step="1"> + <span class="value" id="blur-value">0%</span> + </div> + <div class="slider-group"> + <label for="contrast-slider">Contrast</label> + <input type="range" id="contrast-slider" min="-255" max="255" value="0" step="1"> + <span class="value" id="contrast-value">0</span> + </div> + <div class="slider-group" 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 class="value" id="block-size-value">4px</span> + </div> </div> </div> <div id="settings-container"> - <div class="contrast-control" id="pixel-size-control" style="display: none;"> - <label for="block-size-slider">Pixel Size</label> - <div class="slider-container"> - <input type="range" id="block-size-slider" min="1" max="12" value="4" step="1"> - <span id="block-size-value">4px</span> - </div> - </div> <div class="top-controls"> <select id="dither-select"> <option value="none">No Dithering</option> |