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;}
2020-11-05 15:50:49 +00:00
.row {margin: 24px 0;}
2020-10-16 13:50:05 +00:00
< / style >
2020-10-22 18:44:24 +00:00
< 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" / >
2020-10-31 21:54:55 +00:00
< link rel = "stylesheet" type = "text/css" href = "js/cropper/cropper.min.css" / >
2020-10-16 13:50:05 +00:00
< / head >
< body >
2020-11-01 22:09:28 +00:00
2020-10-16 13:50:05 +00:00
< div class = "container-fluid container-md" >
< div class = "row" >
2020-11-05 15:50:49 +00:00
< div class = "col-sm-7" >
2020-11-05 08:49:18 +00:00
< video id = "video" class = "video_sized" autoplay > < / video >
< / div >
2020-11-05 15:50:49 +00:00
< div class = "col-sm-5" >
2020-11-05 08:49:18 +00:00
< h1 class = "text-primary" > Convert your photos to laser images!< / h1 >
2020-11-05 15:50:49 +00:00
< 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 >
2020-11-01 22:09:28 +00:00
< div class = "select" >
2020-11-05 08:49:18 +00:00
< label for = "videoSource" > Change camera < / label > < select id = "videoSource" class = "custom-select" > < / select >
2020-11-01 22:09:28 +00:00
< / div >
2020-11-05 15:50:49 +00:00
< 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 >
2020-11-05 15:50:49 +00:00
< div class = "row result" id = "result" style = "display:none" >
< div class = "col-sm-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-sm" >
2020-11-05 15:50:49 +00:00
< 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 >
2020-11-05 15:50:49 +00:00
< / 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-sm-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" / >
2020-11-05 15:50:49 +00:00
< / div >
< / div >
< div class = "col-sm-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 >
2020-11-05 15:50:49 +00:00
< / div >
< / div >
< div class = "row result" style = "display:none" >
< div class = "col-sm" >
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" >
2020-11-05 15:50:49 +00:00
< div class = "col-sm-7" >
2020-11-05 08:49:18 +00:00
< canvas id = "simuCanvas" class = "video_sized" > < / canvas >
2020-11-01 22:09:28 +00:00
< / div >
2020-11-05 15:50:49 +00:00
< div class = "col-sm-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
2020-11-01 22:09:28 +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 >
2020-11-05 15:50:49 +00:00
< 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 >
