|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | + <title>Payload Diff | RMKR Dev</title> |
| 7 | + <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FFC300' d='M448 96c0-35.3-28.7-64-64-64H128C92.7 32 64 60.7 64 96v320c0 35.3 28.7 64 64 64h256c35.3 0 64-28.7 64-64V96z'/%3E%3C/svg%3E"> |
| 8 | + <script src="https://cdn.tailwindcss.com"></script> |
| 9 | + <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;900&family=Fira+Code&display=swap" rel="stylesheet"> |
| 10 | + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" /> |
| 11 | + <style> |
| 12 | + :root { --color-bg: #0C1524; --color-card: #18233C; --color-accent: #FFC300; --color-muted: #A0AEC0; --color-line: #2D3748; } |
| 13 | + body { font-family: 'Inter', sans-serif; background: var(--color-bg); color: #F0F4F8; } |
| 14 | + textarea { font-family: 'Fira Code', monospace; background: #080E1A; border: 1px solid var(--color-line); color: #4ade80; resize: none; } |
| 15 | + .diff-added { background: rgba(34, 197, 94, 0.2); color: #4ade80; } |
| 16 | + .diff-removed { background: rgba(239, 68, 68, 0.2); color: #f87171; } |
| 17 | + </style> |
| 18 | +</head> |
| 19 | +<body class="p-8"> |
| 20 | + <div class="max-width-7xl mx-auto"> |
| 21 | + <header class="flex justify-between items-center mb-8 border-b border-[--color-line] pb-4"> |
| 22 | + <h1 class="text-2xl font-black italic">PAYLOAD<span class="text-[--color-accent] not-italic">DIFF</span></h1> |
| 23 | + <a href="../" class="text-xs font-bold text-[--color-accent] hover:underline uppercase">Back to Hub</a> |
| 24 | + </header> |
| 25 | + |
| 26 | + <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4"> |
| 27 | + <textarea id="left" class="h-64 p-4 rounded-xl text-xs" placeholder="Original JSON/Text..."></textarea> |
| 28 | + <textarea id="right" class="h-64 p-4 rounded-xl text-xs" placeholder="Modified JSON/Text..."></textarea> |
| 29 | + </div> |
| 30 | + |
| 31 | + <button onclick="compare()" class="w-full bg-[--color-accent] text-black font-black py-3 rounded-xl mb-6 uppercase tracking-widest text-sm">Find Differences</button> |
| 32 | + |
| 33 | + <div id="result" class="bg-[--color-card] p-6 rounded-xl border border-[--color-line] font-mono text-xs whitespace-pre overflow-auto max-h-96"> |
| 34 | + Compare payloads to see results... |
| 35 | + </div> |
| 36 | + </div> |
| 37 | + |
| 38 | + <script> |
| 39 | + function compare() { |
| 40 | + const left = document.getElementById('left').value.split('\n'); |
| 41 | + const right = document.getElementById('right').value.split('\n'); |
| 42 | + const res = document.getElementById('result'); |
| 43 | + res.innerHTML = ''; |
| 44 | + |
| 45 | + const maxLength = Math.max(left.length, right.length); |
| 46 | + for (let i = 0; i < maxLength; i++) { |
| 47 | + const lLine = left[i] || ""; |
| 48 | + const rLine = right[i] || ""; |
| 49 | + const div = document.createElement('div'); |
| 50 | + |
| 51 | + if (lLine === rLine) { |
| 52 | + div.className = "py-1 px-2 opacity-50"; |
| 53 | + div.innerText = ` ${lLine}`; |
| 54 | + } else { |
| 55 | + if (lLine) { |
| 56 | + const del = document.createElement('div'); |
| 57 | + del.className = "diff-removed py-1 px-2"; |
| 58 | + del.innerText = `- ${lLine}`; |
| 59 | + res.appendChild(del); |
| 60 | + } |
| 61 | + if (rLine) { |
| 62 | + const add = document.createElement('div'); |
| 63 | + add.className = "diff-added py-1 px-2"; |
| 64 | + add.innerText = `+ ${rLine}`; |
| 65 | + res.appendChild(add); |
| 66 | + } |
| 67 | + continue; |
| 68 | + } |
| 69 | + res.appendChild(div); |
| 70 | + } |
| 71 | + } |
| 72 | + </script> |
| 73 | +</body> |
| 74 | +</html> |
0 commit comments