-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
143 lines (134 loc) · 7.83 KB
/
Copy pathindex.html
File metadata and controls
143 lines (134 loc) · 7.83 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: blob:; connect-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none';" />
<meta name="description" content="A CPG-style pre-handoff QA checklist for student-built deliverables." />
<title>QA Gatekeeper · Volta OSS</title>
<link rel="icon" href="./favicon.svg" type="image/svg+xml" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<a class="skip-link" href="#main-content">Skip to main content</a>
<noscript><div class="panel" style="margin:1rem">This local-first workspace requires JavaScript to run calculators, exports, and certification tools.</div></noscript>
<header class="hero">
<nav class="nav" aria-label="Project">
<div class="brand"><span class="logo">V</span> VOLTA OSS</div>
<div><span id="repo-number"></span> · <span id="category"></span></div>
</nav>
<section class="hero-grid">
<div>
<p class="eyebrow" id="metric-label"></p>
<h1 id="app-title">QA Gatekeeper</h1>
<p class="tagline" id="app-tagline">A CPG-style pre-handoff QA checklist for student-built deliverables.</p>
<div class="pill-row" id="modules" role="list" aria-label="Modules"></div>
</div>
<aside class="hero-card" aria-label="Workflow">
<p class="eyebrow">Workflow</p>
<ul id="workflow"></ul>
</aside>
</section>
</header>
<main id="main-content" data-print-title="QA Gatekeeper · Volta OSS">
<section class="toolbar" aria-label="Workspace actions">
<div>
<strong>Local-first workspace</strong>
<div class="muted" id="autosave">Autosave ready</div>
</div>
<div class="button-row">
<button id="sample" class="secondary">Load Sample</button>
<button id="export-json">Export JSON</button>
<button id="export-md">Export Markdown</button>
<button id="export-saas-md">Export SaaS Blueprint</button>
<button id="copy-md" class="secondary">Copy Markdown</button>
<button id="print" class="secondary">Print Report</button>
<button id="reset" class="secondary">Reset</button>
</div>
</section>
<section class="grid">
<aside class="panel">
<h2>Project setup</h2>
<p class="muted" id="privacy-note"></p>
<form id="project-form" class="form-grid">
<label>Client / organization<input name="clientName" placeholder="e.g. Riverside Bakery" /></label>
<label>Volta chapter<input name="chapter" placeholder="Jacksonville" /></label>
<label>Student lead<input name="studentLead" placeholder="Lead name" /></label>
<label>Target user<input name="targetUser" /></label>
<label class="full">Notes<textarea name="notes" rows="4" placeholder="Discovery notes, constraints, owner needs..."></textarea></label>
</form>
<div class="panel score-card" style="margin-top:1rem">
<div class="score-ring" id="score-ring" role="meter" aria-label="Readiness score" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-live="polite"><strong id="score">0</strong></div>
<div><h2 id="score-label">Not ready</h2><p class="muted">Score updates from the rubric below.</p></div>
</div>
<div class="panel" style="margin-top:1rem">
<h2>Readiness warnings</h2>
<ul id="warnings" class="warning-list" aria-live="polite"></ul>
</div>
<form id="approval-form" class="panel approvals" style="margin-top:1rem">
<h2>Review gate</h2>
<label><input type="checkbox" name="studentReview" id="studentReview" /> Student review complete</label>
<label><input type="checkbox" name="mentorReview" id="mentorReview" /> Mentor / QA review complete</label>
<label><input type="checkbox" name="ownerApproval" id="ownerApproval" /> Owner / client approval complete</label>
</form>
</aside>
<section>
<div class="panel">
<h2>Production rubric</h2>
<div id="criteria"></div>
</div>
<div class="panel" style="margin-top:1rem">
<h2>Evidence locker</h2>
<div class="two-col no-print">
<label>Evidence title<input id="evidence-title" placeholder="Screenshot, interview, source..." /></label>
<label>Evidence detail<input id="evidence-detail" placeholder="What does it prove?" /></label>
</div>
<p class="no-print"><button id="add-evidence" class="secondary">Add Evidence</button></p>
<div id="evidence-list"></div>
</div>
<div class="panel" style="margin-top:1rem">
<h2>Next actions</h2>
<div id="actions"></div>
</div>
<div class="panel saas-dashboard" style="margin-top:1rem">
<div class="saas-head">
<div>
<p class="eyebrow">Standalone SaaS OS</p>
<h2>SaaS growth dashboard</h2>
<p class="muted">Turn this local-first tool into a packaged product with segments, experiments, success motions, pricing, and governance.</p>
</div>
<div class="risk-badge">Risk: <strong id="saas-risk">—</strong></div>
</div>
<div id="saas-profile" class="saas-profile"></div>
<div id="saas-kpis" class="saas-kpis" aria-label="SaaS KPIs"></div>
<div class="saas-grid">
<section><h3>Customer segments</h3><div id="saas-segments" class="saas-list"></div></section>
<section><h3>Persona matrix</h3><div id="saas-personas" class="saas-list"></div></section>
<section><h3>Lifecycle journeys</h3><div id="saas-journeys" class="saas-list"></div></section>
<section><h3>Feature packaging</h3><div id="saas-feature-packaging" class="saas-list"></div></section>
<section><h3>Growth experiments</h3><div id="saas-experiments" class="saas-list"></div></section>
<section><h3>Revenue model</h3><div id="saas-revenue" class="saas-list"></div></section>
<section><h3>Analytics plan</h3><div id="saas-analytics" class="saas-list"></div></section>
<section><h3>Customer success board</h3><div id="saas-board" class="saas-list"></div></section>
<section><h3>Success playbooks</h3><div id="saas-success-playbooks" class="saas-list"></div></section>
<section><h3>Integration catalog</h3><div id="saas-integrations" class="saas-list"></div></section>
<section><h3>30/60/90 milestones</h3><div id="saas-milestones" class="saas-list"></div></section>
<section><h3>Expansion roadmap</h3><div id="saas-expansion-roadmap" class="saas-list"></div></section>
<section><h3>Automation backlog</h3><div id="saas-automations" class="saas-list"></div></section>
<section><h3>Pricing ladder</h3><div id="saas-pricing" class="saas-list"></div></section>
<section><h3>Security model</h3><div id="saas-security" class="saas-list"></div></section>
<section><h3>Investor / sponsor brief</h3><div id="saas-investor-brief" class="saas-list"></div></section>
</div>
</div>
</section>
</section>
</main>
<footer class="footer">Designed in Jacksonville. Coded globally. Built for digital equity.</footer>
<script type="module" src="./src/app.js"></script>
<script type="module" src="./src/domain-app.js"></script>
<script type="module" src="./src/v1-app.js"></script>
<script type="module" src="./src/v3-app.js"></script>
</body>
</html>