@mahe_pkm/buzl-capi 0.1.2 → 0.1.3

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.
@@ -3,37 +3,34 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>BUZL - CAPI Suite — Enterprise Conversion API & Form Tracking</title>
6
+ <title>BUZL - CAPI Suite — Conversions API &amp; Form Tracking</title>
7
7
  <link rel="stylesheet" href="style.css">
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
10
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
11
11
  </head>
12
12
  <body>
13
- <!-- Inline SVG Vector Sprite: Official Brand Logos & Developer Precision Icons (100% SVG Only) -->
13
+ <!-- Inline SVG Vector Sprite: Official Brand Logos & Precision Developer Icons -->
14
14
  <svg class="svg-sprite" xmlns="http://www.w3.org/2000/svg" style="display: none;" aria-hidden="true">
15
- <!-- Official Google Tag Manager Brand Logo -->
16
- <symbol id="icon-brand-gtm" viewBox="0 0 24 24">
17
- <path fill="#24C1E0" d="M12.913 0H3.348A3.348 3.348 0 0 0 0 3.348v17.304A3.348 3.348 0 0 0 3.348 24h17.304A3.348 3.348 0 0 0 24 20.652V11.087L12.913 0z"/>
18
- <path fill="#4285F4" d="M12.913 0L24 11.087v9.565A3.348 3.348 0 0 1 20.652 24H9.565L20.652 12.913V3.348A3.348 3.348 0 0 0 17.304 0h-4.391z"/>
19
- <circle fill="#FFFFFF" cx="14.935" cy="10.043" r="2.826"/>
20
- <circle fill="#FFFFFF" cx="17.761" cy="17.174" r="1.087"/>
15
+ <!-- Google Tag Manager Logo (Official Google Marketing Platform Vectors) -->
16
+ <symbol id="icon-brand-gtm" viewBox="0 0 256 256">
17
+ <path fill="#8ab4f8" d="m150.262 245.516l-44.437-43.331l95.433-97.454l46.007 45.091z"/>
18
+ <path fill="#4285f4" d="M150.45 53.938L106.176 8.731L9.36 104.629c-12.48 12.48-12.48 32.713 0 45.207l95.36 95.986l45.09-42.182l-72.654-76.407z"/>
19
+ <path fill="#8ab4f8" d="m246.625 105.37l-96-96c-12.494-12.494-32.756-12.494-45.25 0s-12.495 32.757 0 45.252l96 96c12.494 12.494 32.756 12.494 45.25 0s12.495-32.757 0-45.251"/>
20
+ <circle cx="127.265" cy="224.731" r="31.273" fill="#246fdb"/>
21
21
  </symbol>
22
22
 
23
- <!-- Official Meta Infinity Ribbon Brand Logo -->
24
- <symbol id="icon-brand-meta" viewBox="0 0 24 24">
25
- <path fill="#0081FB" d="M6.915 4.03C3.097 4.03 0 7.17 0 11.042c0 5.093 4.314 9.07 9.453 9.07 3.013 0 5.518-1.42 7.027-3.6 1.51 2.18 4.014 3.6 7.027 3.6 5.14 0 9.453-3.977 9.453-9.07 0-3.872-3.097-7.012-6.915-7.012-3.155 0-5.875 1.76-7.565 4.364C12.79 5.79 10.07 4.03 6.915 4.03zm0 2.82c2.083 0 3.93 1.258 5.085 3.195-1.155 1.936-3.002 3.194-5.085 3.194-2.316 0-4.195-1.905-4.195-4.229 0-2.324 1.88-4.16 4.195-4.16zm10.17 0c2.315 0 4.195 1.836 4.195 4.16 0 2.324-1.88 4.23-4.195 4.23-2.083 0-3.93-1.258-5.085-3.194 1.155-1.937 3.002-3.195 5.085-3.195z"/>
23
+ <!-- Meta Logo (Official Unclipped Infinity Ribbon) -->
24
+ <symbol id="icon-brand-meta" viewBox="0 0 16 16">
25
+ <path fill="#0081FB" fill-rule="evenodd" d="M8.217 5.243C9.145 3.988 10.171 3 11.483 3 13.96 3 16 6.153 16.001 9.907c0 2.29-.986 3.725-2.757 3.725-1.543 0-2.395-.866-3.924-3.424l-.667-1.123-.118-.197a55 55 0 0 0-.53-.877l-1.178 2.08c-1.673 2.925-2.615 3.541-3.923 3.541C1.086 13.632 0 12.217 0 9.973 0 6.388 1.995 3 4.598 3q.477-.001.924.122c.31.086.611.22.913.407.577.359 1.154.915 1.782 1.714m1.516 2.224q-.378-.615-.727-1.133L9 6.326c.845-1.305 1.543-1.954 2.372-1.954 1.723 0 3.102 2.537 3.102 5.653 0 1.188-.39 1.877-1.195 1.877-.773 0-1.142-.51-2.61-2.87zM4.846 4.756c.725.1 1.385.634 2.34 2.001A212 212 0 0 0 5.551 9.3c-1.357 2.126-1.826 2.603-2.581 2.603-.777 0-1.24-.682-1.24-1.9 0-2.602 1.298-5.264 2.846-5.264q.137 0 .27.018"/>
26
26
  </symbol>
27
27
 
