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">
|
|
|
|
|
<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-06 19:08:28 +01:00
|
|
|
<body style="padding-top: 100dvh; ">
|
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">
|
|
|
|
|
<div class="container">
|
2024-12-06 19:06:31 +01:00
|
|
|
<canvas id="myCanvas" class="is-hidden" width="300" height="300"></canvas>
|
|
|
|
|
<div id="imports" class="columns is-mobile">
|
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;"
|
|
|
|
|
>
|
|
|
|
|
<i class="fa-solid fa-6x fa-camera mb-4"></i>
|
2024-12-06 03:43:47 +01:00
|
|
|
Take a Picture
|
|
|
|
|
</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>
|
|
|
|
|
<a href="#settings" class="button is-hidden-desktop" style="position: absolute; right: 30px;
|
|
|
|
|
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-06 03:43:47 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-12-05 22:55:49 +01:00
|
|
|
</div>
|
2024-12-06 03:43:47 +01:00
|
|
|
<div class="column is-narrow has-background-black-ter is-hidden-mobile is-hidden-tablet-only">
|
|
|
|
|
<aside class="menu" style="width: 300px">
|
|
|
|
|
<h1 class="title">Imagine</h1>
|
|
|
|
|
<h2 class="subtitle">Image Editor</h2>
|
|
|
|
|
|
2024-12-07 20:24:16 +01:00
|
|
|
<button id="save" class="button is-primary">
|
2024-12-06 03:43:47 +01:00
|
|
|
Save Image
|
|
|
|
|
</button>
|
2024-12-07 20:24:16 +01:00
|
|
|
<button id="share" class="button is-secondary">
|
2024-12-10 01:05:05 +01:00
|
|
|
<i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
|
2024-12-06 03:43:47 +01:00
|
|
|
Share
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<p class="menu-label">
|
|
|
|
|
Color Correction
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<div class="field">
|
2024-12-10 01:05:05 +01:00
|
|
|
<label class="label">
|
|
|
|
|
<i class="fa-solid fa-sun fa-fw"></i>
|
|
|
|
|
Brightness
|
|
|
|
|
</label>
|
2024-12-06 03:43:47 +01:00
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
2024-12-07 20:24:16 +01:00
|
|
|
id="brightness"
|
2024-12-08 02:59:45 +01:00
|
|
|
class="brightness slider is-fullwidth is-primary"
|
|
|
|
|
min="0" max="2" value="1" step="0.1">
|
2024-12-06 03:43:47 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
2024-12-10 01:05:05 +01:00
|
|
|
<label class="label">
|
|
|
|
|
<i class="fa-solid fa-leaf fa-fw"></i>
|
|
|
|
|
Saturation
|
|
|
|
|
</label>
|
2024-12-06 03:43:47 +01:00
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
2024-12-08 02:59:45 +01:00
|
|
|
id="saturate"
|
|
|
|
|
class="saturate slider is-fullwidth is-primary"
|
|
|
|
|
min="0" max="2" value="1" step="0.1">
|
2024-12-06 03:43:47 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
2024-12-10 01:05:05 +01:00
|
|
|
<label class="label">
|
|
|
|
|
<i class="fa-solid fa-circle-half-stroke fa-fw"></i>
|
|
|
|
|
Contrast
|
|
|
|
|
</label>
|
2024-12-06 03:43:47 +01:00
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
2024-12-07 20:24:16 +01:00
|
|
|
id="contrast"
|
2024-12-08 02:59:45 +01:00
|
|
|
class="contrast slider is-fullwidth is-primary"
|
|
|
|
|
min="0" max="2" value="1" step="0.1">
|
2024-12-06 03:43:47 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p class="menu-label">
|
|
|
|
|
Distortion
|
|
|
|
|
</p>
|
|
|
|
|
<p class="menu-label">
|
|
|
|
|
Blur and Sharpen
|
|
|
|
|
</p>
|
2024-12-08 02:59:45 +01:00
|
|
|
<div class="field">
|
2024-12-10 01:05:05 +01:00
|
|
|
<label class="label">
|
|
|
|
|
<i class="fa-solid fa-water fa-fw"></i>
|
|
|
|
|
Blur
|
|
|
|
|
</label>
|
2024-12-08 02:59:45 +01:00
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
|
|
|
|
id="blur"
|
|
|
|
|
class="blur slider is-fullwidth is-primary"
|
2024-12-08 04:19:51 +01:00
|
|
|
min="0" max="1" value="0" step="0.05">
|
2024-12-08 02:59:45 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-12-06 03:43:47 +01:00
|
|
|
</aside>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-12-06 15:45:53 +01:00
|
|
|
<div class="notification is-fullwidth is-hidden-desktop" style="z-index: 200">
|
2024-12-07 20:24:16 +01:00
|
|
|
<button id="save" class="button is-primary">
|
2024-12-06 04:07:43 +01:00
|
|
|
Save Image
|
|
|
|
|
</button>
|
2024-12-07 20:24:16 +01:00
|
|
|
<button id="share" class="button is-secondary">
|
2024-12-10 01:05:05 +01:00
|
|
|
<i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
|
2024-12-06 04:07:43 +01:00
|
|
|
Share
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<p class="menu-label">
|
2024-12-08 02:59:45 +01:00
|
|
|
Color Correction
|
2024-12-06 04:07:43 +01:00
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<div class="field">
|
2024-12-10 01:05:05 +01:00
|
|
|
<label class="label">
|
|
|
|
|
<i class="fa-solid fa-sun fa-fw"></i>
|
|
|
|
|
Brightness
|
|
|
|
|
</label>
|
2024-12-06 04:07:43 +01:00
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
2024-12-08 02:59:45 +01:00
|
|
|
id="brightness"
|
|
|
|
|
class="brightness slider is-fullwidth is-primary"
|
|
|
|
|
min="0" max="2" value="1" step="0.1">
|
2024-12-06 04:07:43 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
2024-12-10 01:05:05 +01:00
|
|
|
<label class="label">
|
|
|
|
|
<i class="fa-solid fa-leaf fa-fw"></i>
|
|
|
|
|
Saturation
|
|
|
|
|
</label>
|
2024-12-06 04:07:43 +01:00
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
2024-12-08 02:59:45 +01:00
|
|
|
id="saturate"
|
|
|
|
|
class="saturate slider is-fullwidth is-primary"
|
|
|
|
|
min="0" max="2" value="1" step="0.1">
|
2024-12-06 04:07:43 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
2024-12-10 01:05:05 +01:00
|
|
|
<label class="label">
|
|
|
|
|
<i class="fa-solid fa-circle-half-stroke fa-fw"></i>
|
|
|
|
|
Contrast
|
|
|
|
|
</label>
|
2024-12-06 04:07:43 +01:00
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
2024-12-08 02:59:45 +01:00
|
|
|
id="contrast"
|
|
|
|
|
class="contrast slider is-fullwidth is-primary"
|
|
|
|
|
min="0" max="2" value="1" step="0.1">
|
2024-12-06 04:07:43 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p class="menu-label">
|
2024-12-08 02:59:45 +01:00
|
|
|
Distortion
|
2024-12-06 04:07:43 +01:00
|
|
|
</p>
|
|
|
|
|
<p class="menu-label">
|
2024-12-08 02:59:45 +01:00
|
|
|
Blur and Sharpen
|
2024-12-06 04:07:43 +01:00
|
|
|
</p>
|
2024-12-08 02:59:45 +01:00
|
|
|
<div class="field">
|
2024-12-10 01:05:05 +01:00
|
|
|
<label class="label">
|
|
|
|
|
<i class="fa-solid fa-water fa-fw"></i>
|
|
|
|
|
Blur
|
|
|
|
|
</label>
|
2024-12-08 02:59:45 +01:00
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
|
|
|
|
id="blur"
|
|
|
|
|
class="blur slider is-fullwidth is-primary"
|
2024-12-08 04:19:51 +01:00
|
|
|
min="0" max="1" value="0" step="0.05">
|
2024-12-08 02:59:45 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-12-06 04:07:43 +01:00
|
|
|
</div>
|
2024-12-05 22:55:49 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
