giorgio/read.markets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

landing: add product screenshots — hero shot, feature thumbnails, lightbox

Browse source 
Five PNGs at app/static/images/ (renamed from screenshot dumps):
- dashboard.png         — full dashboard hero shot, sits below the hero CTAs
- news-feed.png         — feature-card thumbnail: auto-tagged news feed
- indicators-read.png   — feature-card thumbnail: per-group AI commentary
- strategic-log.png     — feature-card thumbnail: hourly strategic log text
- chat-with-log.png     — "More views" gallery: ask follow-ups against a log

Every screenshot is a <button class="shot"> with data-full + data-caption;
click opens an HTML5 <dialog>-based lightbox. <dialog> handles focus trap,
ESC-to-close, inert background; the backdrop click closes too. Images use
loading="lazy" so the lightbox-only ones don't block first paint.

CSS appended to cassandra.css: .shot, .shot-hero, .shots-grid, .shot__caption,
and .shot-modal (+ ::backdrop). All colours pull from the existing palette
vars so light and dark themes stay coherent.

Total image weight: ~950 KB across all five — acceptable for a marketing
landing page with lazy-loaded thumbnails.
This commit is contained in:
Giorgio Gilestro 2026-05-26 00:27:02 +02:00
parent 13ea63be5c
commit 4ded3632e9
7 changed files with 226 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

79
app/templates/landing.html
View file

@ -25,6 +25,17 @@
</div>
</section>
<section class="shot-hero">
<button class="shot shot--hero"
data-full="{{ url_for('static', path='/images/dashboard.png') }}"
data-alt="Read the Markets dashboard"
data-caption="The dashboard. An aggregate cross-asset read at the top, hand-picked indicator groups underneath. Reading level toggle (Novice / Intermediate) flips every AI-generated panel between plain-English and terse-pro framing.">
<img src="{{ url_for('static', path='/images/dashboard.png') }}"
alt="Dashboard preview" loading="lazy">
<span class="shot__zoom" aria-hidden="true">Click to enlarge</span>
</button>
</section>
<section class="feature-grid">
<div class="feature-card">
<div class="feature-card__tag">News, aggregated</div>
@ -36,6 +47,13 @@
stuff is easy to find. Ingestion follows the trading calendar &mdash;
off-hours stay quiet.
</p>
<button class="shot feature-card__shot"
data-full="{{ url_for('static', path='/images/news-feed.png') }}"
data-alt="News feed with auto-tagged headlines"
data-caption="The news feed. Each headline carries one or more theme tags (rates, AI, energy, geopolitics, …) so you can keep the threads you care about and mute the ones you don't. Click a tag to include; shift-click to exclude.">
<img src="{{ url_for('static', path='/images/news-feed.png') }}"
alt="News feed thumbnail" loading="lazy">
</button>
</div>
<div class="feature-card">
@ -47,6 +65,13 @@
explains what the move <em>means</em>, not what it was. Anchored
in earnings, policy, valuation &mdash; not chart patterns.
</p>
<button class="shot feature-card__shot"
data-full="{{ url_for('static', path='/images/indicators-read.png') }}"
data-alt="Indicators panel with AI commentary"
data-caption="The indicators panel. Tabs across asset classes (equity, rates, commodities, FX, bonds, …); each tab carries a one-paragraph 'read' written by the model on top of the live prices. The numbers anchor the prose so the commentary is checkable, not floating.">
<img src="{{ url_for('static', path='/images/indicators-read.png') }}"
alt="Indicators panel thumbnail" loading="lazy">
</button>
</div>
<div class="feature-card">
@ -61,6 +86,30 @@
intermediate. This is editorial commentary on public data &mdash;
not a forecast and not advice on any investment decision.
</p>
<button class="shot feature-card__shot"
data-full="{{ url_for('static', path='/images/strategic-log.png') }}"
data-alt="Strategic log — the hourly AI read"
data-caption="The strategic log. The model writes a fresh interpretation each hour, taking yesterday's draft as context so it updates rather than starts over. Sections are typed: date header, TL;DR, what moved, what to watch, system temperature.">
<img src="{{ url_for('static', path='/images/strategic-log.png') }}"
alt="Strategic log thumbnail" loading="lazy">
</button>
</div>
</section>
<section class="public-section shots-section">
<h2 class="public-section__head">More views</h2>
<div class="shots-grid">
<button class="shot"
data-full="{{ url_for('static', path='/images/chat-with-log.png') }}"
data-alt="Ask follow-up questions against any past log"
data-caption="Ask follow-up questions against any past log. The chat panel inherits the log's full context, so you can pull on a thread without re-pasting headlines or re-explaining the setup.">
<img src="{{ url_for('static', path='/images/chat-with-log.png') }}"
alt="Chat-with-log thumbnail" loading="lazy">
<div class="shot__caption">
<strong>Ask anything about a log</strong>
<span>Conversational follow-ups with the day's context loaded.</span>
</div>
</button>
</div>
</section>
@ -100,4 +149,34 @@
</div>
</section>
<dialog id="shot-modal" class="shot-modal" aria-label="Screenshot preview">
<button class="shot-modal__close" type="button" aria-label="Close">&times;</button>
<img id="shot-modal__img" alt="">
<p id="shot-modal__caption"></p>
</dialog>
<script>
(function () {
var dlg = document.getElementById('shot-modal');
var img = document.getElementById('shot-modal__img');
var cap = document.getElementById('shot-modal__caption');
if (!dlg || !dlg.showModal) return; // gracefully skip on ancient browsers
document.querySelectorAll('.shot').forEach(function (btn) {
btn.addEventListener('click', function () {
img.src = btn.dataset.full;
img.alt = btn.dataset.alt || '';
cap.textContent = btn.dataset.caption || '';
dlg.showModal();
});
});
// Backdrop click closes; clicking the image itself does not.
dlg.addEventListener('click', function (e) {
if (e.target === dlg) dlg.close();
});
dlg.querySelector('.shot-modal__close').addEventListener('click', function () {
dlg.close();
});
})();
</script>
{% endblock %}