28
- <!-- Official Buzl Emblem (Orbit & Constellation from buzl-logo.svg) -->
29
- <symbol id="icon-brand-buzl" viewBox="40 70 450 440">
30
- <path fill="#3B5FF5" d="M249.68,80.45C132.05,90.69,45.17,194.55,55.55,312.54,67.54,448.8,202.16,539,332.92,498.29c24.49-7.61,24.49-7.61,24.49-32.69v-4.83c2-30.15-5.38-57-28.64-77.67-5.91-5.24-4.67-8.09-.39-12.84,30.28-33.62,84.8-30.1,111.2,7,4.19,5.89,4.63,10.59.38,16.33-4.4,5.95-8.1,12.4-12.45,18.38-12.45,17.1-27.88,31.16-45,43.44-4.81,3.44-7.14,7.89-3.07,13.1,3.6,4.61,8.29,4.27,12.86,1,1-.76,2.12-1.47,3.16-2.23,53.4-39.53,83.63-92.52,88.2-158.44C492.86,175.83,382.62,68.89,249.68,80.45ZM453.16,364.8c-3.62-.53-4.7-4-6.72-6.16-36.74-39.77-98.42-38.55-133,3.06-4.2,5.06-7.2,6.28-13.52,3.76a78.11,78.11,0,0,0-43.7-4.46c-3.28.6-8.62-.8-9.19,4.31-.55,4.9,8.4,12.87,12.78,12.41,30.23-3.18,53.56,8.28,70.12,33.41,8.83,13.4,10.88,28.58,10.7,44.36-.26,23.47,0,23.47-23.12,29.2-82.44,20.49-168-13-213.77-83.24-3.91-6-4-10.57-.77-16.64,14.22-27,45-42.14,75.76-36.71,29.83,5.26,54.47,31.2,57.42,61.3,1.07,10.86.41,21.88.84,32.81.18,4.43-1.87,6.26-5.8,7.38-10.35,3-19.65.57-28.77-4.53-4.29-2.39-3.48-5.7-2.9-9.12A69.2,69.2,0,0,1,218,399.43a12.44,12.44,0,0,0-1.52-18.59c-2.71-2-4.07-.16-5.68,1.34-18.6,17.28-28.85,38.4-29.47,63.94a10.43,10.43,0,0,0,3.54,8.59c15.52,13.77,44.45,17,63,6.94,3.29-1.77,6.07-4,6-8-.23-16.4,1.53-32.91-1.06-49.19-5.74-36.09-32.16-64.52-66.55-72.44-35.51-8.17-71,5.41-92.78,35.49-1.26,1.74-2.5,3.5-4.52,6.35C51.43,289,77,192.21,150.61,136c70.94-54.13,171.78-52.61,242.73,4.08C467.65,199.46,482.27,296.27,453.16,364.8Z"/>
31
- <circle cx="166" cy="273" r="23" fill="#3B5FF5"/>
32
- <circle cx="269" cy="303" r="23" fill="#F59E0B"/>
33
- <circle cx="373" cy="273" r="23" fill="#3B5FF5"/>
28
+ <!-- Official Buzl Emblem (Traced directly from web.gobuzl.com) -->
29
+ <symbol id="icon-brand-buzl" viewBox="0 0 224 224">
30
+ <path fill="var(--buzl-logo-primary, #004aad)" fill-rule="evenodd" d="M104 1 L120 1 L120 2 L129 2 L129 3 L135 3 L135 4 L143 5 L143 6 L152 8 L152 9 L154 9 L154 10 L157 10 L157 11 L159 11 L159 12 L165 14 L166 16 L172 18 L172 19 L175 20 L177 23 L179 23 L181 26 L183 26 L183 27 L198 41 L198 43 L202 46 L202 48 L204 49 L204 51 L205 51 L206 54 L208 55 L208 57 L209 57 L209 59 L210 59 L212 65 L213 65 L213 67 L214 67 L214 70 L215 70 L215 72 L216 72 L218 81 L219 81 L219 85 L220 85 L220 89 L221 89 L221 94 L222 94 L222 102 L223 102 L223 122 L222 122 L222 130 L221 130 L221 135 L220 135 L219 143 L218 143 L218 146 L217 146 L215 155 L214 155 L214 157 L213 157 L213 159 L212 159 L212 161 L211 161 L211 163 L210 163 L208 169 L206 170 L206 172 L204 173 L204 175 L202 176 L202 178 L199 180 L199 182 L198 182 L182 199 L180 199 L180 200 L179 200 L178 202 L176 202 L175 204 L170 204 L170 203 L168 202 L168 197 L171 196 L173 193 L175 193 L178 189 L180 189 L180 188 L189 180 L189 178 L193 175 L193 173 L196 171 L196 169 L197 169 L198 166 L200 165 L200 163 L201 163 L201 161 L202 161 L202 158 L201 158 L201 156 L198 154 L198 152 L197 152 L194 148 L192 148 L190 145 L188 145 L188 144 L186 144 L186 143 L184 143 L184 142 L178 141 L178 140 L161 140 L161 141 L158 141 L158 142 L156 142 L156 143 L153 143 L152 145 L148 146 L148 147 L140 154 L140 156 L148 163 L148 165 L149 165 L150 168 L152 169 L152 171 L153 171 L153 173 L154 173 L154 176 L155 176 L155 178 L156 178 L156 182 L157 182 L157 213 L154 214 L154 215 L152 215 L152 216 L143 218 L143 219 L139 219 L139 220 L135 220 L135 221 L130 221 L130 222 L121 222 L121 223 L101 223 L101 222 L94 222 L94 221 L88 221 L88 220 L84 220 L84 219 L81 219 L81 218 L77 218 L77 217 L75 217 L75 216 L69 215 L69 214 L67 214 L67 213 L65 213 L65 212 L63 212 L63 211 L61 211 L61 210 L55 208 L54 206 L52 206 L51 204 L49 204 L48 202 L46 202 L44 199 L42 199 L42 198 L25 182 L25 180 L22 178 L22 176 L20 175 L20 173 L19 173 L18 170 L16 169 L16 167 L15 167 L15 165 L14 165 L14 163 L13 163 L13 161 L12 161 L10 155 L9 155 L9 152 L8 152 L8 149 L7 149 L7 146 L6 146 L6 143 L5 143 L5 139 L4 139 L4 135 L3 135 L3 130 L2 130 L2 121 L1 121 L1 103 L2 103 L2 94 L3 94 L3 89 L4 89 L5 81 L6 81 L8 72 L9 72 L9 70 L10 70 L10 67 L11 67 L11 65 L12 65 L12 63 L13 63 L15 57 L17 56 L18 52 L19 52 L20 49 L23 47 L23 45 L26 43 L26 41 L27 41 L41 26 L43 26 L45 23 L47 23 L47 22 L48 22 L49 20 L51 20 L52 18 L58 16 L59 14 L65 12 L65 11 L67 11 L67 10 L70 10 L70 9 L72 9 L72 8 L81 6 L81 5 L85 5 L85 4 L89 4 L89 3 L95 3 L95 2 L104 2 L104 1 Z M103 10 L102 10 L102 11 L95 11 L95 12 L90 12 L90 13 L82 14 L82 15 L76 16 L76 17 L74 17 L74 18 L71 18 L71 19 L69 19 L69 20 L67 20 L67 21 L65 21 L65 22 L63 22 L63 23 L61 23 L60 25 L56 26 L56 27 L53 28 L51 31 L49 31 L45 36 L43 36 L43 37 L36 43 L36 45 L31 49 L31 51 L28 53 L28 55 L26 56 L25 60 L23 61 L22 65 L21 65 L21 67 L20 67 L20 69 L19 69 L19 71 L18 71 L18 73 L17 73 L16 79 L15 79 L15 82 L14 82 L14 85 L13 85 L12 94 L11 94 L11 102 L10 102 L10 122 L11 122 L11 129 L12 129 L13 139 L14 139 L14 142 L15 142 L15 145 L16 145 L16 148 L17 148 L18 153 L20 153 L20 151 L23 149 L23 147 L24 147 L30 140 L32 140 L33 138 L37 137 L38 135 L41 135 L41 134 L43 134 L43 133 L50 132 L50 131 L67 131 L67 132 L72 132 L72 133 L74 133 L74 134 L77 134 L77 135 L83 137 L85 140 L87 140 L87 141 L95 148 L95 150 L96 150 L97 153 L99 154 L100 159 L101 159 L101 161 L102 161 L103 169 L104 169 L104 197 L103 197 L102 199 L100 199 L100 200 L93 201 L93 202 L81 202 L81 201 L78 201 L78 200 L76 200 L76 199 L70 197 L69 195 L67 195 L67 192 L66 192 L66 191 L67 191 L67 182 L68 182 L70 173 L71 173 L72 169 L74 168 L74 166 L76 165 L76 163 L77 163 L83 156 L86 158 L86 160 L87 160 L87 162 L88 162 L88 165 L87 165 L87 166 L82 170 L82 172 L80 173 L80 175 L79 175 L79 177 L78 177 L78 180 L77 180 L77 183 L76 183 L76 188 L75 188 L75 189 L78 190 L78 191 L80 191 L80 192 L82 192 L82 193 L86 193 L86 194 L87 194 L87 193 L93 193 L93 192 L95 192 L95 169 L94 169 L93 162 L92 162 L91 158 L89 157 L89 155 L88 155 L80 146 L78 146 L77 144 L75 144 L75 143 L73 143 L73 142 L70 142 L70 141 L67 141 L67 140 L50 140 L50 141 L44 142 L44 143 L40 144 L39 146 L37 146 L37 147 L28 155 L28 157 L27 157 L27 159 L26 159 L24 165 L26 166 L26 168 L28 169 L28 171 L31 173 L31 175 L35 178 L35 180 L36 180 L44 189 L46 189 L49 193 L51 193 L51 194 L52 194 L53 196 L55 196 L56 198 L60 199 L61 201 L65 202 L65 203 L67 203 L67 204 L69 204 L69 205 L71 205 L71 206 L73 206 L73 207 L76 207 L76 208 L79 208 L79 209 L82 209 L82 210 L85 210 L85 211 L94 212 L94 213 L101 213 L101 214 L123 214 L123 213 L129 213 L129 212 L134 212 L134 211 L142 210 L142 209 L145 209 L145 208 L148 208 L148 207 L149 207 L149 188 L148 188 L147 179 L146 179 L144 173 L142 172 L142 170 L141 170 L133 161 L131 161 L131 160 L125 158 L125 157 L117 156 L117 155 L107 155 L107 156 L104 156 L100 148 L102 148 L102 147 L108 147 L108 146 L116 146 L116 147 L126 148 L126 149 L129 149 L129 150 L132 151 L132 150 L134 149 L134 147 L135 147 L141 140 L143 140 L144 138 L148 137 L149 135 L152 135 L152 134 L154 134 L154 133 L161 132 L161 131 L179 131 L179 132 L183 132 L183 133 L185 133 L185 134 L188 134 L188 135 L194 137 L196 140 L198 140 L198 141 L207 149 L207 148 L208 148 L208 145 L209 145 L209 142 L210 142 L210 139 L211 139 L212 130 L213 130 L213 123 L214 123 L214 101 L213 101 L213 94 L212 94 L211 85 L210 85 L210 82 L209 82 L207 73 L206 73 L206 71 L205 71 L205 69 L204 69 L204 67 L203 67 L203 65 L202 65 L202 63 L201 63 L201 61 L199 60 L198 56 L197 56 L196 53 L193 51 L193 49 L189 46 L189 44 L188 44 L181 36 L179 36 L175 31 L173 31 L171 28 L169 28 L168 26 L164 25 L163 23 L161 23 L161 22 L159 22 L159 21 L157 21 L157 20 L155 20 L155 19 L153 19 L153 18 L151 18 L151 17 L142 15 L142 14 L138 14 L138 13 L134 13 L134 12 L129 12 L129 11 L122 11 L122 10 L103 10 Z M54 81 L64 81 L64 82 L69 83 L70 85 L72 85 L72 86 L76 89 L76 91 L77 91 L77 93 L78 93 L78 96 L79 96 L79 108 L78 108 L78 111 L76 112 L76 114 L75 114 L71 119 L69 119 L68 121 L65 121 L65 122 L57 123 L57 122 L52 122 L52 121 L46 119 L46 118 L41 114 L41 112 L40 112 L40 110 L39 110 L39 107 L38 107 L38 97 L39 97 L40 91 L43 89 L44 86 L46 86 L47 84 L49 84 L49 83 L51 83 L51 82 L54 82 L54 81 Z M160 81 L170 81 L170 82 L173 82 L173 83 L177 84 L178 86 L180 86 L180 87 L182 88 L182 90 L184 91 L185 96 L186 96 L186 107 L185 107 L185 110 L184 110 L183 114 L182 114 L178 119 L176 119 L176 120 L174 120 L174 121 L172 121 L172 122 L164 123 L164 122 L156 121 L155 119 L153 119 L153 118 L148 114 L148 112 L147 112 L147 110 L146 110 L146 108 L145 108 L145 96 L146 96 L147 91 L149 90 L149 88 L150 88 L152 85 L154 85 L155 83 L160 82 L160 81 Z M56 90 L53 91 L53 92 L51 92 L51 93 L49 94 L49 96 L48 96 L48 98 L47 98 L47 106 L48 106 L48 108 L49 108 L52 112 L54 112 L54 113 L56 113 L56 114 L61 114 L61 113 L64 113 L65 111 L68 110 L68 108 L70 107 L71 101 L70 101 L69 95 L68 95 L65 91 L63 91 L63 90 L56 90 Z M162 90 L159 91 L159 92 L155 95 L154 100 L153 100 L153 103 L154 103 L154 106 L155 106 L155 108 L156 108 L157 111 L159 111 L160 113 L163 113 L163 114 L168 114 L168 113 L172 112 L172 111 L176 108 L176 106 L177 106 L177 97 L176 97 L176 95 L175 95 L173 92 L171 92 L171 91 L169 91 L169 90 L162 90 Z M108 96 L116 96 L116 97 L119 97 L119 98 L122 98 L123 100 L125 100 L125 101 L129 104 L129 106 L131 107 L131 110 L132 110 L132 113 L133 113 L133 121 L132 121 L132 124 L131 124 L129 130 L128 130 L125 134 L123 134 L123 135 L121 135 L121 136 L119 136 L119 137 L115 137 L115 138 L105 137 L105 136 L101 135 L100 133 L98 133 L98 132 L95 130 L95 128 L94 128 L94 126 L93 126 L93 124 L92 124 L92 120 L91 120 L91 114 L92 114 L92 110 L93 110 L95 104 L96 104 L99 100 L101 100 L102 98 L105 98 L105 97 L108 97 L108 96 Z M110 105 L109 105 L109 106 L106 106 L106 107 L101 111 L100 120 L101 120 L101 123 L102 123 L105 127 L109 128 L109 129 L115 129 L115 128 L119 127 L119 126 L123 123 L124 114 L123 114 L123 111 L122 111 L118 106 L110 105 Z"/>
34
31
  </symbol>
35
32
 
36
- <!-- Official Google Sheets Document & Grid Brand Logo -->
33
+ <!-- Google Sheets Logo -->
37
34
  <symbol id="icon-brand-sheets" viewBox="0 0 24 24">
38
35
  <path fill="#0F9D58" d="M14.5 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V7.5L14.5 2z"/>
39
36
  <path fill="#87CEAB" d="M14 2v6h6L14 2z"/>
@@ -41,25 +38,25 @@
41
38
  <path fill="#0B8043" d="M17 11h-3v5h3v-5zm-5 0H9v5h3v-5z" opacity="0.3"/>
42
39
  </symbol>
43
40
 
44
- <!-- Official Zoho Corporate 4-Tile Brand Logo -->
41
+ <!-- Zoho Logo (Accessible High-Contrast Strokes) -->
45
42
  <symbol id="icon-brand-zoho" viewBox="0 0 24 24">
46
43
  <rect x="2" y="3" width="8.5" height="8.5" rx="1.5" fill="#E53935"/>
47
- <path d="M4.5 5.2h3.5L5.2 9.3h2.8" stroke="#FFFFFF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
44
+ <path d="M4.5 5.2h3.5L5.2 9.3h2.8" stroke="#FFFFFF" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
48
45
  <rect x="13.5" y="3" width="8.5" height="8.5" rx="1.5" fill="#43A047"/>
49
- <circle cx="17.75" cy="7.25" r="2" stroke="#FFFFFF" stroke-width="1.2" fill="none"/>
46
+ <circle cx="17.75" cy="7.25" r="2" stroke="#FFFFFF" stroke-width="1.3" fill="none"/>
50
47
  <rect x="2" y="12.5" width="8.5" height="8.5" rx="1.5" fill="#1E88E5"/>
