APIScribe/options.html at main · devloperAditya/APIScribe · GitHub

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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>APIScribe — Settings</title>
  <link rel="stylesheet" href="options.css" />
</head>
<body>
  <div class="page">

    <!-- Header -->
    <div class="page-header">
      <div class="header-inner">
        <div class="logo-mark">
          <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="44" height="44" rx="12" fill="url(#optGrad)"/>
            <path d="M13 32 L17 14 H19.5 L22 21.5 L24.5 14 H27 L31 32 H28.5 L27.2 27 H16.8 L15.5 32 Z" fill="white" opacity="0.95"/>
            <rect x="17.5" y="20" width="9" height="1.8" rx="0.9" fill="url(#optGrad)"/>
            <circle cx="33.5" cy="10.5" r="4.5" fill="#f44336"/>
            <circle cx="33.5" cy="10.5" r="2.5" fill="#ff5252"/>
            <defs>
              <linearGradient id="optGrad" x1="0" y1="0" x2="44" y2="44" gradientUnits="userSpaceOnUse">
                <stop offset="0%" stop-color="#2979FF"/>
                <stop offset="100%" stop-color="#0d47a1"/>
              </linearGradient>
            </defs>
          </svg>
        </div>
        <div class="logo-text">
          <h1>APIScribe</h1>
          <p class="subtitle">Configure what is captured and how the file is saved.</p>
        </div>
        <div class="header-chip">Settings</div>
      </div>
    </div>

    <!-- File format -->
    <section class="card">
      <div class="card-title">
        <span class="card-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
        </span>
        <h2>Output File Format</h2>
      </div>
      <div class="radio-group">
        <label class="option-row">
          <input type="radio" name="format" value="txt" />
          <div class="option-text">
            <div class="option-title">
              <strong>Plain Text</strong> <code>.txt</code>
            </div>
            <p>Human-readable, fixed-width report. Great for pasting into tickets.</p>
          </div>
        </label>
        <label class="option-row">
          <input type="radio" name="format" value="markdown" />
          <div class="option-text">
            <div class="option-title">
              <strong>Markdown</strong> <code>.md</code>
            </div>
            <p>Structured report with tables and fenced code blocks. Renders in GitHub, Confluence, Notion, etc.</p>
          </div>
        </label>
      </div>
    </section>

    <!-- Capture options -->
    <section class="card">
      <div class="card-title">
        <span class="card-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
        </span>
        <h2>Fields to Capture</h2>
      </div>
      <p class="section-hint">
        <strong>Request URL</strong> and <strong>HTTP Method</strong> are always included.
      </p>

      <div class="checkbox-group">

        <label class="option-row always-on">
          <span class="custom-checkbox checked-disabled">
            <svg width="10" height="10" viewBox="0 0 12 12" fill="none"><polyline points="2,6 5,9 10,3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </span>
          <input type="checkbox" checked disabled hidden />
          <div class="option-text">
            <div class="option-title">
              <strong>Request URL</strong>
              <span class="badge">Always on</span>
            </div>
          </div>
        </label>

        <label class="option-row always-on">
          <span class="custom-checkbox checked-disabled">
            <svg width="10" height="10" viewBox="0 0 12 12" fill="none"><polyline points="2,6 5,9 10,3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </span>
          <input type="checkbox" checked disabled hidden />
          <div class="option-text">
            <div class="option-title">
              <strong>HTTP Method</strong>
              <span class="badge">Always on</span>
            </div>
          </div>
        </label>

        <label class="option-row">
          <span class="custom-checkbox" id="cb-captureTimestamp"></span>
          <input type="checkbox" id="captureTimestamp" hidden />
          <div class="option-text">
            <div class="option-title"><strong>Timestamp</strong></div>
            <p>ISO 8601 date/time when the request was initiated.</p>
          </div>
        </label>

        <label class="option-row">
          <span class="custom-checkbox" id="cb-captureLatency"></span>
          <input type="checkbox" id="captureLatency" hidden />
          <div class="option-text">
            <div class="option-title"><strong>Latency (ms)</strong></div>
            <p>Total round-trip time for the request.</p>
          </div>
        </label>

        <label class="option-row">
          <span class="custom-checkbox" id="cb-captureResponseStatus"></span>
          <input type="checkbox" id="captureResponseStatus" hidden />
          <div class="option-text">
            <div class="option-title"><strong>Response Status Code</strong></div>
            <p>e.g. <code>200 OK</code>, <code>404 Not Found</code>.</p>
          </div>
        </label>

        <label class="option-row">
          <span class="custom-checkbox" id="cb-captureRequestBody"></span>
          <input type="checkbox" id="captureRequestBody" hidden />
          <div class="option-text">
            <div class="option-title"><strong>Request Payload / Body</strong></div>
            <p>POST / PUT / PATCH body. JSON is pretty-printed automatically.</p>
          </div>
        </label>

        <label class="option-row">
          <span class="custom-checkbox" id="cb-captureRequestHeaders"></span>
          <input type="checkbox" id="captureRequestHeaders" hidden />
          <div class="option-text">
            <div class="option-title"><strong>Request Headers</strong></div>
            <p>Includes Authorization, Content-Type, custom headers, etc.</p>
          </div>
        </label>

        <label class="option-row">
          <span class="custom-checkbox" id="cb-captureResponseBody"></span>
          <input type="checkbox" id="captureResponseBody" hidden />
          <div class="option-text">
            <div class="option-title"><strong>Response Body</strong></div>
            <p>Full response payload. JSON is pretty-printed automatically.</p>
          </div>
        </label>

        <label class="option-row">
          <span class="custom-checkbox" id="cb-captureResponseHeaders"></span>
          <input type="checkbox" id="captureResponseHeaders" hidden />
          <div class="option-text">
            <div class="option-title"><strong>Response Headers</strong></div>
            <p>Includes Content-Type, Cache-Control, custom response headers, etc.</p>
          </div>
        </label>

      </div>
    </section>

    <!-- Actions -->
    <div class="actions">
      <button id="saveBtn" class="btn btn-primary">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
        Save Settings
      </button>
      <button id="resetBtn" class="btn btn-secondary">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-3.54"/></svg>
        Reset to Defaults
      </button>
    </div>

    <div id="toast" class="toast" aria-live="polite"></div>

    <!-- Footer -->
    <footer class="footer">
      <p class="footer-love">Made with <span class="heart">❤</span> by the community, for the community</p>
      <p class="footer-credit">
        Built by <a href="https://adityanandedkar.com" target="_blank" rel="noopener noreferrer">Aditya Nandedkar</a>
      </p>
      <p class="footer-credit">
        <a href="https://github.com/adityanandedkar/api-evidence-collector" target="_blank" rel="noopener noreferrer">GitHub</a>
      </p>
    </footer>

  </div>

  <script src="options.js"></script>
</body>
</html>