diff --git a/.idea/vcs.xml b/.idea/vcs.xml deleted file mode 100644 index 38e1abb11..000000000 --- a/.idea/vcs.xml +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/img/globalping/check.svg b/src/assets/img/globalping/check.svg new file mode 100644 index 000000000..b0266a611 --- /dev/null +++ b/src/assets/img/globalping/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/globalping/credits/polygons_1.svg b/src/assets/img/globalping/credits/polygons_1.svg new file mode 100644 index 000000000..88bfdebfc --- /dev/null +++ b/src/assets/img/globalping/credits/polygons_1.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/img/globalping/credits/polygons_2.svg b/src/assets/img/globalping/credits/polygons_2.svg new file mode 100644 index 000000000..08fee8426 --- /dev/null +++ b/src/assets/img/globalping/credits/polygons_2.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/img/globalping/globalping-grid-type-4.svg b/src/assets/img/globalping/globalping-grid-type-4.svg new file mode 100644 index 000000000..3bf717e4a --- /dev/null +++ b/src/assets/img/globalping/globalping-grid-type-4.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/globalping/header-grid.svg b/src/assets/img/globalping/header-grid.svg new file mode 100644 index 000000000..9c6e30f0d --- /dev/null +++ b/src/assets/img/globalping/header-grid.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/js/app-globalping.js b/src/assets/js/app-globalping.js index ebf3c946f..07e507e53 100644 --- a/src/assets/js/app-globalping.js +++ b/src/assets/js/app-globalping.js @@ -9,6 +9,7 @@ const cGlobalpingSlack = require('../../views/pages/globalping/slack.html'); const cGlobalpingNetworkTools = require('../../views/pages/globalping/network-tools.html'); const cGlobalpingIntegrations = require('../../views/pages/globalping/integrations.html'); const cGlobalpingAbout = require('../../views/pages/globalping/about-us.html'); +const cGlobalpingCredits = require('../../views/pages/globalping/credits.html'); const { getGlobalpingUser } = require('./utils/http'); Ractive.DEBUG = location.hostname === 'localhost'; @@ -33,6 +34,7 @@ app.router.addRoute('/slack', cGlobalpingSlack); app.router.addRoute('/network-tools/:params?', cGlobalpingNetworkTools); app.router.addRoute('/integrations', cGlobalpingIntegrations); app.router.addRoute('/about-us', cGlobalpingAbout); +app.router.addRoute('/credits', cGlobalpingCredits); app.router.replaceQueryParam = function (name, newValue) { history.replaceState(history.state, null, location.href.replace(new RegExp(`${name}=[^&]+|$`), `${name}=${encodeURIComponent(newValue)}`)); diff --git a/src/assets/less/app-globalping.less b/src/assets/less/app-globalping.less index a96ce650d..dcbd0aa1c 100644 --- a/src/assets/less/app-globalping.less +++ b/src/assets/less/app-globalping.less @@ -17,6 +17,7 @@ @import "components/gp-credits-message.less"; @import "components/gp-credits.less"; @import "components/controlled-textarea.less"; +@import "components/range-slider.less"; @import "pages/globalping.less"; @import "pages/globalping/cli.less"; @@ -24,3 +25,4 @@ @import "pages/globalping/network-tools.less"; @import "pages/globalping/integrations.less"; @import "pages/globalping/about-us.less"; +@import "pages/globalping/credits.less"; diff --git a/src/assets/less/common-globalping.less b/src/assets/less/common-globalping.less index 3aee51c2b..fdb7678b1 100644 --- a/src/assets/less/common-globalping.less +++ b/src/assets/less/common-globalping.less @@ -16,6 +16,7 @@ outline: none; cursor: pointer; white-space: nowrap; + text-decoration: none !important; &:hover, &:focus { color: #fff; diff --git a/src/assets/less/components/gp-jumbotron.less b/src/assets/less/components/gp-jumbotron.less index 0d91d2af4..9efbc7ae4 100644 --- a/src/assets/less/components/gp-jumbotron.less +++ b/src/assets/less/components/gp-jumbotron.less @@ -262,4 +262,29 @@ } } } + + &.credits { + padding: 0; + height: 100%; + top: 0; + left: 0; + z-index: -1; + + .jumbotron { + &_grid { + position: absolute; + top: -14px; + left: 65px; + + @media (min-width: @screen-sm-min) { + top: -32px; + left: 65px; + } + } + + &_blur { + display: none; + } + } + } } diff --git a/src/assets/less/components/header.less b/src/assets/less/components/header.less index 9d593aee2..50b0f5497 100644 --- a/src/assets/less/components/header.less +++ b/src/assets/less/components/header.less @@ -21,7 +21,7 @@ } } - &.header-with-globalping-bg { + &.header-with-globalping-bg, &.header-with-gp-translucent-bg { --link-highlight-color: @gp-green; .navbar { @@ -46,6 +46,18 @@ } } + &.header-with-gp-translucent-bg { + .navbar { + @media (max-width: (@screen-sm-min - 1)) { + position: relative; + background-image: url("../../img/globalping/header-grid.svg"); + background-blend-mode: overlay; + background-size: cover; + background-position: 0 0; + } + } + } + &.header-with-dark-bg { .navbar { background-color: #323334; diff --git a/src/assets/less/components/range-slider.less b/src/assets/less/components/range-slider.less new file mode 100644 index 000000000..8935afe3b --- /dev/null +++ b/src/assets/less/components/range-slider.less @@ -0,0 +1,103 @@ +.c-range-slider { + font-family: Lexend, sans-serif; + font-style: normal; + font-weight: 400; + -webkit-font-smoothing: antialiased; + display: flex; + flex-flow: column; + row-gap: 16px; + + .range { + &-slider { + position: relative; + display: flex; + align-items: center; + width: 100%; + height: 16px; + cursor: pointer; + + &_line { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + height: 4px; + + &_part { + flex-grow: 1; + height: 100%; + background-color: #e7e7ee; + transition: background-color .3s ease; + + &:nth-child(1) { + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + } + + &:nth-last-child(1) { + border-top-right-radius: 8px; + border-bottom-right-radius: 8px; + } + } + + &_gap { + width: 2px; + background: transparent; + } + } + + &_knob { + position: absolute; + width: 16px; + height: 16px; + background: #17d4a7; + cursor: pointer; + transition: left .1s linear; + border: 2px solid #fff; + border-radius: 50%; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2); + transform: translate(-50%, 0); + } + } + + &-slider-labels { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + height: 20px; + + &_label { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + font-size: 14px; + font-weight: 400; + line-height: 20px; + color: #17233a; + + &.m-first-label { + justify-content: flex-start; + } + + &.m-middle-label { + justify-content: center; + } + + &.m-last-label { + justify-content: flex-end; + } + } + } + + &-slider-header { + height: 24px; + text-align: center; + font-size: 16px; + font-weight: 600; + line-height: 24px; + color: #17233a; + } + } +} diff --git a/src/assets/less/pages/globalping/credits.less b/src/assets/less/pages/globalping/credits.less new file mode 100644 index 000000000..dad7da31b --- /dev/null +++ b/src/assets/less/pages/globalping/credits.less @@ -0,0 +1,302 @@ +.p-globalping-credits { + font-family: Lexend, sans-serif; + font-style: normal; + font-weight: 400; + -webkit-font-smoothing: antialiased; + display: flex; + flex-direction: column; + align-items: center; + + .gp-credits { + display: flex; + flex-direction: column; + align-items: center; + row-gap: 48px; + padding: 48px 24px 8px; + + @media (min-width: @screen-sm-min) { + padding: 100px 24px 88px; + row-gap: 80px; + } + + &_info { + display: flex; + flex-direction: column; + width: 100%; + + @media (min-width: @screen-sm-min) { + max-width: 808px; + } + + &_title { + font-size: 40px; + font-weight: 600; + line-height: 60px; + text-align: left; + color: #17233a; + margin: 0; + } + + &_descr { + margin-top: 24px; + font-size: 16px; + font-weight: 400; + line-height: 32px; + color: #17233a; + + br { + display: none; + + @media (width: 360px) { + display: inline-block; + } + } + } + + &_user-benefits { + display: flex; + flex-direction: column; + row-gap: 8px; + margin-top: 48px; + + @media (min-width: @screen-sm-min) { + flex-direction: row; + column-gap: 8px; + } + + &_block { + display: flex; + flex-direction: column; + row-gap: 16px; + padding: 24px 8px; + border: 1px solid #e7e7ee; + border-radius: 8px; + height: 186px; + background: #fff; + box-sizing: border-box; + + @media (min-width: @screen-sm-min) { + flex-grow: 1; + flex-basis: 0; + } + + &.registered { + background: #e8fff9; + + .gp-credits_info_user-benefits_block_title { + color: #17d4a7; + } + } + + &_title { + font-size: 24px; + font-weight: 600; + line-height: 36px; + text-align: left; + padding-left: 24px; + color: #17233a; + } + + &_list { + display: flex; + flex-direction: column; + + &_item { + display: flex; + align-items: center; + column-gap: 8px; + height: 28px; + padding-left: 24px; + + &_numbers, &_text { + font-size: 14px; + line-height: 20px; + color: #17233a; + } + + &_numbers { + font-weight: 600; + } + } + } + + &_hint { + display: flex; + align-items: center; + column-gap: 10px; + padding-left: 24px; + + > span { + font-size: 12px; + font-weight: 400; + line-height: 12px; + text-align: left; + } + } + } + } + + &_credits-donations { + height: 100px; + margin-top: 48px; + } + } + + &_become-a-sponsor { + position: relative; + display: flex; + flex-direction: column; + row-gap: 40px; + + @media (min-width: @screen-sm-min) { + flex-flow: row wrap; + column-gap: 48px; + overflow: visible; + } + + &_polygons { + display: none; + position: absolute; + z-index: -1; + + @media (min-width: @screen-sm-min) { + display: block; + } + + &.left { + top: 418px; + left: -72px; + } + + &.right { + top: -75px; + right: 20px; + } + } + + &_block { + display: flex; + flex-direction: column; + row-gap: 16px; + + @media (min-width: @screen-sm-min) { + max-width: 380px; + flex-grow: 1; + flex-basis: 0; + } + + &.right { + @media (min-width: @screen-sm-min) { + padding-top: 240px; + } + } + + &_title { + font-size: 32px; + font-weight: 600; + line-height: 50px; + letter-spacing: .2px; + text-align: left; + color: #17233a; + margin: 0; + } + + &_subtitle { + font-size: 18px; + font-weight: 600; + line-height: 32px; + text-align: left; + color: #17233a; + margin: 0; + } + + &_content { + font-size: 16px; + font-weight: 400; + line-height: 32px; + text-align: left; + color: #17233a; + } + + &_btn { + height: 36px; + width: 192px; + font-size: 14px; + font-weight: 400; + line-height: 20px; + text-align: left; + // color: #f3f5f6; // TODO: this color used in the design, but why? everywhere else is #fff used + color: #fff; + } + } + } + + &_faq { + display: flex; + flex-direction: column; + + @media (min-width: @screen-sm-min) { + max-width: 808px; + width: 100%; + } + + &_title { + font-size: 40px; + font-weight: 600; + line-height: 60px; + text-align: left; + color: #17233a; + margin: 0; + } + + &_descr { + margin-top: 24px; + font-size: 16px; + font-weight: 400; + line-height: 32px; + color: #17233a; + } + + &_list { + margin-top: 48px; + display: flex; + flex-direction: column; + row-gap: 16px; + + &_item { + display: flex; + flex-direction: column; + border: 1px solid #e7e7ee; + border-radius: 8px; + + &_question { + padding: 16px 24px; + background: #f3f5f6; + border-bottom: 1px solid #e7e7ee; + font-size: 16px; + font-weight: 600; + line-height: 24px; + color: #17233a; + } + + &_answer { + padding: 24px; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: #17233a; + + > a { + color: #17d4a7; + font-weight: 600; + } + } + } + } + } + } +} + +.gp-credits_tooltip { + border-radius: 8px; +} diff --git a/src/views/components/gp-header.html b/src/views/components/gp-header.html index 3438f7ed5..b81130ac4 100644 --- a/src/views/components/gp-header.html +++ b/src/views/components/gp-header.html @@ -27,7 +27,7 @@ -
+
Join the network To join the Globalping probe network all you have to do is run our container. diff --git a/src/views/pages/globalping/credits.html b/src/views/pages/globalping/credits.html new file mode 100644 index 000000000..464421486 --- /dev/null +++ b/src/views/pages/globalping/credits.html @@ -0,0 +1,216 @@ + + + + + + + + + + + + +
+ + +
+
+

Globalping limits and credits

+ +
+ Start using Globalping for free - no registration needed! +
+ +
+
+ Unregistered User + +
+ + + + + {{this.userBenefits.unregistered.probesPerMeas}} + + + Probes per measurement + + + + + + + {{this.userBenefits.unregistered.freeTestsPerHour}} + + + Free tests per hour + +
+
+ +
+ Registered User + +
+ + + {{this.userBenefits.registered.probesPerMeas}} + Probes per measurement + + + + + {{this.userBenefits.registered.freeTestsPerHour}} + Free tests per hour + +
+ + + Higher limits for members! + + +
+
+ +
+ +
+
+ +
+ + + + +
+

Become a sponsor

+ +

+200 tests per $1 donated

+ +
+ We aim to offer a reliable service to everyone, + from home users and solo developers to startups, corporations, and large enterprises. + We're doing our best to keep things fair. Everyone gets a number of free requests every hour, + while larger users may pay for additional requests, and help support the active development of the project. +
+ + + Become a GitHub sponsor + +
+ +
+

Host a probe

+ +

+150 tests/probe/day

+ +
+ Generate free credits passively! + Become a member of the community by hosting a probe and adopting it under your account. + For each day your probe stays online, you will get additional free credits. +
+ + + Host a probe + +
+
+ +
+

Frequently Asked Questions

+ + +
+ {{#each faq}} +
+ {{this.question}} + {{{this.answer}}} +
+ {{/each}} +
+
+
+
+ + + + +