index.html (16105B)
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> 7 <script src="main.js"></script> 8 <link rel="stylesheet" href="lib/bulma.min.css" /> 9 <link rel="stylesheet" href="lib/bulma-slider.css" /> 10 <link rel="stylesheet" href="lib/fontawesome/css/fontawesome.min.css" /> 11 <link rel="stylesheet" href="lib/fontawesome/css/solid.min.css" /> 12 <link rel="stylesheet" href="style.css" /> 13 <title>Imagine - Image Editor</title> 14 </head> 15 <body class="import-active"> 16 <!-- 17 body classes allow for switching between the three views: 18 import-active, camera-active and editor-active 19 --> 20 <div class="navbar columns is-mobile is-fixed-top"> 21 <div class="column" id="viewport"> 22 <div class="hero is-fullheight"> 23 <div class="hero-body"> 24 <div class="container"> 25 <!-- viewport that contains canvas/video/import buttons --> 26 <canvas 27 id="myCanvas" 28 class="is-visible-editor" 29 width="300" 30 height="300" 31 ></canvas> 32 <video 33 id="video" 34 class="is-visible-camera" 35 width="300" 36 height="300" 37 ></video> 38 <div class="container has-text-centered mb-6 is-visible-import"> 39 <h1 class="title is-1">Imagine</h1> 40 <h2 class="subtitle is-3">A simple Image Editor</h2> 41 </div> 42 <div class="columns is-mobile is-visible-import"> 43 <div class="column"> 44 <button 45 id="take-picture" 46 class="button is-large is-responsive is-fullwidth py-6" 47 > 48 <div class="container"> 49 <i class="fa-solid fa-6x fa-video mb-4"></i><br /> 50 Use Camera 51 </div> 52 </button> 53 </div> 54 <div class="column"> 55 <label 56 class="button is-large is-responsive is-fullwidth py-6" 57 > 58 <input 59 class="file-input" 60 type="file" 61 id="upload-image" 62 accept="image/*" 63 /> 64 <div class="container"> 65 <i class="fa-solid fa-6x fa-upload mb-4"></i><br /> 66 Choose a file… 67 </div> 68 </label> 69 </div> 70 </div> 71 </div> 72 <!-- buttons inside of the viewport --> 73 <a 74 id="settings-button" 75 href="#settings" 76 class="button is-hidden-desktop is-visible-editor" 77 > 78 <i class="fa-solid fa-sliders mr-2"></i> Settings 79 </a> 80 <button id="back" class="button is-hidden-import"> 81 <i class="fa-solid fa-arrow-left mr-2"></i> Back 82 </button> 83 <button id="cheese" class="button is-large is-visible-camera"> 84 <i class="fa-solid fa-camera mr-2"></i> Take a Picture 85 </button> 86 </div> 87 </div> 88 </div> 89 <!-- settings menu for desktop use --> 90 <div 91 class="column is-narrow has-background-black-ter is-hidden-mobile is-hidden-tablet-only is-visible-editor" 92 > 93 <aside class="menu mr-3"> 94 <h1 class="title">Imagine</h1> 95 <h2 class="subtitle">Image Editor</h2> 96 97 <!-- autocomplete off prevents browsers from remebering the value on page reloads --> 98 <form autocomplete="off"> 99 <div class="buttons"> 100 <button class="button is-primary save-image">Save Image</button> 101 <button class="button is-secondary share-image"> 102 <i class="fa-solid fa-share-from-square fa-fw mr-1"></i> 103 Share 104 </button> 105 </div> 106 107 <div class="field"> 108 <button class="button is-medium is-fullwidth lensflare"> 109 Lensflare 110 </button> 111 </div> 112 113 <p class="menu-label">Color Correction</p> 114 115 <div class="field"> 116 <label class="label"> 117 <i class="fa-solid fa-sun fa-fw"></i> 118 Brightness 119 <span class="icon is-pulled-right brightness-reset"> 120 <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> 121 </span> 122 </label> 123 <div class="control"> 124 <input 125 type="range" 126 id="brightness" 127 class="brightness slider is-fullwidth is-primary" 128 min="0" 129 max="2" 130 value="1" 131 step="0.01" 132 /> 133 </div> 134 </div> 135 <div class="field"> 136 <label class="label"> 137 <i class="fa-solid fa-leaf fa-fw"></i> 138 Saturation 139 <span class="icon is-pulled-right saturate-reset"> 140 <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> 141 </span> 142 </label> 143 <div class="control"> 144 <input 145 type="range" 146 id="saturate" 147 class="saturate slider is-fullwidth is-primary" 148 min="0" 149 max="2" 150 value="1" 151 step="0.01" 152 /> 153 </div> 154 </div> 155 <div class="field"> 156 <label class="label"> 157 <i class="fa-solid fa-circle-half-stroke fa-fw"></i> 158 Contrast 159 <span class="icon is-pulled-right contrast-reset"> 160 <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> 161 </span> 162 </label> 163 <div class="control"> 164 <input 165 type="range" 166 id="contrast" 167 class="contrast slider is-fullwidth is-primary" 168 min="0" 169 max="2" 170 value="1" 171 step="0.01" 172 /> 173 </div> 174 </div> 175 <div class="field"> 176 <label class="label"> 177 <i class="fa-solid fa-palette fa-fw"></i> 178 Color 179 <span class="icon is-pulled-right hue-rotate-reset"> 180 <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> 181 </span> 182 </label> 183 <div class="control"> 184 <input 185 type="range" 186 id="hue-rotate" 187 class="hue-rotate slider is-fullwidth is-primary" 188 min="-180" 189 max="180" 190 value="0" 191 step="1" 192 /> 193 </div> 194 </div> 195 196 <p class="menu-label">Filters</p> 197 <div class="field"> 198 <label class="label"> 199 <i class="fa-solid fa-radio fa-fw"></i> 200 Grayscale 201 <span class="icon is-pulled-right grayscale-reset"> 202 <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> 203 </span> 204 </label> 205 <div class="control"> 206 <input 207 type="range" 208 id="grayscale" 209 class="grayscale slider is-fullwidth is-primary" 210 min="0" 211 max="1" 212 value="0" 213 step="0.01" 214 /> 215 </div> 216 </div> 217 <div class="field"> 218 <label class="label"> 219 <i class="fa-solid fa-hat-cowboy-side fa-fw"></i> 220 Sepia 221 <span class="icon is-pulled-right sepia-reset"> 222 <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> 223 </span> 224 </label> 225 <div class="control"> 226 <input 227 type="range" 228 id="sepia" 229 class="sepia slider is-fullwidth is-primary" 230 min="0" 231 max="1" 232 value="0" 233 step="0.01" 234 /> 235 </div> 236 </div> 237 <div class="field"> 238 <label class="label"> 239 <i class="fa-solid fa-circle-half-stroke fa-fw"></i> 240 Invert 241 <span class="icon is-pulled-right invert-reset"> 242 <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> 243 </span> 244 </label> 245 <div class="control"> 246 <input 247 type="range" 248 id="invert" 249 class="invert slider is-fullwidth is-primary" 250 min="0" 251 max="1" 252 value="0" 253 step="0.01" 254 /> 255 </div> 256 </div> 257 <p class="menu-label">Blur and Sharpen</p> 258 <div class="field"> 259 <label class="label"> 260 <i class="fa-solid fa-water fa-fw"></i> 261 Blur 262 <span class="icon is-pulled-right blur-reset"> 263 <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> 264 </span> 265 </label> 266 <div class="control"> 267 <input 268 type="range" 269 id="blur" 270 class="blur slider is-fullwidth is-primary" 271 min="0" 272 max="1" 273 value="0" 274 step="0.05" 275 /> 276 </div> 277 </div> 278 </form> 279 </aside> 280 </div> 281 </div> 282 <!-- settings menu for mobile use --> 283 <div 284 id="settings" 285 class="notification is-fullwidth is-hidden-desktop is-visible-editor" 286 > 287 <!-- #settings is an anhor to scroll to when clicked on the settings-button --> 288 <!-- #top is an anchor provided by the browser to go to the top of the page --> 289 <a href="#top" class="delete"></a> 290 291 <!-- autocomplete off prevents browsers from remebering the value on page reloads --> 292 <form autocomplete="off"> 293 <div class="buttons"> 294 <button class="button is-primary save-image">Save Image</button> 295 <button class="button is-secondary share-image"> 296 <i class="fa-solid fa-share-from-square fa-fw mr-1"></i> 297 Share 298 </button> 299 </div> 300 301 <div class="field"> 302 <button class="button is-medium is-fullwidth lensflare"> 303 Lensflare 304 </button> 305 </div> 306 307 <p class="menu-label">Color Correction</p> 308 309 <div class="field"> 310 <label class="label"> 311 <i class="fa-solid fa-sun fa-fw"></i> 312 Brightness 313 <span class="icon is-pulled-right brightness-reset"> 314 <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> 315 </span> 316 </label> 317 <div class="control"> 318 <input 319 type="range" 320 id="brightness" 321 class="brightness slider is-fullwidth is-primary" 322 min="0" 323 max="2" 324 value="1" 325 step="0.01" 326 /> 327 </div> 328 </div> 329 <div class="field"> 330 <label class="label"> 331 <i class="fa-solid fa-leaf fa-fw"></i> 332 Saturation 333 <span class="icon is-pulled-right saturate-reset"> 334 <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> 335 </span> 336 </label> 337 <div class="control"> 338 <input 339 type="range" 340 id="saturate" 341 class="saturate slider is-fullwidth is-primary" 342 min="0" 343 max="2" 344 value="1" 345 step="0.01" 346 /> 347 </div> 348 </div> 349 <div class="field"> 350 <label class="label"> 351 <i class="fa-solid fa-circle-half-stroke fa-fw"></i> 352 Contrast 353 <span class="icon is-pulled-right contrast-reset"> 354 <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> 355 </span> 356 </label> 357 <div class="control"> 358 <input 359 type="range" 360 id="contrast" 361 class="contrast slider is-fullwidth is-primary" 362 min="0" 363 max="2" 364 value="1" 365 step="0.01" 366 /> 367 </div> 368 </div> 369 <div class="field"> 370 <label class="label"> 371 <i class="fa-solid fa-palette fa-fw"></i> 372 Color 373 <span class="icon is-pulled-right hue-rotate-reset"> 374 <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> 375 </span> 376 </label> 377 <div class="control"> 378 <input 379 type="range" 380 id="hue-rotate" 381 class="hue-rotate slider is-fullwidth is-primary" 382 min="-180" 383 max="180" 384 value="0" 385 step="1" 386 /> 387 </div> 388 </div> 389 390 <p class="menu-label">Filters</p> 391 <div class="field"> 392 <label class="label"> 393 <i class="fa-solid fa-radio fa-fw"></i> 394 Grayscale 395 <span class="icon is-pulled-right grayscale-reset"> 396 <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> 397 </span> 398 </label> 399 <div class="control"> 400 <input 401 type="range" 402 id="grayscale" 403 class="grayscale slider is-fullwidth is-primary" 404 min="0" 405 max="1" 406 value="0" 407 step="0.01" 408 /> 409 </div> 410 </div> 411 <div class="field"> 412 <label class="label"> 413 <i class="fa-solid fa-hat-cowboy-side fa-fw"></i> 414 Sepia 415 <span class="icon is-pulled-right sepia-reset"> 416 <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> 417 </span> 418 </label> 419 <div class="control"> 420 <input 421 type="range" 422 id="sepia" 423 class="sepia slider is-fullwidth is-primary" 424 min="0" 425 max="1" 426 value="0" 427 step="0.01" 428 /> 429 </div> 430 </div> 431 <div class="field"> 432 <label class="label"> 433 <i class="fa-solid fa-circle-half-stroke fa-fw"></i> 434 Invert 435 <span class="icon is-pulled-right invert-reset"> 436 <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> 437 </span> 438 </label> 439 <div class="control"> 440 <input 441 type="range" 442 id="invert" 443 class="invert slider is-fullwidth is-primary" 444 min="0" 445 max="1" 446 value="0" 447 step="0.01" 448 /> 449 </div> 450 </div> 451 <p class="menu-label">Blur and Sharpen</p> 452 <div class="field"> 453 <label class="label"> 454 <i class="fa-solid fa-water fa-fw"></i> 455 Blur 456 <span class="icon is-pulled-right blur-reset"> 457 <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> 458 </span> 459 </label> 460 <div class="control"> 461 <input 462 type="range" 463 id="blur" 464 class="blur slider is-fullwidth is-primary" 465 min="0" 466 max="1" 467 value="0" 468 step="0.05" 469 /> 470 </div> 471 </div> 472 </form> 473 </div> 474 </body> 475 </html>