create-issflow 1.2.1 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,126 +1,112 @@
1
1
  <!doctype html>
2
2
  <!--
3
- Client-facing proposal template (rendered by /propose from docs/PROPOSAL.md).
4
- HOW TO USE (agent): copy this file to docs/proposal.html and replace every
5
- {{PLACEHOLDER}}. LOCALISE the labels + content to the project's declared
6
- language (e.g. natural Thai) keep technical terms in English where a Thai dev
7
- team would. Light + print-friendly on purpose (Ctrl/Cmd-P "Save as PDF").
8
- Repeat the <tr> in the phases table per phase; repeat <li> lists as needed.
9
-
10
- WHITE-LABEL: this template is brand-neutral. Fill {{COMPANY}} / {{LOGO}} with the
11
- ISSUING company's brand (whoever is sending the proposal) — NOT the kit's. {{LOGO}}
12
- is optional: replace with an <img src="…"> or a text wordmark, or delete it.
13
- Icons: none by design (no emoji) — keep it clean and typographic.
3
+ Client-facing proposal ONE A4 PAGE (rendered by /propose from docs/PROPOSAL.md).
4
+ HOW TO USE (agent): copy to docs/proposal.html, replace every {{PLACEHOLDER}}, and
5
+ keep it to a SINGLE A4 page be terse (≈3–6 phases, ≈4 assumptions). Localise the
6
+ CONTENT to the project language; the section labels are bilingual (TH / EN) already.
7
+ WHITE-LABEL: fill {{COMPANY}} / {{LOGO}} with the ISSUING company's brand (not the
8
+ kit's). {{LOGO}} optional: an <img src="…">, an SVG, or delete to keep the monogram.
9
+ Print: Ctrl/Cmd-P → A4 → "Save as PDF" (fits one page).
14
10
  -->
15
11
  <html lang="{{LANG}}">
16
12
  <head>
17
13
  <meta charset="utf-8" />
18
- <meta name="viewport" content="width=device-width, initial-scale=1" />
19
14
  <title>{{TITLE}} — Proposal {{VERSION}}</title>
20
15
  <style>
21
- :root{ --ink:#1a2230; --muted:#5b6878; --line:#e3e8f0; --accent:#5b4cf0;
22
- --accent2:#0ea5b7; --bg:#fff; --soft:#f6f8fc;
23
- --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Thai",system-ui,sans-serif;
24
- --mono:ui-monospace,Menlo,Consolas,monospace; }
16
+ @page { size: A4; margin: 0 }
17
+ :root{
18
+ --ink:#162033; --muted:#5d6a7d; --line:#dbe3ee; --soft:#f6f8fb;
19
+ --violet:#635bff; --green:#15803d;
20
+ --sans:"Inter","Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
21
+ --mono:ui-monospace,Menlo,Consolas,monospace;
22
+ }
25
23
  *{box-sizing:border-box}
