forked from changmason/profile-picture-generator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (118 loc) · 6.41 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
<!DOCTYPE html>
<html class="no-js" lang="zh-TW">
<head>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<title>2/14 罷免頭像產生器</title>
<link href="images/favicon.png?v=3" rel="shortcut icon">
<link href="vender/bootstrap/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="vender/jquery.ui.core.css" rel="stylesheet" />
<link href="vender/jquery.ui.resizable.css" rel="stylesheet" />
<link href="vender/ie-alert/iealert/style.css" rel="stylesheet" />
<link href="stylesheets/all.css" media="screen" rel="stylesheet" type="text/css" />
<meta property="og:title" content="2/14 罷免頭像產生器" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://blog.yurenju.info/profile-picture-generator/" />
<meta property="og:image" content="http://blog.yurenju.info/profile-picture-generator/images/fb-214.png" />
<meta property="og:site_name" content="2/14 罷免頭像產生器" />
<meta property="og:description" content="" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47600485-33', 'auto');
ga('send', 'pageview');
</script>
</head>
<body id="drop">
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '536980866405066',
xfbml : true,
version : 'v2.2'
});
};
(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_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root"></div>
<div id="content" class="container">
<div class="row">
<div class="text-center" id="generator">
<div id="settings">
<div class="col-sm-12 control-box">
<h1 class="logo">2/14 罷免頭像產生器</h1>
<a class="uploadBtn">請按此上傳圖片</a><span class="mobile-hide">，或直接將圖片拖曳到頁面中</span><br>我們提供了數種樣板，讓您自由選擇<br>您可自由移動、縮放圖片到合適位置和大小<br>完成後，請點擊「下載圖片」按鈕
<p><a id="connect-fb">取得 FB 頭像</a></p>
</div>
<div class="col-sm-12 control-box">
<div id="templates" class="text-center" data-toggle="buttons">
<label class="template-label btn btn-default active" style="background-image: url(images/sample.jpg);">
<img src="images/object/1.png">
<input type="radio" name="template" value="1" autocomplete="off" checked="checked">
</label>
<label class="template-label btn btn-default" style="background-image: url(images/sample.jpg);">
<img src="images/object/2.png">
<input type="radio" name="template" value="2" autocomplete="off">
</label>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="col-sm-12 control-box" style="height:inherit">
<div class="preview">
<div id="userimage">
<div class="inner" style="background-image: url(images/sample.jpg)"></div>
<div id="size-slider"><span class="zoomin">＋</span><span class="zoomout">－</span></div>
</div>
<div id="coverimage">
<div class="inner" style="background-image: url(images/object/1.png)"></div>
<div id="dragger"></div>
</div>
<div id="loading"><div class="drop"><img src="images/loading.gif"></div></div>
</div><!-- preview end -->
<div id="formbuttons" class="control-box text-center">
<button href="#" id="normalSubmit">下載圖片</button>
</div>
<div class="left-bottom-corner"><div class="fb-like-box" data-href="https://www.facebook.com/kxgen" data-colorscheme="dark" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"></div></div>
<div class="left-bottom-corner"><div class="fb-like-box" data-href="https://www.facebook.com/unfoldgroup" data-colorscheme="dark" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"></div></div>
<div class="left-bottom-corner"><div class="fb-like-box" data-href="https://www.facebook.com/Appendectomy" data-colorscheme="dark" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"></div></div>
</div>
</div>
</div>
<div id="copyright" class="text-center">
<a href="http://appy.tw/" target="_blank">Appendectomy Project 割闌尾計畫</a>,
<a href="https://www.facebook.com/kxgen" target="_blank">kxapp</a>,
<a href="https://www.facebook.com/unfoldgroup" target="_blank">unfold</a> 出品,
<a href="https://github.com/goooooooogle/profile-picture-generator" target="_blank">Github Source Code</a>.</div>
<form action='#' onsubmit="return false;">
<input type="file" name="Filedata" id="uploadInput">
<div id="uploading">圖片讀取中，請稍後</div>
</form>
<input type="hidden" name="source" id="source">
<canvas id="canvas" class="hide"></canvas>
<canvas id="thumb" class="hide"></canvas>
<canvas id="result" class="hide"></canvas>
<a id="download" class="hide" download="214.png">Download</a>
<script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="vender/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="vender/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
<script src="vender/jquery.ui.rotatable.min.js" type="text/javascript"></script>
<script src="vender/ie-alert/iealert.min.js" type="text/javascript"></script>
<script src="vender/konami.js" type="text/javascript"></script>
<script src="vender/vintagejs/dist/vintage.min.js" type="text/javascript"></script>
<script src="vender/vintagejs/vintage.presets.js" type="text/javascript"></script>
<script src="javascript/all.js" type="text/javascript"></script>
</body>
</html>