-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathservices.html
More file actions
960 lines (897 loc) · 66.6 KB
/
Copy pathservices.html
File metadata and controls
960 lines (897 loc) · 66.6 KB
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
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AuditForge AI Pro – Free SEO & AI Visibility Auditor</title>
<meta name="description" content="Free SEO, AI Visibility and Website Audit Tool. Analyze metadata, headings, accessibility, structured data and AI readiness.">
<link rel="canonical" href="https://audit-forge-ai.github.io/services">
<link rel="icon" type="image/svg+xml" sizes="32x32" href="/favicon/auditforgeai-favicon-32.svg">
<link rel="icon" type="image/svg+xml" sizes="16x16" href="/favicon/auditforgeai-favicon-16.svg">
<link rel="apple-touch-icon" type="image/svg+xml" href="/favicon/auditforgeai-logo-512.svg">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#22C55E">
<!-- Enhanced Meta Tags for AI/GEO -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="AuditForge AI Pro – Free SEO & AI Visibility Audit Tool">
<meta name="twitter:description" content="Analyze SEO, AI readiness, accessibility, structured data. Get instant scores on technical SEO, content quality, and AI visibility with our free web audit tool.">
<meta name="twitter:image" content="https://audit-forge-ai.github.io/favicon/auditforgeai-logo-512.svg">
<meta property="og:site_name" content="AuditForge AI Pro">
<meta name="description" content="Free SEO, AI Visibility and Website Audit Tool. Analyze metadata, headings, accessibility, structured data, robots.txt, sitemap, and AI readiness. Get detailed scoring and actionable recommendations.">
<!-- Open Graph / Social -->
<meta property="og:type" content="website">
<meta property="og:title" content="AuditForge AI Pro">
<meta property="og:description" content="Free SEO, AI Visibility and Website Audit Tool.">
<meta property="og:image" content="https://audit-forge-ai.github.io/favicon/auditforgeai-logo-512.svg">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet">
<!-- External CSS -->
<link rel="stylesheet" href="css/services.css">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KGT7HV6L');</script>
<!-- End Google Tag Manager -->
<script type="application/ld+json">
[
{
"@context":"https://schema.org",
"@type":"WebApplication",
"name":"AuditForge AI Pro",
"applicationCategory":"SEOApplication",
"operatingSystem":"Web",
"description":"Free SEO and AI Visibility Auditor — analyze metadata, headings, accessibility, robots.txt, sitemap, and AI readiness.",
"url":"https://audit-forge-ai.github.io/services",
"offers":{
"@type":"Offer",
"price":"0",
"priceCurrency":"USD",
"availability":"https://schema.org/InStock"
}
},
{
"@context":"https://schema.org",
"@type":"Organization",
"name":"AuditForge AI Pro",
"url":"https://audit-forge-ai.github.io",
"logo":"https://audit-forge-ai.github.io/favicon/auditforgeai-logo-512.svg",
"description":"Enterprise-grade SEO and AI visibility auditing platform powered by BFS crawl technology and advanced content analysis.",
"sameAs":["https://github.com/audit-forge-ai"],
"contactPoint":{
"@type":"ContactPoint",
"contactType":"Technical Support",
"url":"https://github.com/audit-forge-ai/issues"
}
},
{
"@context":"https://schema.org",
"@type":"BreadcrumbList",
"itemListElement":[
{
"@type":"ListItem",
"position":1,
"name":"Home",
"item":"https://audit-forge-ai.github.io"
},
{
"@type":"ListItem",
"position":2,
"name":"Services",
"item":"https://audit-forge-ai.github.io/services"
},
{
"@type":"ListItem",
"position":3,
"name":"SEO Audit Tool",
"item":"https://audit-forge-ai.github.io/services#crawler"
}
]
},
{
"@context":"https://schema.org",
"@type":"FAQPage",
"mainEntity":[
{
"@type":"Question",
"name":"What is AuditForge AI Pro?",
"acceptedAnswer":{
"@type":"Answer",
"text":"AuditForge AI Pro is a free, enterprise-grade SEO and AI visibility auditing platform. It crawls your website using breadth-first search (BFS) technology, analyzes on-page SEO signals (titles, descriptions, headings, alt text, schema), evaluates accessibility compliance, and scores your content for AI readiness — how likely it is to be cited by generative AI systems like ChatGPT, Gemini, and Claude."
}
},
{
"@type":"Question",
"name":"How does the SEO audit work?",
"acceptedAnswer":{
"@type":"Answer",
"text":"The crawler enters your root URL and uses breadth-first search to discover and analyze up to 100 pages on your site. For each page, it extracts: title tags, meta descriptions, H1-H6 hierarchy, image alt text, internal links, readability metrics, keyword density, structured data (JSON-LD), social meta tags, and robots/sitemap compliance. Each page receives a score from 0–100 based on technical SEO best practices. Results are stored locally in your browser — data never leaves your device."
}
},
{
"@type":"Question",
"name":"What is AI Visibility and why does it matter?",
"acceptedAnswer":{
"@type":"Answer",
"text":"AI Visibility refers to how discoverable and citable your content is by generative AI systems. It combines multiple signals: FAQ content, named entities, clear definitions, answer-ready paragraphs, structured data (schema), semantic HTML landmarks, and citations. High AI Visibility means your content is more likely to appear in AI-generated responses (GEO = Generative Engine Optimization). Unlike traditional SEO (Google rankings), GEO focuses on AI citation — appearing in ChatGPT, Claude, Gemini, and Perplexity responses."
}
},
{
"@type":"Question",
"name":"Can I use AuditForge to audit pages behind login?",
"acceptedAnswer":{
"@type":"Answer",
"text":"The URL Crawler uses a CORS proxy (allorigins.win) to fetch pages, which may not work for login-protected pages. However, the Paste HTML Audit mode lets you manually paste the full HTML source of any page — including authenticated pages — for analysis. This is the most reliable method for auditing private content."
}
},
{
"@type":"Question",
"name":"What crawl limits does AuditForge have?",
"acceptedAnswer":{
"@type":"Answer",
"text":"You can crawl up to 100 pages per audit (configurable: 10, 25, 50, or 100). The crawler respects a 500ms per-request rate limit and uses a 2-stream concurrency model to balance speed and politeness. All crawling happens in your browser — no pages are stored on our servers. Results are cached locally in browser storage (max 50 audits)."
}
},
{
"@type":"Question",
"name":"How does the Paste HTML Audit mode work?",
"acceptedAnswer":{
"@type":"Answer",
"text":"Copy the entire HTML source code of a page (View Source → Select All → Copy), paste it into the textarea, optionally set the page URL for context, and click Analyze. AuditForge parses the HTML, extracts all SEO signals, and scores the page immediately. This method bypasses CORS/proxy issues and is 100% reliable. All processing happens client-side — your HTML is never sent to any server."
}
},
{
"@type":"Question",
"name":"What scores are most important for AI Visibility?",
"acceptedAnswer":{
"@type":"Answer",
"text":"The AI Visibility score is weighted across 8 dimensions: FAQ Coverage (18%), Entity Signals (14%), Definitions (12%), Knowledge Chunks (15%), Conversational Intent (12%), Citations (8%), Structured Data / JSON-LD (12%), and Semantic HTML (9%). To reach high AI Visibility (80+), prioritize: clear FAQ sections, definition patterns (is/refers to/means), internal linking, structured data (FAQPage + Organization + Article schemas), and semantic HTML5 landmarks (main, article, section, nav, header, footer)."
}
},
{
"@type":"Question",
"name":"Is my data stored on AuditForge servers?",
"acceptedAnswer":{
"@type":"Answer",
"text":"No. AuditForge is 100% client-side. All crawling, parsing, analysis, and storage happens in your browser. Your audit history is stored in browser localStorage (up to 50 audits, max ~1MB per browser). Audit data is never transmitted to any external server. When you clear browser data, audit history is deleted. This privacy-first design means AuditForge works offline and respects your data completely."
}
}
]
}
]
</script>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KGT7HV6L"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- MOBILE MENU TOGGLE -->
<button id="menuToggle" aria-label="Open navigation menu" onclick="toggleSidebar()">☰</button>
<div id="sidebarOverlay" onclick="closeSidebar()"></div>
<!-- STATUS BAR -->
<div id="statusbar">
<div style="display:flex;align-items:center;gap:4px">
<span class="ping-dot"></span>
<span>PING <span id="pingVal">14ms</span></span>
<span style="margin:0 10px;color:var(--border2)">|</span>
<span>PROXY: allorigins.win</span>
</div>
<div class="enterprise-badge">Enterprise Core — 100% Free Open-Source Workspace</div>
<div id="clock" style="font-family:var(--mono)"></div>
</div>
<div id="app">
<!-- SIDEBAR -->
<div id="sidebar">
<div class="logo">
<div class="logo-name">AuditForge</div>
<div class="logo-sub">AI Pro // v3.2.0</div>
</div>
<nav>
<div class="nav-sec">Core</div>
<div class="nav-item active" data-panel="crawler">
<span class="ico">⬡</span> Crawler Console
</div>
<div class="nav-item" data-panel="history" id="navHistory">
<span class="ico">📜</span> Audit History
</div>
<div class="nav-item" data-panel="compare" id="navCompare">
<span class="ico">⚖</span> Comparison
</div>
<div class="nav-sec">Analysis</div>
<div class="nav-item" data-panel="sitewide" id="navSiteWide">
<span class="ico">📊</span> Site-Wide Issues
</div>
<div class="nav-item" data-panel="graph" id="navGraph">
<span class="ico">🕸</span> Link Graph Visualizer
</div>
<div class="nav-item" data-panel="ai" id="navAI">
<span class="ico">🧠</span> AI SEO Studio
</div>
<div class="nav-item" data-panel="inspector" id="navInspector">
<span class="ico">◈</span> Page Inspector
<span class="nbadge g" id="pageBadge" style="display:none">0</span>
</div>
<div class="nav-sec">Tools</div>
<!-- FIX: navPaste now uses setMode+showPanel instead of a missing panel -->
<div class="nav-item" id="navPaste">
<span class="ico">⌗</span> Paste HTML Audit
</div>
<div class="nav-sec">Reports</div>
<div class="nav-item" id="navExport">
<span class="ico">↓</span> Export Report
</div>
</nav>
<div class="sidebar-foot">
Engine: BFS // max 2 streams<br>
CORS: allorigins.win proxy
</div>
</div>
<!-- MAIN -->
<div id="main">
<!-- ══ CRAWLER PANEL ══ -->
<div class="panel active" id="panel-crawler">
<div>
<div class="ph">Crawler Console</div>
<div class="ps">BFS recursive engine // concurrency: 2 streams // 500ms rate-limit</div>
</div>
<div class="card">
<!-- MODE TOGGLE -->
<div class="mode-bar">
<button class="mmode active" id="modeCrawl" onclick="setMode('crawl')">⬡ URL Crawler</button>
<button class="mmode" id="modePaste" onclick="setMode('paste')">⌗ Paste HTML <span style="font-size:9px;background:var(--green);color:#000;padding:1px 5px;border-radius:3px;margin-left:4px;font-weight:700">RELIABLE</span></button>
</div>
<!-- CRAWL MODE -->
<div id="crawlMode">
<div class="label">Target Root URL
<span class="proxy-pill busy" id="proxyPill"><span class="proxy-dot"></span>checking proxy…</span>
</div>
<input class="url-input" id="urlInput" type="url" placeholder="https://example.com">
<div class="err-banner" id="urlErr">⛔ Enter a valid https:// URL to crawl.</div>
<div class="row">
<div>
<div class="label" style="margin-bottom:6px">Max Pages</div>
<div class="depth-btns" id="depthBtns">
<button class="dbtn active" data-v="10">10</button>
<button class="dbtn" data-v="25">25</button>
<button class="dbtn" data-v="50">50</button>
<button class="dbtn" data-v="100">100</button>
</div>
</div>
<button class="exec-btn" id="execBtn">
<div class="spinner" id="spinner"></div>
<span id="btnTxt">Execute Deep Audit</span>
</button>
</div>
<div class="prog-wrap" id="progWrap">
<div class="prog-info"><span id="progLabel">Initializing…</span><span id="progPct">0%</span></div>
<div class="prog-track"><div class="prog-fill" id="progFill"></div></div>
<div class="prog-steps">
<div class="prog-step" data-step="robots">Robots.txt</div>
<div class="prog-step" data-step="sitemap">Sitemap</div>
<div class="prog-step" data-step="crawl">BFS Crawl</div>
</div>
</div>
</div>
<!-- PASTE MODE -->
<div id="pasteMode" style="display:none">
<div class="label">Page URL (optional)</div>
<input class="paste-url-input" id="pasteUrl" type="url" placeholder="https://example.com/page">
<div class="label" style="margin-top:12px">Raw HTML Source</div>
<textarea class="paste-area" id="pasteHtml" placeholder="Paste the full HTML source..."></textarea>
<div class="err-banner" id="pasteErr">⛔ Paste some HTML content first.</div>
<div style="margin-top:10px;display:flex;gap:10px">
<button class="exec-btn" onclick="runPasteAudit()">Analyze Pasted HTML</button>
<button onclick="clearPaste()" class="dbtn">Clear</button>
</div>
</div>
</div>
<div>
<div class="sec-title">Live Crawl Feed</div>
<div class="grid-head">
<div>Page URL</div>
<div style="text-align:center">Status</div>
<div style="text-align:center">Score</div>
<div style="text-align:right">Action</div>
</div>
<div id="grid"><div class="grid-empty" id="gridEmpty">No pages crawled yet.</div></div>
</div>
<!-- STATS — includes stDup and stNoH1 (were missing) -->
<div class="sum-grid">
<div class="sum-card"><div class="sc-label">Total Pages</div><div class="sc-val g" id="stTotal">0</div></div>
<div class="sum-card"><div class="sc-label">404 Broken</div><div class="sc-val r" id="st404">0</div></div>
<div class="sum-card"><div class="sc-label">Missing Alt</div><div class="sc-val a" id="stAlt">0</div></div>
<div class="sum-card"><div class="sc-label">Dup Titles</div><div class="sc-val a" id="stDup">0</div></div>
<div class="sum-card"><div class="sc-label">No H1</div><div class="sc-val r" id="stNoH1">0</div></div>
<div class="sum-card"><div class="sc-label">Avg Score</div><div class="sc-val g" id="stAvg">—</div></div>
</div>
<!-- EXPORT BUTTONS — JSON and Markdown now have triggers -->
<div class="export-group">
<button class="exp-btn primary" id="exportBtn">↓ HTML Report</button>
<button class="exp-btn" onclick="exportJSON()">↓ JSON Export</button>
<button class="exp-btn" onclick="exportMarkdown()">↓ Markdown</button>
</div>
<!-- ══ SEO DOCUMENTATION / GEO CONTENT ══ -->
<details id="seoDocSection" style="margin-top:8px">
<summary style="cursor:pointer;padding:11px 16px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--text2);letter-spacing:.04em;list-style:none;display:flex;align-items:center;gap:8px;transition:all .15s">
<span style="color:var(--green)">📖</span>
Documentation & AI Visibility Guide
<span style="margin-left:auto;font-size:10px;color:var(--text3)">▼ expand</span>
</summary>
<article style="padding:20px 4px 4px">
<section style="margin-bottom:20px">
<div class="card" style="padding:20px">
<p style="font-size:14px;line-height:1.7;color:var(--text);margin-bottom:12px">
<strong>AuditForge AI Pro is a free, enterprise-grade SEO and AI visibility auditing platform</strong> that analyzes your website across five critical dimensions:
</p>
<ul style="list-style:none;padding:0;margin:0">
<li style="padding:6px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text2)">
<strong style="color:var(--green)">Technical SEO:</strong> Title tags, meta descriptions, H1-H6 hierarchy, canonical tags, robots.txt, sitemap.xml, HTTPS compliance
</li>
<li style="padding:6px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text2)">
<strong style="color:var(--green)">Content Quality:</strong> Word count, readability (Flesch score), paragraph structure, internal linking, keyword density analysis
</li>
<li style="padding:6px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text2)">
<strong style="color:var(--green)">Accessibility:</strong> Alt text coverage, semantic HTML landmarks, ARIA attributes, heading hierarchy, lang attributes
</li>
<li style="padding:6px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text2)">
<strong style="color:var(--green)">Structured Data:</strong> JSON-LD schema detection (Organization, Article, FAQPage, BreadcrumbList, Product)
</li>
<li style="padding:6px 0;font-size:13px;color:var(--text2)">
<strong style="color:var(--green)">AI Visibility:</strong> FAQ content, entity signals, definition patterns, knowledge chunks, conversational intent, citations (GEO readiness)
</li>
</ul>
</div>
</section>
<section style="margin-bottom:20px">
<h2 style="font-size:18px;font-weight:700;margin-bottom:10px;color:var(--text)">
What is AI Visibility (GEO)?
</h2>
<div class="card" style="padding:16px">
<p style="font-size:13px;line-height:1.7;color:var(--text2);margin-bottom:10px">
<strong style="color:var(--green)">AI Visibility refers to how discoverable and citable your content is by generative AI systems</strong> like ChatGPT, Claude, Gemini, Perplexity, and other large language models (LLMs). While traditional SEO focuses on ranking in Google Search, GEO (Generative Engine Optimization) focuses on appearing in AI-generated responses.
</p>
<p style="font-size:13px;line-height:1.7;color:var(--text2)">
<strong>High AI Visibility means:</strong> Your content is more likely to be retrieved, processed, and cited when users ask AI systems questions. This creates a new traffic channel independent of Google rankings. AuditForge's AI Visibility score (0–100) measures: FAQ coverage, named entity density, definition clarity, answer-ready paragraphs, structured data completeness, and citation patterns.
</p>
</div>
</section>
<section style="margin-bottom:20px">
<h2 style="font-size:18px;font-weight:700;margin-bottom:10px;color:var(--text)">
How the Crawl Engine Works
</h2>
<div class="card" style="padding:16px">
<p style="font-size:13px;line-height:1.7;color:var(--text2);margin-bottom:10px">
AuditForge uses a <strong>breadth-first search (BFS) crawler</strong> with the following characteristics:
</p>
<ul style="list-style:none;padding:0;margin:0">
<li style="padding:6px 0;font-size:12px;color:var(--text2)">📍 <strong>Root URL entry:</strong> Paste your homepage (e.g., https://example.com) and crawler discovers all linked pages</li>
<li style="padding:6px 0;font-size:12px;color:var(--text2)">🔗 <strong>Link extraction:</strong> Follows all internal links matching your domain origin</li>
<li style="padding:6px 0;font-size:12px;color:var(--text2)">⏱️ <strong>Rate limiting:</strong> 500ms delay between requests (crawl politeness)</li>
<li style="padding:6px 0;font-size:12px;color:var(--text2)">🌊 <strong>Concurrency:</strong> 2 simultaneous request streams (balanced speed/politeness)</li>
<li style="padding:6px 0;font-size:12px;color:var(--text2)">📊 <strong>Configurable depth:</strong> Crawl 10, 25, 50, or 100 pages per audit</li>
<li style="padding:6px 0;font-size:12px;color:var(--text2)">🔒 <strong>Privacy-first:</strong> All processing happens in your browser — no data sent to servers</li>
</ul>
</div>
</section>
<section style="margin-bottom:20px">
<h2 style="font-size:18px;font-weight:700;margin-bottom:10px;color:var(--text)">
Paste HTML Audit (Most Reliable)
</h2>
<div class="card" style="padding:16px">
<p style="font-size:13px;line-height:1.7;color:var(--text2);margin-bottom:10px">
The <strong>Paste HTML Audit mode</strong> is the most reliable way to analyze any page:
</p>
<ol style="padding-left:20px;margin:0">
<li style="padding:6px 0;font-size:12px;color:var(--text2)">Open the page in your browser (any page, including those behind login)</li>
<li style="padding:6px 0;font-size:12px;color:var(--text2)">Right-click → View Page Source (Ctrl+U / Cmd+U)</li>
<li style="padding:6px 0;font-size:12px;color:var(--text2)">Select All (Ctrl+A / Cmd+A) and Copy</li>
<li style="padding:6px 0;font-size:12px;color:var(--text2)">Paste into AuditForge's Paste HTML textarea</li>
<li style="padding:6px 0;font-size:12px;color:var(--text2)">Optionally set the page URL for context</li>
<li style="padding:6px 0;font-size:12px;color:var(--text2)">Click "Analyze Pasted HTML" — instant results</li>
</ol>
<p style="font-size:12px;color:var(--text3);font-family:var(--mono);margin-top:8px">
✓ Works on authenticated pages · ✓ Bypasses CORS/proxy issues · ✓ 100% client-side
</p>
</div>
</section>
<section style="margin-bottom:20px">
<h2 style="font-size:18px;font-weight:700;margin-bottom:10px;color:var(--text)">
Key Scoring Dimensions
</h2>
<div class="card" style="padding:16px">
<p style="font-size:13px;line-height:1.7;color:var(--text2);margin-bottom:12px">
AuditForge computes five independent scores, each 0–100:
</p>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
<div style="background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:10px">
<div style="font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;margin-bottom:4px">Technical SEO (25%)</div>
<div style="font-size:12px;color:var(--text2)">Title, meta, H1, canonical, robots.txt, sitemap, HTTPS, schema</div>
</div>
<div style="background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:10px">
<div style="font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;margin-bottom:4px">Content Quality (20%)</div>
<div style="font-size:12px;color:var(--text2)">Word count, readability, structure, keyword density, lists</div>
</div>
<div style="background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:10px">
<div style="font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;margin-bottom:4px">Accessibility (15%)</div>
<div style="font-size:12px;color:var(--text2)">Alt text, semantic HTML, ARIA, heading hierarchy, lang attr</div>
</div>
<div style="background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:10px">
<div style="font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;margin-bottom:4px">Schema Health (15%)</div>
<div style="font-size:12px;color:var(--text2)">FAQPage, Organization, Article, BreadcrumbList, Product</div>
</div>
<div style="background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:10px">
<div style="font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;margin-bottom:4px">Social Optimization (10%)</div>
<div style="font-size:12px;color:var(--text2)">Open Graph, Twitter Card, og:image, og:description</div>
</div>
<div style="background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:10px">
<div style="font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;margin-bottom:4px">AI Visibility (15%)</div>
<div style="font-size:12px;color:var(--text2)">FAQ, entities, definitions, chunks, intent, citations, schema</div>
</div>
</div>
</div>
</section>
<section style="margin-bottom:20px">
<h2 style="font-size:18px;font-weight:700;margin-bottom:10px;color:var(--text)">
Frequently Asked Questions
</h2>
<div style="display:flex;flex-direction:column;gap:8px">
<details style="background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:12px;cursor:pointer">
<summary style="font-weight:700;color:var(--text);outline:none;user-select:none">
Q: How are audit results calculated?
</summary>
<p style="font-size:12px;color:var(--text2);margin-top:8px;font-family:var(--mono)">
A: Each page is scored across five dimensions (Technical SEO 25%, Content 20%, Accessibility 15%, Schema 15%, Social 10%, AI 15%). Deductions are applied for specific issues (missing title: -18 pts, no H1: -14 pts, etc.). The final page score ranges from 0–100. Audit results show per-page scores, aggregate statistics, and actionable recommendations prioritized by severity and potential impact.
</p>
</details>
<details style="background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:12px;cursor:pointer">
<summary style="font-weight:700;color:var(--text);outline:none;user-select:none">
Q: What makes a page "AI visible"?
</summary>
<p style="font-size:12px;color:var(--text2);margin-top:8px;font-family:var(--mono)">
A: High AI Visibility (80+/100) pages have: (1) Clear FAQ sections (5+ Q&A pairs), (2) Named entities (people, places, organizations), (3) Definition patterns ("X is a...", "X refers to..."), (4) Answer-ready paragraphs (100–300 words), (5) JSON-LD schema (FAQPage, Organization, Article), (6) Semantic HTML landmarks (main, article, section), (7) Internal links (3+ per page), (8) Citations to credible sources. LLMs use these signals to determine if content is worth citing in responses.
</p>
</details>
<details style="background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:12px;cursor:pointer">
<summary style="font-weight:700;color:var(--text);outline:none;user-select:none">
Q: How do I improve my AI Visibility score?
</summary>
<p style="font-size:12px;color:var(--text2);margin-top:8px;font-family:var(--mono)">
A: Use AuditForge's recommendations engine. After each audit, you'll see prioritized suggestions sorted by severity and potential impact. To boost AI Visibility (highest gains): (1) Add FAQPage schema + at least 5 FAQ pairs (+18 pts), (2) Add Organization/Article schema (+15 pts), (3) Add definitions for key concepts (+10 pts), (4) Improve readability (Flesch score 60+) (+10 pts), (5) Add 3+ internal links per page (+8 pts), (6) Add citations to authoritative sources (+8 pts). Most sites reach 85+ AI Visibility with these six changes.
</p>
</details>
<details style="background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:12px;cursor:pointer">
<summary style="font-weight:700;color:var(--text);outline:none;user-select:none">
Q: Why does AuditForge focus on AI Visibility?
</summary>
<p style="font-size:12px;color:var(--text2);margin-top:8px;font-family:var(--mono)">
A: As generative AI (ChatGPT, Claude, Gemini, Perplexity) become primary search interfaces, being cited in AI responses is as important as ranking in Google. Traditional SEO (Google rankings) remains critical, but AI Visibility opens a parallel traffic channel that's currently underutilized. Sites optimized for both SEO and GEO (Generative Engine Optimization) will capture the most organic traffic over the next 3–5 years. AuditForge provides the tools to measure and improve both.
</p>
</details>
<details style="background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:12px;cursor:pointer">
<summary style="font-weight:700;color:var(--text);outline:none;user-select:none">
Q: Is AuditForge really free and open source?
</summary>
<p style="font-size:12px;color:var(--text2);margin-top:8px;font-family:var(--mono)">
A: Yes. AuditForge AI Pro is 100% free, and the source code is open on GitHub (https://github.com/audit-forge-ai). There are no paywalls, no feature restrictions, no usage limits (per session). You can clone the repository, self-host it, modify it, and use it without any attribution required. All data processing happens in your browser — we never store or transmit your audit data.
</p>
</details>
<details style="background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:12px;cursor:pointer">
<summary style="font-weight:700;color:var(--text);outline:none;user-select:none">
Q: How does AuditForge handle private / authenticated pages?
</summary>
<p style="font-size:12px;color:var(--text2);margin-top:8px;font-family:var(--mono)">
A: The URL Crawler cannot access pages behind login or paywalls (they require authentication). However, the Paste HTML Audit mode works on any page you can view. Simply open the page in your browser (while logged in, if needed), copy the HTML source, paste it into AuditForge, and analyze. This is the recommended approach for internal pages, staging environments, or any protected content.
</p>
</details>
<details style="background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:12px;cursor:pointer">
<summary style="font-weight:700;color:var(--text);outline:none;user-select:none">
Q: What about CORS and proxy errors?
</summary>
<p style="font-size:12px;color:var(--text2);margin-top:8px;font-family:var(--mono)">
A: AuditForge's URL Crawler uses a CORS proxy (allorigins.win) to fetch pages from any domain without CORS errors. However, if the proxy is down or the page is unreachable, you'll see a warning. The Paste HTML Audit mode bypasses this entirely — it analyzes HTML you provide directly. If URL crawling fails, switch to Paste mode (both are equally reliable for analysis).
</p>
</details>
</div>
</section>
<section style="margin-bottom:20px">
<h2 style="font-size:18px;font-weight:700;margin-bottom:10px;color:var(--text)">
Citation & Attribution
</h2>
<div class="card" style="padding:16px">
<p style="font-size:12px;color:var(--text2);margin-bottom:8px">
AuditForge AI Pro follows best practices from:
</p>
<ul style="list-style:none;padding:0;margin:0">
<li style="padding:4px 0;font-size:12px">
• <a href="https://developers.google.com/search/docs" style="color:var(--blue);text-decoration:none" rel="noopener" target="_blank">Google Search Central</a> — SEO best practices
</li>
<li style="padding:4px 0;font-size:12px">
• <a href="https://schema.org" style="color:var(--blue);text-decoration:none" rel="noopener" target="_blank">Schema.org</a> — Structured data specifications
</li>
<li style="padding:4px 0;font-size:12px">
• <a href="https://www.w3.org/WAI/WCAG22/quickref/" style="color:var(--blue);text-decoration:none" rel="noopener" target="_blank">W3C WCAG 2.2</a> — Web accessibility standards
</li>
<li style="padding:4px 0;font-size:12px">
• <a href="https://pagespeed.web.dev" style="color:var(--blue);text-decoration:none" rel="noopener" target="_blank">Google PageSpeed Insights</a> — Core Web Vitals
</li>
<li style="padding:4px 0;font-size:12px">
• <a href="https://en.wikipedia.org/wiki/Readability" style="color:var(--blue);text-decoration:none" rel="noopener" target="_blank">Flesch Reading Ease & Flesch-Kincaid Grade Level</a> — Content readability
</li>
</ul>
</div>
</section>
</article>
</details>
</div>
<!-- ══ INSPECTOR PANEL ══ -->
<div class="panel" id="panel-inspector">
<div>
<button class="back-btn" id="backBtn">← Back to Crawler</button>
<div class="ph" id="ddTitle">Page Inspector</div>
<div class="ps" id="ddUrl" style="color:var(--green)"></div>
<div id="ddMeta" style="margin-top:6px;display:flex;gap:8px;flex-wrap:wrap"></div>
</div>
<!-- TABS — Robots & Sitemap tab added -->
<div class="mod-tabs" id="modTabs">
<button class="mtab active" data-mod="meta">Metadata</button>
<button class="mtab" data-mod="headings">Headings</button>
<button class="mtab" data-mod="keywords">Keywords</button>
<button class="mtab" data-mod="readability">Readability</button>
<button class="mtab" data-mod="images">Images</button>
<button class="mtab" data-mod="links">Links</button>
<button class="mtab" data-mod="schema">Schema</button>
<button class="mtab" data-mod="robots">Robots & Sitemap</button>
<button class="mtab" data-mod="pagespeed">Pagespeed / CWV</button>
<button class="mtab" data-mod="security">Security</button>
<button class="mtab" data-mod="ai">AI Radar</button>
<button class="mtab" data-mod="issues">Issues <span class="nbadge r" id="issueBadge">0</span></button>
<button class="mtab" data-mod="suggestions">AI Tips</button>
</div>
<!-- ── META PANE — now complete with desc, SERP toggle, pixel bars ── -->
<div class="mpane active" id="mod-meta">
<div class="meta-grid">
<div>
<!-- Title field -->
<div class="mfield" style="margin-bottom:10px">
<div class="mfield-hd">
Title Tag
<span class="cc" id="titleCC">0 ch</span>
</div>
<textarea id="metaTitle" rows="2" oninput="syncSerp()"></textarea>
<div class="pxbar ok" id="titleBar"></div>
<div style="padding:4px 12px 6px;font-family:var(--mono);font-size:10px;color:var(--text3)">
Pixel width: <span id="titlePx">0 / 600px</span>
</div>
</div>
<!-- Description field — was missing from HTML -->
<div class="mfield">
<div class="mfield-hd">
Meta Description
<span class="cc" id="descCC">0 ch</span>
</div>
<textarea id="metaDesc" rows="3" oninput="syncSerp()"></textarea>
<div class="pxbar ok" id="descBar"></div>
<div style="padding:4px 12px 6px;font-family:var(--mono);font-size:10px;color:var(--text3)">
Pixel width: <span id="descPx">0 / 920px</span>
</div>
</div>
</div>
<!-- SERP Preview — toggle buttons added -->
<div class="serp-box">
<!-- serpToggle with stbtn buttons — were missing -->
<div class="serp-toggle" id="serpToggle">
<button class="stbtn active" onclick="serpMode('desktop')">Desktop</button>
<button class="stbtn" onclick="serpMode('mobile')">Mobile</button>
</div>
<div class="serp-preview" id="serpPreview">
<div class="serp-site" id="serpSite"></div>
<div class="serp-title" id="serpTitle">Page Title Here</div>
<div class="serp-desc" id="serpDesc">Description preview...</div>
</div>
</div>
</div>
<!-- Pixel info row -->
<div class="px-info" style="margin-top:8px">
<span>Title: <span id="titlePxInfo" style="color:var(--text)">—</span></span>
<span>Description: <span id="descPxInfo" style="color:var(--text)">—</span></span>
<span style="color:var(--text3)">Optimal: Title ≤600px · Desc ≤920px</span>
</div>
</div>
<div class="mpane" id="mod-headings">
<div class="htree" id="headingTree"></div>
<div id="hViolations"></div>
</div>
<div class="mpane" id="mod-keywords"></div>
<div class="mpane" id="mod-readability"></div>
<div class="mpane" id="mod-images"></div>
<div class="mpane" id="mod-links"></div>
<!-- Schema pane — unchanged layout, schema-out class added for proper flex -->
<div class="mpane" id="mod-schema">
<div id="mod-schema-container"></div>
<div class="schema-layout">
<div>
<select class="schema-sel" id="schemaType" onchange="buildSchemaFields()"></select>
<div id="schemaFields"></div>
</div>
<div class="schema-out">
<div class="schema-out-hd">
<span>JSON-LD Output</span>
<button class="copy-btn" onclick="copySchema()">Copy</button>
</div>
<div class="schema-code" id="schemaCode"></div>
</div>
</div>
</div>
<!-- ── ROBOTS & SITEMAP PANE — new, wires existing loadRobotsSitemap() ── -->
<div class="mpane" id="mod-robots"></div>
<!-- ── AI RADAR PANE — now has all required DOM nodes ── -->
<div class="mpane" id="mod-ai">
<div class="ai-layout">
<!-- Ring card — radarArc and aiNum are now present -->
<div class="ai-ring-card">
<div class="ai-ring">
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="42" fill="none" stroke="var(--border2)" stroke-width="8"/>
<circle id="radarArc" cx="50" cy="50" r="42"
fill="none" stroke="var(--green)" stroke-width="8"
stroke-dasharray="264" stroke-dashoffset="264"
stroke-linecap="round"/>
</svg>
<div class="ai-score-num" id="aiNum" style="color:var(--green)">—</div>
</div>
<div class="ai-label">AI Visibility</div>
<div class="ai-sub">Overall readiness score</div>
</div>
<!-- Metrics column — aiMetrics container now present -->
<div class="ai-metrics" id="aiMetrics">
<div class="grid-empty" style="font-size:11px">Run an audit to see AI metrics.</div>
</div>
</div>
</div>
<div class="mpane" id="mod-pagespeed">
<div id="mod-pagespeed-container">
<div style="text-align:center;padding:40px;color:var(--text3)">
<h3>PageSpeed Insights Gateway</h3>
<p style="font-size:12px;margin-top:6px">Select a crawled page to inspect speed milestones & CWV scores.</p>
</div>
</div>
</div>
<div class="mpane" id="mod-security">
<div id="mod-security-container">
<div style="text-align:center;padding:40px;color:var(--text3)">
<h3>Response Headers Security</h3>
<p style="font-size:12px;margin-top:6px">Select a crawled page to analyze security header compliances.</p>
</div>
</div>
</div>
<div class="mpane" id="mod-issues"></div>
<div class="mpane" id="mod-suggestions"></div>
</div>
<!-- ══ HISTORY PANEL ══ -->
<div class="panel" id="panel-history">
<div>
<div class="ph">Audit History</div>
<div class="ps">Stored locally · max 50 entries · never leaves your browser</div>
</div>
<div style="display:flex;justify-content:flex-end;margin-bottom:4px">
<button class="exp-btn" onclick="clearAllHistory()" style="font-size:11px;padding:6px 12px">Clear All</button>
</div>
<div class="history-list" id="historyList"></div>
</div>
<!-- ══ COMPARE PANEL ══ -->
<div class="panel" id="panel-compare">
<div>
<div class="ph">Compare Audits</div>
<div class="ps">Select two history entries to compare performance</div>
</div>
<div class="card row">
<select id="compareA" class="schema-sel" style="flex:1"></select>
<select id="compareB" class="schema-sel" style="flex:1"></select>
<button class="exec-btn" onclick="runComparison()">Compare</button>
</div>
<div id="compareResult"></div>
</div>
<!-- ══ SITE-WIDE PANELS ══ -->
<div class="panel" id="panel-sitewide">
<div>
<div class="ph">Site-Wide Issues Dashboard</div>
<div class="ps">Consolidated optimization errors crawled across all assets</div>
</div>
<div id="panel-sitewide-container" style="width:100%">
<div style="text-align:center;padding:40px;color:var(--text3)">
<h3>No page crawl data found yet</h3>
<p style="font-size:12px;margin-top:6px">Initiate a link crawl on the console to compile site-wide analytics.</p>
</div>
</div>
</div>
<!-- ══ LINK GRAPH PANEL ══ -->
<div class="panel" id="panel-graph">
<div>
<div class="ph">Internal Link Graph Visualizer</div>
<div class="ps">Interactive nodes mapping linking layout configurations</div>
</div>
<div id="panel-graph-container" style="width:100%">
<div style="text-align:center;padding:40px;color:var(--text3)">
<h3>Orphan and Link Graph map empty</h3>
<p style="font-size:12px;margin-top:6px">Run a complete site-crawl to unlock link linkage visualizer.</p>
</div>
</div>
</div>
<!-- ══ AI SEO STUDIO PANEL (PHASES 7-11) ══ -->
<div class="panel" id="panel-ai">
<div>
<div class="ph">AuditForge AI SEO Studio</div>
<div class="ps">Generative Search Optimization & Integration Workspace</div>
</div>
<!-- AI Workspace subtabs -->
<div class="mod-tabs" style="margin-top:10px">
<button class="mtab active" id="btn-tab-consultant" onclick="toggleAISubTab('consultant')">AI Consultant Chat</button>
<button class="mtab" id="btn-tab-gsc" onclick="toggleAISubTab('gsc')">Google Search Console</button>
<button class="mtab" id="btn-tab-geo" onclick="toggleAISubTab('geo')">AI Search / GEO Engine</button>
<button class="mtab" id="btn-tab-competitor" onclick="toggleAISubTab('competitor')">Competitor Gap Analysis</button>
<button class="mtab" id="btn-tab-brief" onclick="toggleAISubTab('brief')">AI Content Briefs</button>
<button class="mtab" onclick="triggerPDFExport()">🖨 White-Label PDF</button>
</div>
<!-- API KEYS CONFIGURATION DRAWER (Saved 100% locally for Static Deployments) -->
<div class="card" style="margin-top:12px;background:rgba(16,185,129,0.02);border:1.5px solid var(--border);padding:14px">
<div style="display:flex;justify-content:space-between;align-items:center;cursor:pointer" onclick="const b = $('collapsibleKeySection'); b.style.display = b.style.display === 'none' ? 'block' : 'none'">
<div style="display:flex;align-items:center;gap:8px">
<span style="font-size:16px">🔑</span>
<div>
<div style="font-size:12px;font-weight:700;color:var(--text1)">Static Deploy & Local API Configuration Gateway</div>
<div style="font-size:10px;color:var(--text3)">Required for direct AI and PageSpeed requests when browsing on static GitHub Pages. Stored 100% locally.</div>
</div>
</div>
<div style="font-size:11px;font-family:var(--mono);color:#10B981;font-weight:700">Toggle Setup Controls ▾</div>
</div>
<div id="collapsibleKeySection" style="display:none;margin-top:14.px;border-top:1px solid var(--border);padding-top:12px">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:14.px">
<div>
<label style="font-size:10px;font-weight:700;color:var(--text2);display:block;margin-bottom:4px">Google Gemini AI Pro API Key</label>
<input type="password" id="customGeminiKeyInput" placeholder="Paste Gemini API Key (AI-Studio)..." style="width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:6px 10px;font-family:var(--mono);font-size:11px;color:var(--text1)" oninput="localStorage.setItem('custom_gemini_api_key', this.value.trim()); if(this.value.trim()){showToast('Gemini local key configured!');}" />
<div style="font-size:10px;color:var(--text3);margin-top:4px">
Used for Consultant Chat & Brief outlines. <a href="https://aistudio.google.com/" target="_blank" style="color:#10B981;text-decoration:underline">Get Free API Key here ↗</a>
</div>
</div>
<div>
<label style="font-size:10px;font-weight:700;color:var(--text2);display:block;margin-bottom:4px">Google PageSpeed Insights API Key</label>
<input type="password" id="customPageSpeedKeyInput" placeholder="Paste PageSpeed API Key (Optional)..." style="width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:6px 10px;font-family:var(--mono);font-size:11px;color:var(--text1)" oninput="localStorage.setItem('custom_pagespeed_api_key', this.value.trim()); if(this.value.trim()){showToast('PageSpeed key saved!');}" />
<div style="font-size:10px;color:var(--text3);margin-top:4px">
Used for live speed and accessibility evaluations. <a href="https://console.cloud.google.com/apis/library/pagespeedonline.googleapis.com" target="_blank" style="color:#10B981;text-decoration:underline">Get Key on Google Cloud Console ↗</a>
</div>
</div>
</div>
<div style="font-size:10px;color:var(--text3);margin-top:10px;border-top:1.5px dashed var(--border);padding-top:8px;font-family:var(--mono)">
🛡️ <strong>Safety Guarantee:</strong> Your API credentials are saved exclusively inside your browser's private Web Storage (<code style="color:#10B981">window.localStorage</code>). They are spent directly on matching Google endpoints and <strong>never</strong> transfer to any third-party databases.
</div>
</div>
</div>
<!-- SUB PANELS -->
<div id="ai-sub-consultant" class="ai-pane active" style="width:100%;margin-top:14px">
<div class="card pb-6" style="display:flex;flex-direction:column;height:420px">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
<div class="sec-title">Conversational AI SEO Consultant</div>
<span style="font-size:10px;background:#10B981;color:#fff;border-radius:4px;padding:2px 6px;font-family:var(--mono);font-weight:700">✓ 100% FREE & UNLIMITED</span>
</div>
<div class="card-sub" style="margin-bottom:12px">Real-time answers, priority roadmaps and GEO plans powered by crawler context. Paid AI capabilities are fully covered by the enterprise workspace.</div>
<div id="chatLog" style="flex:1;background:rgba(0,0,0,0.1);border:1px solid var(--border);border-radius:6px;padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:10px">
<div style="align-self:flex-start;background:rgba(16,185,129,0.03);border:1px solid #10B981;border-radius:6px 6px 6px 0;padding:8px 12px;max-width:85%;font-size:11px;font-family:var(--mono)">
<span style="color:#10B981;font-weight:700">AI Consultant:</span><br>
Welcome to Enterprise AI Studio! I have fully loaded your crawl anomalies and keywords parameters. Ask me any SEO consulting strategy, competitor gap remedy, or content outlines!
</div>
</div>
<div style="display:flex;gap:8px;margin-top:10px">
<input type="text" id="chatInput" placeholder="Ex: 'List 3 priorities for home page content' or 'How to fix H1 gaps?'..." style="flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:8px 12px;font-family:var(--mono);font-size:12px;color:var(--text1)" onkeydown="if(event.key==='Enter') sendConsultantChat()" />
<button class="exec-btn" onclick="sendConsultantChat()">Send Input</button>
</div>
</div>
</div>
<div id="ai-sub-gsc" class="ai-pane" style="width:100%;margin-top:14px;display:none">
<div id="panel-gsc"></div>
</div>
<div id="ai-sub-geo" class="ai-pane" style="width:100%;margin-top:14px;display:none">
<div id="panel-geo-container"></div>
</div>
<div id="ai-sub-competitor" class="ai-pane" style="width:100%;margin-top:14px;display:none">
<div class="card pb-6">
<div class="sec-title">Competitor Optimization Gaps Map</div>
<div class="card-sub" style="margin-bottom:12px">Compare real-time schemas, topic layers, and keywords coverage with competitor landing pages</div>
<div style="display:flex;gap:8px;margin-bottom:14px">
<input type="text" id="compUrlInput" placeholder="Ex: https://competitordomain.com/seo-check" style="flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:8px 12px;font-family:var(--mono);font-size:12px;color:var(--text1)" />
<button class="exec-btn" onclick="triggerCompetitorAnalysis()">Analyze Competitor</button>
</div>
<table style="width:100%;font-size:11px;font-family:monospace;border-collapse:collapse">
<thead>
<tr style="border-bottom:1px solid var(--border);text-align:left">
<th style="padding:8px">Metrics Dimension</th>
<th style="padding:8px">My Page Core</th>
<th style="padding:8px">Competitor Core</th>
<th style="padding:8px">Strategic Action / Verdict</th>
</tr>
</thead>
<tbody id="compTableBody">
<tr>
<td colspan="4" style="text-align:center;padding:20px;color:var(--text3)">Input competitor URL above to run instant semantic gaps analysis</td>
</tr>
</tbody>
</table>
<div id="competitorGapsSummary"></div>
</div>
</div>
<div id="ai-sub-brief" class="ai-pane" style="width:100%;margin-top:14px;display:none">
<div class="card pb-6">
<div class="sec-title">AI Content Brief Plan Generator</div>
<div class="card-sub" style="margin-bottom:12px">Autogenerate primary & secondary semantic groupings, structure layouts and FAQs targeting exact focus queries</div>
<div style="display:flex;gap:8px;margin-bottom:14px">
<input type="text" id="briefQueryInput" placeholder="Ex: Enterprise SEO metrics, modern web auditing..." style="flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:8px 12px;font-family:var(--mono);font-size:12px;color:var(--text1)" />
<button class="exec-btn" onclick="triggerBriefGeneration()">Generate Outline Brief</button>
</div>
<div id="briefOutputContainer">
<div style="font-family:var(--mono);font-size:11px;color:var(--text3);text-align:center;padding:24px;border:1px dashed var(--border);border-radius:6px">
Brief Blueprint output will render here...
</div>
</div>
</div>
</div>
<!-- Custom Script for local subtab switching -->
<script>
function toggleAISubTab(tabName) {
document.querySelectorAll('.ai-pane').forEach(el => {
el.style.display = 'none';
el.classList.remove('active');
});
document.querySelectorAll('#panel-ai .mtab').forEach(el => {
el.classList.remove('active');
});
const curPane = document.getElementById('ai-sub-' + tabName);
if (curPane) {
curPane.style.display = 'block';
curPane.classList.add('active');
}
const curBtn = document.getElementById('btn-tab-' + tabName);
if (curBtn) {
curBtn.classList.add('active');
}
// Trigger dynamic rendering based on active subtab
if (tabName === 'gsc') {
if (typeof renderGSCContainer === 'function') renderGSCContainer();
} else if (tabName === 'geo') {
if (typeof renderGEOPanel === 'function') renderGEOPanel();
}
}
</script>
</div>
</div><!-- /main -->
</div><!-- /app -->
<!-- External JS -->
<script src="js/core.js"></script>
<script src="js/parser.js"></script>
<script src="js/crawler.js"></script>
<script src="js/analysis.js"></script>
<script src="js/scoring.js"></script>
<script src="js/recommendations.js"></script>
<script src="js/robots-sitemap.js"></script>
<script src="js/inspector.js"></script>
<script src="js/history.js"></script>
<script src="js/exports.js"></script>
<script src="js/overrides.js"></script>
<script src="js/enterprise-expansion.js"></script>
<script src="js/app-init.js"></script>
<!-- Footer -->
<footer class="site-footer">
<div class="footer-links">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</div>
<div class="footer-copy">
© 2026 AuditForge AI — Made with ♥ from
<a href="https://sourav-bagchi-official.github.io/" target="_blank" rel="noopener noreferrer">
Sourav Bagchi
</a>
</div>
</footer>
</body>
</html>