diff options
Diffstat (limited to 'js/lut-cam/index.html')
| -rw-r--r-- | js/lut-cam/index.html | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/js/lut-cam/index.html b/js/lut-cam/index.html new file mode 100644 index 0000000..0f2e2a0 --- /dev/null +++ b/js/lut-cam/index.html @@ -0,0 +1,118 @@ +<!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> + <meta name="description" content="lut cam is a web-based camera with a bunch of preset LUT profiles baked in for you to choose from. It produces images that look sort of like what you can get out of a single-use camera."> + <link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png"> + <link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png"> + <link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png"> + <link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png"> + <link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png"> + <link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png"> + <link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png"> + <link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png"> + <link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png"> + <link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png"> + <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> + <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png"> + <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> + <link rel="manifest" href="manifest.json"> + <meta name="msapplication-TileColor" content="#ffffff"> + <meta name="msapplication-TileImage" content="ms-icon-144x144.png"> + <meta name="theme-color" content="#ffffff"> + <style> + body, html { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: beige; + } + #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; + } + + button, select { + border: none; + cursor: pointer; + transition: background-color 0.3s ease; + } + + button:hover, button:focus { + outline: none; + } + + button.capture { + background-color: teal; + color: #FFFFFF; + } + + button.capture:disabled { + background-color: #ccc; + color: #5c5c5c; + } + + </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">Vapor</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">Cool Tint</option> + <option value="lut10">Warm Tint</option> --> + <option value="lut11">Greyscale</option> + <option value="lut12">Sepia</option> + <option value="lut13">High Contrast</option> + </select> +</div> + +<div id="controls"> + <div id="focus-container"> + <input style="display: none;" type="range" id="focus-slider" min="0" max="100" step="1" value="50" disabled> + </div> + <button id="toggle-camera">Turn Camera On</button> + <button id="capture" disabled class="capture">Capture Image</button> +</div> + + +<script src="lut.js"></script> +</body> +</html> |