Spaces:

abeea
/

testts

Running

App Files Files Community

testts / index.html

abeea

Update index.html

dbc7994 verified 17 days ago

raw

history blame contribute delete

30.8 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Screenplay Comparator</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Bebas+Neue&display=swap');

	:root {
	--bg: #0d0d0d;
	--surface: #141414;
	--panel: #1a1a1a;
	--border: #2a2a2a;
	--gold: #c9a84c;
	--gold-dim: #7a6230;
	--green: #2d6a4f;
	--green-hl: #1b4332;
	--green-txt: #95d5b2;
	--red: #7b2d2d;
	--red-hl: #4a1010;
	--red-txt: #ffb3b3;
	--text: #e8e0d0;
	--muted: #666;
	--scene-bg: #1e1a0e;
	--scene-bdr: #c9a84c44;
	}

	, ::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

	html, body {
	height: 100%;
	background: var(--bg);
	color: var(--text);
	font-family: 'Courier Prime', monospace;
	overflow: hidden;
	}

	/* ── HEADER ── */
	header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 28px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	position: relative;
	z-index: 10;
	flex-shrink: 0;
	}

	.brand {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 1.6rem;
	letter-spacing: 3px;
	color: var(--gold);
	}
	.brand span { color: var(--muted); font-size: 0.9rem; letter-spacing: 1px; font-family: 'Courier Prime', monospace; display: block; margin-top: -4px; }

	.legend {
	display: flex;
	gap: 20px;
	font-size: 0.75rem;
	letter-spacing: 1px;
	}
	.legend-item { display: flex; align-items: center; gap: 7px; }
	.legend-dot { width: 12px; height: 12px; border-radius: 2px; }
	.legend-dot.match { background: var(--green-txt); }
	.legend-dot.change { background: var(--red-txt); }
	.legend-dot.scene { background: var(--gold); }

	/* ── STATS BAR ── */
	#stats-bar {
	display: none;
	padding: 10px 28px;
	background: var(--scene-bg);
	border-bottom: 1px solid var(--scene-bdr);
	flex-shrink: 0;
	gap: 32px;
	align-items: center;
	font-size: 0.78rem;
	letter-spacing: 0.5px;
	}
	#stats-bar.visible { display: flex; }

	.stat { text-align: center; }
	.stat-val { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--gold); line-height: 1; }
	.stat-lbl { color: var(--muted); margin-top: 2px; }
	.stat-divider { width: 1px; height: 36px; background: var(--border); }

	/* ── UPLOAD ZONE ── */
	#upload-view {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 48px;
	padding: 40px;
	overflow: auto;
	}

	.upload-headline { text-align: center; }
	.upload-headline h2 {
	font-family: 'Playfair Display', serif;
	font-size: 2.2rem;
	color: var(--gold);
	margin-bottom: 8px;
	}
	.upload-headline p { color: var(--muted); font-size: 0.85rem; letter-spacing: 1px; }

	.upload-row { display: flex; gap: 28px; width: 100%; max-width: 800px; }

	.upload-card {
	flex: 1;
	border: 1px dashed var(--border);
	border-radius: 4px;
	padding: 36px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	cursor: pointer;
	transition: border-color .2s, background .2s;
	position: relative;
	text-align: center;
	}
	.upload-card:hover, .upload-card.drag-over { border-color: var(--gold); background: #ffffff05; }
	.upload-card.loaded { border-color: var(--green-txt); border-style: solid; background: #2d6a4f15; }
	.upload-card input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
	.upload-icon { font-size: 2.4rem; line-height: 1; }
	.upload-label { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 2px; }
	.upload-card:nth-child(1) .upload-label { color: var(--gold); }
	.upload-card:nth-child(2) .upload-label { color: #a0b4c8; }
	.upload-sub { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.5px; }
	.file-name { font-size: 0.8rem; color: var(--green-txt); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

	#compare-btn {
	display: none;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 1.1rem;
	letter-spacing: 3px;
	background: var(--gold);
	color: #0d0d0d;
	border: none;
	padding: 14px 48px;
	cursor: pointer;
	border-radius: 2px;
	transition: background .2s, transform .1s;
	}
	#compare-btn:hover { background: #e0b85a; }
	#compare-btn:active { transform: scale(.97); }
	#compare-btn.visible { display: block; }

	/* ── COMPARE VIEW ── */
	#compare-view {
	display: none;
	flex: 1;
	overflow: hidden;
	flex-direction: column;
	}
	#compare-view.visible { display: flex; }

	/* ── COLUMN HEADERS with per-side nav ── */
	.col-headers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
	}

	.col-header {
	padding: 8px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	}
	.col-header:first-child { border-right: 1px solid var(--border); }

	.col-header-title {
	font-family: 'Bebas Neue', sans-serif;
	letter-spacing: 2px;
	font-size: 0.9rem;
	}
	.col-header:first-child .col-header-title { color: var(--gold); }
	.col-header:last-child .col-header-title { color: #a0b4c8; }

	.col-header .fname { color: var(--muted); font-family: 'Courier Prime', monospace; font-size: 0.72rem; letter-spacing: 0; }

	/* per-side page nav */
	.side-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	}
	.side-nav-btn {
	font-family: 'Courier Prime', monospace;
	font-size: 0.8rem;
	background: var(--panel);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 3px 9px;
	cursor: pointer;
	border-radius: 2px;
	transition: border-color .15s, color .15s;
	line-height: 1.4;
	}
	.side-nav-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
	.side-nav-btn:disabled { opacity: 0.3; cursor: default; }

	.side-page-indicator {
	font-size: 0.72rem;
	color: var(--muted);
	min-width: 60px;
	text-align: center;
	letter-spacing: 0.5px;
	white-space: nowrap;
	}

	/* columns body */
	.columns-wrap {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	overflow: hidden;
	}

	.col-panel {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	}
	.col-panel:first-child { border-right: 1px solid var(--border); }

	/* The actual scrollable page content */
	.col-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 24px 20px;
	scrollbar-width: thin;
	scrollbar-color: var(--border) transparent;
	position: relative;
	}
	.col-scroll::-webkit-scrollbar { width: 5px; }
	.col-scroll::-webkit-scrollbar-track { background: transparent; }
	.col-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

	/* screenplay blocks */
	.block {
	margin-bottom: 6px;
	padding: 5px 8px;
	border-radius: 2px;
	line-height: 1.7;
	font-size: 0.84rem;
	white-space: pre-wrap;
	transition: background .15s;
	}

	.block.scene-heading {
	font-family: 'Courier Prime', monospace;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: var(--gold);
	background: var(--scene-bg);
	border-left: 3px solid var(--gold);
	padding-left: 12px;
	margin-top: 18px;
	margin-bottom: 2px;
	}
	.block.match { background: var(--green-hl); color: var(--green-txt); }
	.block.changed { background: var(--red-hl); color: var(--red-txt); }
	.block.neutral { color: var(--text); }

	/* empty page placeholder */
	.page-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--muted);
	font-size: 0.8rem;
	letter-spacing: 1px;
	gap: 8px;
	opacity: 0.5;
	}
	.page-empty-icon { font-size: 2rem; }

	/* page fade animation */
	@keyframes pageFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
	}
	.page-content { animation: pageFadeIn .18s ease; }

	/* ── TOOLBAR ── */
	#toolbar {
	display: none;
	padding: 8px 20px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	gap: 12px;
	align-items: center;
	flex-shrink: 0;
	flex-wrap: wrap;
	}
	#toolbar.visible { display: flex; }

	.tb-btn {
	font-family: 'Courier Prime', monospace;
	font-size: 0.75rem;
	letter-spacing: 1px;
	background: var(--panel);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 5px 14px;
	cursor: pointer;
	border-radius: 2px;
	transition: border-color .15s, color .15s;
	}
	.tb-btn:hover { border-color: var(--gold); color: var(--gold); }
	.tb-btn.active { border-color: var(--gold); color: var(--gold); background: #c9a84c18; }

	.tb-sep { width: 1px; height: 20px; background: var(--border); }
	.tb-label { font-size: 0.7rem; color: var(--muted); letter-spacing: 1px; }

	#scene-jump {
	background: var(--panel);
	border: 1px solid var(--border);
	color: var(--text);
	font-family: 'Courier Prime', monospace;
	font-size: 0.75rem;
	padding: 5px 10px;
	border-radius: 2px;
	max-width: 200px;
	}
	#scene-jump option { background: var(--panel); }

	/* ── BOTTOM PAGINATION BAR ── */
	#page-bar {
	display: none;
	flex-shrink: 0;
	padding: 10px 20px;
	background: var(--surface);
	border-top: 1px solid var(--border);
	align-items: center;
	justify-content: center;
	gap: 14px;
	}
	#page-bar.visible { display: flex; }

	.page-btn {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 1rem;
	letter-spacing: 2px;
	background: var(--panel);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 7px 22px;
	cursor: pointer;
	border-radius: 2px;
	transition: border-color .15s, color .15s, background .15s;
	display: flex;
	align-items: center;
	gap: 8px;
	}
	.page-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
	.page-btn:disabled { opacity: 0.3; cursor: default; }

	.page-indicator {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 1rem;
	letter-spacing: 2px;
	color: var(--gold);
	min-width: 100px;
	text-align: center;
	}

	.sync-status {
	font-size: 0.72rem;
	letter-spacing: 1px;
	padding: 4px 10px;
	border-radius: 2px;
	border: 1px solid var(--border);
	cursor: pointer;
	transition: all .15s;
	white-space: nowrap;
	}
	.sync-status.synced { color: var(--green-txt); border-color: var(--green); background: #2d6a4f22; }
	.sync-status.unsynced { color: var(--muted); }
	.sync-status:hover { border-color: var(--gold); color: var(--gold); }

	/* loading overlay */
	#loader {
	display: none;
	position: fixed;
	inset: 0;
	background: #0d0d0dcc;
	z-index: 999;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 16px;
	}
	#loader.visible { display: flex; }
	.loader-text { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 4px; color: var(--gold); animation: pulse 1.2s ease-in-out infinite; }
	@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} }
	.loader-bar { width: 200px; height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; }
	.loader-fill { height: 100%; width: 30%; background: var(--gold); animation: slide 1.2s ease-in-out infinite; }
	@keyframes slide { 0%{transform:translateX(-100%)} 100%{transform:translateX(450%)} }

	#reset-btn {
	margin-left: auto;
	font-family: 'Courier Prime', monospace;
	font-size: 0.72rem;
	letter-spacing: 1px;
	background: transparent;
	border: 1px solid var(--border);
	color: var(--muted);
	padding: 4px 12px;
	cursor: pointer;
	border-radius: 2px;
	transition: border-color .15s, color .15s;
	}
	#reset-btn:hover { border-color: var(--red-txt); color: var(--red-txt); }

	.app-wrap { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
	</style>
	</head>
	<body>

	<div class="app-wrap">

	<!-- HEADER -->
	<header>
	<div class="brand">
	SCRIPT DIFF
	<span>Screenplay Comparator</span>
	</div>
	<div class="legend">
	<div class="legend-item"><div class="legend-dot match"></div> Unchanged</div>
	<div class="legend-item"><div class="legend-dot change"></div> Cut / Modified</div>
	<div class="legend-item"><div class="legend-dot scene"></div> Scene Heading</div>
	</div>
	</header>

	<!-- STATS BAR -->
	<div id="stats-bar">
	<div class="stat"><div class="stat-val" id="st-scenes-1">—</div><div class="stat-lbl">Scenes (Draft 1)</div></div>
	<div class="stat-divider"></div>
	<div class="stat"><div class="stat-val" id="st-scenes-2">—</div><div class="stat-lbl">Scenes (Final)</div></div>
	<div class="stat-divider"></div>
	<div class="stat"><div class="stat-val" id="st-scenes-cut">—</div><div class="stat-lbl">Scenes Cut</div></div>
	<div class="stat-divider"></div>
	<div class="stat"><div class="stat-val" id="st-lines-1">—</div><div class="stat-lbl">Lines (Draft 1)</div></div>
	<div class="stat-divider"></div>
	<div class="stat"><div class="stat-val" id="st-lines-2">—</div><div class="stat-lbl">Lines (Final)</div></div>
	<div class="stat-divider"></div>
	<div class="stat"><div class="stat-val" id="st-lines-cut">—</div><div class="stat-lbl">Lines Cut</div></div>
	<div class="stat-divider"></div>
	<div class="stat"><div class="stat-val" id="st-match-pct">—</div><div class="stat-lbl">Unchanged %</div></div>
	<div class="stat-divider"></div>
	<div class="stat"><div class="stat-val" id="st-pages">—</div><div class="stat-lbl">Pages</div></div>
	</div>

	<!-- UPLOAD VIEW -->
	<div id="upload-view">
	<div class="upload-headline">
	<h2>Compare Two Screenplays</h2>
	<p>Upload your first draft and final draft — page by page, side by side</p>
	</div>
	<div class="upload-row">
	<div class="upload-card" id="card1" ondragover="onDrag(event,1)" ondragleave="offDrag(1)" ondrop="onDrop(event,1)">
	<input type="file" accept=".docx" id="file1" onchange="loadFile(1)">
	<div class="upload-icon">📄</div>
	<div class="upload-label">First Draft</div>
	<div class="upload-sub">Your original screenplay</div>
	<div class="file-name" id="name1">Drop .docx here or click</div>
	</div>
	<div class="upload-card" id="card2" ondragover="onDrag(event,2)" ondragleave="offDrag(2)" ondrop="onDrop(event,2)">
	<input type="file" accept=".docx" id="file2" onchange="loadFile(2)">
	<div class="upload-icon">🎬</div>
	<div class="upload-label">Final Draft</div>
	<div class="upload-sub">Your revised / final version</div>
	<div class="file-name" id="name2">Drop .docx here or click</div>
	</div>
	</div>
	<button id="compare-btn" onclick="runComparison()">▶ RUN COMPARISON</button>
	</div>

	<!-- TOOLBAR (shown after comparison) -->
	<div id="toolbar">
	<span class="tb-label">FILTER:</span>
	<button class="tb-btn active" onclick="setFilter('all', this)">All Lines</button>
	<button class="tb-btn" onclick="setFilter('changed', this)">Changes Only</button>
	<button class="tb-btn" onclick="setFilter('match', this)">Matches Only</button>
	<div class="tb-sep"></div>
	<span class="tb-label">JUMP TO:</span>
	<select id="scene-jump" onchange="jumpToScene(this.value)">
	<option value="">— Scene —</option>
	</select>
	<button id="reset-btn" onclick="resetTool()">✕ Reset</button>
	</div>

	<!-- COMPARE VIEW -->
	<div id="compare-view">
	<!-- Column headers with per-side navigation -->
	<div class="col-headers">
	<div class="col-header">
	<div>
	<div class="col-header-title">First Draft</div>
	<div class="fname" id="lbl1"></div>
	</div>
	<div class="side-nav">
	<button class="side-nav-btn" id="left-prev" onclick="goPageSide('left', -1)" title="Previous page (left only)">◀</button>
	<div class="side-page-indicator" id="left-page-ind">Pg 1 / 1</div>
	<button class="side-nav-btn" id="left-next" onclick="goPageSide('left', +1)" title="Next page (left only)">▶</button>
	</div>
	</div>
	<div class="col-header">
	<div>
	<div class="col-header-title">Final Draft</div>
	<div class="fname" id="lbl2"></div>
	</div>
	<div class="side-nav">
	<button class="side-nav-btn" id="right-prev" onclick="goPageSide('right', -1)" title="Previous page (right only)">◀</button>
	<div class="side-page-indicator" id="right-page-ind">Pg 1 / 1</div>
	<button class="side-nav-btn" id="right-next" onclick="goPageSide('right', +1)" title="Next page (right only)">▶</button>
	</div>
	</div>
	</div>

	<!-- Side-by-side page content -->
	<div class="columns-wrap">
	<div class="col-panel">
	<div class="col-scroll" id="col-left"></div>
	</div>
	<div class="col-panel">
	<div class="col-scroll" id="col-right"></div>
	</div>
	</div>
	</div>

	<!-- BOTTOM PAGE NAVIGATION BAR -->
	<div id="page-bar">
	<button class="page-btn" id="btn-prev" onclick="goPage(-1)" disabled>◀ PREV PAGE</button>
	<div class="page-indicator" id="page-indicator">PAGE 1 / 1</div>
	<button class="page-btn" id="btn-next" onclick="goPage(+1)" disabled>NEXT PAGE ▶</button>
	<div class="tb-sep" style="height:24px"></div>
	<button class="sync-status synced" id="sync-toggle" onclick="toggleSync()" title="Click to toggle sync">⇅ PAGES SYNCED</button>
	</div>

	</div>

	<!-- LOADER -->
	<div id="loader">
	<div class="loader-text">Analyzing Script…</div>
	<div class="loader-bar"><div class="loader-fill"></div></div>
	</div>

	<script>
	// ── State ──
	const files = { 1: null, 2: null };
	let pagesLeft = []; // array of arrays of diff items
	let pagesRight = [];
	let pageLeft = 0; // current page index (0-based)
	let pageRight = 0;
	let synced = true;
	let currentFilter = 'all';

	const LINES_PER_PAGE = 40; // lines per "screenplay page"

	// ── Drag & Drop ──
	function onDrag(e, n) { e.preventDefault(); document.getElementById('card'+n).classList.add('drag-over'); }
	function offDrag(n) { document.getElementById('card'+n).classList.remove('drag-over'); }
	function onDrop(e, n) {
	e.preventDefault(); offDrag(n);
	const f = e.dataTransfer.files[0];
	if (f && f.name.endsWith('.docx')) { files[n] = f; markLoaded(n, f.name); }
	}

	function loadFile(n) {
	const inp = document.getElementById('file'+n);
	if (!inp.files[0]) return;
	files[n] = inp.files[0];
	markLoaded(n, inp.files[0].name);
	}

	function markLoaded(n, name) {
	document.getElementById('card'+n).classList.add('loaded');
	document.getElementById('name'+n).textContent = name;
	if (files[1] && files[2]) document.getElementById('compare-btn').classList.add('visible');
	}

	// ── Extract text from docx ──
	async function extractLines(file) {
	return new Promise((res, rej) => {
	const reader = new FileReader();
	reader.onload = async e => {
	try {
	const result = await mammoth.extractRawText({ arrayBuffer: e.target.result });
	const lines = result.value.split('\n').map(l => l.trim()).filter(l => l.length > 0);
	res(lines);
	} catch(err) { rej(err); }
	};
	reader.readAsArrayBuffer(file);
	});
	}

	// ── Scene heading detection ──
	function isSceneHeading(line) {
	return /^(INT\.\|EXT\.\|INT\/EXT\.\|I\/E\.\|INTERCUT\|FADE IN\|FADE OUT\|SMASH CUT\|CUT TO\|DISSOLVE)/i.test(line.trim())
	\|\| /^[A-Z\s\d\.\-\/:']+$/.test(line.trim()) && line.trim().length > 4 && line.trim().length < 80;
	}

	// ── LCS-based diff ──
	function lcs(a, b) {
	const m = a.length, n = b.length;
	const dp = Array.from({length: m+1}, () => new Uint16Array(n+1));
	for (let i = 1; i <= m; i++)
	for (let j = 1; j <= n; j++)
	dp[i][j] = a[i-1] === b[j-1] ? dp[i-1][j-1]+1 : Math.max(dp[i-1][j], dp[i][j-1]);
	const seqA = [], seqB = [];
	let i = m, j = n;
	while (i > 0 && j > 0) {
	if (a[i-1] === b[j-1]) { seqA.unshift(i-1); seqB.unshift(j-1); i--; j--; }
	else if (dp[i-1][j] > dp[i][j-1]) i--;
	else j--;
	}
	return { seqA, seqB };
	}

	function buildDiff(linesA, linesB) {
	const { seqA, seqB } = lcs(linesA, linesB);
	const matchA = new Set(seqA);
	const matchB = new Set(seqB);
	const resultA = linesA.map((line, i) => ({ line, status: matchA.has(i) ? 'match' : 'changed' }));
	const resultB = linesB.map((line, i) => ({ line, status: matchB.has(i) ? 'match' : 'changed' }));
	return { resultA, resultB };
	}

	// ── Split into pages ──
	// We try to break at scene headings where possible near the page boundary
	function paginateResult(result) {
	const pages = [];
	let i = 0;
	while (i < result.length) {
	let end = Math.min(i + LINES_PER_PAGE, result.length);
	// try to break at a scene heading just before the hard limit
	if (end < result.length) {
	let breakAt = -1;
	for (let k = end - 1; k >= i + Math.floor(LINES_PER_PAGE * 0.6); k--) {
	if (isSceneHeading(result[k].line)) { breakAt = k; break; }
	}
	if (breakAt > i) end = breakAt;
	}
	pages.push(result.slice(i, end));
	i = end;
	}
	return pages;
	}

	// ── Render a page into a column ──
	function renderPage(colEl, pageItems) {
	colEl.innerHTML = '';
	if (!pageItems \|\| pageItems.length === 0) {
	colEl.innerHTML = '<div class="page-empty"><div class="page-empty-icon">—</div><div>No content on this page</div></div>';
	return;
	}
	const wrap = document.createElement('div');
	wrap.className = 'page-content';
	pageItems.forEach((item, idx) => {
	const div = document.createElement('div');
	const scene = isSceneHeading(item.line);
	div.className = 'block ' + (scene ? 'scene-heading' : item.status);
	div.dataset.status = scene ? 'scene' : item.status;
	div.textContent = item.line;
	// apply current filter
	if (currentFilter !== 'all') {
	const st = div.dataset.status;
	if (currentFilter === 'changed' && st !== 'changed' && st !== 'scene') div.style.display = 'none';
	if (currentFilter === 'match' && st !== 'match' && st !== 'scene') div.style.display = 'none';
	}
	wrap.appendChild(div);
	});
	colEl.appendChild(wrap);
	colEl.scrollTop = 0;
	}

	// ── Update UI indicators ──
	function updateUI() {
	const totalLeft = pagesLeft.length;
	const totalRight = pagesRight.length;

	document.getElementById('left-page-ind').textContent = `Pg ${pageLeft+1} / ${totalLeft}`;
	document.getElementById('right-page-ind').textContent = `Pg ${pageRight+1} / ${totalRight}`;
	document.getElementById('left-prev').disabled = pageLeft === 0;
	document.getElementById('left-next').disabled = pageLeft >= totalLeft - 1;
	document.getElementById('right-prev').disabled = pageRight === 0;
	document.getElementById('right-next').disabled = pageRight >= totalRight - 1;

	// bottom bar shows synced page or "out of sync"
	if (synced) {
	document.getElementById('page-indicator').textContent = `PAGE ${pageLeft+1} / ${Math.max(totalLeft, totalRight)}`;
	} else {
	document.getElementById('page-indicator').textContent = `L:${pageLeft+1}/${totalLeft} R:${pageRight+1}/${totalRight}`;
	}
	document.getElementById('btn-prev').disabled = synced ? pageLeft === 0 : (pageLeft === 0 && pageRight === 0);
	document.getElementById('btn-next').disabled = synced
	? pageLeft >= Math.min(totalLeft, totalRight) - 1
	: (pageLeft >= totalLeft - 1 && pageRight >= totalRight - 1);
	}

	function renderBoth() {
	renderPage(document.getElementById('col-left'), pagesLeft[pageLeft]);
	renderPage(document.getElementById('col-right'), pagesRight[pageRight]);
	updateUI();
	}

	// ── Synced navigation (bottom bar) ──
	function goPage(dir) {
	if (synced) {
	const newPage = pageLeft + dir;
	if (newPage < 0 \|\| newPage >= Math.min(pagesLeft.length, pagesRight.length)) return;
	pageLeft = newPage;
	pageRight = newPage;
	} else {
	// move both independently only if possible
	if (dir === -1) {
	if (pageLeft > 0) pageLeft--;
	if (pageRight > 0) pageRight--;
	} else {
	if (pageLeft < pagesLeft.length - 1) pageLeft++;
	if (pageRight < pagesRight.length - 1) pageRight++;
	}
	}
	renderBoth();
	}

	// ── Independent side navigation ──
	function goPageSide(side, dir) {
	if (side === 'left') {
	const np = pageLeft + dir;
	if (np < 0 \|\| np >= pagesLeft.length) return;
	pageLeft = np;
	renderPage(document.getElementById('col-left'), pagesLeft[pageLeft]);
	// if pages are now out of sync, auto-unsync
	if (synced && pageLeft !== pageRight) {
	// we still allow it — just update the indicator
	}
	} else {
	const np = pageRight + dir;
	if (np < 0 \|\| np >= pagesRight.length) return;
	pageRight = np;
	renderPage(document.getElementById('col-right'), pagesRight[pageRight]);
	}
	updateUI();
	}

	// ── Sync toggle ──
	function toggleSync() {
	synced = !synced;
	const btn = document.getElementById('sync-toggle');
	if (synced) {
	// re-align right to left
	pageRight = Math.min(pageLeft, pagesRight.length - 1);
	btn.textContent = '⇅ PAGES SYNCED';
	btn.className = 'sync-status synced';
	renderBoth();
	} else {
	btn.textContent = '⇅ INDEPENDENT';
	btn.className = 'sync-status unsynced';
	updateUI();
	}
	}

	// ── Stats ──
	function computeStats(r1, r2) {
	const scenes1 = r1.filter(x => isSceneHeading(x.line)).length;
	const scenes2 = r2.filter(x => isSceneHeading(x.line)).length;
	const matched1 = r1.filter(x => x.status === 'match').length;
	const pct = Math.round((matched1 / Math.max(r1.length, 1)) * 100);

	document.getElementById('st-scenes-1').textContent = scenes1;
	document.getElementById('st-scenes-2').textContent = scenes2;
	document.getElementById('st-scenes-cut').textContent = Math.max(0, scenes1 - scenes2);
	document.getElementById('st-lines-1').textContent = r1.length;
	document.getElementById('st-lines-2').textContent = r2.length;
	document.getElementById('st-lines-cut').textContent = Math.max(0, r1.length - r2.length);
	document.getElementById('st-match-pct').textContent = pct + '%';
	document.getElementById('st-pages').textContent = Math.max(pagesLeft.length, pagesRight.length);
	}

	// ── Scene jump ──
	function buildSceneJump(result) {
	const sel = document.getElementById('scene-jump');
	sel.innerHTML = '<option value="">— Scene —</option>';
	let pageIdx = 0;
	let lineCount = 0;
	result.forEach((item, idx) => {
	if (isSceneHeading(item.line)) {
	// figure out which page this scene is on
	let pg = 0, cumulative = 0;
	for (let p = 0; p < pagesLeft.length; p++) {
	if (cumulative + pagesLeft[p].length > idx) { pg = p; break; }
	cumulative += pagesLeft[p].length;
	}
	const opt = document.createElement('option');
	opt.value = pg;
	opt.textContent = `Pg ${pg+1} — ${item.line.slice(0, 45)}`;
	sel.appendChild(opt);
	}
	});
	}

	function jumpToScene(pgStr) {
	if (pgStr === '') return;
	const pg = parseInt(pgStr);
	pageLeft = Math.min(pg, pagesLeft.length - 1);
	pageRight = synced ? Math.min(pg, pagesRight.length - 1) : pageRight;
	renderBoth();
	}

	// ── Filter ──
	function setFilter(mode, btn) {
	currentFilter = mode;
	document.querySelectorAll('.tb-btn').forEach(b => b.classList.remove('active'));
	btn.classList.add('active');
	// re-render current pages with filter
	renderBoth();
	}

	// ── Run ──
	async function runComparison() {
	document.getElementById('loader').classList.add('visible');
	try {
	const [linesA, linesB] = await Promise.all([extractLines(files[1]), extractLines(files[2])]);
	const { resultA, resultB } = buildDiff(linesA, linesB);

	pagesLeft = paginateResult(resultA);
	pagesRight = paginateResult(resultB);
	pageLeft = 0;
	pageRight = 0;

	computeStats(resultA, resultB);
	buildSceneJump(resultA);

	document.getElementById('lbl1').textContent = files[1].name;
	document.getElementById('lbl2').textContent = files[2].name;

	document.getElementById('upload-view').style.display = 'none';
	document.getElementById('compare-view').classList.add('visible');
	document.getElementById('stats-bar').classList.add('visible');
	document.getElementById('toolbar').classList.add('visible');
	document.getElementById('page-bar').classList.add('visible');

	renderBoth();
	} catch(err) {
	alert('Error reading files: ' + err.message);
	}
	document.getElementById('loader').classList.remove('visible');
	}

	// ── Keyboard navigation ──
	document.addEventListener('keydown', e => {
	if (!document.getElementById('compare-view').classList.contains('visible')) return;
	if (e.key === 'ArrowRight' \|\| e.key === 'ArrowDown') { e.preventDefault(); goPage(+1); }
	if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowUp') { e.preventDefault(); goPage(-1); }
	});

	// ── Reset ──
	function resetTool() {
	files[1] = null; files[2] = null;
	['1','2'].forEach(n => {
	document.getElementById('card'+n).classList.remove('loaded','drag-over');
	document.getElementById('name'+n).textContent = 'Drop .docx here or click';
	document.getElementById('file'+n).value = '';
	});
	document.getElementById('compare-btn').classList.remove('visible');
	document.getElementById('upload-view').style.display = '';
	document.getElementById('compare-view').classList.remove('visible');
	document.getElementById('stats-bar').classList.remove('visible');
	document.getElementById('toolbar').classList.remove('visible');
	document.getElementById('page-bar').classList.remove('visible');
	document.getElementById('col-left').innerHTML = '';
	document.getElementById('col-right').innerHTML = '';
	pagesLeft = []; pagesRight = [];
	pageLeft = 0; pageRight = 0;
	synced = true; currentFilter = 'all';
	document.getElementById('sync-toggle').textContent = '⇅ PAGES SYNCED';
	document.getElementById('sync-toggle').className = 'sync-status synced';
	}
	</script>
	</body>
	</html>