diff --git a/src/api/static/css/default.css b/src/api/static/css/default.css index 87b805b..6d4e3e1 100644 --- a/src/api/static/css/default.css +++ b/src/api/static/css/default.css @@ -5,7 +5,7 @@ body { } -.small {font-size:12px; color:gray; font-weight:lighter} +.small {font-size:12px; font-weight:lighter} .bold {font-weight:bold} .black {color:#000000} .fa-times {color:maroon} @@ -52,8 +52,27 @@ body { 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:#FFFFFF; + background-color:#4682B4; + border:2px solid #CAD5E0; + + +} +.action:hover .small {color:#4682B4} +.action:hover { background-color:#FFFFFF; color:#4682B4 ; + border:2px solid #4682B4; +} -.ofooter { +.footer { display:grid; grid-template-columns: 115px auto 115px; gap:2px; diff --git a/src/api/static/css/plans.css b/src/api/static/css/plans.css new file mode 100644 index 0000000..8245042 --- /dev/null +++ b/src/api/static/css/plans.css @@ -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;} \ No newline at end of file diff --git a/src/api/static/css/themes.css b/src/api/static/css/themes.css new file mode 100644 index 0000000..c972c44 --- /dev/null +++ b/src/api/static/css/themes.css @@ -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} diff --git a/src/api/static/img/cards/american-express.svg b/src/api/static/img/cards/american-express.svg new file mode 100644 index 0000000..9cc9877 --- /dev/null +++ b/src/api/static/img/cards/american-express.svg @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/src/api/templates/me.html b/src/api/templates/me.html new file mode 100644 index 0000000..55c3740 --- /dev/null +++ b/src/api/templates/me.html @@ -0,0 +1,462 @@ + + + +{% if product.images|length > 0 %} + +{% else %} + +{% endif %} + + + + + + + + + + + + + + + + + + + + + + + + + + +Store Front + +
+
+
{{user.uii}}
+ +

+

+
+ + Manage Plan +
+
+ + Billing History +
+ +
+ + Payment Method
+ +
+ + Logout
+
+ +

+
+
{{user.sid.replace('-',' ')}}
+
+
+
+
+
+
+ {% if product.metadata.label %} + {{product.metadata.label}} + {% else %} + {{product.name}} + {% endif %} +
+
Store Front Management
+
+
+
+
+ +
+ +
+
Current Plan
+ {% if plan %} +
{{plan.nickname}}
+ {% else %} +
No Subscription Available
+ {% endif %} + +
+ +
+
+ {% if plan %} +
$ {{'%0.2f'| format(plan.amount/100|float)}} per {{plan.recurring.interval[:]}}
+ {% else %} +
+ {% endif %} + +
+

+ {% if plan %} +
+
Plan
+
+
+ Cancel +
+
+ Upgrade +
+ +
+
+ {% else %} +
+
+ + Signup +
+
+ {% endif %} +

+

    +
  • Cancellation of plans will be prorated
    • +
+

+ +
+
+ +
Billing History

+
+
+
Date
+
label
+
Amount
+
Status
+ +
+
+
+
+
+
+ + +
+
+
+ +
Payment

+
+ + +
+ +
+
+ {% if cards %} +
+ +
+ + {% else %} +
+ +
+ + + {% endif %} +
+ +
+ + +
+ +
+
+

+
+
Update
+
+

+ + + +
+
+ +
+
+
+
+ +
ALL Rights Reserved © The Phi Technology LLC
+ +
+ \ No newline at end of file