blob: 02186c68e9bf803466fb7e266acfc1fa19835061 (
plain) (
tree)
|
|
<!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: 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>
|