-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
227 lines (209 loc) · 11.6 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html>
<head>
<title>feed no angular</title>
<link rel="stylesheet" href="node_modules/tether/dist/css/tether.min.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid header">
<div class="row">
<nav class="navbar fixed-top navbar-light bg-faded">
<div class="container">
<div class="row">
<div class="col-4">
<div style="margin-top:-10px;color:#f15b27;cursor:pointer;"><i class="fa fa-2x fa-home"></i> <b style="font-size:20px;">Home</b></div>
</div>
<div class="col-4 text-center" style="color:#f15b27;">
<i class="fa fa-vimeo"></i>
</div>
<div class="col-4">
<input type="text" id="search" class="form-control" placeholder="search"
style="margin-top:-10px;border-radius:20px;"
/>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12" style="text-align:center;padding:0px;">
<img src="assets/cover.jpg" style="width:100%;"
class="cover_photo"
alt="cover photo"
/>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-3">
<div class="card" style="margin-top:4px;">
<div class="card-block text-center"
style="background-image: url('assets/cover.jpg');background-size: cover;">
<img src="assets/no-user-image.jpg" alt="Mohammed Hamdoune"
style="max-width:50px;border-radius:50%;border:2px solid #fff;"/>
</div>
<div class="card-block text-center" style="font-weight: bold;">
Mohammed Hamdoune
</div>
</div>
</div>
<div class="col-7">
<div class="cmd">
<div><u>Items to show:</u></div>
<div class="row">
<div class="col-4">
<input type="radio" name="items" value="10" checked/> 10
</div>
<div class="col-4">
<input type="radio" name="items" value="25"/> 25
</div>
<div class="col-4">
<input type="radio" name="items" value="50"/> 50
</div>
</div>
<div>
<input type="checkbox" id="10_likes"/> SHow only videos from users that have more than 10 likes
</div>
</div>
<div id="target">
<div class="card" style="">
<div class="card-block" style="padding: 0px;">
<div class="row">
<div class="col-2" style="text-align:center;">
<img src="https://i.vimeocdn.com/portrait/1794799_300x300"
style="max-width:48px;border-radius:50%;margin:auto;"/>
</div>
<div class="col-8">
<table style="width:100%;">
<tr>
<td>
<a href="https://vimeo.com/terjes">TSO Photography</a>
</td>
</tr>
<tr>
<td style="font-size: 12px;color:grey;">
125 plays|56 comments|30 likes
</td>
</tr>
</table>
</div>
</div>
</div>
<img class="card-img-top"
style="max-width:100%;"
src="https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F145026168_1280x720.jpg&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
alt="Card image cap">
<div class="card-block">
<h4 class="card-title">
<a href="https://www.vimeo.com//apps/1264">Vimeo Desktop Uploader</a>
</h4>
<p class="card-text" style="font-size:13px;">
Follow on:↵https://facebook.com/TSOphotography for more photos, videos and updates. ↵↵This
was filmed between 4th and 11th April 2011. I had the pleasure of visiting El Teide.↵Spain´s
highest mountain @(3718m) is one of the best places in the world to photograph the stars and
is also the location of Teide Observatories, considered to be one of the world´s best
observatories. ↵↵The goal was to capture the beautiful Milky Way galaxy along with one of
the most amazing mountains I know El Teide. I have to say this was one of the most
exhausting trips I have done. There was a lot of hiking at high altitudes and probably less
than 10 hours of sleep in total for the whole week. Having been here 10-11 times before I
had a long list of must-see locations I wanted to capture for this movie, but I am still not
100% used to carrying around so much gear required for time-lapse movies.↵ ↵A large
sandstorm hit the Sahara Desert on the 9th April (http://bit.ly/g3tsDW) and at approx 3am in
the night the sandstorm hit me, making it nearly impossible to see the sky with my own
eyes.↵↵Interestingly enough my camera was set for a 5 hour sequence of the milky way during
this time and I was sure my whole scene was ruined. To my surprise, my camera had managed to
capture the sandstorm which was backlit by Grand Canary Island making it look like golden
clouds. The Milky Way was shining through the clouds, making the stars sparkle in an
interesting way. So if you ever wondered how the Milky Way would look through a Sahara
sandstorm, look at 00:32.↵↵Available in Digital Cinema 4k.↵↵Follow Facebook:
http://www.facebook.com/TSOPhotography↵Follow
Twitter:↵http://twitter.com/TSOPhotography↵Follow
Google+:↵https://plus.google.com/107543460658107759808↵↵Press/licensing/projects contact:
tsophotography@gmail.com↵↵↵Music by my friend: Ludovico Einaudi - "Nuvole bianche" with
permission. ↵Please support the artist
here:↵http://itunes.apple.com/us/album/una-mattina/id217799399
</p>
</div>
</div>
</div>
<div class="row pagination" style="margin: 10px 0px 0px;">
<!--div-- class="col-6">
<button class="btn btn-primary btn-sm" id="prev">Prev</button>
</div-->
<div class="col-6"></div>
<div class="col-6" style="text-align:right;padding:0px;">
<button class="btn btn-secondary" id="next" style="float: right;padding-left:20px;padding-right:20px;font-weight:bold;">Next</button>
</div>
</div>
</div>
<div class="col-3"></div>
</div>
</div>
<script src="node_modules/jquery/dist/jquery.min.js "></script>
<script src="node_modules/tether/dist/js/tether.min.js "></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js "></script>
<script src="node_modules/mustache/mustache.js"></script>
<script src="node_modules/lodash/lodash.js"></script>
<script src="app.js"></script>
<script id="template" type="x-tmpl-mustache">
{{#videosToShow}}
<div class="display:table;width:100%;">
<div style="display:table-cell;width:50px;">
<a href="{{user_link}}"><img src="{{user_image_url}}" style="max-width:48px;border-radius:50%;margin:auto;"/></a>
</div>
<div style="display:table-cell;">
<div class="card" style="margin-top:4px;" id="{{id}}">
<div class="card-block" style="padding: 4px;">
<div class="row">
<div class="col-12">
<table style="width:100%;">
<tr>
<td>
<a href="{{user_link}}" style="font-weight:bold;">{{user_name}}</a>
</td>
</tr>
<tr>
<td style="font-size: 12px;color:grey;">
<i class="fa fa-eye"></i> 125 | <i class="fa fa-comment"></i> {{comments_count}} | <i class="fa fa-heart"></i> {{likes_count}}
</td>
</tr>
</table>
</div>
</div>
</div>
<img class="card-img-top"
style="max-width:100%;cursor:pointer;"
src="{{image_url}}" alt="Card image cap" onclick="location.href='{{link}}'">
<div class="card-block">
<h4 class="card-title">
<a href="{{link}}">{{name}}</a>
</h4>
{{#fullDescription}}
<p class="card-text description full" style="font-size:13px;">
{{content}}
</p>
{{/fullDescription}}
{{#shortDescription}}
<p class="card-text description short" style="font-size:13px;">
{{content}} <u style="color:#0275d8;font-weight:bold;cursor:pointer;" class="more" onclick="App.more(this)">Show more</u>
</p>
{{/shortDescription}}
{{#longDescription}}
<p class="card-text description long hidden" style="font-size:13px;">
{{content}} <u style="color:#0275d8;font-weight:bold;cursor:pointer;" class="less" onclick="App.less(this)">Show less</u>
</p>
{{/longDescription}}
</div>
</div>
</div>
</div>
{{/videosToShow}}
</script>
</body>
</html>