51
- <path d="M4.8 14.5v4.5M7.7 14.5v4.5M4.8 16.7h2.9" stroke="#FFFFFF" stroke-width="1.2" stroke-linecap="round" fill="none"/>
52
- <rect x="13.5" y="12.5" width="8.5" height="8.5" rx="1.5" fill="#FDD835"/>
53
- <circle cx="17.75" cy="16.75" r="2" stroke="#FFFFFF" stroke-width="1.2" fill="none"/>
48
+ <path d="M4.8 14.5v4.5M7.7 14.5v4.5M4.8 16.7h2.9" stroke="#FFFFFF" stroke-width="1.3" stroke-linecap="round" fill="none"/>
49
+ <rect x="13.5" y="12.5" width="8.5" height="8.5" rx="1.5" fill="#F59E0B"/>
50
+ <circle cx="17.75" cy="16.75" r="2" stroke="#1F2937" stroke-width="1.4" fill="none"/>
54
51
  </symbol>
55
52
 
56
- <!-- Official WhatsApp Brand Logo -->
57
- <symbol id="icon-brand-whatsapp" viewBox="0 0 24 24">
58
- <circle cx="12" cy="12" r="11" fill="#25D366"/>
59
- <path fill="#FFFFFF" d="M17.472 14.382c-.301-.15-1.782-.879-2.058-.979-.276-.1-.476-.15-.677.15-.201.3-.777.979-.953 1.18-.175.2-.351.225-.652.075-.301-.15-1.272-.469-2.423-1.496-.895-.798-1.5-1.784-1.676-2.085-.175-.301-.019-.464.132-.614.136-.135.301-.351.452-.527.15-.175.201-.301.301-.501.101-.2.051-.376-.025-.526-.075-.15-.677-1.631-.928-2.233-.244-.587-.493-.507-.677-.517-.175-.01-.376-.01-.577-.01-.201 0-.527.075-.803.376-.276.301-1.054 1.03-1.054 2.512s1.079 2.913 1.23 3.114c.15.2 2.124 3.243 5.145 4.549.719.311 1.28.497 1.718.636.722.23 1.378.197 1.898.12.58-.087 1.782-.728 2.033-1.431.251-.703.251-1.305.176-1.431-.076-.126-.276-.201-.577-.351"/>
53
+ <!-- WhatsApp Logo (Official Speech Bubble & Handset) -->
54
+ <symbol id="icon-brand-whatsapp" viewBox="0 0 16 16">
55
+ <path fill="#25D366" d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326z"/>
56
+ <path fill="#FFFFFF" d="M7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"/>
60
57
  </symbol>
61
58
 
62
- <!-- Developer Precision Action Icons -->
59
+ <!-- Precision Action Icons -->
63
60
  <symbol id="icon-clipboard" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
64
61
  <rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M9 12h6"/><path d="M9 16h6"/>
65
62
  </symbol>
@@ -85,64 +82,97 @@
85
82
  <polyline points="20 6 9 17 4 12"/>
86
83
  </symbol>
87
84
  <symbol id="icon-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
88
- <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
85
+ <line x1="19" y1="5" x2="5" y2="19"/><line x1="5" y1="5" x2="19" y2="19"/>
89
86
  </symbol>
90
87
  <symbol id="icon-pin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
91
88
  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
92
89
  </symbol>
90
+ <symbol id="icon-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
91
+ <line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>
92
+ </symbol>
93
+ <symbol id="icon-terminal" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
94
+ <polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>
95
+ </symbol>
96
+ <symbol id="icon-alert-triangle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
97
+ <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
98
+ </symbol>
99
+ <symbol id="icon-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
100
+ <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
101
+ </symbol>
102
+ <symbol id="icon-printer" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
103
+ <polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect width="12" height="8" x="6" y="14"/>
104
+ </symbol>
105
+ <symbol id="icon-code" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
106
+ <polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
107
+ </symbol>
93
108
  </svg>
94
109
 
110
+ <!-- Notification Toast Container -->
111
+ <div id="toastContainer" class="toast-container" aria-live="polite"></div>
112
+
95
113
  <div class="app-container">
96
- <!-- Hero Header with Buzl Branding -->
114
+ <!-- Header: Locations Design System -->
97
115
  <header class="header">
98
116
  <div class="header-content">
99
117
  <div class="brand">
100
- <div class="brand-code-badge">
101
- <svg class="brand-logo-svg"><use href="#icon-brand-buzl"/></svg>
118
+ <div class="brand-code-badge" title="BUZL Locations Platform">
119
+ <svg class="brand-logo-svg" aria-hidden="true"><use href="#icon-brand-buzl"/></svg>
102
120
  <span class="code-buzl">BUZL</span>
103
- <span class="code-divider">—</span>
121
+ <span class="code-divider">/</span>
104
122
  <span class="code-capi">CAPI</span>
105
123
  </div>
106
124
  <div class="brand-titles">
107
125
  <div class="brand-headline">
108
- <h1>Enterprise Conversions API &amp; Multi-Channel Dispatcher</h1>
109
- <span class="version-badge">v1.0.0</span>
126
+ <h1>Conversions API &amp; Form Tracking Suite</h1>
127
+ <span class="version-badge">v0.1.3</span>
110
128
  </div>
111
- <p class="subtitle">Automated GTM, Meta CAPI, Google Sheets CRM &amp; Zoho Web-to-Lead with Self-Testing</p>
129
+ <p class="subtitle">Automated GTM, Meta CAPI, Google Sheets CRM &amp; Zoho Web-to-Lead integration.</p>
112
130
  </div>
113
131
  </div>
132
+
114
133
  <div class="header-actions">
115
- <button type="button" id="btnOpenBackups" class="btn btn-secondary">
116
- <svg class="icon-sm"><use href="#icon-database"/></svg>
117
- <span>Snapshots (<span id="backupsCountBadge">0</span>)</span>
134
+ <button type="button" id="btnOpenHandbook" class="btn btn-secondary" title="View Cross-Platform User Handbook &amp; Command Reference">
135
+ <svg class="icon-sm" aria-hidden="true"><use href="#icon-clipboard"/></svg>
136
+ <span>Handbook</span>
118
137
  </button>
119
- <button type="button" id="btnUninstallTracking" class="btn btn-danger-outline">
120
- <svg class="icon-sm"><use href="#icon-trash"/></svg>
121
- <span>Cleanly Remove All Tracking</span>
138
+ <button type="button" id="btnOpenBackups" class="btn btn-secondary" title="View snapshot history &amp; point-in-time restore">
139
+ <svg class="icon-sm" aria-hidden="true"><use href="#icon-database"/></svg>
140
+ <span>Snapshots</span>
141
+ <span id="backupsCountBadge" class="btn-count-pill">0</span>
122
142
  </button>
123
- <button type="button" id="btnScan" class="btn btn-outline">
124
- <svg class="icon-sm"><use href="#icon-refresh"/></svg>
143
+ <button type="button" id="btnUninstallTracking" class="btn btn-danger-outline" title="Safely strip all injected trackers">
144
+ <svg class="icon-sm" aria-hidden="true"><use href="#icon-trash"/></svg>
145
+ <span>Clean Uninstall</span>
146
+ </button>
147
+ <button type="button" id="btnScan" class="btn btn-outline" title="Re-scan workspace directory">
148
+ <svg class="icon-sm" aria-hidden="true"><use href="#icon-refresh"/></svg>
125
149
  <span>Refresh Scan</span>
126
150
  </button>
127
151
  </div>
128
152
  </div>
129
153
  </header>
130
154
 
131
- <!-- Live Site Status & Service Matrix -->
132
- <div class="live-state-bar" id="liveStateBar">
155
+ <!-- Target Workspace & Active Service Matrix Bar -->
156
+ <section class="live-state-bar" id="liveStateBar">
133
157
  <div class="live-state-header">
134
158
  <div class="live-title-group">
135
- <span class="live-pulse"></span>
136
- <span class="live-title">TARGET PROJECT:</span>
137
- <span id="liveStateRootDir" class="live-state-path">Scanning codebase...</span>
159
+ <span class="live-pulse" title="Workspace watcher active"></span>
160
+ <span class="live-title">Target Workspace:</span>
161
+ <span id="liveStateRootDir" class="live-state-path" title="Current inspected project root">Scanning codebase...</span>
138
162
  </div>
139
163
  <div class="live-meta-badges">
140
- <span id="siteLocationBadge" class="badge badge-neutral"><svg class="icon-xs"><use href="#icon-pin"/></svg> <span>Location: Detecting...</span></span>
141
- <span id="fileBadge" class="badge badge-info">Scanning...</span>
164
+ <span id="siteLocationBadge" class="badge badge-neutral" title="Auto-detected site location">
165
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-pin"/></svg> <span>Location: Detecting...</span>
166
+ </span>
167
+ <span id="fileBadge" class="badge badge-info" title="Total discovered HTML files">Scanning...</span>
142
168
  </div>
143
169
  </div>
170
+
144
171
  <div class="live-matrix-container">
145
- <span class="matrix-label">LIVE SERVICE MATRIX:</span>
172
+ <div class="matrix-heading">
173
+ <span class="matrix-label">Service Matrix:</span>
174
+ <span class="matrix-hint">(Click × to surgically remove any active channel)</span>
175
+ </div>
146
176
  <div class="live-state-chips" id="liveStateChips">
147
177
  <span class="chip chip-loading">Checking GTM...</span>
148
178
  <span class="chip chip-loading">Checking Meta Pixel...</span>
@@ -152,35 +182,43 @@
152
182
  <span class="chip chip-loading">Checking WhatsApp...</span>
153
183
  </div>
154
184
  </div>
155
- </div>
185
+ </section>
156
186
 
157
- <!-- Main Grid: Left = Services Config, Right = Testing & Verification -->
187
+ <!-- Main Workspace Grid -->
158
188
  <main class="main-grid">
159
- <!-- Left Column: Services Configuration Grid -->
189
+ <!-- Left Column: Services Configuration -->
160
190
  <section class="config-panel">
161
191
  <div class="panel-header">
162
- <h2><svg class="icon-sm" style="color:var(--brand-blue)"><use href="#icon-brand-buzl"/></svg> Tracking Services &amp; Destinations</h2>
163
- <span class="panel-sub">Configure active channels with 1-click surgical remove</span>
192
+ <div class="panel-header-title">
193
+ <div class="panel-header-icon"><svg class="icon-sm" aria-hidden="true"><use href="#icon-sliders"/></svg></div>
194
+ <div>
195
+ <h2>Tracking Services &amp; Destinations</h2>
196
+ <span class="panel-sub">Configure active channels with single-click surgical rollback</span>
197
+ </div>
198
+ </div>
164
199
  </div>
165
200
 
166
- <form id="trackingForm">
201
+ <form id="trackingForm" novalidate>
167
202
  <div class="services-grid">
168
- <!-- Card 1: GTM -->
203
+ <!-- Card 1: Google Tag Manager -->
169
204
  <div class="card service-card" id="cardGtm">
170
205
  <div class="card-header">
171
206
  <div class="card-title">
172
207
  <div class="card-icon-badge badge-gtm">
173
- <svg class="brand-icon"><use href="#icon-brand-gtm"/></svg>
208
+ <svg class="brand-icon" aria-hidden="true"><use href="#icon-brand-gtm"/></svg>
209
+ </div>
210
+ <div>
211
+ <h3>Google Tag Manager</h3>
212
+ <span class="card-subtext">Container Tagging</span>
174
213
  </div>
