diff --git a/web/www/css/site.css b/web/www/css/site.css new file mode 100644 index 0000000..3881801 --- /dev/null +++ b/web/www/css/site.css @@ -0,0 +1,338 @@ +@import url('https://fonts.googleapis.com/css?family=Ubuntu'); + +body { + margin: 0; + padding: 0; + font-family: 'Ubuntu', sans-serif; + background-color: #f4eddb; +} + +a { + color: #EB8C11; + text-decoration: none; +} + +.background-image { + background-image: url('/img/pc_bg.png'); + -ms-background-repeat: repeat-x; + background-repeat: repeat-x; + -ms-background-position: center bottom; + background-position: center bottom; + position: absolute; + width: 100%; + top: 0; + left: 0; + bottom: 0; + margin: 0; + padding: 0; + -webkit-user-select: text; + z-index: 0; +} + +/* Footer */ + +.footer { + background-image: url('/img/pc_footer.png'); + -ms-background-repeat: space; + background-repeat: space; + -ms-background-position: center bottom; + background-position: center bottom; + background-color: #aca496; + position: absolute; + width: 100%; + height: 69px; + left: 0; + bottom: 0; + margin: 0; + padding: 0; + -webkit-user-select: text; + z-index: 1; +} + +.twitter-link { + position: absolute; + right: 2em; + bottom: 0; + font-size: 3em; +} + +.twitter-link a { + color: rgb(62, 62, 41); +} + +.twitter-link a:hover { + color: rgb(33, 33, 26); + background: none; +} + +/* Header */ + +.title { + padding: 50px; +} + +.title h1 { + margin: 0; +} + +.title h2 { + max-width: 500px; + font-weight: normal; + font-size: 1em; +} + +.login-block { + color: #e18712; + font-size: 1em; +} + +.login-block a { + font-size: 1.2em; + font-weight: normal; +} + +/* Main block + input */ + +.shadow { + box-shadow: 0 12px 8px -6px #a79d87; + box-shadow: 0 12px 8px -6px rgba(167, 157, 135, 0.4); +} + +.main { + text-align: center; + padding: 5em 2em 10em; + max-width: 860px; + width: 90%; + margin: 0 auto; + padding: 3em 0; + text-align: left; +} + +.main-border { + border: thin solid #a39c8e; + background: #f4ecda; +} + +.input-border { + background-color: #e4dac8; + border: none; + border-bottom: 1px solid #a39c8e; +} + +.main-border input { + border: none; + padding: 0.5em 0 0.5em 0.5em; + width: calc(100% - 2em); + font-size: 2em; + line-height: 1; + color: #616161; + background: transparent; +} + +*:focus { + outline: none; +} + +/* Input button (arrow) */ + +.arrow-button { + float: right; + font-size: 2em; + padding-top: 0.5em; + padding-right: 0.3em; +} + +.arrow-button a { + color: rgb(142, 134, 119); +} + +.arrow-button a:hover { + background: none; + color: rgb(105, 98, 86); +} + +/* Controls under input */ + +.controls { + padding-left: 1em; + word-spacing: 0.15em; +} + +.controls a:hover { + cursor: pointer; +} + +/* Options */ +.selected-option, a:hover { + background: orange; + color: whitesmoke; + border: 1px orange; + -ms-border-radius: 3px; + border-radius: 3px; +} + +.locked { + -ms-opacity: 0.3; + opacity: 0.2; +} + +/* Man image */ +.man { + width: 210px; + height: 333px; + background-image: url('/img/man.png'); + -ms-background-repeat: no-repeat; + background-repeat: no-repeat; + -ms-background-position: center bottom; + background-position: center bottom; + background-color: transparent; + position: absolute; + bottom: 100px; + left: 30%; + margin: 0; + padding: 0; + z-index: -1; +} + +/* Patreon block */ + +.patreon { + background: rgb(171, 163, 149); + border: 1px rgb(240, 232, 214) solid; + bottom: 6em; + float: right; + position: absolute; + right: 2em; + z-index: -1; +} + +/* Placeholder */ +::-webkit-input-placeholder { color: rgb(171, 163, 149); } /* Chrome/Opera/Safari */ +::-moz-placeholder { color: rgb(171, 163, 149); } /* Firefox 19+ */ +:-ms-input-placeholder { color: rgb(171, 163, 149); } /* IE 10+ */ +:-moz-placeholder { color: rgb(171, 163, 149); } /* Firefox 18- */ + +/* Tooltips */ + +.tooltip { + display: none; + position: absolute; + background: rgb(171, 163, 149); + border: 1px rgb(244, 236, 218) solid; + padding: 10px; + color: #4a4030; + max-width: 350px; +} + +/* Modal popup */ + +.modal { + position: fixed; + top: 20%; + left: 50%; + width: 50%; + max-width: 700px; + -ms-transform: translate3d(-50%,-50%, 0); + -webkit-transform: translate3d(-50%,-50%, 0); + transform: translate3d(-50%,-50%, 0); + height: 80px; + background: #56524b; + text-align: center; + z-index: 10; + outline: 9999px solid rgba(0,0,0,0.8); + + padding: 10px; +} + +.modal > input { + width: 100%; + font-size: 3em; + border: none; + background: none; + border-bottom: 1px dotted black; +} + +.modal-links { + padding-top: 5px; +} + +.modal-links span { + padding-right: 15px; +} + +.modal-links a:hover { + color: #EB8C11; + background: rgb(68, 65, 60); +} + +@media screen and (max-width: 640px) { + .background-image { + background-image: url('/img/mobile_bg.png') + } + + .footer { + background-image: url('/img/mobile_footer.png'); + height: 50px; + } + + .title { + padding: 20px; + } + + .main { + padding: 0; + } + + .controls { + word-spacing: 0; + font-size: 1em; + } + + .patreon { + right: 2em; + } + + .man { + background-image: none; + } +} + +@media screen and (max-width: 1024px) { + .modal { + width: 90%; + } +} + +@media only screen and (max-device-width: 1024px) { + .modal > input { + font-size: 1.9em; + padding: 0; + padding-bottom: 15px; + } + + .modal-links span { + padding-right: 30px; + } +} + +@media screen and (max-height: 640px) { + .patreon { + width: 300px; + bottom: 4em; + } + + .man { + display: none; + } +} + +@media screen and (max-height: 840px) { + .title { + padding-top: 1em; + padding-bottom: 0; + } + + .main { + padding-top: 0; + } +} \ No newline at end of file diff --git a/web/www/favicon.ico b/web/www/favicon.ico new file mode 100644 index 0000000..6540f33 Binary files /dev/null and b/web/www/favicon.ico differ diff --git a/web/www/img/become_patreon.png b/web/www/img/become_patreon.png new file mode 100644 index 0000000..3a4dfe6 Binary files /dev/null and b/web/www/img/become_patreon.png differ diff --git a/web/www/img/man.png b/web/www/img/man.png new file mode 100644 index 0000000..d7a9039 Binary files /dev/null and b/web/www/img/man.png differ diff --git a/web/www/img/mobile_bg.png b/web/www/img/mobile_bg.png new file mode 100644 index 0000000..8289971 Binary files /dev/null and b/web/www/img/mobile_bg.png differ diff --git a/web/www/img/mobile_footer.png b/web/www/img/mobile_footer.png new file mode 100644 index 0000000..d66299e Binary files /dev/null and b/web/www/img/mobile_footer.png differ diff --git a/web/www/img/og_image.png b/web/www/img/og_image.png new file mode 100644 index 0000000..6141725 Binary files /dev/null and b/web/www/img/og_image.png differ diff --git a/web/www/img/patreon_logo.png b/web/www/img/patreon_logo.png new file mode 100644 index 0000000..dab29f2 Binary files /dev/null and b/web/www/img/patreon_logo.png differ diff --git a/web/www/img/pc_bg.png b/web/www/img/pc_bg.png new file mode 100644 index 0000000..02f9162 Binary files /dev/null and b/web/www/img/pc_bg.png differ diff --git a/web/www/img/pc_footer.png b/web/www/img/pc_footer.png new file mode 100644 index 0000000..bf2932b Binary files /dev/null and b/web/www/img/pc_footer.png differ diff --git a/web/www/js/site.js b/web/www/js/site.js new file mode 100644 index 0000000..bd8a3fe --- /dev/null +++ b/web/www/js/site.js @@ -0,0 +1,218 @@ +// Write your Javascript code. + +$(function () { + function err(msg) { + alert(msg); + } + + function createFeed(data, done) { + if (!data.url) { + return; + } + + $.ajax({ + dataType: 'text', + url: '/feed/create', + method: 'POST', + data: JSON.stringify(data), + contentType: 'application/json; charset=utf-8', + success: function (feedLink) { + // HACK: remove quotes + feedLink = JSON.parse(feedLink); + done(feedLink); + }, + error: function (xhr, status, error) { + if (xhr.status === 400) { + // Bad request + var text = ''; + + try { + var json = JSON.parse(xhr.responseText); + $.each(json, function (key, value) { + text += value + '\r\n'; + }); + } catch (e) { + text = xhr.responseText; + } + + err(text); + } else { + // Generic error + err('Server sad \'' + error + '\': ' + xhr.responseText); + } + } + }); + } + + function displayLink(link) { + showModal(link); + } + + /* + Tooltips + */ + + if (!isMobile()) { + $(document).on('mouseenter', 'i', function () { + var title = $(this).attr('title'); + if (!title) { + return; + } + + $(this).data('tipText', title).removeAttr('title'); + $('

').text(title).appendTo('body').fadeIn('fast'); + }); + + $(document).on('mouseleave', 'i', function () { + var text = $(this).data('tipText'); + $(this).attr('title', text); + $('.tooltip').remove(); + }); + + $(document).on('mousemove', 'i', function (e) { + var x = e.pageX + 10; + var y = e.pageY + 5; + $('.tooltip').css({ top: y, left: x }); + }); + } + + /* + Control panel + */ + + function isLocked() { + return $('#control-panel').hasClass('locked'); + } + + /* + Handlers + */ + + function formatSwith() { + if (isLocked()) { + return; + } + + $('#video-format, #audio-format').toggleClass('selected-option'); + } + + function qualitySwitch() { + if (isLocked()) { + return; + } + + $('#best-quality, #worst-quality').toggleClass('selected-option'); + } + + function getQuality() { + var isAudio = $('#audio-format').hasClass('selected-option'); + var isWorst = $('#worst-quality').hasClass('selected-option'); + + if (isAudio) { + return isWorst ? 'AudioLow' : 'AudioHigh'; + } else { + return isWorst ? 'VideoLow' : 'VideoHigh'; + } + } + + function pageSwitch(evt) { + if (isLocked()) { + return; + } + + $('#page-controls > a').removeClass('selected-option'); + $(evt.target).addClass('selected-option'); + + getPageCount(); + } + + function getPageCount() { + try { + var text = $('#page-controls > a.selected-option').text(); + return parseInt(text); + } catch (e) { + return 50; + } + } + + $('#page-controls > a').click(pageSwitch); + + /* Modal */ + + function closeModal() { + $('#modal').hide(); + $('#url-input').val(''); + $('.main').show(); + } + + function showModal(url) { + // Hide main block on screen + $('.main').hide(); + + // Set input URL + $('#output-input').val(url); + + // Update 'Open' button link + $('#modal-open').attr('href', url); + + // Show dialog itself + $('#modal').show(); + + // Select modal output text + $('#output-input').select(); + } + + function copyLink() { + $('#output-input').select(); + if (!document.execCommand('copy')) { + err('Can\'t copy... Something went wrong...'); + } + } + + function isMobile() { + return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); + } + + function canCopy() { + try { + return document.queryCommandSupported('copy') && !isMobile(); + } catch (e) { + return false; + } + } + + $('body').on('keydown', function (e) { + // ESC + if ($('#modal').is(':visible') && e.keyCode === 27) { + $('#close-modal').click(); + } + e.stopPropagation(); + }); + + /* + Attach handlers + */ + + $('#get-link').click(function(e) { + var url = $('#url-input').val(); + createFeed({ url: url, quality: getQuality(), pageSize: getPageCount() }, displayLink); + e.preventDefault(); + }); + + $('#url-input').keyup(function (e) { + // 'Enter' click + if (e.keyCode === 13) { + $('#get-link').click(); + } + }); + + $('#video-format, #audio-format').click(formatSwith); + $('#best-quality, #worst-quality').click(qualitySwitch); + + $('#close-modal').click(closeModal); + $('#modal-copy').click(copyLink); + + if (!canCopy()) { + $('#modal-copy').hide(); + } +}); \ No newline at end of file diff --git a/web/www/robots.txt b/web/www/robots.txt new file mode 100644 index 0000000..07c5cc4 --- /dev/null +++ b/web/www/robots.txt @@ -0,0 +1,4 @@ +User-agent: * +Allow: /$ +Disallow: / +Host: www.podsync.net \ No newline at end of file