Skip to content

Commit 166e7d6

Browse files
mturacmturac
committed
Add PH screenshot mockups (terminal + dashboard)
1 parent adc9437 commit 166e7d6

2 files changed

Lines changed: 176 additions & 0 deletions

File tree

‎docs/screenshot-dashboard.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<style>
6+
*{margin:0;padding:0;box-sizing:border-box;}
7+
body{background:#0e0e0e;font-family:-apple-system,'Inter',sans-serif;color:#f0f0f0;min-height:100vh;}
8+
nav{background:#111;border-bottom:1px solid #1e1e1e;padding:0 32px;height:56px;display:flex;align-items:center;justify-content:space-between;}
9+
.logo{font-size:15px;font-weight:700;color:#fff;}
10+
.logo span{color:#0066ff;}
11+
.nav-r{display:flex;gap:12px;align-items:center;}
12+
.btn{background:#0066ff;color:#fff;border:none;padding:7px 16px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;}
13+
.main{padding:36px 40px;}
14+
.page-title{font-size:22px;font-weight:700;margin-bottom:6px;}
15+
.page-sub{color:#666;font-size:13px;margin-bottom:32px;}
16+
.stats{display:flex;gap:20px;margin-bottom:32px;}
17+
.stat-card{background:#141414;border:1px solid #1e1e1e;border-radius:10px;padding:20px 24px;flex:1;}
18+
.stat-num{font-size:28px;font-weight:700;}
19+
.stat-label{font-size:12px;color:#555;margin-top:4px;}
20+
.blue{color:#0066ff;} .green{color:#00e676;} .yellow{color:#ffd600;} .cyan{color:#00d4ff;}
21+
table{width:100%;border-collapse:collapse;}
22+
th{text-align:left;padding:10px 16px;font-size:11px;color:#555;font-weight:500;border-bottom:1px solid #1a1a1a;text-transform:uppercase;letter-spacing:.05em;}
23+
td{padding:14px 16px;border-bottom:1px solid #141414;font-size:13.5px;}
24+
tr:hover td{background:#141414;}
25+
.name{font-weight:600;}
26+
.score-bar{display:flex;align-items:center;gap:10px;}
27+
.bar-bg{flex:1;height:5px;background:#1e1e1e;border-radius:3px;max-width:100px;}
28+
.bar-fill{height:5px;border-radius:3px;background:#0066ff;}
29+
.bar-fill.high{background:#00e676;}
30+
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;}
31+
.badge.complete{background:rgba(0,230,118,.1);color:#00e676;}
32+
.badge.pending{background:rgba(255,214,0,.1);color:#ffd600;}
33+
.badge.progress{background:rgba(0,102,255,.1);color:#0066ff;}
34+
.action{color:#0066ff;font-size:12px;cursor:pointer;}
35+
</style>
36+
</head>
37+
<body>
38+
<nav>
39+
<div class="logo">Assessment<span>.</span></div>
40+
<div class="nav-r">
41+
<span style="color:#555;font-size:13px">Acme Corp</span>
42+
<button class="btn">+ New Interview</button>
43+
</div>
44+
</nav>
45+
<div class="main">
46+
<div class="page-title">Candidates</div>
47+
<div class="page-sub">Senior Frontend Engineer · 4 evaluated · 2 shortlisted</div>
48+
<div class="stats">
49+
<div class="stat-card"><div class="stat-num blue">4</div><div class="stat-label">Total evaluated</div></div>
50+
<div class="stat-card"><div class="stat-num green">2</div><div class="stat-label">Shortlisted</div></div>
51+
<div class="stat-card"><div class="stat-num yellow">1</div><div class="stat-label">Pending review</div></div>
52+
<div class="stat-card"><div class="stat-num cyan">87</div><div class="stat-label">Avg score</div></div>
53+
</div>
54+
<table>
55+
<thead>
56+
<tr>
57+
<th>Candidate</th>
58+
<th>Overall</th>
59+
<th>Problem Solving</th>
60+
<th>Communication</th>
61+
<th>Technical</th>
62+
<th>Cultural</th>
63+
<th>Status</th>
64+
<th></th>
65+
</tr>
66+
</thead>
67+
<tbody>
68+
<tr>
69+
<td><div class="name">Alex Chen</div><div style="color:#555;font-size:12px;margin-top:2px">May 3 · 14:22</div></td>
70+
<td><strong class="green">91</strong></td>
71+
<td><div class="score-bar"><span>91</span><div class="bar-bg"><div class="bar-fill high" style="width:91%"></div></div></div></td>
72+
<td><div class="score-bar"><span>88</span><div class="bar-bg"><div class="bar-fill high" style="width:88%"></div></div></div></td>
73+
<td><div class="score-bar"><span>94</span><div class="bar-bg"><div class="bar-fill high" style="width:94%"></div></div></div></td>
74+
<td><div class="score-bar"><span>89</span><div class="bar-bg"><div class="bar-fill high" style="width:89%"></div></div></div></td>
75+
<td><span class="badge complete">Complete</span></td>
76+
<td><span class="action">View report →</span></td>
77+
</tr>
78+
<tr>
79+
<td><div class="name">Sara Kim</div><div style="color:#555;font-size:12px;margin-top:2px">May 3 · 11:05</div></td>
80+
<td><strong class="green">84</strong></td>
81+
<td><div class="score-bar"><span>84</span><div class="bar-bg"><div class="bar-fill" style="width:84%"></div></div></div></td>
82+
<td><div class="score-bar"><span>91</span><div class="bar-bg"><div class="bar-fill high" style="width:91%"></div></div></div></td>
83+
<td><div class="score-bar"><span>79</span><div class="bar-bg"><div class="bar-fill" style="width:79%"></div></div></div></td>
84+
<td><div class="score-bar"><span>82</span><div class="bar-bg"><div class="bar-fill" style="width:82%"></div></div></div></td>
85+
<td><span class="badge complete">Complete</span></td>
86+
<td><span class="action">View report →</span></td>
87+
</tr>
88+
<tr>
89+
<td><div class="name">Marcus Webb</div><div style="color:#555;font-size:12px;margin-top:2px">May 4 · 09:30</div></td>
90+
<td><strong style="color:#ffd600">—</strong></td>
91+
<td><div style="color:#444;font-size:12px">in progress</div></td>
92+
<td><div style="color:#444;font-size:12px">in progress</div></td>
93+
<td><div style="color:#444;font-size:12px">in progress</div></td>
94+
<td><div style="color:#444;font-size:12px">in progress</div></td>
95+
<td><span class="badge progress">In Progress</span></td>
96+
<td></td>
97+
</tr>
98+
<tr>
99+
<td><div class="name">Priya Nair</div><div style="color:#555;font-size:12px;margin-top:2px">May 2 · 16:48</div></td>
100+
<td><strong style="color:#ffd600">71</strong></td>
101+
<td><div class="score-bar"><span>68</span><div class="bar-bg"><div class="bar-fill" style="width:68%;background:#ffd600"></div></div></div></td>
102+
<td><div class="score-bar"><span>75</span><div class="bar-bg"><div class="bar-fill" style="width:75%;background:#ffd600"></div></div></div></td>
103+
<td><div class="score-bar"><span>70</span><div class="bar-bg"><div class="bar-fill" style="width:70%;background:#ffd600"></div></div></div></td>
104+
<td><div class="score-bar"><span>72</span><div class="bar-bg"><div class="bar-fill" style="width:72%;background:#ffd600"></div></div></div></td>
105+
<td><span class="badge pending">Pending</span></td>
106+
<td><span class="action">View report →</span></td>
107+
</tr>
108+
</tbody>
109+
</table>
110+
</div>
111+
</body>
112+
</html>

‎docs/screenshot-terminal.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<style>
6+
* { margin:0; padding:0; box-sizing:border-box; }
7+
body { background:#0e0e0e; display:flex; align-items:center; justify-content:center; min-height:100vh; font-family:'SF Mono','Fira Code',monospace; }
8+
.window { width:780px; border-radius:14px; overflow:hidden; box-shadow:0 40px 80px rgba(0,0,0,0.8); border:1px solid #2a2a2a; }
9+
.bar { background:#1e1e1e; padding:14px 18px; display:flex; align-items:center; gap:8px; border-bottom:1px solid #2a2a2a; }
10+
.dot { width:13px; height:13px; border-radius:50%; }
11+
.r{background:#ff5f57} .y{background:#febc2e} .g{background:#28c840}
12+
.title { color:#555; font-size:12px; margin-left:auto; margin-right:auto; }
13+
.body { background:#0a0a0a; padding:28px 32px; font-size:13.5px; line-height:2; }
14+
.prompt { color:#0066ff; }
15+
.cmd { color:#f0f0f0; }
16+
.dim { color:#444; }
17+
.gate { color:#888; }
18+
.cyan { color:#00d4ff; }
19+
.green { color:#00e676; }
20+
.red { color:#ff1744; }
21+
.bold { font-weight:700; }
22+
.spacer { height:10px; }
23+
</style>
24+
</head>
25+
<body>
26+
<div class="window">
27+
<div class="bar">
28+
<span class="dot r"></span>
29+
<span class="dot y"></span>
30+
<span class="dot g"></span>
31+
<span class="title">product-init — zsh</span>
32+
</div>
33+
<div class="body">
34+
<div><span class="prompt">❯</span> <span class="cmd">/product-init "build an HR assessment tool"</span></div>
35+
<div class="dim"> → 3 questions. AI drafts the rest.</div>
36+
<div class="spacer"></div>
37+
<div><span class="gate">Gate 1</span> <span class="cyan bold">Discovery Constitution</span></div>
38+
<div><span class="green"> ✓</span> JTBD defined — hiring manager needs evidence-based scoring</div>
39+
<div><span class="green"> ✓</span> Four-risk model: feasibility · viability · usability · business</div>
40+
<div><span class="green"> ✓</span> Kill criteria documented</div>
41+
<div><span class="green"> ✓ Gate 1 passed → Gate 2 unlocked</span></div>
42+
<div class="spacer"></div>
43+
<div><span class="gate">Gate 2</span> <span class="cyan bold">Statement of Work</span></div>
44+
<div><span class="green"> ✓</span> Appetite: 2-week Shape Up cycle</div>
45+
<div><span class="green"> ✓</span> PR-FAQ: success metric measurable</div>
46+
<div><span class="green"> ✓ Gate 2 passed → Gate 3 unlocked</span></div>
47+
<div class="spacer"></div>
48+
<div><span class="gate">Gate 5</span> <span class="cyan bold">QA</span></div>
49+
<div><span class="green"> ✓</span> unit 42/42 passed</div>
50+
<div><span class="green"> ✓</span> integration 18/18 passed</div>
51+
<div><span class="green"> ✓</span> e2e 7/7 passed</div>
52+
<div><span class="green"> ✓ Gate 5 passed → Gate 6 unlocked</span></div>
53+
<div class="spacer"></div>
54+
<div><span class="gate">Gate 7</span> <span class="cyan bold">Deploy</span></div>
55+
<div><span class="green"> ✓</span> demorpoject.vercel.app → HTTP 200</div>
56+
<div><span class="green"> ✓</span> smoke job passed · rollback documented</div>
57+
<div><span class="green"> ✓ Gate 7 passed → Gate 8 unlocked</span></div>
58+
<div class="spacer"></div>
59+
<div class="spacer"></div>
60+
<div><span class="green bold"> CRITICAL: 0 · HIGH: 0 · All 9 gates: green</span></div>
61+
</div>
62+
</div>
63+
</body>
64+
</html>

0 commit comments

Comments
 (0)