<!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>