127 lines
6.8 KiB
HTML
127 lines
6.8 KiB
HTML
{% extends "dashboard_base.html" %}
|
|
|
|
{% block title %}{{ title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="flex flex-col items-center">
|
|
<div
|
|
class="w-full max-w-3xl bg-gradient-to-br from-slate-800 to-slate-900 ring-1 ring-slate-700 rounded-2xl p-6 sm:p-8 shadow-2xl">
|
|
<header class="flex flex-col sm:flex-row justify-between sm:items-start mb-8">
|
|
<div class="text-left">
|
|
<h1 class="text-2xl sm:text-4xl font-extrabold tracking-tight text-white">Reddit Ticker Mentions</h1>
|
|
<h2 class="text-lg sm:text-xl font-semibold mt-1 text-slate-400">{{ subtitle }}</h2>
|
|
</div>
|
|
<div class="text-left sm:text-right mt-2 sm:mt-0 flex-shrink-0">
|
|
<div class="text-md font-semibold text-slate-400 whitespace-nowrap">{{ date_string }}</div>
|
|
{% if not is_image_mode %}
|
|
<a href="{{ base_url }}?view={{ view_type }}&image=true" class="inline-block mt-2 sm:float-right"
|
|
title="View as Shareable Image">
|
|
<svg class="text-slate-400 hover:text-white transition-colors" 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">
|
|
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z">
|
|
</path>
|
|
<circle cx="12" cy="13" r="4"></circle>
|
|
</svg>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</header>
|
|
|
|
{% set ticker_colors = {
|
|
1: 'text-violet-400', 2: 'text-lime-400', 3: 'text-cyan-400',
|
|
4: 'text-yellow-400', 5: 'text-red-400', 6: 'text-orange-400',
|
|
7: 'text-emerald-400', 8: 'text-blue-400', 9: 'text-gray-300',
|
|
10: 'text-pink-400'
|
|
} %}
|
|
|
|
<!-- Ticker List -->
|
|
<div class="flex flex-col">
|
|
|
|
<!-- 1. The Desktop Header Row (hidden on mobile) -->
|
|
<div
|
|
class="hidden sm:flex items-center text-xs font-bold text-slate-500 uppercase tracking-wider px-4 py-3 border-b border-slate-700">
|
|
<div class="w-1/4 flex items-center gap-4 text-left">
|
|
<span class="w-6 text-center">#</span>
|
|
<span>Ticker</span>
|
|
</div>
|
|
<div class="w-3/4 grid grid-cols-4 gap-4 text-right">
|
|
<div class="text-center">Mentions</div>
|
|
<div class="text-center">Sentiment</div>
|
|
<div>Mkt Cap</div>
|
|
<div>Last Price</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. Ticker Rows -->
|
|
<div class="divide-y divide-slate-800">
|
|
{% for ticker in tickers %}
|
|
<!-- THIS IS THE UPDATED LINE -->
|
|
<div
|
|
class="p-4 flex flex-col sm:flex-row sm:items-center sm:gap-4 hover:bg-slate-800/50 transition-colors duration-150">
|
|
<!-- Rank & Ticker Symbol -->
|
|
<div class="flex items-center gap-4 w-full sm:w-1/4 text-left mb-4 sm:mb-0">
|
|
<span class="text-lg font-bold text-slate-500 w-6 text-center">{{ loop.index }}</span>
|
|
<div class="text-xl font-bold">
|
|
<span class="{{ ticker_colors.get(loop.index, 'text-slate-200') }}">
|
|
{% if is_image_mode %}
|
|
{{ ticker.symbol }}
|
|
{% else %}
|
|
<a href="/deep-dive/{{ ticker.symbol }}">{{ ticker.symbol }}</a>
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- Financial Data Points -->
|
|
<div class="w-full grid grid-cols-2 sm:grid-cols-4 gap-4 text-right">
|
|
<div class="text-center sm:text-center">
|
|
<div class="sm:hidden text-xs font-bold text-slate-500 uppercase tracking-wider mb-1">
|
|
Mentions</div>
|
|
<div class="text-lg font-semibold text-white">{{ ticker.total_mentions }}</div>
|
|
</div>
|
|
<div class="text-center sm:text-center">
|
|
<div class="sm:hidden text-xs font-bold text-slate-500 uppercase tracking-wider mb-1">
|
|
Sentiment</div>
|
|
<div class="text-lg font-semibold">
|
|
{% if ticker.bullish_mentions > ticker.bearish_mentions %}<span
|
|
class="text-green-400">Bullish</span>
|
|
{% elif ticker.bearish_mentions > ticker.bullish_mentions %}<span
|
|
class="text-red-400">Bearish</span>
|
|
{% else %}<span class="text-slate-400">Neutral</span>{% endif %}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="sm:hidden text-xs font-bold text-slate-500 uppercase tracking-wider mb-1">Mkt
|
|
Cap</div>
|
|
<div class="text-lg font-semibold text-white">{{ ticker.market_cap | format_mc }}</div>
|
|
</div>
|
|
<div>
|
|
<div class="sm:hidden text-xs font-bold text-slate-500 uppercase tracking-wider mb-1">Close
|
|
Price</div>
|
|
<div class="text-lg font-semibold text-white">
|
|
{% if ticker.closing_price %}<a
|
|
href="https://www.marketwatch.com/investing/stock/{{ ticker.symbol }}" target="_blank"
|
|
class="hover:text-blue-400 transition-colors">${{
|
|
"%.2f"|format(ticker.closing_price) }}</a>
|
|
{% else %}N/A{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center text-slate-500 p-8">No ticker data found for this period.</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="mt-8 text-center">
|
|
<div class="text-xl font-extrabold tracking-tight text-white">r/rstat</div>
|
|
<div class="text-sm text-slate-400">
|
|
<a href="https://www.reddit.com/r/rstat/" target="_blank"
|
|
class="hover:text-white transition-colors">visit us for more.</a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %} |