diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 319 |
1 files changed, 206 insertions, 113 deletions
@@ -1,15 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="icon" type="image/x-icon" href="assets/favicon.ico"> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> <script src="main.js"></script> - <link rel="stylesheet" href="lib/bulma.min.css"> - <link rel="stylesheet" href="lib/bulma-slider.css"> - <link rel="stylesheet" href="lib/fontawesome/css/fontawesome.min.css"> - <link rel="stylesheet" href="lib/fontawesome/css/solid.min.css"> - <link rel="stylesheet" href="style.css"> + <link rel="stylesheet" href="lib/bulma.min.css" /> + <link rel="stylesheet" href="lib/bulma-slider.css" /> + <link rel="stylesheet" href="lib/fontawesome/css/fontawesome.min.css" /> + <link rel="stylesheet" href="lib/fontawesome/css/solid.min.css" /> + <link rel="stylesheet" href="style.css" /> <title>Imagine - Image Editor</title> </head> <body class="import-active"> @@ -21,49 +21,75 @@ <div class="column" id="viewport"> <div class="hero is-fullheight"> <div class="hero-body"> - <div class="container" > + <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> + <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"> <h1 class="title is-1">Imagine</h1> <h2 class="subtitle is-3">A simple Image Editor</h2> </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" > + <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> + <i class="fa-solid fa-6x fa-video mb-4"></i><br /> Use Camera </div> </button> </div> <div class="column"> - <label class="button is-large is-responsive is-fullwidth py-6" > - <input class="file-input" type="file" id="upload-image" accept="image/*"> + <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… + <i class="fa-solid fa-6x fa-upload mb-4"></i><br /> + Choose a file… </div> </label> </div> </div> </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 + 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"> - <i class="fa-solid fa-arrow-left mr-2"></i> Back + <i class="fa-solid fa-arrow-left mr-2"></i> Back </button> - <button id="cheese" class="button is-large is-visible-camera" > - <i class="fa-solid fa-camera mr-2"></i> Take a Picture + <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> <!-- settings menu for desktop use --> - <div class="column is-narrow has-background-black-ter is-hidden-mobile is-hidden-tablet-only is-visible-editor"> + <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> <h2 class="subtitle">Image Editor</h2> @@ -71,9 +97,7 @@ <!-- autocomplete off prevents browsers from remebering the value on page reloads --> <form autocomplete="off"> <div class="buttons"> - <button class="button is-primary save-image"> - Save Image - </button> + <button class="button is-primary save-image">Save Image</button> <button class="button is-secondary share-image"> <i class="fa-solid fa-share-from-square fa-fw mr-1"></i> Share @@ -86,9 +110,7 @@ </button> </div> - <p class="menu-label"> - Color Correction - </p> + <p class="menu-label">Color Correction</p> <div class="field"> <label class="label"> @@ -99,10 +121,15 @@ </span> </label> <div class="control"> - <input type="range" - id="brightness" - class="brightness slider is-fullwidth is-primary" - min="0" max="2" value="1" step="0.01"> + <input + type="range" + id="brightness" + class="brightness slider is-fullwidth is-primary" + min="0" + max="2" + value="1" + step="0.01" + /> </div> </div> <div class="field"> @@ -114,10 +141,15 @@ </span> </label> <div class="control"> - <input type="range" - id="saturate" - class="saturate slider is-fullwidth is-primary" - min="0" max="2" value="1" step="0.01"> + <input + type="range" + id="saturate" + class="saturate slider is-fullwidth is-primary" + min="0" + max="2" + value="1" + step="0.01" + /> </div> </div> <div class="field"> @@ -129,10 +161,15 @@ </span> </label> <div class="control"> - <input type="range" - id="contrast" - class="contrast slider is-fullwidth is-primary" - min="0" max="2" value="1" step="0.01"> + <input + type="range" + id="contrast" + class="contrast slider is-fullwidth is-primary" + min="0" + max="2" + value="1" + step="0.01" + /> </div> </div> <div class="field"> @@ -144,16 +181,19 @@ </span> </label> <div class="control"> - <input type="range" - id="hue-rotate" - class="hue-rotate slider is-fullwidth is-primary" - min="-180" max="180" value="0" step="1"> + <input + type="range" + id="hue-rotate" + class="hue-rotate slider is-fullwidth is-primary" + min="-180" + max="180" + value="0" + step="1" + /> </div> </div> - <p class="menu-label"> - Filters - </p> + <p class="menu-label">Filters</p> <div class="field"> <label class="label"> <i class="fa-solid fa-radio fa-fw"></i> @@ -163,10 +203,15 @@ </span> </label> <div class="control"> - <input type="range" - id="grayscale" - class="grayscale slider is-fullwidth is-primary" - min="0" max="1" value="0" step="0.01"> + <input + type="range" + id="grayscale" + class="grayscale slider is-fullwidth is-primary" + min="0" + max="1" + value="0" + step="0.01" + /> </div> </div> <div class="field"> @@ -178,10 +223,15 @@ </span> </label> <div class="control"> - <input type="range" - id="sepia" - class="sepia slider is-fullwidth is-primary" - min="0" max="1" value="0" step="0.01"> + <input + type="range" + id="sepia" + class="sepia slider is-fullwidth is-primary" + min="0" + max="1" + value="0" + step="0.01" + /> </div> </div> <div class="field"> @@ -193,15 +243,18 @@ </span> </label> <div class="control"> - <input type="range" - id="invert" - class="invert slider is-fullwidth is-primary" - min="0" max="1" value="0" step="0.01"> + <input + type="range" + id="invert" + class="invert slider is-fullwidth is-primary" + min="0" + max="1" + value="0" + step="0.01" + /> </div> </div> - <p class="menu-label"> - Blur and Sharpen - </p> + <p class="menu-label">Blur and Sharpen</p> <div class="field"> <label class="label"> <i class="fa-solid fa-water fa-fw"></i> @@ -211,10 +264,15 @@ </span> </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"> + <input + type="range" + id="blur" + class="blur slider is-fullwidth is-primary" + min="0" + max="1" + value="0" + step="0.05" + /> </div> </div> </form> @@ -222,7 +280,10 @@ </div> </div> <!-- settings menu for mobile use --> - <div id="settings" class="notification is-fullwidth is-hidden-desktop is-visible-editor"> + <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 --> <a href="#top" class="delete"></a> @@ -230,9 +291,7 @@ <!-- autocomplete off prevents browsers from remebering the value on page reloads --> <form autocomplete="off"> <div class="buttons"> - <button class="button is-primary save-image"> - Save Image - </button> + <button class="button is-primary save-image">Save Image</button> <button class="button is-secondary share-image"> <i class="fa-solid fa-share-from-square fa-fw mr-1"></i> Share @@ -245,9 +304,7 @@ </button> </div> - <p class="menu-label"> - Color Correction - </p> + <p class="menu-label">Color Correction</p> <div class="field"> <label class="label"> @@ -258,10 +315,15 @@ </span> </label> <div class="control"> - <input type="range" - id="brightness" - class="brightness slider is-fullwidth is-primary" - min="0" max="2" value="1" step="0.01"> + <input + type="range" + id="brightness" + class="brightness slider is-fullwidth is-primary" + min="0" + max="2" + value="1" + step="0.01" + /> </div> </div> <div class="field"> @@ -273,10 +335,15 @@ </span> </label> <div class="control"> - <input type="range" - id="saturate" - class="saturate slider is-fullwidth is-primary" - min="0" max="2" value="1" step="0.01"> + <input + type="range" + id="saturate" + class="saturate slider is-fullwidth is-primary" + min="0" + max="2" + value="1" + step="0.01" + /> </div> </div> <div class="field"> @@ -288,10 +355,15 @@ </span> </label> <div class="control"> - <input type="range" - id="contrast" - class="contrast slider is-fullwidth is-primary" - min="0" max="2" value="1" step="0.01"> + <input + type="range" + id="contrast" + class="contrast slider is-fullwidth is-primary" + min="0" + max="2" + value="1" + step="0.01" + /> </div> </div> <div class="field"> @@ -303,16 +375,19 @@ </span> </label> <div class="control"> - <input type="range" - id="hue-rotate" - class="hue-rotate slider is-fullwidth is-primary" - min="-180" max="180" value="0" step="1"> + <input + type="range" + id="hue-rotate" + class="hue-rotate slider is-fullwidth is-primary" + min="-180" + max="180" + value="0" + step="1" + /> </div> </div> - <p class="menu-label"> - Filters - </p> + <p class="menu-label">Filters</p> <div class="field"> <label class="label"> <i class="fa-solid fa-radio fa-fw"></i> @@ -322,10 +397,15 @@ </span> </label> <div class="control"> - <input type="range" - id="grayscale" - class="grayscale slider is-fullwidth is-primary" - min="0" max="1" value="0" step="0.01"> + <input + type="range" + id="grayscale" + class="grayscale slider is-fullwidth is-primary" + min="0" + max="1" + value="0" + step="0.01" + /> </div> </div> <div class="field"> @@ -337,10 +417,15 @@ </span> </label> <div class="control"> - <input type="range" - id="sepia" - class="sepia slider is-fullwidth is-primary" - min="0" max="1" value="0" step="0.01"> + <input + type="range" + id="sepia" + class="sepia slider is-fullwidth is-primary" + min="0" + max="1" + value="0" + step="0.01" + /> </div> </div> <div class="field"> @@ -352,15 +437,18 @@ </span> </label> <div class="control"> - <input type="range" - id="invert" - class="invert slider is-fullwidth is-primary" - min="0" max="1" value="0" step="0.01"> + <input + type="range" + id="invert" + class="invert slider is-fullwidth is-primary" + min="0" + max="1" + value="0" + step="0.01" + /> </div> </div> - <p class="menu-label"> - Blur and Sharpen - </p> + <p class="menu-label">Blur and Sharpen</p> <div class="field"> <label class="label"> <i class="fa-solid fa-water fa-fw"></i> @@ -370,10 +458,15 @@ </span> </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"> + <input + type="range" + id="blur" + class="blur slider is-fullwidth is-primary" + min="0" + max="1" + value="0" + step="0.05" + /> </div> </div> </form> |