forked from BenjaminTMilnes/CoverSizeCalculator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
220 lines (210 loc) · 11.3 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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html ng-app="CoverSizeCalculator" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Cover Size Calculator</title>
<meta charset="utf-8" />
<meta name="description" content="A nano-app for calculating the dimensions of book covers - useful for self-publishing." />
<meta name="keywords" content="cover, book cover, cover size, page size, book cover calculator, cover size calculator, calculator, cover designer, publishing, self-publishing" />
<meta property="og:image" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.benjamintmilnes.com/cover-size-calculator/" />
<meta property="og:title" content="Cover Size Calculator" />
<meta property="og:description" content="A nano-app for calculating the dimensions of book covers - useful for self-publishing." />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i&subset=greek,greek-ext,latin-ext" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
<script type="text/javascript" src="geometria.js"></script>
<script type="text/javascript" src="app.js"></script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body ng-controller="MainController">
<div class="grid">
<div class="leftcolumn">
<div class="aboutbox">
<h2>About</h2>
<p>
This is a small app that helps you to calculate the total size of a
book cover, as well as the positions of useful guide lines.
</p>
<p>
Enter the values for the page width, page height, paper thickness,
number of pages, and bleed for your book. You can enter values in
units of millimetres, centimetres, decimetres, or inches.
</p>
<p>
Made by Benjamin T. Milnes
</p>
<p>
<a href="http://www.benjamintmilnes.com">← Back to the main site.</a>
</p>
</div>
<div class="aboutbox">
<h2>KDP Print Options</h2>
<p>If you're using KDP, the paper thicknesses for the different printing options are:</p>
<p>Cream paper: 0.0025 in <br />
White paper: 0.002252 in</p>
</div>
</div>
<div class="controlbar">
<h1>Cover Size Calculator</h1>
<div class="controls">
<div class="control">
<label for="preset">Presets</label>
<select id="preset" ng-model="preset">
<option value="size1">5 in × 8 in</option>
<option value="size2">5.25 in × 8 in</option>
<option value="size3">5.5 in × 8.5 in</option>
<option value="size4">6 in × 9 in</option>
<option value="size5">7 in × 10 in</option>
<option value="size6">7.5 in × 9.25 in</option>
<option value="size7">8 in × 10 in</option>
<option value="size8">8.25 in × 6 in</option>
<option value="size9">8.25 in × 8.25 in</option>
<option value="size10">8.5 in × 8.5 in</option>
<option value="size11">8.5 in × 11 in</option>
<option value="size12">12.85 cm × 19.84 cm</option>
<option value="size13">15.6 cm × 23.39 cm</option>
<option value="size14">16.99 cm × 24.41 cm</option>
<option value="size15">18.9 cm × 24.61 cm</option>
<option value="a4">21 cm × 29.7 cm (A4)</option>
</select>
</div>
<div class="control">
<label for="pagewidth">Page Width:</label>
<input type="text" id="pagewidth" ng-model="pageWidth" tabindex="1" placeholder="e.g. 17.6 cm" />
</div>
<div class="control">
<label for="pageheight">Page Height:</label>
<input type="text" id="pageheight" ng-model="pageHeight" tabindex="2" placeholder="e.g. 25.0 cm" />
</div>
<div class="control">
<label for="paperthickness">Paper Thickness:</label>
<input type="text" id="paperthickness" ng-model="paperThickness" tabindex="3" placeholder="e.g. 0.002252 in" style="width: 10em;" />
</div>
<div class="control">
<label for="numberofpages">Number of Pages:</label>
<input type="text" id="numberofpages" ng-model="numberOfPages" tabindex="4" placeholder="e.g. 350" />
</div>
<div class="control">
<label for="bleed">Bleed:</label>
<input type="text" id="bleed" ng-model="bleed" tabindex="5" placeholder="e.g. 0.125 in" />
</div>
<div class="control">
<label for="showCoverCentres">Show cover centres:</label>
<input type="checkbox" id="showCoverCentres" ng-model="showCoverCentres" />
</div>
</div>
</div>
<div class="rightcolumn">
<div class="outputbox">
<table>
<tr>
<td class="outputbox-heading">Units:</td>
<td colspan="2">
<select ng-model="outputUnits">
<option value="mm">Millimetres (mm)</option>
<option value="cm">Centimetres (cm)</option>
<option value="in">Inches (in)</option>
</select>
</td>
</tr>
<tr>
<td class="outputbox-heading">Total Width:</td>
<td>
<input type="text" id="totalWidth" ng-model="totalWidth" tabindex="6" /></td>
<td>
<button class="copybutton" data-clipboard-target="#totalWidth">Copy</button>
</td>
</tr>
<tr>
<td class="outputbox-heading">Total Height:</td>
<td>
<input type="text" id="totalHeight" ng-model="totalHeight" tabindex="7" /></td>
<td>
<button class="copybutton" data-clipboard-target="#totalHeight">Copy</button>
</td>
</tr>
<tr>
<td class="outputbox-heading">Spine Width:</td>
<td>
<input type="text" id="spineWidth" ng-model="spineWidth" tabindex="7" /></td>
<td>
<button class="copybutton" data-clipboard-target="#spineWidth">Copy</button>
</td>
</tr>
<tr>
<td class="outputbox-heading">Left Bleed Edge:</td>
<td>
<input type="text" id="leftBleedEdge" ng-model="leftBleedEdge" tabindex="8" /></td>
<td>
<button class="copybutton" data-clipboard-target="#leftBleedEdge">Copy</button>
</td>
</tr>
<tr>
<td class="outputbox-heading">Right Bleed Edge:</td>
<td>
<input type="text" id="rightBleedEdge" ng-model="rightBleedEdge" tabindex="9" /></td>
<td>
<button class="copybutton" data-clipboard-target="#rightBleedEdge">Copy</button>
</td>
</tr>
<tr>
<td class="outputbox-heading">Top Bleed Edge:</td>
<td>
<input type="text" id="topBleedEdge" ng-model="topBleedEdge" tabindex="10" /></td>
<td>
<button class="copybutton" data-clipboard-target="#topBleedEdge">Copy</button>
</td>
</tr>
<tr>
<td class="outputbox-heading">Bottom Bleed Edge:</td>
<td>
<input type="text" id="bottomBleedEdge" ng-model="bottomBleedEdge" tabindex="11" /></td>
<td>
<button class="copybutton" data-clipboard-target="#bottomBleedEdge">Copy</button>
</td>
</tr>
<tr>
<td class="outputbox-heading">Left Spine Edge:</td>
<td>
<input type="text" id="leftSpineEdge" ng-model="leftSpineEdge" tabindex="12" /></td>
<td>
<button class="copybutton" data-clipboard-target="#leftSpineEdge">Copy</button>
</td>
</tr>
<tr>
<td class="outputbox-heading">Right Spine Edge:</td>
<td>
<input type="text" id="rightSpineEdge" ng-model="rightSpineEdge" tabindex="13" /></td>
<td>
<button class="copybutton" data-clipboard-target="#rightSpineEdge">Copy</button>
</td>
</tr>
<tr ng-show="showCoverCentres">
<td class="outputbox-heading">Front Cover Centre:</td>
<td>
<input type="text" id="frontCoverCentre" ng-model="frontCoverCentre" tabindex="14" /></td>
<td>
<button class="copybutton" data-clipboard-target="#frontCoverCentre">Copy</button>
</td>
</tr>
<tr ng-show="showCoverCentres">
<td class="outputbox-heading">Back Cover Centre:</td>
<td>
<input type="text" id="backCoverCentre" ng-model="backCoverCentre" tabindex="15" /></td>
<td>
<button class="copybutton" data-clipboard-target="#backCoverCentre">Copy</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="preview">
<canvas id="previewcanvas"></canvas>
</div>
</body>
</html>