diff --git a/app/assets/images/chexpire10.png b/app/assets/images/chexpire10.png new file mode 100644 index 0000000..534d6d0 Binary files /dev/null and b/app/assets/images/chexpire10.png differ diff --git a/app/assets/images/dashboard.png b/app/assets/images/dashboard.png new file mode 100644 index 0000000..122d798 Binary files /dev/null and b/app/assets/images/dashboard.png differ diff --git a/app/assets/images/form_example.png b/app/assets/images/form_example.png new file mode 100644 index 0000000..4a94697 Binary files /dev/null and b/app/assets/images/form_example.png differ diff --git a/app/frontend/scss/_variables.scss b/app/frontend/scss/_variables.scss index e948707..3b55aa8 100644 --- a/app/frontend/scss/_variables.scss +++ b/app/frontend/scss/_variables.scss @@ -1,13 +1,15 @@ // Copyright (C) 2018 Colin Darie , 2018 Evolix // License: GNU AGPL-3+ (see full text in LICENSE file) -$input-placeholder-color: #adb5bd; +$input-placeholder-color: #013d3a; $enable-rounded: false; $theme-colors: ( - "primary": #259EDB, - "secondary": #565554, - "success": #42935C, + "primary": #118b83, //light-green + "secondary": #013d3a, //dark-green + "tertiary": #be0c04, //red + "quaternary": #d6b20e, // yellow + "success": #118b83, //light-green "warning": #F6AE2D, - "danger": #E94F37, + "danger": #be0c04, //red "info": #2E86AB, ); diff --git a/app/frontend/scss/components/checks.scss b/app/frontend/scss/components/checks.scss index 83f2ea3..dba6083 100644 --- a/app/frontend/scss/components/checks.scss +++ b/app/frontend/scss/components/checks.scss @@ -6,3 +6,41 @@ color: black; } } + +.btn.btn-sm { + font-weight: bold; +} + +.SSL, .ssl:hover, .btn.btn-sm.btn-info.active.ssl { + background-color: map-get($theme-colors, quaternary); + color: #ffffff; +} + +.btn.btn-sm.btn-outline-info.domain:hover, .btn.btn-sm.btn-outline-info.ssl:hover, .btn.btn-sm.btn-outline-info.with_error:hover { + color: #ffffff; +} + +.btn.btn-sm.btn-info.ssl, .btn.btn-sm.btn-outline-info.ssl { + border-color: map-get($theme-colors, quaternary); + color: map-get($theme-colors, quaternary); +} + +.Domaine, .Domain, .domain:hover, .btn.btn-sm.btn-info.active.domain { + background-color: map-get($theme-colors, primary); + color: #ffffff; +} + +.btn.btn-sm.btn-info.domain, .btn.btn-sm.btn-outline-info.domain { + border-color: map-get($theme-colors, primary); + color: map-get($theme-colors, primary); +} + +.btn.btn-sm.btn-outline-info.with_error { + border-color: map-get($theme-colors, tertiary); + color: map-get($theme-colors, tertiary); +} + +.btn.btn-sm.btn-outline-info.with_error:hover, .btn.btn-sm.btn-info.active.with_error { + background-color: map-get($theme-colors, tertiary); + border-color: map-get($theme-colors, tertiary); +} diff --git a/app/frontend/scss/layout.scss b/app/frontend/scss/layout.scss index cd2fb3a..7577645 100644 --- a/app/frontend/scss/layout.scss +++ b/app/frontend/scss/layout.scss @@ -5,14 +5,147 @@ @import '~bootstrap/scss/_variables'; @import '~bootstrap/scss/mixins/_breakpoints'; -.navbar { - margin-bottom: 30px; +/* +* === GENERAL === +*/ +body, +html { + color: map-get($theme-colors, secondary); +} - @include media-breakpoint-down(sm) { - margin-bottom: 20px; +h1, h2 { + text-align: center; +} + + +/* +* — Navbar — +*/ +.navbar { + margin-bottom: 50px; + background-color: map-get($theme-colors, quaternary); +} + +a.nav-link, +a.navbar-item.navbar-link { + color: map-get($theme-colors, tertiary); + font-weight: bold; + padding: 20px; + box-sizing: border-box; + + &:focus, + &:hover { + text-decoration: none; + color: #118b83; } } -.alert-layout { - margin-bottom: 30px; +.navbar-dark .navbar-nav .nav-link { + color: #ffffff; + + &:hover { + color: #118b83; + } +} + + +/* +* — Alert — +*/ +.alert-layout { + margin-bottom: 50px; + + &.alert { + color: #ffffff; + font-weight: bold; + + &.alert-success { + background-color: #118b83; + } + + &.alert-danger { + background-color: #be0c04; + } + } +} + + +/* +* — Forms — +*/ +.form-control:focus { + color: map-get($theme-colors, secondary); + background-color: #fff; + border-color: map-get($theme-colors, primary); +} + + + + +/* +* === UN-LOGGED HOME === +*/ + + +/* +* — Header — +*/ +.container-fluid.header { + margin: -50px 0 50px 0; + padding: 50px; + background-color: map-get($theme-colors, quaternary); + color: #ffffff; + font-weight: bold; + + .btn { + font-weight: bold; + } +} + +.dropdown-menu.show { + padding: 0; + margin: 0; + width: 100%; + + a:hover { + color: #ffffff; + background-color: #118b83; + } +} + + +/* +* — Description — +*/ +#description { + p { + font-weight: bold; + } + + .abstract, + .details { + padding-top: 50px; + padding-bottom: 50px; + } + + .abstract h2::after { + content: ''; + display: block; + width: 40px; + margin: 40px auto; + border-top: 2px solid #013D3A; + } + + .details { + padding: 40px; + box-sizing: border-box; + } + + .row { + height: 100%; + } + + .homepage-img { + border: 1px solid map-get($theme-colors, secondary); + } } diff --git a/app/views/checks/_filters.html.erb b/app/views/checks/_filters.html.erb index c03f6ec..39a537a 100644 --- a/app/views/checks/_filters.html.erb +++ b/app/views/checks/_filters.html.erb @@ -7,13 +7,13 @@ <% Check.kinds.keys.map(&:to_sym).each do |kind_name| %> <%= link_to t(".kind_#{kind_name}"), checks_path(check_button_criterias(kind: kind_name)), - class: check_button_scope_class(kind: kind_name) %> + class: check_button_scope_class(kind: kind_name) + " " + kind_name.to_s %> <% end %> <%= link_to t(".with_error"), checks_path(check_button_criterias(recurrent_failures: true)), - class: check_button_scope_class(recurrent_failures: true) %> + class: check_button_scope_class(recurrent_failures: true) + " with_error" %>
diff --git a/app/views/checks/_table.html.erb b/app/views/checks/_table.html.erb index f356d7c..71b8c0f 100644 --- a/app/views/checks/_table.html.erb +++ b/app/views/checks/_table.html.erb @@ -25,7 +25,7 @@ <% checks.each do |check| %> - <%= t(".kind_labels.#{check.kind}") %> + "><%= t(".kind_labels.#{check.kind}") %> <%= check_error(check) if check_in_error?(check) %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 2affb94..55775cf 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -13,6 +13,9 @@ <%= render "shared/navbar" %> + <% if params[:action] == 'home' %> + <%= render 'shared/home_header' %> + <%end%> <%= render "shared/notices" %> <%= yield %> diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb index 9c4a3dc..6cc7618 100644 --- a/app/views/pages/home.html.erb +++ b/app/views/pages/home.html.erb @@ -1,11 +1,40 @@ <% # Copyright (C) 2018 Colin Darie , 2018 Evolix %> <% # License: GNU AGPL-3+ (see full text in LICENSE file) %> -
-
-
-

