My landing page design for Dropshare.
Examples:
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.
Last active
February 17, 2018 03:53
-
-
Save calebgrove/b7dbf541d5b5ea444c967ced1371d122 to your computer and use it in GitHub Desktop.
Caleb's Dropshare Template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment