diff options
| author | Orangerot <purple@orangerot.dev> | 2024-12-06 03:43:47 +0100 |
|---|---|---|
| committer | Orangerot <purple@orangerot.dev> | 2024-12-06 03:43:47 +0100 |
| commit | b5b7ca1f8bb256af9ccdefe0957273d0eb0cb56b (patch) | |
| tree | cb1d264f451aa8045e65818783a9af943ce20566 /index.html | |
| parent | 5f0cd016bf1c6706571c198500c30ec5dc61c81f (diff) | |
feat: basic desktop layout
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 89 |
1 files changed, 79 insertions, 10 deletions
@@ -5,19 +5,88 @@ <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>Document</title> + <title>Imagine - Image Editor</title> </head> <body> - <section class="section"> - <div class="container"> - <h1 class="title"> - Hello World - </h1> - <p class="subtitle"> - My first website with <strong>Bulma</strong>! - </p> + <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> - </section> + <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> |