formatting and styles

This commit is contained in:
starlord 2024-06-28 08:52:11 -07:00
parent 811cda558e
commit 95ec066e85

View file

@ -1,60 +1,107 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Crypto Portfolio</title> <title>Crypto Portfolio</title>
<style> <style>
table { table.crypto {
border-style: solid; font-family: "Lucida Console", Monaco, monospace;
border-width: 3px; border: 2px solid #4F7849;
} background-color: #EEEEEE;
width: 100%;
td, th { text-align: right;
border-style: solid; border-collapse: collapse;
border-width: 2px; }
} table.crypto td, table.crypto th {
td { border: 1px solid #4F7849;
text-align: right; padding: 2px 2px;
} }
td.left { table.crypto tbody td {
text-align: left; font-size: 16px;
} font-weight: bold;
</style> 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> </head>
<body> <body>
<table> <table class="crypto">
<tr> <thead>
<th>Token</th><th>Balance</th><th>Price</th><th>Investment</th><th>Value</th><th>Margin</th><th>Movement</th> <tr>
</tr> <th>Token</th>
%row% <th>Balance</th>
<tr> <th>Price</th>
<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> <th>Investment</th>
</tr> <th>Value</th>
</table> <th>Margin</th>
<p><i>%dts%</i></p> <th>Movement</th>
<button onclick="download_csv_file()"> Download CSV </button> </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> </body>
<script> <script>
var csvFileData = [ var csvFileData = [
%csv_data% %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) { csvFileData.forEach(function(row) {
csv += row.join(','); csv += row.join(',');
csv += "\n"; csv += "\n";
}); });
document.write(csv); document.write(csv);
var hiddenElement = document.createElement('a'); var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv); hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
hiddenElement.target = '_blank'; hiddenElement.target = '_blank';
hiddenElement.download = 'CSV_Portfolio_%dts_fln%.csv'; hiddenElement.download = 'CSV_Portfolio_%dts_fln%.csv';
hiddenElement.click(); hiddenElement.click();
} }
</script> </script>
</html> </html>