383 lines
14 KiB
HTML
383 lines
14 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>
|