-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
7 lines (7 loc) · 14.8 KB
/
index.html
1
2
3
4
5
6
7
<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8" /><meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" /><title>プログラミング言語チェックシートメーカー</title><link href="http://yoshiko-pg.github.io/img/favicon.ico" rel="shortcut icon" /><link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" /><link href="lib/Flat-UI/bootstrap/css/bootstrap.css" rel="stylesheet" /><link href="lib/Flat-UI/css/flat-ui.css" rel="stylesheet" /><link href="css/style.css" rel="stylesheet" /><script src="lib/html2canvas.js" type="text/javascript"></script><script src="lib/jquery-2.1.0.min.js" type="text/javascript"></script><script src="lib/jscolor/jscolor.js" type="text/javascript"></script><script src="js/script.js"></script></head><body><header><button class="btn btn-primary" id="sp_preview" type="button">画像をプレビュー</button></header><h1>プログラミング言語<br />チェックシートメーカー</h1><p class="small">プログラミング言語でないものも入っていますがそこはゆるめで。</p><ul class="share_buttons"><li class="share_twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-via="yoshiko_pg" data-lang="ja">ツイート</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li><li class="share_facebook"><div class="fb-like" data-href="http://yoshiko-pg.github.io/checksheetmaker/" data-width="160" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div></li><li class="share_bookmark"><a href="http://b.hatena.ne.jp/entry/http://yoshiko-pg.github.io/checksheetmaker/" class="hatena-bookmark-button" data-hatena-bookmark-title="プログラミング言語チェックシートメーカー" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/[email protected]" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li><li class="share_github"><iframe src="http://ghbtns.com/github-btn.html?user=yoshiko-pg&repo=checksheetmaker&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe></li></ul><div class="text-center"><button class="btn btn-info" data-target="#aboutModal" data-toggle="modal">つかいかた</button></div><p class="small">（主要対応ブラウザ：Chrome, Safari）</p><div class="container"><div class="col-md-6" id="preview_wrap_wrap"><div id="preview_wrap"><h2>縮小プレビュー</h2><div class="mg20"><p class="notice">※ チェックしたのにチェックが表示されない場合は、枠外へはみ出している可能性があります。並び順をシャッフルして調節してください。</p></div><button class="btn btn-primary" id="shuffle">並び順をシャッフル</button><div id="hider"><div class="minimize" id="preview"><ul class="lang_items"></ul></div></div></div></div><div class="content col-md-6"><div id="form"><h2>1. サイズをチョイス！</h2><ul class="size-select"><li><label class="radio"><input checked="checked" data-fontsize="54" data-height="500" data-lineheight="2" data-toggle="radio" data-width="1500" id="twitter" name="size-select" type="radio" />Twitterプロフィール背景(1500x500)</label></li><li><label class="radio"><input data-fontsize="30" data-height="315" data-lineheight="2.1" data-toggle="radio" data-width="851" id="facebook" name="size-select" type="radio" />Facebookプロフィール背景(851x315)</label></li><li><label class="radio"><input data-fontsize="64" data-height="1236" data-lineheight="2" data-toggle="radio" data-width="840" id="card-tate" name="size-select" type="radio" />名刺裏 縦 (840x1236)(55mmx91mm+裁ち落とし6mm, 350dpi)</label></li><li><label class="radio"><input data-fontsize="60" data-height="840" data-lineheight="2" data-toggle="radio" data-width="1236" id="card-yoko" name="size-select" type="radio" />名刺裏 横 (1236x840)(91mmx55mm+裁ち落とし6mm, 350dpi)</label></li></ul><h2>2. できる言語にチェック！</h2><div class="langs"><div class="category"><h3>スタンダード</h3><ul><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="C" />C</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="C#" />C#</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="C++" />C++</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Java" />Java</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Objective-C" />Objective-C</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="PHP" />PHP</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Python" />Python</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Ruby" />Ruby</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Perl" />Perl</label></li></ul></div><div class="category"><h3>フロントエンド</h3><ul><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="CoffeeScript" />CoffeeScript</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="CSS" />CSS</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="HTML" />HTML</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="JavaScript" />JavaScript</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Sass" />Sass</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="TypeScript" />TypeScript</label></li></ul></div><div class="category"><h3>関数型言語</h3><ul><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Clojure" />Clojure</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Erlang" />Erlang</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="F#" />F#</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Haskell" />Haskell</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="LISP" />LISP</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="OCaml" />OCaml</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Scala" />Scala</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Scheme" />Scheme</label></li></ul></div><div class="category"><h3>その他</h3><ul><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="ActionScript" />ActionScript</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Assembly" />Assembly</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="COBOL" />COBOL</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="D" />D</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="FORTRAN" />FORTRAN</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Go" />Go</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Groovy" />Groovy</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Lua" />Lua</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="R" />R</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="ShellScript" />ShellScript</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="SQL" />SQL</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Swift" />Swift</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Unity" />Unity</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="VB.NET" />VB.NET</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Vimscript" />Vim script</label></li><li><label class="checkbox"><input data-toggle="checkbox" type="checkbox" value="Whitespace" />Whitespace</label></li></ul></div></div><h2>3. 色をチョイス！</h2><h3>背景色</h3><input class="color form-control" id="color-bg" value="94d4cc" /><h3>文字色</h3><input class="color form-control" id="color-text" value="FFFFFF" /><h3>チェックマーク</h3><input class="color form-control" id="color-check" value="000000" /></div><h2>4. make!</h2><button class="btn btn-primary" data-loading-text="生成中..." id="make" type="button">画像を生成</button><h2 class="text-muted">つくったひと</h2><p><a href="http://yoshiko-pg.github.io" target="_blank"><img src="http://yoshiko-pg.github.io/img/logo_icon.png" /> よしこ</a></p><p class="notice">サイズ・言語追加要望、改善プルリク歓迎です。</p></div></div></body></html><div id="copyright"><a href="http://yoshiko-pg.github.io" target="_blank"><i class="fa fa-check-square-o"></i>2014 © yoshiko-pg</a></div><div aria-hidden="true" aria-labelledby="makeModalLabel" class="modal fade" id="makeModal" role="dialog" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button><h4 class="modal-title" id="makeModalLabel">完成！</h4></div><div class="modal-body"><div class="text-center"><a class="btn btn-primary" download="checksheet.png" href="" id="download">Download</a></div><img id="my_image" width="100%" /><h3>作ったことをシェアしよう！</h3><ul class="share_buttons"><li class="share_twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-text="「プログラミング言語 チェックシートメーカー」でプロフィール背景画像を作りました！" data-via="yoshiko_pg" data-hashtags="checksheetmaker">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li><li class="share_facebook"><div class="fb-like" data-href="http://yoshiko-pg.github.io/checksheetmaker/" data-width="160" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div></li><li class="share_bookmark"><a href="http://b.hatena.ne.jp/entry/http://yoshiko-pg.github.io/checksheetmaker/" class="hatena-bookmark-button" data-hatena-bookmark-title="プログラミング言語チェックシートメーカー" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/[email protected]" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li><li class="share_github"><iframe src="http://ghbtns.com/github-btn.html?user=yoshiko-pg&repo=checksheetmaker&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe></li></ul></div></div></div></div><div aria-hidden="true" aria-labelledby="spModalLabel" class="modal fade" id="spModal" role="dialog" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"><div class="text-right"><button class="btn btn-default" data-dismiss="modal" id="sp_close" type="button"><i class="fa fa-times"></i>Close</button></div></div></div></div></div><div aria-hidden="true" aria-labelledby="aboutModalLabel" class="modal fade" id="aboutModal" role="dialog" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button><h4 class="modal-title" id="aboutModalLabel">つかいかた</h4></div><div class="modal-body"><h5>何ができるの？</h5><p>自分の得意な言語にチェックが入った、言語柄の画像を作成できます。</p><ul><li>Twitter, Facebookのプロフィール背景画像に</li><li>名刺の裏側に</li></ul><p>他ご自由にお使いいただけます。</p><h6>イメージ</h6><div id="samples"><img id="sample1" src="img/sample_twitter.png" /><img id="sample2" src="img/sample_card1.jpg" /><img id="sample3" src="img/sample_card2.jpg" /></div><h5>つかいかた</h5><ol><li>サイズを選んで、</li><li>言語を選んで、</li><li>色を選んで、</li><li>プレビューで位置をシャッフルして、</li><li>気に入った位置になったら画像をmake！</li></ol><p>※ 気に入った位置になるまでシャッフルするのが大変かもしれませんが、イライラしないのがコツです。</p><div class="text-center"><button class="btn btn-default" data-dismiss="modal" id="sp_close" type="button"><i class="fa fa-times"></i>Close</button></div></div></div></div></div><div id="fb-root"></div><script type="text/javascript">(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/ja_JP/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><script src="lib/Flat-UI/js/jquery-ui-1.10.3.custom.min.js"></script><script src="lib/Flat-UI/js/jquery.ui.touch-punch.min.js"></script><script src="lib/Flat-UI/js/bootstrap.min.js"></script><script src="lib/Flat-UI/js/bootstrap-select.js"></script><script src="lib/Flat-UI/js/bootstrap-switch.js"></script><script src="lib/Flat-UI/js/flatui-checkbox.js"></script><script src="lib/Flat-UI/js/flatui-radio.js"></script><script src="lib/Flat-UI/js/jquery.tagsinput.js"></script><script src="lib/Flat-UI/js/jquery.placeholder.js"></script><script src="lib/Flat-UI/js/application.js"></script>