cryptfolio/template.html
2024-06-28 08:52:11 -07:00

107 lines
2.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<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 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%
];
function download_csv_file() {
var csv = 'Date,Time,Zone,Token,Balance,Price,Investment,Value,Margin,Movement\n';
csvFileData.forEach(function(row) {
csv += row.join(',');
csv += "\n";
});
document.write(csv);
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();
}
</script>
</html>