diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/bg.png | bin | 0 -> 19452 bytes | |||
| -rw-r--r-- | static/favicon.ico | bin | 0 -> 4119 bytes | |||
| -rw-r--r-- | static/grill/10.png | bin | 0 -> 32305 bytes | |||
| -rw-r--r-- | static/grill/2.png | bin | 0 -> 74594 bytes | |||
| -rw-r--r-- | static/grill/3.png | bin | 0 -> 60684 bytes | |||
| -rw-r--r-- | static/grill/4.png | bin | 0 -> 13529 bytes | |||
| -rw-r--r-- | static/grill/5.png | bin | 0 -> 22713 bytes | |||
| -rw-r--r-- | static/grill/6.png | bin | 0 -> 29307 bytes | |||
| -rw-r--r-- | static/grill/7.png | bin | 0 -> 29732 bytes | |||
| -rw-r--r-- | static/grill/8.png | bin | 0 -> 50050 bytes | |||
| -rw-r--r-- | static/grill/9.png | bin | 0 -> 32272 bytes | |||
| -rw-r--r-- | static/grill/bg.png | bin | 0 -> 19452 bytes | |||
| -rw-r--r-- | static/pomf.css | 417 | ||||
| -rw-r--r-- | static/pomf.js | 176 |
14 files changed, 593 insertions, 0 deletions
diff --git a/static/bg.png b/static/bg.png Binary files differnew file mode 100644 index 0000000..2f4febc --- /dev/null +++ b/static/bg.png diff --git a/static/favicon.ico b/static/favicon.ico Binary files differnew file mode 100644 index 0000000..b115e11 --- /dev/null +++ b/static/favicon.ico diff --git a/static/grill/10.png b/static/grill/10.png Binary files differnew file mode 100644 index 0000000..226f062 --- /dev/null +++ b/static/grill/10.png diff --git a/static/grill/2.png b/static/grill/2.png Binary files differnew file mode 100644 index 0000000..acb0a0b --- /dev/null +++ b/static/grill/2.png diff --git a/static/grill/3.png b/static/grill/3.png Binary files differnew file mode 100644 index 0000000..ca9eca5 --- /dev/null +++ b/static/grill/3.png diff --git a/static/grill/4.png b/static/grill/4.png Binary files differnew file mode 100644 index 0000000..177db67 --- /dev/null +++ b/static/grill/4.png diff --git a/static/grill/5.png b/static/grill/5.png Binary files differnew file mode 100644 index 0000000..b8dc3fe --- /dev/null +++ b/static/grill/5.png diff --git a/static/grill/6.png b/static/grill/6.png Binary files differnew file mode 100644 index 0000000..080335a --- /dev/null +++ b/static/grill/6.png diff --git a/static/grill/7.png b/static/grill/7.png Binary files differnew file mode 100644 index 0000000..60f7586 --- /dev/null +++ b/static/grill/7.png diff --git a/static/grill/8.png b/static/grill/8.png Binary files differnew file mode 100644 index 0000000..cd2415e --- /dev/null +++ b/static/grill/8.png diff --git a/static/grill/9.png b/static/grill/9.png Binary files differnew file mode 100644 index 0000000..68b2018 --- /dev/null +++ b/static/grill/9.png diff --git a/static/grill/bg.png b/static/grill/bg.png Binary files differnew file mode 100644 index 0000000..2f4febc --- /dev/null +++ b/static/grill/bg.png diff --git a/static/pomf.css b/static/pomf.css new file mode 100644 index 0000000..7e1816a --- /dev/null +++ b/static/pomf.css @@ -0,0 +1,417 @@ +/** + * Copyright (c) 2011, 2012, 2013 Twitter, Inc. + * Copyright (c) 2013, 2014 Peter Lejeck <peter.lejeck@gmail.com> + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +/** + * USE BORDER BOX + */ +*, +*:before, +*:after { + box-sizing: border-box; +} + +/** + * PAGE LAYOUT + */ +body { + background-attachment: fixed, fixed; + background-color: #F7F7F7; + background-image: url('/grill.php'), url('/static/bg.png'); + background-position: 85% 100%, top left; + background-repeat: no-repeat, repeat; + color: #333; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + height: 100%; + line-height: 20px; + margin: 0; + padding-top: 20px; + padding-bottom: 40px; +} +.container { + margin: 0 auto; + max-width: 700px; +} + +/** + * ELEMENTS + */ +/* paragraphs */ +p { + margin: 0 0 10px; +} +/* images */ +input[type=image], img { + vertical-align: middle; +} +/* links */ +a { + color: #0078B4; + text-decoration: none; + transition: color 0.25s; +} +a:hover, +a:focus, +a:active { + color: #005580; +} +a:focus { + outline: thin dotted #333; +} + +/** + * JUMBOTRON + */ +.jumbotron { + margin: 60px 0; + text-align: center; + transition: width 0.5s, height 0.5s, margin 0.5s, padding 0.5s; +} +.jumbotron h1 { + color: inherit; + font-family: inherit; + font-size: 72px; + font-weight: bold; + line-height: 1; + margin: 10px 0; + cursor: default; + text-rendering: optimizelegibility; +} +.jumbotron .lead { + font-size: 21px; + font-weight: 200; + line-height: 30px; + margin-bottom: 20px; + transition: font-size 0.5s; +} +.jumbotron .btn { + background: rgba(202, 230, 190, 0.75); + border: 1px solid #B7D1A0; + border-radius: 4px; + color: #468847; + cursor: pointer; + display: inline-block; + font-size: 24px; + padding: 28px 48px; + text-shadow: 0 1px rgba(255, 255, 255, 0.5); + transition: background-color 0.25s, width 0.5s, height 0.5s; +} +.jumbotron .btn:hover, +.jumbotron .btn:active, +.jumbotron .btn:focus, +.jumbotron .btn.drop { + background-color: rgb(188, 228, 170); + text-decoration: none; +} +#no-file-api { + display: none; +} + +/** + * BOXES + */ +.alert { + background-color: #FCF8E3; + border: 1px solid #FBEED5; + border-radius: 4px; + margin-bottom: 20px; + padding: 8px 14px; + text-shadow: 0px 1px rgba(255, 255, 255, 0.5); + transition: width 0.5s, margin 0.5s, padding 0.5s, background-color 0.5s; +} +.alert-error { + background-color: #F2DEDE; + border-color: #EED3D7; + color: #AA4342; +} +.alert-info { + background-color: #D9EDF7; + border-color: #BCE8F1; + color: #167196; +} + +/** + * DONATION BUTTONS + */ +span.donate-btns { + display: block; + text-align: center; + margin: 11px 0 3px; +} +a.donate-btn { + height: 26px; + display: inline-block; + margin: 2px 5px; + background: hsl(0, 0%, 95%); + line-height: 16px; + padding: 3px 8px 3px 24px; + border-radius: 3px; + color: hsl(0, 0%, 25%); + border: 1px solid hsl(0, 0%, 85%); + transition: all .2s; +} +a.donate-btn:hover { + color: #000; + border: 1px solid hsl(0, 0%, 70%); + background-color: hsl(0, 0%, 80%); +} +.icon { + display: block; + height: 16px; + width: 16px; + float: left; + margin-left: -20px; + margin-top: 1px; +} +.icon-paypal { + background-image: url('img/paypal.png'); +} +.icon-bitcoin { + background-image: url('img/bitcoin.png'); +} +.icon-flattr { + background-image: url('img/flattr.png'); +} + +/** + * NAVIGATION LINKS + */ +nav > ul, +nav a { + color: #33799B; + list-style: none; + margin: 0; + padding: 0; + text-align: center; +} +nav > ul > li { + display: inline-block; + margin: 0; + padding: 0; + cursor: default; +} +nav > ul > li:after { + content: "|"; + margin: 0 8px; + opacity: 0.3; +} +nav > ul > li:last-child:after { + content: ""; + margin: 0; +} + +/** + * UPLOAD FORM + */ +#upload-input { + display: none; +} + +/** + * UPLOAD FILE LIST + */ +#upload-filelist { + list-style-type: none; + margin: 20px 50px; + padding: 0; + text-align: left; +} +.error#upload-filelist { + color: #891A18; +} +.error#upload-filelist .progress-percent { + color: #B94A48; +} +.error#upload-filelist .file-progress { + display: none; +} +#upload-filelist > li { + margin-top: 5px; + overflow: hidden; +} +#upload-filelist > li.total { + border-top: 1px solid rgba(0, 0, 0, 0.05); + font-weight: bold; + padding-top: 5px; +} +.file-name { + float: left; + overflow: hidden; + max-width: 70%; + text-overflow: ellipsis; + white-space: nowrap; +} +.file-progress, +.file-url { + display: inline-block; + float: right; + font-size: 0.9em; + margin-left: 8px; + vertical-align: middle; +} +.file-url a { + color: #5C5C5C; +} +.file-url a:hover { + color: #1C1C1C; +} +.progress-percent { + float: right; +} + +progress[value] { + /* Reset the default appearance */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + border: none; + +} + +progress[value]::-webkit-progress-bar { + background-color: #eee; + border-radius: 2ps; + box-shadow: 0 2px 5px rgba(0,0,0,0.25) inset; +} + +/* completed rows */ +.completed .file-progress, +.completed .progress-percent { + display: none; +} +.completed .file-url { + display: block; +} + +/** + * PROGRESS BARS + */ +.progress-outer { + background-color: rgba(255, 255, 255, 0.8); + border: 1px solid white; + border-radius: 4px; + box-shadow: 0 0 0 1px black; + color: transparent; + display: inline-block; + font-size: 0; + float: right; + height: 8px; + margin: 6px 6px 0; + overflow: hidden; + vertical-align: middle; + width: 50px; +} +.progress-inner { + background-color: black; + height: 6px; + margin: 0; + width: 0; +} + +/** + * MEDIA QUERIES + */ +@media only screen and (max-device-width: 320px), only screen and (max-width: 400px) { + body { + padding: 10px 0 0 0; + } + .jumbotron { + margin: 20px 0 30px; + } + .jumbotron .lead { + font-size: 18px; + } + .jumbotron .btn, .alert, #upload-filelist { + border-radius: 0; + border-width: 1px 0; + width: 100%; + margin-left: 0; + margin-right: 0; + padding-left: 20px; + padding-right: 20px; + } + #upload-filelist { + background-color: rgba(255, 255, 255, 0.75); + overflow: hidden; + } + #upload-filelist > li.file { + margin-top: 12px; + margin-bottom: 12px; + } + .file-progress { + width: 70%; + } + .file-name, .file-url { + width: 100%; + max-width: 100%; + } + .file-url a { + text-decoration: underline; + margin-left: 15px; + } + .file-url a:before { + content: "http://"; + } + .alert { + font-size: 13px; + } + .alert-error { + background-color: rgba(248, 223, 223, 0.75); + } + nav { + background-color: rgba(255, 255, 255, 0.75); + border: #FFFFFF; + padding: 10px 0; + } +} + + +/* +The following code is released into public domain. +It is provided "as is", without warranties or conditions of any kind. +Anyone is free to modify, redistribute and do anything with this code. +*/ +/** + * NO-JS/JS UPLOAD FORMS + */ + +#upload-input { + display: inline-block; +} + +#upload-form .btn { + display: none; +} + +.form-js #upload-input { + display: none; +} + +.form-js #upload-btn { + display: inline-block !important; +} + +.form-js input[type=submit] { + display: none; +} diff --git a/static/pomf.js b/static/pomf.js new file mode 100644 index 0000000..dfa047a --- /dev/null +++ b/static/pomf.js @@ -0,0 +1,176 @@ +document.addEventListener('DOMContentLoaded', function() { + /** + * Copyright (c) 2016 Luminarys <postmaster@gensok.io> + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + + function addRow(file) { + var row = document.createElement('li'); + + var name = document.createElement('span'); + name.textContent = file.name; + name.className = 'file-name'; + + var progressIndicator = document.createElement('span'); + progressIndicator.className = 'progress-percent'; + progressIndicator.textContent = '0%'; + + var progressBar = document.createElement('progress'); + progressBar.className = 'file-progress'; + progressBar.setAttribute("max", "100"); + progressBar.setAttribute("value", "0"); + + row.appendChild(name); + row.appendChild(progressBar); + row.appendChild(progressIndicator); + + document.getElementById('upload-filelist').appendChild(row); + return row; + } + + function handleUploadProgress(evt) { + var xhr = evt.target; + var bar = xhr.bar; + var percentIndicator = xhr.percent; + + if (evt.lengthComputable) { + var progressPercent = Math.floor((evt.loaded / evt.total) * 100); + bar.setAttribute("value", progressPercent); + percentIndicator.textContent = progressPercent + '%'; + } + } + + function handleUploadComplete(evt) { + var xhr = evt.target; + var bar = xhr.bar; + var row = xhr.row; + var percentIndicator = xhr.percent; + + percentIndicator.style.visibility = "hidden"; + bar.style.visibility = "hidden"; + row.removeChild(bar); + row.removeChild(percentIndicator); + var respStatus = xhr.status; + + var url = document.createElement('span'); + url.className = 'file-url'; + row.appendChild(url); + + var link = document.createElement('a'); + if (respStatus === 200) { + var response = JSON.parse(xhr.responseText); + if (response.success) { + link.textContent = response.files[0].url.replace(/.*?:\/\//g, ""); + link.href = response.files[0].url; + url.appendChild(link); + } else { + bar.innerHTML = 'Error: ' + response.reason; + } + } else if (respStatus === 413) { + link.textContent = 'File Too big!'; + url.appendChild(link); + } else { + link.textContent = 'Server error!'; + url.appendChild(link); + } + } + + function uploadFile(file, row) { + var bar = row.querySelector('.file-progress'); + var percentIndicator = row.querySelector('.progress-percent'); + var xhr = new XMLHttpRequest(); + xhr.open('POST', '/upload.php?output=json'); + + xhr["row"] = row; + xhr["bar"] = bar; + xhr["percent"] = percentIndicator; + xhr.upload["bar"] = bar; + xhr.upload["percent"] = percentIndicator; + + xhr.addEventListener('load', handleUploadComplete, false); + xhr.upload.onprogress = handleUploadProgress; + + var form = new FormData(); + form.append('files[]', file); + xhr.send(form); + } + + function stopDefaultEvent(evt) { + evt.stopPropagation(); + evt.preventDefault(); + } + + function handleDrag(state, element, evt) { + stopDefaultEvent(evt); + if (state.dragCount == 1) { + element.textContent = "Drop it here~"; + } + state.dragCount += 1; + } + + function handleDragAway(state, element, evt) { + stopDefaultEvent(evt); + state.dragCount -= 1; + if (state.dragCount == 0) { + element.textContent = "Select or drop file(s)"; + } + } + + function handleDragDrop(state, element, evt) { + stopDefaultEvent(evt); + handleDragAway(state, element, evt); + var len = evt.dataTransfer.files.length; + for (var i = 0; i < len; i++) { + var file = evt.dataTransfer.files[i]; + var row = addRow(file); + uploadFile(file, row); + } + } + + function uploadFiles(evt) { + var len = evt.target.files.length; + for (var i = 0; i < len; i++) { + var file = evt.target.files[i]; + var row = addRow(file); + uploadFile(file, row); + } + } + + function selectFiles(target, evt) { + stopDefaultEvent(evt); + target.click(); + } + + var state = { dragCount: 0 }; + var uploadButton = document.getElementById('upload-btn'); + window.addEventListener('dragenter', handleDrag.bind(this, state, uploadButton), false); + window.addEventListener('dragleave', handleDragAway.bind(this, state, uploadButton), false); + window.addEventListener('drop', handleDragAway.bind(this, state, uploadButton), false); + window.addEventListener('dragover', stopDefaultEvent, false); + + var uploadInput = document.getElementById('upload-input'); + uploadInput.addEventListener('change', uploadFiles); + uploadButton.addEventListener('click', selectFiles.bind(this, uploadInput)); + uploadButton.addEventListener('drop', handleDragDrop.bind(this, state, uploadButton), false); + + + // no-js form override + document.getElementById('upload-form').className += ' form-js' +}); |
