From 23adbdeaa50b64a9824ba95bd7bfa783b58cfb46 Mon Sep 17 00:00:00 2001 From: AsherSeiling Date: Fri, 3 Jul 2020 15:29:37 -0500 Subject: [PATCH] Switching the styleing from the style tag to a stlylesheet, and cleaning up the front-end design. --- draw.php | 61 +++++++++++++++++++------------------ index.css | 68 +++++++++++++++++++++++++++++++++++++++++ index.php | 90 ++++++++++++++++++++++++++----------------------------- 3 files changed, 140 insertions(+), 79 deletions(-) create mode 100644 index.css diff --git a/draw.php b/draw.php index a4be642..988e776 100755 --- a/draw.php +++ b/draw.php @@ -35,24 +35,11 @@ print << - - + @@ -60,24 +47,36 @@ - -
-
- - - - - -
-
- 		- -
-
- +
+
+

+ Big Canvas Demo +

+
- -
+
+ +
+
+
+
+
+ +
+ + + + + +
+
+ 		+ +
+
+ +
+
EOF; diff --git a/index.css b/index.css new file mode 100644 index 0000000..0d62c39 --- /dev/null +++ b/index.css @@ -0,0 +1,68 @@ +* { + margin: 0; +} + +body { + font-family: Arial, Helvetica, sans-serif; + background-color: rgb(233, 233, 233); +} + +.headbar { + background-color: black; +} + +#mycanvas { + border: 3pt #000 solid; + background-color: #fff; + cursor: pointer; + border-radius: 3pt; +} + +#mycanvasWrapper { + position: relative; +} + +#selectedBox { + border: 1px rgba(0, 50, 100, 0.5) solid; + background-color: rgba(0, 50, 100, 0.25); + position: absolute; + pointer-events: none; +} + + +h2 { + color: white; + margin-left: 20pt; +} + +h2:hover { + color: rgb(190, 190, 190); +} + +p { + color: black; + font-size: 10pt; + margin-left: 20pt; +} + +a { + color: rgb(0, 162, 255); +} + +input { + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-weight: bold; + font-size: 10pt; +} + +#saveButton, #chose_color { + margin-left: 20pt; + background-color: rgb(255, 255, 255); + border: 2.5pt solid black; + padding: 5pt; + border-radius: 5pt; +} + +input:hover { + color: rgb(99, 99, 99); +} diff --git a/index.php b/index.php index bd2e556..3bf7d36 100755 --- a/index.php +++ b/index.php @@ -6,56 +6,50 @@ - - - - - - - - - + + + + + + + + -

Big Canvas Demo

- -
- YouTube video walkthrough: https://youtu.be/t1aXuJkmTg8
- Source code: https://github.com/techleadhd/bigcanvasdemo/
-
-Looking for more coding tips?
-Join ex-Google/ex-Facebook engineers at - http://techinterviewpro.com for interview prep to FANG companies. +
+
+

Big Canvas Demo

+
- -
- -
- + +
+
+

+ YouTube video walkthrough: https://youtu.be/t1aXuJkmTg8 +

+
+

+ Source code: https://github.com/techleadhd/bigcanvasdemo/ +

+
+
+ +
+
+ +
+
+
+

+ Looking for more coding tips? +

+
+

+ Join ex-Google/ex-Facebook engineers at + http://techinterviewpro.com for interview prep to FANG companies. +

+