Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
77 lines (75 sloc) 3.79 KB
<!DOCTYPE html>
<html>
<head>
<title>Image Resizer</title>
<link href="/img/logo.png" rel="icon">
<style type="text/css">
body { background: #f1f1f1; color: #444; font-family: 'Droid Sans', sans-serif; font-size: 13px; padding: 0 10px; }
a { color: #205AAF; text-decoration: none; }
td { vertical-align: top; text-align: left; white-space: nowrap; padding: 0 50px 0 0; }
input[type=text] { width: 360px; }
ul, li { margin: 0; padding: 0; list-style-type: none; }
#thumbnails { padding: 20px 0 0 0; }
table img { margin: 5px; padding: 5px; background: #fff; -moz-box-shadow: 2px 2px 3px #ddd; -webkit-box-shadow: 2px 2px 3px #ddd; box-shadow: 2px 2px 3px #ddd; }
#thumbnails img { float: left; }
#thumbnails img:hover { -moz-box-shadow: 1px 4px 10px #aaa; -webkit-box-shadow: 1px 4px 10px #aaa; box-shadow: 1px 4px 10px #aaa; cursor: pointer; }
.links { position: absolute; top: 0; right: 10px; }
.delete { position: absolute; left: 790px; margin: 40px 0 0 0; }
</style>
</head>
<body>
<p class="links">
<a href="https://github.com/ServiceStackApps/AwsApps/blob/master/src/AwsApps/imgur/ImageService.cs">1 page c#</a> |
<a href="https://github.com/ServiceStackApps/AwsApps/blob/master/src/AwsApps/imgur/default.htm">1 html</a> |
<a href="http://stuckincustoms.smugmug.com/">photography</a>
<a href="https://servicestack.net"><img src="/img/favicon.png" title="ServiceStack" height="16" align="absmiddle" /></a>
</p>
<a href="/">
<img src="/img/logo.png" title="ServiceStack" style="float:left;height:30px;margin:0 5px 0 0;" />
</a>
<h1>Image Resizer</h1>
<table>
<tr>
<td>
<form action="upload" method="POST" enctype="multipart/form-data">
<label><b>Upload Image</b></label>
<div><input type="text" id="url" name="url" placeholder="Enter url to upload via Web" /></div>
<div><input type="file" name="img" id="img" /> <button type="submit">Upload</button></div>
</form>
<ul id="thumbnails"></ul>
</td>
<td><div id="resolutions"></div></td>
</tr>
</table>
<script src="/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var resolutions = {
"320x480": "iPhone 1, 3G, 3GS, iPod Touch 1,2,3 (HVGA)",
"640x960": "iPod Touch 4, iPhone 4, 4S (DVGA)",
"640x1136": "iPhone 5, iPod Touch 5 (WSVGA)",
"768x1024": "iPad 1, 2, iPad Mini (XGA)",
"1536x2048": "iPad 3, 4 (QXGA)"
};
$.getJSON('images', function (data) {
var items = [];
$.each(data, function (i, val) {
items.push('<li><img src="https://s3.amazonaws.com/ss-awsdemo/imgur/uploads/thumbnails/' + val + '" data-id="' + val.split('.')[0] + '" /></li>');
});
$("#thumbnails").html(items.join(''));
});
$("#thumbnails").click(function(e) {
var id = $(e.target).data("id");
if (!id) return;
var html = ['<a class="delete" href="delete/' + id + '" title="delete upload">delete</a>'];
for (var size in resolutions) {
var wh = size.split('x');
html.push("<h3>" + size + " - " + resolutions[size] + "</h3>");
html.push("<img src='https://s3.amazonaws.com/ss-awsdemo/imgur/uploads/" + size + "/" + id + ".png' width='" + wh[0] + "' height='" + wh[1] + "' />");
}
html.push("<h2>Original Size</h2>");
html.push("<img src='https://s3.amazonaws.com/ss-awsdemo/imgur/uploads/" + id + ".png' />");
$("#resolutions").html(html.join(''));
});
</script>
</body>
</html>