-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
132 lines (113 loc) · 4.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Thumbnail Builder</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="./css/materialize-colorpicker.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<nav>
<div class="nav-wrapper">
<a href="./index.html" class="brand-logo">ArcGIS Thumbnail Builder</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="gallery.html" target="_self">Gallery</a></li>
<li><a href="help.html" target="_self">Help</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col m6 s12">
<div class="row">
<canvas id="edit-canvas"></canvas>
</div>
<div class="row">
<div id="title-color" class="file-field">
<div class="btn color-icon"></div>
<div class="file-path-wrapper">
<input type="text" class="color-input" />
</div>
</div>
<div id="category-color" class="file-field">
<div class="btn color-icon"></div>
<div class="file-path-wrapper">
<input type="text" class="color-input" />
</div>
</div>
</div>
<div class="row">
<a id="download-image" download="thumbnail_generated.png" class="waves-effect waves-light btn deep-purple lighten-2"><i class="material-icons left">save</i>Download</a>
</div>
</div>
<div class="col m6 s12">
<div class="row">
<h2>Title</h2>
<div class="input-field col s12">
<input placeholder="Item Title" type="text" id="title" name="title" />
<label for="title">Item Title</label>
</div>
</div>
<div class="row">
<h2>Sidebar</h2>
<div class="input-field col s12">
<select name="category" id="category">
<option value="Web Map">Web Map</option>
<option value="Story Map">Story Map</option>
<option value="Web App">Web App</option>
<option value="Feature Service">Feature Service</option>
<option value="Map Service">Map Service</option>
<option value="Collector App">Collector App</option>
<option value="Basemap">Basemap</option>
<option value="Dashboard">Dashboard</option>
<option value="Document">Document</option>
</select>
</div>
</div>
<div class="row">
<h2>Background Image</h2>
<input type="hidden" id="background-url" />
<div class="input-field col s12">
<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type="file" id="background">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</div>
</div>
<div class="row">
<h2>Logo Image</h2>
<input type="hidden" id="logo-url" />
<div class="input-field col s12">
<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type="file" id="logo">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /row -->
</div>
<!-- /container -->
<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="./js/materialize-colorpicker.min.js"></script>
<script src="./js/editCanvas.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12419040-13"></script>
</body>
</html>