forked from Metalab/labelz
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (155 loc) · 6.67 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
160
161
162
<!doctype html>
<html lang="fr">
<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">Imprimez une étiquette!</h1>
<div class="doNotPrint config">
<div class="section">
<h2>1. Choisisez le modèle</h2>
<ul id="chooseType">
<li id="choosePersonal" class="typeSelected">Objet personnel</li>
<li id="choosePersonalWithQRCode">Objet personnel avec qr-code</li>
<li id="chooseFreeStyle">free-style</li>
<li id="chooseFreeStyleWithQRCode">free-style avec qr-code</li>
<!--
<li>project box</li>
-->
</ul>
</div>
<div class="section" id="panel">
<h2>2. Informations</h2>
<ul class="form" id="configPersonal">
<li>
<label>Cet objet s'appelle</label>
<input placeholder="" type="text" id="configPersonalName" class="liveinput inputText" />
</li>
<li>
<label>Votre nom</label>
<input placeholder="" type="text" id="configPersonalOwner" class="liveinput inputText" />
</li>
<li>
<label>Contact</label>
<input placeholder="ex. email, jabber ou mobile" type="text" id="configPersonalContact" class="liveinput inputText" />
</li>
<li>
<label>Prix estimé en €</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">libre d'usage</option>
<option>libre d'usage apres initiation</option>
<option>réservé(e) à un usage personnel</option>
<option>à vendre</option>
</select>
</li>
<li>
<label>Que faire si l'ojet encombre?</label>
<select id="configPersonalAnnoying" class="liveinput inputSelect">
<option selected="selected">évacuer</option>
<option>ne pas toucher!</option>
<option>deplacez ou rangez le</option>
<option>prévenir le propriétaire</option>
</select>
</li>
<li>
<label>Que faire si l'objet est cassé?</label>
<select id="configPersonalBroken" class="liveinput inputSelect">
<option selected="selected">évacuer</option>
<option>remplacer & prévenir le propriétaire </option>
<option>prévenir le propriétaire</option>
<option>réparer & prévenir le propriétaire </option>
</select>
</li>
<li>
<label>URL. pour plus d'infos </label>
<input type="url" placeholder="ex. page du Wiki" id="configPersonalUrl" class="liveinput inputText" />
</li>
<li>
<label for="configPersonalPrice">Date du jour</label>
<input type="text" id="configPersonalDate" class="liveinput currentDate inputText" />
</li>
</ul>
<ul class="form" id="configFreeStyle">
<li>
<label>Vous pouvez placer des balises HTML dans ce champ!</label>
<textarea id="configFreeStyleText" class="liveinput inputText">votre texte ici…</textarea>
</li>
</ul>
</div>
</div>
<div class="section" id="preview">
<h2 class="doNotPrint">3. Aperçu</h2>
<div id="printView" class="print">
<ul>
<li id="outputPersonal">
<span id="displayPersonalName" class="livedisplay highlight"></span>
<span id="surrPersonalOwner">
est à
<span id="displayPersonalOwner" class="livedisplay highlight"></span>,
</span>
<span> est </span>
<span class="livedisplay highlight" id="displayPersonalPermissions"></span>,
<span id="surrPersonalPrice">
, coûte à peu près <span class="highlight">€</span><span class="livedisplay highlight" id="displayPersonalPrice"></span>.
</span>
<span>si l'objet est cassé,</span>
<span id="displayPersonalBroken" class="livedisplay highlight"></span>.
<span>Si il encombre,</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">Plus d'infos: </span><span class="livedisplay" id="displayPersonalUrl"></span>
<br /><span>Créé le:</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">
est à
<span id="displayPersonalOwnerWithQRCode" class="livedisplay highlight"></span>,
</span>
<span> est </span>
<span class="livedisplay highlight" id="displayPersonalPermissionsWithQRCode"></span>.
<span id="surrPersonalPriceWithQRCode" style="display:none">
, coûte à peu près <span class="highlight">€</span><span class="livedisplay highlight" id="displayPersonalPriceWithQRCode"></span>,
</span>
<span>si l'objet est cassé,</span>
<span id="displayPersonalBrokenWithQRCode" class="livedisplay highlight"></span>.
<span>Si il encombre,</span>
<span id="displayPersonalAnnoyingWithQRCode" class="livedisplay highlight"></span>.
<br /><span id="surrPersonalContactWithQRCode">Contact: </span>
<span id="displayPersonalContactWithQRCode" class="livedisplay highlight"></span>
<br /><span>Créé le:</span> <span class="livedisplay displayDate" id="displayPersonalDateWithQRCode"></span>
<br /><br /><br /><span id="surrPersonalUrlWithQRCode">+ d'infos: </span><span class="livedisplay" id="displayPersonalUrlWithQRCode"></span>
</li>
<li id="outputFreeStyle">
<span id="displayFreeStyleText" class="livedisplay">Votre texte ici...</span>
</li>
<li id="outputFreeStyleWithQRCode">
<span id="displayFreeStyleQRCode" class="qrCode"></span>
<span id="displayFreeStyleTextWithQRCode" class="livedisplay">Votre texte ici...</span>
</li>
</ul>
</div>
<div id="imageView">
</div>
</div>
<div id="finish" class="section doNotPrint">
<h2>4. finito!</h2>
<p>Ça a l'air bien?</p>
<a href="#" class="printBt" onClick="printLabel();">Imprimer!</a>
<a href="#" class="printBt" onClick="generateImage();">Génerer un 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>