forked from rewish/IconGen
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
198 lines (192 loc) · 9.65 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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>パズドラ風アイコンジェネレーター ver.2</title>
<meta name="description" content="パズル＆ドラゴンズ風のモンスターアイコンが作れます。プラスやレベル表記は好みにあわせて、オリジナルフレームもあります。Twitter等に使ってね。">
<meta name="viewport" content="width=device-width">
<meta property="og:image" content="http://5509.github.io/IconGen/og.png">
<link rel="stylesheet" href="styles/main.css">
<script src="http://webfont.fontplus.jp/accessor/script/fontplus.js?El7q9AJq3dU%3D" charset="utf-8"></script>
<script>
(function(FONTPLUS) {
// 非同期モード
FONTPLUS.async()
}(this.FONTPLUS));
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-4011945-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script src="scripts/lib.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<div class="app">
<div class="forAndroid">✍ Android4以上をお使いで、動作しない方は<br>
<a href="market://details?id=com.android.chrome&hl=ja">Google Chrome</a>で試してみてください<br>
<a href="#" class="close">✓ このメッセージを以降表示しない</a>
</div>
<div class="logo"><img src="images/logo.png" alt="パズドラ風アイコンジェネレータ ver2" width="267"></div>
<div class="banner">
<script>
if ( PIG.isMobile() ) {
google_ad_client = "ca-pub-2250259658901185";
/* パズドラモバイル */
google_ad_slot = "9459562146";
google_ad_width = 320;
google_ad_height = 50;
} else {
google_ad_client = "ca-pub-2250259658901185";
/* パズドラ */
google_ad_slot = "2163420549";
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<div class="btn_area">
<a class="btn_flame" href="#" data-pig-frame="flame"><img src="images/btn_flame.png" alt="火属性"></a>
<a class="btn_water" href="#" data-pig-frame="water"><img src="images/btn_water.png" alt="水属性"></a>
<a class="btn_stone" href="#" data-pig-frame="stone"><img src="images/btn_stone.png" alt="木属性"></a>
<a class="btn_light" href="#" data-pig-frame="light"><img src="images/btn_light.png" alt="光属性"></a>
<a class="btn_dark" href="#" data-pig-frame="dark"><img src="images/btn_dark.png" alt="闇属性"></a>
<a class="btn_sexy" href="#" data-pig-frame="sexy"><img src="images/btn_sexy.png" alt="回復属性"></a>
<a class="btn_ojama" href="#" data-pig-frame="ojama"><img src="images/btn_ojama.png" alt="お邪魔属性"></a>
</div>
<div class="frame_area flame">
<div class="frame_main_area">
<canvas width="108" class="default"></canvas>
<img class="ani_gif_preview">
</div>
<div class="left">
<a class="frame_double active" href="#" data-pig-sub-frame="double">サブ属性・ダブル</a>
<a class="frame_flame" href="#" data-pig-sub-frame="flame">サブ属性・火</a>
<a class="frame_water" href="#" data-pig-sub-frame="water">サブ属性・水</a>
<a class="frame_stone" href="#" data-pig-sub-frame="stone">サブ属性・木</a>
</div>
<div class="right">
<a class="frame_light" href="#" data-pig-sub-frame="light">サブ属性・光</a>
<a class="frame_dark" href="#" data-pig-sub-frame="dark">サブ属性・闇</a>
<a class="frame_sexy" href="#" data-pig-sub-frame="sexy">サブ属性・回復</a>
<a class="frame_ojama" href="#" data-pig-sub-frame="ojama">サブ属性・お邪魔</a>
</div>
</div>
<div class="select_photo"><input type="file"></div>
<div class="scale_photo"><span>拡大</span><input type="range" min="1" max="10" step="0.1" value="1"></div>
<div class="input_group">
<div class="input_level"><span>Lv</span><input type="number" min="1" max="99" data-pig-target="lv"></div>
<div class="input_plus"><span>+</span><input type="number" min="1" max="297" data-pig-target="plus"></div>
<div class="input_arousal"><span>覚醒</span><input type="number" min="1" max="10" data-pig-target="arousal"></div>
</div>
<div class="no_frame">
<label><span>フレームを外す</span>
<div class="checkbox">
<input type="checkbox" class="no_frame">
<span></span>
</div>
</label>
</div>
<div class="animation">
<label><span>+と覚醒を交互に（Twitterに設定不可</span>
<div class="checkbox">
<input type="checkbox" class="animation">
<span></span>
</div>
</label>
<span class="note">注意）+と覚醒を両方設定でき、交互に切り替わるアイコンになりますが、Twitterには設定できません。チェック状態ではアイコンの位置調整もできません。動かなかったら諦めてください…<strong>また端末によってはオンにすると著しく動作が遅くなったり、動作しなくなることもあります。</strong></span>
</div>
<div class="btn_download disabled"><a href="javascript:void(0)" class="download">ダウンロード</a></div>
</div><!-- // App -->
<div class="banner">
<script>
if ( PIG.isMobile() ) {
google_ad_client = "ca-pub-2250259658901185";
/* パズドラモバイル */
google_ad_slot = "9459562146";
google_ad_width = 320;
google_ad_height = 50;
} else {
google_ad_client = "ca-pub-2250259658901185";
/* パズドラ */
google_ad_slot = "2163420549";
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<div class="footer">
<div class="inner">
<p>パズル＆ドラゴンズのモンスターアイコンみたいなアイコンジェネレータです。Twitterのアイコン等に使ってね。</p>
<dl class="news">
<dt>2014-02-09</dt>
<dd>最大レベルの時の表示幅をアプリに合わせました。</dd>
<dt>2014-01-21</dt>
<dd>ステータス表記を現バージョンのレイアウトにあわせました。<br>
+と覚醒を選べるようになりました。</dd>
<dt>2013-10-20</dt>
<dd>フレームなしが選べるようになりました。</dd>
<dt>2013-10-20</dt>
<dd>デフォルトのアイコンサイズを180x180(+かLvオプションがある場合は191x191)に変更しました。今まで通りの98x98(+かLvオプションがある場合は104x104)も選べます。</dd>
<dt>2013-10-06</dt>
<dd>Android4.x系の端末で動作するようになりました。</dd>
<dt>2013-10-01</dt>
<dd>リニューアルしました。<br>UIの改善、プラスとレベル表記ができるようになりました。<br>iOS6以降に最適化しました。</dd>
</dl>
<ul class="sns_btn">
<li>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="パズドラ風アイコンジェネレータ ver.2" data-lang="ja" data-hashtags="パズドラ">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</li>
<li>
<g:plusone size="medium" href="http://5509.github.com/IconGen/"></g:plusone><script type="text/javascript">(function(){var po=document.createElement("script");po.type="text/javascript";po.async=true;po.src="https://apis.google.com/js/plusone.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(po,s);})();</script>
</li>
<li>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=497414760292349";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://5509.github.io/IconGen" data-width="150" data-layout="button_count" data-action="recommend" data-show-faces="false" data-send="true"></div>
</li>
</ul>
</div>
<div class="banner">
<script>
if ( PIG.isMobile() ) {
google_ad_client = "ca-pub-2250259658901185";
/* パズドラモバイル */
google_ad_slot = "9459562146";
google_ad_width = 320;
google_ad_height = 50;
} else {
google_ad_client = "ca-pub-2250259658901185";
/* パズドラ */
google_ad_slot = "2163420549";
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<p class="credit"><a href="https://twitter.com/5509">@5509</a>, <a href="https://twitter.com/shimael">@shimael</a>, <a href="https://twitter.com/rewish">@rewish</a>(ver.1)</p>
</div>
<div class="loading"><div><div></div></div></div>
<script>
(function() {
var pig = new PIG.Controller.Initializer()
}());
</script>
</body>
</html>