-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
190 lines (190 loc) · 13.8 KB
/
index.html
File metadata and controls
190 lines (190 loc) · 13.8 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>request catcher</title>
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="/main.css">
<script src="/socket.io/socket.io.js"></script>
<script src="/frontend.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
</head>
<body>
<div data-screen="home" class="h-screen bg-white hidden">
<div class="max-w-xl mx-auto my-auto px-4">
<div class="text-center">
<h1 class="text-4xl font-bold tracking-tight text-slate-900 sm:text-6xl">request catcher</h1>
<p class="mt-6 text-lg leading-8 text-slate-600">Catch and debug HTTP packets or forward them to a local host</p>
<div class="flex justify-center mt-10">
<a href="/" class="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" data-req-random>Get started</a>
</div>
<div class="mx-auto mt-10 flex max-h-72 max-w-sm flex-col overflow-auto text-left space-y-3 hidden" data-req-namespaces></div>
</div>
</div>
<div class="absolute inset-x-0 bottom-0 flex justify-center py-4 items-center space-x-2">
<a href="https://github.com/cloudnode-pro/request-catcher/" target="_blank" class="text-slate-500 font-medium text-sm hover:text-slate-700 flex">
<svg class="w-5 h-5 mr-2" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
View source on GitHub</a>
<span class="text-sm text-slate-700">·</span>
<a href="https://cloudnode.pro" target="_blank" class="text-slate-500 font-medium text-sm hover:text-slate-700 flex">
<img class="w-5 h-5 mr-2" src="data:image/webp;base64,UklGRvQAAABXRUJQVlA4WAoAAAAQAAAAEwAAEwAAQUxQSD4AAAABN6CmbSM4qW7tWprPXUQEkbcARZGtNh5QkGYBBGAhxQDFvwj+MfeI/k9A31kyacJlSAK9/HagZ0gUrbYrJlZQOCCQAAAAkAQAnQEqFAAUAD6dPpxJqCOQ2AwEAFgJxLIAVhygqt8J/unCAAaRsgBWNVkQAPnWiGH9h/q3TL1STH0/AtEwLtE4qJDcJYRdwJ7l679vlXCTpazithsenK10rLu7IkHQW/JiEcxamRDueCtmn78ES0sY91fhRJRqnweUguMUZ3Fyk2l83SpzcIJ4xk0taAAA" alt="Cloudnode logo">
Powered by Cloudnode
</a>
</div>
</div>
<div data-screen="empty" class="h-screen bg-white hidden">
<a href="/" class="absolute top-4 left-4 text-slate-600 font-medium hover:text-slate-900 flex space-x-2 items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd" /></svg>
<span>Go back</span>
</a>
<div class="mx-auto my-auto max-w-xl px-4">
<div class="text-center">
<h1 class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">Send your first request</h1>
<p class="mt-6 text-lg leading-8 text-slate-600">Send your requests to
<a href="#" target="_blank" class="hover:text-slate-900 hover:underline" data-req-link><code class="text-sm tracking-tight"></code></a> to view them here in real time.
</p>
</div>
<pre class="text-sm text-slate-200 tracking-tight bg-slate-900 rounded-xl mt-10 p-4 overflow-auto shadow-lg"><code><span class="text-sky-300 italic">curl</span> -XPOST <span data-req-url></span> \
-H <span class="text-green-300">"content-type: application/json"</span> \
-d <span class="text-green-300">'{"hello": "world"}'</span></code></pre>
</div>
</div>
<div data-screen="main" class="h-screen bg-white hidden">
<div class="flex w-full max-w-xs flex-col border-r border-slate-200 bg-slate-50">
<div class="p-3">
<p class="text-center text-3xl font-medium text-slate-700"><a href="/">request catcher</a></p>
</div>
<div class="overflow-auto" data-requests></div>
</div>
<div class="h-full w-full overflow-auto p-10">
<p class="flex items-center space-x-2">
<span class="rounded-full px-3 py-0.5 text-lg font-medium" data-req="formatted-method"></span>
<span class="text-xl font-medium text-slate-900" data-req="sender-ip"></span>
</p>
<p class="mt-1 text-slate-500">#<span data-req="id"></span> <span aria-hidden="true">·</span> <span data-req="date"></span></p>
<div class="mt-5 flex space-x-3">
<button type="button" class="flex items-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" data-req-forward>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="-ml-1 mr-2 h-5 w-5 text-slate-500">
<path fill-rule="evenodd" d="M12.207 2.232a.75.75 0 00.025 1.06l4.146 3.958H6.375a5.375 5.375 0 000 10.75H9.25a.75.75 0 000-1.5H6.375a3.875 3.875 0 010-7.75h10.003l-4.146 3.957a.75.75 0 001.036 1.085l5.5-5.25a.75.75 0 000-1.085l-5.5-5.25a.75.75 0 00-1.06.025z" clip-rule="evenodd"/>
</svg>
Forward
</button>
<button type="button" class="flex items-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" data-req-download>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="-ml-1 mr-2 h-5 w-5 text-slate-500">
<path d="M10.75 2.75a.75.75 0 00-1.5 0v8.614L6.295 8.235a.75.75 0 10-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V2.75z"/>
<path d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z"/>
</svg>
Download
</button>
<button type="button" class="flex items-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" data-req-delete>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="-ml-1 mr-2 h-5 w-5 text-slate-500">
<path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clip-rule="evenodd" />
</svg>
Delete
</button>
</div>
<div class="mt-10">
<p class="font-medium text-slate-900">HTTP Request</p>
<div class="mt-3 rounded-lg border border-slate-200 bg-white shadow-sm overflow-hidden" data-tabs>
<div>
<div class="sm:hidden">
<label for="tabs" class="sr-only">Select a tab</label>
<select data-tab-open id="tabs" name="tabs" class="block w-full rounded-md border-slate-300 py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm">
<option value="headers" selected>Headers</option>
<option value="request">Request</option>
<option value="raw">Raw</option>
</select>
</div>
<div class="hidden sm:block">
<div class="border-b border-slate-100 px-3">
<nav class="-mb-px flex space-x-8" aria-label="Tabs">
<button data-tab-open="headers" data-tab-activate class="whitespace-nowrap border-b-2 border-blue-500 py-4 px-1 text-sm font-medium text-blue-600">Headers</button>
<button data-tab-open="request" class="whitespace-nowrap border-b-2 border-transparent py-4 px-1 text-sm font-medium text-slate-500 hover:border-slate-300 hover:text-slate-700">Request</button>
<button data-tab-open="raw" class="whitespace-nowrap border-b-2 border-transparent py-4 px-1 text-sm font-medium text-slate-500 hover:border-slate-300 hover:text-slate-700">Raw</button>
</nav>
</div>
</div>
</div>
<div>
<div data-tab="headers" class="hidden">
<div class="border-b border-slate-200">
<details class="group">
<summary class="marker:hidden marker:content-none cursor-pointer flex py-3">
<div class="text-slate-500 pl-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 block group-open:hidden">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 group-open:block hidden">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
</svg>
</div>
<p class="text-sm tracking-tight">
<span class="font-semibold text-slate-500 mr-1" data-req="method"></span> <span class="group-open:hidden" data-req="formatted-url"></span>
</p>
</summary>
<div class="text-sm px-6">
<ul class="border-b border-slate-200 pb-2">
<li><span class="text-blue-600 mr-1">Scheme:</span> <span class="text-slate-900" data-req="scheme"></span></li>
<li><span class="text-blue-600 mr-1">Host:</span> <span class="text-slate-900" data-req="host"></span></li>
<li><span class="text-blue-600 mr-1">Filename:</span> <span class="text-slate-900" data-req="path"></span></li>
</ul>
<ul class="border-b border-slate-200 py-2" data-req="formatted-query"></ul>
<ul class="py-2">
<li><span class="text-blue-600 mr-1">Address:</span>
<span class="text-slate-900" data-req="server-address"></span></li>
</ul>
</div>
</details>
</div>
<div class="border-b border-slate-200 px-6 py-3">
<div class="flex text-sm">
<p class="text-slate-500 w-16">Status</p>
<p class="text-green-600"><span class="font-semibold font-mono">204</span> No Content</p>
</div>
<div class="flex text-sm">
<p class="text-slate-500 w-16">Version</p>
<p class="text-slate-900" data-req="http-version"></p>
</div>
</div>
<div>
<details class="group" open>
<summary class="marker:hidden marker:content-none cursor-pointer flex items-center py-2 bg-slate-50 hover:bg-slate-100">
<div class="text-slate-500 pl-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 block group-open:hidden">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 group-open:block hidden">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
</svg>
</div>
<p class="text-sm text-slate-900">Request Headers</p>
<div class="ml-auto pr-3">
<label class="flex items-center space-x-2">
<span class="text-sm text-slate-900">Raw</span>
<input type="checkbox" class="peer sr-only" data-req="switch-headers">
<div class="border-2 relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer rounded-full border-transparent bg-slate-200 transition-colors duration-200 ease-in-out peer-checked:bg-blue-600 before:block before:content-[''] before:h-4 before:w-4 before:translate-x-0 before:transform before:rounded-full before:bg-white before:shadow before:ring-0 before:transition before:duration-200 before:ease-in-out peer-checked:before:translate-x-5 peer-focus:ring-2 peer-focus:ring-blue-500 peer-focus:ring-offset-2 peer-focus:ring-offset-slate-100"></div>
</label>
</div>
</summary>
<ul class="text-sm py-3 px-4 hidden" data-req="formatted-headers"></ul>
<pre class="w-full border-0 py-3 px-4 text-sm overflow-auto text-slate-900 hidden" data-req="raw-headers"></pre>
</details>
</div>
</div>
<div data-tab="request" class="hidden" data-req="body"></div>
<div data-tab="raw" class="hidden">
<pre class="w-full border-0 py-3 px-4 text-sm overflow-auto text-slate-900"><code data-req="raw"></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>