blob: f31c4651931e77f8ca6a38c02741b3290bb4e20d (
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: #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>
|