forked from Ahrengot/dropshare-landing-page
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
319 lines (270 loc) · 13 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
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<!--
Welcome to your very own Dropshare HTML landing page template.
Feel free to edit this file to suit your needs, BUT..
*** IMPORTANT ***
do not forget to include all required variables to display the landing page properly.
Variable | Description
##########################################################
__FILENAME__ | Name of the file shared
__PATH__ | Path to the file shared
__PREVIEW__ | Automatically generated by Dropshare if file is an image, or video, or text
__FILESIZE__ | Formatted file size of the file shared
__FILETYPE__ | Apple Uniform Type Identifier (https://developer.apple.com/library/ios/documentation/Miscellaneous/Reference/UTIRef/Articles/System-DeclaredUniformTypeIdentifiers.html)
__SHAREDATE__ | ISO formatted date of sharing
__PREVIEWURL__ | Absolute URL to preview file, required e.g. for Twitter cards or Slack previews (or custom preview implementations)
__LANDINGPAGEURL__ | Absolute URL to the landing page
Any questions? Head over to http://getdropsha.re/support and ask for help!
-->
<!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">
<meta property="twitter:card" content="photo" />
<meta property="twitter:image" content="__PREVIEWURL__" [^] />
<meta property="twitter:title" content="__FILENAME__" />
<title>__FILENAME__</title>
<style>
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
@media (min-width: 980px) {
html { font-size: 17px; }
}
@media (min-width: 1560px) {
html { font-size: 19px; }
}
body {
margin: 0;
font-size: 1rem;
line-height: 1.4;
font-family: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
background-color: #f7f7f7;
}
.upload-meta {
margin: 0 0 1.2rem;
font-size: 0.8rem;
font-style: italic;
color: rgba(0,0,0,0.35);
}
.container {
margin-bottom: 15vw;
text-align: center;
}
.container, .imagePreview.hljs {
width: 90vw;
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}
.preview {
margin: 3rem auto 2.5rem;
}
@media (min-width: 650px) {
.preview {
margin-top: 10vh;
}
}
.preview-content-wrap {
display: inline-block;
background-color: white;
box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.2), 0 1px 8px 0 rgba(0,0,0,.12);
}
.hljs > pre {
margin: 0;
padding: 1em;
font-size: 0.83rem;
-webkit-font-smoothing: antialiased;
line-height: 1.3;
}
.file-preview {
padding: 1em;
}
.file-preview svg {
width: 80%;
max-width: 90px;
margin: 1em 5em 0;
}
.file-preview-name {
font-family: Roboto, "Courier New", Courier, monospace;
color: #888;
}
.download {
display: inline-block;
margin: auto;
}
.download-btn {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
position: relative;
padding: 0.65em 2.2em;
background-color: #536dfe;
border: none;
border-radius: 4px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
0 3px 1px -2px rgba(0,0,0,.2),
0 1px 5px 0 rgba(0,0,0,.12);
color: white;
font-weight: 600;
text-decoration: none;
will-change: box-shadow;
transition: all 0.18s cubic-bezier(.4,0,1,1);
}
.download-btn:hover {
-webkit-filter: brightness(1.2);
filter: brightness(1.2);
}
.download-btn:active {
box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),
0 1px 10px 0 rgba(0,0,0,.12),
0 2px 4px -1px rgba(0,0,0,.2);
}
.download-btn-text {
margin: 0 0.3em 0 0.5em;
}
.filesize {
font-size: 0.7em;
opacity: 0.7;
font-weight: 300;
flex: 1 0 auto;
}
.download-icon {
flex: 0 0 1.7em;
height: 1.7em;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gIDxnPiAgICA8Zz4gICAgICA8cG9seWdvbiBmaWxsPSIjZmZmIiBwb2ludHM9IjE5My4yLDM4MS4yIDE4MS42LDM5Mi42IDI1Ni4xLDQ2NiAzMzAuNiwzOTIuNiAzMTksMzgxLjIgMjY0LjMsNDM1IDI2NC4zLDE5Mi45IDI0Ny45LDE5Mi45IDI0Ny45LDQzNSAgICIvPiAgICA8L2c+ICAgIDxnPiAgICAgIDxwYXRoIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC44KSIgZD0iTTM5OS4yLDE2NC40YzAtMS4yLDAuMi0yLjMsMC4yLTMuNUMzOTkuNCw5Ny40LDM0Ni41LDQ2LDI4Mi42LDQ2Yy00Ni4xLDAtODUuOCwyNi44LTEwNC40LDY1LjRjLTguMS00LTE3LjEtNi4zLTI2LjgtNi4zICAgIGMtMjkuNiwwLTU0LjEsMjMuMy01OC45LDUxLjNjLTM1LjIsMTItNjAuNiw0My40LTYwLjYsODIuNGMwLDQ5LjEsNDAuMSw4OS4yLDg5LjYsODkuMkgyMTN2LTE2aC05MC43ICAgIGMtNDAuOSwwLTc0LjItMzMuMi03NC4yLTczLjdjMC0zMS40LDIwLjItNTcuNSw1MC4yLTY3LjdsOC40LTIuOGwxLjUtOC43YzMuNi0yMS4zLDIyLjEtMzguOCw0My45LTM4LjhjNi45LDAsMTMuNywxLjYsMTkuOSw0LjcgICAgbDEzLjUsNi43bDYuNS0xMy42YzE2LjYtMzQuNCw1Mi4xLTU2LjYsOTAuNC01Ni42YzU1LjMsMCwxMDAuOSw0Mi44LDEwMC45LDk3LjZjMCwxMy4xLTAuMiwyMC4xLTAuMiwyMC4xbDE1LjIsMC4xICAgIGMzNi43LDAuNSw2NS42LDMwLDY1LjYsNjYuNGMwLDM2LjMtMjkuOCw2Ni4xLTY2LjUsNjYuM2wtMy4yLDAuMUgyOTd2MTZoMTAxaDBjNDUsMCw4MS45LTM3LjIsODEuOS04Mi4xICAgIEM0NzkuOSwyMDEsNDQ0LjUsMTY0LjUsMzk5LjIsMTY0LjR6Ii8+ICAgIDwvZz4gIDwvZz48L3N2Zz4=);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* preview types */
img {
max-width: 100%;
max-height: 80vh;
display: block;
}
video, iframe {
height: auto;
max-height: 80vh;
width: 100%;
}
iframe {
height: 80vh;
border: none;
width: 90vw;
max-width: 1170px;
}
</style>
</head>
<body>
<div style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="file-icon" width="202px" height="182px" viewBox="0 0 202 182">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path fill="#000000" d="M127.933333,67.4074074 L181.753888,67.4074074 C193.004324,67.4074074 202,76.4575401 202,87.6214437 L202,134.823001 C202,145.989181 192.935507,155.037037 181.753888,155.037037 L127.933333,155.037037 L127.933333,168.580566 C127.933333,175.945383 121.911874,182 114.484026,182 L13.4493075,182 C5.99889763,182 0,175.942014 0,168.46911 L0,13.5308907 C0,6.05546571 6.03755275,0 13.4852515,0 L87.5333333,0 L127.933333,47.1851852 L127.933333,67.4074074 Z M121.2,155.037037 L67.3794452,155.037037 C56.1290094,155.037037 47.1333333,145.986904 47.1333333,134.823001 L47.1333333,87.6214437 C47.1333333,76.4552631 56.1978268,67.4074074 67.3794452,67.4074074 L121.2,67.4074074 L121.2,53.9259259 L94.2526149,53.9259259 C86.8229411,53.9259259 80.8,47.9498899 80.8,40.4045457 L80.8,6.74074074 L13.4368885,6.74074074 C9.73461722,6.74074074 6.73333333,9.80954978 6.73333333,13.4508585 L6.73333333,168.549142 C6.73333333,172.255037 9.79504013,175.259259 13.4663987,175.259259 L114.466935,175.259259 C118.185504,175.259259 121.2,172.259992 121.2,168.563023 L121.2,155.037037 Z M87.5333333,10.1111111 L87.5333333,40.3852286 C87.5333333,44.1407409 90.5677174,47.1851852 94.2447079,47.1851852 L119.179671,47.1851852 L87.5333333,10.1111111 L87.5333333,10.1111111 Z M67.2967141,74.1481481 C59.8795037,74.1481481 53.8666667,80.2160025 53.8666667,87.5758183 L53.8666667,134.868626 C53.8666667,142.284524 59.9424483,148.296296 67.2967141,148.296296 L181.836619,148.296296 C189.25383,148.296296 195.266667,142.228442 195.266667,134.868626 L195.266667,87.5758183 C195.266667,80.1599209 189.190885,74.1481481 181.836619,74.1481481 L67.2967141,74.1481481 L67.2967141,74.1481481 Z" fill-rule="nonzero"></path>
<path fill="#000000" d="M102.713893,92.5711111 L102.713893,96.0955556 L82.8383377,96.0955556 L82.8383377,108.402222 L100.113893,108.402222 L100.113893,111.926667 L82.8383377,111.926667 L82.8383377,129 L78.9383377,129 L78.9383377,92.5711111 L102.713893,92.5711111 Z M113.951671,92.5711111 L113.951671,129 L110.08056,129 L110.08056,92.5711111 L113.951671,92.5711111 Z M125.333893,92.5711111 L125.333893,125.475556 L143.649449,125.475556 L143.649449,129 L121.433893,129 L121.433893,92.5711111 L125.333893,92.5711111 Z M173.405004,92.5711111 L173.405004,96.0955556 L152.98056,96.0955556 L152.98056,108.402222 L172.191671,108.402222 L172.191671,111.926667 L152.98056,111.926667 L152.98056,125.475556 L174.30056,125.475556 L174.30056,129 L149.08056,129 L149.08056,92.5711111 L173.405004,92.5711111 Z"></path>
</g>
</svg>
</svg>
</div>
<div class="container">
<div class="preview">
<div class="upload-meta">
__FILENAME__<span style="margin: 0 1.3em;">•</span>Shared <span id="date" data-timestamp="__UNIXSHAREDATE__">__SHAREDATE__</span>
</div>
<div class="preview-content-wrap">__PREVIEW__</div>
</div>
<div class="download">
<a href="__PATH__" class="download-btn" download="__FILENAME__">
<div class="download-icon"></div>
<div class="download-btn-text">Download</div>
<div class="filesize">(__FILESIZE__)</div>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script>
var colors = ['#536dfe', '#8bc34a', '#ff5722', '#607d8b', '#9c27b0'];
var selectedColor = colors[Math.floor(Math.random() * colors.length)];
document.querySelector('.download-btn').style.backgroundColor = selectedColor;
// Swap out timestamp for human readable time diff
var dateEl = document.getElementById("date");
var timestamp = parseInt(dateEl.getAttribute('data-timestamp'), 10);
if ( !isNaN(timestamp) ) {
dateEl.innerHTML = moment(timestamp * 1000).fromNow();
}
</script>
<!-- Syntax Highlighting Start -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/ocean.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
<script type="text/javascript">
hljs.configure({
tabReplace: " "
});
var codeFileTypes = [
"public.plain-text",
"public.html",
"public.javascript-source",
"com.netscape.javascript-source",
"public.css",
"net.daringfireball.markdown"
];
// Files we want to consider code but that
// are unrecognized by file_type
var codeFileExtensions = [
/.sass$/,
/.scss$/,
/.stylus$/,
/.less$/,
/.elm$/,
/.vue$/,
/.jsx$/
];
var isCode = false;
codeFileTypes.forEach(function(type) {
if (type === "__FILETYPE__") {
isCode = true;
}
});
codeFileExtensions.forEach(function(ext) {
if ("__FILENAME__".match(ext) !== null) {
isCode = true;
}
});
if (isCode) {
$.ajax({
url: "__PREVIEWURL__",
dataType: "text",
success: function(data) {
var preview_block = $(".preview-content-wrap");
preview_block.css("text-align", "left");
preview_block.text(data);
preview_block.html("<pre>" + preview_block.html() + "</pre>");
hljs.highlightBlock(preview_block[0]);
}
});
} else if (!document.querySelector(".imagePreview")) {
$(".preview-content-wrap").html(
"<div class='file-preview'>" +
"<svg><use xlink:href='#file-icon'></use></svg>" +
"<div class='file-preview-name'>__FILENAME__</div>" +
"</div>"
);
document.querySelectorAll("svg path").forEach(function(path) {
path.style.fill = selectedColor;
});
// Remove filename from meta
$(".upload-meta").text($("#date").text());
}
</script>
<!-- Syntax Highlighting Stop -->
</body>
</html>