175
- <h3>Google Tag Manager</h3>
176
214
  </div>
177
215
  <div class="card-header-actions">
178
- <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveGtm" data-service="gtm" title="Remove GTM from site">
179
- <svg class="icon-xs"><use href="#icon-trash"/></svg>
180
- <span>Remove GTM</span>
216
+ <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveGtm" data-service="gtm" title="Surgically remove GTM from HTML">
217
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-trash"/></svg>
218
+ <span>Remove</span>
181
219
  </button>
182
- <label class="switch">
183
- <input type="checkbox" id="enableGTM">
220
+ <label class="switch" title="Toggle GTM">
221
+ <input type="checkbox" id="enableGTM" aria-label="Enable Google Tag Manager">
184
222
  <span class="slider"></span>
185
223
  </label>
186
224
  </div>
@@ -188,8 +226,8 @@
188
226
  <div class="card-body" id="gtmSection">
189
227
  <div class="form-group">
190
228
  <label for="gtmId">GTM Container ID</label>
191
- <input type="text" id="gtmId" placeholder="e.g. GTM-TRF9ZHHH" value="">
192
- <small class="helper-text">Inserts &lt;head&gt; script and &lt;body&gt; &lt;noscript&gt; fallback iframe.</small>
229
+ <input type="text" id="gtmId" placeholder="e.g. GTM-TRF9ZHHH" autocomplete="off" spellcheck="false">
230
+ <small class="helper-text">Inserts <code>&lt;head&gt;</code> container script and <code>&lt;body&gt;</code> <code>&lt;noscript&gt;</code> iframe.</small>
193
231
  </div>
194
232
  <div class="checkbox-group">
195
233
  <label>
@@ -200,22 +238,25 @@
200
238
  </div>
201
239
  </div>
202
240
 
203
- <!-- Card 2: Meta Pixel & Client CAPI -->
241
+ <!-- Card 2: Meta Pixel (Client-Side) -->
204
242
  <div class="card service-card" id="cardMeta">
205
243
  <div class="card-header">
206
244
  <div class="card-title">
207
245
  <div class="card-icon-badge badge-meta">
208
- <svg class="brand-icon"><use href="#icon-brand-meta"/></svg>
246
+ <svg class="brand-icon" aria-hidden="true"><use href="#icon-brand-meta"/></svg>
247
+ </div>
248
+ <div>
249
+ <h3>Meta Pixel</h3>
250
+ <span class="card-subtext">Client-Side Tracking</span>
209
251
  </div>
210
- <h3>Meta Pixel</h3>
211
252
  </div>
212
253
  <div class="card-header-actions">
213
- <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveMeta" data-service="meta" title="Remove Meta Pixel from site">
214
- <svg class="icon-xs"><use href="#icon-trash"/></svg>
215
- <span>Remove Meta</span>
254
+ <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveMeta" data-service="meta" title="Surgically remove Meta Pixel from HTML">
255
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-trash"/></svg>
256
+ <span>Remove</span>
216
257
  </button>
217
- <label class="switch">
218
- <input type="checkbox" id="enableMeta">
258
+ <label class="switch" title="Toggle Meta Pixel">
259
+ <input type="checkbox" id="enableMeta" aria-label="Enable Meta Pixel">
219
260
  <span class="slider"></span>
220
261
  </label>
221
262
  </div>
@@ -223,34 +264,37 @@
223
264
  <div class="card-body" id="metaSection">
224
265
  <div class="form-group">
225
266
  <label for="metaPixelId">Meta Pixel ID</label>
226
- <input type="text" id="metaPixelId" placeholder="e.g. 2203084510484531" value="">
227
- <small class="helper-text">Initializes fbq; deduplicates client events with server CAPI via leadId.</small>
267
+ <input type="text" id="metaPixelId" placeholder="e.g. 2203084510484531" autocomplete="off" spellcheck="false">
268
+ <small class="helper-text">Initializes <code>fbq</code>; auto-deduplicates client events with server CAPI via <code>leadId</code>.</small>
228
269
  </div>
229
270
  <div class="checkbox-group">
230
271
  <label>
231
272
  <input type="checkbox" id="trackMetaLead">
232
- <span>Track standard 'Lead' event alongside 'formSubmitted'</span>
273
+ <span>Track standard <code>'Lead'</code> event alongside <code>'formSubmitted'</code></span>
233
274
  </label>
234
275
  </div>
235
276
  </div>
236
277
  </div>
237
278
 
238
- <!-- Card 3: Buzl CAPI (Server-Side Facebook Leads) -->
279
+ <!-- Card 3: Buzl CAPI (Server-Side Meta) -->
239
280
  <div class="card service-card" id="cardCapi">
240
281
  <div class="card-header">
241
282
  <div class="card-title">
242
283
  <div class="card-icon-badge badge-buzl">
243
- <svg class="brand-icon"><use href="#icon-brand-buzl"/></svg>
284
+ <svg class="brand-icon" aria-hidden="true"><use href="#icon-brand-buzl"/></svg>
285
+ </div>
286
+ <div>
287
+ <h3>Buzl CAPI Server</h3>
288
+ <span class="card-subtext">Server-Side Meta Events</span>
244
289
  </div>
245
- <h3>Buzl CAPI (Server-Side Meta)</h3>
246
290
  </div>
247
291
  <div class="card-header-actions">
248
- <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveCapi" data-service="capi" title="Remove Buzl CAPI from site">
249
- <svg class="icon-xs"><use href="#icon-trash"/></svg>
250
- <span>Remove CAPI</span>
292
+ <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveCapi" data-service="capi" title="Surgically remove Buzl CAPI from HTML">
293
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-trash"/></svg>
294
+ <span>Remove</span>
251
295
  </button>
252
- <label class="switch">
253
- <input type="checkbox" id="enableBuzlCapi">
296
+ <label class="switch" title="Toggle Buzl CAPI">
297
+ <input type="checkbox" id="enableBuzlCapi" aria-label="Enable Buzl CAPI">
254
298
  <span class="slider"></span>
255
299
  </label>
256
300
  </div>
@@ -258,17 +302,17 @@
258
302
  <div class="card-body" id="buzlCapiSection">
259
303
  <div class="form-group">
260
304
  <label for="buzlCapiEndpoint">Buzl CAPI Endpoint</label>
261
- <input type="url" id="buzlCapiEndpoint" value="https://dev.api.gobuzl.com/api/leads">
262
- <small class="helper-text">Dispatches server-side conversions to Meta CAPI with deduplicated leadId.</small>
305
+ <input type="url" id="buzlCapiEndpoint" value="https://dev.api.gobuzl.com/api/leads" autocomplete="off" spellcheck="false">
306
+ <small class="helper-text">Dispatches conversions to Meta CAPI with deduplicated <code>leadId</code>.</small>
263
307
  </div>
264
308
  <div class="form-row">
265
309
  <div class="form-group">
266
310
  <label for="buzlCapiUser">authUser</label>
267
- <input type="text" id="buzlCapiUser" placeholder="Paste authUser">
311
+ <input type="text" id="buzlCapiUser" placeholder="Paste authUser" autocomplete="off" spellcheck="false">
268
312
  </div>
269
313
  <div class="form-group">
270
314
  <label for="buzlCapiPass">authPass</label>
271
- <input type="password" id="buzlCapiPass" placeholder="Paste authPass">
315
+ <input type="password" id="buzlCapiPass" placeholder="Paste authPass" autocomplete="off">
272
316
  </div>
273
317
  </div>
274
318
  </div>
@@ -279,17 +323,20 @@
279
323
  <div class="card-header">
280
324
  <div class="card-title">
281
325
  <div class="card-icon-badge badge-sheets">
282
- <svg class="brand-icon"><use href="#icon-brand-sheets"/></svg>
326
+ <svg class="brand-icon" aria-hidden="true"><use href="#icon-brand-sheets"/></svg>
327
+ </div>
328
+ <div>
329
+ <h3>Google Sheets Direct CRM</h3>
330
+ <span class="card-subtext">Multi-Tab Lead Engine</span>
283
331
  </div>
284
- <h3>Google Sheets Direct CRM</h3>
285
332
  </div>
286
333
  <div class="card-header-actions">
287
- <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveSheets" data-service="sheets" title="Remove Google Sheets CRM from site">
288
- <svg class="icon-xs"><use href="#icon-trash"/></svg>
289
- <span>Remove Sheets</span>
334
+ <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveSheets" data-service="sheets" title="Surgically remove Google Sheets CRM from HTML">
335
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-trash"/></svg>
336
+ <span>Remove</span>
290
337
  </button>
291
- <label class="switch">
292
- <input type="checkbox" id="enableSheets">
338
+ <label class="switch" title="Toggle Google Sheets CRM">
339
+ <input type="checkbox" id="enableSheets" aria-label="Enable Google Sheets CRM">
293
340
  <span class="slider"></span>
294
341
  </label>
295
342
  </div>
@@ -298,36 +345,42 @@
298
345
  <div class="form-group">
299
346
  <div class="label-row">
300
347
  <label for="googleSheetUrl">Apps Script Web App URL</label>
301
- <a href="#" id="openScriptModal" class="link-btn"><svg class="icon-xs"><use href="#icon-clipboard"/></svg> View Script Code</a>
348
+ <a href="#" id="openScriptModal" class="link-btn"><svg class="icon-xs" aria-hidden="true"><use href="#icon-clipboard"/></svg> View Script Code</a>
302
349
  </div>
303
- <input type="url" id="googleSheetUrl" placeholder="https://script.google.com/macros/s/.../exec">
304
- <small class="helper-text">Writes lead submissions to CRM tabs. Deploy as Web app with <strong>Who has access: Anyone</strong> (URL must end in <code>/exec</code>).</small>
350
+ <input type="url" id="googleSheetUrl" placeholder="https://script.google.com/macros/s/.../exec" autocomplete="off" spellcheck="false">
351
+ <small class="helper-text">Deploy Web App with <strong>Who has access: Anyone</strong> (URL ends in <code>/exec</code>).</small>
305
352
  </div>
353
+
306
354
  <div class="form-group">
307
- <label for="siteLocation">Default Site Location (Fallback for Column B)</label>
308
- <input type="text" id="siteLocation" placeholder="Auto-detected from site or enter location">
309
- <small class="helper-text">Auto-detected from metadata. Fills Column B if forms omit location.</small>
355
+ <label for="siteLocation">Default Site Location (Column B Fallback)</label>
356
+ <input type="text" id="siteLocation" placeholder="Auto-detected or enter location name">
357
+ <small class="helper-text">Populates Column B if submitted forms omit a location value.</small>
310
358
  </div>
311
359
 
312
- <!-- Collapsible Sheet Layout Preview Drawer (Clean & Non-Clumsy) -->
360
+ <!-- Collapsible Sheet Layout Preview Drawer -->
313
361
  <details class="sheet-preview-drawer" id="sheetPreviewDrawer">
314
362
  <summary class="drawer-summary">
