updated display for signup form

src/api/templates/subscribe.html

@@ -60,6 +60,14 @@
 	.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%}
 		.medium-caption {font-size:14px}
@@ -86,7 +94,7 @@
 <div id="grid">
 	<table align="center" style="border-color:transparent">
 		<tr>
-			<td style="width:50%">
+			<td style="width:60%">
 				<div align="left" class="default"> 
 					<img src="{{context}}/static/img/logo-0.png" style="width:48px; margin:4px" class="left" style="margin:4px"> 
 					<div style="padding:8px">The Phi Technology
@@ -103,7 +111,9 @@
 			</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)">
+	<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">
 				<div class="caption">{{app_name.replace('-',' ') }}</div>
@@ -116,6 +126,9 @@
 				{% for item in plans%}
 					<div class="left width-50 height-48 border-right border-bottom" style="margin:4px">
 						<div class="bold medium-caption">{{ item.metadata.info|safe }}</div>
+						{% if 'note' in item.metadata %}
+							<div class="small" style="text-transform:capitalize; color:gray">{{item.metadata.note|safe}}</div>
+						{% endif %}
 						
 					</div>
 					<div class="left width-25 height-48 border-bottom" style="margin:4px">
@@ -175,4 +188,4 @@
 	<br>
 	
 </div>
-</body>
+</body>