pkhamre/reddit_stock_analyzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Major frontend overhaul. Added tailwindcss.

Browse Source
This commit is contained in:
Pål-Kristian Hamre
2025-07-30 23:51:33 +02:00
parent ff0f528d36
commit 3beadf57a3
12 changed files with 3096 additions and 694 deletions
Download Patch File Download Diff File Expand all files Collapse all files

594
templates/dashboard_base.html
View File

@@ -7,540 +7,100 @@
<title>{% block title %}RSTAT Dashboard{% endblock %}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
/* This sets the custom font as the default for the page */
body {
margin: 0;
padding: 2rem;
font-family: 'Inter', sans-serif;
background: #1a1a1a;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
.navbar {
width: 100%;
max-width: 1200px;
background-color: rgba(45, 55, 72, 0.5);
padding: 1rem 2rem;
border-radius: 12px;
margin-bottom: 2rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
.navbar a {
color: #cbd5e0;
text-decoration: none;
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 6px;
transition: background-color 0.2s, color 0.2s;
}
.navbar a.active,
.navbar a:hover {
background-color: #4a5568;
color: #ffffff;
}
.view-switcher {
margin-left: auto;
display: flex;
gap: 0.5rem;
}
.dropdown {
position: relative;
/* Establishes a positioning context for the menu */
display: inline-block;
}
.dropdown {
position: relative;
display: inline-block;
/* Remove the padding that was causing the misalignment */
/* padding-bottom: 0.5rem; */
}
.dropdown-button {
color: #cbd5e0;
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
display: block;
/* Ensures it behaves predictably with padding */
}
.dropdown-button.active,
.dropdown:hover .dropdown-button {
background-color: #4a5568;
color: #ffffff;
}
.dropdown-menu {
visibility: hidden;
opacity: 0;
position: absolute;
background-color: #2d3748;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
z-index: 1;
border-radius: 8px;
padding: 0.5rem 0;
/* Use 'top: 100%' to position it right below the container, plus a small gap */
top: calc(100% + 0.25rem);
left: 0;
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.dropdown-menu a {
color: #e2e8f0;
padding: 0.75rem 1.5rem;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu a:hover {
background-color: #4a5568;
}
.dropdown:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
.image-container {
width: 750px;
background: linear-gradient(145deg, #2d3748, #1a202c);
color: #ffffff;
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
text-align: center;
}
header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
}
.header-action {
display: flex;
align-items: center;
gap: 1rem;
}
.header-action .icon-link svg {
color: #a0aec0;
transition: color 0.2s;
}
.header-action .icon-link:hover svg {
color: #ffffff;
}
.title-block {
text-align: left;
}
.title-block h1 {
font-size: 2.5rem;
font-weight: 800;
margin: 0;
line-height: 1;
}
.title-block h2 {
font-size: 1.25rem;
font-weight: 600;
margin: 0.5rem 0 0;
color: #a0aec0;
}
.date {
font-size: 1.1rem;
font-weight: 600;
color: #a0aec0;
letter-spacing: 0.02em;
}
table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
th,
td {
padding: 1rem 0.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
th {
font-weight: 700;
text-transform: uppercase;
font-size: 0.75rem;
color: #718096;
letter-spacing: 0.05em;
}
th.mentions,
th.sentiment {
text-align: center;
}
th.financials {
text-align: right;
}
td {
font-size: 1.1rem;
font-weight: 600;
}
tr:last-child td {
border-bottom: none;
}
td.rank {
font-weight: 700;
color: #cbd5e0;
width: 5%;
}
td.ticker {
width: 15%;
}
td.financials {
text-align: right;
width: 20%;
}
td.mentions {
text-align: center;
width: 15%;
}
td.sentiment {
text-align: center;
width: 20%;
}
.sentiment-bullish {
color: #48bb78;
font-weight: 700;
}
.sentiment-bearish {
color: #f56565;
font-weight: 700;
}
.sentiment-neutral {
color: #a0aec0;
font-weight: 600;
}
footer {
margin-top: 2.5rem;
}
.brand-name {
font-size: 1.75rem;
font-weight: 800;
letter-spacing: -1px;
}
.brand-subtitle {
font-size: 1rem;
color: #a0aec0;
}
td.ticker a {
[class*="text-"]>a {
color: inherit;
text-decoration: none;
display: inline-block;
transition: transform 0.1s ease-in-out;
transition: color 0.2s ease-in-out;
}
td.ticker a:hover {
transform: scale(1.05);
}
td.financials a {
color: inherit;
text-decoration: none;
transition: color 0.2s;
}
td.financials a:hover {
color: #93c5fd;
}
tr:nth-child(1) td.ticker {
color: #d8b4fe;
}
tr:nth-child(6) td.ticker {
color: #fca5a5;
}
tr:nth-child(2) td.ticker {
color: #a3e635;
}
tr:nth-child(7) td.ticker {
color: #fdba74;
}
tr:nth-child(3) td.ticker {
color: #67e8f9;
}
tr:nth-child(8) td.ticker {
color: #6ee7b7;
}
tr:nth-child(4) td.ticker {
color: #fde047;
}
tr:nth-child(9) td.ticker {
color: #93c5fd;
}
tr:nth-child(5) td.ticker {
color: #fcd34d;
}
tr:nth-child(10) td.ticker {
color: #d1d5db;
}
.post-card a {
color: #93c5fd;
text-decoration: none;
transition: color 0.2s, text-decoration 0.2s;
}
.post-card a:hover {
[class*="text-"]>a:hover {
color: #ffffff;
text-decoration: underline;
}
footer a {
color: inherit;
/* Inherit the color from .brand-subtitle */
text-decoration: none;
transition: color 0.2s;
}
footer a:hover {
color: #ffffff;
/* Make it brighter on hover */
}
@media (max-width: 768px) {
body {
padding: 0.5rem;
}
.navbar {
flex-direction: column;
align-items: stretch;
padding: 1rem;
}
.view-switcher {
margin-left: 0;
justify-content: center;
}
.dropdown-menu {
width: 100%;
}
.image-container {
width: 100%;
padding: 1.5rem 1rem;
}
header {
flex-direction: column;
gap: 0.5rem;
}
.header-action {
width: 100%;
justify-content: space-between;
}
table,
thead,
tbody,
th,
td,
tr {
display: block;
}
thead {
display: none;
}
tr {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
margin-bottom: 1rem;
padding: 0.5rem;
}
td {
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
padding-left: 50%;
text-align: right;
display: flex;
/* Use flex for better alignment */
align-items: center;
justify-content: flex-end;
}
td:last-child {
border-bottom: none;
}
td::before {
content: attr(data-label);
position: absolute;
left: 1rem;
width: 45%;
padding-right: 1rem;
font-weight: 700;
text-align: left;
color: #718096;
}
td.ticker,
td.rank {
text-align: right;
}
}
.image-container footer {
margin-top: 2.5rem;
}
.image-container .brand-name {
font-size: 1.75rem;
font-weight: 800;
letter-spacing: -1px;
}
.image-container .brand-subtitle {
font-size: 1rem;
color: #a0aec0;
}
.image-container footer a {
color: inherit;
text-decoration: none;
transition: color 0.2s;
}
.image-container footer a:hover {
color: #ffffff;
}
.page-footer {
margin-top: 2rem;
padding: 1rem;
width: 100%;
max-width: 750px;
box-sizing: border-box;
background-color: rgba(45, 55, 72, 0.5);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
color: #cbd5e0;
font-size: 0.9rem;
font-weight: 500;
}
.page-footer code {
background-color: #1a202c;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-weight: 600;
color: #e2e8f0;
}
.page-footer .doge-logo {
width: 22px; /* Set a consistent size for the image */
height: 22px;
vertical-align: middle; /* Align it nicely with the text */
}
</style>
</head>
<body>
{% if not is_image_mode %}
<nav class="navbar">
<a href="/" {% if not subreddit_name %}class="active" {% endif %}>Overall</a>
<!-- --- THIS IS THE NEW HTML STRUCTURE FOR THE DROPDOWN --- -->
<div class="dropdown">
<div class="dropdown-button {% if subreddit_name %}active{% endif %}">
Subreddits ▼
</div>
<div class="dropdown-menu">
{% for sub in all_subreddits %}
<a href="/subreddit/{{ sub }}">{{ sub }}</a>
{% endfor %}
</div>
</div>
<!-- --- END OF NEW HTML STRUCTURE --- -->
<div class="view-switcher">
<a href="?view=daily" {% if view_type=='daily' %}class="active" {% endif %}>Daily</a>
<a href="?view=weekly" {% if view_type=='weekly' %}class="active" {% endif %}>Weekly</a>
<a href="/about" title="About this Project" style="margin-left: 1rem;">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
style="vertical-align: middle;">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
</a>
</div>
</nav>
{% endif %}
<main>
{% block content %}{% endblock %}
</main>
<body class="bg-slate-900 text-slate-200 min-h-screen">
{% if not is_image_mode %}
<footer class="page-footer">
<img src="{{ url_for('static', filename='dogecoin_logo.png') }}" alt="Dogecoin Logo" class="doge-logo">
<span>Support this service with Dogecoin: <code>DRTLo2BsBijY4MrLmNNHzmjZ5tVvpTebFE</code></span>
</footer>
{% endif %}
<header class="p-4 sm:p-6 w-full">
<nav
class="w-full max-w-7xl mx-auto bg-slate-800/50 ring-1 ring-slate-700 rounded-xl p-4 flex flex-col sm:flex-row items-center gap-4">
<div class="flex items-center gap-4">
<!-- Home Link -->
<a href="/"
class="font-bold {% if not subreddit_name %}text-white{% else %}text-slate-400 hover:text-white{% endif %} transition-colors">Home</a>
<!-- Alpine.js Dropdown Component -->
<div x-data="{ isOpen: false }" class="relative">
<!-- The Button that toggles the 'isOpen' state -->
<button @click="isOpen = !isOpen"
class="font-bold flex items-center gap-1 cursor-pointer {% if subreddit_name %}text-white{% else %}text-slate-400 hover:text-white{% endif %} transition-colors">
<span>Subreddits</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
class="transition-transform duration-200" :class="{'rotate-180': isOpen}">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<!-- The Dropdown Menu, controlled by Alpine.js -->
<div x-show="isOpen" @click.outside="isOpen = false"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
class="absolute left-0 mt-2 bg-slate-800 ring-1 ring-slate-700 shadow-lg rounded-lg py-1 w-48 z-10"
style="display: none;">
{% for sub in all_subreddits %}
<a href="/subreddit/{{ sub }}"
class="block px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 hover:text-white">{{ sub
}}</a>
{% endfor %}
</div>
</div>
</div>
<div class="flex items-center gap-2 sm:ml-auto">
<a href="?view=daily"
class="px-3 py-1 rounded-md text-sm font-semibold {% if view_type == 'daily' %}bg-sky-500 text-white{% else %}bg-slate-700/50 text-slate-300 hover:bg-slate-700 hover:text-white{% endif %} transition-all">Daily</a>
<a href="?view=weekly"
class="px-3 py-1 rounded-md text-sm font-semibold {% if view_type == 'weekly' %}bg-sky-500 text-white{% else %}bg-slate-700/50 text-slate-300 hover:bg-slate-700 hover:text-white{% endif %} transition-all">Weekly</a>
<a href="/about" title="About this Project"
class="p-2 rounded-md text-slate-400 hover:bg-slate-700 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
</a>
</div>
</nav>
{% endif %}
<main class="w-full p-4 sm:p-6">
{% block content %}{% endblock %}
</main>
{% if not is_image_mode %}
<footer class="mt-auto p-6 text-center">
<div class="flex items-center justify-center gap-2">
<img src="{{ url_for('static', filename='dogecoin_logo.png') }}" alt="Doge" class="w-5 h-5">
<span class="text-sm text-slate-500">Support this service with Dogecoin: <code
class="text-xs bg-slate-800 p-1 rounded">DRTLo2BsBijY4MrLmNNHzmjZ5tVvpTebFE</code></span>
</div>
</footer>
{% endif %}
</body>
</html>