calebgrove/CustomLandingPage.html

## README.md

      
    Raw
  

              README.md
            
          
    My landing page design for Dropshare.
Examples:

http://files.grovedesign.co/example-photograph/
http://files.grovedesign.co/example-archive/

To use, go to the Dropshare preferences and navigate to the "Landing Page" tab. Click on "Edit custom design" and paste the contents of the below file in the code field.

  
## CustomLandingPage.html
<!--

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>
	<!--

	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 ( __FILESIZE__ )</a>
	<?php echo 'test' ?>
	<br />
	</div>
	</div>
	</body>

	</html>