93 lines
2.9 KiB
HTML
93 lines
2.9 KiB
HTML
<!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">
|
|
<link rel="stylesheet" href="bulma-slider.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
<title>Imagine - Image Editor</title>
|
|
</head>
|
|
<body>
|
|
<div class="navbar columns is-mobile">
|
|
<div class="column">
|
|
<div class="hero is-fullheight">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<div class="columns is-mobile">
|
|
<div class="column">
|
|
<button
|
|
class="button is-large is-fullwidth"
|
|
style="padding: 100% 0 100% 0">
|
|
Take a Picture
|
|
</button>
|
|
</div>
|
|
<div class="column">
|
|
<button
|
|
class="button is-large is-fullwidth"
|
|
style="padding: 100% 0 100% 0">
|
|
Upload an Image
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
|
|
<button class="button is-primary">
|
|
Save Image
|
|
</button>
|
|
<button class="button is-secondary">
|
|
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>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|