1 | <!DOCTYPE html>
|
---|
2 | <html>
|
---|
3 | <head>
|
---|
4 | <title>Drawing Tools</title>
|
---|
5 | <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
|
---|
6 | <meta charset="utf-8">
|
---|
7 |
|
---|
8 | <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
---|
9 | <script src="historyManager.js"></script>
|
---|
10 | <script src="mapThemes.js"></script>
|
---|
11 | <script src="index.js"></script>
|
---|
12 | <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzunGwIF2OwsfrOkIC_8bhh0OPGZXo52Y&libraries=drawing&callback=initMap" async defer></script>
|
---|
13 |
|
---|
14 | <link rel="stylesheet" type="text/css" href="index.css">
|
---|
15 |
|
---|
16 | </head>
|
---|
17 | <body>
|
---|
18 | <div id = "ControlPanel">
|
---|
19 | <div id = "ControlButtons">
|
---|
20 | <button onclick="deleteAllShape()" accesskey="c">Clear All</button>
|
---|
21 | <button onclick="deleteSelectedShape()" accesskey="b">Delete Selected</button>
|
---|
22 | <button onclick="undo()" accesskey="n">Undo</button>
|
---|
23 | <button onclick="redo()" accesskey="n">Redo</button>
|
---|
24 | <input type="checkbox" name="draggableCB" id="draggableCB" value="false"> Lock all shapes location<br>
|
---|
25 | </div>
|
---|
26 |
|
---|
27 | <div id = "SecondRow">
|
---|
28 | <div id = "LineThickness">
|
---|
29 | <p>Line thickness: <input type="range" min="20" max="100" value="1" class="slider" id="thicknessRange"> </p>
|
---|
30 | <p>Value: <span id="thicknessRangeVal"></span></p>
|
---|
31 | </div>
|
---|
32 |
|
---|
33 | <div id = "ColourOpacity">
|
---|
34 | <p>Colour opacity: <input type="range" min="10" max="100" value="40" class="slider" id="colourOpacity"> </p>
|
---|
35 | <p>Value: <span id="opacityRangeVal"></span></p>
|
---|
36 | </div>
|
---|
37 | </div>
|
---|
38 | <div id = "ThirdRow">
|
---|
39 | <div id="FillColour">
|
---|
40 | <p> Fill Colour:</p> <div id="color-palette1"></div>
|
---|
41 | </div>
|
---|
42 | </div>
|
---|
43 | </div>
|
---|
44 |
|
---|
45 | <div id="style-selector-control" class="map-control">
|
---|
46 | <select id="style-selector" class="selector-control">
|
---|
47 | <option value="default" selected="selected">Default</option>
|
---|
48 | <option value="silver">Silver</option>
|
---|
49 | <option value="night">Night mode</option>
|
---|
50 | <option value="retro">Retro</option>
|
---|
51 | <option value="paleDawn">Pale Dawn</option>
|
---|
52 | <option value="avocadoWorld">Avocado World</option>
|
---|
53 | <option value="bright">Bright</option>
|
---|
54 | <option value="turquoise">Turquoise</option>
|
---|
55 | <option value="hiding">Hide features</option>
|
---|
56 | </select>
|
---|
57 | </div>
|
---|
58 |
|
---|
59 |
|
---|
60 | <div id="map"></div>
|
---|
61 |
|
---|
62 |
|
---|
63 | </body>
|
---|
64 | </html> |
---|