250 lines
9.7 KiB
HTML
250 lines
9.7 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>TLC Search</title>
|
||
<link rel="icon" href="/static/favicon.png" type="image/png" />
|
||
<link rel="stylesheet" href="https://unpkg.com/xp.css" integrity="sha384-isKk8ZXKlU28/m3uIrnyTfuPaamQIF4ONLeGSfsWGEe3qBvaeLU5wkS4J7cTIwxI" crossorigin="anonymous" />
|
||
<link rel="stylesheet" href="/static/style.css" />
|
||
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js" integrity="sha384-CjloA8y00+1SDAUkjs099PVfnY2KmDC2BZnws9kh8D/lX1s46w6EPhpXdqMfjK6i" crossorigin="anonymous"></script>
|
||
</head>
|
||
<body>
|
||
<div class="window" style="max-width: 1200px; margin: 20px auto;">
|
||
<div class="title-bar">
|
||
<div class="title-bar-text">This Little Corner</div>
|
||
<div class="title-bar-controls">
|
||
<button id="aboutBtn" aria-label="About">?</button>
|
||
<button id="minimizeBtn" aria-label="Minimize"></button>
|
||
<button aria-label="Maximize"></button>
|
||
<button aria-label="Close"></button>
|
||
</div>
|
||
</div>
|
||
<div class="window-body">
|
||
<div class="window-actions">
|
||
<a
|
||
id="rssButton"
|
||
class="rss-button"
|
||
href="/rss"
|
||
target="_blank"
|
||
rel="noopener"
|
||
title="Unified RSS feed"
|
||
aria-label="Unified RSS feed"
|
||
>
|
||
<svg class="rss-button__icon" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M6 18a2 2 0 1 0 0 4a2 2 0 0 0 0-4zm-4 6a4 4 0 0 1 4-4a4 4 0 0 1 4 4h-2a2 2 0 0 0-2-2a2 2 0 0 0-2 2zm0-8v-2c6.627 0 12 5.373 12 12h-2c0-5.523-4.477-10-10-10zm0-4V4c11.046 0 20 8.954 20 20h-2c0-9.941-8.059-18-18-18z"/>
|
||
</svg>
|
||
<span class="rss-button__label">RSS</span>
|
||
</a>
|
||
</div>
|
||
<p>Enter a phrase to query title, description, and transcript text.</p>
|
||
|
||
<fieldset>
|
||
<legend>Search</legend>
|
||
<div class="field-row" style="margin-bottom: 8px;">
|
||
<label for="q" style="width: 60px;">Query:</label>
|
||
<input id="q" type="text" placeholder="Search..." style="flex: 1;" />
|
||
<button id="searchBtn">Search</button>
|
||
</div>
|
||
|
||
<div class="field-row" style="margin-bottom: 8px; align-items: center;">
|
||
<label for="channel" style="width: 60px;">Channel:</label>
|
||
<select id="channel" style="flex: 1;">
|
||
<option value="">All Channels</option>
|
||
</select>
|
||
|
||
<label for="year" style="margin-left: 8px;">Year:</label>
|
||
<select id="year">
|
||
<option value="">All Years</option>
|
||
</select>
|
||
|
||
<label for="sort" style="margin-left: 8px;">Sort:</label>
|
||
<select id="sort">
|
||
<option value="relevant">Most relevant</option>
|
||
<option value="newer">Newest first</option>
|
||
<option value="older">Oldest first</option>
|
||
<option value="referenced">Most referenced</option>
|
||
</select>
|
||
|
||
<label for="size" style="margin-left: 8px;">Size:</label>
|
||
<select id="size">
|
||
<option value="10">10</option>
|
||
<option value="25">25</option>
|
||
<option value="50">50</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="field-row toggle-row">
|
||
<div class="toggle-item toggle-item--first">
|
||
<input type="checkbox" id="exactToggle" checked />
|
||
<label for="exactToggle">Exact</label>
|
||
<span class="toggle-help">Match all terms exactly.</span>
|
||
</div>
|
||
|
||
<div class="toggle-item">
|
||
<input type="checkbox" id="fuzzyToggle" checked />
|
||
<label for="fuzzyToggle">Fuzzy</label>
|
||
<span class="toggle-help">Allow small typos and variations.</span>
|
||
</div>
|
||
|
||
<div class="toggle-item">
|
||
<input type="checkbox" id="phraseToggle" checked />
|
||
<label for="phraseToggle">Phrase</label>
|
||
<span class="toggle-help">Boost exact phrases inside transcripts.</span>
|
||
</div>
|
||
|
||
<div class="toggle-item">
|
||
<input type="checkbox" id="externalToggle" />
|
||
<label for="externalToggle">External</label>
|
||
<span class="toggle-help">Include externally referenced items.</span>
|
||
</div>
|
||
|
||
<div class="toggle-item">
|
||
<input type="checkbox" id="queryStringToggle" />
|
||
<label for="queryStringToggle">Query string mode</label>
|
||
<span class="toggle-help">Use raw Lucene syntax (overrides other toggles).</span>
|
||
</div>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<div class="summary-row">
|
||
<div class="summary-left">
|
||
<div id="meta" style="margin-bottom: 8px; font-size: 11px;"></div>
|
||
<fieldset id="metrics">
|
||
<legend>Metrics</legend>
|
||
<div id="metricsStatus" style="font-size: 11px;"></div>
|
||
<div id="metricsContent"></div>
|
||
</fieldset>
|
||
</div>
|
||
<div class="summary-right">
|
||
<fieldset>
|
||
<legend>Timeline</legend>
|
||
<div id="frequencySummary" style="font-size: 11px; margin-bottom: 8px;"></div>
|
||
<div id="frequencyChart"></div>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
|
||
<fieldset style="margin-top: 16px;">
|
||
<legend>Results</legend>
|
||
<div id="results"></div>
|
||
</fieldset>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<p class="status-bar-field">Ready</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="about-panel" id="aboutPanel" hidden>
|
||
<div class="about-panel__header">
|
||
<strong>About This App</strong>
|
||
<button id="aboutCloseBtn" aria-label="Close about panel">×</button>
|
||
</div>
|
||
<div class="about-panel__body">
|
||
<p>Use the toggles to choose exact, fuzzy, or phrase matching. Query string mode accepts raw Lucene syntax.</p>
|
||
<p>Results are ranked by your chosen sort order; the timeline summarizes the same query.</p>
|
||
<p>You can download transcripts, copy MLA citations, or explore references via the graph button.</p>
|
||
<div class="about-panel__section">
|
||
<div class="about-panel__label">Unified RSS feed</div>
|
||
<a id="rssFeedLink" href="#" target="_blank" rel="noopener">Loading…</a>
|
||
</div>
|
||
<div class="about-panel__section">
|
||
<div class="about-panel__label">Channel list</div>
|
||
<a id="channelListLink" href="/api/channel-list" target="_blank" rel="noopener">View JSON</a>
|
||
<div id="channelCount" class="about-panel__meta"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
id="graphModalOverlay"
|
||
class="graph-modal-overlay"
|
||
aria-hidden="true"
|
||
>
|
||
<div
|
||
class="window graph-window graph-modal-window"
|
||
id="graphModalWindow"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="graphModalTitle"
|
||
>
|
||
<div class="title-bar">
|
||
<div class="title-bar-text" id="graphModalTitle">Reference Graph</div>
|
||
<div class="title-bar-controls">
|
||
<button id="graphModalClose" aria-label="Close"></button>
|
||
</div>
|
||
</div>
|
||
<div class="window-body">
|
||
<p>
|
||
Explore how this video links with its neighbors. Adjust depth or node cap to expand the graph.
|
||
</p>
|
||
|
||
<form id="graphForm" class="graph-controls">
|
||
<div class="field-group">
|
||
<label for="graphVideoId">Video ID</label>
|
||
<input
|
||
id="graphVideoId"
|
||
name="video_id"
|
||
type="text"
|
||
placeholder="e.g. dQw4w9WgXcQ"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div class="field-group">
|
||
<label for="graphDepth">Depth</label>
|
||
<select id="graphDepth" name="depth">
|
||
<option value="1" selected>1 hop</option>
|
||
<option value="2">2 hops</option>
|
||
<option value="3">3 hops</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="field-group">
|
||
<label for="graphMaxNodes">Max nodes</label>
|
||
<select id="graphMaxNodes" name="max_nodes">
|
||
<option value="100">100</option>
|
||
<option value="150">150</option>
|
||
<option value="200" selected>200</option>
|
||
<option value="300">300</option>
|
||
<option value="400">400</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="field-group">
|
||
<label for="graphLabelSize">Labels</label>
|
||
<select id="graphLabelSize" name="label_size">
|
||
<option value="off">Off</option>
|
||
<option value="tiny" selected>Tiny</option>
|
||
<option value="small">Small</option>
|
||
<option value="normal">Normal</option>
|
||
<option value="medium">Medium</option>
|
||
<option value="large">Large</option>
|
||
<option value="xlarge">Extra large</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button type="submit">Build graph</button>
|
||
</form>
|
||
|
||
<div id="graphStatus" class="graph-status">Enter a video ID to begin.</div>
|
||
<div
|
||
id="graphContainer"
|
||
class="graph-container"
|
||
data-embedded="true"
|
||
></div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<p class="status-bar-field">Right-click a node to set a new root</p>
|
||
<p class="status-bar-field">Colors (and hatches) represent channels</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/graph.js"></script>
|
||
<script src="/static/app.js"></script>
|
||
</body>
|
||
</html>
|