315
- <span><svg class="icon-xs" style="margin-right: 4px;"><use href="#icon-brand-sheets"/></svg> View Sheet Column Hierarchy &amp; Multi-Tab Engine</span>
363
+ <div class="drawer-summary-left">
364
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-brand-sheets"/></svg>
365
+ <span>Column Hierarchy &amp; Multi-Tab Engine</span>
366
+ </div>
316
367
  <span class="badge badge-info">Preview &amp; Fields</span>
317
368
  </summary>
318
369
  <div class="drawer-content">
319
- <p class="helper-text" style="margin-bottom: 8px;">Columns placed directly next to Phone in form order, followed by CRM qualification and attribution:</p>
320
- <div id="columnHierarchyPreview" class="column-hierarchy-preview"></div>
370
+ <div>
371
+ <span class="drawer-subheading">Column Order:</span>
372
+ <div id="columnHierarchyPreview" class="column-hierarchy-preview"></div>
373
+ </div>
321
374
 
322
- <div style="margin-top: 12px;">
323
- <label style="font-weight: 600; font-size: 12px; margin-bottom: 6px; display: block;">Discovered Form Fields:</label>
375
+ <div>
376
+ <span class="drawer-subheading">Discovered Form Fields:</span>
324
377
  <div id="dynamicFieldsChecklist" class="dynamic-fields-checklist">
325
378
  <span class="helper-text">Scanning forms...</span>
326
379
  </div>
327
380
  </div>
328
381
 
329
- <div style="margin-top: 12px;">
330
- <label style="font-weight: 600; font-size: 12px; margin-bottom: 4px; display: block;">Automated CRM Multi-Tab Views:</label>
382
+ <div>
383
+ <span class="drawer-subheading">CRM Status Views:</span>
331
384
  <div class="crm-tabs-preview">
332
385
  <span class="tab-pill tab-pill-master">All Leads (Master)</span>
333
386
  <span class="tab-pill tab-pill-new">New</span>
@@ -343,22 +396,25 @@
343
396
  </div>
344
397
  </div>
345
398
 
346
- <!-- Card 5: Zoho CRM -->
399
+ <!-- Card 5: Zoho CRM Web-to-Lead -->
347
400
  <div class="card service-card" id="cardZoho">
348
401
  <div class="card-header">
349
402
  <div class="card-title">
350
403
  <div class="card-icon-badge badge-zoho">
351
- <svg class="brand-icon"><use href="#icon-brand-zoho"/></svg>
404
+ <svg class="brand-icon" aria-hidden="true"><use href="#icon-brand-zoho"/></svg>
405
+ </div>
406
+ <div>
407
+ <h3>Zoho CRM Web-to-Lead</h3>
408
+ <span class="card-subtext">Enterprise CRM Pipeline</span>
352
409
  </div>
353
- <h3>Zoho CRM Web-to-Lead</h3>
354
410
  </div>
355
411
  <div class="card-header-actions">
356
- <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveZoho" data-service="zoho" title="Remove Zoho CRM from site">
357
- <svg class="icon-xs"><use href="#icon-trash"/></svg>
358
- <span>Remove Zoho</span>
412
+ <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveZoho" data-service="zoho" title="Surgically remove Zoho CRM from HTML">
413
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-trash"/></svg>
414
+ <span>Remove</span>
359
415
  </button>
360
- <label class="switch">
361
- <input type="checkbox" id="enableZoho">
416
+ <label class="switch" title="Toggle Zoho CRM">
417
+ <input type="checkbox" id="enableZoho" aria-label="Enable Zoho CRM">
362
418
  <span class="slider"></span>
363
419
  </label>
364
420
  </div>
@@ -367,16 +423,16 @@
367
423
  <div class="form-row">
368
424
  <div class="form-group">
369
425
  <label for="zohoXnqsjsdp">Zoho Form ID (xnQsjsdp) <span class="req">*</span></label>
370
- <input type="text" id="zohoXnqsjsdp" placeholder="Paste xnQsjsdp token">
426
+ <input type="text" id="zohoXnqsjsdp" placeholder="Paste xnQsjsdp token" autocomplete="off" spellcheck="false">
371
427
  <small class="helper-text">Required to activate Zoho CRM.</small>
372
428
  </div>
373
429
  <div class="form-group">
374
430
  <label for="zohoXmiwtld">xmIwtLD (Optional)</label>
375
- <input type="text" id="zohoXmiwtld" placeholder="Paste xmIwtLD token">
431
+ <input type="text" id="zohoXmiwtld" placeholder="Paste xmIwtLD token" autocomplete="off" spellcheck="false">
376
432
  </div>
377
433
  </div>
378
434
  <div class="form-group">
379
- <label for="zohoEndpoint">Zoho Data Center</label>
435
+ <label for="zohoEndpoint">Zoho Data Center Region</label>
380
436
  <select id="zohoEndpoint">
381
437
  <option value="https://crm.zoho.in/crm/WebToLeadForm">India (crm.zoho.in)</option>
382
438
  <option value="https://crm.zoho.com/crm/WebToLeadForm">US / Global (crm.zoho.com)</option>
@@ -386,172 +442,353 @@
386
442
  </div>
387
443
  </div>
388
444
 
389
- <!-- Card 6: WhatsApp Redirection -->
445
+ <!-- Card 6: WhatsApp Routing -->
390
446
  <div class="card service-card" id="cardWhatsapp">
391
447
  <div class="card-header">
392
448
  <div class="card-title">
393
449
  <div class="card-icon-badge badge-whatsapp">
394
- <svg class="brand-icon"><use href="#icon-brand-whatsapp"/></svg>
450
+ <svg class="brand-icon" aria-hidden="true"><use href="#icon-brand-whatsapp"/></svg>
451
+ </div>
452
+ <div>
453
+ <h3>WhatsApp Handoff</h3>
454
+ <span class="card-subtext">Direct Chat Redirection</span>
395
455
  </div>
396
- <h3>WhatsApp Handoff</h3>
397
456
  </div>
398
457
  <div class="card-header-actions">
399
- <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveWhatsapp" data-service="whatsapp" title="Remove WhatsApp from site">
400
- <svg class="icon-xs"><use href="#icon-trash"/></svg>
401
- <span>Remove WA</span>
458
+ <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveWhatsapp" data-service="whatsapp" title="Surgically remove WhatsApp from HTML">
459
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-trash"/></svg>
460
+ <span>Remove</span>
402
461
  </button>
403
- <label class="switch">
404
- <input type="checkbox" id="enableWhatsapp">
462
+ <label class="switch" title="Toggle WhatsApp">
463
+ <input type="checkbox" id="enableWhatsapp" aria-label="Enable WhatsApp Handoff">
405
464
  <span class="slider"></span>
406
465
  </label>
407
466
  </div>
408
467
  </div>
409
468
  <div class="card-body" id="whatsappSection">
410
469
  <div class="form-group">
411
- <div style="display: flex; justify-content: space-between; align-items: center;">
470
+ <div class="label-row">
412
471
  <label for="whatsappNumber">WhatsApp Business Number</label>
413
- <span id="waDetectedBadge" class="badge badge-success hidden" style="font-size: 10px; cursor: pointer;" title="Click to use auto-detected number"><svg class="icon-xs"><use href="#icon-check"/></svg> Auto-detected</span>
472
+ <button type="button" id="waDetectedBadge" class="badge badge-success hidden cursor-pointer" title="Click to apply auto-detected WhatsApp number">
473
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-check"/></svg> <span>Auto-detected</span>
474
+ </button>
414
475
  </div>
415
- <input type="text" id="whatsappNumber" placeholder="e.g. 918310755474">
476
+ <input type="text" id="whatsappNumber" placeholder="e.g. 918310755474" autocomplete="off">
416
477
  <small class="helper-text" id="waHelperText">Auto-fetches from form buttons on submit, or specify fallback number.</small>
417
478
  </div>
418
479
  </div>
419
480
  </div>
420
481
  </div>
421
482
 
422
- <!-- Submit Button -->
423
483
  <div class="action-footer">
424
484
  <button type="submit" id="btnSubmit" class="btn btn-primary btn-large">
425
- <svg class="icon-sm"><use href="#icon-brand-buzl"/></svg>
485
+ <svg class="icon-sm" aria-hidden="true"><use href="#icon-brand-buzl"/></svg>
426
486
  <span>Apply Configuration &amp; Run Automated Tests</span>
427
487
  </button>
428
488
  </div>
429
489
  </form>
430
490
  </section>
431
491
 
432
- <!-- Right Column: Form Testing & Verification Console -->
492
+ <!-- Right Column: Testing & Verification Console -->
433
493
  <section class="status-panel">
434
494
  <div class="panel-header">
435
- <h2><svg class="icon-sm" style="color:var(--brand-blue)"><use href="#icon-shield-check"/></svg> Testing &amp; Verification Console</h2>
436
- <span class="panel-sub">Test individual forms &amp; verify live payload delivery</span>
495
+ <div class="panel-header-title">
496
+ <div class="panel-header-icon"><svg class="icon-sm" aria-hidden="true"><use href="#icon-shield-check"/></svg></div>
497
+ <div>
498
+ <h2>Testing &amp; Verification Console</h2>
499
+ <span class="panel-sub">Test individual forms, run synthetic leads &amp; view test logs</span>
500
+ </div>
501
+ </div>
502
+ </div>
503
+
504
+ <!-- Segmented Tab Navigation (WCAG WAI-ARIA pattern) -->
505
+ <div class="console-tab-nav" role="tablist" aria-label="Testing and Verification Views">
506
+ <button type="button" class="console-tab-btn active" data-tab="tabForms" id="tabBtnForms" role="tab" aria-selected="true" aria-controls="tabForms">
507
+ <svg class="icon-tab" aria-hidden="true"><use href="#icon-clipboard"/></svg>
508
+ <span>Discovered Forms</span>
509
+ <span id="formsCountBadge" class="tab-badge">0</span>
510
+ </button>
511
+ <button type="button" class="console-tab-btn" data-tab="tabQuickLead" id="tabBtnQuickLead" role="tab" aria-selected="false" aria-controls="tabQuickLead">
512
+ <svg class="icon-tab" aria-hidden="true"><use href="#icon-send"/></svg>
513
+ <span>Quick Dispatch</span>
514
+ </button>
515
+ <button type="button" class="console-tab-btn" data-tab="tabVerification" id="tabBtnVerification" role="tab" aria-selected="false" aria-controls="tabVerification">
516
+ <svg class="icon-tab" aria-hidden="true"><use href="#icon-terminal"/></svg>
517
+ <span>Self-Test Report</span>
518
+ <span id="testSummaryBadge" class="tab-badge badge-neutral">Ready</span>
519
+ </button>
520
+ <button type="button" class="console-tab-btn" data-tab="tabFiles" id="tabBtnFiles" role="tab" aria-selected="false" aria-controls="tabFiles">
521
+ <svg class="icon-tab" aria-hidden="true"><use href="#icon-folder"/></svg>
522
+ <span>Project Files</span>
523
+ </button>
437
524
  </div>
438
525
 
