forked from Dude902/DropMix-Card-Template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
272 lines (255 loc) · 18.6 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
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="DropMix,Dropmix,Hamonix,Hasbro,card,generator,creator,template" />
<meta name="description" content="Card mockup creator for the music-mixing card game DropMix by Harmonix and Hasbro. Created by Adam N.A. @AdamUnavailable" />
<title>DropMix Card Mockup Template</title>
<link rel="stylesheet" href="index.css">
<!-- Google analytics -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-48306281-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-48306281-5');
</script>
<!-- Google analytics -->
<script src="resources/webfontloader.js"></script>
<script>var WebFontConfig = {custom: {families: ['boldtext', 'lighttext'], urls: ['/index.css']}};</script>
<script src="resources/fabric.min.js"></script>
</head>
<body>
<div id="header" style="margin:auto; text-align:center; padding:0px 40px 0px 40px;">
<A href="https://dropmix.hasbro.com"><img width=25% height=25% align=middle src="resources/images/DMX_logo_color.png"></A>
<span style="font-size:2em; line-height:2em; vertical-align:middle;"> Card Mockup Template</span>
<div id="version" style="font-size:14px; margin:-20px auto -15px 375px;">(Version Alpha - Work in Progress, may break on occasion)</div>
<BR>
<img src="resources/images/divider-bg.png">
</div>
<div style="display:table; margin:auto;">
<div style="display:table-row;">
<div style="display:table-cell;vertical-align:top;padding:40px 0px 0px 20px;">
<P>
<H1>Card Text:</H1>
Artist: <BR><input size='50' onchange="textchanged();" onblur="textchanged();" id="text_artist" value="Artist" style="width:500px;"><BR><BR>
Title: <BR><textarea rows="4" onchange="textchanged();" onblur="textchanged();" id="text_title" value="Title" style="width:500px;">Title</textarea><BR><BR>
<!--<input size='50' onchange="textchanged();" onblur="textchanged();" id="text_title" value="Title"><BR><BR>-->
Series ID #: <BR><input size='50' onchange="textchanged();" onblur="textchanged();" id="text_series_id" value="S##" style="width:500px;"><BR><BR>
Card ID #: <BR><input size='50' onchange="textchanged();" onblur="textchanged();" id="text_card_id" value="C###" style="width:500px;"><BR><BR>
Copyright: <BR><input size='50' onchange="textchanged();" onblur="textchanged();" id="text_copyright" value="™ & © 2017 HARMONIX © 2017 HASBROTHER" style="width:500px;"><BR><BR>
Card #: <BR><input size='50' onchange="textchanged();" onblur="textchanged();" id="text_card_num" value="##/##" style="width:500px;"><BR><BR>
<!--For compatibility with canvas library fabric.js-->
<!--(returns "ReferenceError: text_titleX is not defined, based on existing id's"-->
<a id="text_title1"></a><a id="text_title2"></a><a id="text_title3"></a><a id="text_title4"></a>
<!--For compatibility with canvas library fabric.js-->
</P>
<P>
<H1>Power Levels:</H1>
<div class="leveltable">
<div class="tablerow">
<div class="tablecell"><span class="wild"><input onchange="levelchanged();" type="radio" name="level" value="w3" id="w3"><label for="w3"><img height=14 src="resources/images/Power_Level_Icons/Wild_3.png"> Wild-3*</label></span></div>
<div class="tablecell"><span class="yellow"><input onchange="levelchanged();" type="radio" name="level" value="y3" id="y3"><label for="y3"><img height=14 src="resources/images/Power_Level_Icons/Yellow_3.png"> Yellow-3 </label></span></div>
<div class="tablecell"><span class="red"><input onchange="levelchanged();" type="radio" name="level" value="r3" id="r3"><label for="r3"><img height=14 src="resources/images/Power_Level_Icons/Red_3.png"> Red-3</label></span></div>
<div class="tablecell"><span class="blue"><input onchange="levelchanged();" type="radio" name="level" value="b3" id="b3"><label for="b3"><img height=14 src="resources/images/Power_Level_Icons/Blue_3.png"> Blue-3</label></span></div>
<div class="tablecell"><span class="green"><input onchange="levelchanged();" type="radio" name="level" value="g3" id="g3"><label for="g3"><img height=14 src="resources/images/Power_Level_Icons/Green_3.png"> Green-3 </label></span></div>
<div class="tablecell"><span class="white"><input onchange="levelchanged();" type="radio" name="level" value="f3" id="f3"><label for="f3"><img height=14 src="resources/images/Power_Level_Icons/White_3.png"> White-3*</label></span></div>
</div>
<div class="tablerow">
<div class="tablecell"><span class="wild"><input onchange="levelchanged();" type="radio" name="level" value="w2" id="w2"><label for="w2"><img height=14 src="resources/images/Power_Level_Icons/Wild_2.png"> Wild-2 </label></span></div>
<div class="tablecell"><span class="yellow"><input onchange="levelchanged();" type="radio" name="level" value="y2" id="y2"><label for="y2"><img height=14 src="resources/images/Power_Level_Icons/Yellow_2.png"> Yellow-2 </label></span></div>
<div class="tablecell"><span class="red"><input onchange="levelchanged();" type="radio" name="level" value="r2" id="r2"><label for="r2"><img height=14 src="resources/images/Power_Level_Icons/Red_2.png"> Red-2</label></span></div>
<div class="tablecell"><span class="blue"><input onchange="levelchanged();" type="radio" name="level" value="b2" id="b2"><label for="b2"><img height=14 src="resources/images/Power_Level_Icons/Blue_2.png"> Blue-2</label></span></div>
<div class="tablecell"><span class="green"><input onchange="levelchanged();" type="radio" name="level" value="g2" id="g2"><label for="g2"><img height=14 src="resources/images/Power_Level_Icons/Green_2.png"> Green-2 </label></span></div>
<div class="tablecell"><span class="white"><input onchange="levelchanged();" type="radio" name="level" value="f2" id="f2"><label for="f2"><img height=14 src="resources/images/Power_Level_Icons/White_2.png"> White-2*</label></span></div>
</div>
<div class="tablerow">
<div class="tablecell"><span class="wild"><input onchange="levelchanged();" type="radio" name="level" value="w1" id="w1"><label for="w1"><img height=14 src="resources/images/Power_Level_Icons/Wild_1.png"> Wild-1*</label></span></div>
<div class="tablecell"><span class="yellow"><input onchange="levelchanged();" type="radio" name="level" value="y1" id="y1"><label for="y1"><img height=14 src="resources/images/Power_Level_Icons/Yellow_1.png"> Yellow-1*</label></span></div>
<div class="tablecell"><span class="red"><input onchange="levelchanged();" type="radio" name="level" value="r1" id="r1"><label for="r1"><img height=14 src="resources/images/Power_Level_Icons/Red_1.png"> Red-1</label></span></div>
<div class="tablecell"><span class="blue"><input onchange="levelchanged();" type="radio" name="level" value="b1" id="b1"><label for="b1"><img height=14 src="resources/images/Power_Level_Icons/Blue_1.png"> Blue-1</label></span></div>
<div class="tablecell"><span class="green"><input onchange="levelchanged();" type="radio" name="level" value="g1" id="g1"><label for="g1"><img height=14 src="resources/images/Power_Level_Icons/Green_1.png"> Green-1*</label></span></div>
<div class="tablecell"><span class="white"><input onchange="levelchanged();" type="radio" name="level" value="f1" id="f1"><label for="f1"><img height=14 src="resources/images/Power_Level_Icons/White_1.png"> White-1*</label></span></div>
</div>
</div>
</P>
<P>
<H1>Instruments:</H1>
<select id="instrument1" name="instrument1" onchange="instrumentchanged();">
<option value="none">Instrument slot 1</option>
<option value="yvocals" class="yellow">Yellow Vocals</option>
<option value="yguitar" class="yellow">Yellow Guitar*</option>
<option value="ykeys" class="yellow">Yellow Keys*</option>
<option value="yhorns" class="yellow">Yellow Horns*</option>
<option value="ystrings" class="yellow">Yellow Strings*</option>
<option value="ysampler" class="yellow">Yellow Sampler*</option>
<option value="ydrums" class="yellow">Yellow Drums*</option>
<option value="rvocals" class="red">Red Vocals*</option>
<option value="rguitar" class="red">Red Guitar</option>
<option value="rkeys" class="red">Red Keys</option>
<option value="rhorns" class="red">Red Horns</option>
<option value="rstrings" class="red">Red Strings</option>
<option value="rsampler" class="red">Red Sampler*</option>
<option value="rdrums" class="red">Red Drums*</option>
<option value="bvocals" class="blue">Blue Vocals*</option>
<option value="bguitar" class="blue">Blue Guitar*</option>
<option value="bkeys" class="blue">Blue Keys*</option>
<option value="bhorns" class="blue">Blue Horns*</option>
<option value="bstrings" class="blue">Blue Strings*</option>
<option value="bsampler" class="blue">Blue Sampler*</option>
<option value="bdrums" class="blue">Blue Drums</option>
<option value="gvocals" class="green">Green Vocals*</option>
<option value="gguitar" class="green">Green Guitar</option>
<option value="gkeys" class="green">Green Keys</option>
<option value="ghorns" class="green">Green Horns*</option>
<option value="gstrings" class="green">Green Strings*</option>
<option value="gsampler" class="green">Green Sampler*</option>
<option value="gdrums" class="green">Green Drums*</option>
</select>
<select id="instrument2" name="instrument2" onchange="instrumentchanged();">
<option value="none">Instrument slot 2</option>
<option value="rvocals" class="red">Red Vocals*</option>
<option value="rguitar" class="red">Red Guitar</option>
<option value="rkeys" class="red">Red Keys</option>
<option value="rhorns" class="red">Red Horns</option>
<option value="rstrings" class="red">Red Strings</option>
<option value="rsampler" class="red">Red Sampler</option>
<option value="rdrums" class="red">Red Drums*</option>
</select>
<select id="instrument3" name="instrument3" onchange="instrumentchanged();">
<option value="none" >Instrument slot 3</option>
<option value="bvocals" class="blue">Blue Vocals*</option>
<option value="bguitar" class="blue">Blue Guitar*</option>
<option value="bkeys" class="blue">Blue Keys*</option>
<option value="bhorns" class="blue">Blue Horns*</option>
<option value="bstrings" class="blue">Blue Strings*</option>
<option value="bsampler" class="blue">Blue Sampler*</option>
<option value="bdrums" class="blue">Blue Drums</option>
</select>
<select id="instrument4" name="instrument4" onchange="instrumentchanged();">
<option value="none">Instrument slot 4</option>
<option value="gvocals" class="green">Green Vocals*</option>
<option value="gguitar" class="green">Green Guitar</option>
<option value="gkeys" class="green">Green Keys</option>
<option value="ghorns" class="green">Green Horns*</option>
<option value="gstrings" class="green">Green Strings*</option>
<option value="gsampler" class="green">Green Sampler*</option>
<option value="gdrums" class="green">Green Drums*</option>
</select>
</P>
<P>
<H1>Playlist Icons:</H1>
<select id="playlist" name="playlist" onchange="playlistchanged();">
<option value="none">None</option>
<option value="astro">Astro</option>
<option value="blade">The Blade</option>
<option value="bomb">Bomb</option>
<option value="breaker">Breaker</option>
<option value="chiller">Chiller</option>
<option value="controller">Controller</option>
<option value="dapper">Dapper</option>
<option value="derby">Derby</option>
<option value="flawless">Flawless</option>
<option value="highness">Highness</option>
<option value="hightower">Hightower</option>
<option value="lucky">Lucky</option>
<option value="mirrors">Mirrors</option>
<option value="moonlight">Moonlight</option>
<option value="ouroboros">Ouroboros</option>
<option value="puff">Puff</option>
<option value="seer">Seer</option>
<option value="sweets">Sweets</option>
</select>
</P>
<P><BR><BR><BR></P>
<P>
<H1>Reset:</H1>
<input type='button' value="Reset Text" onClick="resettext()"><BR><BR>
<input type='button' value="Reset Entire Card" onClick="resetcard()">
</P>
</div>
<div style="display:table-cell;vertical-align:middle; text-align:center; padding:40px 0px 40px 20px;">
<canvas id="canvas_art" width="562" height="780" style="width:562px; height:780px; border:1px solid #000000;" hidden></canvas>
<canvas id="canvas_bg" width="562" height="780" style="width:562px; height:780px; border:1px solid #000000;" hidden></canvas>
<canvas id="canvas_text" width="562" height="780" style="width:562px; height:780px; border:1px solid #000000;" hidden></canvas>
<canvas id="canvas" width="562" height="780" style="width:562px; height:780px; border:1px solid #000000;"></canvas>
<BR><BR>
(Right click the card and "save image as" .png)
<BR><a id="savelink" hidden=true href="" download target="_blank" onclick="updatecardlink();">Download Link</a>
<BR><BR>
<P>
<H1>Artwork:</H1>
<B>Add file:</B>
<BR>
<form id="imguploadform"><label for="imgupload">Upload card artwork image: </label><input type="file" id="imgupload" name="uploadedimg" accept="image/*" onchange="imguploaded(event)"></form>
(or drag and drop an image onto the card above)
<BR>
Currently only 1 image file is possible at a time.
<BR><BR>
<B>Positioning:</B>
<BR>
Move the selected artwork by dragging anywhere on the card above.
<BR>
<input id="centerart" type='button' value="Center Artwork" onClick="centerart()" disabled=true>
<input id="centerarth" type='button' value="Center Artwork Horizontally" onClick="centerarth()" disabled=true>
<input id="centerartv" type='button' value="Center Artwork Vertically" onClick="centerartv()" disabled=true>
<BR><BR>
<B>Scale:</B>
<BR>
Artwork Width Scale:
<input id="artscalehslider" type="range" min="0.1" max="10" step="0.1" value="1" onchange="artscalehchanged()" onblur="artscalehchanged()" disabled=true/>
<input id="artscalehbox" type="number" min="0.01" max="100" step="0.01" value="1" style="width:100px" onchange="artscalehboxchanged()" onblur="artscalehboxchanged()" onkeyup="artscalehboxchanged()" disabled=true>
<input id="scalehfit" type='button' value="Scale to fit" onClick="scalehfit()" disabled=true>
<input id="scalehorig" type='button' value="Original Size" onClick="scalehoriginal()" disabled=true>
<BR>
Artwork Height Scale:
<input id="artscalevslider" type="range" min="0.1" max="10" step="0.1" value="1" onchange="artscalevchanged()" onblur="artscalevchanged()" disabled=true/>
<input id="artscalevbox" type="number" min="0.01" max="100" step="0.01" value="1" style="width:100px" onchange="artscalevboxchanged()" onblur="artscalevboxchanged()" onkeyup="artscalevboxchanged()" disabled=true>
<input id="scalevfit" type='button' value="Scale to fit" onClick="scalevfit()" disabled=true>
<input id="scalevorig" type='button' value="Original Size" onClick="scalevoriginal()" disabled=true>
<BR>
<!-- Scale to minimum -->
<input id="scaletomin" type='button' value="Scale to minimum size while keeping original aspect ratio" onClick="scaletominimum()" disabled=true>
<BR><BR>
<B>Flip / Mirror:</B>
<BR>
<input id="flipart_h" type='button' value="Flip Artwork Horizontally" onClick="flipart_h()" disabled=true>
<input id="flipart_v" type='button' value="Flip Artwork Vertically" onClick="flipart_v()" disabled=true>
<BR><BR>
<B>Rotation:</B>
<BR>
Disabled due to bugs <BR><strike>Artwork Rotation (°)</strike>:
<input id="artrotationslider" type="range" min="-360" max="360" step="0.01" value="0" onchange="artrotationchanged()" onblur="artrotationchanged()" disabled=true/>
<input id="artrotationbox" type="number" min="-360" max="360" step="0.01" value="0" size='6' onchange="artrotationboxchanged()" onblur="artrotationboxchanged()" onkeyup="artrotationboxchanged()" disabled=true>
<BR><BR>
<B>Reset:</B>
<BR>
<input id="resetart" type='button' value="Reset Artwork Adjustments" onClick="resetart()" disabled=true>
<input id="clearart" type='button' value="Clear Artwork" onClick="clearart()" disabled=true>
</P>
</div>
</div>
</div>
<div id="footer" style="margin:auto;padding:0px 40px 0px 40px;text-align:center;">
<img src="resources/images/divider-bg.png">
<P style="width:750px; margin-left:auto; margin-right:auto;">
*Options labeled with an asterisk (*) either don't exist in real cards, or are recolors, or otherwise edited.
<BR><BR>
Text may render differently in different browsers. If text is not rendered, click on the card image or any option on the page.
</P>
<!-- <P>Please do not use this to make counterfeit cards.</P> -->
<img src="resources/images/divider-bg.png">
<h6>
<P>Web template and original <!--<a href="https://drive.google.com/file/d/0BzdJrnIrHiJIc3FVdTFjdnItZlU/view">--><a href="https://www.reddit.com/r/dropmix/comments/742key/custom_dropmix_card_mockup_template_photoshop_psd/">Photoshop template</a> made by Adam N. A. <a href="https://www.twitter.com/AdamUnavailable">@AdamUnavailable</a> to create card mockups for the music-mixing card game DropMix.</P>
<P>Made using the <a href="https://github.com/kangax/fabric.js/">fabric.js</a> HTML5 canvas library by <a href="https://www.twitter.com/kangax">@kangax</a> & <a href="https://www.twitter.com/andreabogazzi">@andreabogazzi</a> (<a href="https://www.twitter.com/fabricjs">@fabricjs</a>)
<BR> and <a href="https://github.com/typekit/webfontloader">Web Font Loader</a> by <a href="https://typekit.com">Typekit</a>.
<BR>Web Font Loader Copyright (c) 2010-2017 Adobe Systems Incorporated, Google Incorporated.
<BR>Licensed under the Apache License, Version 2.0 (the "License")
<!--<BR>and Bram Stein's (<a href="https://twitter.com/bram_stein">@bram_stein</a>) <a href="https://github.com/bramstein/fontfaceobserver">Font Face Observer</a>.-->
<P>I am not affiliated with DropMix, Harmonix, or Hasbro and this is not an official website.<BR><A href="https://dropmix.hasbro.com">DropMix</A> ™ & © 2017 <A href="https://www.harmonixmusic.com/">HARMONIX</A> © 2017 <A href="https://www.hasbro.com/">HASBRO<span hidden>ther</span></A></P>
</h6>
</div>
<script src="editor.js"></script>
</body>
</html>