diff options
-rw-r--r-- | index.html | 45 | ||||
-rw-r--r-- | style.css | 41 |
2 files changed, 52 insertions, 34 deletions
@@ -12,10 +12,10 @@ <link rel="stylesheet" href="style.css"> <title>Imagine - Image Editor</title> </head> - <body style="padding-top: 100dvh; " class="import-active"> + <body class="import-active"> <div class="navbar columns is-mobile is-fixed-top"> <div class="column" id="viewport"> - <div class="hero is-fullheight" style="min-height: 100dvh;"> + <div class="hero is-fullheight"> <div class="hero-body"> <div class="container" > <canvas id="myCanvas" class="is-visible-editor" width="300" height="300"></canvas> @@ -26,46 +26,38 @@ </div> <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-video mb-4"></i> - Use Camera + <button id="take-picture" class="button is-large is-responsive is-fullwidth py-6" > + <div class="container"> + <i class="fa-solid fa-6x fa-video mb-4"></i><br> + Use Camera + </div> </button> </div> <div class="column"> - <label for="upload-image" - 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-upload mb-4"></i> - <span> - Upload an Image - </span> + <label class="button is-large is-responsive is-fullwidth py-6" > + <input class="file-input" type="file" id="upload-image" accept="image/*"> + <div class="container"> + <i class="fa-solid fa-6x fa-upload mb-4"></i><br> + Choose a file⦠+ </div> </label> - <input type="file" id="upload-image" accept="image/*" style="display: none"> </div> </div> </div><br> - <a href="#settings" class="button is-hidden-desktop is-visible-editor" style="position: absolute; right: 30px; - bottom: 30px"> + <a id="settings-button" href="#settings" class="button is-hidden-desktop is-visible-editor"> <i class="fa-solid fa-sliders mr-2"></i> Settings </a> - <button id="back" class="button is-hidden-import" style="position: absolute; left: 30px; - top: 30px"> + <button id="back" class="button is-hidden-import"> <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" > + <button id="cheese" class="button is-large is-visible-camera" > <i class="fa-solid fa-camera mr-2"></i> Take a Picture </button> - </div> </div> </div> </div> <div class="column is-narrow has-background-black-ter is-hidden-mobile is-hidden-tablet-only is-visible-editor"> - <aside class="menu mr-3" style="width: 300px"> + <aside class="menu mr-3"> <h1 class="title">Imagine</h1> <h2 class="subtitle">Image Editor</h2> @@ -222,9 +214,8 @@ </aside> </div> </div> - <div class="notification is-fullwidth is-hidden-desktop is-visible-editor" style="z-index: 200"> + <div id="settings" class="notification is-fullwidth is-hidden-desktop is-visible-editor"> <!-- #settings is an anhor to scroll to when clicked on the settings-button --> - <span id="settings"></span> <!-- #top is an anchor provided by the browser to go to the top of the page --> <a href="#top" class="delete"></a> @@ -1,18 +1,14 @@ html, body { margin: 0px; scroll-behavior: smooth; + padding-top: 100dvh; } -canvas { - max-width: 100%; +canvas, video { + max-width: 100%; max-height: 100%; } -video { - width: 100%; - height: 100%; -} - body:not(.import-active) .is-visible-import { display: none !important; } @@ -28,3 +24,34 @@ body:not(.editor-active) .is-visible-editor { body.import-active .is-hidden-import { display: none !important; } + +.hero.is-fullheight { + min-height: 100dvh; +} + +#settings-button { + position: absolute; + right: 30px; + bottom: 30px +} + +#back { + position: absolute; + left: 30px; + top: 30px +} + +#cheese { + position: absolute; + bottom: 30px; + left: 30px; + right: 30px; +} + +aside { + width: 300px; +} + +#settings { + z-index: 200; +} |