-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
156 lines (156 loc) · 6.49 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
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="custom-proset.css"/>
<!-- node_modules/jspdf/dist/ -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/3.0.7/umd.js"></script> -->
</head>
<body>
<!-- Card for previewing result and moving things around -->
<div id="main-container">
<div id="card-and-options-container">
<div id="card-container">
<div class="card">
<!-- <img draggable="false" alt="" id="card-background"/> -->
<img width="100px" draggable="false" class="item" alt="" id="img-item-0" item-number="0"/>
<img width="100px" draggable="false" class="item" alt="" id="img-item-1" item-number="1"/>
<img width="100px" draggable="false" class="item" alt="" id="img-item-2" item-number="2"/>
<img width="100px" draggable="false" class="item" alt="" id="img-item-3" item-number="3"/>
<img width="100px" draggable="false" class="item" alt="" id="img-item-4" item-number="4"/>
<img width="100px" draggable="false" class="item" alt="" id="img-item-5" item-number="5"/>
</div>
</div>
<!-- User Interface for choosing editing tool -->
<div class="editing-tools">
<span id="scale-tool">Scale</span>
<span id="move-tool">Move</span>
<span id="redispose-tool">Auto-placement tool</span>
</div>
</div> <!-- User Interface for choosing parameters and items -->
<div class="ui">
<h2>Proset Card Generator</h2>
For an introduction to the game, <a href="https://en.wikipedia.org/wiki/Projective_Set_(game)">here</a>. To play the game, <a href="https://www.ocf.berkeley.edu/~dadams/proset/">here</a>.
<h3>Menu</h3>
Save: <input class="input" type="button" id="save-input" value="Save"><br/>
Load: <input class="file-input" type="file" id="load-input" name="load-input" value="Load">
<h3>Cards</h3>
<ul>
<li>Card dimension: <input id="card-width" type="number" value="64"/>mm x <input id="card-height" type="number" value="89"/>mm</li>
<li>Lines x columns: <input id="card-line-number" type="number" value="3"/>x<input id="card-column-number" type="number" value="2"/></li>
<li>Image filling: <input id="ratio-number" type="number" value="0.75" step="any" min="0" max="1"/></li>
<li>Background image: <input class="file-input" type="file" id="background-input"></li>
<li>Other side image: <input class="file-input" type="file" id="other-side-input"></li>
</ul>
<h3>Items</h3>
Number of items : <input name="" type="number" value="6" id="n-item"/>.<br/> To find images, <a href="svgrepo.com">svgrepo</a> might be a good starting point.
<ul id="list-inputs">
<li>
Item 0: <input class="file-input" type="file" id="file0"><input name="" type="button" id="default-0" value="Default"/>
</li>
<li>
Item 1: <input class="file-input" type="file" id="file1"><input name="" type="button" id="default-1" value="Default"/>
</li>
<li>
Item 2: <input class="file-input" type="file" id="file2"><input name="" type="button" id="default-2" value="Default"/>
</li>
<li>
Item 3: <input class="file-input" type="file" id="file3"><input name="" type="button" id="default-3" value="Default"/>
</li>
<li>
Item 4: <input class="file-input" type="file" id="file4"><input name="" type="button" id="default-4" value="Default"/>
</li>
<li>
Item 5: <input class="file-input" type="file" id="file5"><input name="" type="button" id="default-5" value="Default"/>
</li>
</ul>
<h3>PDF options</h3>
PDF format <select id="print-format" name="">
<option value="a3">A3</option>
<option selected value="a4">A4</option>
<option value="a5">A5</option>
<option value="letter">letter</option>
<option value="custom">custom</option>
</select>
<span class="customSizeInput"><input id="customX" type="number" value="210"/>x
<input id="customY" type="number" value="297"/>mm
</span>
<br/>
Margin <input id="print-margin" type="number" value="5"/>mm<br/>
Orientation: <input type="radio" name="portrait" value="portrait" checked/> Portrait, <input type="radio" name="portrait" value="landscape"/> Landscape <br/>
Card delimiter: <input type="radio" name="delimiter" value="box" checked/> Box, <input type="radio" name="delimiter" value="intersection"/> Intersection, <input type="radio" name="delimiter" value="none"/> None <br/>
<input name="" type="button" value="Generate PDF" onclick="print()"/>
</div>
</div>
<script src="custom-proset.js"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.js"></script>
<a class="gh-mark" href="https://github.com/panglesd/custom-proset"><img alt="" src="GitHub-Mark-32px.png"/></a>
<div id="svg-container" style="display:none">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="320"
height="320"
viewBox="0 0 84.666667 84.666667"
version="1.1"
id="svg8"
sodipodi:docname="blue-dot.svg"
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.2952263"
inkscape:cx="192.98822"
inkscape:cy="155.03916"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
inkscape:document-rotation="0"
showgrid="false"
inkscape:pagecheckerboard="true"
units="px"
width="320px"
inkscape:lockguides="true"
inkscape:window-width="1918"
inkscape:window-height="1058"
inkscape:window-x="0"
inkscape:window-y="20"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="opacity:1;fill:#0066ff;fill-opacity:1;stroke:#000000;stroke-width:1.01444;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path26"
cx="42.333332"
cy="42.333332"
r="41.826111" />
</g>
</svg>
</div>
</body>
</html>