From 1b89bc08a8d9cb7ab5d90bbbf9e4260b2f11cb59 Mon Sep 17 00:00:00 2001
From: jackflash776 <90075800+jackflash776@users.noreply.github.com>
Date: Sun, 7 Nov 2021 14:39:14 -0600
Subject: [PATCH] Minor UI Update

Cleaner UI that is more responsive to window size and looks closer to initial project wireframes. Needs to be refactored. Uses some repurposed code from: https://www.w3schools.com/html/html_responsive.asp
---
 HTMLPage.html | 119 +++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 88 insertions(+), 31 deletions(-)
diff --git a/HTMLPage.html b/HTMLPage.html
index de1dcc8..5dba704 100644
--- a/HTMLPage.html
+++ b/HTMLPage.html
@@ -1,33 +1,90 @@
+<!DOCTYPE html>
+<!-- Uses repurposed code from https://www.w3schools.com/html/html_responsive.asp in order to make window responsive.-->
 <html>
-    <head>
-    </head>
-
-    <body>
-        <canvas width="400" height="300" id="canvas1" style="border: 1px solid blue; display:block">sorry, no canvas, please, upgrade your browser</canvas>
-        <div>
-            Select an image to work with: <input type="file" name="pic" onclick="this.value=null;" onchange="loadImage(this.files[0])" accept="image/*">
-        </div>
-        <div>
-            <button onclick="toggleTool(2)">Liquify Tool</button>
-            <button onclick="toggleTool(1)">Swirl Tool</button>
-            Intensity: <input type="range" min="1" max="100" value="40" onchange="setEffectIntensity(this.value); document.getElementById('intensity').innerHTML=this.value;" />
-            <span id="intensity">40</span>
-
-            <button onclick="toggleTool(3)">Color Pick</button>
-        </div>
-        Selected Color: <div align="center" class="color-cell" id="selected-color"></div>
-        <div class = filterSliders id = "filterSliders">
-            Red: <input type = "range" min = "0" max = "255" value = "0" class = "slider" id = "redS" onchange = "document.getElementById('red').innerHTML = this.value;">
-            <span id="red">0</span>
-            Green: <input type = "range" min = "0" max = "255" value = "0" class = "slider" id = "greenS" onchange = "document.getElementById('green').innerHTML = this.value;">
-            <span id="green">0</span>
-            Blue: <input type = "range" min = "0" max = "255" value = "0" class = "slider" id = "blueS" onchange = "document.getElementById('blue').innerHTML = this.value;">
-            <span id="blue">0</span>
-            Opacity: <input type = "range" min = "0" max = "100" value = "0" class = "slider" id = "opS" onchange = "document.getElementById('opacity').innerHTML = this.value;">
-            <span id="opacity">0</span>
-     
-            <button type = "button" id = "filter" onclick = "colorFilter();">Filter</button>
-        </div>
-      <script src="image-proc.js"></script>
-    </body>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style>
+* {
+  box-sizing: border-box;
+}
+
+.menu {
+  float: left;
+  width: 20%;
+  text-align: center;
+}
+
+.menu a {
+  background-color: #e5e5e5;
+  padding: 8px;
+  margin-top: 7px;
+  display: block;
+  width: 100%;
+  color: black;
+}
+
+.main {
+  float: left;
+  width: 60%;
+  padding: 0 20px;
+}
+
+.right {
+  background-color: #e5e5e5;
+  float: left;
+  width: 20%;
+  padding: 15px;
+  margin-top: 7px;
+  text-align: center;
+}
+
+@media only screen and (max-width: 620px) {
+  /* For mobile phones: */
+  .menu, .main, .right {
+    width: 100%;
+  }
+}
+</style>
+</head>
+<body style="font-family:Helvetica;color:#aaaaaa;">
+
+<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
+  <h1>Welcome to the Image Editor!</h1>
+</div>
+
+<div style="overflow:auto">
+  <div class="menu">
+    <div class = filterSliders id = "filterSliders">
+      <a>Red: <input type = "range" min = "0" max = "255" value = "0" class = "slider" id = "redS" onchange = "document.getElementById('red').innerHTML = this.value;">
+      <span id="red">0</span></a>
+      <a>Green: <input type = "range" min = "0" max = "255" value = "0" class = "slider" id = "greenS" onchange = "document.getElementById('green').innerHTML = this.value;">
+      <span id="green">0</span></a>
+      <a>Blue: <input type = "range" min = "0" max = "255" value = "0" class = "slider" id = "blueS" onchange = "document.getElementById('blue').innerHTML = this.value;">
+      <span id="blue">0</span></a>
+      <a>Opacity: <input type = "range" min = "0" max = "100" value = "0" class = "slider" id = "opS" onchange = "document.getElementById('opacity').innerHTML = this.value;">
+      <span id="opacity">0</span>
+      <button type = "button" id = "filter" onclick = "colorFilter();">Filter</button></a>
+    </div>
+  </div>
+
+  <div class="main">
+    <canvas width="400" height="300" id="canvas1" style="border: 1px solid blue; display:block; margin-left: auto; margin-right: auto;">sorry, no canvas, please, upgrade your browser</canvas>
+    Select an image to work with: <input type="file" name="pic" onclick="this.value=null;" onchange="loadImage(this.files[0])" accept="image/*">
+  </div>
+  
+
+  <div class="right">
+    <h2>Tools</h2>
+    <button onclick="toggleTool(2)">Liquify Tool</button><br>
+    <button onclick="toggleTool(1)">Swirl Tool</button><br>
+    Swirl Intensity: <input type="range" min="1" max="100" value="40" onchange="setEffectIntensity(this.value); document.getElementById('intensity').innerHTML=this.value;" /> <br>
+    <button onclick="toggleTool(3)">Color Pick</button><br>
+    Selected Color: <div align="center" class="color-cell" id="selected-color"></div>
+  </div>
+</div>
+
+<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">made by Team the Team</div>
+
+<script src="image-proc.js"></script>
+</body>
 </html>
