alexandrev/WPSidekick
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
3a66d687e13e4a429bddbc8da3285be9cdec5d38
WPSidekick/internal/api/ui/index.html
T
alexandrev-tibco 3a66d687e1 Minor updates
2026-02-20 16:21:18 +01:00

373 lines
21 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<title>WPSideKick</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="app">
<header class="header">
<div class="brand">
<img class="logo" src="logo.svg" alt="WPSideKick" />
<div>
<h1>WPSideKick</h1>
<div class="sub"><span id="site-label">-</span> · v<span id="server-version">-</span></div>
</div>
</div>
<div class="header-actions">
<div class="site-switch">
<label for="site-select">Site</label>
<select id="site-select"></select>
</div>
<button id="refresh-all" class="secondary">Refresh All</button>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme">
<svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
<svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</button>
</div>
</header>
<nav class="top-nav" id="top-nav">
<button class="tab active" data-page="overview">Overview</button>
<button class="tab" data-page="ops">Ops</button>
<button class="tab" data-page="growth">Growth</button>
<button class="tab" data-page="health">Health</button>
<button class="tab" data-page="seo">SEO</button>
<button class="tab" data-page="audit">Audit</button>
</nav>
<div class="layout">
<aside class="sidebar">
<div class="side-card">
<h2>Navigation</h2>
<button class="nav-link" data-page="overview">
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="7" height="7"></rect>
<rect x="14" y="3" width="7" height="7"></rect>
<rect x="14" y="14" width="7" height="7"></rect>
<rect x="3" y="14" width="7" height="7"></rect>
</svg>
Overview
</button>
<button class="nav-link" data-page="ops">
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
<path d="M9 14l2 2 4-4"></path>
</svg>
Ops Queue
</button>
<button class="nav-link" data-page="growth">
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M23 6l-9.5 9.5-5-5L1 18"></path>
<path d="M17 6h6v6"></path>
</svg>
Growth
</button>
<button class="nav-link" data-page="health">
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
Health
</button>
<button class="nav-link" data-page="seo">
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<path d="M21 21l-4.35-4.35"></path>
</svg>
SEO Focus
</button>
<button class="nav-link" data-page="audit">
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></polyline>
</svg>
Audit Log
</button>
</div>
<div class="side-card">
<h2>Quick Actions</h2>
<button class="nav-link" id="generate-ideas">
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 18h6"></path>
<path d="M10 22h4"></path>
<path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"></path>
</svg>
Generate Ideas
</button>
<button class="nav-link" id="generate-outreach">
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
Generate Outreach
</button>
<button class="nav-link" id="generate-newsletter">
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
</svg>
Generate Newsletter
</button>
</div>
<div class="side-card">
<h2>Alerts</h2>
<div id="outreach-alert" class="alert hidden"></div>
<p class="meta muted">Notifications appear here.</p>
</div>
</aside>
<main class="content">
<section class="command section" data-page="overview">
<label for="command-input">Command Bar</label>
<div class="command-row">
<input id="command-input" placeholder="Type a command... (e.g., pending, seo-audit scan)" />
<button id="command-run">Run</button>
</div>
<div id="command-suggestions" class="command-suggestions"></div>
<pre id="command-output" class="output"></pre>
</section>
<section id="section-ops" class="section" data-page="ops">
<div class="section-header">
<h2>Ops Queue</h2>
<p>Review and approve drafts, handle missing translations.</p>
</div>
<div class="card-grid">
<div class="panel" id="panel-pending">
<div class="panel-header">
<h3>Pending Drafts</h3>
<button id="refresh-pending" class="secondary sm">Refresh</button>
</div>
<div class="loading-container">
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div><div class="skeleton-actions"><div class="skeleton skeleton-button"></div><div class="skeleton skeleton-button"></div></div></div>
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div><div class="skeleton-actions"><div class="skeleton skeleton-button"></div><div class="skeleton skeleton-button"></div></div></div>
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div><div class="skeleton-actions"><div class="skeleton skeleton-button"></div><div class="skeleton skeleton-button"></div></div></div>
</div>
<div id="pending-list" class="list"></div>
<div id="pending-pagination" class="list-footer"></div>
</div>
<div class="panel" id="panel-orphans">
<div class="panel-header">
<h3>Orphan Posts</h3>
<button id="refresh-orphans" class="secondary sm">Refresh</button>
</div>
<div id="orphans-summary" class="meta muted" style="padding: 12px 16px 0;"></div>
<div class="loading-container">
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div><div class="skeleton-actions"><div class="skeleton skeleton-button"></div></div></div>
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div><div class="skeleton-actions"><div class="skeleton skeleton-button"></div></div></div>
</div>
<div id="orphans-list" class="list"></div>
<div id="orphans-pagination" class="list-footer"></div>
</div>
</div>
</section>
<section id="section-growth" class="section" data-page="growth">
<div class="section-header">
<h2>Growth</h2>
<p>Content ideas, outreach opportunities, and newsletter drafts.</p>
</div>
<div class="card-grid">
<div class="panel" id="panel-ideas">
<div class="panel-header">
<h3>Content Ideas</h3>
<button id="refresh-ideas" class="secondary sm">Refresh</button>
</div>
<div class="loading-container">
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div><div class="skeleton-actions"><div class="skeleton skeleton-button"></div><div class="skeleton skeleton-button"></div></div></div>
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div><div class="skeleton-actions"><div class="skeleton skeleton-button"></div><div class="skeleton skeleton-button"></div></div></div>
</div>
<div id="ideas-list" class="list"></div>
<div id="ideas-pagination" class="list-footer"></div>
</div>
<div class="panel" id="panel-outreach">
<div class="panel-header">
<h3>Outreach</h3>
<div class="panel-actions">
<select id="outreach-status-filter" class="sm">
<option value="new">New</option>
<option value="drafted">Drafted</option>
<option value="reviewed">Reviewed</option>
<option value="dismissed">Dismissed</option>
<option value="all">All</option>
</select>
<button id="refresh-outreach" class="secondary sm">Refresh</button>
</div>
</div>
<div class="loading-container">
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div><div class="skeleton-actions"><div class="skeleton skeleton-button"></div></div></div>
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div><div class="skeleton-actions"><div class="skeleton skeleton-button"></div></div></div>
</div>
<div id="outreach-list" class="list"></div>
<div id="outreach-pagination" class="list-footer"></div>
</div>
<div class="panel" id="panel-newsletter">
<div class="panel-header">
<h3>Newsletter Drafts</h3>
<button id="refresh-newsletter" class="secondary sm">Refresh</button>
</div>
<div class="loading-container">
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div><div class="skeleton-actions"><div class="skeleton skeleton-button"></div></div></div>
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div><div class="skeleton-actions"><div class="skeleton skeleton-button"></div></div></div>
</div>
<div id="newsletter-list" class="list"></div>
<div id="newsletter-pagination" class="list-footer"></div>
</div>
</div>
</section>
<section id="section-health" class="section" data-page="health">
<div class="section-header">
<h2>Site Health</h2>
<p>Monitor broken links and image issues across your site.</p>
</div>
<div class="card-grid">
<div class="panel" id="panel-broken-links">
<div class="panel-header">
<h3>Broken Links</h3>
<div class="panel-actions">
<button id="scan-broken-links" class="sm">Scan Now</button>
<button id="refresh-broken-links" class="secondary sm">Refresh</button>
</div>
</div>
<div id="broken-links-summary" class="meta muted" style="padding: 12px 16px 0;"></div>
<div class="loading-container">
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div></div>
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div></div>
</div>
<div id="broken-links-list" class="list"></div>
<div id="broken-links-pagination" class="list-footer"></div>
</div>
<div class="panel" id="panel-image-audit">
<div class="panel-header">
<h3>Image Audit</h3>
<div class="panel-actions">
<button id="scan-image-audit" class="sm">Scan Now</button>
<button id="refresh-image-audit" class="secondary sm">Refresh</button>
</div>
</div>
<div id="image-audit-summary" class="meta muted" style="padding: 12px 16px 0;"></div>
<div class="loading-container">
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div></div>
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div></div>
</div>
<div class="subsection">
<h4>External Images</h4>
<div id="image-audit-external-list" class="list"></div>
<div id="image-audit-external-pagination" class="list-footer"></div>
</div>
<div class="subsection">
<h4>Featured Image Mismatches</h4>
<div id="image-audit-featured-list" class="list"></div>
<div id="image-audit-featured-pagination" class="list-footer"></div>
</div>
</div>
</div>
</section>
<section id="section-seo" class="section" data-page="seo">
<div class="section-header">
<h2>SEO Focus</h2>
<p>Optimize titles, descriptions, and fix SEO issues.</p>
</div>
<div class="card-grid">
<div class="panel" id="panel-seo-audit">
<div class="panel-header">
<h3>SEO Audit</h3>
<div class="panel-actions">
<button id="scan-seo-audit" class="sm">Scan Now</button>
<button id="refresh-seo-audit" class="secondary sm">Refresh</button>
</div>
</div>
<div style="padding: 12px 16px;">
<label class="checkbox">
<input id="seo-auto-apply" type="checkbox" />
Auto-apply changes after generation
</label>
<div class="meta muted" style="margin-top: 8px;">When enabled, optimizations are applied immediately without preview.</div>
</div>
<div id="seo-audit-summary" class="meta muted" style="padding: 0 16px 12px;"></div>
<div class="loading-container">
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div><div class="skeleton-actions"><div class="skeleton skeleton-button"></div><div class="skeleton skeleton-button"></div></div></div>
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div><div class="skeleton-actions"><div class="skeleton skeleton-button"></div><div class="skeleton skeleton-button"></div></div></div>
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div><div class="skeleton-actions"><div class="skeleton skeleton-button"></div><div class="skeleton skeleton-button"></div></div></div>
</div>
<div id="seo-audit-list" class="list"></div>
<div id="seo-audit-pagination" class="list-footer"></div>
</div>
</div>
</section>
<section id="section-audit" class="section" data-page="audit">
<div class="section-header">
<h2>Audit Log</h2>
<p>Track all actions and changes in the system.</p>
</div>
<div class="card-grid">
<div class="panel" id="panel-audit">
<div class="panel-header">
<h3>Recent Activity</h3>
<button id="refresh-audit" class="secondary sm">Refresh</button>
</div>
<div class="loading-container">
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div></div>
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div></div>
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div></div>
<div class="skeleton-item"><div class="skeleton skeleton-title"></div><div class="skeleton skeleton-meta"></div></div>
</div>
<div id="audit-list" class="list"></div>
<div id="audit-pagination" class="list-footer"></div>
</div>
</div>
</section>
</main>
</div>
</div>
<div id="modal" class="modal hidden">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<h3 id="modal-title">Draft</h3>
<div id="modal-links" class="modal-links hidden"></div>
</div>
<div class="modal-actions">
<div class="toggle" id="modal-toggle">
<button id="modal-mode-full" class="active">Full</button>
<button id="modal-mode-compare">Compare</button>
</div>
<button id="modal-close" class="secondary">Close</button>
</div>
</div>
<div id="modal-body" class="modal-body"></div>
</div>
</div>
<script src="ui-utils.js"></script>
<script src="app.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink