-
Notifications
You must be signed in to change notification settings - Fork 3
/
uploaded.html
executable file
·130 lines (123 loc) · 4.37 KB
/
uploaded.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
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/select2.css" rel="stylesheet" type="text/css">
<link href="css/snap.css" rel="stylesheet" type="text/css">
<link href="css/app.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>500px style Photo uploader</title>
</head>
<body>
<!-- Off-canvas menu -->
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<div class="side-menu">
<h3>Menu</h3>
<div class="list-group">
<a href="index.html" class="list-group-item">
<h4 class="list-group-item-heading">500px-like uploader</h4>
<p class="list-group-item-text">Main page</p>
</a>
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Uploaded photos</h4>
<p class="list-group-item-text">Photos that you uploaded. Note that only you with only this device can see them.</p>
</a>
<a href="http://mrhieu.github.io/500pxupload/" class="list-group-item">
<h4 class="list-group-item-heading">About</h4>
<p class="list-group-item-text">See this project on Github</p>
</a>
</div>
</div>
</div>
<div class="snap-drawer snap-drawer-right"></div>
</div>
<!-- Main page -->
<div id="content-wrapper" class="snap-content">
<!-- Header -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button id="open-left" type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><strong>500px-like uploader</strong></a>
</div>
<div class="navbar-collapse collapse hidden-xs hidden-md">
<ul class="nav navbar-nav">
<li><a class="highlight" href="uploaded.html">Uploaded photos</a></li>
<li><a href="http://mrhieu.github.io/500pxupload/">About</a></li>
</ul>
</div>
</div>
</div>
<!-- Photo list -->
<div class="container">
<div class="row photoList text-center">
<h2>No uploaded photos</h2>
</div>
<div class="row">
<p class="text-center">
<button type="button" class="btn btn-danger btn-remove remove" style="display: none"><i class="glyphicon glyphicon-trash"></i> remove</button>
</p>
</div>
</div>
</div>
<script type="text/x-tmpl" id="tmpl-photoItem">
<div class="col-md-3 col-xs-6 item">
<div class="panel panel-default">
<div class="panel-body">
<img class="img-rounded" src="{%= o.imageData %}"/>
</div>
<div class="panel-footer">{%= o.filename%}</div>
</div>
</div>
</script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/tmpl.min.js"></script>
<script src="js/jquery.resizeimagetoparent.min.js"></script>
<script src="js/masonry.min.js"></script>
<script src="js/snap.min.js"></script>
<script>
var REVIEW = function() {
if (window.localStorage){
var photos = window.localStorage;
var html = '';
for (var i in photos) {
if (photos.hasOwnProperty(i) && i.match(/photo500_/gi) ) {
html += tmpl("tmpl-photoItem", {filename: i, imageData: photos[i]});
}
}
if (html) {
$('.photoList').empty().append(html);
setTimeout(function(){$('.photoList').masonry();}, 500);
$('.remove').show().on('click', function() {
$('.photoList').empty();
if (window.localStorage){
localStorage.clear();
}
});
}
}
}();
// Snap.js
var snapper = new Snap({
element: document.getElementById('content-wrapper'),
disable: 'right'
});
$('#open-left').on('click', function() {
if ($(this).hasClass('active')) {
snapper.close();
} else{
snapper.open('left');
}
$(this).toggleClass('active');
});
$(window).resize(function() {snapper.close()});
</script>
<!--script src="js/live.js"></script-->
</body>
</html>