-
Notifications
You must be signed in to change notification settings - Fork 2
/
template.html
134 lines (125 loc) · 3.79 KB
/
template.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
<!--
Dropshare Landing Page
Florian Egermann 2016
www.fleg.de
V.1.1
Features:
* Centered & minimal
* Image and Media are embedded by default, generic file types are replaced with an icon (Font Awesome).
* Twitter Preview
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
-->
<!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 name="generator" content="Dropshare http://getdropsha.re" />
<meta property="twitter:card" content="photo" />
<meta property="twitter:image" content="__PREVIEWURL__" />
<meta property="twitter:title" content="__FILENAME__" />
<title>__FILENAME__</title>
<link
href="https://fonts.googleapis.com/css?family=Karla:400,700"
rel="stylesheet"
type="text/css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
/>
<script type="text/javascript">
window.onload = function () {
var targetDiv = document.getElementById("icon");
var fileType = "__FILETYPE__";
// These Media Types will not be replaced by the generic icon
var mediaTypes = [
"public.png",
"public.jpeg",
"com.apple.quicktime-movie",
"public.mpeg-4",
];
var found = mediaTypes.indexOf(fileType);
if (found == -1) {
targetDiv.className += "fa fa-file";
}
};
</script>
<style type="text/css">
body {
background: #fff;
font-family: Karla;
text-align: center;
}
div.container {
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
div.inner {
}
.fa {
font-size: 100px;
}
a {
text-decoration: none;
color: #000;
}
div.container div.download {
margin: 25px;
}
div.container div.download a.btn {
margin-bottom: 5px;
font-size: 12pt;
border: 1px solid #000;
padding: 10px;
text-transform: uppercase;
font-weight: bold;
white-space: nowrap;
}
div.container div.download a.btn:hover {
background: #000;
color: #fff;
}
/* preview types */
img {
max-width: 100%;
max-height: 80vh;
}
video,
iframe {
height: auto;
max-height: 80vh;
width: 100%;
}
iframe {
height: 80vh;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
<div id="icon">__PREVIEW__</div>
<h1><a class="file-title" href="__PATH__">__FILENAME__</a></h1>
<div class="download">
<a href="__PATH__" class="btn">Download ( __FILESIZE__ )</a><br />
</div>
</div>
</div>
</body>
</html>