diff --git a/js/component/card/contribute.js b/js/component/card/contribute.js index 549a51f..9bbd7e1 100644 --- a/js/component/card/contribute.js +++ b/js/component/card/contribute.js @@ -363,7 +363,6 @@ beestat.component.card.contribute.prototype.decorate_top_right_ = function(paren pay_links[beestat.setting('units.currency')][window.environment] + '?prefilled_email=' + beestat.user.get().email_address + '&client_reference_id=' + beestat.user.get().user_id - ); })); diff --git a/js/component/card/contribute_banner.js b/js/component/card/contribute_banner.js new file mode 100644 index 0000000..39632e5 --- /dev/null +++ b/js/component/card/contribute_banner.js @@ -0,0 +1,50 @@ +/** + * Contribute banner for video announcement. + */ +beestat.component.card.contribute_banner = function() { + beestat.component.card.apply(this, arguments); +}; +beestat.extend(beestat.component.card.contribute_banner, beestat.component.card); + +beestat.component.card.contribute_banner.prototype.decorate_contents_ = function(parent) { + parent.style('background', beestat.style.color.purple.base); + + const container = document.createElement('div'); + Object.assign(container.style, { + 'display': 'flex', + 'align-items': 'center', + 'grid-gap': `${beestat.style.size.gutter}px` + }); + + const left = document.createElement('div'); + Object.assign(left.style, { + 'font-size': beestat.style.font_size.large + }); + left.innerText = 'Important message from the creator of beestat!'; + container.appendChild(left); + + parent.appendChild(container); + + const center = document.createElement('div'); + Object.assign(center.style, { + 'text-align': 'right', + 'flex-grow': 1, + 'flex-shrink': 0 + }); + + const tile_group = new beestat.component.tile_group(); + + const watch_tile = new beestat.component.tile() + .set_icon('play') + .set_text('Watch Now') + .set_background_color(beestat.style.color.red.dark) + .set_background_hover_color(beestat.style.color.red.light); + watch_tile.addEventListener('click', function() { + (new beestat.component.modal.contribute_video()).render(); + }); + tile_group.add_tile(watch_tile); + + tile_group.render($(center)); + + container.appendChild(center); +}; diff --git a/js/component/card/visualize_intro.js b/js/component/card/visualize_intro.js index 43e1d2b..8ddb2d6 100644 --- a/js/component/card/visualize_intro.js +++ b/js/component/card/visualize_intro.js @@ -18,52 +18,25 @@ beestat.extend(beestat.component.card.visualize_intro, beestat.component.card); beestat.component.card.visualize_intro.prototype.decorate_contents_ = function(parent) { const self = this; - if (beestat.user.has_early_access() === true) { - const p1 = document.createElement('p'); - p1.innerText = 'You now have early access to the new Visualize features. This is a work-in-progress, but you should find it to be mostly stable. More features and improvements are in the works.'; - parent.appendChild(p1); + const center_container = document.createElement('div'); + center_container.style.textAlign = 'center'; + parent.appendChild(center_container); - const p2 = document.createElement('p'); - p2.innerText = 'Please reach out on Discord or email contact@beestat.io with feedback. Thank you for your support!'; - parent.appendChild(p2); - - const center_container = document.createElement('div'); - center_container.style.textAlign = 'center'; - parent.appendChild(center_container); - - new beestat.component.tile() - .set_icon('plus') - .set_text('Create a floor plan') - .set_size('large') - .set_background_color(beestat.style.color.green.dark) - .set_background_hover_color(beestat.style.color.green.light) - .render($(center_container)) - .addEventListener('click', function() { - new beestat.component.modal.create_floor_plan( - self.thermostat_id_ - ).render(); - }); - } else { - parent.style('background', beestat.style.color.green.base); - - const p3 = document.createElement('p'); - p3.innerText = 'This feature is still in early access! If you\'d like to try it out, become a supporter now. Expected public release date is November.'; - parent.appendChild(p3); - - new beestat.component.tile() - .set_icon('heart') - .set_size('large') - .set_text([ - 'Support this project!', - 'Your contribution matters' - ]) - .set_background_color(beestat.style.color.green.dark) - .set_background_hover_color(beestat.style.color.green.light) - .addEventListener('click', function() { - new beestat.layer.contribute().render(); - }) - .render(parent); - } + new beestat.component.tile() + .set_icon('plus') + .set_text([ + 'Get started now!', + 'Create my first floor plan' + ]) + .set_size('large') + .set_background_color(beestat.style.color.green.dark) + .set_background_hover_color(beestat.style.color.green.light) + .render($(center_container)) + .addEventListener('click', function() { + new beestat.component.modal.create_floor_plan( + self.thermostat_id_ + ).render(); + }); }; /** diff --git a/js/component/header.js b/js/component/header.js index c6763b7..63c64f4 100644 --- a/js/component/header.js +++ b/js/component/header.js @@ -203,4 +203,8 @@ beestat.component.header.prototype.decorate_ = function(parent) { .add_call('user', 'log_out') .send(); })); + + const contribute_banner = new beestat.component.card.contribute_banner(); + contribute_banner.style({'margin-bottom': `${beestat.style.size.gutter}px`}); + contribute_banner.render(parent); }; diff --git a/js/component/modal/contribute_video.js b/js/component/modal/contribute_video.js new file mode 100644 index 0000000..b2e3db5 --- /dev/null +++ b/js/component/modal/contribute_video.js @@ -0,0 +1,106 @@ +/** + * Contribute video + */ +beestat.component.modal.contribute_video = function() { + beestat.component.modal.apply(this, arguments); +}; +beestat.extend(beestat.component.modal.contribute_video, beestat.component.modal); + +/** + * Decorate + * + * @param {rocket.Elements} parent + */ +beestat.component.modal.contribute_video.prototype.decorate_contents_ = function(parent) { + const container = document.createElement('div'); + /** + * The 16:9 aspect ratio corresponds to a height that is 56.25% of the width. + * https://www.ankursheel.com/blog/full-width-you-tube-video-embed + */ + Object.assign(container.style, { + 'position': 'relative', + 'padding-bottom': '56.25%', + 'height': '0' + }); + parent.appendChild(container); + + const iframe = document.createElement('iframe'); + Object.assign(iframe.style, { + 'position': 'absolute', + 'top': '0', + 'left': '0', + 'width': '100%', + 'height': '100%' + }); + iframe.setAttribute('src', 'https://player.vimeo.com/video/769222247?h=3e6436bc10'); + iframe.setAttribute('frameborder', '0'); + iframe.setAttribute('allow', 'autoplay; fullscreen; picture-in-picture'); + iframe.setAttribute('allowfullscreen', 'allowfullscreen'); + container.appendChild(iframe); +}; + +/** + * Get title. + * + * @return {string} The title. + */ +beestat.component.modal.contribute_video.prototype.get_title_ = function() { + return 'I need your help!'; +}; + +/** + * Get the buttons that go on the bottom of this modal. + * + * @return {[beestat.component.button]} The buttons. + */ +beestat.component.modal.contribute_video.prototype.get_buttons_ = function() { + const give_other = new beestat.component.tile() + .set_background_color('#fff') + .set_text_color(beestat.style.color.gray.base) + .set_text_hover_color(beestat.style.color.green.base) + .set_shadow(false) + .set_size('large') + .set_text('Other ways to give') + .addEventListener('click', function() { + (new beestat.layer.contribute()).render(); + }); + + const pay_links = { + 'usd': { + 'dev': 'https://donate.stripe.com/test_bIY2by6pS1ii99u8wG', + 'live': 'https://donate.stripe.com/7sIcPp4Gt6APais144' + }, + 'cad': { + 'dev': 'https://donate.stripe.com/test_bIY2by6pS1ii99u8wG', + 'live': 'https://donate.stripe.com/28obLl4Gte3hfCMdR4' + }, + 'aud': { + 'dev': 'https://donate.stripe.com/test_bIY2by6pS1ii99u8wG', + 'live': 'https://donate.stripe.com/dR66r12ylcZd3U4aER' + }, + 'gbp': { + 'dev': 'https://donate.stripe.com/test_bIY2by6pS1ii99u8wG', + 'live': 'https://donate.stripe.com/4gwbLl3Cpe3hais3cs' + } + }; + + const give_one_time = new beestat.component.tile() + .set_background_color(beestat.style.color.green.base) + .set_background_hover_color(beestat.style.color.green.light) + .set_text_color('#fff') + .set_icon('gift') + .set_size('large') + .set_text('Make a One-Time Contribution') + .addEventListener('click', function() { + window.open( + pay_links[beestat.setting('units.currency')][window.environment] + + '?prefilled_email=' + beestat.user.get().email_address + + '&client_reference_id=' + beestat.user.get().user_id + ); + }); + + return [ + give_other, + give_one_time + ]; +}; diff --git a/js/js.php b/js/js.php index bc75e73..4a9459e 100755 --- a/js/js.php +++ b/js/js.php @@ -93,6 +93,7 @@ if($setting->get('environment') === 'dev' || $setting->get('environment') === 'd echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL; + echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL; @@ -134,6 +135,7 @@ if($setting->get('environment') === 'dev' || $setting->get('environment') === 'd echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL; + echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL; diff --git a/js/layer/contribute.js b/js/layer/contribute.js index 5d6b7dd..a3d7330 100644 --- a/js/layer/contribute.js +++ b/js/layer/contribute.js @@ -17,7 +17,7 @@ beestat.layer.contribute.prototype.decorate_ = function(parent) { 'padding': '0 ' + beestat.style.size.gutter + 'px' }); - (new beestat.component.header()).render(parent); + (new beestat.component.header('contribute')).render(parent); // All the cards var cards = [];