diff --git a/customize.dist/images/AGPLv3_Logo.svg b/customize.dist/images/AGPLv3_Logo.svg new file mode 100644 index 000000000..75e5c4c6c --- /dev/null +++ b/customize.dist/images/AGPLv3_Logo.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/customize.dist/images/shredder.png b/customize.dist/images/shredder.png new file mode 100644 index 000000000..1b0717591 Binary files /dev/null and b/customize.dist/images/shredder.png differ diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js index 59de7893e..a69ffab6d 100644 --- a/customize.dist/pages/index.js +++ b/customize.dist/pages/index.js @@ -70,7 +70,7 @@ define([ }); UI.addTooltips(); - /* + /* // XXX remove this commented code? var more = icons.length < 4? undefined: h('div.bs-callout.cp-callout-more', [ h('div.cp-callout-more-lessmsg.cp-hidden', [ "see less ", @@ -109,38 +109,52 @@ define([ Feedback.send('HOME_SUPPORT_CRYPTPAD'); }); - var blocks = h('div.container',[ - h('div.row.justify-content-sm-center',[ - h('div.col-12.col-sm-4.cp-index-block.cp-index-block-host', h('div', [ - Pages.setHTML(h('span'), Msg.home_host), - h('div.cp-img-container', [ - h('img.agpl', { - src: "/customize/images/AGPL.png", - title: Msg.home_host_agpl - }), - h('a.img', { - href: 'https://blog.cryptpad.fr/2018/11/13/CryptPad-receives-NGI-Startup-Award/', - target: '_blank' - }, h('img.ngi', { - src: "/customize/images/ngi.png", - title: Msg.home_ngi - })) - ]) - ])), - h('div.col-12.col-sm-4.cp-index-block.cp-index-block-product', h('div', [ - Msg.home_product - ])), - AppConfig.disableCrowdfundingMessages ? undefined : h('div.col-12.col-sm-4.cp-index-block.cp-index-block-help', h('div', [ - Msg.crowdfunding_home1, - h('br'), - Msg.crowdfunding_home2, - h('br'), - crowdFunding, - _link - ])), + Msg.home_privacy_title = "Private by design"; // XXX + Msg.home_privacy_text = "CryptPad is built to enable collaboration while keeping data private. All information including documents, chats, and files is encrypted and decrypted by your browser. This means nothing is readable outside of the session where you are logged in. Even the service administrators do not have access to your information."; // XXX + Msg.home_host_title = "About this instance"; // XXX + // XXX adjust Msg.home_host, remove link to Github + Msg.home_opensource_title = "Open Source"; // XXX + Msg.home_opensource = 'Anyone can host CryptPad and offer the service in a personal or professional capacity. The source code is available on Github.'; // XXX + Msg.home_support_title = "Support CryptPad"; // XXX + Msg.home_support = "

CryptPad does not profit from user's data. This is part of a vision for online services that respect privacy. Instead of pretending to be \"free\" like the big platforms, CryptPad aims to build a sustainable model: funded willingly by users instead of making profits from personal information.

You can support the project by making a one-time or recurring donation through our Open Collective. Our budget is transparent and updates are published regularly. There are also a number of non-financial ways to contribute.

" // XXX + + var blocks = [ + h('div.row.cp-index-section', [ + h('div.col-sm-6', + h('img.img-fluid', { + src:'/customize/images/shredder.png', + alt:'illustration, a shredder destroys a sheet of paper and antoher one reconstructs it' + }) + ), + h('div.col-sm-6', [ + h('h2', Msg.home_privacy_title), + h('p', Msg.home_privacy_text) + ]) + ]), + h('div.row.cp-index-section', + h('div.col-sm-12', [ + h('h2', Msg.home_host_title), + Pages.setHTML(h('p'), Msg.home_host) // XXX remove link and .setHTML from this key + ]) + ), + h('div.row.cp-index-section', [ + h('div.col-sm-6', [ + h('h2', Msg.home_opensource_title), + Pages.setHTML(h('p'), Msg.home_opensource), + h('img.small-logo', { + src: '/customize/images/AGPLv3_Logo.svg', + alt: 'APGL3 License Logo' + }) + ]), + h('div.col-sm-6', [ + h('h2', Msg.home_support_title), + Pages.setHTML(h('span'), Msg.home_support), + crowdFunding + ]) ]) - ]); - Msg.main_catch_phrase = "Collaboration suite,
encrypted and open-source"; // XXX + ] + + Msg.main_catch_phrase = "Collaboration suite,
encrypted and open-source"; // XXX existing key return [ h('div#cp-main', [ Pages.infopageTopbar(), @@ -153,10 +167,12 @@ define([ ]), h('div.col-md-5.cp-app-grid', [ icons, + // XXX remove this commented code? //more ]) ]), blocks, + // XXX remove this commented code? /*h('div.row', [ h('div.cp-crowdfunding', [ crowdFunding diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index e085d2b5a..0bb0f16d5 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/customize.dist/src/less2/include/infopages.less @@ -21,6 +21,7 @@ body { // Basic setup for info pages, this should be used at the global level background-color: @colortheme_info-background; + color: @cryptpad_text_col; a { color: @colortheme_logo-2; &:visited { color: darken(@colortheme_logo-2, 5%); } diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index a641d3d1f..f2ef38288 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -4,13 +4,7 @@ &.cp-page-index { .infopages_main(); - @background_lighter: rgba(0,0,0,0.1); - @background_darker: rgba(0,0,0,0.4); #cp-main { - color: #FFF; - background: @colortheme_info-background; - background-size: cover; - background-position: center; min-height: 100vh; display: flex; flex-direction: column; @@ -200,44 +194,26 @@ } } } - - .cp-index-block-help { - button { - outline: none; - background-color: @colortheme_logo-2; - color: @colortheme_base; - border: none; - padding: 10px 20px; - border-radius: 44px; - cursor: pointer; - &:hover { - background-color: lighten(@colortheme_logo-2, 3%); - } - } - } - - .cp-index-block { - min-height: 100%; - & > div { - background: rgba(0,0,0,0.5); - margin: 0 5px; - padding: 15px 10px; - height: 100%; - display: flex; - flex-flow: column; - justify-content: space-evenly; - } - .cp-img-container { - display: flex; - } - img, a.img { - margin: auto; - background: white; - &.agpl { - max-height: 50px; - } - &.ngi { - max-height: 100px; + // XX not applied + #cp-main { + .cp-container { + .row.cp-index-section { + margin: 50px 0px; + .small-logo { + max-width: 40%; + } + button { + outline: none; + background-color: @colortheme_logo-2; + color: @colortheme_base; + border: none; + padding: 10px 20px; + border-radius: 0px; + cursor: pointer; + &:hover { + background-color: lighten(@colortheme_logo-2, 3%); + } + } } } }