Shor

https:// - +

diff --git a/client/main.css b/client/main.css deleted file mode 100644 index 8f84f71..0000000 --- a/client/main.css +++ /dev/null @@ -1,99 +0,0 @@ -html * { - font-family: Roboto, sans-serif; - font-size: 18px; -} - -.active { - justify-content: center; - max-width: 100vw; - margin-top: 20%; - padding: 0 50px 0 50px; -} - -.title { - padding-left: 30px; - margin-bottom: 10px; - line-height: 1.42857143; - color: #E0E0E0; -} - -.input-group { - position: relative; - display: table; - border-collapse: separate; - border-color: #E0E0E0; - transition: border-color 1s; -} - -.input-field { - position: relative; - z-index: 2; - margin-bottom: 0; - text-indent: 0; - color: #727272; - background-color: #fff; - background-image: none; - box-sizing: border-box; - border: none; - outline: none; - height: 100%; - width: 100%; -} - -.input-field-text { - margin-left: 30px; - box-sizing: border-box; - color: #E0E0E0; -} - -.input-container { - z-index: 2; - width: 100%; - float: left; - display: flex; - align-items: center; - position: relative; - padding: 0; - border-radius: 100px 0 0 100px; - border: 2px solid; - border-color: inherit; - margin: 0; - box-sizing: border-box; - height: 10vh; -} - -.btn-container { - display: table-cell; - position: relative; - font-size: 0; - white-space: nowrap; - width: 1%; - height: 0; - vertical-align: middle; - border-color: inherit; -} - -.btn { - z-index: 2; - margin-left: -1px; - display: inline-block; - margin-bottom: 0; - font-weight: 400; - text-align: center; - white-space: nowrap; - vertical-align: middle; - -ms-touch-action: manipulation; - touch-action: manipulation; - cursor: pointer; - background-image: none; - padding: 4px 5vw; - height: 10vh; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border-radius: 0 100px 100px 0; - border: 2px solid; - border-color: inherit; - border-left: none; -} \ No newline at end of file diff --git a/client/main.js b/client/main.js deleted file mode 100644 index 652776a..0000000 --- a/client/main.js +++ /dev/null @@ -1,13 +0,0 @@ -function onFormSubmit() { - return false; -} - -function inputUpdate() { - const pattern = /^(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?&/; - const userInput = document.getElementById('url').value; - if (pattern.test(userInput)) { - document.getElementById('form-group').style.borderColor = '#E0E0E0'; - } else { - document.getElementById('form-group').style.borderColor = '#FFBCBC'; - } -} \ No newline at end of file diff --git a/client/static/main.css b/client/static/main.css new file mode 100644 index 0000000..1726881 --- /dev/null +++ b/client/static/main.css @@ -0,0 +1,100 @@ +html * { + font-family: Roboto, sans-serif; + font-size: 18px; +} + +.active { + justify-content: center; + max-width: 100vw; + margin-top: 20%; + padding: 0 50px 0 50px; +} + +.title { + padding-left: 30px; + margin-bottom: 10px; + line-height: 1.42857143; + color: #E0E0E0; +} + +.input-group { + position: relative; + display: table; + border-collapse: separate; + border-color: #E0E0E0; + transition: border-color 1s; +} + +.input-field { + position: relative; + z-index: 2; + margin-bottom: 0; + text-indent: 0; + color: #727272; + background-color: #fff; + background-image: none; + box-sizing: border-box; + border: none; + outline: none; + height: 100%; + width: 100%; +} + +.input-field-text { + margin-left: 30px; + box-sizing: border-box; + color: #E0E0E0; +} + +.input-container { + z-index: 2; + width: 100%; + float: left; + display: flex; + align-items: center; + position: relative; + padding: 0; + border-radius: 100px 0 0 100px; + border: 2px solid; + border-color: inherit; + margin: 0; + box-sizing: border-box; + height: 10vh; +} + +.btn-container { + display: table-cell; + position: relative; + font-size: 0; + white-space: nowrap; + width: 1%; + height: 0; + vertical-align: middle; + border-color: inherit; +} + +.btn { + z-index: 2; + margin-left: -1px; + display: inline-block; + margin-bottom: 0; + font-weight: 400; + text-align: center; + white-space: nowrap; + vertical-align: middle; + -ms-touch-action: manipulation; + touch-action: manipulation; + cursor: pointer; + background-image: none; + background-color: #fff; + padding: 4px 5vw; + height: 10vh; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border-radius: 0 100px 100px 0; + border: 2px solid; + border-color: inherit; + border-left: none; +} \ No newline at end of file diff --git a/client/static/main.js b/client/static/main.js new file mode 100644 index 0000000..aa823c0 --- /dev/null +++ b/client/static/main.js @@ -0,0 +1,30 @@ +$(document).ready(function() { + $('#form').on('submit', onFormSubmit); + $('#url').on({'input': inputUpdate, 'paste': pasteTrim}); +}); + +function onFormSubmit() { + const urlField = document.getElementById('url'); + const data = JSON.stringify({'url': 'https://' + urlField.value}); + $.ajax('/', {method: 'POST', data: data, contentType: 'application/json'}).then(function (r) { + urlField.value = 'sho.rest/' + r.hash; + }) + return false; +} + +function inputUpdate() { + const userInput = document.getElementById('url').value; + if (!validate({website: 'https://' + userInput}, {website: {url: true}})) { + $('#form-group').css('border-color', '#E0E0E0'); + } else { + $('#form-group').css('border-color', '#FFBCBC'); + } +} + +function pasteTrim() { + const pattern = /^https?:\/\//; + setTimeout(() => { + const element = $('#url'); + element.value = element.value.replace(pattern, ''); + }, 0); +} \ No newline at end of file -- cgit 1.4.1