112 lines
3.7 KiB
HTML
112 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr" xmlns:fb="http://ogp.me/ns/fb#">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
|
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<title>Camera to laser roxxx!! </title>
|
|
<meta name="description" content="The" />
|
|
|
|
<style>
|
|
video,canvas { border: 1px solid #ccc; display: block; margin: auto; }
|
|
#canvas { display: block; }
|
|
span.ui-slider-handle.ui-corner-all.ui-state-default { background: dodgerblue;}
|
|
canvas#simuCanvas {background: #333;}
|
|
div.select {
|
|
display: inline-block;
|
|
margin: 0 0 1em 0;
|
|
}
|
|
|
|
p.small {
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
label {
|
|
width: 12em;
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css" />
|
|
<link rel="stylesheet" type="text/css" href="js/cropper/cropper.min.css" />
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="container-fluid container-md">
|
|
|
|
<div class="row">
|
|
<div class="col-sm col-6">
|
|
<video id="video" class="video_sized" autoplay></video>
|
|
</div>
|
|
<div class="col-sm">
|
|
<h1 class="text-primary">Convert your photos to laser images!</h1>
|
|
<p class="lead">Once you allow the browser to use your camera, you can start creating something new by taking a snapshot. </p>
|
|
<p class="lead">If you're happy with the result, send it to see it converted to a laser-ready image! </p>
|
|
<div class="select">
|
|
<label for="videoSource">Change camera </label><select id="videoSource" class="custom-select"></select>
|
|
</div>
|
|
<button class="snap btn btn-lg btn-primary">Take a snap</button>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="result">
|
|
<div class="col-sm col-6">
|
|
<div class="video_sized">
|
|
<canvas id="canvas" class="video_sized"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm">
|
|
<h1 class="text-primary">Are you satisfied with the contrast? </h3>
|
|
<p>Before sending your snap, change the contrast using the slider to reach the effect you desire.</p><br/>
|
|
<div id="slider"></div>
|
|
<br/>
|
|
<div class="float-left">
|
|
<button type="button" class="btn btn-secondary contrast" rel="-5">
|
|
<span class="badge badge-light">+</span> white
|
|
</button>
|
|
</div>
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-secondary contrast" rel="5">
|
|
<span class="badge badge-light">+</span> black
|
|
</button>
|
|
</div><br>
|
|
|
|
<br/>
|
|
<h3>Ready to send? </h3>
|
|
<p >If some text is visible on the image, type it before pushing the Send button.</p>
|
|
<div class="form-group">
|
|
<input id="text" type="text" class="form-control form-control-lg" placeholder="Type text here"/>
|
|
<button id="send" class="form-control form-control-lg btn btn-lg btn-success btn-block">Send</button>
|
|
</div>
|
|
|
|
<div id="messages">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="preview">
|
|
<div class="col-sm col-6">
|
|
<canvas id="simuCanvas" class="video_sized"></canvas>
|
|
</div>
|
|
<div class="col-sm" >
|
|
<h1 class="text-primary">Preview your creation</h1>
|
|
<p>Now that your creation have been sent, you can check what they will look like on lasers using these links, sorted by oldest snaps last.</p>
|
|
|
|
<div id="imageList"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
|
|
<script src="js/jquery-3.5.1.min.js"></script>
|
|
<script src="js/cropper/cropper.min.js"></script>
|
|
<script src="js/jquery-ui/jquery-ui.js"></script>
|
|
<script src="js/canvas.js"></script>
|
|
<script src="js/adapter-latest.js"></script>
|
|
<script src="js/camera.js" async></script>
|
|
</body>
|
|
</html>
|