-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
278 lines (258 loc) · 16.7 KB
/
Copy pathindex.html
File metadata and controls
278 lines (258 loc) · 16.7 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Gravity Safe Code Paste — Sanitize Code, Secrets & SQL Locally</title>
<meta name="description" content="Sanitize code, configuration and SQL locally in your browser before sharing. Detect secrets, passwords, API keys, tokens and sensitive values.">
<meta name="keywords" content="safe code paste, code sanitizer, secret redaction, sanitize code, remove API keys, SQL sanitizer, configuration sanitizer, code privacy">
<meta name="author" content="SkyDevLab">
<meta name="robots" content="index, follow">
<meta name="google-site-verification" content="psOM6Z4D_l5Dh8b2KTYQJF3f2Iv1RZfegENEF73rxHY" />
<link rel="canonical" href="https://skyrunner-dev-ops.github.io/GravitySafeCodePaste/">
<link rel="icon" type="image/png" href="assets/gravity-logo.png">
<meta property="og:type" content="website">
<meta property="og:title" content="Gravity Safe Code Paste — Sanitize Before You Share">
<meta property="og:description" content="Sanitize code, SQL and configuration locally before sharing. Detect sensitive values without a sanitization backend.">
<meta property="og:url" content="https://skyrunner-dev-ops.github.io/GravitySafeCodePaste/">
<meta property="og:site_name" content="Gravity Safe Code Paste">
<meta property="og:image" content="https://skyrunner-dev-ops.github.io/GravitySafeCodePaste/assets/gravity-logo.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Gravity Safe Code Paste — Sanitize Before You Share">
<meta name="twitter:description" content="Sanitize code, SQL and configuration locally before sharing.">
<meta name="twitter:image" content="https://skyrunner-dev-ops.github.io/GravitySafeCodePaste/assets/gravity-logo.png">
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebApplication","name":"Gravity Safe Code Paste","alternateName":"Gravity","url":"https://skyrunner-dev-ops.github.io/GravitySafeCodePaste/","applicationCategory":"DeveloperApplication","operatingSystem":"Any","description":"A browser-based tool for sanitizing code, configuration and SQL before sharing.","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"author":{"@type":"Organization","name":"SkyDevLab"}}
</script><script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="bg-slate-50 text-slate-900 min-h-screen flex flex-col">
<!-- Top Navigation -->
<header class="sticky top-0 z-30 bg-white/95 backdrop-blur border-b border-slate-200 shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
<a href="#top" class="flex items-center gap-3">
<img src="assets/gravity-logo.png" alt="Gravity logo" class="w-10 h-10 rounded-xl object-cover shadow border border-slate-200">
<div>
<b class="text-xl font-extrabold tracking-tight">Gravity</b>
<div class="text-[10px] tracking-widest uppercase font-bold text-blue-600">Safe Code Paste</div>
</div>
</a>
<nav class="hidden md:flex gap-6 text-sm font-semibold text-slate-600">
<a href="#sanitizer" class="hover:text-blue-600 transition-colors">Sanitize</a>
<a href="#how" class="hover:text-blue-600 transition-colors">How It Works</a>
<a href="#privacy" class="hover:text-blue-600 transition-colors">Privacy</a>
</nav>
<a target="_blank" rel="noopener noreferrer" href="https://github.com/Skyrunner-Dev-ops/GravitySafeCodePaste" class="hidden sm:inline-flex items-center gap-1.5 rounded-full bg-slate-900 px-4 py-2 text-xs font-bold text-white hover:bg-slate-800 transition-all shadow-sm">
GitHub ↗
</a>
</div>
</header>
<main id="top" class="flex-1">
<!-- Hero Section -->
<section class="py-10 sm:py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 grid lg:grid-cols-12 gap-8 items-center">
<div class="lg:col-span-7">
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-blue-50 border border-blue-200 text-xs font-semibold text-blue-700">
<span class="w-2 h-2 rounded-full bg-blue-600 animate-pulse"></span>
Paste • Sanitize • Share Confidently
</span>
<h1 class="mt-5 text-4xl sm:text-6xl font-black tracking-tight leading-tight">
Gravity <span class="bg-gradient-to-r from-blue-600 via-indigo-600 to-cyan-500 bg-clip-text text-transparent">Safe Code Paste</span>
</h1>
<p class="mt-5 text-lg text-slate-700 leading-relaxed font-normal">
Sanitize AI-generated code, SQL, and configuration before sharing it with colleagues, LLMs, or public forums.
</p>
<p class="mt-3 text-slate-500 text-sm leading-relaxed">
Credentials, connection strings, tokens, file paths, private URLs, and project-specific identifiers are replaced locally in your browser while preserving exact syntax and structure.
</p>
<div class="mt-7 flex flex-wrap gap-4 items-center">
<a href="#sanitizer" class="btn-primary inline-flex items-center gap-2 rounded-xl bg-blue-600 px-5 py-3 text-sm font-bold text-white shadow-lg shadow-blue-500/20">
✨ Start Sanitizing
</a>
<a href="#how" class="inline-flex items-center gap-1 rounded-xl bg-white border border-slate-200 px-4 py-3 text-sm font-bold text-slate-700 hover:bg-slate-50">
Learn More ↓
</a>
</div>
</div>
<div class="lg:col-span-5 rounded-3xl bg-gradient-to-br from-blue-100 via-white to-indigo-100 border border-blue-200 p-6 shadow-xl flex items-center justify-center">
<img src="assets/gravity-logo.png" alt="Gravity Safe Code Paste" class="w-full max-h-[320px] object-contain rounded-2xl shadow-sm">
</div>
</div>
</section>
<!-- Main Sanitizer Workspace Section -->
<section id="sanitizer" class="pb-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6">
<div class="bg-white rounded-2xl border border-slate-200 shadow-xl overflow-hidden">
<!-- Controls Bar -->
<div class="p-4 border-b bg-slate-50/90 flex flex-wrap gap-4 justify-between items-center">
<!-- 6 Language Tabs -->
<div class="flex items-center gap-1 bg-slate-200/80 p-1 rounded-xl overflow-x-auto max-w-full">
<button data-lang-tab="java" class="lang-tab px-3.5 py-1.5 rounded-lg text-xs font-bold text-slate-600">☕ Java</button>
<button data-lang-tab="csharp" class="lang-tab px-3.5 py-1.5 rounded-lg text-xs font-bold bg-blue-600 text-white">🔷 C#</button>
<button data-lang-tab="python" class="lang-tab px-3.5 py-1.5 rounded-lg text-xs font-bold text-slate-600">🐍 Python</button>
<button data-lang-tab="config" class="lang-tab px-3.5 py-1.5 rounded-lg text-xs font-bold text-slate-600">⚙️ Config</button>
<button data-lang-tab="other" class="lang-tab px-3.5 py-1.5 rounded-lg text-xs font-bold text-slate-600">📦 Other</button>
<button data-lang-tab="sql" class="lang-tab px-3.5 py-1.5 rounded-lg text-xs font-bold text-slate-600">🗄️ SQL</button>
</div>
<!-- Options & Utility Actions -->
<div class="flex flex-wrap items-center gap-3">
<!-- Change Identifiers Checkbox -->
<label class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white border border-slate-300 text-xs font-bold text-slate-800 cursor-pointer hover:bg-slate-50 transition-all shadow-sm">
<input type="checkbox" id="changeIdentifiersCheckbox" class="w-4 h-4 text-blue-600 rounded border-slate-300 focus:ring-blue-500 cursor-pointer">
<span>Change identifiers</span>
</label>
<!-- Load Example & Clear -->
<div class="flex gap-2">
<button id="loadExampleBtn" class="px-3 py-1.5 bg-white border border-slate-300 hover:bg-slate-50 rounded-lg text-xs font-bold text-slate-700 shadow-sm transition-all">
✨ Load Example
</button>
<button id="clearBtn" class="px-3 py-1.5 bg-white border border-slate-300 hover:bg-rose-50 hover:text-rose-600 hover:border-rose-200 rounded-lg text-xs font-bold text-slate-700 shadow-sm transition-all">
🗑️ Clear
</button>
</div>
</div>
</div>
<!-- Editor Panels -->
<div class="p-4 sm:p-6">
<div class="grid lg:grid-cols-12 gap-6 items-stretch">
<!-- Input Area -->
<div class="lg:col-span-5 flex flex-col">
<div class="flex justify-between items-center mb-2">
<div class="flex items-center gap-2">
<b class="text-sm font-bold text-slate-800">Source Input</b>
<span id="currentLangBadge" class="text-[10px] font-extrabold uppercase px-2 py-0.5 rounded bg-slate-100 text-slate-600 border border-slate-200">C#</span>
</div>
<span id="inStats" class="text-xs text-slate-500 mono">0 lines • 0 chars</span>
</div>
<textarea id="input" class="w-full flex-1 min-h-[350px] rounded-xl bg-slate-950 text-slate-100 border border-slate-800 p-4 mono text-sm leading-6 outline-none focus:ring-2 focus:ring-blue-500 resize-y" spellcheck="false" placeholder="Paste your code, configuration, or SQL script here..."></textarea>
</div>
<!-- Center Action -->
<div class="lg:col-span-2 flex flex-col items-center justify-center gap-3">
<button id="sanitizeBtn" class="btn-primary w-full sm:w-auto rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-5 py-3 font-extrabold shadow-lg flex items-center justify-center gap-2">
<span>🛡️ Sanitize</span>
<span>→</span>
</button>
</div>
<!-- Sanitized Output Area -->
<div class="lg:col-span-5 flex flex-col">
<div class="flex justify-between items-center mb-2">
<b class="text-sm font-bold text-slate-800">Sanitized Output</b>
<div class="flex items-center gap-2">
<button id="copyBtn" class="inline-flex items-center gap-1 text-xs font-bold text-blue-600 hover:text-blue-700 bg-blue-50 hover:bg-blue-100 px-2.5 py-1 rounded-md border border-blue-200 transition-all">
📋 Copy
</button>
<button id="downloadBtn" class="inline-flex items-center gap-1 text-xs font-bold text-slate-700 hover:text-slate-900 bg-slate-100 hover:bg-slate-200 px-2.5 py-1 rounded-md border border-slate-200 transition-all">
📥 Download
</button>
</div>
</div>
<textarea id="output" readonly class="w-full flex-1 min-h-[350px] rounded-xl bg-slate-950 text-emerald-300 border border-slate-800 p-4 mono text-sm leading-6 outline-none resize-y" spellcheck="false" placeholder="Sanitized output will appear here..."></textarea>
</div>
</div>
<!-- Notice Banner -->
<div class="mt-5 rounded-xl border border-blue-200 bg-blue-50/70 p-3.5 text-xs text-blue-900 flex items-start gap-2">
<span class="text-base">💡</span>
<div>
<strong>Review notice:</strong> Gravity runs local heuristic and syntax analysis entirely in your browser without sending code over the network. Always review the output before sharing.
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Inspection & Results Section -->
<section class="pb-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 grid lg:grid-cols-2 gap-6">
<!-- Replacement Mapping Table -->
<div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
<div class="p-5 border-b bg-slate-50/50">
<h2 class="font-extrabold text-lg text-slate-900">Replacement Mapping</h2>
<p class="text-sm text-slate-500 mt-1">Exact original values detected and their safe consistent replacements.</p>
</div>
<div class="xscroll flex-1">
<table class="mapping-table text-sm text-left">
<thead>
<tr class="bg-slate-100/80 text-slate-700 font-bold border-b text-xs uppercase tracking-wider">
<th class="p-3">Original</th>
<th class="p-3">Replacement</th>
<th class="p-3">Category / Reason</th>
</tr>
</thead>
<tbody id="mappingBody" class="divide-y divide-slate-100">
<tr>
<td colspan="3" class="p-5 text-slate-400">Run Sanitization to see mappings.</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Detected Sensitive Items Panel -->
<div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
<div class="p-5 border-b bg-slate-50/50">
<h2 class="font-extrabold text-lg text-slate-900">Detected Sensitive Items</h2>
<p class="text-sm text-slate-500 mt-1">Categorized breakdown of sensitive artifacts identified.</p>
</div>
<div class="xscroll flex-1">
<div id="detected" class="detected-list divide-y divide-slate-100">
<div class="p-5 text-slate-400 text-sm">No items found yet.</div>
</div>
</div>
</div>
</div>
</section>
<!-- How It Works Section -->
<section id="how" class="py-14 bg-white border-y border-slate-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6">
<div class="max-w-2xl">
<span class="text-xs font-bold uppercase tracking-wider text-blue-600">Workflow</span>
<h2 class="text-3xl font-black tracking-tight text-slate-900 mt-1">How Gravity Works</h2>
</div>
<div class="grid sm:grid-cols-3 gap-8 mt-8">
<div class="rounded-xl p-5 bg-slate-50 border border-slate-200/80">
<div class="w-8 h-8 rounded-lg bg-blue-600 text-white flex items-center justify-center font-black text-sm mb-3">1</div>
<b class="text-base text-slate-900">Paste or Write Code</b>
<p class="text-sm text-slate-500 mt-2 leading-relaxed">Paste Java, C#, Python, JSON, YAML, .env, TOML, XML, or SQL from your IDE or terminal.</p>
</div>
<div class="rounded-xl p-5 bg-slate-50 border border-slate-200/80">
<div class="w-8 h-8 rounded-lg bg-indigo-600 text-white flex items-center justify-center font-black text-sm mb-3">2</div>
<b class="text-base text-slate-900">Smart Pattern Analysis</b>
<p class="text-sm text-slate-500 mt-2 leading-relaxed">Detects secrets, tokens, connection strings, IPs, and internal identifiers without breaking code syntax.</p>
</div>
<div class="rounded-xl p-5 bg-slate-50 border border-slate-200/80">
<div class="w-8 h-8 rounded-lg bg-emerald-600 text-white flex items-center justify-center font-black text-sm mb-3">3</div>
<b class="text-base text-slate-900">Safe Output & Mapping</b>
<p class="text-sm text-slate-500 mt-2 leading-relaxed">Copies or downloads the sanitized output with a full replacement audit mapping table.</p>
</div>
</div>
</div>
</section>
<!-- Privacy First Section -->
<section id="privacy" class="py-14">
<div class="max-w-7xl mx-auto px-4 sm:px-6">
<div class="rounded-3xl bg-slate-950 text-white p-8 sm:p-12 shadow-2xl relative overflow-hidden">
<div class="max-w-2xl relative z-10">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/20 text-emerald-400 text-xs font-bold mb-4 border border-emerald-500/30">
🔒 100% Client-Side Processing
</div>
<h2 class="text-3xl sm:text-4xl font-black tracking-tight">Zero Network Transmission</h2>
<p class="mt-4 text-slate-300 leading-relaxed text-sm sm:text-base">
Your source code, secrets, connection strings, and internal entity names never leave your computer. All parsing, replacement mapping, and sanitization runs strictly inside your local browser runtime.
</p>
</div>
</div>
</div>
</section>
</main>
<footer class="py-8 bg-white border-t border-slate-200 text-center text-xs text-slate-500">
<div class="max-w-7xl mx-auto px-4 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2">
<img src="assets/gravity-logo.png" alt="Gravity logo" class="w-5 h-5 rounded object-cover">
<span>Gravity Safe Code Paste • Sanitize before you share</span>
</div>
<div>Local Heuristic Sanitizer</div>
</div>
</footer>
<!-- JavaScript Application Module -->
<script type="module" src="js/app.js"></script>
</body>
</html>