153 lines
7.3 KiB
HTML
153 lines
7.3 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Ilia Dobkin — portfolio.spec.ts</title>
|
|
<meta name="description" content="Ilia Dobkin — Senior SDET portfolio, styled as a Playwright test runner." />
|
|
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="css/base.css" />
|
|
<link rel="stylesheet" href="css/app.css" />
|
|
</head>
|
|
<body>
|
|
<!-- ============== TOP BAR ============== -->
|
|
<header class="topbar" role="banner">
|
|
<div class="topbar__left">
|
|
<button class="btn btn--ghost menu-btn" id="menu-btn" aria-label="Open test explorer" title="Test Explorer">
|
|
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M2 4h12M2 8h12M2 12h12" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
|
|
</button>
|
|
<a class="brand" href="#" aria-label="Ilia Dobkin home">
|
|
<svg class="brand__logo" viewBox="0 0 32 32" fill="none" aria-hidden="true">
|
|
<!-- Custom mark: a play-triangle inside a soft rounded square, evoking a runner -->
|
|
<rect x="2" y="2" width="28" height="28" rx="7" fill="currentColor" opacity="0.12"/>
|
|
<rect x="2" y="2" width="28" height="28" rx="7" stroke="currentColor" stroke-width="1.5"/>
|
|
<path d="M13 10.5 L23 16 L13 21.5 Z" fill="#4ec9b0"/>
|
|
<circle cx="9" cy="16" r="1.4" fill="currentColor"/>
|
|
</svg>
|
|
<span class="brand__name">ilia.dobkin</span>
|
|
</a>
|
|
<span class="crumb"><span class="crumb__sep">/</span> tests <span class="crumb__sep">/</span> <strong>portfolio.spec.ts</strong></span>
|
|
</div>
|
|
|
|
<div class="topbar__center">
|
|
<div class="status-pill" id="status-pill">
|
|
<span class="dot dot--idle" id="status-dot"></span>
|
|
<span id="status-text">idle</span>
|
|
<span class="status-counts">
|
|
<span class="cnt cnt--pass" title="passed">✓ <em id="cnt-pass">0</em></span>
|
|
<span class="cnt cnt--fail" title="failed">✗ <em id="cnt-fail">0</em></span>
|
|
<span class="cnt cnt--skip" title="skipped">⊘ <em id="cnt-skip">0</em></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="topbar__right">
|
|
<button class="btn btn--run" id="run-all" title="Run all tests">
|
|
<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M4 3 L13 8 L4 13 Z" fill="currentColor"/></svg>
|
|
<span>Run all</span>
|
|
</button>
|
|
<button class="btn btn--ghost" id="stop-all" title="Stop" disabled>
|
|
<svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><rect x="3" y="3" width="10" height="10" rx="1.5" fill="currentColor"/></svg>
|
|
</button>
|
|
<button class="btn btn--ghost" id="reset-all" title="Reset">
|
|
<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M8 3.5a4.5 4.5 0 1 1-4.39 5.5" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/><path d="M8 1 L8 5 L4 5" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
<label class="toggle" title="Headed mode (slower animations)">
|
|
<input type="checkbox" id="headed" />
|
|
<span>--headed</span>
|
|
</label>
|
|
<button class="btn btn--ghost" id="theme-toggle" title="Toggle theme" aria-label="Toggle theme">
|
|
<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M11 8a3 3 0 1 1-3-3 3 3 0 0 0 3 3z" fill="currentColor"/></svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ============== MAIN LAYOUT ============== -->
|
|
<main class="layout">
|
|
<div class="sidebar-scrim" id="sidebar-scrim"></div>
|
|
<!-- Sidebar: Test Explorer -->
|
|
<aside class="sidebar" id="sidebar" aria-label="Test Explorer">
|
|
<div class="sidebar__head">
|
|
<span class="sidebar__title">TEST EXPLORER</span>
|
|
<button class="iconbtn" id="expand-all" title="Expand all" aria-label="Expand all"><svg viewBox="0 0 16 16" width="12" height="12"><path d="M3 6 L8 11 L13 6" stroke="currentColor" stroke-width="1.6" fill="none"/></svg></button>
|
|
</div>
|
|
|
|
<div class="filter">
|
|
<span class="filter__icon">⌕</span>
|
|
<input id="grep" type="text" placeholder='--grep "@playwright"' autocomplete="off" spellcheck="false" />
|
|
</div>
|
|
|
|
<div class="tags" id="tag-bar" aria-label="Filter by tag"></div>
|
|
|
|
<nav class="tree" id="tree" aria-label="Tests"></nav>
|
|
|
|
<div class="sidebar__foot">
|
|
<span>v1.0.0 · 9 tests</span>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Pane -->
|
|
<section class="main" aria-label="Test results">
|
|
<div class="tabs" role="tablist">
|
|
<button class="tab is-active" data-tab="report" role="tab">Report</button>
|
|
<button class="tab" data-tab="trace" role="tab">Trace</button>
|
|
<button class="tab" data-tab="source" role="tab">Source</button>
|
|
<button class="tab" data-tab="console" role="tab">Console</button>
|
|
<div class="tabs__spacer"></div>
|
|
<span class="tabs__meta" id="tabs-meta">portfolio.spec.ts · 9 tests</span>
|
|
</div>
|
|
|
|
<!-- Report -->
|
|
<div class="pane is-active" id="pane-report" role="tabpanel">
|
|
<div class="hero">
|
|
<div class="hero__tag">describe</div>
|
|
<h1 class="hero__title">Ilia Dobkin</h1>
|
|
<p class="hero__sub">Senior SDET · Toronto, ON · <span class="mono">test.describe("portfolio")</span></p>
|
|
<p class="hero__hint">Click the green <span class="kbd">▶</span> next to any test to run it — or press <span class="kbd">Run all</span> above.</p>
|
|
</div>
|
|
<div class="results" id="results"></div>
|
|
</div>
|
|
|
|
<!-- Trace -->
|
|
<div class="pane" id="pane-trace" role="tabpanel">
|
|
<div class="trace-head">
|
|
<div class="trace-head__title">Career timeline · trace viewer</div>
|
|
<div class="trace-head__meta"><span class="legend"><i class="sw sw--pass"></i> pass</span><span class="legend"><i class="sw sw--info"></i> milestone</span></div>
|
|
</div>
|
|
<div class="trace" id="trace"></div>
|
|
<div class="trace-rule"></div>
|
|
<div class="trace-axis" id="trace-axis"></div>
|
|
</div>
|
|
|
|
<!-- Source -->
|
|
<div class="pane" id="pane-source" role="tabpanel">
|
|
<div class="source" id="source"></div>
|
|
</div>
|
|
|
|
<!-- Console -->
|
|
<div class="pane" id="pane-console" role="tabpanel">
|
|
<div class="console" id="console"></div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- ============== BOTTOM STATUS BAR ============== -->
|
|
<footer class="statusbar" role="contentinfo">
|
|
<span class="sb__seg">⎇ main</span>
|
|
<span class="sb__seg">● 0</span>
|
|
<span class="sb__seg" id="sb-runtime">runtime: 0ms</span>
|
|
<span class="sb__spacer"></span>
|
|
<span class="sb__seg">TypeScript</span>
|
|
<span class="sb__seg">UTF-8</span>
|
|
<span class="sb__seg">LF</span>
|
|
<span class="sb__seg sb__seg--accent">Playwright 1.49</span>
|
|
</footer>
|
|
|
|
<script src="js/data.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|