-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
249 lines (221 loc) · 17.1 KB
/
index.html
File metadata and controls
249 lines (221 loc) · 17.1 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
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta name="google-site-verification" content="0CPiTnvvYPpwKdsXQe9_7cj_raniQuXCGa49aBMmvFI" />
<meta name="google-site-verification" content="K9sOD78ZVUqGuoDzIwU2bKl8TrSWH7depKGdYZbKZDc" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SecurePixel | Cloud-Sync Image Encryption</title>
<meta name="description" content="Securely encrypt images into visual noise using AES-GCM. 100% private, client-side encryption with auto-cloud upload.">
<meta name="keywords" content="Image Encryption, Steganography, AES-GCM, Secure Photo Sharing, Visual Noise, Dippan Bhusal">
<meta name="author" content="Dippan Bhusal">
<link rel="canonical" href="https://securepixel.dippanbhusal.tech/">
<meta property="og:type" content="website">
<meta property="og:url" content="https://securepixel.dippanbhusal.tech/">
<meta property="og:title" content="SecurePixel | Military-Grade Image Encryption">
<meta property="og:description" content="Turn sensitive photos into digital noise directly in your browser. No server uploads. 100% Private.">
<meta property="og:image" content="https://i.ibb.co/cKbkfQLg/34880.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://securepixel.dippanbhusal.tech/">
<meta name="twitter:title" content="SecurePixel | Browser-Based Encryption">
<meta name="twitter:description" content="Encrypt images locally using AES-GCM. Zero-knowledge privacy tool.">
<meta name="twitter:image" content="https://i.ibb.co/cKbkfQLg/34880.png">
<meta name="twitter:creator" content="@DippanBhusal">
<link rel="icon" type="image/png" href="https://i.ibb.co/GvMm4MWW/34882.png">
<link rel="apple-touch-icon" href="https://i.ibb.co/GvMm4MWW/34882.png">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Saira:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: '#FFD600',
dark: '#1a1a1a',
darker: '#111111'
},
fontFamily: {
sans: ['Saira', 'sans-serif'],
serif: ['Merriweather', 'serif'],
}
}
}
}
</script>
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-50 text-gray-800 dark:bg-dark dark:text-gray-100 transition-colors duration-300">
<div id="toast-container" class="fixed top-5 right-5 z-50 flex flex-col gap-3"></div>
<div id="image-viewer" class="fixed inset-0 z-[60] bg-black/90 hidden flex items-center justify-center p-4 backdrop-blur-sm opacity-0 transition-opacity duration-300">
<button id="close-viewer" class="absolute top-5 right-5 text-white text-4xl hover:text-primary transition-colors">×</button>
<img id="full-image" src="" alt="Full Screen" class="max-w-full max-h-screen rounded shadow-2xl scale-95 transition-transform duration-300">
</div>
<nav class="sticky top-0 z-40 bg-white/80 dark:bg-darker/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 px-6 py-4 flex justify-between items-center shadow-sm">
<div class="flex items-center gap-2 text-2xl font-bold font-sans">
<i class="fa-solid fa-shield-halved text-primary"></i>
<span>Secure<span class="text-primary">Pixel</span></span>
</div>
<div class="flex gap-4">
<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors">
<i class="fa-solid fa-moon text-xl"></i>
</button>
</div>
</nav>
<header class="max-w-4xl mx-auto text-center pt-16 pb-10 px-4">
<h1 class="text-4xl md:text-5xl font-bold font-sans mb-6 leading-tight">
Protect Your Images with <br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-orange-400">Military-Grade Encryption</span>
</h1>
<p class="font-serif text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-8">
Turn sensitive photos into digital noise directly in your browser. Automatically uploaded to the cloud for secure sharing. No data is ever stored on our servers.
</p>
</header>
<main class="max-w-5xl mx-auto px-4 mb-20">
<div class="bg-white dark:bg-darker rounded-2xl shadow-xl overflow-hidden border border-gray-100 dark:border-gray-800">
<div class="flex border-b border-gray-200 dark:border-gray-700">
<button class="flex-1 py-4 font-sans font-bold text-lg text-gray-500 hover:text-primary transition-colors border-b-2 border-transparent" onclick="switchTab('encrypt')" id="tab-encrypt">
<i class="fa-solid fa-lock mr-2"></i> Encrypt
</button>
<button class="flex-1 py-4 font-sans font-bold text-lg text-gray-500 hover:text-primary transition-colors border-b-2 border-transparent" onclick="switchTab('decrypt')" id="tab-decrypt">
<i class="fa-solid fa-key mr-2"></i> Decrypt
</button>
</div>
<div id="encrypt-section" class="p-6 md:p-10 section-content">
<div id="enc-drop-zone" class="border-3 border-dashed border-gray-300 dark:border-gray-700 rounded-xl p-10 text-center cursor-pointer hover:border-primary hover:bg-yellow-50 dark:hover:bg-yellow-900/10 transition-all duration-300 group">
<i class="fa-solid fa-cloud-arrow-up text-5xl text-gray-400 group-hover:text-primary group-hover:scale-110 transition-transform mb-4"></i>
<p class="font-sans text-xl font-medium mb-2">Drag & Drop Images Here</p>
<p class="font-serif text-sm text-gray-500">or click to browse files</p>
<input type="file" id="enc-files" accept="image/*" multiple class="hidden">
</div>
<div id="enc-previews" class="flex flex-wrap gap-4 mt-6 min-h-[0px] transition-all"></div>
<div class="mt-8 grid md:grid-cols-3 gap-6 items-end">
<div class="md:col-span-2 relative group">
<input type="password" id="enc-password" placeholder=" " class="peer w-full bg-gray-50 dark:bg-dark border-2 border-gray-200 dark:border-gray-700 rounded-lg px-4 pt-6 pb-2 focus:outline-none focus:border-primary focus:ring-0 transition-colors">
<label class="absolute left-4 top-4 text-gray-500 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:top-4 peer-focus:top-1 peer-focus:text-xs peer-focus:text-primary font-sans font-medium pointer-events-none">
Set Encryption Password
</label>
<button class="absolute right-4 top-4 text-gray-400 hover:text-primary transition-colors" onclick="togglePassword('enc-password', this)">
<i class="fa-solid fa-eye"></i>
</button>
</div>
<button onclick="processBulkEncryption()" class="w-full bg-primary hover:bg-yellow-400 text-darker font-bold font-sans py-4 rounded-lg shadow-lg hover:shadow-primary/50 transform hover:-translate-y-1 transition-all duration-300 flex justify-center items-center gap-2">
<i class="fa-solid fa-bolt"></i> Encrypt & Upload
</button>
</div>
<div id="enc-bulk-actions" class="hidden mt-8 text-right border-t border-gray-200 dark:border-gray-800 pt-4">
<button onclick="downloadAll('enc')" class="text-sm font-bold text-gray-600 hover:text-primary dark:text-gray-400 transition-colors">
<i class="fa-solid fa-file-zipper"></i> Download All as ZIP
</button>
</div>
<div id="enc-results-container" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8"></div>
</div>
<div id="decrypt-section" class="p-6 md:p-10 section-content hidden">
<div id="dec-drop-zone" class="border-3 border-dashed border-gray-300 dark:border-gray-700 rounded-xl p-10 text-center cursor-pointer hover:border-primary hover:bg-yellow-50 dark:hover:bg-yellow-900/10 transition-all duration-300 group">
<i class="fa-solid fa-unlock-keyhole text-5xl text-gray-400 group-hover:text-primary group-hover:scale-110 transition-transform mb-4"></i>
<p class="font-sans text-xl font-medium mb-2">Drop Noise Images (PNG)</p>
<input type="file" id="dec-files" accept="image/png" multiple class="hidden">
</div>
<div id="dec-previews" class="flex flex-wrap gap-4 mt-6"></div>
<div class="mt-8 grid md:grid-cols-3 gap-6 items-end">
<div class="md:col-span-2 relative">
<input type="password" id="dec-password" placeholder=" " class="peer w-full bg-gray-50 dark:bg-dark border-2 border-gray-200 dark:border-gray-700 rounded-lg px-4 pt-6 pb-2 focus:outline-none focus:border-primary focus:ring-0 transition-colors">
<label class="absolute left-4 top-4 text-gray-500 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:top-4 peer-focus:top-1 peer-focus:text-xs peer-focus:text-primary font-sans font-medium pointer-events-none">
Enter Original Password
</label>
<button class="absolute right-4 top-4 text-gray-400 hover:text-primary transition-colors" onclick="togglePassword('dec-password', this)">
<i class="fa-solid fa-eye"></i>
</button>
</div>
<button onclick="processBulkDecryption()" class="w-full bg-gray-800 hover:bg-black dark:bg-white dark:text-black dark:hover:bg-gray-200 text-white font-bold font-sans py-4 rounded-lg shadow-lg transform hover:-translate-y-1 transition-all duration-300 flex justify-center items-center gap-2">
<i class="fa-solid fa-unlock"></i> Decrypt All
</button>
</div>
<div id="dec-bulk-actions" class="hidden mt-8 text-right border-t border-gray-200 dark:border-gray-800 pt-4">
<button onclick="downloadAll('dec')" class="text-sm font-bold text-gray-600 hover:text-primary dark:text-gray-400 transition-colors">
<i class="fa-solid fa-file-zipper"></i> Download All as ZIP
</button>
</div>
<div id="dec-results-container" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8"></div>
</div>
</div>
</main>
<section class="max-w-4xl mx-auto px-4 mb-20">
<h2 class="text-3xl font-sans font-bold text-center mb-10 relative inline-block left-1/2 -translate-x-1/2 after:content-[''] after:block after:w-16 after:h-1 after:bg-primary after:mx-auto after:mt-2">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="group bg-white dark:bg-darker rounded-lg shadow-sm p-4 cursor-pointer">
<summary class="font-sans font-bold flex justify-between items-center list-none">
<span>Is my data safe?</span>
<span class="transition group-open:rotate-180"><i class="fa-solid fa-chevron-down text-primary"></i></span>
</summary>
<p class="text-gray-600 dark:text-gray-400 mt-4 font-serif leading-relaxed">
Absolutely. Encryption happens entirely within your browser using the Web Crypto API. The "noise" images are uploaded to ImgBB only to provide you with a shareable link, but without the password, that noise is mathematically impossible to decode.
</p>
</details>
<details class="group bg-white dark:bg-darker rounded-lg shadow-sm p-4 cursor-pointer">
<summary class="font-sans font-bold flex justify-between items-center list-none">
<span>What happens if I lose my password?</span>
<span class="transition group-open:rotate-180"><i class="fa-solid fa-chevron-down text-primary"></i></span>
</summary>
<p class="text-gray-600 dark:text-gray-400 mt-4 font-serif leading-relaxed">
Your data is lost forever. We use AES-256 encryption, which cannot be brute-forced with current technology. There is no "forgot password" feature because we don't store your passwords.
</p>
</details>
<details class="group bg-white dark:bg-darker rounded-lg shadow-sm p-4 cursor-pointer">
<summary class="font-sans font-bold flex justify-between items-center list-none">
<span>Why are the images noisy?</span>
<span class="transition group-open:rotate-180"><i class="fa-solid fa-chevron-down text-primary"></i></span>
</summary>
<p class="text-gray-600 dark:text-gray-400 mt-4 font-serif leading-relaxed">
The noise is the actual encrypted data visualized as pixels. This makes the file a valid PNG image, allowing it to be hosted on standard image hosting sites like ImgBB.
</p>
</details>
</div>
</section>
<footer class="bg-white dark:bg-darker border-t border-gray-200 dark:border-gray-800 mt-auto py-12">
<div class="max-w-6xl mx-auto px-4 grid md:grid-cols-2 gap-8 items-center">
<div class="text-center md:text-left">
<h3 class="font-sans font-bold text-xl mb-2">Dippan Bhusal</h3>
<p class="text-gray-500 font-serif text-sm">Building secure web experiences for everyone.</p>
</div>
<div class="flex justify-center md:justify-end gap-6">
<a href="https://github.com/KDippan" target="_blank" class="text-2xl text-gray-400 hover:text-primary transition-colors"><i class="fa-brands fa-github"></i></a>
<a href="https://linkedin.com/in/KDippan" target="_blank" class="text-2xl text-gray-400 hover:text-blue-600 transition-colors"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://twitter.com/DippanBhusal" target="_blank" class="text-2xl text-gray-400 hover:text-blue-400 transition-colors"><i class="fa-brands fa-twitter"></i></a>
</div>
</div>
<div class="text-center mt-8 text-gray-400 text-xs font-sans">
© 2026 SecurePixel. Open Source & Private.
</div>
</footer>
<div id="cookie-banner" class="fixed bottom-4 right-4 max-w-sm w-full bg-white dark:bg-neutral-900 border border-gray-200 dark:border-gray-800 rounded-xl shadow-2xl p-6 z-50 hidden transition-all duration-300 transform translate-y-10 opacity-0">
<div class="flex items-start gap-4">
<div class="bg-primary/10 p-3 rounded-full text-primary shrink-0">
<i class="fa-solid fa-cookie-bite text-xl"></i>
</div>
<div>
<h3 class="font-bold text-gray-900 dark:text-white mb-2">Cookie Consent</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 leading-relaxed">
We use anonymous cookies to analyze site traffic and improve performance. No personal data or images are ever tracked.
</p>
<div class="flex gap-3">
<button id="cookie-decline" class="flex-1 px-4 py-2 text-sm font-semibold text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-neutral-800 rounded-lg hover:bg-gray-200 dark:hover:bg-neutral-700 transition-colors">
Decline
</button>
<button id="cookie-accept" class="flex-1 px-4 py-2 text-sm font-bold text-dark bg-primary rounded-lg hover:bg-yellow-400 transition-colors shadow-lg shadow-primary/20">
Accept
</button>
</div>
</div>
</div>
</div>
<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="dippanbhusal" data-description="Support me on Buy me a coffee!" data-message="Sponser me!" data-color="#FF813F" data-position="Right" data-x_margin="18" data-y_margin="18"></script>
<script src="script.js"></script>
</body>
</html>