cloud
/
store
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bug fix with layout, hopefully more adaptable

Browse Source
legacy
Steve L. Nyemba 6 years ago
parent b41b1556be
commit f4431d1b6f
2 changed files with 96 additions and 99 deletions
Show Stats Download Patch File Download Diff File

3
requirements.txt
Unescape View File

@ -2,6 +2,7 @@ appdirs==1.4.3
click==6.7
couchdbkit==0.6.5
Flask==0.12.1
Flask-Cors==3.0.6
http-parser==0.8.3
itsdangerous==0.24
Jinja2==2.9.6
@ -14,5 +15,5 @@ requests==2.13.0
restkit==4.2.2
six==1.10.0
socketpool==0.5.3
stripe==1.55.0
stripe==1.82.1
Werkzeug==0.12.1

190
src/api/templates/subscribe.html
Unescape View File

@ -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>
<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 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>
<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>
{% 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="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>
</div>
</div>
</div>
{% endif%}
</div>
{% endfor %}
</td>
</tr>
<tr>
<td align="center" valign="middle" class="border-top">
</div>
<div class="small">support@the-phi.com</div>
</td>
</tr>
</table>
</div>
<div class="small" align="center">support@the-phi.com</div>
</body>

Write Preview
Loading…
Cancel
Save