parent
bf85f3fa5c
commit
2b0209f004
@ -0,0 +1,107 @@
|
|||||||
|
|
||||||
|
img {width:48px}
|
||||||
|
|
||||||
|
.default {font-size:16px;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
.store-button {
|
||||||
|
width:auto;
|
||||||
|
padding:6px;
|
||||||
|
font-weight:bold;
|
||||||
|
border-radius:8px;
|
||||||
|
border:2px solid #4682b4;
|
||||||
|
background-color:#4682b4;
|
||||||
|
color:white;
|
||||||
|
cursor:pointer;
|
||||||
|
text-align:center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.store-button .text {color:#ffffff}
|
||||||
|
.store-button:hover {
|
||||||
|
background-color:#ffffff;
|
||||||
|
color:#4682b4;
|
||||||
|
|
||||||
|
}
|
||||||
|
.store-button:hover .text { color :#4682B4;}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
padding:4px;
|
||||||
|
cursor:pointer;
|
||||||
|
border-bottom:2px solid transparent ;
|
||||||
|
}
|
||||||
|
.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:bold ;
|
||||||
|
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) );
|
||||||
|
;
|
||||||
|
|
||||||
|
/* align-content:center; */
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: 50% auto;
|
||||||
|
grid-template-rows: 100px;
|
||||||
|
gap:2px;
|
||||||
|
align-items: center;
|
||||||
|
margin-left:25%;
|
||||||
|
margin-right:25%;
|
||||||
|
margin-bottom:2%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.header img {width:100px}
|
||||||
|
.pricing-frame {
|
||||||
|
display:grid;
|
||||||
|
|
||||||
|
margin-left:10%;
|
||||||
|
margin-right:10%;
|
||||||
|
|
||||||
|
height:70%;
|
||||||
|
align-content:center;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
bottom:10px;
|
||||||
|
position:fixed;
|
||||||
|
width: 80%;
|
||||||
|
padding:8spx;
|
||||||
|
text-align:center;
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: 10% auto 10%;
|
||||||
|
grid-gap: 2px;
|
||||||
|
}
|
||||||
|
.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;}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
.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, #4682B4, #d3d3d3); /* Chrome 10-25, Safari 5.1-6 */
|
||||||
|
background: linear-gradient(to bottom, #4682B4, #d3d3d3); /* 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, #D3D3D3); /* Chrome 10-25, Safari 5.1-6 */
|
||||||
|
background: linear-gradient(to bottom, #FFFFFF, #D3D3D3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||||
|
|
||||||
|
}
|
||||||
|
.theme-dark-ocean .fa-check {color:green; font-size:18px}
|
||||||
|
After Width: | Height: | Size: 4.3 KiB |
@ -0,0 +1,462 @@
|
|||||||
|
<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">
|
||||||
|
{% if product.images|length > 0 %}
|
||||||
|
<link rel="shortcut icon" href="{{product.images[0]}}">
|
||||||
|
{% else %}
|
||||||
|
<link rel="shortcut icon" href="{{context}}/static/img/logo-0.png">
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="{{context}}/static/css/default.css" type="text/css">
|
||||||
|
<link rel="stylesheet" href="{{context}}/static/css/borders.css" type="text/css">
|
||||||
|
<link rel="stylesheet" href="{{context}}/static/css/dialog.css" type="text/css">
|
||||||
|
<link rel="stylesheet" href="{{context}}/static/css/themes.css" type="text/css">
|
||||||
|
<link rel="stylesheet" href="{{context}}/static/css/plans.css" type="text/css">
|
||||||
|
|
||||||
|
<!-- <script src="https://kit.fontawesome.com/ab15160345.js" crossorigin="anonymous"></script> -->
|
||||||
|
<link href="{{context}}/static/css/fa/css/all.css" type="text/css" rel="stylesheet">
|
||||||
|
<script src="{{context}}/static/css/fa/js/all.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
||||||
|
<!--
|
||||||
|
<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/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>
|
||||||
|
<script type="text/javascript" src="{{ context }}/static/js/jx/ext/modal.js"></script>
|
||||||
|
<script type="text/javascript" src="{{ context }}/static/js/jx/ext/math.js"></script>
|
||||||
|
<script type="text/javascript" src="{{ context }}/static/js/jx/ext/cloud-view.js"></script>
|
||||||
|
<script type="text/javascript" src="{{context}}/static/js/payment.js"></script>
|
||||||
|
<script src="{{context}}/static/js/jsgrid/jsgrid.js"></script>
|
||||||
|
<link href="{{context}}/static/js/jsgrid/jsgrid.css" type="text/css" rel="stylesheet">
|
||||||
|
<link href="{{context}}/static/js/jsgrid/jsgrid-theme.css" type="text/css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.layout {
|
||||||
|
display:grid;
|
||||||
|
gap:2px;
|
||||||
|
grid-template-columns: 30% auto;
|
||||||
|
margin-left:20%;
|
||||||
|
margin-right:20%;
|
||||||
|
height:85%;
|
||||||
|
margin-top:5%;
|
||||||
|
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-size:18px;
|
||||||
|
font-family:sans-serif;
|
||||||
|
}
|
||||||
|
.plan img {width:100px}
|
||||||
|
.plan-info { margin:2px; padding:2px;}
|
||||||
|
|
||||||
|
.active {border-bottom:2px solid transparent}
|
||||||
|
.active:hover {border-bottom:2px solid #FF6500;}
|
||||||
|
.amount {font-family: 'Courier New', Courier, monospace;}
|
||||||
|
.transaction {
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: 120px 300px 200px auto;
|
||||||
|
gap:2px;
|
||||||
|
|
||||||
|
margin:4px;
|
||||||
|
font-size:14px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
.transaction :nth-child(2){
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow:hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.transaction :nth-child(4){text-align:center}
|
||||||
|
#payments > div:nth-child(odd){
|
||||||
|
background-color:#f3f3f3;
|
||||||
|
}
|
||||||
|
.history { height:500px; overflow:none; overflow-y:auto; scrollbar-width: thin;}
|
||||||
|
.transaction div {
|
||||||
|
padding:4px;
|
||||||
|
border-left:1px solid #cad5e0;
|
||||||
|
}
|
||||||
|
.transaction :nth-child(1){
|
||||||
|
border-color:transparent;
|
||||||
|
}
|
||||||
|
.stdout {
|
||||||
|
|
||||||
|
padding:4px;
|
||||||
|
width:99%;
|
||||||
|
|
||||||
|
overflow:hidden;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.stdout .slider {
|
||||||
|
width:299% ;
|
||||||
|
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: repeat(3,33%);
|
||||||
|
gap:1%;
|
||||||
|
align-items:top;
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
border:2px solid transparent;
|
||||||
|
background-color:#f3f3f3;
|
||||||
|
padding:8px;
|
||||||
|
outline: 0px;
|
||||||
|
color:#000000;
|
||||||
|
}
|
||||||
|
input:focus{
|
||||||
|
border-left-color: #FF6500;
|
||||||
|
}
|
||||||
|
.user-info{
|
||||||
|
|
||||||
|
display:grid;
|
||||||
|
gap:2px;
|
||||||
|
;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {border-color:maroon;}
|
||||||
|
.button {
|
||||||
|
width:auto;
|
||||||
|
padding:6px;
|
||||||
|
font-weight:bold;
|
||||||
|
border-radius:0px;
|
||||||
|
border:2px solid transparent;
|
||||||
|
background-color:#FF6500;
|
||||||
|
color:#ffffff;
|
||||||
|
|
||||||
|
cursor:pointer;
|
||||||
|
text-align:center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.button .fa-times {color:#ffffff}
|
||||||
|
.button:hover .fa-times {color:maroon}
|
||||||
|
.button .text {color:#ffffff}
|
||||||
|
.button:hover {
|
||||||
|
background-color:#ffffff;
|
||||||
|
color:#FF6500;
|
||||||
|
border-color:#FF6500
|
||||||
|
|
||||||
|
}
|
||||||
|
.button:hover .text { color :#FF6500;}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
var me = {}
|
||||||
|
me.plan = {}
|
||||||
|
me.plan.cancel = function(){
|
||||||
|
var httpclient = HttpClient.instance()
|
||||||
|
|
||||||
|
var url = "{{context}}/{{product.name}}/cancel"
|
||||||
|
httpclient.post(url,function(x){
|
||||||
|
//alert(x.responseText)
|
||||||
|
//if(x.responseText.match(/1/)){
|
||||||
|
window.location.reload()
|
||||||
|
//}else{
|
||||||
|
//
|
||||||
|
// Provide an error message
|
||||||
|
//}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
me.logout = function(){
|
||||||
|
//var url = "{{context}}/me/logout"
|
||||||
|
var url = ([sessionStorage.store_context,"me/logout"]).join("/")
|
||||||
|
var http = HttpClient.instance()
|
||||||
|
http.post(url,function(x){
|
||||||
|
//window.location = "{{context}}/{{product.name}}/plans"
|
||||||
|
window.location = ([sessionStorage.store_context, sessionStorage.product_name,"plans"]).join("/")
|
||||||
|
})
|
||||||
|
}
|
||||||
|
me.plan.upgrade = function(){
|
||||||
|
var url = window.location.href.replace(/me$/,'{{product.name}}/plans')
|
||||||
|
window.open(url,'_self')
|
||||||
|
//jx.modal.show(url)
|
||||||
|
}
|
||||||
|
|
||||||
|
me.update_card = function(){
|
||||||
|
var inputs = $('input')
|
||||||
|
var values = jx.utils.patterns.visitor(inputs,function(item){
|
||||||
|
return payment.validate({target:item})
|
||||||
|
})
|
||||||
|
|
||||||
|
if (jx.math.sum(values) != inputs.length){
|
||||||
|
;
|
||||||
|
}else{
|
||||||
|
payment.dialog('{{product.metadata.label}}','Updating Card Information','PROGRESS')
|
||||||
|
var url = '{{context}}/me/card'
|
||||||
|
var body = JSON.parse(sessionStorage.customer).info
|
||||||
|
|
||||||
|
var http = HttpClient.instance()
|
||||||
|
http.setData(body,"application/json")
|
||||||
|
|
||||||
|
http.post(url,function(x){
|
||||||
|
if(x.responseText="1"){
|
||||||
|
window.open("{{context}}/me",'_self')
|
||||||
|
}else{
|
||||||
|
jx.modal.hide()
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var plot = function(){
|
||||||
|
var data = {{user.usage|tojson}}
|
||||||
|
var value = parseFloat(100* (data.used / data.size).toFixed(2))
|
||||||
|
var label = 'Space Used'
|
||||||
|
var options = {
|
||||||
|
series: [value],
|
||||||
|
chart: {
|
||||||
|
|
||||||
|
type: 'radialBar',
|
||||||
|
},
|
||||||
|
plotOptions: { radialBar: {
|
||||||
|
hollow: {
|
||||||
|
size: '70%',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labels: [label]
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
var chart = new ApexCharts($('.chart')[0], options);
|
||||||
|
chart.render();
|
||||||
|
}
|
||||||
|
var logs = function(){
|
||||||
|
var options = {}
|
||||||
|
var data = {{payments|tojson}}
|
||||||
|
var m ={}
|
||||||
|
m.date= function(value) { var date = new Date(value)
|
||||||
|
var div = jx.dom.get.instance('DIV')
|
||||||
|
_months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
|
||||||
|
div.innerHTML = ([date.getFullYear(),_months[date.getMonth()],date.getDate()]).join('-')
|
||||||
|
return div
|
||||||
|
}
|
||||||
|
m.amount = function(value){
|
||||||
|
var div = jx.dom.get.instance('DIV')
|
||||||
|
div.align='right'
|
||||||
|
|
||||||
|
var _amount = parseFloat((value/100).toFixed(2))
|
||||||
|
div.innerHTML = _amount == 0? '0.00':_amount
|
||||||
|
return div
|
||||||
|
}
|
||||||
|
m.status = function(value){
|
||||||
|
var _name = value.match(/paid/i)? 'fas fa-check': 'fas fa-times'
|
||||||
|
var icon = jx.dom.get.instance('I')
|
||||||
|
icon.className = _name
|
||||||
|
var div = jx.dom.get.instance('DIV')
|
||||||
|
|
||||||
|
div.append(icon)
|
||||||
|
return div
|
||||||
|
}
|
||||||
|
m.default = function(value){
|
||||||
|
var div = jx.dom.get.instance('DIV')
|
||||||
|
div.innerHTML = value
|
||||||
|
return div
|
||||||
|
}
|
||||||
|
jx.utils.patterns.visitor(data,function(item){
|
||||||
|
frame = jx.dom.get.instance('DIV')
|
||||||
|
jx.utils.patterns.visitor(['date','label','amount','status'],function(key){
|
||||||
|
var value = item[key]
|
||||||
|
|
||||||
|
var div = m[key] == null ? m.default(value) : m[key](value)
|
||||||
|
frame.append(div)
|
||||||
|
})
|
||||||
|
if (item.label.match(/{{product.name}}/i) == null){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
frame.className = 'transaction active'
|
||||||
|
frame.data = item
|
||||||
|
frame.onclick = function(){
|
||||||
|
window.open(this.data.hosted,"invoice")
|
||||||
|
//jx.modal.show({url:this.data.pdf})
|
||||||
|
}
|
||||||
|
jx.dom.append('payments',frame)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
$(document).ready(function(){
|
||||||
|
sessionStorage.store_context = "{{context}}"
|
||||||
|
sessionStorage.customer = JSON.stringify({info:{}})
|
||||||
|
var date = new Date()
|
||||||
|
$('.year').html(date.getFullYear())
|
||||||
|
plot()
|
||||||
|
logs()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<title style="text-transform: capitalize">Store Front</title>
|
||||||
|
<body>
|
||||||
|
<div class="layout">
|
||||||
|
<div class="user">
|
||||||
|
<div class="bold name">{{user.uii}}</div>
|
||||||
|
<div class="email small">{{user.uid}}</div>
|
||||||
|
<p>
|
||||||
|
<div class="border-round border">
|
||||||
|
<div class="active bold" onclick="$('.slider').animate({marginLeft:0})">
|
||||||
|
<i class="far fa-folder-open" style="color:green"></i>
|
||||||
|
Manage Plan
|
||||||
|
</div>
|
||||||
|
<div class="active bold" onclick="$('.slider').animate({marginLeft:'-101%'})">
|
||||||
|
<i class="fas fa-history" style="color:#4682B4;"></i>
|
||||||
|
Billing History
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="active bold" onclick="$('.slider').animate({marginLeft:'-201%'})">
|
||||||
|
<i class="fas fa-credit-card"></i>
|
||||||
|
Payment Method</div>
|
||||||
|
|
||||||
|
<div class="active bold" style="color:maroon" onclick="me.logout()">
|
||||||
|
<i class="fas fa-times" ></i>
|
||||||
|
Logout</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<div class="cloud border-round border">
|
||||||
|
<div class="bold" align="center" style="text-transform: capitalize;">{{user.sid.replace('-',' ')}}</div>
|
||||||
|
<div class="chart"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display:grid; grid-template-rows:64px auto; gap:22px">
|
||||||
|
<div align="center" >
|
||||||
|
<div class="caption">
|
||||||
|
{% if product.metadata.label %}
|
||||||
|
{{product.metadata.label}}
|
||||||
|
{% else %}
|
||||||
|
{{product.name}}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div class="small border-top">Store Front Management</div>
|
||||||
|
</div>
|
||||||
|
<div class="stdout">
|
||||||
|
<div class="slider">
|
||||||
|
<div class="plan-management">
|
||||||
|
<!-- PANE 0: Managing Plan -->
|
||||||
|
<div class="border-bottom" style="display:grid; grid-template-columns:100px auto; gap:2px; align-items:center">
|
||||||
|
<img src="{{product.images[0]}}" style="height:100px; width:auto"/>
|
||||||
|
<div>
|
||||||
|
<div class="bold">Current Plan</div>
|
||||||
|
{% if plan %}
|
||||||
|
<div class="caption">{{plan.nickname}}</div>
|
||||||
|
{% else %}
|
||||||
|
<div><i class="fas fa-times"></i> No Subscription Available</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="" style="margin-left:32px; margin-top:32px; display:grid; grid-template-columns: auto auto; gap:2px; align-items:center" align="left">
|
||||||
|
{% if plan %}
|
||||||
|
<div class=""> $ <span class="bold amount">{{'%0.2f'| format(plan.amount/100|float)}}</span> per <span class="" style="text-transform: capitalize;">{{plan.recurring.interval[:]}}</span></div>
|
||||||
|
{% else %}
|
||||||
|
<div></div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<p></p>
|
||||||
|
{% if plan %}
|
||||||
|
<div style="margin-left:50%">
|
||||||
|
<div class="small" align="center">Plan</div>
|
||||||
|
<div style="display:grid; grid-template-columns:50% 50%; gap:4px;">
|
||||||
|
<div class="button" align="center" onclick="me.plan.cancel()">
|
||||||
|
<i class="fas fa-times"></i> Cancel
|
||||||
|
</div>
|
||||||
|
<div class="button" align="center" onclick="me.plan.upgrade()">
|
||||||
|
<i class="fas fa-upload"></i> Upgrade
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<div style="margin-left:75%">
|
||||||
|
<div class="button" onclick="me.plan.upgrade()" style="margin:4px">
|
||||||
|
<i class="fas fa-user-plus"></i>
|
||||||
|
Signup
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<p>
|
||||||
|
<ul class="small" style="margin-top:15%; color:maroon; align-items:flex-end">
|
||||||
|
<li type="square">Cancellation of plans will be prorated</li>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="billing-history">
|
||||||
|
<!-- PANE 1: BILLING HISTORY -->
|
||||||
|
<div class="bold">Billing History</div><p></p>
|
||||||
|
<div class="border" style="padding:0px">
|
||||||
|
<div class="transaction bold" style="">
|
||||||
|
<div style="border-color:transparent" align="center">Date</div>
|
||||||
|
<div align="center">label</div>
|
||||||
|
<div align="center">Amount</div>
|
||||||
|
<div align="center">Status</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="history border" style="border-top-color:transparent; padding:0px;">
|
||||||
|
<div class="history" style="height:98%">
|
||||||
|
<div id="payments"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<!-- PANE 2: Card/Payment Info-->
|
||||||
|
<div class="bold">Payment</div> <p></p>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div class="user-info">
|
||||||
|
<input type="text" class="email" value="{{user.uid|safe}}" disabled data-pattern="^[-!#-'*+\/-9=?^-~]+(?:\.[-!#-'*+\/-9=?^-~]+)*@[-!#-'*+\/-9=?^-~]+(?:\.[-!#-'*+\/-9=?^-~]+)+$" onkeyup="payment.validate(event)"/>
|
||||||
|
<input type="text" class="name" placeholder="Name on Card" value="{{user.uii|safe}}" data-pattern="^[a-z,A-Z,-]{3,}\x20{1,}[a-z,A-Z,-]{3,}$" onkeyup="payment.validate(event)"/>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<div class="card-info">
|
||||||
|
<div class="number" style="margin-top:2px; margin-bottom:2px; display:grid; gap:2px; grid-template-columns:64px auto;">
|
||||||
|
{% if cards %}
|
||||||
|
<div class="" style="background:#f3f3f3; display:grid; align-items:center; justify-items:center">
|
||||||
|
<img id="pay-icon" src="{{context}}/static/img/cards/{{cards[0].type.lower().replace(' ','-')}}.svg" style="width:32px; vertical-align:middle"/>
|
||||||
|
</div>
|
||||||
|
<input type="text" style="text-align:right" placeholder="Card Number" class="number" data-pattern="card" onkeyup="payment.validate(event)" value=" *** {{cards[0].number}}"/>
|
||||||
|
{% else %}
|
||||||
|
<div class="" style="background:#f3f3f3; display:grid; align-items:center; justify-items:center">
|
||||||
|
<img id="pay-icon" src="" style="width:32px; vertical-align:middle"/>
|
||||||
|
</div>
|
||||||
|
<input type="text" style="text-align:right" placeholder="Card Number" class="number" data-pattern="card" onkeyup="payment.validate(event)" value=""/>
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="expire" style="display:grid; grid-template-columns:50% auto; gap:2px;">
|
||||||
|
<input type="text" placeholder="MM/YYYY" class="exp" data-pattern="^(0[1-9]|1[0-2])/20[2-9][0-9]$" onkeyup="payment.validate(event)"/>
|
||||||
|
<input type="text" placeholder="CVC" class="cvc" data-pattern="^[0-9]{3,}$" onkeyup="payment.validate(event)"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p></p>
|
||||||
|
<div style="margin-left:75%;">
|
||||||
|
<div class="button" align="center" style="margin:4px;" onclick="me.update_card()">Update</div>
|
||||||
|
</div>
|
||||||
|
<p></p>
|
||||||
|
<!--
|
||||||
|
Add something to signal cards on file only keep one not more
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="small border-top" style="padding:4px; margin-top:4px;">
|
||||||
|
|
||||||
|
<div align="center">ALL Rights Reserved © <span class="year"></span> The Phi Technology LLC</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
Loading…
Reference in new issue