abdulsalam2121
Add live browser screenshot panel for dashboard
99c2f3b
Raw
History Blame Contribute Delete
4.42 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ADM PURCHASING TOOLS</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
</head>
<body>
<div class="app-shell">
<header class="hero">
<div>
<p class="eyebrow">AdultDVDMarketplace Automation</p>
<h1>ADM PURCHASING TOOLS</h1>
<p class="hero-copy">Run the bot from your browser, watch live progress, and download the latest CSV when it finishes.</p>
</div>
<div class="hero-badge">
<span class="dot"></span>
<span id="connectionStatus">Ready</span>
</div>
</header>
<main class="layout">
<section class="panel panel-form">
<div class="panel-head">
<h2>Automation Settings</h2>
<p>Enter the credentials and the studio you want to scrape.</p>
</div>
<div id="errorBanner" class="banner banner-error hidden"></div>
<div id="successBanner" class="banner banner-success hidden"></div>
<form id="botForm" class="form-grid">
<label>
<span>Username</span>
<input id="username" name="username" type="text" value="{{ settings.username }}" autocomplete="username" />
</label>
<label>
<span>Password</span>
<input id="password" name="password" type="password" value="{{ settings.password }}" autocomplete="current-password" />
</label>
<label class="span-2">
<span>Studio Name or URL</span>
<input id="studio" name="studio" type="text" value="{{ settings.studio }}" placeholder="Studio name or direct studio URL (e.g. https://...)" />
</label>
<label>
<span>Minimum Price</span>
<input id="min_price" name="min_price" type="number" step="0.01" min="0" value="{{ settings.min_price }}" />
</label>
</form>
<div class="button-row">
<button id="startBtn" class="btn btn-primary" type="button">Start Bot</button>
<button id="stopBtn" class="btn btn-secondary" type="button" disabled>Stop Bot</button>
<button id="saveBtn" class="btn btn-tertiary" type="button">Save Settings</button>
<a id="downloadBtn" class="btn btn-outline" href="/download">Download Last CSV</a>
</div>
</section>
<section class="panel panel-status">
<div class="panel-head">
<h2>Live Status</h2>
<p>Updates every 2 seconds while the bot is running.</p>
</div>
<div class="cards">
<article class="status-card">
<span>Current State</span>
<strong id="currentState">Idle</strong>
</article>
<article class="status-card">
<span>Total Items Found</span>
<strong id="totalItems">0</strong>
</article>
<article class="status-card">
<span>Current Page</span>
<strong id="currentPage">0</strong>
</article>
<article class="status-card">
<span>Last Run Time</span>
<strong id="lastRunTime">-</strong>
</article>
</div>
<div class="progress-wrap">
<div class="progress-track">
<div id="progressBar" class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress-meta">
<span id="progressLabel">0%</span>
<span id="csvLabel">No CSV generated yet</span>
</div>
</div>
<div class="log-panel">
<div class="log-head">
<h3>Live Logs</h3>
<button id="clearLogsBtn" class="link-btn" type="button">Clear</button>
</div>
<pre id="logOutput" class="log-output">Waiting for the next run...</pre>
</div>
<div class="screenshot-panel">
<h3>Live Browser View</h3>
<div class="screenshot-wrap">
<img id="screenshotImg" src="/screenshot" alt="Latest screenshot" style="width:100%;border-radius:6px;display:block;" />
</div>
</div>
</section>
</main>
</div>
<script>
window.__INITIAL_SETTINGS__ = {{ settings | tojson }};
</script>
<script src="{{ url_for('static', filename='app.js') }}"></script>
</body>
</html>