Redesign landing page, JSON caller response, shared email shell

- docs.htm: dark single-page redesign in plain CSS, live URL builder,
  all four parsers documented, Bootstrap CDN dependency dropped
- index.php: respond with pretty-printed JSON (success and 400 error);
  email "Parsed Variables" block uses JSON instead of print_r
- parsers/helpers.php: emailShell() provides one stylesheet, header and
  footer for every email template; five duplicated stylesheets removed
This commit is contained in:
Andy Dixon
2026-09-11 18:23:25 +01:00
parent f3f58dbf95
commit c1ec1adf85
7 changed files with 602 additions and 1503 deletions
+270 -564
View File
@@ -1,587 +1,293 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webhook Email Forwarder - Documentation</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 40px 0;
}
.doc-container {
background: white;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
padding: 40px;
margin-bottom: 40px;
}
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 60px 40px;
border-radius: 15px;
margin-bottom: 40px;
text-align: center;
}
.code-block {
background: #f8f9fa;
border-left: 4px solid #667eea;
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
overflow-x: auto;
}
.feature-card {
border: none;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.2s;
height: 100%;
}
.feature-card:hover {
transform: translateY(-5px);
}
.badge-custom {
font-size: 0.85rem;
padding: 0.5em 0.8em;
}
h2 {
color: #667eea;
margin-top: 30px;
margin-bottom: 20px;
}
h3 {
color: #764ba2;
margin-top: 25px;
margin-bottom: 15px;
}
.alert-info {
border-left: 4px solid #0dcaf0;
}
.alert-warning {
border-left: 4px solid #ffc107;
}
.alert-success {
border-left: 4px solid #198754;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webhook → Email | <?php echo $_SERVER['HTTP_HOST']; ?></title>
<meta name="description" content="Point any webhook at a URL with your email in it. Get the whole request in your inbox. That's it. That's the product.">
<style>
:root{
--bg:#0b0b10;--bg2:#12121a;--panel:#161622;--line:#26263a;
--text:#ececf4;--muted:#9a9ab4;--dim:#6a6a86;
--a1:#8b5cf6;--a2:#ec4899;--a3:#f97316;
--grad:linear-gradient(110deg,var(--a1),var(--a2) 55%,var(--a3));
--mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;
background-image:
radial-gradient(900px 500px at 15% -10%,rgba(139,92,246,.22),transparent 60%),
radial-gradient(700px 400px at 90% 10%,rgba(236,72,153,.16),transparent 60%),
linear-gradient(var(--line) 1px,transparent 1px),
linear-gradient(90deg,var(--line) 1px,transparent 1px);
background-size:auto,auto,48px 48px,48px 48px;
background-attachment:fixed;
}
a{color:inherit}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
::selection{background:var(--a2);color:#fff}
/* nav */
nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0;font-size:14px}
nav .brand{font-family:var(--mono);font-weight:700;letter-spacing:-.02em}
nav .brand span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;color:var(--muted)}
nav a{text-decoration:none}nav a:hover{color:var(--text)}
@media(max-width:600px){nav ul{display:none}}
/* hero */
.hero{padding:70px 0 40px;position:relative}
.eyebrow{font-family:var(--mono);font-size:13px;color:var(--a2);letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
h1{font-size:clamp(2.6rem,7vw,5.2rem);line-height:.98;letter-spacing:-.04em;margin:0 0 22px;font-weight:800}
h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:clamp(1.05rem,2vw,1.35rem);color:var(--muted);max-width:640px;margin:0 0 30px}
.hero p b{color:var(--text);font-weight:600}
/* url builder */
.builder{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04)}
.builder label{display:block;font-size:12px;color:var(--dim);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.builder input{
width:100%;font:inherit;font-size:1.1rem;padding:12px 14px;border-radius:10px;
background:var(--bg);border:1px solid var(--line);color:var(--text);outline:none;
}
.builder input:focus{border-color:var(--a1);box-shadow:0 0 0 3px rgba(139,92,246,.25)}
.url{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.url code{flex:1;min-width:0;font-family:var(--mono);font-size:.95rem;word-break:break-all;padding:12px 14px;border-radius:10px;background:var(--bg);border:1px dashed var(--line)}
.url code b{color:var(--a3);font-weight:600}
button.copy{font:inherit;font-size:.9rem;font-weight:600;padding:12px 18px;border-radius:10px;border:0;cursor:pointer;background:var(--grad);color:#fff;white-space:nowrap}
button.copy:active{transform:scale(.97)}
.hint{font-size:.85rem;color:var(--dim);margin:12px 0 0}
/* sections */
section{padding:56px 0;border-top:1px solid var(--line)}
h2{font-size:clamp(1.7rem,4vw,2.4rem);letter-spacing:-.03em;margin:0 0 8px;line-height:1.1}
.sub{color:var(--muted);margin:0 0 28px;max-width:640px}
h3{font-size:1.1rem;margin:28px 0 10px;letter-spacing:-.01em}
.tangent{color:var(--dim);font-size:.92rem;font-style:italic}
p code,li code{font-family:var(--mono);font-size:.88em;background:var(--panel);border:1px solid var(--line);padding:2px 6px;border-radius:6px;color:#fbbf24}
pre{
margin:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;
font-family:var(--mono);font-size:.9rem;line-height:1.55;overflow-x:auto;color:#d6d6e6;
position:relative
}
pre::before{content:attr(data-lang);position:absolute;top:8px;right:12px;font-size:11px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
pre .h{color:#f9a8d4}pre .s{color:#fcd34d}pre .k{color:#a5b4fc}
.stack{display:grid;gap:14px}
/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;counter-reset:s}
.step{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;position:relative;counter-increment:s}
.step::before{content:"0" counter(s);font-family:var(--mono);font-size:2.4rem;font-weight:800;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:12px}
.step b{display:block;font-size:1.05rem;margin-bottom:4px}
.step span{color:var(--muted);font-size:.95rem}
/* parsers */
.parsers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.parser{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;transition:transform .15s,border-color .15s}
.parser:hover{transform:translateY(-3px);border-color:var(--a1)}
.parser .ico{font-size:1.6rem;margin-bottom:8px}
.parser code{display:inline-block;font-family:var(--mono);font-size:.85rem;color:var(--a3);margin-bottom:8px}
.parser p{margin:0;color:var(--muted);font-size:.95rem}
/* inbox list */
.inbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;list-style:none;padding:0;margin:0}
.inbox li{padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;font-size:.95rem}
.inbox li b{display:block;color:var(--text)}
.inbox li span{color:var(--muted)}
/* callouts */
.note{border-left:3px solid var(--a1);padding:14px 18px;background:rgba(139,92,246,.08);border-radius:0 12px 12px 0;margin:22px 0}
.note.warn{border-color:var(--a3);background:rgba(249,115,22,.08)}
.note b{color:var(--text)}
.note p{margin:0;color:var(--muted)}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{font-family:var(--mono);font-size:.8rem;padding:5px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
footer{padding:50px 0 60px;border-top:1px solid var(--line);color:var(--dim);font-size:.9rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer a{color:var(--muted)}
</style>
</head>
<body>
<div class="container">
<!-- Hero Section -->
<div class="hero">
<h1 class="display-4"><i class="bi bi-webhook"></i> Webhook Email Forwarder</h1>
<p class="lead">A simple, elegant solution for debugging webhooks by forwarding them directly to your email</p>
<p class="mb-0">Version 1.0 | Made with ❤️ by Andy Dixon</p>
<div class="wrap">
<nav>
<div class="brand"><span>webhook</span>→email</div>
<ul>
<li><a href="#start">Start</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#parsers">Parsers</a></li>
<li><a href="#inbox">Inbox</a></li>
<li><a href="#faq">Caveats</a></li>
</ul>
</nav>
<div class="hero">
<div class="eyebrow">// no signup. no dashboard. no, seriously.</div>
<h1>Webhooks.<br>Straight to <em>your inbox.</em></h1>
<p>Put your email in the URL. Point a webhook at it. Every header, every byte of body, every superglobal shows up as an email. <b>Done. Go do the next thing.</b></p>
<div class="builder">
<label for="em">Type your email → get your URL</label>
<input id="em" type="email" placeholder="you@example.com" autocomplete="email" spellcheck="false">
<div class="url">
<code>https://<?php echo $_SERVER['HTTP_HOST']; ?>/<b id="out">you%40example.com</b></code>
<button class="copy" id="cp">Copy</button>
</div>
<p class="hint">Yes the <code>@</code> becomes <code>%40</code>. Yes that's the whole trick. Add <code>/github</code>, <code>/json</code>, etc. on the end for the fancy parsers — more on that below, if you scroll that far.</p>
</div>
</div>
<section id="start">
<h2>Three steps. Two, really.</h2>
<p class="sub">The third one is just "wait for an email", which you were going to do anyway.</p>
<div class="steps">
<div class="step"><b>Encode your email</b><span><code>@</code> → <code>%40</code>. The box above already did it for you. Ok moving on.</span></div>
<div class="step"><b>Paste the URL into whatever</b><span>Stripe, GitHub, Grafana, that cron job, a curl you're about to forget you wrote.</span></div>
<div class="step"><b>Check your inbox</b><span>Full request, nicely formatted. Subject starts with ‼️ so it's filterable. You're welcome.</span></div>
</div>
<!-- Overview Section -->
<div class="doc-container">
<h2><i class="bi bi-info-circle"></i> Overview</h2>
<p class="lead">This webhook service captures incoming HTTP requests and forwards complete request details (headers, body, metadata) to your specified email address.</p>
<h3>The fastest possible test</h3>
<pre data-lang="bash">curl -X POST https://<?php echo $_SERVER['HTTP_HOST']; ?>/<span class="s" id="ex1">you%40example.com</span> \
-d '{"test": "hello, is this thing on"}'</pre>
<p class="tangent">(the email will arrive before you've alt-tabbed back. probably. depends on your mail server. anyway.)</p>
</section>
<div class="row mt-4">
<div class="col-md-4 mb-3">
<div class="card feature-card">
<div class="card-body text-center">
<i class="bi bi-envelope-check text-primary" style="font-size: 3rem;"></i>
<h5 class="card-title mt-3">Email Delivery</h5>
<p class="card-text">Receive webhook data directly in your inbox</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card feature-card">
<div class="card-body text-center">
<i class="bi bi-shield-check text-success" style="font-size: 3rem;"></i>
<h5 class="card-title mt-3">Secure</h5>
<p class="card-text">Email validation and XSS protection built-in</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card feature-card">
<div class="card-body text-center">
<i class="bi bi-lightning-charge text-warning" style="font-size: 3rem;"></i>
<h5 class="card-title mt-3">Instant</h5>
<p class="card-text">Real-time webhook processing and forwarding</p>
</div>
</div>
</div>
</div>
</div>
<!-- How It Works Section -->
<div class="doc-container">
<h2><i class="bi bi-gear"></i> How It Works</h2>
<ol class="lead">
<li>You configure a third-party service to send webhooks to this URL with your email encoded in the path</li>
<li>When a webhook request arrives, the service captures all request data</li>
<li>The complete request details are formatted into a readable HTML email</li>
<li>The email is sent to your specified address</li>
<li>A confirmation response is returned to the webhook sender</li>
</ol>
<div class="alert alert-info mt-4">
<i class="bi bi-lightbulb"></i> <strong>Perfect for:</strong> Debugging webhooks, testing integrations, monitoring API callbacks, and understanding third-party service payloads.
</div>
</div>
<!-- Usage Section -->
<div class="doc-container">
<h2><i class="bi bi-code-square"></i> Usage</h2>
<h3>Basic URL Format</h3>
<p>The URL format is simple - just append your URL-encoded email address to the domain:</p>
<div class="code-block mb-4">
https://<?php echo $_SERVER['HTTP_HOST']; ?>/<strong>{email-address}</strong>
</div>
<h3>URL Encoding Your Email</h3>
<p>The <code>@</code> symbol must be URL-encoded as <code>%40</code>:</p>
<div class="row mt-3">
<div class="col-md-6">
<div class="card">
<div class="card-header bg-light">
<strong>Original Email</strong>
</div>
<div class="card-body">
<code>john@example.com</code>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header bg-light">
<strong>Webhook URL</strong>
</div>
<div class="card-body">
<code><?php echo $_SERVER['HTTP_HOST']; ?>/john%40example.com</code>
</div>
</div>
</div>
</div>
<h3 class="mt-4">Example Requests</h3>
<h4>cURL - POST Request with JSON</h4>
<div class="code-block">
curl -X POST https://<?php echo $_SERVER['HTTP_HOST']; ?>/test%40example.com \
<section id="examples">
<h2>Examples, because reading is hard</h2>
<p class="sub">Any method, any content type. GET, POST, PUT, PATCH, DELETE, something you made up. JSON, form data, multipart, XML, plain text, a string of emoji. It all gets forwarded.</p>
<div class="stack">
<pre data-lang="bash"><span class="h"># JSON</span>
curl -X POST https://<?php echo $_SERVER['HTTP_HOST']; ?>/<span class="s ex">you%40example.com</span> \
-H "Content-Type: application/json" \
-d '{"event": "user.created", "user_id": 12345}'
<span class="h"># GET with query string (yes, this works too)</span>
curl "https://<?php echo $_SERVER['HTTP_HOST']; ?>/<span class="s ex">you%40example.com</span>?event=test&id=123"</pre>
<pre data-lang="javascript"><span class="k">fetch</span>(<span class="s">'https://<?php echo $_SERVER['HTTP_HOST']; ?>/'</span> + <span class="k">encodeURIComponent</span>(<span class="s">'you@example.com'</span>), {
method: <span class="s">'POST'</span>,
headers: { <span class="s">'Content-Type'</span>: <span class="s">'application/json'</span> },
body: JSON.stringify({ event: <span class="s">'order.completed'</span>, order_id: <span class="s">'ORD-789'</span>, total: 99.99 })
});</pre>
<pre data-lang="python"><span class="k">import</span> requests
<span class="k">from</span> urllib.parse <span class="k">import</span> quote
requests.post(
<span class="s">f'https://<?php echo $_SERVER['HTTP_HOST']; ?>/{quote("you@example.com")}'</span>,
json={<span class="s">'event'</span>: <span class="s">'payment.received'</span>, <span class="s">'amount'</span>: 250.00},
headers={<span class="s">'X-Custom-Header'</span>: <span class="s">'MyValue'</span>},
)</pre>
</div>
<div class="note">
<p><b>Pro tip you'll ignore and then come back for:</b> use plus addressing. <code>you+stripe%40example.com</code>, <code>you+github%40example.com</code>. Now your inbox filters do the sorting so you don't have to.</p>
</div>
</section>
<section id="parsers">
<h2>Parsers. Ooh, shiny.</h2>
<p class="sub">Add one word to the end of the URL and the email stops being a wall of raw JSON and starts being something you can actually read at 3am. Parser doesn't understand the payload? It falls back to the raw format. Nothing gets lost.</p>
<div class="parsers">
<div class="parser"><div class="ico">🐙</div><code>/github</code><p>Push, pull request, issue and release events get their own layout with commits, authors, branches and links. Everything else still renders, just less fancy. Subjects like <em>📤 GitHub push - you/repo</em>.</p></div>
<div class="parser"><div class="ico">📈</div><code>/grafana</code><p>Grafana and Prometheus Alertmanager alerts. Firing, resolved, labels, annotations. Finally know <em>which</em> thing is on fire.</p></div>
<div class="parser"><div class="ico">🧩</div><code>/json</code><p>Any JSON at all, rendered as tables. Nested objects get split out into their own tables with path-based titles so you can find <code>data.items[3].sku</code> without squinting.</p></div>
<div class="parser"><div class="ico">💬</div><code>/wxinteract</code><p>Webex Interact SMS events. Inbound messages, delivery receipts, the lot, with the event type in the subject line.</p></div>
</div>
<h4 class="mt-3">cURL - GET Request with Parameters</h4>
<div class="code-block">
curl https://<?php echo $_SERVER['HTTP_HOST']; ?>/test%40example.com?event=test&id=123
</div>
<h4 class="mt-3">JavaScript - Fetch API</h4>
<div class="code-block">
fetch('https://<?php echo $_SERVER['HTTP_HOST']; ?>/test%40example.com', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
event: 'order.completed',
order_id: 'ORD-789',
total: 99.99
})
});
</div>
<h4 class="mt-3">Python - Requests Library</h4>
<div class="code-block">
import requests
response = requests.post(
'https://<?php echo $_SERVER['HTTP_HOST']; ?>/test%40example.com',
json={'event': 'payment.received', 'amount': 250.00},
headers={'X-Custom-Header': 'MyValue'}
)
print(response.text)
</div>
<div class="alert alert-warning mt-4">
<i class="bi bi-exclamation-triangle"></i> <strong>Important:</strong> Make sure to URL-encode your email address. Most programming languages and tools have built-in functions for this (e.g., <code>encodeURIComponent()</code> in JavaScript, <code>urllib.parse.quote()</code> in Python).
</div>
</div>
<!-- Response Section -->
<div class="doc-container">
<h2><i class="bi bi-arrow-return-left"></i> What to Expect</h2>
<h3>Immediate HTTP Response</h3>
<p>When your webhook is successfully received, you'll get an immediate response:</p>
<div class="card">
<div class="card-header bg-success text-white">
<strong>HTTP 200 OK</strong>
</div>
<div class="card-body">
<div class="code-block">
Webhook received and forwarded to: test@example.com
Request data:
Array
(
[event] => test
[id] => 123
)
</div>
</div>
</div>
<h3 class="mt-4">Email Contents</h3>
<p>Within moments, you'll receive a styled HTML email containing:</p>
<div class="row mt-3">
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title"><i class="bi bi-clock"></i> Request Timestamp</h5>
<p class="card-text">Exact date and time when the webhook was received</p>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title"><i class="bi bi-info-square"></i> Request Information</h5>
<p class="card-text">IP address, HTTP method (GET/POST/etc), and Content-Type</p>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title"><i class="bi bi-list-ul"></i> Request Headers</h5>
<p class="card-text">All HTTP headers sent with the request</p>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title"><i class="bi bi-file-earmark-text"></i> Request Body</h5>
<p class="card-text">Complete raw body content (JSON, XML, form data, etc.)</p>
</div>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title"><i class="bi bi-code-slash"></i> PHP Variables</h5>
<p class="card-text">Parsed GET, POST, REQUEST, and FILES superglobals for easy access</p>
</div>
</div>
</div>
</div>
<div class="alert alert-success mt-4">
<i class="bi bi-check-circle"></i> <strong>Subject Line:</strong> Emails arrive with the subject <strong>"‼️ Webhook Request Received - [timestamp]"</strong> for easy filtering and identification.
</div>
</div>
<!-- Error Handling Section -->
<div class="doc-container">
<h2><i class="bi bi-exclamation-octagon"></i> Error Handling</h2>
<h3>Invalid Email Address</h3>
<p>If the email address in the URL is invalid or missing, you'll receive:</p>
<div class="card">
<div class="card-header bg-danger text-white">
<strong>HTTP 400 Bad Request</strong>
</div>
<div class="card-body">
<div class="code-block">
Invalid email address provided in URL path.
</div>
</div>
</div>
<div class="alert alert-info mt-4">
<i class="bi bi-shield-check"></i> <strong>Validation:</strong> The service validates email addresses using PHP's built-in <code>FILTER_VALIDATE_EMAIL</code> filter to ensure proper formatting.
</div>
</div>
<!-- Security Section -->
<div class="doc-container">
<h2><i class="bi bi-shield-lock"></i> Security Features</h2>
<ul class="lead">
<li><strong>Email Validation:</strong> Only valid email addresses are accepted</li>
<li><strong>XSS Protection:</strong> All output is sanitized using <code>htmlspecialchars()</code></li>
<li><strong>No Data Storage:</strong> Webhook data is forwarded immediately and not stored on the server</li>
<li><strong>Error Logging:</strong> Failed email attempts are logged for monitoring</li>
</ul>
<div class="alert alert-warning">
<i class="bi bi-exclamation-triangle"></i> <strong>Privacy Note:</strong> Anyone with your webhook URL can send data to your email address. Only use this service for testing and debugging purposes. Do not use for sensitive production data without additional authentication.
</div>
</div>
<!-- Supported Features Section -->
<div class="doc-container">
<h2><i class="bi bi-check2-square"></i> Supported Features</h2>
<div class="row">
<div class="col-md-6">
<h5><i class="bi bi-check-circle text-success"></i> HTTP Methods</h5>
<ul>
<li>GET</li>
<li>POST</li>
<li>PUT</li>
<li>PATCH</li>
<li>DELETE</li>
<li>Any custom method</li>
</ul>
</div>
<div class="col-md-6">
<h5><i class="bi bi-check-circle text-success"></i> Content Types</h5>
<ul>
<li>application/json</li>
<li>application/x-www-form-urlencoded</li>
<li>multipart/form-data</li>
<li>text/plain</li>
<li>text/xml</li>
<li>Any custom content type</li>
</ul>
</div>
</div>
</div>
<!-- GitHub Webhook Parser Section -->
<div class="doc-container">
<h2><i class="bi bi-github"></i> GitHub Webhook Parser</h2>
<p class="lead">Get beautifully formatted emails specifically designed for GitHub webhooks with enhanced event details.</p>
<h3>How to Use</h3>
<p>Simply add <code>/github</code> to the end of your webhook URL:</p>
<div class="code-block mb-4">
https://<?php echo $_SERVER['HTTP_HOST']; ?>/<strong>{email-address}</strong>/github
</div>
<h3>URL Format Examples</h3>
<div class="row mt-3 mb-4">
<div class="col-md-6">
<div class="card">
<div class="card-header bg-light">
<strong>Standard Webhook</strong>
</div>
<div class="card-body">
<code><?php echo $_SERVER['HTTP_HOST']; ?>/john%40example.com</code>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header bg-light">
<strong>GitHub Webhook</strong>
</div>
<div class="card-body">
<code><?php echo $_SERVER['HTTP_HOST']; ?>/john%40example.com/github</code>
</div>
</div>
</div>
</div>
<h3>Supported GitHub Events</h3>
<p>The GitHub parser provides enhanced formatting for these event types:</p>
<div class="row mt-3">
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">📤 Push Events</h5>
<p class="card-text">Displays branch, commit count, and individual commit messages with authors.</p>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">🔀 Pull Request Events</h5>
<p class="card-text">Shows PR number, title, state, branches, and direct link to the PR.</p>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">📝 Issue Events</h5>
<p class="card-text">Displays issue number, title, state, and link to the issue.</p>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">🚀 Release Events</h5>
<p class="card-text">Shows release tag, name, and direct link to the release page.</p>
</div>
</div>
</div>
</div>
<div class="alert alert-info mt-4">
<i class="bi bi-lightbulb"></i> <strong>All Events Supported:</strong> Even if an event isn't specifically formatted above, the parser will display it in a clean, structured format showing all webhook data.
</div>
<h3 class="mt-4">Setting Up in GitHub</h3>
<p>To configure a GitHub webhook:</p>
<h3>Setting up GitHub, since that's the one everyone asks about</h3>
<ol>
<li>Go to your repository settings → Webhooks → Add webhook</li>
<li>Set the Payload URL to: <code>https://<?php echo $_SERVER['HTTP_HOST']; ?>/your%40email.com/github</code></li>
<li>Set Content type to: <strong>application/json</strong></li>
<li>Choose which events to receive (or select "Send me everything")</li>
<li>Click "Add webhook"</li>
<li>Repo → Settings → Webhooks → Add webhook</li>
<li>Payload URL: <code>https://<?php echo $_SERVER['HTTP_HOST']; ?>/<span class="ex">you%40example.com</span>/github</code></li>
<li>Content type: <code>application/json</code></li>
<li>Pick events (or "Send me everything", live a little)</li>
<li>Save. Push something. Refresh inbox. Refresh again. There it is.</li>
</ol>
</section>
<div class="alert alert-success">
<i class="bi bi-check-circle"></i> <strong>Subject Line:</strong> GitHub webhook emails arrive with event-specific subject lines like <strong>"📤 GitHub push - username/repo"</strong> or <strong>"🔀 GitHub pull_request (opened) - username/repo"</strong> for easy filtering.
</div>
<section id="inbox">
<h2>What actually lands in your inbox</h2>
<p class="sub">One HTML email per request. Gmail-safe styling. All of the following, every time, whether you asked for it or not:</p>
<ul class="inbox">
<li><b>Timestamp</b><span>when it arrived, to the second</span></li>
<li><b>Source IP + method</b><span>who sent it and how</span></li>
<li><b>Content-Type</b><span>what they claimed it was</span></li>
<li><b>Every header</b><span>auth, signatures, user agents, the weird custom ones</span></li>
<li><b>Raw body</b><span>byte-for-byte, ready to paste into a test</span></li>
<li><b>Parsed superglobals</b><span>$_GET, $_POST, $_REQUEST, $_FILES</span></li>
</ul>
<h3>And the sender gets</h3>
<pre data-lang="http 200 · application/json">{
<span class="k">"ok"</span>: true,
<span class="k">"message"</span>: <span class="s">"Webhook received and forwarded to you@example.com"</span>,
<span class="k">"forwarded_to"</span>: <span class="s">"you@example.com"</span>,
<span class="k">"parser"</span>: <span class="s">"default"</span>,
<span class="k">"subject"</span>: <span class="s">"‼️ Webhook Request Received - 2026-09-11 17:15:42"</span>,
<span class="k">"received_at"</span>: <span class="s">"2026-09-11T17:15:42+00:00"</span>,
<span class="k">"request"</span>: { <span class="k">"method"</span>: <span class="s">"POST"</span>, <span class="k">"content_type"</span>: <span class="s">"application/json"</span>, <span class="k">"ip"</span>: <span class="s">"203.0.113.7"</span>, <span class="k">"headers"</span>: 9, <span class="k">"body_bytes"</span>: 40 },
<span class="k">"data"</span>: {
<span class="k">"query"</span>: { <span class="k">"src"</span>: <span class="s">"curl"</span> },
<span class="k">"form"</span>: {},
<span class="k">"json"</span>: { <span class="k">"event"</span>: <span class="s">"user.created"</span>, <span class="k">"user_id"</span>: 12345 },
<span class="k">"files"</span>: []
}
}</pre>
<p class="tangent">JSON bodies get decoded and echoed back under <code>data.json</code>, so you can eyeball what the server actually understood. Form fields land in <code>form</code>, query string in <code>query</code>. No print_r in sight.</p>
<p class="tangent">Any 200 is enough for most services to mark the delivery as "succeeded" and stop retrying. Which is the point.</p>
</section>
<div class="alert alert-warning">
<i class="bi bi-info-circle"></i> <strong>Tip:</strong> Use email plus addressing like <code>you+github%40example.com</code> to easily filter GitHub webhooks in your inbox.
<section id="faq">
<h2>Caveats, small print, that sort of thing</h2>
<div class="note warn">
<p><b>Anyone with the URL can email you.</b> There's no auth. There's no secret. It's your email address in a URL. Use it for debugging and testing. Do not point production payment data at it. Don't make me put a bigger warning here.</p>
</div>
<h3>Stuff that's true</h3>
<ul>
<li><b>Nothing is stored.</b> Request comes in, email goes out, request is forgotten. No logs of your payloads, no database, no "insights".</li>
<li><b>Output is escaped.</b> Everything is run through <code>htmlspecialchars()</code> before it hits the email, so a malicious payload renders as text, not as a thing.</li>
<li><b>Bad email → HTTP 400, as JSON.</b> <code>{"ok": false, "error": "invalid_email", ...}</code> with a hint about <code>%40</code>. Validated with PHP's <code>FILTER_VALIDATE_EMAIL</code>. Boring, correct.</li>
<li><b>Failed sends get logged.</b> On the server side, for the person running it. Not for you. Sorry.</li>
</ul>
<h3>Good for</h3>
<div class="chips">
<span class="chip">debugging a webhook you didn't write</span>
<span class="chip">seeing what Stripe actually sends</span>
<span class="chip">capturing real payloads for docs</span>
<span class="chip">testing before the handler exists</span>
<span class="chip">"is it even firing?"</span>
<span class="chip">alerts in your inbox without a whole thing</span>
</div>
</section>
<!-- Use Cases Section -->
<div class="doc-container">
<h2><i class="bi bi-star"></i> Common Use Cases</h2>
<footer>
<div>Built with PHP and ADHD medication. Not necessarily in that order.</div>
<div>© 2025–2026 Andy Dixon · <a href="https://<?php echo $_SERVER['HTTP_HOST']; ?>/"><?php echo $_SERVER['HTTP_HOST']; ?></a></div>
</footer>
<div class="row">
<div class="col-md-4 mb-3">
<div class="card feature-card">
<div class="card-body">
<h5 class="card-title"><i class="bi bi-bug"></i> Debugging</h5>
<p class="card-text">See exactly what data third-party services are sending to your webhooks</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card feature-card">
<div class="card-body">
<h5 class="card-title"><i class="bi bi-plugin"></i> Integration Testing</h5>
<p class="card-text">Test webhook integrations before implementing full handlers</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card feature-card">
<div class="card-body">
<h5 class="card-title"><i class="bi bi-eye"></i> Monitoring</h5>
<p class="card-text">Monitor webhook activity and payload changes over time</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card feature-card">
<div class="card-body">
<h5 class="card-title"><i class="bi bi-book"></i> Documentation</h5>
<p class="card-text">Capture real examples for API documentation</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card feature-card">
<div class="card-body">
<h5 class="card-title"><i class="bi bi-diagram-3"></i> Development</h5>
<p class="card-text">Quickly test webhook flows during development</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card feature-card">
<div class="card-body">
<h5 class="card-title"><i class="bi bi-search"></i> Troubleshooting</h5>
<p class="card-text">Diagnose issues with webhook payloads and headers</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tips Section -->
<div class="doc-container">
<h2><i class="bi bi-lightbulb"></i> Tips & Best Practices</h2>
<div class="alert alert-info">
<h5><i class="bi bi-envelope-at"></i> Email Filtering</h5>
<p class="mb-0">Create an email filter for the subject line "‼️ Webhook Request Received" to organize incoming webhooks in your inbox.</p>
</div>
<div class="alert alert-info">
<h5><i class="bi bi-plus-slash-minus"></i> Use Plus Addressing</h5>
<p class="mb-0">Use email plus addressing (e.g., <code>yourname+github%40gmail.com</code>) to track which services are sending webhooks.</p>
</div>
<div class="alert alert-info">
<h5><i class="bi bi-clock-history"></i> Timestamp in Emails</h5>
<p class="mb-0">Check the "Date Received" field in emails to verify webhook timing and debug delivery delays.</p>
</div>
<div class="alert alert-info">
<h5><i class="bi bi-code"></i> Parse the Body</h5>
<p class="mb-0">The raw body section contains the exact payload - perfect for copying into your code for testing.</p>
</div>
</div>
<!-- Quick Start Section -->
<div class="doc-container">
<h2><i class="bi bi-rocket-takeoff"></i> Quick Start</h2>
<p class="lead">Get started in 3 simple steps:</p>
<div class="row">
<div class="col-md-4 mb-3">
<div class="card text-center feature-card border-primary">
<div class="card-body">
<div class="display-4 text-primary">1</div>
<h5 class="card-title mt-3">Encode Your Email</h5>
<p class="card-text">Replace <code>@</code> with <code>%40</code> in your email address</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card text-center feature-card border-success">
<div class="card-body">
<div class="display-4 text-success">2</div>
<h5 class="card-title mt-3">Configure Webhook</h5>
<p class="card-text">Use <code><?php echo $_SERVER['HTTP_HOST']; ?>/{your-email}</code> as the webhook URL</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card text-center feature-card border-warning">
<div class="card-body">
<div class="display-4 text-warning">3</div>
<h5 class="card-title mt-3">Check Your Inbox</h5>
<p class="card-text">Receive detailed webhook data instantly in your email</p>
</div>
</div>
</div>
</div>
<div class="text-center mt-4">
<h5>Try it now!</h5>
<div class="code-block text-start d-inline-block">
curl -X POST https://<?php echo $_SERVER['HTTP_HOST']; ?>/YOUR-EMAIL-HERE \
-d '{"test": "Hello World!"}'
</div>
</div>
</div>
<!-- Footer -->
<div class="text-center text-white mt-5">
<p class="mb-1"><i class="bi bi-code-slash"></i> Built with PHP and ADHD medication</p>
<p><small>© 2025-2026 Andy Dixon | <a href="https://<?php echo $_SERVER['HTTP_HOST']; ?>/" class="text-white"><?php echo $_SERVER['HTTP_HOST']; ?></a></small></p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
(function(){
var em=document.getElementById('em'),out=document.getElementById('out'),cp=document.getElementById('cp');
var ex=document.querySelectorAll('.ex, #ex1');
function enc(v){return encodeURIComponent(v.trim()||'you@example.com');}
em.addEventListener('input',function(){
var e=enc(em.value);out.textContent=e;
ex.forEach(function(n){n.textContent=e;});
});
cp.addEventListener('click',function(){
var url=out.parentNode.textContent.replace(/\s+/g,'');
var done=function(){cp.textContent='Copied ✓';setTimeout(function(){cp.textContent='Copy';},1400);};
if(navigator.clipboard){navigator.clipboard.writeText(url).then(done);}
else{var r=document.createRange();r.selectNodeContents(out.parentNode);getSelection().removeAllRanges();getSelection().addRange(r);document.execCommand('copy');done();}
});
})();
</script>
</body>
</html>
+38 -141
View File
@@ -45,9 +45,13 @@ if(empty($email)) {
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Set HTTP response code to 400 Bad Request
http_response_code(400);
// Return error message to the client
echo 'Invalid email address provided in URL path.';
// Terminate script execution
header('Content-Type: application/json; charset=UTF-8');
echo json_encode([
'ok' => false,
'error' => 'invalid_email',
'message' => 'Invalid email address provided in URL path.',
'hint' => 'Encode @ as %40, e.g. /you%40example.com',
], JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE), "\n";
exit;
}
@@ -98,7 +102,7 @@ $variables = [
// Convert the variables array to a human-readable string format
// The second parameter (true) makes print_r return the output instead of printing it
$variablesText = print_r($variables, true);
$variablesText = json_encode($variables, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
// Sanitise the variables text for HTML output
$variablesTextSafe = htmlspecialchars($variablesText, ENT_QUOTES, 'UTF-8');
@@ -141,128 +145,9 @@ if ($parserName) {
if (empty($html)) {
// Construct the HTML email body using a heredoc string for better readability
// This creates a styled HTML email with all webhook details
$html = <<<HTML
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webhook Request Received</title>
<style>
/* Gmail-safe reset and main styling */
body {
background-color: #ffffff;
color: #1a1a1a;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
padding: 0;
margin: 0;
}
/* Container for better email client compatibility */
.container {
max-width: 700px;
margin: 0 auto;
padding: 40px 20px;
}
/* Header styling with elegant separator */
.header {
text-align: center;
padding-bottom: 30px;
border-bottom: 3px solid #000000;
margin-bottom: 40px;
}
.header h1 {
color: #000000;
font-size: 28px;
font-weight: 700;
margin: 0 0 10px 0;
letter-spacing: -0.5px;
}
.header .timestamp {
color: #666666;
font-size: 14px;
font-weight: 500;
margin: 0;
}
/* Section styling with elegant typography */
.section {
margin-bottom: 35px;
}
.section-title {
color: #000000;
font-size: 18px;
font-weight: 700;
margin: 0 0 12px 0;
padding-bottom: 8px;
border-bottom: 2px solid #e0e0e0;
letter-spacing: -0.3px;
}
/* Data display with subtle borders */
.data-box {
border: 1px solid #d0d0d0;
border-radius: 8px;
padding: 16px 20px;
margin: 0;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
font-size: 13px;
line-height: 1.7;
color: #2a2a2a;
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* Metadata grid for clean information display */
.metadata {
display: table;
width: 100%;
border: 1px solid #d0d0d0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.metadata-row {
display: table-row;
}
.metadata-row:not(:last-child) .metadata-label,
.metadata-row:not(:last-child) .metadata-value {
border-bottom: 1px solid #e8e8e8;
}
.metadata-label {
display: table-cell;
padding: 12px 16px;
font-weight: 600;
color: #000000;
width: 35%;
vertical-align: top;
font-size: 14px;
}
.metadata-value {
display: table-cell;
padding: 12px 16px;
color: #333333;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
font-size: 13px;
vertical-align: top;
}
/* Footer styling */
.footer {
margin-top: 50px;
padding-top: 25px;
border-top: 2px solid #e0e0e0;
text-align: center;
color: #888888;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<!-- Email Header -->
<div class="header">
<h1>⚡ Webhook Request Received</h1>
<p class="timestamp">$dateReceivedSafe</p>
</div>
$emailTitle = "⚡ Webhook Request Received";
$emailStamp = "$dateReceivedSafe";
$body = <<<HTML
<!-- Request Information Section -->
<div class="section">
@@ -297,18 +182,13 @@ if (empty($html)) {
<!-- PHP Variables Section -->
<div class="section">
<div class="section-title">🔧 PHP Variables</div>
<div class="section-title">🔧 Parsed Variables</div>
<pre class="data-box">$variablesTextSafe</pre>
</div>
<!-- Footer -->
<div class="footer">
<p>This webhook was automatically forwarded to your email address.</p>
</div>
</div>
</body>
</html>
HTML;
$html = emailShell($emailTitle, $emailStamp, $body, "This webhook was automatically forwarded to your email address.");
// Construct the email subject line with an attention-grabbing emoji and timestamp
$subject = "‼️ Webhook Request Received - $dateReceived";
@@ -333,13 +213,30 @@ if (!$mailSent) {
error_log("Failed to send webhook email to: $email");
}
// Set the Content-Type header for the HTTP response to plain text
header('Content-Type: text/plain; charset=UTF-8');
// JSON acknowledgement back to the webhook sender
header('Content-Type: application/json; charset=UTF-8');
// Return a simple acknowledgement to the webhook sender
// This confirms the webhook was received and processed
echo "Webhook received and forwarded to: $email\n\n";
// Decode JSON bodies so the caller sees what we understood, not a raw string
$bodyJson = ($rawBody !== '' && str_contains($contentType, 'json')) ? json_decode($rawBody, true) : null;
// Include a sanitised copy of the REQUEST data in the response for debugging
echo "Request data:\n";
print_r($_REQUEST);
echo json_encode([
'ok' => true,
'message' => "Webhook received and forwarded to $email",
'forwarded_to' => $email,
'parser' => $parserName ?: 'default',
'subject' => $subject,
'received_at' => date('c'),
'request' => [
'method' => $requestMethod,
'content_type' => $contentType,
'ip' => $ipAddress,
'headers' => count($headersArray),
'body_bytes' => strlen($rawBody),
],
'data' => [
'query' => (object) $_GET,
'form' => (object) $_POST,
'json' => $bodyJson,
'files' => array_keys($_FILES),
],
], JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE), "\n";
+7 -181
View File
@@ -106,7 +106,7 @@ HTML;
</div>
<div class="metadata-row">
<div class="metadata-label">URL</div>
<div class="metadata-value"><a href="$prUrl" style="color: #0066cc;">$prUrl</a></div>
<div class="metadata-value"><a href="$prUrl" style="color: #7c3aed;">$prUrl</a></div>
</div>
</div>
</div>
@@ -139,7 +139,7 @@ HTML;
</div>
<div class="metadata-row">
<div class="metadata-label">URL</div>
<div class="metadata-value"><a href="$issueUrl" style="color: #0066cc;">$issueUrl</a></div>
<div class="metadata-value"><a href="$issueUrl" style="color: #7c3aed;">$issueUrl</a></div>
</div>
</div>
</div>
@@ -167,7 +167,7 @@ HTML;
</div>
<div class="metadata-row">
<div class="metadata-label">URL</div>
<div class="metadata-value"><a href="$releaseUrl" style="color: #0066cc;">$releaseUrl</a></div>
<div class="metadata-value"><a href="$releaseUrl" style="color: #7c3aed;">$releaseUrl</a></div>
</div>
</div>
</div>
@@ -183,177 +183,9 @@ HTML;
$actionDisplay = $actionSafe ? " ($actionSafe)" : '';
$html = <<<HTML
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub Webhook - $eventSafe</title>
<style>
body {
background-color: #ffffff;
color: #1a1a1a;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
padding: 0;
margin: 0;
}
.container {
max-width: 700px;
margin: 0 auto;
padding: 40px 20px;
}
.header {
text-align: center;
padding-bottom: 30px;
border-bottom: 3px solid #000000;
margin-bottom: 40px;
}
.header h1 {
color: #000000;
font-size: 28px;
font-weight: 700;
margin: 0 0 10px 0;
letter-spacing: -0.5px;
}
.header .timestamp {
color: #666666;
font-size: 14px;
font-weight: 500;
margin: 0;
}
.section {
margin-bottom: 35px;
}
.section-title {
color: #000000;
font-size: 18px;
font-weight: 700;
margin: 0 0 12px 0;
padding-bottom: 8px;
border-bottom: 2px solid #e0e0e0;
letter-spacing: -0.3px;
}
.data-box {
border: 1px solid #d0d0d0;
border-radius: 8px;
padding: 16px 20px;
margin: 0;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
font-size: 13px;
line-height: 1.7;
color: #2a2a2a;
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.metadata {
display: table;
width: 100%;
border: 1px solid #d0d0d0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.metadata-row {
display: table-row;
}
.metadata-row:not(:last-child) .metadata-label,
.metadata-row:not(:last-child) .metadata-value {
border-bottom: 1px solid #e8e8e8;
}
.metadata-label {
display: table-cell;
padding: 12px 16px;
font-weight: 600;
color: #000000;
width: 35%;
vertical-align: top;
font-size: 14px;
}
.metadata-value {
display: table-cell;
padding: 12px 16px;
color: #333333;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
font-size: 13px;
vertical-align: top;
}
.commit-item {
padding: 10px 16px;
border-left: 3px solid #e0e0e0;
margin-bottom: 8px;
background: #f8f8f8;
border-radius: 4px;
font-size: 14px;
}
.commit-item strong {
color: #0066cc;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
}
.commit-item em {
color: #666666;
font-style: normal;
font-size: 13px;
}
.subsection {
margin: 20px 0;
}
.subsection-title {
color: #000000;
font-size: 16px;
font-weight: 600;
margin: 15px 0 10px 0;
padding: 8px 12px;
background: #f0f0f0;
border-left: 4px solid #666666;
border-radius: 4px;
}
.array-item {
margin-bottom: 20px;
padding: 12px;
background: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 6px;
}
.array-item-title {
font-weight: 600;
color: #000000;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 2px solid #d0d0d0;
}
.array-item-simple {
padding: 8px 12px;
margin: 4px 0;
background: #f8f8f8;
border-left: 3px solid #d0d0d0;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
font-size: 13px;
}
.simple-value {
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
font-size: 13px;
color: #333333;
}
.footer {
margin-top: 50px;
padding-top: 25px;
border-top: 2px solid #e0e0e0;
text-align: center;
color: #888888;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>$eventIcon GitHub: $eventSafe$actionDisplay</h1>
<p class="timestamp">$dateSafe</p>
</div>
$emailTitle = "$eventIcon GitHub: $eventSafe$actionDisplay";
$emailStamp = "$dateSafe";
$body = <<<HTML
<div class="section">
<div class="section-title">📋 Repository Information</div>
@@ -378,14 +210,8 @@ HTML;
</div>
$eventContent
<div class="footer">
<p>This GitHub webhook was automatically forwarded to your email address.</p>
</div>
</div>
</body>
</html>
HTML;
$html = emailShell($emailTitle, $emailStamp, $body, "This GitHub webhook was automatically forwarded to your email address.");
$subject = "$eventIcon GitHub $eventSafe$actionDisplay - $repoSafe";
+6 -135
View File
@@ -76,7 +76,7 @@ HTML;
$alertSummary .= <<<HTML
<div class="metadata-row">
<div class="metadata-label">Alertmanager URL</div>
<div class="metadata-value"><a href="$externalURLSafe" style="color: #0066cc;">$externalURLSafe</a></div>
<div class="metadata-value"><a href="$externalURLSafe" style="color: #7c3aed;">$externalURLSafe</a></div>
</div>
HTML;
}
@@ -233,7 +233,7 @@ HTML;
$alertsContent .= <<<HTML
<div class="metadata-row">
<div class="metadata-label">Generator URL</div>
<div class="metadata-value"><a href="$generatorURLSafe" style="color: #0066cc;">$generatorURLSafe</a></div>
<div class="metadata-value"><a href="$generatorURLSafe" style="color: #7c3aed;">$generatorURLSafe</a></div>
</div>
HTML;
}
@@ -254,132 +254,9 @@ HTML;
$alertsContent .= '</div>';
}
$html = <<<HTML
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grafana Alert - $statusSafe</title>
<style>
body {
background-color: #ffffff;
color: #1a1a1a;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
padding: 0;
margin: 0;
}
.container {
max-width: 700px;
margin: 0 auto;
padding: 40px 20px;
}
.header {
text-align: center;
padding-bottom: 30px;
border-bottom: 3px solid #000000;
margin-bottom: 40px;
}
.header h1 {
color: #000000;
font-size: 28px;
font-weight: 700;
margin: 0 0 10px 0;
letter-spacing: -0.5px;
}
.header .timestamp {
color: #666666;
font-size: 14px;
font-weight: 500;
margin: 0;
}
.section {
margin-bottom: 35px;
}
.section-title {
color: #000000;
font-size: 18px;
font-weight: 700;
margin: 0 0 12px 0;
padding-bottom: 8px;
border-bottom: 2px solid #e0e0e0;
letter-spacing: -0.3px;
}
.metadata {
display: table;
width: 100%;
border: 1px solid #d0d0d0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.metadata-row {
display: table-row;
}
.metadata-row:not(:last-child) .metadata-label,
.metadata-row:not(:last-child) .metadata-value {
border-bottom: 1px solid #e8e8e8;
}
.metadata-label {
display: table-cell;
padding: 12px 16px;
font-weight: 600;
color: #000000;
width: 35%;
vertical-align: top;
font-size: 14px;
}
.metadata-value {
display: table-cell;
padding: 12px 16px;
color: #333333;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
font-size: 13px;
vertical-align: top;
word-wrap: break-word;
}
.subsection-title {
color: #000000;
font-size: 16px;
font-weight: 600;
margin: 15px 0 10px 0;
padding: 8px 12px;
background: #f0f0f0;
border-left: 4px solid #666666;
border-radius: 4px;
}
.array-item {
margin-bottom: 20px;
padding: 12px;
background: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 6px;
}
.array-item-title {
font-weight: 600;
color: #000000;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 2px solid #d0d0d0;
font-size: 16px;
}
.footer {
margin-top: 50px;
padding-top: 25px;
border-top: 2px solid #e0e0e0;
text-align: center;
color: #888888;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>$statusIcon Grafana Alert: $statusSafe</h1>
<p class="timestamp">$dateSafe</p>
</div>
$emailTitle = "$statusIcon Grafana Alert: $statusSafe";
$emailStamp = "$dateSafe";
$body = <<<HTML
$alertSummary
@@ -402,14 +279,8 @@ HTML;
</div>
</div>
</div>
<div class="footer">
<p>This Grafana/Prometheus alert was automatically forwarded to your email address.</p>
</div>
</div>
</body>
</html>
HTML;
$html = emailShell($emailTitle, $emailStamp, $body, "This Grafana/Prometheus alert was automatically forwarded to your email address.");
// Create subject line
$alertCountText = $alertCount === 1 ? '1 alert' : "$alertCount alerts";
+75
View File
@@ -89,3 +89,78 @@ function renderDataAsTable($data, $depth = 0) {
return $html;
}
/**
* Shared email chrome: one stylesheet, one header, one footer, for every template.
*
* @param string $title Header text (already HTML-safe)
* @param string $stamp Timestamp line (already HTML-safe)
* @param string $body Inner HTML made of .section / .metadata / .data-box blocks
* @param string $footer Footer sentence
* @return string Complete HTML document
*/
function emailShell($title, $stamp, $body, $footer = 'Automatically forwarded to your inbox.') {
$host = htmlspecialchars($_SERVER['HTTP_HOST'] ?? 'webhook', ENT_QUOTES, 'UTF-8');
$plainTitle = strip_tags($title);
return <<<HTML
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light">
<title>$plainTitle</title>
<style>
body { margin:0; padding:0; background:#f3f1fb; color:#15151f; -webkit-font-smoothing:antialiased;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:15px; line-height:1.6; }
a { color:#7c3aed; }
.wrap { padding:28px 12px; }
.container { max-width:640px; margin:0 auto; background:#ffffff; border-radius:16px; overflow:hidden;
box-shadow:0 12px 40px rgba(40,20,90,.10); border:1px solid #e9e6f5; }
.stripe { height:6px; background:#8b5cf6; background-image:linear-gradient(90deg,#8b5cf6,#ec4899 55%,#f97316); }
.header { padding:28px 32px 20px; border-bottom:1px solid #eeecf6; }
.header h1 { margin:0 0 6px; font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1.25; color:#15151f; }
.timestamp { margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; color:#8b8ba3; letter-spacing:.06em; text-transform:uppercase; }
.section { padding:22px 32px 0; }
.section-title { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#7c3aed; margin:0 0 10px; }
.subsection { margin:14px 0; }
.subsection-title { font-size:13px; font-weight:700; color:#15151f; margin:16px 0 8px; padding-left:10px; border-left:3px solid #ec4899; }
.metadata { display:table; width:100%; border:1px solid #e9e6f5; border-radius:10px; border-collapse:separate; overflow:hidden; }
.metadata-row { display:table-row; }
.metadata-label, .metadata-value { display:table-cell; padding:10px 14px; border-bottom:1px solid #f0eef8; vertical-align:top; }
.metadata-row:last-child .metadata-label, .metadata-row:last-child .metadata-value { border-bottom:0; }
.metadata-label { width:150px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; color:#6b6b80; background:#faf9fe; white-space:nowrap; }
.metadata-value { font-size:14px; color:#15151f; word-break:break-word; }
.data-box { margin:0; padding:16px 18px; background:#0f0f17; color:#e6e6f0; border-radius:10px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:12.5px; line-height:1.65; white-space:pre-wrap; word-break:break-word; overflow-x:auto; }
.path-title { margin:18px 0 8px; padding:8px 12px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; font-weight:700;
color:#db2777; background:#fdf2f8; border-left:3px solid #ec4899; border-radius:0 8px 8px 0; }
.array-item, .array-item-simple { margin:0 0 12px; padding:14px 16px; background:#faf9fe; border:1px solid #e9e6f5; border-radius:10px; }
.array-item-title { font-size:13px; font-weight:700; margin:0 0 10px; color:#15151f; }
.array-item .metadata { background:#fff; }
.message-box { margin:12px 0; padding:14px 16px; background:#faf9fe; border:1px solid #e9e6f5; border-radius:10px; font-size:15px; line-height:1.6; }
.error-box { margin:12px 0; padding:12px 14px; background:#fef2f2; border-left:3px solid #ef4444; border-radius:0 8px 8px 0; }
.footer { margin-top:28px; padding:18px 32px 24px; border-top:1px solid #eeecf6; text-align:center; color:#8b8ba3;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; letter-spacing:.04em; }
.footer p { margin:0 0 4px; }
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<div class="stripe"></div>
<div class="header">
<h1>$title</h1>
<p class="timestamp">$stamp</p>
</div>
$body
<div class="footer">
<p>$footer</p>
<p>⚡ $host</p>
</div>
</div>
</div>
</body>
</html>
HTML;
}
+6 -135
View File
@@ -22,132 +22,9 @@ function jsonParse($rawBody, $headers, $metadata) {
$contentTypeSafe = htmlspecialchars($metadata['contentType'], ENT_QUOTES, 'UTF-8');
// Start building HTML
$html = <<<HTML
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Webhook Data</title>
<style>
body {
background-color: #ffffff;
color: #1a1a1a;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
padding: 0;
margin: 0;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 40px 20px;
}
.header {
text-align: center;
padding-bottom: 30px;
border-bottom: 3px solid #000000;
margin-bottom: 40px;
}
.header h1 {
color: #000000;
font-size: 28px;
font-weight: 700;
margin: 0 0 10px 0;
letter-spacing: -0.5px;
}
.header .timestamp {
color: #666666;
font-size: 14px;
font-weight: 500;
margin: 0;
}
.section {
margin-bottom: 35px;
}
.section-title {
color: #000000;
font-size: 18px;
font-weight: 700;
margin: 0 0 12px 0;
padding-bottom: 8px;
border-bottom: 2px solid #e0e0e0;
letter-spacing: -0.3px;
}
.path-title {
color: #0066cc;
font-size: 16px;
font-weight: 600;
margin: 25px 0 12px 0;
padding: 8px 12px;
background-color: #f0f7ff;
border-left: 4px solid #0066cc;
border-radius: 4px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
}
.metadata {
display: table;
width: 100%;
border: 1px solid #d0d0d0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
margin-bottom: 15px;
}
.metadata-row {
display: table-row;
}
.metadata-row:not(:last-child) .metadata-label,
.metadata-row:not(:last-child) .metadata-value {
border-bottom: 1px solid #e8e8e8;
}
.metadata-label {
display: table-cell;
padding: 12px 16px;
font-weight: 600;
color: #000000;
width: 30%;
vertical-align: top;
font-size: 14px;
background-color: #f9f9f9;
}
.metadata-value {
display: table-cell;
padding: 12px 16px;
color: #333333;
font-size: 13px;
vertical-align: top;
word-break: break-word;
}
.array-item {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background-color: #fafafa;
}
.array-item-title {
font-weight: 700;
color: #000000;
margin-bottom: 10px;
font-size: 14px;
}
.footer {
margin-top: 50px;
padding-top: 25px;
border-top: 2px solid #e0e0e0;
text-align: center;
color: #888888;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📊 JSON Webhook Data</h1>
<p class="timestamp">$dateSafe</p>
</div>
$emailTitle = "📊 JSON Webhook Data";
$emailStamp = "$dateSafe";
$body = <<<HTML
<div class="section">
<div class="section-title">📋 Request Information</div>
@@ -173,18 +50,12 @@ function jsonParse($rawBody, $headers, $metadata) {
HTML;
// Process the JSON data
$html .= renderJsonData($payload);
$body .= renderJsonData($payload);
$html .= <<<HTML
$body .= <<<HTML
</div>
<div class="footer">
<p>JSON data automatically parsed and formatted.</p>
</div>
</div>
</body>
</html>
HTML;
$html = emailShell($emailTitle, $emailStamp, $body, "JSON data automatically parsed and formatted.");
$subject = "📊 JSON Webhook - " . $metadata['date'];
+6 -153
View File
@@ -82,150 +82,9 @@ function wxinteractParse($rawBody, $headers, $metadata) {
$eventTitleSafe = htmlspecialchars($eventTitle, ENT_QUOTES, 'UTF-8');
$html = <<<HTML
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webex Interact - $eventTitleSafe</title>
<style>
body {
background-color: #ffffff;
color: #1a1a1a;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
padding: 0;
margin: 0;
}
.container {
max-width: 700px;
margin: 0 auto;
padding: 40px 20px;
}
.header {
text-align: center;
padding-bottom: 30px;
border-bottom: 3px solid #000000;
margin-bottom: 40px;
}
.header h1 {
color: #000000;
font-size: 28px;
font-weight: 700;
margin: 0 0 10px 0;
letter-spacing: -0.5px;
}
.header .timestamp {
color: #666666;
font-size: 14px;
font-weight: 500;
margin: 0;
}
.section {
margin-bottom: 35px;
}
.section-title {
color: #000000;
font-size: 18px;
font-weight: 700;
margin: 0 0 12px 0;
padding-bottom: 8px;
border-bottom: 2px solid #e0e0e0;
letter-spacing: -0.3px;
}
.data-box {
border: 1px solid #d0d0d0;
border-radius: 8px;
padding: 16px 20px;
margin: 10px 0;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
font-size: 13px;
line-height: 1.7;
color: #2a2a2a;
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
background: #f8f8f8;
}
.metadata {
display: table;
width: 100%;
border: 1px solid #d0d0d0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.metadata-row {
display: table-row;
}
.metadata-row:not(:last-child) .metadata-label,
.metadata-row:not(:last-child) .metadata-value {
border-bottom: 1px solid #e8e8e8;
}
.metadata-label {
display: table-cell;
padding: 12px 16px;
font-weight: 600;
color: #000000;
width: 35%;
vertical-align: top;
font-size: 14px;
}
.metadata-value {
display: table-cell;
padding: 12px 16px;
color: #333333;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
font-size: 13px;
vertical-align: top;
}
.message-box {
border-left: 4px solid #0066cc;
background: #f8f8f8;
padding: 16px 20px;
margin: 15px 0;
border-radius: 4px;
font-size: 15px;
line-height: 1.6;
}
.error-box {
border-left: 4px solid #cc0000;
background: #fff5f5;
padding: 16px 20px;
margin: 15px 0;
border-radius: 4px;
}
.subsection {
margin: 20px 0;
}
.subsection-title {
color: #000000;
font-size: 16px;
font-weight: 600;
margin: 15px 0 10px 0;
padding: 8px 12px;
background: #f0f0f0;
border-left: 4px solid #666666;
border-radius: 4px;
}
.footer {
margin-top: 50px;
padding-top: 25px;
border-top: 2px solid #e0e0e0;
text-align: center;
color: #888888;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>$eventIcon Webex Interact: $eventTitleSafe</h1>
<p class="timestamp">$dateSafe</p>
</div>
$emailTitle = "$eventIcon Webex Interact: $eventTitleSafe";
$emailStamp = "$dateSafe";
$body = <<<HTML
<div class="section">
<div class="section-title">📋 Event Information</div>
@@ -242,14 +101,8 @@ function wxinteractParse($rawBody, $headers, $metadata) {
</div>
$eventContent
<div class="footer">
<p>This Webex Interact webhook was automatically forwarded to your email address.</p>
</div>
</div>
</body>
</html>
HTML;
$html = emailShell($emailTitle, $emailStamp, $body, "This Webex Interact webhook was automatically forwarded to your email address.");
$subject = "$eventIcon Webex Interact: $eventTitle";
@@ -411,11 +264,11 @@ function buildShortlinkClickedContent($data) {
<div class="metadata">
<div class="metadata-row">
<div class="metadata-label">Shortlink</div>
<div class="metadata-value"><a href="$shortlink" style="color: #0066cc;">$shortlink</a></div>
<div class="metadata-value"><a href="$shortlink" style="color: #7c3aed;">$shortlink</a></div>
</div>
<div class="metadata-row">
<div class="metadata-label">Original URL</div>
<div class="metadata-value"><a href="$originalUrl" style="color: #0066cc;">$originalUrl</a></div>
<div class="metadata-value"><a href="$originalUrl" style="color: #7c3aed;">$originalUrl</a></div>
</div>
<div class="metadata-row">
<div class="metadata-label">Phone Number</div>