snap2laz/index.html

121 lines
4.5 KiB
HTML
Raw Permalink Normal View History

2020-10-16 13:50:05 +00:00
<!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" />
2020-11-05 08:49:18 +00:00
<meta name="mobile-web-app-capable" content="yes">
2020-10-22 20:44:41 +00:00
<title>Camera to laser roxxx!! </title>
<meta name="description" content="The" />
2020-10-16 13:50:05 +00:00
<style>
2020-11-05 08:49:18 +00:00
video,canvas { border: 1px solid #ccc; display: block; margin: auto; }
#canvas { display: block; }
2020-10-16 13:50:05 +00:00
span.ui-slider-handle.ui-corner-all.ui-state-default { background: dodgerblue;}
2020-11-01 22:28:34 +00:00
canvas#simuCanvas {background: #333;}
.row {margin: 24px 0;}
2020-10-16 13:50:05 +00:00
</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" />
2020-10-16 13:50:05 +00:00
</head>
<body>
2020-10-16 13:50:05 +00:00
<div class="container-fluid container-md">
<div class="row">
<div class="col-xl-7">
2020-11-05 08:49:18 +00:00
<video id="video" class="video_sized" autoplay></video>
</div>
<div class="col-xl-5">
2020-11-05 08:49:18 +00:00
<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>
2020-11-05 08:49:18 +00:00
<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">
2020-11-05 08:49:18 +00:00
<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>
2020-10-16 13:50:05 +00:00
</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>
2020-10-16 13:50:05 +00:00
</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>
2020-10-16 13:50:05 +00:00
<div id="slider"></div>
2020-11-05 08:49:18 +00:00
<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>
2020-11-05 08:49:18 +00:00
<p >If some text is visible on the image, type it before pushing the Send button.</p>
2020-10-16 13:50:05 +00:00
<div class="form-group">
2020-10-21 12:39:48 +00:00
<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">
2020-11-05 08:49:18 +00:00
<button id="send" class="form-control form-control-lg btn btn-lg btn-success btn-block">Send</button>
2020-10-16 13:50:05 +00:00
</div>
</div>
</div>
<div class="row result" style="display:none">
<div class="col-xl">
2020-10-21 12:39:48 +00:00
<div id="messages">
</div>
2020-10-16 13:50:05 +00:00
</div>
</div>
2020-11-01 22:28:34 +00:00
<div class="row" id="preview">
<div class="col-xl-7">
2020-11-05 08:49:18 +00:00
<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>
2020-11-05 08:49:18 +00:00
<div id="imageList"></div>
</div>
</div>
2020-10-16 13:50:05 +00:00
</div>
2020-11-05 08:49:18 +00:00
<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>
2020-10-16 13:50:05 +00:00
</body>
</html>