154 lines
4.8 KiB
HTML
154 lines
4.8 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, intitial-scale=1">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
|
<title>{% block title %}{% endblock %} - Stonks</title>
|
|
<style>
|
|
body {
|
|
background: #f5f7fb;
|
|
}
|
|
|
|
.page-shell {
|
|
padding-top: 5.5rem;
|
|
padding-bottom: 3rem;
|
|
}
|
|
|
|
.section-panel {
|
|
background: #ffffff;
|
|
border: 1px solid #d8e0ea;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: #102a43;
|
|
}
|
|
|
|
.metric-label {
|
|
color: #52606d;
|
|
font-size: 0.95rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.chart-frame {
|
|
width: 100%;
|
|
height: 280px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
|
|
border: 1px solid #d8e0ea;
|
|
padding: 1rem 1rem 0.75rem;
|
|
}
|
|
|
|
.chart-svg {
|
|
width: 100%;
|
|
height: 220px;
|
|
display: block;
|
|
}
|
|
|
|
.chart-line {
|
|
fill: none;
|
|
stroke: #2f6fed;
|
|
stroke-width: 3;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.chart-baseline {
|
|
stroke: #cbd2d9;
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.chart-point {
|
|
fill: #2f6fed;
|
|
stroke: #ffffff;
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.chart-bar {
|
|
fill: #1f9d55;
|
|
}
|
|
|
|
.chart-bar:hover {
|
|
fill: #16803d;
|
|
}
|
|
|
|
.chart-axis {
|
|
color: #52606d;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.chart-axis-top,
|
|
.chart-axis-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.chart-axis-top {
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.chart-axis-bottom {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.range-form {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.range-select {
|
|
width: auto;
|
|
min-width: 90px;
|
|
}
|
|
|
|
.timeline-list {
|
|
max-height: 280px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.timeline-list .list-group-item {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>
|
|
|
|
<div>
|
|
<nav class="navbar fixed-top navbar-expand-lg bg-body-tertiary">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="/">Stonks</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="/">Overview</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="container page-shell">
|
|
{% block content %}
|
|
{% endblock %}
|
|
</div>
|
|
</body>
|
|
</html>
|