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>
|
|
|
|
|
<link rel="stylesheet" href="bulma.min.css">
|
2024-12-06 03:43:47 +01:00
|
|
|
<link rel="stylesheet" href="bulma-slider.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"
|
|
|
|
|
class="button is-large is-responsive is-fullwidth">
|
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"
|
|
|
|
|
class="button is-large is-responsive is-fullwidth">
|
2024-12-06 03:43:47 +01:00
|
|
|
Upload an Image
|
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">
|
|
|
|
|
Settings
|
|
|
|
|
</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-06 03:43:47 +01:00
|
|
|
Share
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<p class="menu-label">
|
|
|
|
|
Color Correction
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">Brightness</label>
|
|
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
2024-12-07 20:24:16 +01:00
|
|
|
id="brightness"
|
2024-12-06 03:43:47 +01:00
|
|
|
class="slider is-fullwidth is-primary"
|
|
|
|
|
min="0" max="100" value="50" step="1">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">Saturation</label>
|
|
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
2024-12-07 20:24:16 +01:00
|
|
|
id="saturation"
|
2024-12-06 03:43:47 +01:00
|
|
|
class="slider is-fullwidth is-primary"
|
|
|
|
|
min="0" max="100" value="50" step="1">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">Contrast</label>
|
|
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
2024-12-07 20:24:16 +01:00
|
|
|
id="contrast"
|
2024-12-06 03:43:47 +01:00
|
|
|
class="slider is-fullwidth is-primary"
|
|
|
|
|
min="0" max="100" value="50" step="1">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p class="menu-label">
|
|
|
|
|
Distortion
|
|
|
|
|
</p>
|
|
|
|
|
<p class="menu-label">
|
|
|
|
|
Blur and Sharpen
|
|
|
|
|
</p>
|
|
|
|
|
</aside>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-12-06 15:45:53 +01:00
|
|
|
<div class="notification is-fullwidth is-hidden-desktop" style="z-index: 200">
|
|
|
|
|
<span id="settings"></span>
|
|
|
|
|
<a href="#top" class="delete"></a>
|
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-06 04:07:43 +01:00
|
|
|
Share
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<p class="menu-label">
|
|
|
|
|
Color Correction
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">Brightness</label>
|
|
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
|
|
|
|
id="slider0"
|
|
|
|
|
class="slider is-fullwidth is-primary"
|
|
|
|
|
min="0" max="100" value="50" step="1">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">Saturation</label>
|
|
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
|
|
|
|
id="slider0"
|
|
|
|
|
class="slider is-fullwidth is-primary"
|
|
|
|
|
min="0" max="100" value="50" step="1">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">Contrast</label>
|
|
|
|
|
<div class="control">
|
|
|
|
|
<input type="range"
|
|
|
|
|
id="slider0"
|
|
|
|
|
class="slider is-fullwidth is-primary"
|
|
|
|
|
min="0" max="100" value="50" step="1">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p class="menu-label">
|
|
|
|
|
Distortion
|
|
|
|
|
</p>
|
|
|
|
|
<p class="menu-label">
|
|
|
|
|
Blur and Sharpen
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
2024-12-05 22:55:49 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
