diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 10 |
1 files changed, 9 insertions, 1 deletions
@@ -13,11 +13,16 @@ <title>Imagine - Image Editor</title> </head> <body class="import-active"> + <!-- + body classes allow for switching between the three views: + import-active, camera-active and editor-active + --> <div class="navbar columns is-mobile is-fixed-top"> <div class="column" id="viewport"> <div class="hero is-fullheight"> <div class="hero-body"> <div class="container" > + <!-- viewport that contains canvas/video/import buttons --> <canvas id="myCanvas" class="is-visible-editor" width="300" height="300"></canvas> <video id="video" class="is-visible-camera" width="300" height="300"></video> <div class="container has-text-centered mb-6 is-visible-import"> @@ -43,7 +48,8 @@ </label> </div> </div> - </div><br> + </div> + <!-- buttons inside of the viewport --> <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> @@ -56,6 +62,7 @@ </div> </div> </div> + <!-- settings menu for desktop use --> <div class="column is-narrow has-background-black-ter is-hidden-mobile is-hidden-tablet-only is-visible-editor"> <aside class="menu mr-3"> <h1 class="title">Imagine</h1> @@ -214,6 +221,7 @@ </aside> </div> </div> + <!-- settings menu for mobile use --> <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 --> <!-- #top is an anchor provided by the browser to go to the top of the page --> |