121 lines
4.5 KiB
HTML
121 lines
4.5 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;}
|
|
.row {margin: 24px 0;}
|
|
</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-xl-7">
|
|
<video id="video" class="video_sized" autoplay></video>
|
|
</div>
|
|
<div class="col-xl-5">
|
|
<h1 class="text-primary">Convert your photos to laser images!</h1>
|
|
<p class="lead">Create something fresh by allowing the browser to use your camera.</p>
|
|
<p class="lead">Or pick an image from your phone and upload it. </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>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<button class="snap btn btn-block btn-lg btn-primary">Take a snap</button>
|
|
</div>
|
|
<div class="col-6">
|
|
<button id="uploadBtn" class=" btn btn-block btn-lg btn-primary">Upload a file</button>
|
|
<input id="uploadInput" type="file" multiple style="display: none"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row result" id="result" style="display:none">
|
|
<div class="col-xl-7">
|
|
<div class="video_sized">
|
|
<canvas id="canvas" class="video_sized"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl">
|
|
<h2 class="text-primary">Not satisfied with contrast? </h2>
|
|
<p class="lead">Before sending your snap, feel free to modify the contrast by using the slider to reach the effect you desire.</p>
|
|
<div id="slider"></div>
|
|
<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>
|
|
<div class="float-left">
|
|
<br />
|
|
<h2 class="text-primary">Not satisfied with frame?</h2>
|
|
<p class="lead">Before sending your snap, use the blue handles that appear over it to cut the edges. You can also zoom in.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row result" style="display:none">
|
|
<div class="col-xl-7">
|
|
<h1 class="text-primary"> Got text?</h1>
|
|
<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"/>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-5">
|
|
<h1 class="text-success">Ready to send? </h1>
|
|
<div class="form-group">
|
|
<button id="send" class="form-control form-control-lg btn btn-lg btn-success btn-block">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row result" style="display:none">
|
|
<div class="col-xl">
|
|
<div id="messages">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="preview">
|
|
<div class="col-xl-7">
|
|
<canvas id="simuCanvas" class="video_sized"></canvas>
|
|
</div>
|
|
<div class="col-xl-5" >
|
|
<h2 class="text-secondary">Preview your creations</h2>
|
|
<p class="lead">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>
|
|
|
|
|
|
<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/main.js"></script>
|
|
<script src="js/adapter-latest.js"></script>
|
|
<script src="js/camera.js" async></script>
|
|
</body>
|
|
</html>
|