Members templates
This commit is contained in:
John O'Nolan
parent
799280d03a
commit
6eb9a1218f
|
|
@ -17,7 +17,6 @@
|
|||
|
||||
.gh-input:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 1px var(--color-primary);
|
||||
}
|
||||
|
||||
.gh-select {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,65 @@
|
|||
/* Members Auth Template
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-auth-form {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 10vmin;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gh-auth-title {
|
||||
margin: 0 0 0.1em;
|
||||
font-size: 4.2rem;
|
||||
}
|
||||
|
||||
.gh-auth-form p {
|
||||
margin: 0 0 20px 0;
|
||||
font-size: 1.7rem;
|
||||
color: rgba(0,0,0,0.6)
|
||||
}
|
||||
|
||||
.gh-auth-form p small {
|
||||
display: inline-block;
|
||||
margin: 15px 0 0 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.gh-auth-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 460px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gh-auth-box .gh-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.gh-auth-box {
|
||||
flex-direction: column;
|
||||
}
|
||||
.gh-auth-box .gh-button {
|
||||
width: 100%;
|
||||
margin: 15px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Members Forms
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
form[data-members-form] .button-loader,
|
||||
form[data-members-form] .gh-button-loader,
|
||||
form[data-members-form] .message-success,
|
||||
form[data-members-form] .message-error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gh-button-content {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.message-success svg,
|
||||
.message-error svg {
|
||||
position: relative;
|
||||
|
|
@ -19,17 +72,17 @@ form[data-members-form] .message-error {
|
|||
fill: #fff;
|
||||
}
|
||||
.message-error svg {
|
||||
fill: var(--color-primary);
|
||||
fill: red;
|
||||
}
|
||||
|
||||
form[data-members-form].success .message-success,
|
||||
form[data-members-form].error .message-error {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 6vw;
|
||||
right: 6vw;
|
||||
left: 4vw;
|
||||
right: 4vw;
|
||||
z-index: 9999;
|
||||
max-width: calc(1400px - 12vw);
|
||||
max-width: calc(1400px - 8vw);
|
||||
margin: 0 auto;
|
||||
padding: 10px 0;
|
||||
color: #fff;
|
||||
|
|
@ -44,33 +97,35 @@ form[data-members-form].success .message-success {
|
|||
background: var(--color-success);
|
||||
}
|
||||
form[data-members-form].error .message-error {
|
||||
color: var(--color-primary);
|
||||
color: red;
|
||||
background: #fff;
|
||||
box-shadow: var(--color-primary) 0 0 0 1px;
|
||||
box-shadow: red 0 0 0 1px;
|
||||
}
|
||||
|
||||
form[data-members-form] .button {
|
||||
form[data-members-form] .gh-button {
|
||||
position: relative;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
/*-- Loading --*/
|
||||
|
||||
/* Hide button text */
|
||||
form[data-members-form].loading .button-content {
|
||||
form[data-members-form].loading .gh-button-content {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Show loading spinner */
|
||||
form[data-members-form].loading .button-loader {
|
||||
form[data-members-form].loading .gh-button-loader {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -19px;
|
||||
transform: scale(0.7);
|
||||
bottom: -30%;
|
||||
margin: 0 0 0 -19px;
|
||||
transform: scale(0.6);
|
||||
}
|
||||
|
||||
.button-loader svg path,
|
||||
.button-loader svg rect{
|
||||
.gh-button-loader svg path,
|
||||
.gh-button-loader svg rect{
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
{{!< ../default}}
|
||||
|
||||
<div class="gh-page">
|
||||
<div class="gh-container">
|
||||
|
||||
{{#if @member.paid}}
|
||||
|
||||
{{!-- Logged in, paying member: Show account info --}}
|
||||
<div class="account-box">
|
||||
<h2 class="account-box-title">Nice, you're a subscriber!</h2>
|
||||
<p>Hey! <strong>{{@member.email}}</strong> has an active {{@site.title}} account with access to all areas. You're all set, but if you need any help, get in touch with us and we'd be happy to help.</p>
|
||||
</div>
|
||||
|
||||
{{else if @member}}
|
||||
|
||||
{{!-- Logged in, not paying: Link to checkout --}}
|
||||
<div class="account-box">
|
||||
<h1 class="account-box-title">Currently, you're not a subscriber</h1>
|
||||
<p>Hey there! <strong>{{@member.email}}</strong> is subscribed to free updates from {{@site.title}}, but doesn't have a paid subscription to unlock full access.</p>
|
||||
<div class="authbox-signup">
|
||||
<a class="button primary" href="/signup/">
|
||||
<span class="button-content">Subscribe now</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{else}}
|
||||
|
||||
{{!-- Not logged in: Redirect to signin --}}
|
||||
<script>window.location = '{{@site.url}}/signin/';</script>
|
||||
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>.pico-cta{display:none;}</style>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
{{!< ../default}}
|
||||
|
||||
<div class="gh-page">
|
||||
<div class="gh-container">
|
||||
|
||||
{{#if @member}}
|
||||
|
||||
{{!-- Logged in: Redirect home --}}
|
||||
<script>window.location = '{{@site.url}}';</script>
|
||||
|
||||
{{else}}
|
||||
|
||||
{{!-- Not logged in: Signin form --}}
|
||||
<form class="gh-auth-form" data-members-form="signin">
|
||||
<h1 class="gh-auth-title">Welcome back!</h1>
|
||||
<p>Sign into your account again for full access</p>
|
||||
<div class="gh-auth-box">
|
||||
<input class="gh-input" data-members-email type="email" placeholder="Your email address" required="true" autocomplete="false" />
|
||||
<button class="gh-button gh-button-primary" type="submit">
|
||||
<span class="gh-button-content">Sign in</span>
|
||||
<span class="gh-button-loader">{{> "icons/loader"}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<p><small>Don't have an account yet? <a href="/signup/">Sign up</a></small></p>
|
||||
<div class="message-success"><strong>Great!</strong> Check your inbox and click the link to complete signin</div>
|
||||
<div class="message-error">Please enter a valid email address!</div>
|
||||
</form>
|
||||
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>.pico-cta{display:none;}</style>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
{{!< ../default}}
|
||||
|
||||
<div class="gh-page">
|
||||
<div class="gh-container">
|
||||
|
||||
{{#if @member.paid}}
|
||||
|
||||
{{!-- Logged in, paying member: Redirect home --}}
|
||||
<script>window.location = '{{@site.url}}';</script>
|
||||
|
||||
{{else if @member}}
|
||||
|
||||
{{!-- Logged in, not paying: Check out --}}
|
||||
<div class="gh-checkout-form">
|
||||
<h1 class="gh-checkout-title">Choose your subscription</h1>
|
||||
<p>Unlock full access to {{@site.title}} and see the entire library of members-only content & updates</p>
|
||||
<div class="gh-checkout-box">
|
||||
<div class="gh-checkout-plan">
|
||||
<header class="gh-checkout-plan-header">
|
||||
<h3>Monthly</h3>
|
||||
<span>$</span><strong>{{@price.monthly}}</strong> / month
|
||||
</header>
|
||||
<div class="gh-checkout-plan-content">
|
||||
<ul>
|
||||
<li>Full access to all private posts</li>
|
||||
<li>Regular updates with new content</li>
|
||||
<li>Support independent publishing</li>
|
||||
<li>Simple, secure card payment</li>
|
||||
</ul>
|
||||
<a class="button primary fit" href="javascript:void(0)" data-members-plan="Monthly">Choose this plan</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-checkout-plan">
|
||||
<header class="gh-checkout-plan-header">
|
||||
<h3>Yearly</h3>
|
||||
<span>$</span><strong>{{@price.yearly}}</strong> / year
|
||||
</header>
|
||||
<div class="gh-checkout-plan-content">
|
||||
<ul>
|
||||
<li>Full access to all private posts</li>
|
||||
<li>Regular updates with new content</li>
|
||||
<li>Support independent publishing</li>
|
||||
<li>Simple, secure card payment</li>
|
||||
<li>One easy payment instead of 12!</li>
|
||||
</ul>
|
||||
<a class="button primary fit" href="javascript:void(0)" data-members-plan="Yearly">Choose this plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{else}}
|
||||
|
||||
{{!-- Not logged in: Sign up --}}
|
||||
<form class="gh-auth-form" data-members-form="signup">
|
||||
<h1 class="gh-auth-title">Signup to {{@site.title}}</h1>
|
||||
<p>{{@site.description}}</p>
|
||||
<div class="gh-auth-box">
|
||||
<input class="gh-input" data-members-email type="email" placeholder="Type your email..." required="true" autocomplete="false" />
|
||||
<button class="gh-button gh-button-primary" type="submit">
|
||||
<span class="gh-button-content">Continue</span>
|
||||
<span class="gh-button-loader">{{> "icons/loader"}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<p><small>Already have an account? <a href="/signin/">Sign in</a></small></p>
|
||||
<div class="message-success"><strong>Great!</strong> Check your inbox and click the link to confirm your subscription</div>
|
||||
<div class="message-error">Please enter a valid email address!</div>
|
||||
</form>
|
||||
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>.pico-cta{display:none;}</style>
|
||||
Loading…
Reference in New Issue