mirror of
https://github.com/Damillora/Yuika
synced 2024-11-22 17:27:32 +00:00
Add membership
This commit is contained in:
parent
b59d91e672
commit
f10050ef7e
@ -12,7 +12,9 @@ html {
|
|||||||
header {
|
header {
|
||||||
@apply py-4;
|
@apply py-4;
|
||||||
}
|
}
|
||||||
|
a:hover {
|
||||||
|
@apply underline;
|
||||||
|
}
|
||||||
/* 2. Site Header */
|
/* 2. Site Header */
|
||||||
.index-navbar {
|
.index-navbar {
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -242,11 +244,14 @@ footer {
|
|||||||
}
|
}
|
||||||
.nav li.separator {
|
.nav li.separator {
|
||||||
height: 0;
|
height: 0;
|
||||||
@apply border border-white;
|
@apply border border-white border-t opacity-75;
|
||||||
}
|
}
|
||||||
.nav li a {
|
.nav li a {
|
||||||
@apply align-middle w-full h-full flex items-center justify-start px-4 py-2;
|
@apply align-middle w-full h-full flex items-center justify-start px-4 py-2;
|
||||||
}
|
}
|
||||||
|
.nav li a:hover {
|
||||||
|
@apply no-underline;
|
||||||
|
}
|
||||||
.nav li:hover {
|
.nav li:hover {
|
||||||
@apply bg-yuika-blue-500 transition duration-300 ease-in-out;
|
@apply bg-yuika-blue-500 transition duration-300 ease-in-out;
|
||||||
}
|
}
|
||||||
|
|||||||
50
members/account.hbs
Normal file
50
members/account.hbs
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
{{!< ../default}}
|
||||||
|
|
||||||
|
|
||||||
|
{{#unless @member}}
|
||||||
|
<script>window.location = '{{@site.url}}';</script>
|
||||||
|
{{/unless}}
|
||||||
|
<div class="relative group index-header">
|
||||||
|
{{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||||
|
<div class="w-full h-full opacity-50 bg-black">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute bottom-0 py-4 left-0 right-0">
|
||||||
|
<div class="container mx-auto content-full">
|
||||||
|
<div class="text-white">
|
||||||
|
<div>
|
||||||
|
{{#if @member}}
|
||||||
|
<div class="flex flex-row items-center mb-2">
|
||||||
|
{{#if @member.avatar_image}}
|
||||||
|
<img class="author-image" src="{{@member.avatar_image}}" alt="{{@member.email}}" />
|
||||||
|
{{/if}}
|
||||||
|
<p class="text-white text-2xl md:text-4xl ml-4">{{@member.email}}</p>
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<article class="post-article">
|
||||||
|
<main class="content container" id="post">
|
||||||
|
<div class="content-full">
|
||||||
|
{{#if @member.paid}}
|
||||||
|
{{else if @member}}
|
||||||
|
<h1 class="text-2xl">You are subscribed to updates</h1>
|
||||||
|
<p>You are currently subscribed to updates from <strong>{{@site.title}}</strong>.</p>
|
||||||
|
{{else}}
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
{{#contentFor "scripts"}}
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
// FitVids - start
|
||||||
|
var $postContent = $("#post");
|
||||||
|
$postContent.fitVids();
|
||||||
|
// FitVids - end
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{{/contentFor}}
|
||||||
58
members/signin.hbs
Normal file
58
members/signin.hbs
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
{{!< ../default}}
|
||||||
|
|
||||||
|
|
||||||
|
{{#if @member}}
|
||||||
|
<script>window.location = '{{@site.url}}';</script>
|
||||||
|
{{/if}}
|
||||||
|
<div class="relative group index-header large">
|
||||||
|
{{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||||
|
<div class="w-full h-full opacity-50 bg-black">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute left-0 right-0 top-0 bottom-0 flex flex-row items-center justify-center">
|
||||||
|
<div class="container mx-auto content-full">
|
||||||
|
<div class="text-white">
|
||||||
|
<div id="subscribe-form">
|
||||||
|
<h1 class="text-2xl">Welcome back!</h1>
|
||||||
|
<p>Sign into your account again for full access</p>
|
||||||
|
<form id="subscribe-form" data-members-form="signin">
|
||||||
|
<div class="py-8">
|
||||||
|
<label class="text-sm">Email address</label>
|
||||||
|
<input type="email" data-members-email class="appearance-none bg-transparent focus:outline-none text-xl border-b w-full px-2 py-1">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="px-4 py-2 appearance-none focus:outline-none bg-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out">
|
||||||
|
Send login link
|
||||||
|
</button>
|
||||||
|
<div class="pt-4">
|
||||||
|
<div class="message-success">
|
||||||
|
<p>Please check your email inbox to complete sign in.</p>
|
||||||
|
</div>
|
||||||
|
<div class="message-error">
|
||||||
|
<p>Please enter a valid email address!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<article class="post-article">
|
||||||
|
<main class="content container" id="post">
|
||||||
|
<div class="content-full">
|
||||||
|
{{#post}}
|
||||||
|
{{content}}
|
||||||
|
{{/post}}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
{{#contentFor "scripts"}}
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
// FitVids - start
|
||||||
|
var $postContent = $("#post");
|
||||||
|
$postContent.fitVids();
|
||||||
|
// FitVids - end
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{{/contentFor}}
|
||||||
108
members/signup.hbs
Normal file
108
members/signup.hbs
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
{{!< ../default}} <div class="relative group index-header large">
|
||||||
|
{{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background
|
||||||
|
image--}}
|
||||||
|
<div class="w-full h-full opacity-50 bg-black">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute left-0 right-0 top-4 bottom-0 flex flex-row items-center justify-center">
|
||||||
|
<div class="container mx-auto content-full">
|
||||||
|
<div class="text-white">
|
||||||
|
<div>
|
||||||
|
{{#if @member.paid}}
|
||||||
|
{{!-- Logged in, paying member: Redirect home --}}
|
||||||
|
<script>window.location = '{{@site.url}}';</script>
|
||||||
|
{{else if @member}}
|
||||||
|
<h1 class="text-2xl md:text-4xl">
|
||||||
|
Join The Damillora Network
|
||||||
|
</h1>
|
||||||
|
<p class="text-lg md:text-xl">Become an Autonomous System member</p>
|
||||||
|
<p>By subscribing as an Autonomous System, you can get additional benefits and support me at the same time!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{{else}}
|
||||||
|
<h1 class="text-2xl md:text-4xl">Subscribe to {{@site.title}}</h1>
|
||||||
|
<p>Get the latest posts delivered straight to your inbox.</p>
|
||||||
|
<form id="subscribe-form" data-members-form="subscribe">
|
||||||
|
<div class="py-8">
|
||||||
|
<label class="text-sm">Email address</label>
|
||||||
|
<input type="email" data-members-email
|
||||||
|
class="appearance-none bg-transparent focus:outline-none text-xl border-b w-full px-2 py-1">
|
||||||
|
</div>
|
||||||
|
<button id="subscribe-submit" type="submit"
|
||||||
|
class="px-4 py-2 appearance-none focus:outline-none bg-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out">
|
||||||
|
Subscribe
|
||||||
|
</button>
|
||||||
|
<div class="message-success">
|
||||||
|
<p>Please check your email inbox to confirm your subscription!</p>
|
||||||
|
</div>
|
||||||
|
<div class="message-error">
|
||||||
|
<p>Please enter a valid email address!</p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<article class="post-article">
|
||||||
|
<main class="content container" id="post">
|
||||||
|
<div class="content-full">
|
||||||
|
{{#if @member}}
|
||||||
|
<h1 class="text-red-500">Access restricted. Required infrastructure not yet in place.</h1>
|
||||||
|
<div class="md:flex md:flex-row pointer-events-none opacity-50">
|
||||||
|
<div class="md:w-1/2 md:pr-4">
|
||||||
|
<h2 class="text-xl md:text-2xl text-center">Monthly</h2>
|
||||||
|
<ul class="text-center pt-4 list-disc md:h-64">
|
||||||
|
<li><strong>Autonomous System</strong> role in <a href="//nanao.moe/discord">The Network Discord
|
||||||
|
server</a>.</li>
|
||||||
|
<li><strong>Full access to posts</strong> in <a href="{{@site.url}}">{{@site.title}}</a>, including
|
||||||
|
members-only posts!</li>
|
||||||
|
<li><strong>Access to exclusive content</strong> in <a href="//nanao.moe/channel">my YouTube channel</a>.
|
||||||
|
</li>
|
||||||
|
<li><strong>Help shape the future</strong> of my content!</li>
|
||||||
|
<li><strong>More</strong> coming soon!</li>
|
||||||
|
</ul>
|
||||||
|
<p class="text-xl md:text-2xl text-center pt-4">
|
||||||
|
<span class="uppercase">{{@price.currency}}</span> <strong>{{@price.monthly}}</strong>
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-center pt-2">
|
||||||
|
<a class="px-4 py-2 border-yuika-blue-500 border appearance-none focus:outline-none border-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out text-white"
|
||||||
|
href="javascript:" data-members-plan="Monthly">Choose this plan</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2 md:pl-4">
|
||||||
|
<h2 class="text-xl md:text-2xl text-center">Yearly</h2>
|
||||||
|
<ul class="text-center pt-4 list-disc md:h-64">
|
||||||
|
<li><strong>Everything</strong> in the Monthly plan.</li>
|
||||||
|
<li><strong>Two months</strong> free!</li>
|
||||||
|
<li><strong>More</strong> coming soon!</li>
|
||||||
|
</ul>
|
||||||
|
<p class="text-xl md:text-2xl text-center pt-4">
|
||||||
|
<span class="uppercase">{{@price.currency}}</span> <strong>{{@price.yearly}}</strong>
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-center pt-2">
|
||||||
|
<a class="px-4 py-2 border-yuika-blue-500 border appearance-none focus:outline-none border-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out text-white"
|
||||||
|
href="javascript:" data-members-plan="Yearly">Choose this plan</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{else}}
|
||||||
|
{{#page}}
|
||||||
|
{{content}}
|
||||||
|
{{/page}}
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</article>
|
||||||
|
{{#contentFor "scripts"}}
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
// FitVids - start
|
||||||
|
var $postContent = $("#post");
|
||||||
|
$postContent.fitVids();
|
||||||
|
// FitVids - end
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{{/contentFor}}
|
||||||
@ -17,6 +17,30 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-group">
|
<div class="nav-group">
|
||||||
|
<ul class="nav">
|
||||||
|
{{#if @member}}
|
||||||
|
{{#unless @member.paid}}
|
||||||
|
<li>
|
||||||
|
<a href="{{@site.url}}/subscribe/">Join The Damillora Network</a>
|
||||||
|
</li>
|
||||||
|
<li class="separator"></li>
|
||||||
|
{{/unless}}
|
||||||
|
<li>
|
||||||
|
<a href="{{@site.url}}/account/">{{@member.email}}</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#signout" data-members-signout>Sign out</a>
|
||||||
|
</li>
|
||||||
|
{{else}}
|
||||||
|
<li>
|
||||||
|
<a href="{{@site.url}}/signin/">Sign in</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="{{@site.url}}/subscribe/">Subscribe</a>
|
||||||
|
</li>
|
||||||
|
{{/if}}
|
||||||
|
<li class="separator"></li>
|
||||||
|
</ul>
|
||||||
{{navigation}}
|
{{navigation}}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user