2024-12-05 22:55:49 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2024-12-12 01:18:48 +01:00
|
|
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
2024-12-05 22:55:49 +01:00
|
|
|
<script src="main.js"></script>
|
2024-12-10 01:05:05 +01:00
|
|
|
<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">
|
2024-12-05 22:55:49 +01:00
|
|
|
<link rel="stylesheet" href="style.css">
|
2024-12-06 03:43:47 +01:00
|
|
|
<title>Imagine - Image Editor</title>
|
2024-12-05 22:55:49 +01:00
|
|
|
</head>
|
2024-12-10 06:28:50 +01:00
|
|
|
<body style="padding-top: 100dvh; " class="import-active">
|
2024-12-06 15:45:53 +01:00
|
|
|
<div class="navbar columns is-mobile is-fixed-top">
|
2024-12-06 03:43:47 +01:00
|
|
|
<div class="column">
|
2024-12-06 19:08:28 +01:00
|
|
|
<div class="hero is-fullheight" style="min-height: 100dvh;">
|
2024-12-06 03:43:47 +01:00
|
|
|
<div class="hero-body">
|
2024-12-12 01:18:48 +01:00
|
|
|
<div class="container" >
|
2024-12-10 03:14:49 +01:00
|
|
|
<canvas id="myCanvas" class="is-visible-editor" width="300" height="300"></canvas>
|
2024-12-10 06:28:50 +01:00
|
|
|
<video id="video" class="is-visible-camera" width="300" height="300"></video>
|
2024-12-12 01:18:48 +01:00
|
|
|
<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>
|
2024-12-10 06:28:50 +01:00
|
|
|
<div class="columns is-mobile is-visible-import">
|
2024-12-06 03:43:47 +01:00
|
|
|
<div class="column">
|
2024-12-06 19:06:31 +01:00
|
|
|
<button id="take-picture"
|
2024-12-10 01:05:05 +01:00
|
|
|
class="button is-large is-responsive is-fullwidth py-6"
|
|
|
|
|
style="display: flex; flex-direction: column; align-items: center;"
|
|
|
|
|
>
|
2024-12-10 06:28:50 +01:00
|
|
|
<i class="fa-solid fa-6x fa-video mb-4"></i>
|
|
|
|
|
Use Camera
|
2024-12-06 03:43:47 +01:00
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="column">
|
2024-12-06 19:06:31 +01:00
|
|
|
<label for="upload-image"
|
2024-12-10 01:05:05 +01:00
|
|
|
class="button is-large is-responsive is-fullwidth py-6"
|
|
|
|
|
style="display: flex; flex-direction: column; align-items: center;"
|
|
|
|
|
>
|
|
|
|
|
<i class="fa-solid fa-6x fa-upload mb-4"></i>
|
|
|
|
|
<span>
|
|
|
|
|
Upload an Image
|
|
|
|
|
</span>
|
2024-12-06 19:06:31 +01:00
|
|
|
</label>
|
|
|
|
|
<input type="file" id="upload-image" accept="image/*" style="display: none">
|
2024-12-06 03:43:47 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-12-06 15:45:53 +01:00
|
|
|
</div><br>
|
2024-12-10 03:14:49 +01:00
|
|
|
<a href="#settings" class="button is-hidden-desktop is-visible-editor" style="position: absolute; right: 30px;
|
2024-12-06 15:45:53 +01:00
|
|
|
bottom: 30px">
|
2024-12-10 01:05:05 +01:00
|
|
|
<i class="fa-solid fa-sliders mr-2"></i> Settings
|
2024-12-06 15:45:53 +01:00
|
|
|
</a>
|
2024-12-10 06:28:50 +01:00
|
|
|
<button id="back" class="button is-hidden-import" style="position: absolute; left: 30px;
|
2024-12-10 03:14:49 +01:00
|
|
|
top: 30px">
|
|
|
|
|
<i class="fa-solid fa-arrow-left mr-2"></i> Back
|
|
|
|
|
</button>
|
2024-12-10 06:28:50 +01:00
|
|
|
<div style="position: absolute; bottom: 30px; left: 30px; right: 30px">
|
|
|
|
|
<button id="cheese" class="button is-large is-fullwidth is-visible-camera" >
|
|
|
|
|
<i class="fa-solid fa-camera mr-2"></i> Take a Picture
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2024-12-06 03:43:47 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-12-05 22:55:49 +01:00
|
|
|
</div>
|
2024-12-10 03:14:49 +01:00
|
|
|
<div class="column is-narrow has-background-black-ter is-hidden-mobile is-hidden-tablet-only is-visible-editor">
|
2024-12-10 04:33:17 +01:00
|
|
|
<aside class="menu mr-3" style="width: 300px">
|
2024-12-06 03:43:47 +01:00
|
|
|
<h1 class="title">Imagine</h1>
|
|
|
|
|
<h2 class="subtitle">Image Editor</h2>
|
|
|
|
|
|
2024-12-10 03:14:49 +01:00
|
|
|
<!-- 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>
|
2024-12-06 03:43:47 +01:00
|
|
|
|
2024-12-10 03:14:49 +01:00
|
|
|
<p class="menu-label">
|
2024-12-06 03:43:47 +01:00
|
|
|
Color Correction
|
2024-12-10 03:14:49 +01:00
|
|
|
</p>
|
2024-12-06 03:43:47 +01:00
|
|
|
|
2024-12-10 03:14:49 +01:00
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">
|
|
|
|
|
<i class="fa-solid fa-sun fa-fw"></i>
|
|
|
|
|
Brightness
|
2024-12-10 04:33:17 +01:00
|
|
|
<span class="icon is-pulled-right brightness-reset">
|
|
|
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
|
|
|
</span>
|
2024-12-10 03:14:49 +01:00
|
|
|
</label>
|
|
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
|
|
|
|
id="brightness"
|
|
|
|
|
class="brightness slider is-fullwidth is-primary"
|
2024-12-12 02:19:05 +01:00
|
|
|
min="0" max="2" value="1" step="0.01">
|
2024-12-10 03:14:49 +01:00
|
|
|
</div>
|
2024-12-06 03:43:47 +01:00
|
|
|
</div>
|
2024-12-10 03:14:49 +01:00
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">
|
|
|
|
|
<i class="fa-solid fa-leaf fa-fw"></i>
|
|
|
|
|
Saturation
|
2024-12-10 04:33:17 +01:00
|
|
|
<span class="icon is-pulled-right saturate-reset">
|
|
|
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
|
|
|
</span>
|
2024-12-10 03:14:49 +01:00
|
|
|
</label>
|
|
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
|
|
|
|
id="saturate"
|
|
|
|
|
class="saturate slider is-fullwidth is-primary"
|
2024-12-12 01:18:48 +01:00
|
|
|
min="0" max="2" value="1" step="0.01">
|
2024-12-10 03:14:49 +01:00
|
|
|
</div>
|
2024-12-06 03:43:47 +01:00
|
|
|
</div>
|
2024-12-10 03:14:49 +01:00
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">
|
|
|
|
|
<i class="fa-solid fa-circle-half-stroke fa-fw"></i>
|
|
|
|
|
Contrast
|
2024-12-10 04:33:17 +01:00
|
|
|
<span class="icon is-pulled-right contrast-reset">
|
|
|
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
|
|
|
</span>
|
2024-12-10 03:14:49 +01:00
|
|
|
</label>
|
|
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
|
|
|
|
id="contrast"
|
|
|
|
|
class="contrast slider is-fullwidth is-primary"
|
2024-12-12 01:18:48 +01:00
|
|
|
min="0" max="2" value="1" step="0.01">
|
2024-12-10 03:14:49 +01:00
|
|
|
</div>
|
2024-12-06 03:43:47 +01:00
|
|
|
</div>
|
2024-12-12 02:19:05 +01:00
|
|
|
<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>
|
2024-12-06 03:43:47 +01:00
|
|
|
|
2024-12-10 03:14:49 +01:00
|
|
|
<p class="menu-label">
|
2024-12-12 02:19:05 +01:00
|
|
|
Filters
|
2024-12-10 03:14:49 +01:00
|
|
|
</p>
|
2024-12-12 02:19:05 +01:00
|
|
|
<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>
|
2024-12-10 03:14:49 +01:00
|
|
|
<p class="menu-label">
|
2024-12-06 03:43:47 +01:00
|
|
|
Blur and Sharpen
|
2024-12-10 03:14:49 +01:00
|
|
|
</p>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">
|
|
|
|
|
<i class="fa-solid fa-water fa-fw"></i>
|
|
|
|
|
Blur
|
2024-12-10 04:33:17 +01:00
|
|
|
<span class="icon is-pulled-right blur-reset">
|
|
|
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
|
|
|
</span>
|
2024-12-10 03:14:49 +01:00
|
|
|
</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>
|
2024-12-08 02:59:45 +01:00
|
|
|
</div>
|
2024-12-10 03:14:49 +01:00
|
|
|
</form>
|
2024-12-06 03:43:47 +01:00
|
|
|
</aside>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-12-10 03:14:49 +01:00
|
|
|
<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>
|
2024-12-06 04:07:43 +01:00
|
|
|
|
2024-12-10 03:14:49 +01:00
|
|
|
<p class="menu-label">
|
|
|
|
|
Color Correction
|
|
|
|
|
</p>
|
2024-12-06 04:07:43 +01:00
|
|
|
|
2024-12-10 03:14:49 +01:00
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">
|
|
|
|
|
<i class="fa-solid fa-sun fa-fw"></i>
|
|
|
|
|
Brightness
|
2024-12-10 04:33:17 +01:00
|
|
|
<span class="icon is-pulled-right brightness-reset">
|
|
|
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
|
|
|
</span>
|
2024-12-10 03:14:49 +01:00
|
|
|
</label>
|
|
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
|
|
|
|
id="brightness"
|
|
|
|
|
class="brightness slider is-fullwidth is-primary"
|
2024-12-12 01:18:48 +01:00
|
|
|
min="0" max="2" value="1" step="0.01">
|
2024-12-10 03:14:49 +01:00
|
|
|
</div>
|
2024-12-06 04:07:43 +01:00
|
|
|
</div>
|
2024-12-10 03:14:49 +01:00
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">
|
|
|
|
|
<i class="fa-solid fa-leaf fa-fw"></i>
|
|
|
|
|
Saturation
|
2024-12-10 04:33:17 +01:00
|
|
|
<span class="icon is-pulled-right saturate-reset">
|
|
|
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
|
|
|
</span>
|
2024-12-10 03:14:49 +01:00
|
|
|
</label>
|
|
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
|
|
|
|
id="saturate"
|
|
|
|
|
class="saturate slider is-fullwidth is-primary"
|
2024-12-12 01:18:48 +01:00
|
|
|
min="0" max="2" value="1" step="0.01">
|
2024-12-10 03:14:49 +01:00
|
|
|
</div>
|
2024-12-06 04:07:43 +01:00
|
|
|
</div>
|
2024-12-10 03:14:49 +01:00
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">
|
|
|
|
|
<i class="fa-solid fa-circle-half-stroke fa-fw"></i>
|
|
|
|
|
Contrast
|
2024-12-10 04:33:17 +01:00
|
|
|
<span class="icon is-pulled-right contrast-reset">
|
|
|
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
|
|
|
</span>
|
2024-12-10 03:14:49 +01:00
|
|
|
</label>
|
|
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
|
|
|
|
id="contrast"
|
|
|
|
|
class="contrast slider is-fullwidth is-primary"
|
2024-12-12 01:18:48 +01:00
|
|
|
min="0" max="2" value="1" step="0.01">
|
2024-12-10 03:14:49 +01:00
|
|
|
</div>
|
2024-12-06 04:07:43 +01:00
|
|
|
</div>
|
2024-12-12 02:19:05 +01:00
|
|
|
<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>
|
2024-12-06 04:07:43 +01:00
|
|
|
|
2024-12-10 03:14:49 +01:00
|
|
|
<p class="menu-label">
|
2024-12-12 02:19:05 +01:00
|
|
|
Filters
|
2024-12-10 03:14:49 +01:00
|
|
|
</p>
|
2024-12-12 02:19:05 +01:00
|
|
|
<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>
|
2024-12-10 03:14:49 +01:00
|
|
|
<p class="menu-label">
|
|
|
|
|
Blur and Sharpen
|
|
|
|
|
</p>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">
|
|
|
|
|
<i class="fa-solid fa-water fa-fw"></i>
|
|
|
|
|
Blur
|
2024-12-10 04:33:17 +01:00
|
|
|
<span class="icon is-pulled-right blur-reset">
|
|
|
|
|
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
|
|
|
|
|
</span>
|
2024-12-10 03:14:49 +01:00
|
|
|
</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>
|
2024-12-08 02:59:45 +01:00
|
|
|
</div>
|
2024-12-10 03:14:49 +01:00
|
|
|
</form>
|
2024-12-06 04:07:43 +01:00
|
|
|
</div>
|
2024-12-05 22:55:49 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
