feat: basic desktop layout

2 files changed, 335 insertions, 10 deletions

diff --git a/bulma-slider.css b/bulma-slider.css
new file mode 100644
index 0000000..cafa942
--- /dev/null
+++ b/bulma-slider.css
@@ -0,0 +1,256 @@
+input[type=range].slider {
+  height: 25px;
+  -webkit-appearance: none;
+  margin: 10px 0;
+  background-color: inherit;
+}
+
+input[type=range].slider.is-fullwidth {
+  display: block;
+  width: 100%;
+}
+input[type=range].slider:focus {
+  outline: none;
+}
+
+input[type=range].slider.has-output + output {
+  width: 4rem;
+  background-color: #4a4a4a;
+  border-radius: 4px;
+  padding: .4rem .8rem;
+  font-size: .75rem;
+  line-height: .75rem;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #fff;
+  overflow: hidden;
+  pointer-events: none;
+  z-index:200;
+}
+
+input[type=range].slider.has-output {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+input[type=range].slider.is-fullwidth.has-output {
+  width: calc(100% - 5.2rem);
+}
+
+input[type=range].slider.has-output + output {
+  display: inline-block;
+  margin-left: .75rem;
+  vertical-align: middle;
+}
+
+input[type=range].slider::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 5px;
+  cursor: pointer;
+  animate: 0.2s;
+  box-shadow: 0px 0px 0px #000000;
+  background-color: #dbdbdb;
+  border-radius: 4px;
+  border: 0px solid #000000;
+}
+input[type=range].slider::-webkit-slider-thumb {
+  box-shadow: 0px 0px 0px #000000;
+  border: 1px solid #b5b5b5;
+  height: 18px;
+  width: 18px;
+  border-radius: 25px;
+  background-color: #ffffff;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -7px;
+}
+input[type=range].slider:focus::-webkit-slider-runnable-track {
+  background-color: #dbdbdb;
+}
+
+input[type=range].slider::-moz-range-track {
+  width: 100%;
+  height: 5px;
+  cursor: pointer;
+  animate: 0.2s;
+  box-shadow: 0px 0px 0px #000000;
+  background-color: #dbdbdb;
+  border-radius: 4px;
+  border: 0px solid #000000;
+}
+input[type=range].slider::-moz-range-thumb {
+  box-shadow: 0px 0px 0px #000000;
+  border: 1px solid #b5b5b5;
+  height: 18px;
+  width: 18px;
+  border-radius: 25px;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+input[type=range].slider::-ms-track {
+  width: 100%;
+  height: 5px;
+  cursor: pointer;
+  animate: 0.2s;
+  background-color: transparent;
+  border-color: transparent;
+  color: transparent;
+}
+input[type=range].slider::-ms-fill-lower {
+  background-color: #dbdbdb;
+  border: 0px solid #000000;
+  border-radius: 8px;
+  box-shadow: 0px 0px 0px #000000;
+}
+input[type=range].slider::-ms-fill-upper {
+  background-color: #dbdbdb;
+  border: 0px solid #000000;
+  border-radius: 4px;
+  box-shadow: 0px 0px 0px #000000;
+}
+input[type=range].slider::-ms-thumb {
+  margin-top: 1px;
+  box-shadow: 0px 0px 0px #000000;
+  border: 1px solid #b5b5b5;
+  height: 18px;
+  width: 18px;
+  border-radius: 25px;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+input[type=range].slider:focus::-ms-fill-lower {
+  background-color: #dbdbdb;
+}
+input[type=range].slider:focus::-ms-fill-upper {
+  background-color: #dbdbdb;
+}
+
+input[type=range].slider.is-primary::-webkit-slider-runnable-track {
+  background-color: #00d1b2 !important;
+}
+input[type=range].slider.is-primary::-moz-range-track {
+  background-color: #00d1b2 !important;
+}
+input[type=range].slider.is-primary::-ms-fill-lower {
+  background-color: #00d1b2 !important;
+}
+input[type=range].slider.is-primary::-ms-fill-upper {
+  background-color: #00d1b2 !important;
+}
+
+input[type=range].slider.is-link::-webkit-slider-runnable-track {
+  background-color: #3273dc !important;
+}
+input[type=range].slider.is-link::-moz-range-track {
+  background-color: #3273dc !important;
+}
+input[type=range].slider.is-link::-ms-fill-lower {
+  background-color: #3273dc !important;
+}
+input[type=range].slider.is-link::-ms-fill-upper {
+  background-color: #3273dc !important;
+}
+
+input[type=range].slider.is-info::-webkit-slider-runnable-track {
+  background-color: #209cee !important;
+}
+input[type=range].slider.is-info::-moz-range-track {
+  background-color: #209cee !important;
+}
+input[type=range].slider.is-info::-ms-fill-lower {
+  background-color: #209cee !important;
+}
+input[type=range].slider.is-info::-ms-fill-upper {
+  background-color: #209cee !important;
+}
+
+input[type=range].slider.is-success::-webkit-slider-runnable-track {
+  background-color: #23d160 !important;
+}
+input[type=range].slider.is-success::-moz-range-track {
+  background-color: #23d160 !important;
+}
+input[type=range].slider.is-success::-ms-fill-lower {
+  background-color: #23d160 !important;
+}
+input[type=range].slider.is-success::-ms-fill-upper {
+  background-color: #23d160 !important;
+}
+
+input[type=range].slider.is-warning::-webkit-slider-runnable-track {
+  background-color: #ffdd57 !important;
+}
+input[type=range].slider.is-warning::-moz-range-track {
+  background-color: #ffdd57 !important;
+}
+input[type=range].slider.is-warning::-ms-fill-lower {
+  background-color: #ffdd57 !important;
+}
+input[type=range].slider.is-warning::-ms-fill-upper {
+  background-color: #ffdd57 !important;
+}
+
+input[type=range].slider.is-danger::-webkit-slider-runnable-track {
+  background-color: #ff3860 !important;
+}
+input[type=range].slider.is-danger::-moz-range-track {
+  background-color: #ff3860 !important;
+}
+input[type=range].slider.is-danger::-ms-fill-lower {
+  background-color: #ff3860 !important;
+}
+input[type=range].slider.is-danger::-ms-fill-upper {
+  background-color: #ff3860 !important;
+}
+
+input[type=range].slider.is-white.has-output + output {
+  background-color: #fff;
+  color: #0a0a0a;
+}
+
+input[type=range].slider.is-black.has-output + output {
+  background-color: #0a0a0a;
+  color: #ffffff;
+}
+
+input[type=range].slider.is-light.has-output + output {
+  background-color: #f5f5f5;
+  color: #363636;
+}
+
+input[type=range].slider.is-dark.has-output + output {
+  background-color: #363636;
+  color: #f5f5f5;
+}
+
+input[type=range].slider.is-primary.has-output + output {
+  background-color: #00d1b2;
+  color: #ffffff;
+}
+
+input[type=range].slider.is-link.has-output + output {
+  background-color: #3273dc;
+  color: #ffffff;
+}
+
+input[type=range].slider.is-info.has-output + output {
+  background-color: #209cee;
+  color: #ffffff;
+}
+
+input[type=range].slider.is-success.has-output + output {
+  background-color: #23d160;
+  color: #ffffff;
+}
+
+input[type=range].slider.is-warning.has-output + output {
+  background-color: #ffdd57;
+  color: rgba(0, 0, 0, .7);
+}
+
+input[type=range].slider.is-danger.has-output + output {
+  background-color: #ff3860;
+  color: #ffffff;
+}
diff --git a/index.html b/index.html
index 5434fab..a7a0b8c 100644
--- a/index.html
+++ b/index.html
@@ -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>