<%= t(".welcome") %>

+
-

<%= t(".intro") %>

+
+ +
+
+

<%= t(".why") %>

+

<%= t(".description") %>

+
+ +
+
+
+

<%= t(".centralization") %>

+

<%= t(".centralization-details") %>

+
+
+
+ <%= image_tag 'dashboard.png', width: "100%", alt: 'Expirations list dashboard', class: "homepage-img" %> +
+
+ +
+
+
+

<%= t(".customised") %>

+

<%= t(".customised-details") %>

+
+
+
+ <%= image_tag 'form_example.png', width: "100%", alt: 'Expirations list dashboard', class: "homepage-img" %> +
+
+
-
+ + diff --git a/app/views/shared/_home_header.html.erb b/app/views/shared/_home_header.html.erb new file mode 100644 index 0000000..2866613 --- /dev/null +++ b/app/views/shared/_home_header.html.erb @@ -0,0 +1,14 @@ +
+
+
+
+

<%= t(".welcome") %>

+

<%= t(".intro") %>

+
+
+ <%= link_to "Learn More", root_path(@root, anchor: "description"), :class => "btn btn-primary" %> + <%= link_to "Sign Up", new_user_registration_path, :class => "btn btn-tertiary" %> +
+
+
+
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb index 688b500..00b87e5 100644 --- a/app/views/shared/_navbar.html.erb +++ b/app/views/shared/_navbar.html.erb @@ -1,43 +1,49 @@ <% # Copyright (C) 2018 Colin Darie , 2018 Evolix %> -<% # License: GNU AGPL-3+ (see full text in LICENSE file) %> - diff --git a/config/locales/en.yml b/config/locales/en.yml index 5d9c4c3..cfb2887 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -72,11 +72,20 @@ en: sign_in: "Sign in" sign_out: "Sign out" profile: "Profile" + home_header: + welcome: "Welcome on Chexpire" + intro: "With Chexpire, you'll never forget to renew a domain name or SSL certificate." + pages: + home: - welcome: "Welcome on Chexpire" - intro: "With Chexpire, you'll never forget to renew a domain name or SSL certificate Chexpire." + why: "The benefits of Chexpire" + description: "Chexpire is an Open Source Software that checks domain name and SSL Certificates expirations. You've got a lot of domain name with differents Domain Registrars? You want a centralization of all the expirations dates? You need customised notifications? Chexpire is for you!" + centralization: "Easy centralization of expiry dates" + centralization-details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Collige omnia, quae soletis: Praesidium amicorum. Duo Reges: constructio interrete. Bonum valitudo: miser morbus. Quae duo sunt, unum facit. Sic enim censent, oportunitatis esse beate vivere. Beatus sibi videtur esse moriens. Aliter homines, aliter philosophos loqui putas oportere?" + customised: "Custom notification" + customised-details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Collige omnia, quae soletis: Praesidium amicorum. Duo Reges: constructio interrete. Bonum valitudo: miser morbus. Quae duo sunt, unum facit. Sic enim censent, oportunitatis esse beate vivere. Beatus sibi videtur esse moriens. Aliter homines, aliter philosophos loqui putas oportere?" checks: index: diff --git a/config/locales/fr.yml b/config/locales/fr.yml index acc1046..92253ba 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -104,12 +104,20 @@ fr: sign_in: "Connexion" sign_out: "Déconnexion" profile: "Profil" - - pages: - home: + home_header: welcome: "Bienvenue sur Chexpire" intro: "Grâce à Chexpire, vous n'oublierez plus jamais de renouveler un nom de domaine ou un certificat SSL." + pages: + + home: + why: "Les avantages de Chexpire" + description: "Chexpire est un Logiciel Libre qui vérifie les expirations des noms de domaines et des certificats SSL. Vous avez beaucoup de noms de domaines avec des Registrars différents ? Vous souhaitez une centralisation des dates d'expirations ? Vous avez besoin de notifications sur mesure ? Chexpire est fait pour vous !" + centralization: "Centralisez simplement les dates d'expiration" + centralization-details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Collige omnia, quae soletis: Praesidium amicorum. Duo Reges: constructio interrete. Bonum valitudo: miser morbus. Quae duo sunt, unum facit. Sic enim censent, oportunitatis esse beate vivere. Beatus sibi videtur esse moriens. Aliter homines, aliter philosophos loqui putas oportere?" + customised: "Paramétrez vos notifications" + customised-details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Collige omnia, quae soletis: Praesidium amicorum. Duo Reges: constructio interrete. Bonum valitudo: miser morbus. Quae duo sunt, unum facit. Sic enim censent, oportunitatis esse beate vivere. Beatus sibi videtur esse moriens. Aliter homines, aliter philosophos loqui putas oportere?" + checks: index: title: "Liste de vos vérifications"