Skip to content

Commit 854cd30

Browse files
manugargmanugarg
authored
Redesign web app as pacparser homepage + tester (#236)
Light theme with dark charcoal header (#1a2332), green accent (#16a34a), Rubik body font, and pacparser brand in JetBrains Mono. Dark code editor textarea replaces the plain white box. Header now clearly identifies the page as the pacparser library homepage with feature tags and links to GitHub, PyPI, and docs.
1 parent ffdefd7 commit 854cd30

File tree

2 files changed

+602
-266
lines changed

2 files changed

+602
-266
lines changed

‎web/index.html‎

Lines changed: 99 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -4,107 +4,156 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Pacparser - PAC File Parser Library & Tester</title>
7+
<title>Pacparser — PAC File Parser Library</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
811
<link rel="stylesheet" href="style.css">
912
</head>
1013

1114
<body>
1215
<div class="container">
1316
<header>
14-
<h1>🌐 PAC File Tester</h1>
15-
<p class="subtitle">Test your Proxy Auto-Config files online - 100% client-side, no data sent to servers</p>
17+
<div class="brand">
18+
<span class="brand-icon">⬡</span>
19+
<h1>pacparser</h1>
20+
</div>
21+
<p class="tagline">A C library to parse Proxy Auto-Config (PAC) files</p>
22+
<p class="description">
23+
Embeds <strong>QuickJS</strong> to evaluate PAC scripts and implements all standard PAC
24+
helper functions. Ships with a C API, Python bindings, and the
25+
<code>pactester</code> CLI. Licensed under LGPL.
26+
</p>
27+
<div class="feature-tags">
28+
<span class="tag">C Library</span>
29+
<span class="tag">Python Bindings</span>
30+
<span class="tag">QuickJS Engine</span>
31+
<span class="tag">pactester CLI</span>
32+
<span class="tag">LGPL</span>
33+
</div>
34+
<div class="header-links">
35+
<a href="https://github.com/manugarg/pacparser" target="_blank" class="header-link">
36+
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
37+
GitHub
38+
</a>
39+
<a href="https://pypi.org/project/pacparser/" target="_blank" class="header-link">
40+
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M11.914 0C5.82 0 6.2 2.656 6.2 2.656l.007 2.752h5.814v.826H3.9S0 5.789 0 11.969c0 6.18 3.403 5.963 3.403 5.963h2.031v-2.867s-.109-3.402 3.35-3.402h5.769s3.24.052 3.24-3.13V3.23S18.28 0 11.914 0zm-3.22 1.867a1.047 1.047 0 1 1 0 2.094 1.047 1.047 0 0 1 0-2.094z"/><path d="M12.086 24c6.094 0 5.714-2.656 5.714-2.656l-.007-2.752h-5.814v-.826h8.121S24 18.211 24 12.031c0-6.18-3.403-5.963-3.403-5.963h-2.031v2.867s.109 3.402-3.35 3.402h-5.769s-3.24-.052-3.24 3.13v5.303S5.72 24 12.086 24zm3.22-1.867a1.047 1.047 0 1 1 0-2.094 1.047 1.047 0 0 1 0 2.094z"/></svg>
41+
PyPI
42+
</a>
43+
<a href="https://github.com/manugarg/pacparser#readme" target="_blank" class="header-link">
44+
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm4 18H6V4h7v5h5v11zM8 15h8v2H8zm0-4h8v2H8zm0-4h5v2H8z"/></svg>
45+
Docs
46+
</a>
47+
</div>
1648
</header>
1749

1850
<main>
51+
<div class="tester-header">
52+
<div class="tester-header-line"></div>
53+
<span class="tester-title">Online Tester</span>
54+
<div class="tester-header-line"></div>
55+
</div>
56+
<p class="tester-subtitle">Evaluate your PAC file directly in the browser — no install needed, 100% client-side.</p>
57+
1958
<!-- PAC File Input Section -->
2059
<section class="section">
21-
<h2>PAC File</h2>
60+
<h3 class="section-title">
61+
<span class="section-number">01</span>
62+
PAC File
63+
</h3>
2264
<div class="input-group">
23-
<textarea id="pacFile" placeholder="Paste your PAC file content here..." rows="10"></textarea>
65+
<div class="editor-wrap">
66+
<div class="editor-bar">
67+
<span class="editor-dot red"></span>
68+
<span class="editor-dot yellow"></span>
69+
<span class="editor-dot green"></span>
70+
<span class="editor-label">proxy.pac</span>
71+
</div>
72+
<textarea id="pacFile"
73+
placeholder="// Paste your PAC file here...
74+
function FindProxyForURL(url, host) {
75+
return &quot;DIRECT&quot;;
76+
}"
77+
rows="12" spellcheck="false" autocomplete="off"></textarea>
78+
</div>
2479
<div class="file-upload">
2580
<label for="fileInput" class="btn-secondary">
26-
📁 Or Upload .pac File
81+
↑ Upload .pac file
2782
</label>
2883
<input type="file" id="fileInput" accept=".pac,.js,.txt" style="display: none;">
29-
<span id="fileName"></span>
84+
<span id="fileName" class="file-name"></span>
3085
</div>
3186
</div>
3287
</section>
3388

3489
<!-- Test Configuration Section -->
3590
<section class="section">
36-
<h2>Test Configuration</h2>
91+
<h3 class="section-title">
92+
<span class="section-number">02</span>
93+
Test Parameters
94+
</h3>
3795

3896
<div class="input-row">
39-
<label for="testUrl">Test URL:</label>
40-
<input type="text" id="testUrl" placeholder="https://example.com/path" value="https://example.com">
97+
<label for="testUrl">Test URL</label>
98+
<input type="text" id="testUrl" placeholder="https://example.com/path"
99+
value="https://example.com" autocomplete="off" spellcheck="false">
41100
</div>
42101

43102
<div class="input-row">
44-
<label for="clientIp">Client IP (optional):</label>
45-
<input type="text" id="clientIp" placeholder="192.168.1.100">
46-
<small>Used for myIpAddress() function</small>
103+
<label for="clientIp">
104+
Client IP
105+
<span class="label-hint">optional — used by myIpAddress()</span>
106+
</label>
107+
<input type="text" id="clientIp" placeholder="192.168.1.100"
108+
autocomplete="off" spellcheck="false">
47109
</div>
48110

49111
<!-- DNS Mappings Section -->
50112
<div class="dns-section">
51-
<h3>DNS Mappings (optional)</h3>
52-
<p class="help-text">Provide hostname to IP address mappings for dnsResolve() and isResolvable()
53-
functions</p>
113+
<div class="dns-header">
114+
<div>
115+
<h4>DNS Mappings <span class="label-hint">optional</span></h4>
116+
<p class="help-text">Mock dnsResolve() and isResolvable() — map hostnames to IP addresses</p>
117+
</div>
118+
<button class="btn-add" onclick="addDnsMapping()">+ Add mapping</button>
119+
</div>
54120

55121
<div id="dnsMappings">
56122
<div class="dns-mapping">
57-
<input type="text" placeholder="hostname (e.g., example.com)" class="dns-host">
123+
<input type="text" placeholder="hostname" class="dns-host"
124+
autocomplete="off" spellcheck="false">
58125
<span class="arrow">→</span>
59-
<input type="text" placeholder="IP address" class="dns-ip">
60-
<button class="btn-remove" onclick="removeDnsMapping(this)">✕</button>
126+
<input type="text" placeholder="IP address" class="dns-ip"
127+
autocomplete="off" spellcheck="false">
128+
<button class="btn-remove" onclick="removeDnsMapping(this)" title="Remove">✕</button>
61129
</div>
62130
</div>
63-
64-
<button class="btn-secondary" onclick="addDnsMapping()">+ Add DNS Mapping</button>
65-
</div>
66-
</section>
67-
68-
<!-- About Section -->
69-
<section class="section about-section">
70-
<h2>About Pacparser</h2>
71-
<div class="about-content">
72-
<p>
73-
<strong>Pacparser</strong> is a library to parse proxy auto-config (PAC) files.
74-
PAC files are a widely used method for configuring web browsers to select a proxy server.
75-
Pacparser makes it easy to use PAC files in your own programs.
76-
</p>
77-
<div class="links-grid">
78-
<a href="https://github.com/manugarg/pacparser" class="btn-outline" target="_blank">
79-
<span class="icon">📦</span> GitHub Repository
80-
</a>
81-
<a href="https://github.com/manugarg/pacparser#readme" class="btn-outline" target="_blank">
82-
<span class="icon">📖</span> Documentation
83-
</a>
84-
<a href="https://pypi.org/project/pacparser/" class="btn-outline" target="_blank">
85-
<span class="icon">🐍</span> PyPI Package
86-
</a>
87-
</div>
88131
</div>
89132
</section>
90133

91-
92134
<!-- Test Button -->
93135
<div class="action-section">
94-
<button id="testBtn" class="btn-primary" onclick="testPac()">🚀 Test Proxy</button>
136+
<button id="testBtn" class="btn-primary" onclick="testPac()">
137+
<span class="btn-text">Run FindProxyForURL</span>
138+
<span class="btn-arrow">→</span>
139+
</button>
95140
</div>
96141

97142
<!-- Results Section -->
98143
<section class="section" id="resultsSection" style="display: none;">
99-
<h2>Results</h2>
144+
<h3 class="section-title">
145+
<span class="section-number">03</span>
146+
Result
147+
</h3>
100148
<div id="results"></div>
101149
</section>
102150
</main>
103151

104152
<footer>
105153
<p>
106-
Powered by <a href="https://github.com/manugarg/pacparser" target="_blank">Pacparser</a> |
107-
<a href="https://github.com/manugarg/pacparser/blob/main/COPYING" target="_blank">LGPL License</a>
154+
<a href="https://github.com/manugarg/pacparser" target="_blank">pacparser</a>
155+
&nbsp;·&nbsp; LGPL License
156+
&nbsp;·&nbsp; Tester runs entirely in your browser
108157
</p>
109158
</footer>
110159
</div>
@@ -113,4 +162,4 @@ <h2>Results</h2>
113162
<script src="pac-tester.js"></script>
114163
</body>
115164

116-
</html>
165+
</html>

0 commit comments

Comments
 (0)