-
Notifications
You must be signed in to change notification settings - Fork 1
/
polaroid.html
138 lines (102 loc) · 5 KB
/
polaroid.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Transform any picture into a polaroid photo. It's free, easy and fast!">
<meta name="keywords" content="javascript, jquery, polaroid, frame, photo, canvas, image, photo converter, image converter, polaroid maker, image vintage, print polaroid, download polaroid, polaroid picture maker, polaroid picture creator">
<meta name="author" content="Manuel Fernandes">
<title>polaroid.js v1.0.1</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="css/jquery.pnotify.default.css" media="all" rel="stylesheet" type="text/css" />
<!-- Custom styles for this template -->
<link href="css/polaroid.css" rel="stylesheet">
</head>
<body>
<!-- NAVBAR
================================================== -->
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only trn">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">polaroid.js</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class=""><a href="index.html" class="trn">Home</a></li>
<li class="active"><a href="polaroid.html" class="trn">Demo</a></li>
<li><a href="#" class="trn" data-toggle="modal" data-target="#modal_about">About</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="jumbotron" id="file_dd">
<div class="container">
<h1>polaroid.js</h1>
<p class="trn" data-trn-key="subtitle_key">Transform any picture into a polaroid photo. It's free, easy and fast!</p>
<div style="position: absolute; left: -999em;">
<input type="file" id="fileInput" name="open image file">
</div>
<div>
<button id="button_dd" type="button" class="btn btn-primary btn-lg">1. Drag and drop your picture here or click to open image</button>
<h6 class="text-muted">polaroid.js works with every image size but for best results use images with web resolution, i.e. up to 1024 pixels wide.</h6>
</div>
<div class="">
<img id="my_img" class="img-responsive" style="padding-top: 10px; padding-bottom: 5px;"/>
</div>
<div>
<a href="" id="download_img" download="image.png" class="hidden btn btn-primary" role="button">2. Download your polaroid image</a>
</div>
</div>
</div>
<div class="container">
<h2>How it works</h2>
<p>No server side scripting. Everything done on client side. Thanks to polaroid.js and HTML5 technologies such as <em>drag & drop</em> and <em>file API</em>.<br/>
That's right, there are no privacy issues as there is no uploading to our server - the images you use do not leave your local computer, that's why this is so fast.</p>
<hr/>
<footer>
<p>© Manuel Fernandes 2013</p>
</footer>
</div>
<!-- Modal About-->
<div class="modal fade" id="modal_about" tabindex="-1" role="dialog" aria-labelledby="modal_about_label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title trn" id="modal_about_label">About</h4>
</div>
<div class="modal-body">
<p><a href="https://github.com/tinoni" target="_blank">by Manuel Fernandes</a></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="js/modernizr.custom.37345.js"></script>
<script src="js/jquery.pnotify.min.js"></script>
<script src="js/polaroid.min.js"></script>
<script src="js/polaroidify.min.js"></script>
<!--analytics code here-->
<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-45896419-2', 'openxrest.com');
ga('send', 'pageview');
</script>
</body>
</html>