439
- <!-- Discovered Forms & Per-Form Runner -->
440
- <div class="card">
441
- <div class="card-header">
442
- <div class="card-title">
443
- <div class="card-icon-badge badge-forms">
444
- <svg class="brand-icon"><use href="#icon-clipboard"/></svg>
526
+ <!-- Tab 1: Discovered Forms -->
527
+ <div id="tabForms" class="console-tab-content active" role="tabpanel" aria-labelledby="tabBtnForms">
528
+ <div class="card">
529
+ <div class="card-header">
530
+ <div class="card-title">
531
+ <div class="card-icon-badge badge-neutral">
532
+ <svg class="brand-icon" aria-hidden="true"><use href="#icon-clipboard"/></svg>
533
+ </div>
534
+ <div>
535
+ <h3>Discovered HTML Forms</h3>
536
+ <span class="card-subtext">Isolated per-form testing with custom payloads</span>
537
+ </div>
445
538
  </div>
446
- <h3>Discovered Site Forms</h3>
447
539
  </div>
448
- <span id="formsCountBadge" class="badge badge-info">Scanning forms...</span>
449
- </div>
450
- <div class="card-body">
451
- <p class="helper-text" style="margin-bottom: 12px;">Test each discovered form independently with inputs tailored to its exact markup:</p>
452
- <div id="individualFormsList" class="individual-forms-list">
453
- <p class="empty-state">Loading discovered forms...</p>
540
+ <div class="card-body">
541
+ <p class="helper-text" style="margin-bottom: var(--space-12);">Test each discovered form independently with inputs tailored to its markup:</p>
542
+ <div id="individualFormsList" class="individual-forms-list">
543
+ <p class="empty-state">Loading discovered forms...</p>
544
+ </div>
454
545
  </div>
455
546
  </div>
456
547
  </div>
457
548
 
458
- <!-- Quick Multi-Channel Test Lead -->
459
- <div class="card">
460
- <div class="card-header">
461
- <div class="card-title">
462
- <div class="card-icon-badge badge-quick">
463
- <svg class="brand-icon"><use href="#icon-send"/></svg>
549
+ <!-- Tab 2: Quick Dispatch -->
550
+ <div id="tabQuickLead" class="console-tab-content" role="tabpanel" aria-labelledby="tabBtnQuickLead">
551
+ <div class="card">
552
+ <div class="card-header">
553
+ <div class="card-title">
554
+ <div class="card-icon-badge badge-neutral">
555
+ <svg class="brand-icon" aria-hidden="true"><use href="#icon-send"/></svg>
556
+ </div>
557
+ <div>
558
+ <h3>Quick Multi-Channel Lead Dispatch</h3>
559
+ <span class="card-subtext">Live synthetic test lead through active channels</span>
560
+ </div>
464
561
  </div>
465
- <h3>Quick Multi-Channel Lead Dispatch</h3>
562
+ <span id="liveTestBadge" class="badge badge-neutral">Ready</span>
466
563
  </div>
467
- <span id="liveTestBadge" class="badge badge-neutral">Ready</span>
468
- </div>
469
- <div class="card-body">
470
- <div class="form-row">
471
- <div class="form-group">
472
- <label for="testLeadPhone">Phone Number</label>
473
- <input type="text" id="testLeadPhone" placeholder="Auto-detected or enter phone">
564
+ <div class="card-body">
565
+ <div class="form-row">
566
+ <div class="form-group">
567
+ <label for="testLeadPhone">Phone Number</label>
568
+ <input type="text" id="testLeadPhone" placeholder="Auto-detected or enter phone">
569
+ </div>
570
+ <div class="form-group">
571
+ <label for="testLeadName">Full Name</label>
572
+ <input type="text" id="testLeadName" value="Test Lead">
573
+ </div>
474
574
  </div>
475
- <div class="form-group">
476
- <label for="testLeadName">Full Name</label>
477
- <input type="text" id="testLeadName" value="Test Lead">
575
+ <div class="form-group" style="margin-top: var(--space-8);">
576
+ <label for="testLeadService">Service / Inquiry Title</label>
577
+ <input type="text" id="testLeadService" placeholder="Auto-detected or enter inquiry">
478
578
  </div>
579
+ <button type="button" id="btnTestSubmit" class="btn btn-primary" style="width: 100%; margin-top: var(--space-12);">
580
+ <svg class="icon-sm" aria-hidden="true"><use href="#icon-send"/></svg>
581
+ <span>Dispatch Quick Live Test Lead</span>
582
+ </button>
583
+ <div id="testDispatchResults" class="test-dispatch-results hidden" style="margin-top: var(--space-12);"></div>
479
584
  </div>
480
- <div class="form-group" style="margin-top: 8px;">
481
- <label for="testLeadService">Service / Inquiry</label>
482
- <input type="text" id="testLeadService" placeholder="Auto-detected or enter inquiry">
483
- </div>
484
- <button type="button" id="btnTestSubmit" class="btn btn-primary" style="width: 100%; margin-top: 12px;">
485
- <svg class="icon-sm"><use href="#icon-send"/></svg>
486
- <span>Dispatch Quick Live Test Lead</span>
487
- </button>
488
- <div id="testDispatchResults" class="test-dispatch-results hidden" style="margin-top: 12px;"></div>
489
585
  </div>
490
586
  </div>
491
587
 
492
- <!-- Live Self-Test Verification Report -->
493
- <div class="card test-card">
494
- <div class="card-header">
495
- <div class="card-title">
496
- <div class="card-icon-badge badge-verify">
497
- <svg class="brand-icon"><use href="#icon-shield-check"/></svg>
588
+ <!-- Tab 3: Verification Report -->
589
+ <div id="tabVerification" class="console-tab-content" role="tabpanel" aria-labelledby="tabBtnVerification">
590
+ <div class="card test-card" id="verificationReportCard">
591
+ <div class="card-header">
592
+ <div class="card-title">
593
+ <div class="card-icon-badge badge-neutral">
594
+ <svg class="brand-icon" aria-hidden="true"><use href="#icon-shield-check"/></svg>
595
+ </div>
596
+ <div>
597
+ <h3>Automated Verification Report</h3>
598
+ <span class="card-subtext">End-to-end tag injection, syntax audit &amp; live CAPI inspection</span>
599
+ </div>
600
+ </div>
601
+ <div class="card-header-actions">
602
+ <button type="button" id="btnExportJson" class="btn btn-secondary btn-sm" disabled title="Export verification report as structured JSON">
603
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-download"/></svg>
604
+ <span>Export JSON</span>
605
+ </button>
606
+ <button type="button" id="btnExportPdf" class="btn btn-secondary btn-sm" disabled title="Export verification report as PDF / Print">
607
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-printer"/></svg>
608
+ <span>Export PDF</span>
609
+ </button>
498
610
  </div>
499
- <h3>Automated Verification Report</h3>
500
611
  </div>
501
- <span id="testSummaryBadge" class="badge badge-neutral">Awaiting Run</span>
502
- </div>
503
- <div class="card-body">
504
- <div id="testConsole" class="test-console">
505
- <p class="empty-state">Click "Apply Configuration" to inject tracking and run automated checks.</p>
612
+ <div class="card-body">
613
+ <!-- Summary KPI Scorecard -->
614
+ <div class="verification-kpi-bar" id="verificationKpiBar">
615
+ <div class="kpi-item">
616
+ <span class="kpi-label">Total Checks</span>
617
+ <span class="kpi-value" id="kpiTotalChecks">0</span>
618
+ </div>
619
+ <div class="kpi-item">
620
+ <span class="kpi-label">Passed</span>
621
+ <span class="kpi-value text-success" id="kpiPassedChecks">0</span>
622
+ </div>
623
+ <div class="kpi-item">
624
+ <span class="kpi-label">Failed</span>
625
+ <span class="kpi-value text-danger" id="kpiFailedChecks">0</span>
626
+ </div>
627
+ <div class="kpi-item">
628
+ <span class="kpi-label">CAPI Telemetry</span>
629
+ <span class="badge badge-neutral" id="kpiCapiStatus">Ready</span>
630
+ </div>
631
+ </div>
632
+
633
+ <!-- Test Checklist Console -->
634
+ <div class="report-section-header">
635
+ <h4 class="report-section-title">
636
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-check"/></svg>
637
+ <span>Injection &amp; Syntax Verification Checklist</span>
638
+ </h4>
639
+ </div>
640
+ <div id="testConsole" class="test-console">
641
+ <p class="empty-state">Click "Apply Configuration" to inject tracking and run automated checks.</p>
642
+ </div>
643
+
644
+ <!-- Live CAPI Payload, Response & Registered Console Log Inspector -->
645
+ <div class="capi-inspector-card" id="capiInspectorCard">
646
+ <div class="capi-inspector-header">
647
+ <div class="capi-inspector-title">
648
+ <div class="card-icon-badge badge-buzl">
649
+ <svg class="brand-icon" aria-hidden="true"><use href="#icon-brand-buzl"/></svg>
650
+ </div>
651
+ <div>
652
+ <div class="capi-heading-row">
653
+ <h4>Buzl CAPI Live Dispatch &amp; Console Inspector</h4>
654
+ <span id="capiInspectStatusBadge" class="badge badge-neutral">Standby</span>
655
+ <span id="capiInspectLatencyBadge" class="badge badge-neutral hidden">0ms</span>
656
+ </div>
657
+ <span class="card-subtext">Registered telemetry, server responses &amp; runtime logs</span>
658
+ </div>
659
+ </div>
660
+ </div>
661
+
662
+ <!-- Sub-tab segmented switcher -->
663
+ <div class="inspector-tab-nav" role="tablist" aria-label="CAPI Inspector Views">
664
+ <button type="button" class="inspector-tab-btn active" data-inspect="payload" role="tab" aria-selected="true">
665
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-code"/></svg>
666
+ <span>CAPI Payload</span>
667
+ </button>
668
+ <button type="button" class="inspector-tab-btn" data-inspect="response" role="tab" aria-selected="false">
669
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-send"/></svg>
670
+ <span>CAPI Response</span>
671
+ </button>
672
+ <button type="button" class="inspector-tab-btn" data-inspect="logs" role="tab" aria-selected="false">
673
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-terminal"/></svg>
674
+ <span>Registered Console Logs</span>
675
+ </button>
676
+ </div>
677
+
678
+ <!-- View 1: CAPI Payload -->
679
+ <div id="inspectViewPayload" class="inspector-view active">
680
+ <div class="code-container">
681
+ <button type="button" id="btnCopyCapiPayload" class="copy-btn" title="Copy CAPI JSON Payload">
682
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-clipboard"/></svg>
683
+ <span>Copy Payload</span>
684
+ </button>
685
+ <pre><code id="capiPayloadDisplay">// CAPI payload will appear after running verification or test lead...</code></pre>
686
+ </div>
687
+ </div>
688
+
689
+ <!-- View 2: CAPI Response -->
690
+ <div id="inspectViewResponse" class="inspector-view hidden">
691
+ <div class="code-container">
692
+ <button type="button" id="btnCopyCapiResponse" class="copy-btn" title="Copy CAPI Response">
693
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-clipboard"/></svg>
694
+ <span>Copy Response</span>
695
+ </button>
696
+ <pre><code id="capiResponseDisplay">// CAPI server response will appear here...</code></pre>
697
+ </div>
698
+ </div>
699
+
700
+ <!-- View 3: Registered Console Logs -->
701
+ <div id="inspectViewLogs" class="inspector-view hidden">
702
+ <div class="code-container">
703
+ <button type="button" id="btnCopyCapiLogs" class="copy-btn" title="Copy Diagnostic Logs">
704
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-clipboard"/></svg>
705
+ <span>Copy Logs</span>
706
+ </button>
707
+ <div id="capiLogsDisplay" class="console-log-stream">
708
+ <div class="log-row log-info">[STANDBY] Waiting for automated verification or test lead dispatch...</div>
709
+ </div>
710
+ </div>
711
+ </div>
712
+ </div>
506
713
  </div>
