-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (110 loc) · 3.63 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
<html>
<head>
<title>Card Maker</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<link href="./styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div id="options" class="no-print side-nav fixed">
<form action="#">
<div class="file-field input-field inset">
<div class="btn">
<span>Files</span>
<input id="fileinput" type="file" multiple>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload one or more files">
</div>
</div>
</form>
<ul class="collapsible z-depth-0" data-collapsible="accordion">
<li>
<div class="collapsible-header switch">Resize cards?
<label>
No
<input type="checkbox" id="shouldResize">
<span class="lever"></span>
Yes
</label>
</div>
<div class="collapsible-body">
<!-- if shouldResize -->
<!-- Card Size -->
<div class="input-field">
<select id="cardSizes">
<option value="poker">Poker/Magic cards (2.5" x 3.5")</option>
<option value="bridge">Bridge cards (2.25" x 3.5")</option>
<option value="large">Large cards (3.5" x 5")</option>
<option value="tarot">Tarot size (2.75" x 4.75")</option>
<option value="mini">Mini size (1.75" x 2.5")</option>
<option value="custom">Custom size</option>
</select>
<label>Card Sizes</label>
<div id="customSize">
<input type="number" class="customWidth" placeholder="Width" />
<input type="number" class="customHeight" placeholder="Height" />
</div>
</div>
</div>
</li>
<li>
<div class="collapsible-header switch">Add border?
<label>
No
<input type="checkbox" id="applyBorder">
<span class="lever"></span>
Yes
</label>
</div>
<div class="collapsible-body">
<input type="text" id="borderColor" placeholder="Border Color" />
<!-- border thickness -->
<p class="range-field">
Border thickness
<input type="range" id="borderThickness" min="0" max="20" value="0"/>
</p>
</div>
</li>
<li>
<div class="collapsible-header switch">Spacing
<label>
No
<input type="checkbox" id="addSpacing">
<span class="lever"></span>
Yes
</label>
</div>
<div class="collapsible-body">
<!-- Row Space -->
<p class="range-field">
Row Space
<input type="range" id="rowSpace" min="0" max="50" value="0"/>
</p>
<!-- Column Space -->
<p class="range-field">
Column Space
<input type="range" id="columnSpace" min="0" max="50" value="0"/>
</p>
</div>
</li>
</ul>
<a id="applyBtn" class="inset waves-effect waves-light btn">Apply</a>
<div class="instructions">
<p>
This tool allows you to create printable sheets from multiple images.
</p>
<br />
<p>
Upload all the images, resize, add borders and spacing if you want. Then press "Apply" to see the changes. Once you are happy print (Ctrl + P) out the sheets or save them as a PDF for later.
</p>
</div>
</div>
<div id="imageArea">
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script src="./main.js"></script>
</body>
</hml>