From 95ec066e853d98a87c687d6277f7bfa20e6c4b25 Mon Sep 17 00:00:00 2001
From: starlord <starlord@starlord.zip>
Date: Fri, 28 Jun 2024 08:52:11 -0700
Subject: [PATCH] formatting and styles

---
 template.html | 137 +++++++++++++++++++++++++++++++++-----------------
 1 file changed, 92 insertions(+), 45 deletions(-)
diff --git a/template.html b/template.html
index a8fbb5c..6c62755 100644
--- a/template.html
+++ b/template.html
@@ -1,60 +1,107 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Crypto Portfolio</title>
-    <style>
-        table {
-            border-style: solid;
-            border-width: 3px;
-        }
-
-        td, th {
-            border-style: solid;
-            border-width: 2px;
-        }
-        td {
-            text-align: right;
-        }
-        td.left {
-            text-align: left;
-        }
-    </style>
+	<title>Crypto Portfolio</title>
+	<style>
+		table.crypto {
+			font-family: "Lucida Console", Monaco, monospace;
+			border: 2px solid #4F7849;
+			background-color: #EEEEEE;
+			width: 100%;
+			text-align: right;
+			border-collapse: collapse;
+		}
+		table.crypto td, table.crypto th {
+			border: 1px solid #4F7849;
+			padding: 2px 2px;
+		}
+		table.crypto tbody td {
+			font-size: 16px;
+			font-weight: bold;
+			color: #4F7849;
+		}
+		table.crypto tr:nth-child(even) {
+			background: #CEE0CC;
+		}
+		table.crypto thead {
+			background: #4F7849;
+		}
+		table.crypto thead th {
+			font-size: 18px;
+			color: #FFFFFF;
+			text-align: center;
+		}
+		table.crypto tfoot {
+			font-size: 20px;
+			font-weight: bold;
+			color: #FFFFFF;
+			background: #4F7849;
+			background: -moz-linear-gradient(top, #7b9a76 0%, #60855b 66%, #4F7849 100%);
+			background: -webkit-linear-gradient(top, #7b9a76 0%, #60855b 66%, #4F7849 100%);
+			background: linear-gradient(to bottom, #7b9a76 0%, #60855b 66%, #4F7849 100%);
+			border-top: 4px solid #444444;
+		}
+		table.crypto tfoot td {
+			font-size: 20px;
+		}
+		td.left {
+			text-align: left;
+		}
+	</style>
 </head>
 <body>
-    <table>
-        <tr>
-            <th>Token</th><th>Balance</th><th>Price</th><th>Investment</th><th>Value</th><th>Margin</th><th>Movement</th>
-        </tr>
-        %row%
-        <tr>
-            <td class="left"><b>Total</b></td><td></td><td></td><td><b>%inv%</b></td><td><b>%val%</b></td><td><b>%mar%</b></td><td><b>%mov%</b></td>
-        </tr>
-    </table>
-    <p><i>%dts%</i></p>
-    <button onclick="download_csv_file()"> Download CSV </button>
+	<table class="crypto">
+		<thead>
+			<tr>
+				<th>Token</th>
+				<th>Balance</th>
+				<th>Price</th>
+				<th>Investment</th>
+				<th>Value</th>
+				<th>Margin</th>
+				<th>Movement</th>
+			</tr>
+		</thead>
+		<tbody>
+			%row%
+		</tbody>
+		<tfoot>
+			<tr>
+				<td class="left">Total</td>
+				<td></td>
+				<td></td>
+				<td>%inv%</td>
+				<td>%val%</td>
+				<td>%mar%</td>
+				<td>%mov%</td>
+			</tr>
+		</tfoot>
+	</table>
+	<p><i>%dts%</i></p>
+	<button onclick="download_csv_file()"> Download CSV </button>
 </body>
 <script>
-    var csvFileData = [
-        %csv_data%
-    ];
+	var csvFileData = [
+		%csv_data%
+	];
 
-    function download_csv_file() {
+	function download_csv_file() {
 
-        var csv = 'Date,Time,Zone,Token,Balance,Price,Investment,Value,Margin,Movement\n';
+		var csv = 'Date,Time,Zone,Token,Balance,Price,Investment,Value,Margin,Movement\n';
 
-        csvFileData.forEach(function(row) {
-            csv += row.join(',');
-            csv += "\n";
-        });
+		csvFileData.forEach(function(row) {
+			csv += row.join(',');
+			csv += "\n";
+		});
 
-        document.write(csv);
+		document.write(csv);
 
-        var hiddenElement = document.createElement('a');
-        hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
-        hiddenElement.target = '_blank';
+		var hiddenElement = document.createElement('a');
+		hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
+		hiddenElement.target = '_blank';
 
-        hiddenElement.download = 'CSV_Portfolio_%dts_fln%.csv';
-        hiddenElement.click();
-    }
+		hiddenElement.download = 'CSV_Portfolio_%dts_fln%.csv';
+		hiddenElement.click();
+	}
 </script>
 </html>
