-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (135 loc) · 6.03 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="img/red-green-christmas-sweater.png" type="image/png">
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rele="stylesheet"
<link rel="stylesheet" href="css/normalize.css"> <!-- not really a link, more like a #include-->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- stylesheet -->
<link href="bower_components/literallycanvas/css/literallycanvas.css" rel="stylesheet">
<link rel="stylesheet" href="main.css">
<!-- dependency: React.js -->
<script src="bower_components/react/react-with-addons.js"></script>
<!-- Literally Canvas -->
<script src="bower_components/literallycanvas/js/literallycanvas.js"></script>
</head>
<body>
<!-- where the widget goes. you can do CSS to it. -->
<div class="container">
<div class="title"><h2>UGLY SWEATER MAKER</h2></div>
<div class="literally backgrounds"></div>
<hr class="featurette-divider">
<div class="input">
<input class="form-control input-sm" type="text" maxlength="50" class="form-control" id="title" placeholder="Name Your Creation!" required>
</div>
<div class="button-container">
<form class="controls export">
<button type="submit" data-action="export-as-png" class="btn btn-default">Export as PNG</button>
</form>
<form class="imgur-submit">
<button type="submit" data-action="upload-to-imgur" class="btn btn-default">Upload to Imgur</button>
</form>
</div>
<!--
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Ugly Sweaters Ad
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-2746057250569936"
data-ad-slot="3472230721"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>-->
<!--dogecoin donate button-->
<script src="http://www.dogets.com/widget/dogets.js"></script>
<script>
DogetsCom.go({
wallet_address: "DL6ofb3jtaUfVLzx7gL7GmnAuGkZ5h9qVq",
currency: "dogecoin",
counter: "count",
alignment: "bl",
qrcode: true,
auto_show: false,
lbl_button: "Help Keep This Site Running",
lbl_address: "Donate Dogecoin to this Address:",
lbl_count: "donations",
lbl_amount: "DOGE"});
</script>
</div>
<!-- google analytics tracking code -->
<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-69869995-2', 'auto');
ga('send', 'pageview');
</script>
<!-- kick it off -->
<script>
$(document).ready(function(){
var newImage = new Image()
newImage.src = 'img/red-green-christmas-sweater.png';
var lc = LC.init(
document.getElementsByClassName('literally backgrounds')[0],{imageURLPrefix: 'bower_components/literallycanvas/img'})
$('[data-action=upload-to-imgur]').click(function(e) {
e.preventDefault();
$('.imgur-submit').html('Uploading...')
// this is all standard Imgur API; only LC-specific thing is the image
// data argument;
$.ajax({
url: 'https://api.imgur.com/3/image',
type: 'POST',
headers: {
// Your application gets an imgurClientId from Imgur
Authorization: 'Client-ID ' + '0da8c86e81c0244',
Accept: 'application/json'
},
data: {
// convert the image data to base64
image: lc.canvasForExport().toDataURL().split(',')[1],
/*album: 'LwnWH',*/
type: 'base64',
title: $("#title").val(),
description: 'Lovingly crafted with http://uglysweaters.work'
},
success: function(result) {
var url = 'https://imgur.com/gallery/' + result.data.id;
var imageId = result.data.id;
$('.imgur-submit').html("<a href='" + url + "'>" + url + "</a>");
},
});
/*
$.ajax({
url: 'https://api.imgur.com/3/album/{LwnWH}/add',
type: 'PUT',
headers: {
// Your application gets an imgurClientId from Imgur
Authorization: 'Client-ID ' + '0da8c86e81c0244',
Accept: 'application/json'
},
data: {imageID
},
});
*/
});
$('.controls.export [data-action=export-as-png]').click(function(e) {
e.preventDefault();
window.open(lc.getImage().toDataURL());
});
lc.saveShape(LC.createShape('Image', {x: 300, y: 20, image: newImage, scale: .7}));
// the background image is not included in the shape list that is
// saved/loaded here
/*
var localStorageKey = 'drawing-with-background'
if (localStorage.getItem(localStorageKey)) {
lc.loadSnapshotJSON(localStorage.getItem(localStorageKey));
}
lc.on('drawingChange', function() {
localStorage.setItem(localStorageKey, lc.getSnapshotJSON());
});*/
});
</script>
</body>
</html>