|
|
|
@ -20,6 +20,7 @@
|
|
|
|
|
font-size:14px;
|
|
|
|
|
font-weight:lighter;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bold { font-weight:bold}
|
|
|
|
|
.caption {
|
|
|
|
|
font-size:28px; font-weight:lighter ;
|
|
|
|
@ -43,20 +44,21 @@
|
|
|
|
|
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 .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px}
|
|
|
|
|
.plan .feature .label {text-transform: uppercase; grid-column:1}
|
|
|
|
|
.plan .feature .status {font-size:20px; text-align: right}
|
|
|
|
|
.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;}
|
|
|
|
|
.border-bottom{ border-bottom:1px solid #CAD5E0}
|
|
|
|
|
.border-right{ border-right:1px solid #CAD5E0}
|
|
|
|
|
.border-left{ border-left:1px solid #CAD5E0}
|
|
|
|
|
.border-top{ border-top:1px solid #CAD5E0}
|
|
|
|
|
.left { float:left}
|
|
|
|
|
.small { font-family:verdana; font-size:11px;}
|
|
|
|
|
.small { font-family:verdana; font-size:11px; font-weight:lighter; color:#000000;}
|
|
|
|
|
.hidden {display:none}
|
|
|
|
|
.width-50{width:50%; padding:4px;}
|
|
|
|
|
.width-25{width:25%; padding:4px}
|
|
|
|
|
.height-48{height:48px;}
|
|
|
|
|
.fa-times {color:maroon}
|
|
|
|
|
.fa-check {color:green}
|
|
|
|
|
.fa-times {color:maroon; font-size:18px;}
|
|
|
|
|
.fa-check {color:green; font-size:18px;}
|
|
|
|
|
table { border:1px solid #CAD5E0;
|
|
|
|
|
border-radius:8px;
|
|
|
|
|
-webkit-border-radius:8px;
|
|
|
|
@ -101,15 +103,24 @@
|
|
|
|
|
.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}
|
|
|
|
|
.plan .feature .status {font-size:16px; text-align: right}
|
|
|
|
|
.plan .feature .status {font-size:16px; text-align: right; font-size:14px;}
|
|
|
|
|
.header{display:none}
|
|
|
|
|
.caption {font-size:20px}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
@media only screen and (min-device-width: 768px){
|
|
|
|
|
body {font-size:12px}
|
|
|
|
|
.header img {width:48px}
|
|
|
|
|
.header {display:block}
|
|
|
|
|
|
|
|
|
|
.header .logo{
|
|
|
|
|
display:grid;
|
|
|
|
|
margin:4px;
|
|
|
|
|
grid-template-columns: 48px auto ;
|
|
|
|
|
grid-gap:2px;
|
|
|
|
|
}
|
|
|
|
|
.header .logo img {width:32px}
|
|
|
|
|
.header {display:block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table {width:70%; margin-left:20%}
|
|
|
|
|
.medium-caption {font-size:18px}
|
|
|
|
|
.width-50{width:50%; padding:4px;}
|
|
|
|
@ -119,110 +130,95 @@
|
|
|
|
|
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 { 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 .feature .label {text-transform: uppercase; grid-column:1}
|
|
|
|
|
.plan .feature .status {font-size:20px; text-align: right}
|
|
|
|
|
.plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<body >
|
|
|
|
|
<div>
|
|
|
|
|
{{active_plan}}
|
|
|
|
|
<div class="header">
|
|
|
|
|
<div class="logo">
|
|
|
|
|
<div>
|
|
|
|
|
<img src="{{context}}/static/img/logo-0.png" align="left" style="margin:4px">
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="caption">The Phi Technology</div>
|
|
|
|
|
<div class="small">{{alias}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div align="center" class="border-top" style="padding:8px">
|
|
|
|
|
{% if alias %}
|
|
|
|
|
<div class="caption">{{alias.replace('-',' ') }}</div>
|
|
|
|
|
{% else %}
|
|
|
|
|
<div class="caption">{{app_name.replace('-',' ') }}</div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
<div class="small">Available Plans</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<br>
|
|
|
|
|
<table align="center" class="header" style="border:1px solid transparent">
|
|
|
|
|
<tr>
|
|
|
|
|
<td style="width:80%" valign="bottom">
|
|
|
|
|
<div align="left">
|
|
|
|
|
<img src="{{context}}/static/img/logo-0.png" align="left" style="margin:4px">
|
|
|
|
|
<div style="padding:8px" >
|
|
|
|
|
<div class="caption">The Phi Technology</div>
|
|
|
|
|
<div class="small" style="text-transform:capitalize">{{ alias }}</div>
|
|
|
|
|
<div >
|
|
|
|
|
<div class="pricing">
|
|
|
|
|
{% for item in plans%}
|
|
|
|
|
<div class="plan">
|
|
|
|
|
<div class="title">{{ item.nickname }}</div>
|
|
|
|
|
<br>
|
|
|
|
|
{% for key,value in item.metadata['features'].iteritems() %}
|
|
|
|
|
<div class="feature">
|
|
|
|
|
<div class="label">{{ key }}</div>
|
|
|
|
|
{% if value == True %}
|
|
|
|
|
<div class="status"><i class="fa fa-check"></i></div>
|
|
|
|
|
{% elif value == False %}
|
|
|
|
|
<div class="status"><i class="fa fa-times"></i></div>
|
|
|
|
|
{%else %}
|
|
|
|
|
<div class="status">{{value}}</div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
<td align="right" class="small" valign="bottom">
|
|
|
|
|
{{uid}}
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
<table align="center">
|
|
|
|
|
|
|
|
|
|
{% endfor %}
|
|
|
|
|
{% if item.amount > 0 and platform != 'mobile' %}
|
|
|
|
|
<div align="right">
|
|
|
|
|
|
|
|
|
|
<form action="{{context}}/subscribe/{{app_name|safe}}" method="POST">
|
|
|
|
|
<script
|
|
|
|
|
src="https://checkout.stripe.com/checkout.js" class="stripe-button action"
|
|
|
|
|
data-key="{{apikey|safe}}"
|
|
|
|
|
data-email="{{uid|safe}}"
|
|
|
|
|
data-amount={{item.amount|safe}}
|
|
|
|
|
data-name="{{item.nickname}}"
|
|
|
|
|
data-description="{{alias }}"
|
|
|
|
|
|
|
|
|
|
data-label="Signup $ {{item.amount/100 }} / {{item.interval[:2]}}"
|
|
|
|
|
data-image="https://s3.amazonaws.com/stripe-uploads/acct_15kiA1EUWsmgY81Amerchant-icon-1493912370912-logo-0.png"
|
|
|
|
|
|
|
|
|
|
data-locale="auto">
|
|
|
|
|
|
|
|
|
|
<!-- style="background-image:url(https://az616578.vo.msecnd.net/files/responsive/cover/main/desktop/2016/05/09/635983505329496433385654456_concert-audience.jpg)"> -->
|
|
|
|
|
<tr >
|
|
|
|
|
<td colspan="{{ plans|length}}" align="center" class="border-bottom">
|
|
|
|
|
{% if alias %}
|
|
|
|
|
<div class="caption">{{alias.replace('-',' ') }}</div>
|
|
|
|
|
{% else %}
|
|
|
|
|
<div class="caption">{{app_name.replace('-',' ') }}</div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
<div class="small">Available Plans</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</script>
|
|
|
|
|
<input type="hidden" name="amount" value="{{item.amount|safe}}"/>
|
|
|
|
|
<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; ">
|
|
|
|
|
<div style="float:right;margin-right:4px;">
|
|
|
|
|
<div align="center">This Plan is Plan</div>
|
|
|
|
|
<div class="small" align="center">Login to Start</div>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
<div class="pricing">
|
|
|
|
|
{% for item in plans%}
|
|
|
|
|
<div class="plan">
|
|
|
|
|
<div class="title">{{ item.nickname }}</div>
|
|
|
|
|
{% for key,value in item.metadata['features'].iteritems() %}
|
|
|
|
|
<div class="feature">
|
|
|
|
|
<div class="label">{{ key }}</div>
|
|
|
|
|
{% if value == 1 %}
|
|
|
|
|
<div class="status"><i class="fa fa-check"></i></div>
|
|
|
|
|
{% else %}
|
|
|
|
|
<div class="status"><i class="fa fa-times"></i></div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{% endfor %}
|
|
|
|
|
{% if item.amount > 0 and platform != 'mobile' %}
|
|
|
|
|
<div align="right">
|
|
|
|
|
|
|
|
|
|
<form action="{{context}}/subscribe/{{app_name|safe}}" method="POST">
|
|
|
|
|
<script
|
|
|
|
|
src="https://checkout.stripe.com/checkout.js" class="stripe-button action"
|
|
|
|
|
data-key="{{apikey|safe}}"
|
|
|
|
|
data-email="{{uid|safe}}"
|
|
|
|
|
data-amount={{item.amount|safe}}
|
|
|
|
|
data-name="{{item.nickname}}"
|
|
|
|
|
data-description="{{alias }}"
|
|
|
|
|
|
|
|
|
|
data-label="Signup $ {{item.amount/100 }} / {{item.interval[:2]}}"
|
|
|
|
|
data-image="https://s3.amazonaws.com/stripe-uploads/acct_15kiA1EUWsmgY81Amerchant-icon-1493912370912-logo-0.png"
|
|
|
|
|
|
|
|
|
|
data-locale="auto">
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<input type="hidden" name="amount" value="{{item.amount|safe}}"/>
|
|
|
|
|
<input type="hidden" name="plan" value="{{item.id|safe}}"/>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
{% elif item.amount == 0 and platform != 'mobile' %}
|
|
|
|
|
<br><div align="right" style="float:right; color:#4682B4; font-weight:bold;">Login, it's Free</div>
|
|
|
|
|
{% endif%}
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
{% endif%}
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td align="center" valign="middle" class="border-top">
|
|
|
|
|
|
|
|
|
|
<div class="small">support@the-phi.com</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="small" align="center">support@the-phi.com</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|