Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Caleb's Dropshare Template
<!--
Dropshare Landing Page
By Caleb Grove @ Grove Design
https://grovedesign.co
-->
<!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__ | Grove Design Files</title>
<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', 'com.compuserve.gif', 'public.svg-image', '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'>
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
background: #FFF;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.fa {
font-size: 8em;
}
h1 {
font-size: 1.5em;
padding: 0 0.5em;
margin: 1em 0;
}
a {
text-decoration: none;
color: #000;
}
.download__button {
border: 1px solid #000;
border-left-width: 3px;
border-right-width: 3px;
display: inline-block;
padding: 0.7em;
text-transform: uppercase;
font-weight: 700;
}
.download__button:hover {
background: #000;
color: #FFF;
}
img {
height: auto;
max-width: 100%;
max-height: 70vh;
max-height: calc(75vh - 5em);
}
video,
iframe {
height: auto;
max-height: 70vh;
max-height: calc(75vh - 5em);
max-width: 100%;
width: auto;
}
iframe {
height: 70vh;
}
@media screen and (min-width: 700px) {
h1 {
font-size: 2em;
}
}
</style>
</head>
<body>
<div class='container'>
<div id='icon'>__PREVIEW__</div>
<h1 class='file-title'>__FILENAME__</h1>
<div class='download'>
<a class="download__button" href='__PATH__' download>Download (&nbsp;__FILESIZE__&nbsp;)</a>
<?php echo 'test' ?>
<br />
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment