diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 261 |
1 files changed, 138 insertions, 123 deletions
@@ -11,14 +11,14 @@ <link rel="stylesheet" href="style.css"> <title>Imagine - Image Editor</title> </head> - <body style="padding-top: 100dvh; "> + <body style="padding-top: 100dvh; " class=""> <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-hidden" width="300" height="300"></canvas> - <div id="imports" class="columns is-mobile"> + <canvas id="myCanvas" class="is-visible-editor" width="300" height="300"></canvas> + <div class="columns is-mobile is-hidden-editor"> <div class="column"> <button id="take-picture" class="button is-large is-responsive is-fullwidth py-6" @@ -42,156 +42,171 @@ </div> </div> </div><br> - <a href="#settings" class="button is-hidden-desktop" style="position: absolute; right: 30px; + <a href="#settings" class="button is-hidden-desktop is-visible-editor" style="position: absolute; right: 30px; 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; + top: 30px"> + <i class="fa-solid fa-arrow-left mr-2"></i> Back + </button> </div> </div> </div> - <div class="column is-narrow has-background-black-ter is-hidden-mobile is-hidden-tablet-only"> + <div class="column is-narrow has-background-black-ter is-hidden-mobile is-hidden-tablet-only is-visible-editor"> <aside class="menu" style="width: 300px"> <h1 class="title">Imagine</h1> <h2 class="subtitle">Image Editor</h2> - <button id="save" class="button is-primary"> - Save Image - </button> - <button id="share" class="button is-secondary"> - <i class="fa-solid fa-share-from-square fa-fw mr-1"></i> - Share - </button> + <!-- autocomplete off prevents browsers from remebering the value on page reloads --> + <form autocomplete="off"> + <button id="save" class="button is-primary"> + Save Image + </button> + <button id="share" class="button is-secondary"> + <i class="fa-solid fa-share-from-square fa-fw mr-1"></i> + Share + </button> - <p class="menu-label"> + <p class="menu-label"> Color Correction - </p> + </p> - <div class="field"> - <label class="label"> - <i class="fa-solid fa-sun fa-fw"></i> - Brightness - </label> - <div class="control"> - <input type="range" - id="brightness" - class="brightness slider is-fullwidth is-primary" - min="0" max="2" value="1" step="0.1"> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-sun fa-fw"></i> + Brightness + </label> + <div class="control"> + <input type="range" + id="brightness" + class="brightness slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> + </div> </div> - </div> - <div class="field"> - <label class="label"> - <i class="fa-solid fa-leaf fa-fw"></i> - Saturation - </label> - <div class="control"> - <input type="range" - id="saturate" - class="saturate slider is-fullwidth is-primary" - min="0" max="2" value="1" step="0.1"> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-leaf fa-fw"></i> + Saturation + </label> + <div class="control"> + <input type="range" + id="saturate" + class="saturate slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> + </div> </div> - </div> - <div class="field"> - <label class="label"> - <i class="fa-solid fa-circle-half-stroke fa-fw"></i> - Contrast - </label> - <div class="control"> - <input type="range" - id="contrast" - class="contrast slider is-fullwidth is-primary" - min="0" max="2" value="1" step="0.1"> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-circle-half-stroke fa-fw"></i> + Contrast + </label> + <div class="control"> + <input type="range" + id="contrast" + class="contrast slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> + </div> </div> - </div> - <p class="menu-label"> + <p class="menu-label"> Distortion - </p> - <p class="menu-label"> + </p> + <p class="menu-label"> Blur and Sharpen - </p> - <div class="field"> - <label class="label"> - <i class="fa-solid fa-water fa-fw"></i> - Blur - </label> - <div class="control"> - <input type="range" - id="blur" - class="blur slider is-fullwidth is-primary" - min="0" max="1" value="0" step="0.05"> + </p> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-water fa-fw"></i> + Blur + </label> + <div class="control"> + <input type="range" + id="blur" + class="blur slider is-fullwidth is-primary" + min="0" max="1" value="0" step="0.05"> + </div> </div> - </div> + </form> </aside> </div> </div> - <div class="notification is-fullwidth is-hidden-desktop" style="z-index: 200"> - <button id="save" class="button is-primary"> - Save Image - </button> - <button id="share" class="button is-secondary"> - <i class="fa-solid fa-share-from-square fa-fw mr-1"></i> - Share - </button> + <div class="notification is-fullwidth is-hidden-desktop is-visible-editor" style="z-index: 200"> + <!-- #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> + + <!-- autocomplete off prevents browsers from remebering the value on page reloads --> + <form autocomplete="off"> + <button id="save" class="button is-primary"> + Save Image + </button> + <button id="share" class="button is-secondary"> + <i class="fa-solid fa-share-from-square fa-fw mr-1"></i> + Share + </button> - <p class="menu-label"> - Color Correction - </p> + <p class="menu-label"> + Color Correction + </p> - <div class="field"> - <label class="label"> - <i class="fa-solid fa-sun fa-fw"></i> - Brightness - </label> - <div class="control"> - <input type="range" - id="brightness" - class="brightness slider is-fullwidth is-primary" - min="0" max="2" value="1" step="0.1"> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-sun fa-fw"></i> + Brightness + </label> + <div class="control"> + <input type="range" + id="brightness" + class="brightness slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> + </div> </div> - </div> - <div class="field"> - <label class="label"> - <i class="fa-solid fa-leaf fa-fw"></i> - Saturation - </label> - <div class="control"> - <input type="range" - id="saturate" - class="saturate slider is-fullwidth is-primary" - min="0" max="2" value="1" step="0.1"> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-leaf fa-fw"></i> + Saturation + </label> + <div class="control"> + <input type="range" + id="saturate" + class="saturate slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> + </div> </div> - </div> - <div class="field"> - <label class="label"> - <i class="fa-solid fa-circle-half-stroke fa-fw"></i> - Contrast - </label> - <div class="control"> - <input type="range" - id="contrast" - class="contrast slider is-fullwidth is-primary" - min="0" max="2" value="1" step="0.1"> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-circle-half-stroke fa-fw"></i> + Contrast + </label> + <div class="control"> + <input type="range" + id="contrast" + class="contrast slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> + </div> </div> - </div> - <p class="menu-label"> - Distortion - </p> - <p class="menu-label"> - Blur and Sharpen - </p> - <div class="field"> - <label class="label"> - <i class="fa-solid fa-water fa-fw"></i> - Blur - </label> - <div class="control"> - <input type="range" - id="blur" - class="blur slider is-fullwidth is-primary" - min="0" max="1" value="0" step="0.05"> + <p class="menu-label"> + Distortion + </p> + <p class="menu-label"> + Blur and Sharpen + </p> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-water fa-fw"></i> + Blur + </label> + <div class="control"> + <input type="range" + id="blur" + class="blur slider is-fullwidth is-primary" + min="0" max="1" value="0" step="0.05"> + </div> </div> - </div> + </form> </div> </body> </html> |