diff options
| author | Orangerot <purple@orangerot.dev> | 2024-12-10 06:28:50 +0100 |
|---|---|---|
| committer | Orangerot <purple@orangerot.dev> | 2024-12-10 06:28:50 +0100 |
| commit | f08b0b4d51f1ba0f003cd9bffd6b481a92ae52de (patch) | |
| tree | f0e69ae356b3f6cf2d0ba346d0d19ffef4e1a76a /index.html | |
| parent | 76872c7bdec8ba2c681ebb752899f43cdd74941a (diff) | |
feat: use webcam to take picture
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 16 |
1 files changed, 11 insertions, 5 deletions
@@ -11,21 +11,22 @@ <link rel="stylesheet" href="style.css"> <title>Imagine - Image Editor</title> </head> - <body style="padding-top: 100dvh; " class=""> + <body style="padding-top: 100dvh; " class="import-active"> <div class="navbar columns is-mobile is-fixed-top"> <div class="column"> <div class="hero is-fullheight" style="min-height: 100dvh;"> <div class="hero-body"> <div class="container"> <canvas id="myCanvas" class="is-visible-editor" width="300" height="300"></canvas> - <div class="columns is-mobile is-hidden-editor"> + <video id="video" class="is-visible-camera" width="300" height="300"></video> + <div class="columns is-mobile is-visible-import"> <div class="column"> <button id="take-picture" class="button is-large is-responsive is-fullwidth py-6" style="display: flex; flex-direction: column; align-items: center;" > - <i class="fa-solid fa-6x fa-camera mb-4"></i> - Take a Picture + <i class="fa-solid fa-6x fa-video mb-4"></i> + Use Camera </button> </div> <div class="column"> @@ -46,10 +47,15 @@ bottom: 30px"> <i class="fa-solid fa-sliders mr-2"></i> Settings </a> - <button id="back" class="button is-visible-editor" style="position: absolute; left: 30px; + <button id="back" class="button is-hidden-import" style="position: absolute; left: 30px; top: 30px"> <i class="fa-solid fa-arrow-left mr-2"></i> Back </button> + <div style="position: absolute; bottom: 30px; left: 30px; right: 30px"> + <button id="cheese" class="button is-large is-fullwidth is-visible-camera" > + <i class="fa-solid fa-camera mr-2"></i> Take a Picture + </button> + </div> </div> </div> </div> |