formatting and styles
This commit is contained in:
parent
811cda558e
commit
95ec066e85
1 changed files with 92 additions and 45 deletions
137
template.html
137
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>
|
||||
|
|
Loading…
Reference in a new issue