TLC-Search/static/frequency.html
knight 14d37f23e4 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>
2025-11-05 14:56:43 -05:00

69 lines
1.8 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Term Frequency Explorer</title>
<link rel="icon" href="/static/favicon.png" type="image/png" />
<link rel="stylesheet" href="/static/style.css" />
<style>
#chart {
margin-top: 24px;
}
svg {
max-width: 100%;
}
.axis path,
.axis line {
stroke: #ccc;
}
.line {
fill: none;
stroke: #0b6efd;
stroke-width: 2px;
}
.dot {
fill: #0b6efd;
stroke: white;
stroke-width: 1px;
}
.controls label {
display: flex;
align-items: center;
gap: 6px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
</head>
<body>
<header>
<h1>Term Frequency Explorer</h1>
<p class="muted">
Pick a term to see how often it appears over time. <a href="/">Back to search</a>
</p>
</header>
<section class="controls">
<input id="term" type="text" placeholder="Term (e.g. meaning)" size="28" />
<select id="channel">
<option value="all">All Channels</option>
</select>
<select id="interval">
<option value="month">Per Month</option>
<option value="week">Per Week</option>
<option value="day">Per Day</option>
<option value="quarter">Per Quarter</option>
<option value="year">Per Year</option>
</select>
<input id="start" type="date" />
<input id="end" type="date" />
<button id="runBtn">Run</button>
</section>
<section id="summary" class="muted"></section>
<section id="chart"></section>
<script src="/static/frequency.js"></script>
</body>
</html>