Features page

customize.dist/pages/features.js

@@ -12,7 +12,53 @@ define([
         donateURL: AppConfig.donateURL || "https://opencollective.com/cryptpad/",
         upgradeURL: AppConfig.upgradeURL || 'https://accounts.cryptpad.fr/#/?on=' + origin,
     };
+
+    Msg.features_title = "Features"; // XXX existing key
+
     return function () {
+        // XXX ALL are existing keys
+        // Non-registered column
+        Msg.features_anon = "Non-registered";
+        Msg.features_f_apps = "Access to all the applications";
+        // Msg.features_f_apps_note = "";
+        Msg.features_f_core = "Common features";
+        // Msg.features_f_core_note = "";
+        Msg.features_f_file0 = "Open documents";
+        Msg.features_f_file0_note = "View and download documents shared by other users";
+        // Msg.features_f_cryptdrive0 = "";
+        // Msg.features_f_cryptdrive0_note = "";
+        // Msg.features_f_storage0 = "";
+        Msg.features_f_storage0_note = "Documents are deleted after 3 months of inactivity";
+        // Registered column
+        Msg.features_registered = "Registered" //
+        // Msg.features_f_anon = "";
+        Msg.features_f_anon_note = "With additional functionality";
+        Msg.features_f_social = "Social Features";
+        Msg.features_f_social_note = "Add contacts for secure collaboration, create a profile, fine-grained access controls";
+        // Msg.features_f_file1 = "";
+        // XXX hard coding file limit in keys?
+        Msg.features_f_file1_note = "Store files in your CryptDrive: images, PDFs, videos, and more. Share them with your contacts or embed them in your documents. (up to 25MB)";
+        // Msg.features_f_cryptdrive1 = "";
+        // Msg.features_f_cryptdrive1_note = "";
+        // Msg.features_f_devices = "";
+        // Msg.features_f_devices_note = "";
+        // XXX hard coding storage limit in keys?
+        Msg.features_f_storage1 = "Permanent Storage (1GB)";
+        Msg.features_f_storage1_note = "Documents stored in your CryptDrive are never deleted for inactivity";
+        // Premium column
+        Msg.features_premium = "Premium";
+        Msg.features_pricing = "{0} to {2}€ per month";
+        // Msg.features_f_reg = ""
+        Msg.features_f_reg_note = "With additional benefits";
+        // Msg.features_f_storage2 = ""
+        Msg.features_f_storage2_note = "From 5GB to 50GB depending on the plan. Increased limit of 150MB for file uploads.";
+        // Msg.features_f_support = ""
+        Msg.features_f_support_note = "Priority response from the administration team via email and built in ticket system.";
+        Msg.features_f_supporter = "Support privacy";
+        Msg.features_f_supporter_note = "Help CryptPad financially sustainable and show that privacy-enhancing software willingly funded by users should be the norm";
+        Msg.features_f_subscribe = "Subscribe";
+        Msg.features_f_subscribe_note = "Registered account needed to subscribe";
+
         Msg.features_f_apps_note = AppConfig.availablePadTypes.map(function (app) {
             if (AppConfig.registeredOnlyTypes.indexOf(app) !== -1) { return; }
             return Msg.type[app];
@@ -34,7 +80,7 @@ define([
         var anonymousFeatures =
             h('div.col-12.col-sm-4.cp-anon-user',[
                 h('div.card',[
-                    h('div.card-body',[
+                    h('div.title-card',[
                         h('h3.text-center',Msg.features_anon)
                     ]),
                     h('div.card-body.cp-pricing',[
@@ -42,7 +88,7 @@ define([
                         h('div.text-center', Msg.features_noData),
                     ]),
                     h('ul.list-group.list-group-flush',
-                        ['apps', 'core', 'file0', 'cryptdrive0', 'storage0'].map(function (f) {
+                        ['apps', 'file0', 'core', 'cryptdrive0', 'storage0'].map(function (f) {
                             return h('li.list-group-item', [
                                 h('div.cp-check'),
                                 h('div.cp-content', [
@@ -54,10 +100,11 @@ define([
                     ),
                 ]),
             ]);
+
         var registeredFeatures =
             h('div.col-12.col-sm-4.cp-regis-user',[
                 h('div.card',[
-                    h('div.card-body',[
+                    h('div.title-card',[
                         h('h3.text-center',Msg.features_registered)
                     ]),
                     h('div.card-body.cp-pricing',[
@@ -81,14 +128,14 @@ define([
                                 href: '/register/'
                             }, h('button.cp-features-register-button', Msg.features_f_register))
                         ]),
-                        h('div.cp-note', Msg.features_f_register_note)
+                        // XXX remove Msg.features_f_register_note
                     ]),
                 ]),
             ]);
         var premiumFeatures =
             h('div.col-12.col-sm-4.cp-anon-user',[
                 h('div.card',[
-                    h('div.card-body',[
+                    h('div.title-card',[
                         h('h3.text-center',Msg.features_premium)
                     ]),
                     h('div.card-body.cp-pricing',[
@@ -100,6 +147,8 @@ define([
                     ]),
                     h('ul.list-group.list-group-flush', [
                         ['reg', 'storage2', 'support', 'supporter'].map(function (f) {
+                            console.log('features_f_' + f);
+                            console.log('features_f_' + f + '_note');
                             return h('li.list-group-item', [
                                 h('div.cp-check'),
                                 h('div.cp-content', [
@@ -124,12 +173,10 @@ define([
 
         return h('div#cp-main', [
             Pages.infopageTopbar(),
-            h('div.container-fluid.cp_cont_features',[
+            h('div.container.cp-container',[
-                h('div.container',[
+                h('div.row.cp-page-title',[
-                    h('center', h('h1', Msg.features_title)),
+                    h('div.col-12.text-center', h('h1', Msg.features_title)),
-                ]),
                 ]),
-            h('div.container', [
                 h('div.row.cp-container.cp-features-web.justify-content-sm-center', availableFeatures),
             ]),
             Pages.infopageFooter()

customize.dist/src/less2/include/infopages.less

@@ -10,6 +10,9 @@
         transform: scale(1.05);
     }
 }
+.cp-shadow() {
+    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.34);
+}
 
 .infopages_main () {
     --LessLoader_require: LessLoader_currentFile();
@@ -70,7 +73,7 @@ body {
             margin: 50px 0px;
         }
         img.cp-shadow {
-            box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.34);
+            .cp-shadow();
         }
 
         button {

customize.dist/src/less2/pages/page-features.less

@@ -4,21 +4,6 @@
 &.cp-page-features {
     .infopages_main();
 
-    #cp-main {
-        background-color: #fff;
-    }
-    .cp_cont_features {
-        padding-top: 3em;
-        padding-bottom: 3em;
-        background-image: url('/customize/images/cover-features.jpg');
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center;
-        h1 {
-            font-weight: 700;
-            color: #fff;
-        }
-    }
     .cp-features-register {
         text-align: center;
         padding: 20px;
@@ -26,31 +11,33 @@
     .cp-features-register-button {
         font-size: 20px;
         color: #fff;
-        background: @cryptpad_color_blue;
+        background: @colortheme_logo-2;
-        border: 2px solid @cryptpad_color_blue;
         border-radius: 0;
         &:hover {
-            transform: scale(1.05);
             cursor: pointer;
         }
-        padding: 0.5em 1em;
     }
     .cp-features-web {
         .card {
-            box-shadow: 0 5px 15px rgba(69, 145, 196, 0.3);
+            .cp-shadow();
             border: none;
-            .card-body {
+            .title-card {
+                background-color: @colortheme_logo-2;
+                padding: 20px;
+            }
+            .card-body, .title-card {
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 flex-flow: column;
+                padding: 12px;
                 h3 {
                     margin: 0;
                 }
                 &.cp-pricing {
                     div {
                         font-size: 1.2em;
-                        color: @cryptpad_color_blue;
+                        color: @colortheme_logo-2;
                         &:first-child {
                             font-weight: bold;
                         }
@@ -80,7 +67,7 @@
                         content: "\f00c";
                         font-family: "FontAwesome";
                         font-size: 14px;
-                        color: @cryptpad_color_blue;
+                        color: @colortheme_logo-2;
                     }
                 }
                 &.cp-content {
@@ -96,35 +83,22 @@
         div.cp-note {
             font-size: 0.8em;
         }
-        a.voted {
-            opacity: 0.6;
-            margin-left: 15px;
-            &:hover {
-                opacity: 1;
-            }
-        }
         .list-group-item {
-            border-color: rgba(69, 145, 196, 0.125);
+            border-bottom: 1px solid rgba(0,0,0,0.125);
-        }
+            &:first-child {
+                border-top:  1px solid rgba(0,0,0,0.125);
             }
-    .cp-anon-user {
+            &:last-child {
-        .card-body {
+                border-bottom-right-radius: 0px;
-            &:first-of-type {
+                border-bottom-left-radius: 0px;
-                background-color: @cryptpad_color_blue;
             }
         }
     }
+
     .cp-regis-user {
         @media (max-width:575px) {
             margin-top: 3em;
         }
-        .card-body {
-            &:first-of-type {
-                background: #4591C4;
-                background: -webkit-linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false
-                background: linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false
-            }
-        }
     }
 }