476 lines
16 KiB
HTML
476 lines
16 KiB
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" />
|
|
<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" />
|
|
<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">
|
|
<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"
|
|
>
|
|
<div class="container">
|
|
<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/*"
|
|
/>
|
|
<div class="container">
|
|
<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>
|
|
<button id="back" class="button is-hidden-import">
|
|
<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>
|
|
</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>
|
|
<h2 class="subtitle">Image Editor</h2>
|
|
|
|
<!-- 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-secondary share-image">
|
|
<i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
|
|
Share
|
|
</button>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<button class="button is-medium is-fullwidth lensflare">
|
|
Lensflare
|
|
</button>
|
|
</div>
|
|
|
|
<p class="menu-label">Color Correction</p>
|
|
|
|
<div class="field">
|
|
<label class="label">
|
|
<i class="fa-solid fa-sun fa-fw"></i>
|
|
Brightness
|
|
<span class="icon is-pulled-right brightness-reset">
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
</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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">
|
|
<i class="fa-solid fa-leaf fa-fw"></i>
|
|
Saturation
|
|
<span class="icon is-pulled-right saturate-reset">
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
</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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">
|
|
<i class="fa-solid fa-circle-half-stroke fa-fw"></i>
|
|
Contrast
|
|
<span class="icon is-pulled-right contrast-reset">
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
</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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">
|
|
<i class="fa-solid fa-palette fa-fw"></i>
|
|
Color
|
|
<span class="icon is-pulled-right hue-rotate-reset">
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
</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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="menu-label">Filters</p>
|
|
<div class="field">
|
|
<label class="label">
|
|
<i class="fa-solid fa-radio fa-fw"></i>
|
|
Grayscale
|
|
<span class="icon is-pulled-right grayscale-reset">
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
</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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">
|
|
<i class="fa-solid fa-hat-cowboy-side fa-fw"></i>
|
|
Sepia
|
|
<span class="icon is-pulled-right sepia-reset">
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
</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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">
|
|
<i class="fa-solid fa-circle-half-stroke fa-fw"></i>
|
|
Invert
|
|
<span class="icon is-pulled-right invert-reset">
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
</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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p class="menu-label">Blur and Sharpen</p>
|
|
<div class="field">
|
|
<label class="label">
|
|
<i class="fa-solid fa-water fa-fw"></i>
|
|
Blur
|
|
<span class="icon is-pulled-right blur-reset">
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
</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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</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 -->
|
|
<a href="#top" class="delete"></a>
|
|
|
|
<!-- 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-secondary share-image">
|
|
<i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
|
|
Share
|
|
</button>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<button class="button is-medium is-fullwidth lensflare">
|
|
Lensflare
|
|
</button>
|
|
</div>
|
|
|
|
<p class="menu-label">Color Correction</p>
|
|
|
|
<div class="field">
|
|
<label class="label">
|
|
<i class="fa-solid fa-sun fa-fw"></i>
|
|
Brightness
|
|
<span class="icon is-pulled-right brightness-reset">
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
</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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">
|
|
<i class="fa-solid fa-leaf fa-fw"></i>
|
|
Saturation
|
|
<span class="icon is-pulled-right saturate-reset">
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
</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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">
|
|
<i class="fa-solid fa-circle-half-stroke fa-fw"></i>
|
|
Contrast
|
|
<span class="icon is-pulled-right contrast-reset">
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
</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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">
|
|
<i class="fa-solid fa-palette fa-fw"></i>
|
|
Color
|
|
<span class="icon is-pulled-right hue-rotate-reset">
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
</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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="menu-label">Filters</p>
|
|
<div class="field">
|
|
<label class="label">
|
|
<i class="fa-solid fa-radio fa-fw"></i>
|
|
Grayscale
|
|
<span class="icon is-pulled-right grayscale-reset">
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
</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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">
|
|
<i class="fa-solid fa-hat-cowboy-side fa-fw"></i>
|
|
Sepia
|
|
<span class="icon is-pulled-right sepia-reset">
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
</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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">
|
|
<i class="fa-solid fa-circle-half-stroke fa-fw"></i>
|
|
Invert
|
|
<span class="icon is-pulled-right invert-reset">
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
</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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p class="menu-label">Blur and Sharpen</p>
|
|
<div class="field">
|
|
<label class="label">
|
|
<i class="fa-solid fa-water fa-fw"></i>
|
|
Blur
|
|
<span class="icon is-pulled-right blur-reset">
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
</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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|