diff options
| author | elioat <elioat@tilde.institute> | 2024-08-14 22:24:17 -0400 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-08-14 22:24:17 -0400 |
| commit | 91851865712e188650ea11a046c8de2c22674548 (patch) | |
| tree | edbc32992d5561a1851848e3fe829125ddf32a1a /js/lut-cam/index.html | |
| parent | 391793456f87ccba1a8e1775e1695ced9594ae33 (diff) | |
| download | tour-91851865712e188650ea11a046c8de2c22674548.tar.gz | |
*
Diffstat (limited to 'js/lut-cam/index.html')
| -rw-r--r-- | js/lut-cam/index.html | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/js/lut-cam/index.html b/js/lut-cam/index.html new file mode 100644 index 0000000..f31c465 --- /dev/null +++ b/js/lut-cam/index.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>LUT Cam</title> + <style> + body, html { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: #000; + } + #canvas { + width: 100%; + height: 100%; + object-fit: cover; + display: none; + } + #controls { + position: absolute; + bottom: 10px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + } + #lut-container { + position: absolute; + top: 10px; + right: 10px; + } + button, select { + padding: 10px; + font-size: 18px; + cursor: pointer; + } + </style> +</head> +<body> + +<canvas id="canvas"></canvas> + +<div id="lut-container"> + <select id="lut-select" disabled> + <option value="none">None</option> + <option value="lut1">Inverted</option> + <option value="lut2">Enhanced</option> + <option value="lut3">Subtle Cool Tone</option> + <option value="lut4">Subtle Warm Tone</option> + <option value="lut5">Subtle Green Tone</option> + <option value="lut6">Subtle Yellow Tone</option> + <option value="lut7">Desaturated</option> + <option value="lut8">Saturated</option> + <option value="lut9">Warm Tint</option> + <option value="lut10">Cool Tint</option> + <option value="lut11">Greyscale</option> + <option value="lut12">Sepia</option> + </select> +</div> + +<div id="controls"> + <button id="toggle-camera">Turn Camera On</button> + <button id="capture" disabled>Capture Frame</button> +</div> + +<script src="lut.js"></script> +</body> +</html> |