Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cleaning up the front-end #5

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Cleaning up the front-end #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 30 additions & 31 deletions draw.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,49 +35,48 @@
print <<<EOF
<!doctype html>
<html>
<style>
body {
margin: 30px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f0f0f0;
}

#mycanvas {
margin-top: 8px;
border: 1px #000 solid;
background-color: #fff;
}
</style>

<body>
<script>
let DIMENSION = $DIMENSION;
</script>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="pickr/dist/themes/classic.min.css" />
<!-- 'classic' theme -->
<script src="pickr/dist/pickr.min.js"></script>
<script src="draw.js?version=$VERSION"></script>

<body>
<input onclick="window.location='index.php'" value="Back" type=button>
<BR>
<BR>
<table>
<tr>
<Td>
<div id=picker></div>
</td>
<td>
<input type=button value="Choose Color" onclick="PICKR.show()" />
</td>
</tr>
</table>
<div>
<canvas id=mycanvas width=500 height=500></canvas>
<div class="headbar">
<br>
<h2>
Big Canvas Demo
</h2>
<br>
</div>
<input id=saveButton type=submit value=Save onclick="save($x, $y)">
<div id=spinner></div>
<br>
<input onclick="window.location='index.php'" value="Back" type=button style="margin-left: 20pt;">
<br>
<br>
<br>
<center>
<div>
<canvas id=mycanvas width=500 height=500 style="float: left; margin-left: 50pt;"></canvas>
</div>
<table>
<tr>
<Td>
<div id=picker></div>
</td>
<td>
<input id="chose_color" type=button value="Choose Color" onclick="PICKR.show()" style="margin-top: 100pt;"/>
</td>
</tr>
</table>
<br>
<input id=saveButton type=submit value=Save onclick="save($x, $y)">
<div id=spinner></div>
</center>
</body>
</html>
EOF;
68 changes: 68 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
90 changes: 42 additions & 48 deletions index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,56 +6,50 @@
<!doctype html>
<html>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-firestore.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js?version=$VERSION"></script>

<style>
body {
background-color: #f0f0f0;
margin: 16px;
font-family: Arial, Helvetica, sans-serif;
}

#mycanvas {
border: 1px #000 solid;
background-color: #fff;
cursor: pointer;
}

#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;
}
</style>
<script>
let DIMENSION = $DIMENSION;
</script>

<head>
<script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-firestore.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js?version=$VERSION"></script>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h2>Big Canvas Demo</h2>

<div style='padding:8px;color:#222'>
YouTube video walkthrough: <a href=https://youtu.be/t1aXuJkmTg8>https://youtu.be/t1aXuJkmTg8</a><BR>
Source code: <a href=https://github.com/techleadhd/bigcanvasdemo>https://github.com/techleadhd/bigcanvasdemo/</a><BR>
<BR>
Looking for more coding tips? <BR>
Join ex-Google/ex-Facebook engineers at
<a href=http://techinterviewpro.com>http://techinterviewpro.com</a> for interview prep to FANG companies.
<div class="headbar">
<br>
<h2>Big Canvas Demo</h2>
<br>
</div>

<div id=mycanvasWrapper>
<canvas id=mycanvas></canvas>
</div>

<script>
let DIMENSION = $DIMENSION;
</script>
<center>
<div style='padding:8px;color:#222; margin-top: 20pt;'>
<p>
YouTube video walkthrough: <a href=https://youtu.be/t1aXuJkmTg8>https://youtu.be/t1aXuJkmTg8</a>
</p>
<BR>
<p>
Source code: <a href=https://github.com/techleadhd/bigcanvasdemo>https://github.com/techleadhd/bigcanvasdemo/</a>
</p>
<BR>
<BR>

</div>
<div id=mycanvasWrapper style="margin-top: 25pt;">
<canvas id=mycanvas></canvas>
</div>
<br>
<br>
<p>
Looking for more coding tips?
</p>
<BR>
<p>
Join ex-Google/ex-Facebook engineers at
<a href=http://techinterviewpro.com>http://techinterviewpro.com</a> for interview prep to FANG companies.
</p>
</center>
</body>

</html>
Expand Down