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 click==6.7
couchdbkit==0.6.5 couchdbkit==0.6.5
Flask==0.12.1 Flask==0.12.1
Flask-Cors==3.0.6
http-parser==0.8.3 http-parser==0.8.3
itsdangerous==0.24 itsdangerous==0.24
Jinja2==2.9.6 Jinja2==2.9.6
@ -14,5 +15,5 @@ requests==2.13.0
restkit==4.2.2 restkit==4.2.2
six==1.10.0 six==1.10.0
socketpool==0.5.3 socketpool==0.5.3
stripe==1.55.0 stripe==1.82.1
Werkzeug==0.12.1 Werkzeug==0.12.1

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

@ -20,6 +20,7 @@
font-size:14px; font-size:14px;
font-weight:lighter; font-weight:lighter;
} }
.bold { font-weight:bold} .bold { font-weight:bold}
.caption { .caption {
font-size:28px; font-weight:lighter ; font-size:28px; font-weight:lighter ;
@ -43,20 +44,21 @@
grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) ) 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: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 {display:grid; grid-template-columns: 60% 40%; grid-gap:2px; margin:2px;}
.plan .feature .label {text-transform: uppercase; grid-column:1} .plan .feature .label {text-transform: uppercase; grid-column:1; font-size:14px;}
.plan .feature .status {font-size:20px; text-align: right} .plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
.border-bottom{ border-bottom:1px solid #CAD5E0} .border-bottom{ border-bottom:1px solid #CAD5E0}
.border-right{ border-right:1px solid #CAD5E0} .border-right{ border-right:1px solid #CAD5E0}
.border-left{ border-left:1px solid #CAD5E0} .border-left{ border-left:1px solid #CAD5E0}
.border-top{ border-top:1px solid #CAD5E0}
.left { float:left} .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} .hidden {display:none}
.width-50{width:50%; padding:4px;} .width-50{width:50%; padding:4px;}
.width-25{width:25%; padding:4px} .width-25{width:25%; padding:4px}
.height-48{height:48px;} .height-48{height:48px;}
.fa-times {color:maroon} .fa-times {color:maroon; font-size:18px;}
.fa-check {color:green} .fa-check {color:green; font-size:18px;}
table { border:1px solid #CAD5E0; table { border:1px solid #CAD5E0;
border-radius:8px; border-radius:8px;
-webkit-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 .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 {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 .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} .header{display:none}
.caption {font-size:20px} .caption {font-size:20px}
} }
@media only screen and (min-device-width: 768px){ @media only screen and (min-device-width: 768px){
body {font-size:12px} 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%} table {width:70%; margin-left:20%}
.medium-caption {font-size:18px} .medium-caption {font-size:18px}
.width-50{width:50%; padding:4px;} .width-50{width:50%; padding:4px;}
@ -119,66 +130,53 @@
display:grid; display:grid;
grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) ) 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 {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px}
.plan .feature .label {text-transform: uppercase; grid-column:1} .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> </style>
<script> <script>
</script> </script>
<body > <body >
<div class="header">
<div class="logo">
<div> <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"> <img src="{{context}}/static/img/logo-0.png" align="left" style="margin:4px">
<div style="padding:8px" > </div>
<div>
<div class="caption">The Phi Technology</div> <div class="caption">The Phi Technology</div>
<div class="small" style="text-transform:capitalize">{{ alias }}</div> <div class="small">{{alias}}</div>
</div> </div>
</div> </div>
</div>
<div align="center" class="border-top" style="padding:8px">
</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 %} {% if alias %}
<div class="caption">{{alias.replace('-',' ') }}</div> <div class="caption">{{alias.replace('-',' ') }}</div>
{% else %} {% else %}
<div class="caption">{{app_name.replace('-',' ') }}</div> <div class="caption">{{app_name.replace('-',' ') }}</div>
{% endif %} {% endif %}
<div class="small">Available Plans</div> <div class="small">Available Plans</div>
</td>
</tr>
<tr> </div>
<td> <div >
<div class="pricing"> <div class="pricing">
{% for item in plans%} {% for item in plans%}
<div class="plan"> <div class="plan">
<div class="title">{{ item.nickname }}</div> <div class="title">{{ item.nickname }}</div>
<br>
{% for key,value in item.metadata['features'].iteritems() %} {% for key,value in item.metadata['features'].iteritems() %}
<div class="feature"> <div class="feature">
<div class="label">{{ key }}</div> <div class="label">{{ key }}</div>
{% if value == 1 %} {% if value == True %}
<div class="status"><i class="fa fa-check"></i></div> <div class="status"><i class="fa fa-check"></i></div>
{% else %} {% elif value == False %}
<div class="status"><i class="fa fa-times"></i></div> <div class="status"><i class="fa fa-times"></i></div>
{%else %}
<div class="status">{{value}}</div>
{% endif %} {% endif %}
</div> </div>
@ -206,7 +204,13 @@
</form> </form>
</div> </div>
{% elif item.amount == 0 and platform != 'mobile' %} {% elif item.amount == 0 and platform != 'mobile' %}
<br><div align="right" style="float:right; color:#4682B4; font-weight:bold;">Login, it's Free</div> <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>
{% endif%} {% endif%}
</div> </div>
@ -214,15 +218,7 @@
</div> </div>
</div>
</td> <div class="small" align="center">support@the-phi.com</div>
</tr>
<tr>
<td align="center" valign="middle" class="border-top">
<div class="small">support@the-phi.com</div>
</td>
</tr>
</table>
</body> </body>

Write Preview
Loading…
Cancel
Save