507
714
  </div>
508
715
  </div>
509
716
 
510
- <!-- Discovered Files Inspector (Collapsible) -->
511
- <details class="card discovered-files-card">
512
- <summary class="card-header" style="cursor: pointer; list-style: none;">
513
- <div class="card-title">
514
- <div class="card-icon-badge badge-neutral">
515
- <svg class="brand-icon"><use href="#icon-folder"/></svg>
717
+ <!-- Tab 4: Project Files -->
718
+ <div id="tabFiles" class="console-tab-content" role="tabpanel" aria-labelledby="tabBtnFiles">
719
+ <div class="card discovered-files-card">
720
+ <div class="card-header">
721
+ <div class="card-title">
722
+ <div class="card-icon-badge badge-neutral">
723
+ <svg class="brand-icon" aria-hidden="true"><use href="#icon-folder"/></svg>
724
+ </div>
725
+ <div>
726
+ <h3>Discovered Workspace Files</h3>
727
+ <span class="card-subtext">Inspected HTML files in project root</span>
728
+ </div>
516
729
  </div>
517
- <h3>Discovered Project Files</h3>
518
730
  </div>
519
- <span class="badge badge-neutral">Toggle Files</span>
520
- </summary>
521
- <div class="card-body file-list-container">
522
- <ul id="fileList" class="file-list"></ul>
731
+ <div class="card-body file-list-container">
732
+ <ul id="fileList" class="file-list"></ul>
733
+ </div>
523
734
  </div>
524
- </details>
735
+ </div>
525
736
  </section>
526
737
  </main>
527
738
  </div>
528
739
 
529
- <!-- Backups Management Modal -->
530
- <div id="backupsModal" class="modal hidden">
740
+ <!-- In-App Confirmation Modal -->
741
+ <div id="customConfirmModal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="confirmModalTitle">
742
+ <div class="modal-backdrop"></div>
743
+ <div class="modal-content modal-small">
744
+ <div class="modal-header">
745
+ <div class="card-title">
746
+ <div class="card-icon-badge badge-danger">
747
+ <svg class="brand-icon" aria-hidden="true"><use href="#icon-alert-triangle"/></svg>
748
+ </div>
749
+ <h3 id="confirmModalTitle">Confirm Action</h3>
750
+ </div>
751
+ <button type="button" class="close-btn" id="closeConfirmModal" aria-label="Close dialog">&times;</button>
752
+ </div>
753
+ <div class="modal-body">
754
+ <p id="confirmModalMessage" class="modal-confirm-text"></p>
755
+ <div class="modal-actions-row">
756
+ <button type="button" id="confirmModalCancelBtn" class="btn btn-secondary">Cancel</button>
757
+ <button type="button" id="confirmModalConfirmBtn" class="btn btn-danger">Confirm</button>
758
+ </div>
759
+ </div>
760
+ </div>
761
+ </div>
762
+
763
+ <!-- Backups Modal -->
764
+ <div id="backupsModal" class="modal hidden" role="dialog" aria-modal="true">
531
765
  <div class="modal-backdrop"></div>
532
766
  <div class="modal-content modal-large">
533
767
  <div class="modal-header">
534
768
  <div class="card-title">
535
769
  <div class="card-icon-badge badge-buzl">
536
- <svg class="brand-icon"><use href="#icon-database"/></svg>
770
+ <svg class="brand-icon" aria-hidden="true"><use href="#icon-database"/></svg>
771
+ </div>
772
+ <div>
773
+ <h3>Project Snapshots &amp; Point-in-Time Restore</h3>
774
+ <span class="card-subtext">Point-in-time backup prior to any modification</span>
537
775
  </div>
538
- <h3>Project Snapshots &amp; Point-in-Time Restore</h3>
539
776
  </div>
540
- <button id="closeBackupsModal" class="close-btn">&times;</button>
777
+ <button type="button" id="closeBackupsModal" class="close-btn" aria-label="Close snapshots dialog">&times;</button>
541
778
  </div>
542
779
  <div class="modal-body">
543
780
  <div class="create-backup-box">
544
781
  <label for="customBackupName"><strong>Create New Named Snapshot:</strong></label>
545
- <div class="input-with-button" style="display: flex; gap: 8px; margin-top: 6px;">
782
+ <div class="input-with-button" style="display: flex; gap: var(--space-8); margin-top: var(--space-8);">
546
783
  <input type="text" id="customBackupName" placeholder="e.g. Pre-launch checkpoint, Pristine baseline">
547
784
  <button type="button" id="btnCreateNamedBackup" class="btn btn-primary" style="white-space: nowrap;">
548
- <svg class="icon-sm"><use href="#icon-database"/></svg>
785
+ <svg class="icon-sm" aria-hidden="true"><use href="#icon-database"/></svg>
549
786
  <span>Save Snapshot</span>
550
787
  </button>
551
788
  </div>
552
789
  </div>
553
790
 
554
- <h4 style="margin: 20px 0 10px 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted);">Saved Snapshots on Disk:</h4>
791
+ <h4 style="margin: var(--space-20) 0 var(--space-8) 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-inverse);">Saved Snapshots:</h4>
555
792
  <div class="backups-table-container">
556
793
  <table class="backups-table" id="backupsTable">
557
794
  <thead>
@@ -564,7 +801,7 @@
564
801
  </tr>
565
802
  </thead>
566
803
  <tbody id="backupsTableBody">
567
- <tr><td colspan="5" style="text-align: center; color: var(--text-muted);">Loading backups...</td></tr>
804
+ <tr><td colspan="5" style="text-align: center; color: var(--color-text-inverse);">Loading backups...</td></tr>
568
805
  </tbody>
569
806
  </table>
570
807
  </div>
@@ -572,25 +809,28 @@
572
809
  </div>
573
810
  </div>
574
811
 
575
- <!-- Clean Uninstall Confirmation Modal -->
576
- <div id="uninstallModal" class="modal hidden">
812
+ <!-- Clean Uninstall Modal -->
813
+ <div id="uninstallModal" class="modal hidden" role="dialog" aria-modal="true">
577
814
  <div class="modal-backdrop"></div>
578
815
  <div class="modal-content modal-small">
579
816
  <div class="modal-header">
580
817
  <div class="card-title">
581
818
  <div class="card-icon-badge badge-danger">
582
- <svg class="brand-icon" style="stroke: var(--danger);"><use href="#icon-trash"/></svg>
819
+ <svg class="brand-icon" aria-hidden="true"><use href="#icon-trash"/></svg>
820
+ </div>
821
+ <div>
822
+ <h3>Cleanly Remove All Tracking</h3>
823
+ <span class="card-subtext">Revert HTML to pristine state</span>
583
824
  </div>
584
- <h3>Cleanly Remove All Tracking</h3>
585
825
  </div>
586
- <button id="closeUninstallModal" class="close-btn">&times;</button>
826
+ <button type="button" id="closeUninstallModal" class="close-btn" aria-label="Close uninstall dialog">&times;</button>
587
827
  </div>
588
828
  <div class="modal-body">
589
- <p style="margin-bottom: 14px; font-size: 13px; line-height: 1.5; color: #cbd5e1;">This will cleanly strip all GTM, Meta Pixel, Buzl CAPI, and runtime scripts from your HTML files without breaking your website. An automatic safety backup will be created before removal.</p>
590
- <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;">
829
+ <p style="margin-bottom: var(--space-16); font-size: var(--font-size-sm); line-height: var(--font-lineHeight-base); color: var(--color-text-primary);">This will cleanly strip all GTM, Meta Pixel, Buzl CAPI, and runtime scripts from your HTML files without breaking your website. An automatic safety backup will be created before removal.</p>
830
+ <div class="modal-actions-row">
591
831
  <button type="button" id="btnCancelUninstall" class="btn btn-secondary">Cancel</button>
592
832
  <button type="button" id="btnConfirmUninstall" class="btn btn-danger">
593
- <svg class="icon-xs"><use href="#icon-trash"/></svg>
833
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-trash"/></svg>
594
834
  <span>Confirm &amp; Remove All Tracking</span>
595
835
  </button>
596
836
  </div>
@@ -599,34 +839,184 @@
599
839
  </div>
600
840
 
601
841
  <!-- Apps Script Modal -->
602
- <div id="scriptModal" class="modal hidden">
842
+ <div id="scriptModal" class="modal hidden" role="dialog" aria-modal="true">
603
843
  <div class="modal-backdrop"></div>
604
- <div class="modal-content">
844
+ <div class="modal-content modal-large">
605
845
  <div class="modal-header">
606
- <h3>Google Apps Script Code for Google Sheets</h3>
607
- <button id="closeScriptModal" class="close-btn">&times;</button>
846
+ <div class="card-title">
847
+ <div class="card-icon-badge badge-sheets">
848
+ <svg class="brand-icon" aria-hidden="true"><use href="#icon-brand-sheets"/></svg>
849
+ </div>
850
+ <div>
851
+ <h3>Google Apps Script Code for Google Sheets</h3>
852
+ <span class="card-subtext">Backend code for multi-tab CRM and instant dispatch</span>
853
+ </div>
854
+ </div>
855
+ <button type="button" id="closeScriptModal" class="close-btn" aria-label="Close script modal">&times;</button>
608
856
  </div>
609
857
  <div class="modal-body">
610
- <p>Follow these quick steps in Google Sheets to activate the CRM &amp; Multi-Tab Engine:</p>
611
- <ol>
858
+ <p style="font-size: var(--font-size-sm); color: var(--color-text-inverse); margin-bottom: var(--space-12);">Follow these quick steps in Google Sheets to activate the CRM &amp; Multi-Tab Engine:</p>
859
+ <ol class="script-steps-list">
612
860
  <li>Open your target Google Sheet &gt; <strong>Extensions &gt; Apps Script</strong>.</li>
613
861
  <li>Paste the code below &amp; click <strong>Save</strong> (Ctrl+S).</li>
614
862
  <li>Click the blue <strong>Deploy</strong> button (top right) &gt; <strong>New deployment</strong> (or <em>Manage deployments &gt; New version</em> if updating).</li>
615
863
  <li>Select type: <strong>Web app</strong>.</li>
616
864
  <li>Set <strong>Execute as</strong>: <code>Me (your Google email)</code>.</li>
617
- <li>Set <strong>Who has access</strong>: <code>Anyone</code> <span style="color:var(--danger); font-weight:600;">(Critical: required for website leads)</span>.</li>
865
+ <li>Set <strong>Who has access</strong>: <code>Anyone</code> <span style="color:var(--color-danger-dark); font-weight:600;">(Critical: required for website leads)</span>.</li>
618
866
  <li>Click <strong>Deploy</strong>, authorize access, copy the <code>/exec</code> URL, and paste it into the field above!</li>
