|
|
|
@ -8,19 +8,73 @@
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
|
|
|
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
|
|
|
|
|
-->
|
|
|
|
|
<script type="text/javascript" src="{{ context }}/static/js/jquery/jquery.min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="{{ context }}/static/js/jx/rpc.js"></script>
|
|
|
|
|
<script type="text/javascript" src="{{ context }}/static/js/jx/utils.js"></script>
|
|
|
|
|
<script type="text/javascript" src="{{ context }}/static/js/jx/dom.js"></script>
|
|
|
|
|
|
|
|
|
|
<title style="text-transform: capitalize">{{app_name.replace('-',' ')}}</title>
|
|
|
|
|
<style>
|
|
|
|
|
.theme-raspberry{
|
|
|
|
|
background: #00B4DB; /* fallback for old browsers */
|
|
|
|
|
background: -webkit-linear-gradient(to bottom, #0083B0, #00B4DB); /* Chrome 10-25, Safari 5.1-6 */
|
|
|
|
|
background: linear-gradient(to bottom, #0083B0, #00B4DB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
|
|
|
color:#ffffff;
|
|
|
|
|
font-family:verdana;
|
|
|
|
|
font-weight:lighter;
|
|
|
|
|
text-transform:capitalize;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.theme-dark-ocean {
|
|
|
|
|
background: #373B44; /* fallback for old browsers */
|
|
|
|
|
background: -webkit-linear-gradient(to bottom, #4286f4, #373B44); /* Chrome 10-25, Safari 5.1-6 */
|
|
|
|
|
background: linear-gradient(to bottom, #4286f4, #373B44); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
|
|
|
color:#f3f3f3;
|
|
|
|
|
}
|
|
|
|
|
.theme-gray {
|
|
|
|
|
background: #bdc3c7; /* fallback for old browsers */
|
|
|
|
|
background: -webkit-linear-gradient(to bottom, #2c3e50, #bdc3c7); /* Chrome 10-25, Safari 5.1-6 */
|
|
|
|
|
background: linear-gradient(to bottom, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
|
|
|
color:#f3f3f3f3;
|
|
|
|
|
}
|
|
|
|
|
.theme-clouds {
|
|
|
|
|
background: #ECE9E6; /* fallback for old browsers */
|
|
|
|
|
background: -webkit-linear-gradient(to bottom, #FFFFFF, #ECE9E6); /* Chrome 10-25, Safari 5.1-6 */
|
|
|
|
|
background: linear-gradient(to bottom, #FFFFFF, #ECE9E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
img {width:48px}
|
|
|
|
|
body{
|
|
|
|
|
font-family:sans-serif;
|
|
|
|
|
font-size:14px;
|
|
|
|
|
font-weight:lighter;
|
|
|
|
|
width:80%;
|
|
|
|
|
margin-left:10%;
|
|
|
|
|
}
|
|
|
|
|
.button {
|
|
|
|
|
padding:4px;
|
|
|
|
|
border-radius:8px;
|
|
|
|
|
border:1px solid #d3d3d3;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.active {
|
|
|
|
|
font-weight:bold;
|
|
|
|
|
font-family:verdana;
|
|
|
|
|
cursor:pointer ;
|
|
|
|
|
border-bottom:2px solid bottom;
|
|
|
|
|
padding:4px;
|
|
|
|
|
}
|
|
|
|
|
.active:hover { border-bottom:2px solid #4682B4}
|
|
|
|
|
.current-plan {
|
|
|
|
|
|
|
|
|
|
border-color: #20B2AA #20B2AA transparent transparent;
|
|
|
|
|
border-style: solid;
|
|
|
|
|
border-width: 15px 15px 15px 15px;
|
|
|
|
|
height: 0px;
|
|
|
|
|
width: 0px;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.bold { font-weight:bold}
|
|
|
|
|
.caption {
|
|
|
|
|
font-size:28px; font-weight:lighter ;
|
|
|
|
@ -43,7 +97,11 @@
|
|
|
|
|
display:grid;
|
|
|
|
|
grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) )
|
|
|
|
|
}
|
|
|
|
|
.plan .title { font-size:24px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0; }
|
|
|
|
|
.plan .title {
|
|
|
|
|
display:grid;
|
|
|
|
|
grid-template-columns: auto 32px;
|
|
|
|
|
grid-gap:2px;
|
|
|
|
|
font-size:24px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0; }
|
|
|
|
|
.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:2px; margin:2px;}
|
|
|
|
|
.plan .feature .label {text-transform: uppercase; grid-column:1; font-size:14px;}
|
|
|
|
|
.plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
|
|
|
|
@ -97,9 +155,7 @@
|
|
|
|
|
.height-48{height:40px}
|
|
|
|
|
.width-50{width:47%; padding:4px;}
|
|
|
|
|
.width-25{width:24%; padding:4px}
|
|
|
|
|
.pricing {
|
|
|
|
|
display:block;
|
|
|
|
|
}
|
|
|
|
|
.pricing {display:block;}
|
|
|
|
|
.plan .title { font-size:18px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0; }
|
|
|
|
|
.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px}
|
|
|
|
|
.plan .feature .label {font-size:12px; text-transform: uppercase; grid-column:1}
|
|
|
|
@ -118,8 +174,7 @@
|
|
|
|
|
grid-gap:2px;
|
|
|
|
|
}
|
|
|
|
|
.header .logo img {width:32px}
|
|
|
|
|
.header {display:block;
|
|
|
|
|
}
|
|
|
|
|
.header {display:block;}
|
|
|
|
|
|
|
|
|
|
table {width:70%; margin-left:20%}
|
|
|
|
|
.medium-caption {font-size:18px}
|
|
|
|
@ -130,8 +185,8 @@
|
|
|
|
|
display:grid;
|
|
|
|
|
grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) )
|
|
|
|
|
}
|
|
|
|
|
.plan .title { font-size:20px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0; }
|
|
|
|
|
.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px}
|
|
|
|
|
.plan .title { padding:4px; font-size:22px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0; }
|
|
|
|
|
.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px; padding:4px;}
|
|
|
|
|
.plan .feature .label {text-transform: uppercase; grid-column:1}
|
|
|
|
|
.plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
|
|
|
|
|
|
|
|
|
@ -142,6 +197,7 @@
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<body >
|
|
|
|
|
|
|
|
|
|
<div class="header">
|
|
|
|
|
<div class="logo">
|
|
|
|
|
<div>
|
|
|
|
@ -165,9 +221,17 @@
|
|
|
|
|
<div >
|
|
|
|
|
<div class="pricing">
|
|
|
|
|
{% for item in plans%}
|
|
|
|
|
<div class="plan">
|
|
|
|
|
<div class="title">{{ item.nickname }}</div>
|
|
|
|
|
<br>
|
|
|
|
|
<div class="plan {{theme}}">
|
|
|
|
|
<div class="title">
|
|
|
|
|
<div>{{ item.nickname }}</div>
|
|
|
|
|
{% if item.id in active_plans %}
|
|
|
|
|
<div class="current-plan"></div>
|
|
|
|
|
{% else %}
|
|
|
|
|
<div></div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="">
|
|
|
|
|
{% for key,value in item.metadata['features'].iteritems() %}
|
|
|
|
|
<div class="feature">
|
|
|
|
|
<div class="label">{{ key }}</div>
|
|
|
|
@ -181,10 +245,17 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{% endfor %}
|
|
|
|
|
{% if item.amount > 0 and platform != 'mobile' %}
|
|
|
|
|
<div align="right">
|
|
|
|
|
</div>
|
|
|
|
|
{% if platform != 'mobile' and item.amount > 0 and item.name not in active_plans %}
|
|
|
|
|
<div align="right" class="border-top">
|
|
|
|
|
<br>
|
|
|
|
|
{% if active_plans|length > 0 %}
|
|
|
|
|
<div id="upgrade_{{item.id}}" align="right" onclick="jx.dom.show('{{item.id}}'); jx.dom.hide('upgrade_{{item.id}}')">
|
|
|
|
|
|
|
|
|
|
<form action="{{context}}/subscribe/{{app_name|safe}}" method="POST">
|
|
|
|
|
<span class="active">Upgrade</span>
|
|
|
|
|
</div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
<form id="{{item.id}}" style="display:none" action="{{context}}/subscribe/{{app_name|safe}}" method="POST">
|
|
|
|
|
<script
|
|
|
|
|
src="https://checkout.stripe.com/checkout.js" class="stripe-button action"
|
|
|
|
|
data-key="{{apikey|safe}}"
|
|
|
|
@ -203,14 +274,26 @@
|
|
|
|
|
<input type="hidden" name="plan" value="{{item.id|safe}}"/>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
{% elif item.amount == 0 and platform != 'mobile' %}
|
|
|
|
|
<br><div align="right" style="background:#f3f3f3; color:#4682B4; font-weight:bold; ">
|
|
|
|
|
{% elif item.amount == 0 and platform != 'mobile' and item.id not in active_plans %}
|
|
|
|
|
<div align="right" class="border-top" style="DISPLAY:none;background:#f3f3f3; color:#4682B4; font-weight:bold; ">
|
|
|
|
|
<br>
|
|
|
|
|
<div style="float:right;margin-right:4px;">
|
|
|
|
|
<div align="center">This Plan is Plan</div>
|
|
|
|
|
<div class="small" align="center">Login to Start</div>
|
|
|
|
|
<div class="small" align="center">Free/Signup</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div align="right" class="border-top">
|
|
|
|
|
<br><button type="submit" class="stripe-button-el" style="visibility: visible;"><span style="display: block; min-height: 30px;">Signup Free/ mo</span></button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{% elif item.amount == 0 and platform != 'mobile' %}
|
|
|
|
|
<div align="right" class="border-top">
|
|
|
|
|
<br><div style="" class="">
|
|
|
|
|
<span style="font-weight:bold; font-size:14px; color:#4682B4 ; display: block; min-height: 30px;">
|
|
|
|
|
<i class="fa fa-check"></i>
|
|
|
|
|
Current Plan</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
{% endif%}
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|