You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
229 lines
7.5 KiB
HTML
229 lines
7.5 KiB
HTML
<meta charset="UTF-8">
|
|
<meta http-equiv="cache-control" content="no-cache">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
|
|
<link rel="shortcut icon" href="{{context}}/static/img/logo-0.png">
|
|
<link href="{{ context }}/static/css/fa/css/font-awesome.css" rel="stylesheet" type="text/css">
|
|
<!--
|
|
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
|
|
<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/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>
|
|
img {width:48px}
|
|
body{
|
|
font-family:sans-serif;
|
|
font-size:14px;
|
|
font-weight:lighter;
|
|
}
|
|
.bold { font-weight:bold}
|
|
.caption {
|
|
font-size:28px; font-weight:lighter ;
|
|
font-family:sans-serif;
|
|
text-transform:capitalize;
|
|
}
|
|
.medium-caption {
|
|
font-size:18px;
|
|
font-weight:lighter;
|
|
font-family:sans-serif ;
|
|
text-transform:capitalize;
|
|
}
|
|
.plan {
|
|
padding:4px;
|
|
margin:4px;
|
|
border-radius: 4px;
|
|
border:1px solid #CAD5E0
|
|
}
|
|
.pricing {
|
|
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 .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}
|
|
.border-bottom{ border-bottom:1px solid #CAD5E0}
|
|
.border-right{ border-right:1px solid #CAD5E0}
|
|
.border-left{ border-left:1px solid #CAD5E0}
|
|
.left { float:left}
|
|
.small { font-family:verdana; font-size:11px;}
|
|
.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}
|
|
table { border:1px solid #CAD5E0;
|
|
border-radius:8px;
|
|
-webkit-border-radius:8px;
|
|
padding:4px;
|
|
|
|
margin:4px;
|
|
}
|
|
.action {
|
|
cursor:pointer;
|
|
padding:4px;
|
|
padding-left:10px;
|
|
padding-right:10px;
|
|
border-radius:4px;
|
|
-webkit-border-radius:4px;
|
|
-moz-border-radius:4px;
|
|
font-weight:bold;
|
|
color:#4682b4;
|
|
|
|
}
|
|
.action:hover { background-color:#4682b4; color:white}
|
|
tr {font-family:sans-serif; font-size:14px;}
|
|
td {padding:4px; font-weight:lighter; padding:4px;}
|
|
.gradient{
|
|
background-image: -ms-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
|
|
background-image: -moz-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
|
|
background-image: -o-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
|
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(-120, #008080), color-stop(50, #FFFFFF), color-stop(120, #005757));
|
|
background-image: -webkit-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
|
|
background-image: linear-gradient(to bottom, #008080 -120%, #FFFFFF 50%, #005757 120%);
|
|
}
|
|
@media only screen and (min-device-width: 320px){
|
|
table {width:99%}
|
|
img {width:28px}
|
|
.medium-caption {font-size:14px}
|
|
body {font-size:12px;}
|
|
.height-48{height:40px}
|
|
.width-50{width:47%; padding:4px;}
|
|
.width-25{width:24%; padding:4px}
|
|
.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}
|
|
.plan .feature .status {font-size:16px; text-align: right}
|
|
.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}
|
|
table {width:70%; margin-left:20%}
|
|
.medium-caption {font-size:18px}
|
|
.width-50{width:50%; padding:4px;}
|
|
.width-25{width:25%; padding:4px}
|
|
.height-48{height:48px;}
|
|
.pricing {
|
|
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 .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}
|
|
|
|
}
|
|
</style>
|
|
<script>
|
|
|
|
</script>
|
|
<body >
|
|
<div>
|
|
{{active_plan}}
|
|
</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>
|
|
|
|
|
|
</td>
|
|
<td align="right" class="small" valign="bottom">
|
|
{{uid}}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<table align="center">
|
|
|
|
<!-- 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>
|
|
|
|
<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>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td align="center" valign="middle" class="border-top">
|
|
|
|
<div class="small">support@the-phi.com</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</body>
|