diff options
| -rw-r--r-- | pages/home.html | 25 | ||||
| -rw-r--r-- | public/css/style.css | 23 | ||||
| -rw-r--r-- | public/js/upload.js | 2 |
3 files changed, 22 insertions, 28 deletions
diff --git a/pages/home.html b/pages/home.html index 50ad9d3..1ec947b 100644 --- a/pages/home.html +++ b/pages/home.html @@ -15,9 +15,10 @@ <p id="b"> <img class='logo' src="/images/logo.png"> </p> - <h1 id="bulma" class="title">loli-safe</h1> - <h2 id="modern-framework" class="subtitle">A <strong>modern</strong> self-hosted file upload service</h2> + <h1 class="title">loli-safe</h1> + <h2 class="subtitle">A <strong>modern</strong> self-hosted file upload service</h2> + <h3 class="subtitle" id="maxFileSize"></h2> <div class="columns"> <div class="column is-hidden-mobile"></div> <div class="column" id='uploadContainer'> @@ -31,23 +32,9 @@ <div class="column is-hidden-mobile"></div> </div> - <div class="columns"> - <div class="column is-hidden-mobile"></div> - <div class="column"><a id='panel' href="/panel" target="_blank" class="is-danger">Dashboard</a></div> - <div class="column is-hidden-mobile"></div> - </div> - - <div class="columns"> - <div class="column is-hidden-mobile"></div> - <div class="column"> - <p> - <a href="https://github.com/kanadeko/loli-safe" target="_blank" class="is-danger">View on Github</a> - | - <a href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj/related" target="_blank" class="is-danger">Chrome extension</a> - </p> - </div> - <div class="column is-hidden-mobile"></div> - </div> + <h3 id="links"> + <a href="https://github.com/kanadeko/loli-safe" target="_blank" class="is-danger">View on Github</a><span>|</span><a href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj/related" target="_blank" class="is-danger">Chrome extension</a><span>|</span><a href="/panel" target="_blank" class="is-danger">Dashboard</a> + </h3> <div id="uploads"> <div id="template" class="columns"> diff --git a/public/css/style.css b/public/css/style.css index 9130e29..188dd86 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -2,7 +2,7 @@ HOME ------------------ */ -#b { +section#home #b { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-duration: 1.5s; @@ -23,7 +23,7 @@ box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2); } -div#dropzone { +section#home div#dropzone { border: 1px solid #dbdbdb; background-color: rgba(0, 0, 0, 0); border-color: #ff3860; @@ -44,18 +44,25 @@ div#dropzone { cursor: pointer; } -div#dropzone:hover { +section#home div#dropzone:hover { background-color: #ff3860; border-color: #ff3860; color: #fff; } -div#uploads, p#tokenContainer, a#panel { display: none; } +section#home div#uploads, section#home p#tokenContainer, section#home a#panel { display: none; } -img.logo { height: 200px; margin-top: 20px; } -.dz-preview .dz-details { display: flex; } -.dz-preview .dz-details .dz-size, .dz-preview .dz-details .dz-filename { flex: 1 } -.dz-preview img, .dz-preview .dz-success-mark, .dz-preview .dz-error-mark { display: none } +section#home img.logo { height: 200px; margin-top: 20px; } +section#home .dz-preview .dz-details { display: flex; } +section#home .dz-preview .dz-details .dz-size, section#home .dz-preview .dz-details .dz-filename { flex: 1 } +section#home .dz-preview img, section#home .dz-preview .dz-success-mark, section#home .dz-preview .dz-error-mark { display: none } +section#home h3#links span { + padding-left: 5px; + padding-right: 5px; +} +section#home h3#maxFileSize { + font-size: 14px; +} @keyframes floatUp { 0% { diff --git a/public/js/upload.js b/public/js/upload.js index 8f36fa5..3672077 100644 --- a/public/js/upload.js +++ b/public/js/upload.js @@ -64,9 +64,9 @@ upload.prepareUpload = function(){ div.innerHTML = 'Click here or drag and drop files'; div.style.display = 'flex'; + document.getElementById('maxFileSize').innerHTML = 'Maximum upload size per file is ' + upload.maxFileSize; document.getElementById('tokenContainer').style.display = 'none'; document.getElementById('uploadContainer').appendChild(div); - document.getElementById('panel').style.display = 'block'; upload.prepareDropzone(); |