26
- body{margin:0;background:var(--soft);color:var(--ink);font-family:var(--sans);line-height:1.6}
27
- .sheet{max-width:880px;margin:24px auto;background:var(--bg);border:1px solid var(--line);
28
- border-radius:14px;overflow:hidden}
29
- .head{padding:34px 40px;border-bottom:3px solid var(--accent);
30
- background:linear-gradient(120deg,#f3f1ff,#eafcff)}
31
- .brand-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:1rem}
32
- .brand-row .logo{display:inline-flex;align-items:center}
33
- .head .ey{font:600 .72rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
34
- .head h1{margin:.3em 0 .1em;font-size:1.9rem;letter-spacing:-.02em}
35
- .head .meta{color:var(--muted);font-size:.9rem}
36
- main{padding:14px 40px 40px}
37
- section{padding:20px 0;border-bottom:1px solid var(--line)}
38
- section:last-child{border:none}
39
- h2{font-size:1.05rem;margin:0 0 .5em;display:flex;align-items:center;gap:9px}
40
- h2::before{content:"";width:10px;height:10px;border-radius:3px;
41
- background:linear-gradient(120deg,var(--accent),var(--accent2))}
42
- table{width:100%;border-collapse:collapse;font-size:.92rem}
43
- th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
44
- th{background:var(--soft);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
45
- td.num,th.num{text-align:right;font-family:var(--mono)}
46
- tfoot td{font-weight:700;border-top:2px solid var(--ink);border-bottom:none}
47
- ul{margin:.2em 0;padding-left:1.2em} li{margin:.2em 0;color:var(--muted)}
48
- .total{font-size:1.5rem;font-weight:800}
49
- .total small{font-size:.8rem;color:var(--muted);font-weight:500}
50
- .cols{display:flex;gap:32px;flex-wrap:wrap} .cols>div{flex:1;min-width:220px}
51
- .sign{display:flex;gap:40px;flex-wrap:wrap;margin-top:10px}
52
- .sign div{flex:1;min-width:220px} .line{border-bottom:1px solid var(--ink);height:34px;margin-top:18px}
53
- .muted{color:var(--muted)} .pill{display:inline-block;font:600 .7rem/1 var(--mono);
54
- padding:3px 8px;border-radius:6px;background:var(--soft);border:1px solid var(--line);color:var(--muted)}
55
- footer{padding:18px 40px;color:var(--muted);font-size:.8rem;background:var(--soft)}
56
- @media print{ body{background:#fff} .sheet{margin:0;border:none;border-radius:0;max-width:none}
57
- .head{background:#fff} section{break-inside:avoid} }
24
+ body{margin:0;background:#e9edf3;color:var(--ink);font-family:var(--sans);font-size:10.5px;line-height:1.45}
25
+ .sheet{width:210mm;min-height:297mm;margin:10mm auto;background:#fff;padding:15mm 16mm;display:flex;flex-direction:column;gap:11px}
26
+ .lbl{color:var(--muted);font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:0 0 3px}
27
+ .lbl em{font-style:normal;opacity:.6;font-weight:600}
28
+ h1{font-size:21px;margin:0;letter-spacing:-.3px;line-height:1.1}
29
+ .muted{color:var(--muted)} ul{margin:0;padding-left:15px} li{margin:1.5px 0}
30
+ hr{border:none;border-top:1px solid var(--line);margin:0}
31
+
32
+ /* header */
33
+ .head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--ink);padding-bottom:11px}
34
+ .co{display:flex;align-items:center;gap:10px}
35
+ .logo{width:42px;height:42px;border-radius:9px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 auto;overflow:hidden}
36
+ .logo img{width:100%;height:100%;object-fit:contain}
37
+ .co .name{font-weight:800;font-size:15px;line-height:1.15}
38
+ .co .tag{color:var(--muted);font-size:9px}
39
+ .head .meta{text-align:right;font-size:9px;color:var(--muted)}
40
+ .head .meta .big{font:800 12px/1.2 var(--sans);letter-spacing:.12em;color:var(--violet)}
41
+ .pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:2px 8px;font:800 8px/1 var(--mono);color:var(--muted);margin-top:4px}
42
+
43
+ .cols{display:flex;gap:18px} .cols>div{flex:1;min-width:0}
44
+ table{width:100%;border-collapse:collapse;font-size:10px}
45
+ th,td{text-align:left;padding:5px 7px;border-bottom:1px solid var(--line)}
46
+ th{background:var(--soft);font-size:8px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
47
+ td.n,th.n{text-align:right;font-family:var(--mono)}
48
+ tfoot td{font-weight:800;border-top:1.5px solid var(--ink);border-bottom:none}
49
+ .total{display:flex;align-items:baseline;justify-content:space-between;background:var(--soft);border-radius:9px;padding:9px 13px}
50
+ .total .amt{font-size:19px;font-weight:800} .total .amt small{font-size:9px;color:var(--muted);font-weight:600}
51
+
52
+ .sign{display:flex;gap:34px;margin-top:auto;padding-top:14px}
53
+ .sign>div{flex:1} .line{border-bottom:1px solid var(--ink);height:30px} .sign .lbl{margin-top:5px}
54
+ footer{border-top:1px solid var(--line);padding-top:8px;color:var(--muted);font-size:8.5px;display:flex;justify-content:space-between}
55
+ @media print{ body{background:#fff} .sheet{margin:0;min-height:auto;box-shadow:none} }
58
56
  </style>
59
57
  </head>
60
58
  <body>
61
59
  <div class="sheet">
60
+
62
61
  <div class="head">
63
- <div class="brand-row"><span class="logo">{{LOGO}}</span><strong>{{COMPANY}}</strong></div>
64
- <div class="ey">Proposal · {{VERSION}}</div>
62
+ <div class="co">
63
+ <span class="logo">{{LOGO}}</span>
64
+ <span><span class="name">{{COMPANY}}</span><br><span class="tag">{{COMPANY_TAGLINE}}</span></span>
65
+ </div>
66
+ <div class="meta">
67
+ <div class="big">PROPOSAL</div>
68
+ {{VERSION}} · {{DATE}}<br><span class="pill">{{STATUS}}</span>
69
+ </div>
70
+ </div>
71
+
72
+ <div>
73
+ <p class="lbl">ใบเสนอราคา <em>Prepared for</em></p>
65
74
  <h1>{{TITLE}}</h1>
66
- <div class="meta">{{L_PREPARED_FOR}} {{CLIENT}} · {{DATE}} · <span class="pill">{{STATUS}}</span></div>
75
+ <p class="muted" style="margin:3px 0 0">{{CLIENT}} {{SUMMARY}}</p>
67
76
  </div>
68
- <main>
69
- <section>
70
- <h2>{{L_OVERVIEW}}</h2>
71
- <p class="muted">{{SUMMARY}}</p>
72
- </section>
73
77
 
74
- <section>
75
- <h2>{{L_SCOPE}}</h2>
76
- <div class="cols">
77
- <div><strong>{{L_IN_SCOPE}}</strong><ul>{{SCOPE_IN_ITEMS}}</ul></div>
78
- <div><strong>{{L_OUT_SCOPE}}</strong><ul>{{SCOPE_OUT_ITEMS}}</ul></div>
79
- </div>
80
- </section>
78
+ <div class="cols">
79
+ <div><p class="lbl">ขอบเขตงาน <em>In scope</em></p><ul>{{SCOPE_IN_ITEMS}}</ul></div>
80
+ <div><p class="lbl">นอกขอบเขต <em>Out of scope</em></p><ul>{{SCOPE_OUT_ITEMS}}</ul></div>
81
+ </div>
82
+
83
+ <div>
84
+ <p class="lbl">เฟส &amp; ค่าใช้จ่าย <em>Phases &amp; cost</em></p>
85
+ <table>
86
+ <thead><tr><th>เฟส <em style="font-style:normal;opacity:.5">Phase</em></th><th>Complexity</th><th class="n">Effort</th><th class="n">Cost</th></tr></thead>
87
+ <tbody>{{PHASE_ROWS}}<!-- <tr><td>1. Auth</td><td>M</td><td class="n">2–3d</td><td class="n">฿16k–24k</td></tr> --></tbody>
88
+ <tfoot><tr><td colspan="2">รวม <em style="font-style:normal;opacity:.5">Total</em></td><td class="n">{{TOTAL_EFFORT}}</td><td class="n">{{TOTAL_COST}}</td></tr></tfoot>
89
+ </table>
90
+ </div>
81
91
 
82
- <section>
83
- <h2>{{L_PHASES}}</h2>
84
- <table>
85
- <thead><tr>
86
- <th>{{L_PHASE}}</th><th>{{L_COMPLEXITY}}</th>
87
- <th class="num">{{L_EFFORT}}</th><th class="num">{{L_COST}}</th>
88
- </tr></thead>
89
- <tbody>
90
- {{PHASE_ROWS}}
91
- <!-- e.g. <tr><td>1. Auth</td><td>M</td><td class="num">2–3d</td><td class="num">฿16,000–24,000</td></tr> -->
92
- </tbody>
93
- <tfoot><tr><td colspan="2">{{L_TOTAL}}</td><td class="num">{{TOTAL_EFFORT}}</td><td class="num">{{TOTAL_COST}}</td></tr></tfoot>
94
- </table>
95
- <p class="total" style="margin-top:14px">{{TOTAL_COST}} <small>{{CONTINGENCY_NOTE}}</small></p>
96
- </section>
92
+ <div class="total">
93
+ <span><span class="lbl" style="margin:0">ราคารวม <em>Total</em></span><br><span class="muted" style="font-size:9px">{{TIMELINE}}</span></span>
94
+ <span class="amt">{{TOTAL_COST}} <small>{{CONTINGENCY_NOTE}}</small></span>
95
+ </div>
97
96
 
98
- <section>
99
- <h2>{{L_TIMELINE}}</h2>
100
- <p class="muted">{{TIMELINE}}</p>
101
- </section>
97
+ <div class="cols">
98
+ <div><p class="lbl">สมมุติฐาน <em>Assumptions</em></p><ul>{{ASSUMPTION_ITEMS}}</ul></div>
99
+ <div><p class="lbl">ข้อยกเว้น <em>Exclusions</em></p><ul>{{EXCLUSION_ITEMS}}</ul></div>
100
+ </div>
102
101
 
103
- <section>
104
- <div class="cols">
105
- <div><h2>{{L_ASSUMPTIONS}}</h2><ul>{{ASSUMPTION_ITEMS}}</ul></div>
106
- <div><h2>{{L_EXCLUSIONS}}</h2><ul>{{EXCLUSION_ITEMS}}</ul></div>
107
- </div>
108
- </section>
102
+ <div><p class="lbl">เงื่อนไขการชำระเงิน <em>Payment</em></p><p class="muted" style="margin:0">{{PAYMENT_ITEMS}}</p></div>
109
103
 
110
- <section>
111
- <h2>{{L_PAYMENT}}</h2>
112
- <ul>{{PAYMENT_ITEMS}}</ul>
113
- </section>
104
+ <div class="sign">
105
+ <div><div class="line"></div><p class="lbl">ลงนามลูกค้า <em>Client sign-off</em></p></div>
106
+ <div><div class="line"></div><p class="lbl">วันที่ <em>Date</em></p></div>
107
+ </div>
114
108
 
115
- <section>
116
- <h2>{{L_SIGNOFF}}</h2>
117
- <div class="sign">
118
- <div><div class="line"></div><div class="muted">{{L_CLIENT_SIGN}}</div></div>
119
- <div><div class="line"></div><div class="muted">{{L_DATE}}</div></div>
120
- </div>
121
- </section>
122
- </main>
123
- <footer>{{FOOTER}}</footer>
109
+ <footer><span>{{COMPANY}} · {{FOOTER}}</span><span>{{VERSION}}</span></footer>
124
110
  </div>
125
111
  </body>
126
112
  </html>