diff --git a/services/web/app/views/layout.jade b/services/web/app/views/layout.jade index 837953a0ef..c0c5847faa 100644 --- a/services/web/app/views/layout.jade +++ b/services/web/app/views/layout.jade @@ -3,9 +3,6 @@ html(itemscope, itemtype='http://schema.org/Product') block vars head - - if (typeof(gaExperimentCode) !== "undefined" && gaExperimentCode) - #{gaExperimentCode} - - if (typeof(priority_title) !== "undefined" && priority_title) title= title + ' - Online LaTeX Editor ShareLaTeX' - else diff --git a/services/web/app/views/subscriptions/plans.jade b/services/web/app/views/subscriptions/plans.jade index 892796d776..02520c3485 100644 --- a/services/web/app/views/subscriptions/plans.jade +++ b/services/web/app/views/subscriptions/plans.jade @@ -1,166 +1,210 @@ extends ../layout -mixin liSection(feature) - | #{feature.text} - -if(feature.comingSoon) - span.label.label-info coming soon - -if(feature.beta) - span.label.label-warning beta - - -mixin plan(plan, cssClass, monthly) - .pricing-table - ul(class=cssClass) - - li.pricing-header-row-1 - .package-title - h2.no-bold #{plan.name} - - li.pricing-header-row-2 - .package-price - if plan.price == 0 - h1.free Free forever - else - h1.no-bold - | $#{plan.price/100} - if monthly - span.cents /month - else - span.cents /year - - - var odd = true - -each feature in plan.featureDescription - - odd = !odd - - if(odd) - li.pricing-content-row-odd - mixin liSection(feature) - - else - li.pricing-content-row-even - mixin liSection(feature) - - li.pricing-footer - - var href = '/user/subscription/new?planCode='+plan.planCode - - - planIsPersonal = plan.planCode.indexOf("personal") != -1 - - userNotLoggedIn = session && !session.user - -if(planIsPersonal) - - href = "/register" - -else if(userNotLoggedIn) - - href = "/register?redir="+href - a.btn.btn-success(href='#{href}', ga_PlanType=plan.planCode).sign_up_now - | Sign Up Now! - - block content - .container - .row - .span12.span-box - .page-header - h1 Choose your plan - blockquote.quote.pull-right - p - | This is one of the most useful resources I have ever found on the Internet. - br - | Fantastic execution and thoughtful attention to detail make this product shine! - small Benjamin Shepherd, Waterloo University + .content-alt + .content.plans(ng-controller="PlansController") + .container + .row + .col-md-12 + .page-header.centered.plans-header.text-centered + h1 Start Your 30-Day Free Trial Today .row - .span12 - .offset3 - ul.nav.nav-pills.pricing-pills - li.active - a(href="#", data-target=".monthly-pricing", data-toggle="tab") Monthly - li - a(href="#", data-target=".annual-pricing", data-toggle="tab") Annual - li - a(href="#", data-target=".student-pricing", data-toggle="tab") Half price student plans + .col-md-12 + p.text-centered ShareLaTeX is the world's easiest to use LaTeX editor. You'll stay up to date with your collaborators, keep track of all changes to your work, and use our up to date and fast compiling environment from anywhere in the world. + + .row(ng-cloak) + .col-md-12 + ul.nav.nav-pills + li(ng-class="{'active': ui.view == 'monthly'}") + a( + href, + ng-click="ui.view = 'monthly'" + ) Monthly + li(ng-class="{'active': ui.view == 'annual'}") + a( + href + ng-click="ui.view = 'annual'" + ) Annual + li(ng-class="{'active': ui.view == 'student'}") + a( + href, + ng-click="ui.view = 'student'" + ) Half Price Student Plans + + .row(ng-cloak) + .col-md-12 + .card-group.text-centered(ng-if="ui.view == 'monthly' || ui.view == 'annual'") + .card + .card-header + h2 Personal + .circle Free + ul.list-unstyled + li Only one extra collaborator per
project + li   + li + br + a.btn.btn-primary(href="/register") Sign up now! + .card.highlighted + .card-header + h2 Collaborator + .circle + span(ng-if="ui.view == 'monthly'") + | $15 + span.small / mo + span(ng-if="ui.view == 'annual'") + | $180 + span.small / yr + ul.list-unstyled + li 10 extra collaborators per project + li Full document history + li Sync to Dropbox + li + br + a.btn.btn-primary( + ng-href="/user/subscription/new?planCode=collaborator{{ ui.view == 'annual' && '_annual' || ''}}" + ) Sign up now! + .card + .card-header + h2 Professional + .circle + span(ng-if="ui.view == 'monthly'") + | $30 + span.small / mo + span(ng-if="ui.view == 'annual'") + | $360 + span.small / yr + ul.list-unstyled + li Unlimited collaborators per project + li Full document history + li Sync to Dropbox + li + br + a.btn.btn-primary( + ng-href="/user/subscription/new?planCode=professional{{ ui.view == 'annual' && '_annual' || ''}}" + ) Sign up now! + + .card-group.text-centered(ng-if="ui.view == 'student'") + .card + .card-header + h2 Personal + .circle Free + ul.list-unstyled + li Only one extra collaborator per
project + li   + li + br + a.btn.btn-primary(href="/register") Sign up now! + .card.highlighted + .card-header + h2 Student + .circle + span + | $8 + span.small / mo + ul.list-unstyled + li 6 extra collaborators per project + li Full document history + li Sync to Dropbox + li + br + a.btn.btn-primary( + ng-href="/user/subscription/new?planCode=student" + ) Sign up now! + .card + .card-header + h2 Student (Annual) + .circle + span + | $80 + span.small / yr + ul.list-unstyled + li 6 extra collaborators per project + li Full document history + li Sync to Dropbox + li + br + a.btn.btn-primary( + ng-href="/user/subscription/new?planCode=student_annual" + ) Sign up now! + + .row(ng-cloak) + p.text-centered Choose the plan that works for you with our 30-day money-back guarantee. Cancel at any time. .row - .span12 - .page-header - h2 Individual Plans - - .pricing-steelblue.pricing-row - .tab-content - .tab-pane.active.monthly-pricing - .row - .span12.tagline - p An online LaTeX editor for collaborating on the same LaTeX project and editing together in real-time. You’ll never go out of sync with your collaborators again, or lose track of any changes. - .row - .span4 - mixin plan(plans.personalAccount, "", true) - .span4 - mixin plan(plans.allPlans['collaborator'], "big", true) - .span4 - mixin plan(plans.allPlans['professional'], "", true) - - .tab-pane.annual-pricing - .row - .span12.tagline - p Collaborate on the same LaTeX project and edit together in real-time. You’ll never go out of sync with your collaborators again, or lose track of any changes. - .span4 - mixin plan(plans.personalAccount, "", true) - .span4 - mixin plan(plans.allPlans['collaborator-annual'], "big", false) - .span4 - mixin plan(plans.allPlans['professional-annual'], "", false) - - .tab-pane.student-pricing - .row - .span8.offset2.tagline - p Getting started and working with LaTeX has never been so easy. Start creating beautiful work now. - .span4 - mixin plan(plans.personalAccount, "", true) - .span4 - mixin plan(plans.allPlans['student'], "big", true) - .span4 - mixin plan(plans.allPlans['student-annual'], "", false) - - .row - .span12.ab-guarantee-shown(style="text-align: center;") - h2 30 day money back guarantee, cancel anytime. - - .pricing-steelblue.pricing-row - .tab-content - .tab-pane.active.monthly-pricing - .page-header - h2 Group Plans - .row - .span12.tagline - p Improve the workflow of your research group by unlocking ShareLaTeX's premium features for everyone on your team - .row - .span4 - mixin plan(plans.groupMonthlyPlans[0], "", true) - .span4 - mixin plan(plans.groupMonthlyPlans[1], "big", true) - .span4 - mixin plan(plans.groupMonthlyPlans[2], "", true) - .tab-pane.annual-pricing - .page-header - h2 Group Plans - .row - .span12.tagline - p Improve the workflow of your research group by unlocking ShareLaTeX's premium features for everyone on your team - .row - .span4 - mixin plan(plans.groupAnnualPlans[0], "", false) - .span4 - mixin plan(plans.groupAnnualPlans[1], "big", false) - .span4 - mixin plan(plans.groupAnnualPlans[2], "", false) - .tab-pane.student-pricing - - - .row - .span6.offset3 - .alert.alert-info(style="color: #333") - h3 Want to use ShareLaTeX for free? - p Tell your university or department about our - a(href="/university") site licenses - | and use of all our - | features for free as a student or member of staff. - - include ../general/small-footer - link(rel='stylesheet', href='/brand/plans.css?fingerprint='+fingerprint('/brand/plans.css')) + .col-md-12 + .page-header.plans-header.plans-subheader.text-centered + h2 Enjoy all of these great features + .col-md-4 + .card.features.text-centered + i.fa.fa-file-text-o.fa-5x + h4 Unlimited projects + p Create as much as you like. + .col-md-4 + .card.features.text-centered + i.fa.fa-clock-o.fa-5x + h4 Full document history + p Never lose a step, we've got your back. + .col-md-4 + .card.features.text-centered + i.fa.fa-dropbox.fa-5x + h4 Sync to Dropbox + p Access your projects everywhere. + .row(ng-if="ui.view == 'monthly' || ui.view == 'annual'", ng-cloak) + .col-md-12 + .page-header.plans-header.plans-subheader.text-centered + h2 Group Plans + p Improve the workflow of your research group by using ShareLaTeX with everyone on your team + .row(ng-if="ui.view == 'monthly' || ui.view == 'annual'", ng-cloak) + .col-md-12 + .card-group.text-centered + .card + .card-header + h2 Group + .circle + span(ng-if="ui.view == 'monthly'") + | $50 + span.small / mo + span(ng-if="ui.view == 'annual'") + | $500 + span.small / yr + ul.list-unstyled + li 5 group members + li.small All the advantages of the Professional account for each team member + li + br + a.btn.btn-primary(href="/user/subscription/new?planCode=group_5_members{{ ui.view == 'annual' && '_annual' || ''}}") Sign up now! + .card.highlighted + .card-header + h2 Research Lab + .circle + span(ng-if="ui.view == 'monthly'") + | $90 + span.small / mo + span(ng-if="ui.view == 'annual'") + | $900 + span.small / yr + ul.list-unstyled + li 10 group members + li.small All the advantages of the Professional account for each team member + li + br + a.btn.btn-primary(href="/user/subscription/new?planCode=group_10_members{{ ui.view == 'annual' && '_annual' || ''}}") Sign up now! + .card + .card-header + h2 Department + .circle + span(ng-if="ui.view == 'monthly'") + | $170 + span.small / mo + span(ng-if="ui.view == 'annual'") + | $1700 + span.small / yr + ul.list-unstyled + li 20 group members + li.small All the advantages of the Professional account for each team member + li + br + a.btn.btn-primary(href="/user/subscription/new?planCode=group_20_members{{ ui.view == 'annual' && '_annual' || ''}}") Sign up now! diff --git a/services/web/public/coffee/app/main.coffee b/services/web/public/coffee/app/main.coffee index 6d0579dc95..452c661b8f 100644 --- a/services/web/public/coffee/app/main.coffee +++ b/services/web/public/coffee/app/main.coffee @@ -2,6 +2,7 @@ define [ "main/project-list" "main/user-details" "main/account-settings" + "main/plans" "directives/asyncForm" "directives/stopPropagation" "directives/focus" diff --git a/services/web/public/coffee/app/main/plans.coffee b/services/web/public/coffee/app/main/plans.coffee new file mode 100644 index 0000000000..f5a3eb8945 --- /dev/null +++ b/services/web/public/coffee/app/main/plans.coffee @@ -0,0 +1,6 @@ +define [ + "base" +], (App) -> + App.controller "PlansController", ($scope) -> + $scope.ui = + view: "monthly" \ No newline at end of file diff --git a/services/web/public/stylesheets/app/plans.less b/services/web/public/stylesheets/app/plans.less new file mode 100644 index 0000000000..edd7753d6d --- /dev/null +++ b/services/web/public/stylesheets/app/plans.less @@ -0,0 +1,124 @@ +.plans { + p { + color: @gray-dark; + margin-bottom: @line-height-computed; + } + .plans-header{ + h1, h2, p { + text-shadow: 0 -1px 1px white; + } + h1, h2 { + color: @red; + } + p { + margin-bottom: 0; + } + } + .plans-subheader { + margin-bottom: @line-height-computed; + } + .card.features { + margin-top: @line-height-computed; + i { + color: @red; + } + p { + margin: 0; + } + } + .card { + background-color: white; + border-radius: 3px; + -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1); + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + margin: @line-height-computed 0; + padding: @line-height-computed; + .card-header { + border-bottom: 1px solid @gray-lighter; + padding-bottom: @line-height-computed; + margin-bottom: @line-height-computed; + h2 { + margin: 0; + } + } + .circle { + font-size: 1.5rem; + font-weight: 700; + padding: 38px 18px; + margin: 0 auto @line-height-computed; + text-shadow: 0 -1px 1px darken(@link-color, 10%); + width: 120px; + height: 120px; + small { + margin-top: @line-height-computed / 2; + } + } + &.first { + margin-top: 0; + } + &.card-thin { + padding: @line-height-computed / 4; + } + } + + .card-group { + margin: @line-height-computed 0; + .card { + border-radius: 0; + display: inline-block; + margin: 0; + &:first-child { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + &:last-child { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + width: 300px; + } + .highlighted { + box-shadow: 0 4px 8px rgba(0,0,0,0.1); + margin-top: -@line-height-computed * 2; + padding-top: @line-height-computed * 2; + padding-bottom: @line-height-computed * 2; + position: relative; + z-index: 10; + } + } + > .card-group > .card { + padding-left: 1rem; + padding-right: 1rem; + } + .circle { + border-radius: 50%; + background-color: @red; + color: white; + padding: @line-height-computed / 2; + margin-bottom: @line-height-computed; + white-space: nowrap; + span.small { + color: rgba(255, 255, 255, 0.75); + font-size: @font-size-base * .8; + } + } + ul.nav-pills { + text-align: center; + margin-bottom: @line-height-computed; + li { + float: none; + display: inline-block; + a { + background-color: darken(@gray-lightest, 5%); + } + &.active { + a { + background-color: @link-color; + } + } + } + > li + li { + margin-left: @line-height-computed / 2; + } + } +} \ No newline at end of file diff --git a/services/web/public/stylesheets/style.less b/services/web/public/stylesheets/style.less index e0eb3f7acb..d0123c0653 100755 --- a/services/web/public/stylesheets/style.less +++ b/services/web/public/stylesheets/style.less @@ -58,3 +58,4 @@ @import "app/project-list.less"; @import "app/editor.less"; @import "app/homepage.less"; +@import "app/plans.less";