-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
108 lines (103 loc) · 3.51 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
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="media/favicon.ico" type="image/x-icon" />
<title>PhotoMod</title>
<style type="text/css">
body {
background-color: #ffffff; background-image:url('media/bg.png'); color: #8c0d0d; line-height: normal;
font-family: Lucida Grande, Lucida Sans, Arial, Helvetica Neue, Verdana, Geneva, sans-serif;
font-size: 11px; font-weight: normal; text-decoration: none;
line-height: 1.5em;
}
a img {
border: 0px solid transparent;
}
a, a:link, a:visited, a:active, a:hover {
color: #cdcdcd; text-decoration: underline;
}
h1 {
font-family: Arial, Helvetica Neue, Verdana, Geneva, sans-serif;
width: 100%; letter-spacing: 0.1em;
margin-bottom: 1em; font-size: 1.65em;
}
canvas {
display: block;
outline: 0px;
margin-bottom: 0px;
}
#content {
margin: 0px auto 0px auto; padding: 0px 0px 0px 0px;
width: 600px; min-width: 300px; overflow: auto;
background-color: #CF9178;
border: 4px solid #CF9178;
}
#info {
margin: 0px auto 0px auto; padding: 0px 0px 0px 0px;
width: 600px; min-width: 300px; overflow: auto;
background-image:url('media/bg_2.png');
border: 4px solid #CF9178;
}
#logo {position:absolute; top:0; left:0; width:200px;}
#how-to {margin: 10px;}
</style>
<!--[if lt IE 9]>
<script type="text/javascript">alert("Your browser does not support the canvas tag.");</script>
<![endif]-->
<script src="js/processing.js" type="text/javascript"></script>
<script type="text/javascript">
// convenience function to get the id attribute of generated sketch html element
function getProcessingSketchId () { return 'InstaSpamFinal.pde'; }
</script>
</head>
<body onload="setupFileListener()">
<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_US/all.js#xfbml=1&appId=639535246059255";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src="js/jquery.js"></script>
<script src="js/insta.js"></script>
<div style="display:none;">
<button id="yada"">Post to Facebook</button>
<input type="file" name="file" id="file"/>
</div>
<div id="fb-root"></div>
<div id="logo"><img src="media/logo.png" /></div>
<div id="content">
<div>
<canvas id="InstaSpamFinal.pde" data-processing-sources="InstaSpamFinal.pde"
width="600" height="600">
<p>Your browser does not support the canvas tag.</p>
<!-- Note: you can put any alternative content here. -->
</canvas>
<noscript>
<p>JavaScript is required to view the contents of this page.</p>
</noscript>
</div>
</div>
<br />
<div id="info">
<div id="how-to">
<h2>How to edit your photo:</h2><br />
To bring the menu, click on the photo.<br />
First, you have to upload a picture to the application by clicking on the camera-icon.<br />
<img src="camera.png" /><br />
Then you will be able to choose one of the tints and overlays in the menu.<br />
</div>
</div>
<br />
<div id="info">
<div class="fb-comments" data-href="https://apps.facebook.com/photomod/" data-width="600" data-num-posts="10"></div>
</div>
<br />
<div id="info">
<div id="how-to">
<div class="fb-like" data-href="https://apps.facebook.com/photomod/" data-send="true" data-width="600" data-show-faces="false"></div>
</div>
</div>
</body>
</html>