-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
159 lines (153 loc) · 6.41 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Print a Label!</title>
<link rel="stylesheet" type="text/css" href="css/labelz.css">
</head>
<body>
<h1 class="doNotPrint">Print a Label!</h1>
<div class="doNotPrint config">
<div class="section">
<h2>1. Choose type</h2>
<ul id="chooseType">
<li id="choosePersonal" class="typeSelected">personal box/item</li>
<li id="choosePersonalWithQRCode">personal box/item with qr code</li>
<li id="chooseFreeStyle">free style</li>
<li id="chooseFreeStyleWithQRCode">free style with qr code</li>
<!--
<li>project box</li>
-->
</ul>
</div>
<div class="section" id="panel">
<h2>2. Add information</h2>
<ul class="form" id="configPersonal">
<li>
<label>This thing is called</label>
<input placeholder="" type="text" id="configPersonalName" class="liveinput inputText" />
</li>
<li>
<label>Your name</label>
<input placeholder="" type="text" id="configPersonalOwner" class="liveinput inputText" />
</li>
<li>
<label>Contact</label>
<input placeholder="e.g. email, jabber or mobile" type="text" id="configPersonalContact" class="liveinput inputText" />
</li>
<li>
<label>appreciated price in €</label>
<input type="number" min="0" id="configPersonalPrice" class="liveinput inputText" />
</li>
<li>
<label>Permissions</label>
<select id="configPersonalPermissions" class="liveinput inputSelect">
<option selected="selected">free to use</option>
<option>free to use after instruction</option>
<option>for private use only</option>
<option>for sale</option>
</select>
</li>
<li>
<label>What if annoying?</label>
<select id="configPersonalAnnoying" class="liveinput inputSelect">
<option selected="selected">throw away</option>
<option>leave it</option>
<option>move it</option>
<option>notify owner</option>
</select>
</li>
<li>
<label>What if broken?</label>
<select id="configPersonalBroken" class="liveinput inputSelect">
<option selected="selected">throw away</option>
<option>replace & notify owner </option>
<option>notify owner</option>
</select>
</li>
<li>
<label>URL for more Infos </label>
<input type="url" placeholder="e.g. wiki page" id="configPersonalUrl" class="liveinput inputText" />
</li>
<li>
<label for="configPersonalPrice">timestamp</label>
<input type="date" id="configPersonalDate" class="liveinput currentDate inputText" />
</li>
</ul>
<ul class="form" id="configFreeStyle">
<li>
<label>Hint: You can use HTML-tags in here</label>
<textarea id="configFreeStyleText" class="liveinput inputText">Your text goes here…</textarea>
</li>
</ul>
</div>
</div>
<div class="section" id="preview">
<h2 class="doNotPrint">3. Preview</h2>
<div id="printView" class="print">
<ul>
<li id="outputPersonal">
<span id="displayPersonalName" class="livedisplay highlight"></span>
<span id="surrPersonalOwner">
is owned by
<span id="displayPersonalOwner" class="livedisplay highlight"></span>.
</span>
<span>It's</span>
<span class="livedisplay highlight" id="displayPersonalPermissions"></span>.
<span id="surrPersonalPrice">
It costs approximately <span class="highlight">€</span><span class="livedisplay highlight" id="displayPersonalPrice"></span>.
</span>
<span>If broken,</span>
<span id="displayPersonalBroken" class="livedisplay highlight"></span>.
<span>If annoying,</span>
<span id="displayPersonalAnnoying" class="livedisplay highlight"></span>.
<br /><span id="surrPersonalContact">Contact: </span>
<span id="displayPersonalContact" class="livedisplay highlight"></span>
<br /><span id="surrPersonalUrl">More Infos: </span><span class="livedisplay" id="displayPersonalUrl"></span>
<br /><span>Created:</span> <span class="livedisplay displayDate" id="displayPersonalDate"></span>
</li>
<li id="outputPersonalWithQRCode">
<span id="displayPersonalQRCode" class="qrCode"></span>
<span id="displayPersonalNameWithQRCode" class="livedisplay highlight"></span>
<span id="surrPersonalOwnerWithQRCode">
is owned by
<span id="displayPersonalOwnerWithQRCode" class="livedisplay highlight"></span>.
</span>
<span>It's</span>
<span class="livedisplay highlight" id="displayPersonalPermissionsWithQRCode"></span>.
<span id="surrPersonalPriceWithQRCode" style="display:none">
It costs approximately <span class="highlight">€</span><span class="livedisplay highlight" id="displayPersonalPriceWithQRCode"></span>.
</span>
<span>If broken,</span>
<span id="displayPersonalBrokenWithQRCode" class="livedisplay highlight"></span>.
<span>If annoying,</span>
<span id="displayPersonalAnnoyingWithQRCode" class="livedisplay highlight"></span>.
<br /><span id="surrPersonalContactWithQRCode">Contact: </span>
<span id="displayPersonalContactWithQRCode" class="livedisplay highlight"></span>
<br /><span id="surrPersonalUrlWithQRCode">More Infos: </span><span class="livedisplay" id="displayPersonalUrlWithQRCode"></span>
<br /><span>Created:</span> <span class="livedisplay displayDate" id="displayPersonalDateWithQRCode"></span>
</li>
<li id="outputFreeStyle">
<span id="displayFreeStyleText" class="livedisplay">Your text goes here...</span>
</li>
<li id="outputFreeStyleWithQRCode">
<span id="displayFreeStyleQRCode" class="qrCode"></span>
<span id="displayFreeStyleTextWithQRCode" class="livedisplay">Your text goes here...</span>
</li>
</ul>
</div>
<div id="imageView">
</div>
</div>
<div id="finish" class="section doNotPrint">
<h2>4. finish</h2>
<p>Looks good?</p>
<a href="#" class="printBt" onClick="printLabel();">Print!</a>
<a href="#" class="printBt" onClick="generateImage();">Generate PNG</a>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script src='js/qrcode.min.js'></script>
<script src='js/labelz.js'></script>
<script src='js/html2canvas.js'></script>
</body>
</html>