codemaker/index.html at master · EnteriseToolkit/codemaker · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<title>CodeMaker</title>

	<link rel="stylesheet" type="text/css" href="pure-base-buttons-grids.css">
	<link rel="stylesheet" type="text/css" href="paper.css">

	<script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>
	<script src="qrcode.js" type="text/javascript" charset="utf-8"></script>
	<script src="jspdf.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="picomodal.js" type="text/javascript" charset="utf-8"></script>
	<script src="codepaper.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function setupPage() {
			var pageKey = location.hash.substring(1);
			if (pageKey.length <= 0) {
				// bit hacky - hide UI initially so we don't see a flash of the 'choose size' content; show when needed
				document.getElementById('get-started').style.visibility = 'visible';
			}
			InitialUI.setup(pageKey);
		}
		window.addEventListener('load', setupPage);
		window.addEventListener('hashchange', setupPage);
		window.addEventListener('resize', CodePaper.resizePage);
	</script>
</head>

<body>
	<div id="container">
		<div id="get-started" class="splash" style="visibility:hidden">
			<h1>Create TicQR &amp; PaperChains documents</h1>
			<p id="no-image-ui">Pick a paper size to begin</p>
			<div id="image-loader">
				<p id="draganddrop">Drop a background image here, or pick a paper size to start from a blank sheet</p>
				<p id="upload">
					<label>Choose a background image, or pick a paper size to start from a blank sheet
						<input type="file">
					</label>
				</p>
			</div>
			<div class="pure-g paper-chooser">
				<div class="pure-u-1-3"><span class="paper-size portrait" onclick="InitialUI.createBlankDocument(210, 297);">Portrait<br>(A4)</span>
				</div>
				<div class="pure-u-1-3"><span class="paper-size landscape" onclick="InitialUI.createBlankDocument(297, 210);">Landscape<br>(A4)</span>
				</div>
				<div class="pure-u-1-3">
					<span class="paper-size square" onclick="InitialUI.showCustomPaperChooser(this)">Custom&hellip;</span>
					<span class="paper-size square custom" id="custom-paper-chooser">
						<label><input id="custom-x-size" type="number" min="63" max="2100" step="1" class="xy-box" placeholder="width" onkeydown="InitialUI.handleKeyDown()" autofocus> mm</label>
						<label>&times;</label>
						<label><input id="custom-y-size" type="number" min="63" max="2100" step="1" class="xy-box" placeholder="height" onkeydown="InitialUI.handleKeyDown()"> mm</label>
						<button class="pure-button button-xsmall" onclick="InitialUI.chooseCustomPaperSize();">Go</button>
					</span>
				</div>
			</div>
			<p id="credits">This code maker is part of the <a href="http://enterise.info/">Enterise Toolkit</a>
			</p>
		</div>
		<div id="code-ui">
			<div id="options-menu">
				<button id="download" class="pure-button pure-button-primary">Download PDF</button>
				<label id="includeimage">
					<input type="checkbox" checked="checked">Include image in PDF
				</label>
				<div id="configuration">
					<span>Configuration:</span>
					<input id="emailaddress" type="text" placeholder="Email address" onchange="InitialUI.setDestinationAddress(this.value);">
				</div>
			</div>
		</div>
		<div id="paper-holder"></div>
	</div>
</body>

</html>