Skip to content

Instantly share code, notes, and snippets.

@drudge

drudge/dropshare template.html

Created January 3, 2018 22:08
Show Gist options
  • Save drudge/bb40464f818bb644b60db98f4e25c3dd to your computer and use it in GitHub Desktop.
Save drudge/bb40464f818bb644b60db98f4e25c3dd to your computer and use it in GitHub Desktop.
Download ZIP
dropshare template
Raw
dropshare template.html
<!--
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment