Add clickable reference badges and improve UI layout

- Add clickable badges for backlinks and references that trigger query string searches
- Improve toggle checkbox layout with better styling
- Add description block styling with scrollable container
- Update results styling with bordered cards and shadows
- Add favicon support across pages
- Enhance .env loading with logging for debugging

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-05 14:56:43 -05:00
parent d8d2c5e34c
commit 14d37f23e4
7 changed files with 255 additions and 99 deletions

View File

@@ -3,7 +3,8 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>This Little Corner (Python)</title>
<title>TLC Search</title>
<link rel="icon" href="/static/favicon.png" type="image/png" />
<link rel="stylesheet" href="https://unpkg.com/xp.css" />
<link rel="stylesheet" href="/static/style.css" />
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
@@ -11,7 +12,7 @@
<body>
<div class="window" style="max-width: 1200px; margin: 20px auto;">
<div class="title-bar">
<div class="title-bar-text">This Little Corner — Elastic Search</div>
<div class="title-bar-text">This Little Corner</div>
<div class="title-bar-controls">
<button id="minimizeBtn" aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
@@ -59,18 +60,26 @@
</select>
</div>
<div class="field-row">
<input type="checkbox" id="exactToggle" checked />
<label for="exactToggle">Exact</label>
<div class="field-row toggle-row">
<div class="toggle-item toggle-item--first">
<input type="checkbox" id="exactToggle" checked />
<label for="exactToggle">Exact</label>
</div>
<input type="checkbox" id="fuzzyToggle" checked />
<label for="fuzzyToggle">Fuzzy</label>
<div class="toggle-item">
<input type="checkbox" id="fuzzyToggle" checked />
<label for="fuzzyToggle">Fuzzy</label>
</div>
<input type="checkbox" id="phraseToggle" checked />
<label for="phraseToggle">Phrase</label>
<div class="toggle-item">
<input type="checkbox" id="phraseToggle" checked />
<label for="phraseToggle">Phrase</label>
</div>
<input type="checkbox" id="queryStringToggle" />
<label for="queryStringToggle">Query string mode</label>
<div class="toggle-item">
<input type="checkbox" id="queryStringToggle" />
<label for="queryStringToggle">Query string mode</label>
</div>
</div>
</fieldset>
@@ -84,7 +93,7 @@
</fieldset>
</div>
<div class="summary-right">
<fieldset style="height: 100%;">
<fieldset>
<legend>Timeline</legend>
<div id="frequencySummary" style="font-size: 11px; margin-bottom: 8px;"></div>
<div id="frequencyChart"></div>