619
867
  <li>Refresh your Google Sheet and click <strong>⚡ Buzl Lead CRM &gt; ⚡ Initialize &amp; Upgrade All CRM Tabs</strong> to automatically create all 6 status tabs with real-time dynamic filters!</li>
620
868
  </ol>
621
869
  <div class="code-container">
622
- <button id="copyScriptCode" class="copy-btn">
623
- <svg class="icon-xs"><use href="#icon-clipboard"/></svg>
870
+ <button type="button" id="copyScriptCode" class="copy-btn">
871
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-clipboard"/></svg>
624
872
  <span>Copy Code</span>
625
873
  </button>
626
874
  <pre><code id="scriptCodeDisplay">Loading script...</code></pre>
627
875
  </div>
628
876
  </div>
629
877
  </div>
878
+ <!-- Cross-Platform User Handbook Modal -->
879
+ <div id="handbookModal" class="modal hidden" role="dialog" aria-modal="true">
880
+ <div class="modal-backdrop"></div>
881
+ <div class="modal-content modal-large">
882
+ <div class="modal-header">
883
+ <div class="card-title">
884
+ <div class="card-icon-badge badge-info">
885
+ <svg class="brand-icon" aria-hidden="true"><use href="#icon-clipboard"/></svg>
886
+ </div>
887
+ <div>
888
+ <h3>Cross-Platform User Handbook &amp; CLI Codes</h3>
889
+ <span class="card-subtext">Blocked, copy-ready commands for Windows, macOS, and Linux</span>
890
+ </div>
891
+ </div>
892
+ <div style="display: flex; align-items: center; gap: 8px;">
893
+ <button type="button" id="btnPrintHandbookPdf" class="btn btn-primary btn-sm" title="Print or save entire handbook as PDF">
894
+ <svg class="icon-xs" aria-hidden="true"><use href="#icon-printer"/></svg>
895
+ <span>Print / Save as PDF</span>
896
+ </button>
897
+ <a href="/handbook" target="_blank" class="btn btn-secondary btn-sm" title="Open standalone handbook in new tab">
898
+ <span>Full Page</span>
899
+ </a>
900
+ <button type="button" id="closeHandbookModal" class="close-btn" aria-label="Close handbook dialog">&times;</button>
901
+ </div>
902
+ </div>
903
+ <div class="modal-body">
904
+ <p style="font-size: var(--font-size-sm); color: var(--color-text-inverse); margin-bottom: var(--space-12);">
905
+ Select your operating system to reveal copy-ready command blocks with zero prompt formatting errors:
906
+ </p>
907
+
908
+ <!-- OS Selector Tabs -->
909
+ <div class="console-tab-nav" style="margin-bottom: 16px;">
910
+ <button type="button" class="console-tab-btn active" data-os="powershell">Windows (PowerShell)</button>
911
+ <button type="button" class="console-tab-btn" data-os="cmd">Windows (CMD)</button>
912
+ <button type="button" class="console-tab-btn" data-os="macos">macOS (Terminal)</button>
913
+ <button type="button" class="console-tab-btn" data-os="linux">Linux (bash)</button>
914
+ </div>
915
+
916
+ <!-- Command Blocks -->
917
+ <div id="handbookCommandCards">
918
+ <!-- Commands rendered dynamically or present in template -->
919
+ <div class="handbook-command-card" style="margin-bottom: 12px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-sm); padding: 12px; background: var(--color-surface-raised);">
920
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
921
+ <strong style="font-size: 12.5px; color: var(--color-brand-primary);">1. Interactive Terminal Setup Wizard</strong>
922
+ <button type="button" class="copy-btn btn-copy-cli" data-target="cmdWizard">
923
+ <svg class="icon-xs"><use href="#icon-clipboard"/></svg>
924
+ <span>Copy</span>
925
+ </button>
926
+ </div>
927
+ <pre style="background: #1a2332; color: #e2e8f0; padding: 8px 12px; border-radius: 4px; font-family: monospace; font-size: 11.5px; overflow-x: auto;"><code id="cmdWizard">npx @mahe_pkm/buzl-capi</code></pre>
928
+ </div>
929
+
930
+ <div class="handbook-command-card" style="margin-bottom: 12px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-sm); padding: 12px; background: var(--color-surface-raised);">
931
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
932
+ <strong style="font-size: 12.5px; color: var(--color-brand-primary);">2. Local Web GUI Dashboard (Port 3333)</strong>
933
+ <button type="button" class="copy-btn btn-copy-cli" data-target="cmdGui">
934
+ <svg class="icon-xs"><use href="#icon-clipboard"/></svg>
935
+ <span>Copy</span>
936
+ </button>
937
+ </div>
938
+ <pre style="background: #1a2332; color: #e2e8f0; padding: 8px 12px; border-radius: 4px; font-family: monospace; font-size: 11.5px; overflow-x: auto;"><code id="cmdGui">npx @mahe_pkm/buzl-capi --gui</code></pre>
939
+ </div>
940
+
941
+ <div class="handbook-command-card" style="margin-bottom: 12px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-sm); padding: 12px; background: var(--color-surface-raised);">
942
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
943
+ <strong style="font-size: 12.5px; color: var(--color-brand-primary);">3. Create Named Snapshot Backup</strong>
944
+ <button type="button" class="copy-btn btn-copy-cli" data-target="cmdBackup">
945
+ <svg class="icon-xs"><use href="#icon-clipboard"/></svg>
946
+ <span>Copy</span>
947
+ </button>
948
+ </div>
949
+ <pre style="background: #1a2332; color: #e2e8f0; padding: 8px 12px; border-radius: 4px; font-family: monospace; font-size: 11.5px; overflow-x: auto;"><code id="cmdBackup">npx @mahe_pkm/buzl-capi --backup "Pre-Launch Baseline"</code></pre>
950
+ </div>
951
+
952
+ <div class="handbook-command-card" style="margin-bottom: 12px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-sm); padding: 12px; background: var(--color-surface-raised);">
953
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
954
+ <strong style="font-size: 12.5px; color: var(--color-brand-primary);">4. List Saved Snapshots on Disk</strong>
955
+ <button type="button" class="copy-btn btn-copy-cli" data-target="cmdList">
956
+ <svg class="icon-xs"><use href="#icon-clipboard"/></svg>
957
+ <span>Copy</span>
958
+ </button>
959
+ </div>
960
+ <pre style="background: #1a2332; color: #e2e8f0; padding: 8px 12px; border-radius: 4px; font-family: monospace; font-size: 11.5px; overflow-x: auto;"><code id="cmdList">npx @mahe_pkm/buzl-capi --list-backups</code></pre>
961
+ </div>
962
+
963
+ <div class="handbook-command-card" style="margin-bottom: 12px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-sm); padding: 12px; background: var(--color-surface-raised);">
964
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
965
+ <strong style="font-size: 12.5px; color: var(--color-brand-primary);">5. Revert / Rollback to Snapshot</strong>
966
+ <button type="button" class="copy-btn btn-copy-cli" data-target="cmdRestore">
967
+ <svg class="icon-xs"><use href="#icon-clipboard"/></svg>
968
+ <span>Copy</span>
969
+ </button>
970
+ </div>
971
+ <pre style="background: #1a2332; color: #e2e8f0; padding: 8px 12px; border-radius: 4px; font-family: monospace; font-size: 11.5px; overflow-x: auto;"><code id="cmdRestore">npx @mahe_pkm/buzl-capi --restore</code></pre>
972
+ </div>
973
+
974
+ <div class="handbook-command-card" style="margin-bottom: 12px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-sm); padding: 12px; background: var(--color-surface-raised);">
975
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
976
+ <strong style="font-size: 12.5px; color: var(--color-brand-primary);">6. Clean Tracking Uninstallation</strong>
977
+ <button type="button" class="copy-btn btn-copy-cli" data-target="cmdUninstall">
978
+ <svg class="icon-xs"><use href="#icon-clipboard"/></svg>
979
+ <span>Copy</span>
980
+ </button>
981
+ </div>
982
+ <pre style="background: #1a2332; color: #e2e8f0; padding: 8px 12px; border-radius: 4px; font-family: monospace; font-size: 11.5px; overflow-x: auto;"><code id="cmdUninstall">npx @mahe_pkm/buzl-capi --uninstall</code></pre>
983
+ </div>
984
+
985
+ <div class="handbook-command-card" style="margin-bottom: 12px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-sm); padding: 12px; background: var(--color-surface-raised);">
986
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
987
+ <strong style="font-size: 12.5px; color: var(--color-brand-primary);">7. Always Run Latest via NPX (Bypasses Local Cache)</strong>
988
+ <button type="button" class="copy-btn btn-copy-cli" data-target="cmdNpxLatest">
989
+ <svg class="icon-xs"><use href="#icon-clipboard"/></svg>
990
+ <span>Copy</span>
991
+ </button>
992
+ </div>
993
+ <pre style="background: #1a2332; color: #e2e8f0; padding: 8px 12px; border-radius: 4px; font-family: monospace; font-size: 11.5px; overflow-x: auto;"><code id="cmdNpxLatest">npx @mahe_pkm/buzl-capi@latest --gui</code></pre>
994
+ </div>
995
+
996
+ <div class="handbook-command-card" style="margin-bottom: 12px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-sm); padding: 12px; background: var(--color-surface-raised);">
997
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
998
+ <strong style="font-size: 12.5px; color: var(--color-brand-primary);">8. Global CLI Installation &amp; Updating</strong>
999
+ <button type="button" class="copy-btn btn-copy-cli" data-target="cmdGlobalInstall">
1000
+ <svg class="icon-xs"><use href="#icon-clipboard"/></svg>
1001
+ <span>Copy</span>
1002
+ </button>
1003
+ </div>
1004
+ <pre style="background: #1a2332; color: #e2e8f0; padding: 8px 12px; border-radius: 4px; font-family: monospace; font-size: 11.5px; overflow-x: auto;"><code id="cmdGlobalInstall">npm install -g @mahe_pkm/buzl-capi@latest</code></pre>
1005
+ </div>
1006
+
1007
+ <div class="handbook-command-card" style="margin-bottom: 12px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-sm); padding: 12px; background: var(--color-surface-raised);">
1008
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
1009
+ <strong style="font-size: 12.5px; color: var(--color-brand-primary);">9. Author Release Publishing (with 2FA / OTP)</strong>
1010
+ <button type="button" class="copy-btn btn-copy-cli" data-target="cmdPublish2fa">
1011
+ <svg class="icon-xs"><use href="#icon-clipboard"/></svg>
1012
+ <span>Copy</span>
1013
+ </button>
1014
+ </div>
1015
+ <pre style="background: #1a2332; color: #e2e8f0; padding: 8px 12px; border-radius: 4px; font-family: monospace; font-size: 11.5px; overflow-x: auto;"><code id="cmdPublish2fa">npm publish --tag latest --otp=YOUR_6_DIGIT_OTP</code></pre>
1016
+ </div>
1017
+ </div>
1018
+ </div>
1019
+ </div>
630
1020
  </div>
631
1021
 
632
1022
  <script src="app.js"></script>