Skip to content

Commit c861948

Browse files
ViratiAkiraNandhanReddyViratiAkiraNandhanReddy
committed
docs: Add GitHub Pages landing page
1 parent 7bb07ed commit c861948

3 files changed

Lines changed: 626 additions & 0 deletions

File tree

‎docs/index.html‎

Lines changed: 396 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,396 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="scroll-smooth">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CaesarCipher.extended | Next-Gen Encryption</title>
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@300;500;700&display=swap"
12+
rel="stylesheet">
13+
<link rel="stylesheet" href="style.css">
14+
15+
<script>
16+
tailwind.config = {
17+
theme: {
18+
extend: {
19+
fontFamily: {
20+
sans: ['Space Grotesk', 'sans-serif'],
21+
mono: ['JetBrains Mono', 'monospace'],
22+
},
23+
colors: {
24+
cyber: {
25+
black: '#020617',
26+
dark: '#0f172a',
27+
primary: '#00f3ff', /* Electric Cyan */
28+
secondary: '#9d4edd', /* Neon Purple */
29+
accent: '#ff0055', /* Cyber Pink */
30+
}
31+
},
32+
animation: {
33+
'glitch': 'glitch 1s linear infinite',
34+
},
35+
keyframes: {
36+
glitch: {
37+
'2%, 64%': { transform: 'translate(2px,0) skew(0deg)' },
38+
'4%, 60%': { transform: 'translate(-2px,0) skew(0deg)' },
39+
'62%': { transform: 'translate(0,0) skew(5deg)' },
40+
}
41+
}
42+
}
43+
}
44+
}
45+
</script>
46+
</head>
47+
48+
<body>
49+
50+
<div class="fixed inset-0 z-[-1] bg-grid opacity-20 pointer-events-none"></div>
51+
<div class="fixed inset-0 z-[-2]">
52+
<div
53+
class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-cyber-secondary rounded-full blur-[120px] opacity-20 animate-pulse">
54+
</div>
55+
<div
56+
class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-cyber-primary rounded-full blur-[120px] opacity-10 animate-pulse"
57+
style="animation-delay: 2s;"></div>
58+
</div>
59+
60+
<nav class="fixed w-full z-50 top-0 backdrop-blur-md border-b border-white/10 bg-cyber-black/70">
61+
<div class="max-w-7xl mx-auto flex items-center justify-between p-4">
62+
<a href="#" class="group">
63+
<span class="text-xl font-bold tracking-tight text-white group-hover:text-cyber-primary transition-colors">
64+
Caesar<span class="font-light opacity-70">Cipher</span><span class="text-cyber-primary">.extended</span>
65+
</span>
66+
</a>
67+
68+
<div class="flex gap-4">
69+
<a href="https://pypi.org/project/CaesarCipher.extended/" target="_blank"
70+
class="hidden md:flex items-center gap-2 px-4 py-2 rounded-full border border-white/10 hover:border-cyber-primary/50 hover:bg-white/5 transition-all text-sm font-mono text-gray-400 hover:text-white">
71+
<i class="fa-brands fa-python"></i> PyPI v2.9.1
72+
</a>
73+
<a href="https://github.com/ViratiAkiraNandhanReddy/CaesarCipher.extended" target="_blank"
74+
class="flex items-center gap-2 px-5 py-2 rounded-full bg-white text-black font-bold hover:bg-cyber-primary hover:shadow-[0_0_20px_rgba(0,243,255,0.4)] transition-all transform hover:-translate-y-0.5">
75+
<i class="fa-brands fa-github"></i>
76+
<span>Star</span>
77+
</a>
78+
</div>
79+
</div>
80+
</nav>
81+
82+
<section class="min-h-screen flex items-center justify-center relative pt-20 px-4">
83+
<div class="text-center max-w-5xl mx-auto z-10">
84+
<div
85+
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-cyber-primary/10 border border-cyber-primary/30 text-cyber-primary text-xs font-mono mb-8">
86+
<span class="w-2 h-2 rounded-full bg-cyber-primary"></span>
87+
ACTIVE MAINTENANCE
88+
</div>
89+
90+
<h1 class="text-6xl md:text-8xl font-black tracking-tighter mb-6 leading-tight">
91+
ENCRYPT <br>
92+
<div class="glitch-wrapper">
93+
<span class="glitch-text text-transparent bg-clip-text bg-gradient-to-r from-white via-gray-200 to-gray-500"
94+
data-text="EVERYTHING">EVERYTHING</span>
95+
</div>
96+
</h1>
97+
98+
<p class="text-xl md:text-2xl text-gray-400 mb-10 max-w-2xl mx-auto font-light">
99+
Shift reality, not just letters. The Python library that brings the Caesar Cipher into the modern era with <span
100+
class="text-cyber-primary font-bold">Digit</span>, <span class="text-cyber-secondary font-bold">Symbol</span>
101+
& <span class="text-pink-500 font-bold">Emoji</span> support.
102+
</p>
103+
104+
<div class="flex flex-col sm:flex-row justify-center gap-5 items-center">
105+
<div class="relative group cursor-pointer" onclick="copyInstall()">
106+
<div
107+
class="absolute -inset-1 bg-gradient-to-r from-cyber-primary to-cyber-secondary rounded-xl blur opacity-25 group-hover:opacity-100 transition duration-500">
108+
</div>
109+
<div
110+
class="relative flex items-center bg-gray-900 rounded-xl px-8 py-4 border border-white/10 hover:border-white/30 transition-colors">
111+
<span class="font-mono text-cyber-primary mr-4">$ pip install CaesarCipher.extended</span>
112+
<i class="fa-regular fa-copy text-gray-500 group-hover:text-white transition-colors"></i>
113+
</div>
114+
<div id="copyToast"
115+
class="absolute top-full left-1/2 -translate-x-1/2 mt-2 text-xs text-green-400 opacity-0 transition">Copied!
116+
</div>
117+
</div>
118+
119+
<a href="#demo"
120+
class="px-8 py-4 rounded-xl border border-white/10 hover:bg-white/5 font-bold transition-all flex items-center gap-2 group">
121+
Live Demo
122+
<i class="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
123+
</a>
124+
</div>
125+
126+
<div
127+
class="mt-16 flex justify-center gap-4 flex-wrap opacity-60 hover:opacity-100 transition-opacity grayscale hover:grayscale-0 duration-500">
128+
<img
129+
src="https://img.shields.io/pypi/dm/CaesarCipher.extended?style=for-the-badge&color=00f3ff&labelColor=0f172a"
130+
alt="Downloads">
131+
<img
132+
src="https://img.shields.io/github/license/ViratiAkiraNandhanReddy/CaesarCipher.extended?style=for-the-badge&color=9d4edd&labelColor=0f172a"
133+
alt="License">
134+
<img
135+
src="https://img.shields.io/github/stars/ViratiAkiraNandhanReddy/CaesarCipher.extended?style=for-the-badge&color=ff0055&labelColor=0f172a"
136+
alt="Stars">
137+
</div>
138+
</div>
139+
</section>
140+
141+
<section id="demo" class="py-24 relative overflow-hidden">
142+
<div
143+
class="absolute top-0 right-0 text-8xl text-white opacity-[0.02] font-mono font-bold select-none rotate-12 translate-x-1/4">
144+
cipher.encrypt()
145+
</div>
146+
147+
<div class="container mx-auto px-4">
148+
<div class="flex flex-col lg:flex-row gap-12 items-center">
149+
150+
<div class="lg:w-1/3 text-left">
151+
<h2 class="text-4xl font-bold mb-6 border-l-4 border-cyber-primary pl-6">
152+
Interactive<br>Playground
153+
</h2>
154+
<p class="text-gray-400 mb-8 leading-relaxed">
155+
Don't just trust the docs. Test the algorithm right here. This interface mimics the Python library's logic
156+
using a JavaScript port. Supports numbers, symbols, and preservation of case.
157+
</p>
158+
159+
<div class="space-y-4">
160+
<div class="flex items-center gap-4 p-4 rounded-lg bg-white/5 border border-white/5">
161+
<div
162+
class="w-10 h-10 rounded-full bg-cyber-primary/20 flex items-center justify-center text-cyber-primary">
163+
<i class="fa-solid fa-bolt"></i>
164+
</div>
165+
<div>
166+
<h4 class="font-bold text-white">Instant Feedback</h4>
167+
<p class="text-xs text-gray-500">Real-time encryption as you type</p>
168+
</div>
169+
</div>
170+
<div class="flex items-center gap-4 p-4 rounded-lg bg-white/5 border border-white/5">
171+
<div
172+
class="w-10 h-10 rounded-full bg-cyber-secondary/20 flex items-center justify-center text-cyber-secondary">
173+
<i class="fa-solid fa-shield-cat"></i>
174+
</div>
175+
<div>
176+
<h4 class="font-bold text-white">Secure Logic</h4>
177+
<p class="text-xs text-gray-500">Same algorithm as the Python package</p>
178+
</div>
179+
</div>
180+
</div>
181+
</div>
182+
183+
<div class="lg:w-2/3 w-full">
184+
<div class="rounded-xl overflow-hidden bg-[#0d1117] border border-gray-700 terminal-shadow relative group">
185+
<div class="bg-[#161b22] px-4 py-3 flex items-center justify-between border-b border-gray-700">
186+
<div class="flex gap-2">
187+
<div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div>
188+
<div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div>
189+
<div class="w-3 h-3 rounded-full bg-[#27c93f]"></div>
190+
</div>
191+
<div class="text-xs font-mono text-gray-500">python3 -m CaesarCipher.extended</div>
192+
<div class="text-gray-500"><i class="fa-solid fa-terminal"></i></div>
193+
</div>
194+
195+
<div class="p-6 font-mono text-sm">
196+
<div class="mb-6">
197+
<label class="text-gray-500 mb-2 block text-xs uppercase tracking-wider">Input Text</label>
198+
<div class="flex">
199+
<span class="text-green-500 mr-3">➜</span>
200+
<textarea id="demoInput" rows="2"
201+
class="w-full bg-transparent border-none focus:ring-0 text-white p-0 resize-none outline-none placeholder-gray-700"
202+
placeholder="Type your secret message here...">Hello, World! 123</textarea>
203+
</div>
204+
</div>
205+
206+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 p-4 bg-white/5 rounded-lg border border-white/5">
207+
<div>
208+
<div class="flex justify-between mb-2">
209+
<span class="text-cyber-primary">Shift Key</span>
210+
<span id="shiftVal" class="text-white font-bold">3</span>
211+
</div>
212+
<input type="range" id="shiftRange" min="1" max="25" value="3"
213+
class="w-full h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-cyber-primary">
214+
</div>
215+
<div class="flex flex-col gap-2">
216+
<label class="flex items-center cursor-pointer select-none">
217+
<input type="checkbox" id="alterNumbers" class="hidden peer">
218+
<div
219+
class="w-4 h-4 border border-gray-500 rounded flex items-center justify-center peer-checked:bg-cyber-primary peer-checked:border-cyber-primary mr-3 transition-colors">
220+
<i class="fa-solid fa-check text-black text-[10px] opacity-0 peer-checked:opacity-100"></i>
221+
</div>
222+
<span class="text-gray-300 peer-checked:text-white transition-colors">Alter Numbers (0-9)</span>
223+
</label>
224+
<label class="flex items-center cursor-pointer select-none">
225+
<input type="checkbox" id="alterSymbols" class="hidden peer">
226+
<div
227+
class="w-4 h-4 border border-gray-500 rounded flex items-center justify-center peer-checked:bg-cyber-secondary peer-checked:border-cyber-secondary mr-3 transition-colors">
228+
<i class="fa-solid fa-check text-black text-[10px] opacity-0 peer-checked:opacity-100"></i>
229+
</div>
230+
<span class="text-gray-300 peer-checked:text-white transition-colors">Alter Symbols (!@#)</span>
231+
</label>
232+
</div>
233+
</div>
234+
235+
<div class="relative">
236+
<label class="text-gray-500 mb-2 block text-xs uppercase tracking-wider">Encrypted Output</label>
237+
<div
238+
class="w-full bg-black/50 border border-gray-700 rounded p-4 text-cyber-primary min-h-[80px] break-all relative group-focus-within:border-cyber-primary/50 transition-colors">
239+
<span id="demoOutput">...</span>
240+
<button onclick="copyOutput()"
241+
class="absolute top-2 right-2 text-gray-600 hover:text-white transition-colors">
242+
<i class="fa-regular fa-clone"></i>
243+
</button>
244+
</div>
245+
</div>
246+
</div>
247+
</div>
248+
</div>
249+
</div>
250+
</div>
251+
</section>
252+
253+
<section class="py-24 bg-cyber-dark/50" onmousemove="handleMouseMove(event)">
254+
<div class="container mx-auto px-4">
255+
<div class="text-center mb-16">
256+
<h2 class="text-3xl font-bold mb-4">Why use this Package?</h2>
257+
<div class="h-1 w-20 bg-cyber-primary mx-auto rounded-full"></div>
258+
</div>
259+
260+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="card-grid">
261+
<div class="spotlight-card rounded-2xl p-8">
262+
<div
263+
class="w-12 h-12 rounded-lg bg-blue-500/10 flex items-center justify-center text-blue-400 mb-6 text-2xl border border-blue-500/20">
264+
<i class="fa-solid fa-arrow-down-1-9"></i>
265+
</div>
266+
<h3 class="text-xl font-bold mb-3 text-white">Full Number Shifting</h3>
267+
<p class="text-gray-400 text-sm leading-relaxed">
268+
Classic Caesar ignores numbers. We don't. Shift "123" to "456" securely while maintaining formatting.
269+
</p>
270+
</div>
271+
272+
<div class="spotlight-card rounded-2xl p-8">
273+
<div
274+
class="w-12 h-12 rounded-lg bg-purple-500/10 flex items-center justify-center text-purple-400 mb-6 text-2xl border border-purple-500/20">
275+
<i class="fa-solid fa-icons"></i>
276+
</div>
277+
<h3 class="text-xl font-bold mb-3 text-white">Symbol & Emoji</h3>
278+
<p class="text-gray-400 text-sm leading-relaxed">
279+
Encrypt special characters and emojis. Turn "Hello 😊" into hidden cipher text effortlessly.
280+
</p>
281+
</div>
282+
283+
<div class="spotlight-card rounded-2xl p-8">
284+
<div
285+
class="w-12 h-12 rounded-lg bg-green-500/10 flex items-center justify-center text-green-400 mb-6 text-2xl border border-green-500/20">
286+
<i class="fa-solid fa-file-code"></i>
287+
</div>
288+
<h3 class="text-xl font-bold mb-3 text-white">File Operations</h3>
289+
<p class="text-gray-400 text-sm leading-relaxed">
290+
Direct <code>.encrypt_file()</code> methods to handle I/O safely in-place. No more manual read/write loops.
291+
</p>
292+
</div>
293+
294+
<div class="spotlight-card rounded-2xl p-8">
295+
<div
296+
class="w-12 h-12 rounded-lg bg-pink-500/10 flex items-center justify-center text-pink-400 mb-6 text-2xl border border-pink-500/20">
297+
<i class="fa-brands fa-python"></i>
298+
</div>
299+
<h3 class="text-xl font-bold mb-3 text-white">Pure Python</h3>
300+
<p class="text-gray-400 text-sm leading-relaxed">
301+
Zero dependencies. Lightweight. Just install and import. Works on Python 3.11+.
302+
</p>
303+
</div>
304+
305+
<div class="spotlight-card rounded-2xl p-8">
306+
<div
307+
class="w-12 h-12 rounded-lg bg-yellow-500/10 flex items-center justify-center text-yellow-400 mb-6 text-2xl border border-yellow-500/20">
308+
<i class="fa-solid fa-check-double"></i>
309+
</div>
310+
<h3 class="text-xl font-bold mb-3 text-white">Type Safe</h3>
311+
<p class="text-gray-400 text-sm leading-relaxed">
312+
Fully type-hinted methods ensuring excellent IDE support and error checking during development.
313+
</p>
314+
</div>
315+
316+
<div class="spotlight-card rounded-2xl p-8">
317+
<div
318+
class="w-12 h-12 rounded-lg bg-cyan-500/10 flex items-center justify-center text-cyan-400 mb-6 text-2xl border border-cyan-500/20">
319+
<i class="fa-solid fa-scale-balanced"></i>
320+
</div>
321+
<h3 class="text-xl font-bold mb-3 text-white">GPLv3 License</h3>
322+
<p class="text-gray-400 text-sm leading-relaxed">
323+
Open source and free software. You have the freedom to share and change all versions.
324+
</p>
325+
</div>
326+
</div>
327+
</div>
328+
</section>
329+
330+
<section class="py-20">
331+
<div class="container mx-auto px-4 max-w-4xl">
332+
<div class="bg-[#1e1e1e] rounded-xl overflow-hidden shadow-2xl border border-gray-700">
333+
<div class="flex items-center px-4 py-2 bg-[#252526] border-b border-gray-700 justify-between">
334+
<div class="flex space-x-2">
335+
<div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div>
336+
<div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div>
337+
<div class="w-3 h-3 rounded-full bg-[#27c93f]"></div>
338+
</div>
339+
<span class="text-xs text-gray-400 font-mono">example.py</span>
340+
</div>
341+
<div class="p-6 overflow-x-auto">
342+
<pre class="font-mono text-sm leading-relaxed">
343+
<span class="text-pink-400">from</span> CaesarCipher <span class="text-pink-400">import</span> Encryption, Decryption
344+
345+
<span class="text-gray-500"># 1. Initialize Encryption</span>
346+
cipher = Encryption(
347+
<span class="text-yellow-300">"SecretData_123"</span>,
348+
shift=<span class="text-purple-400">5</span>,
349+
alterNumbers=<span class="text-purple-400">True</span>
350+
)
351+
352+
<span class="text-gray-500"># 2. Get Result</span>
353+
encrypted_text = cipher.encrypt()
354+
<span class="text-blue-400">print</span>(<span class="text-yellow-300">f"Encrypted: {encrypted_text}"</span>)
355+
356+
<span class="text-gray-500"># 3. File Handling (In-place)</span>
357+
<span class="text-pink-400">if</span> cipher.encrypt_file(<span class="text-yellow-300">'config.yml'</span>):
358+
<span class="text-blue-400">print</span>(<span class="text-yellow-300">"File secured successfully."</span>)
359+
</pre>
360+
</div>
361+
</div>
362+
</div>
363+
</section>
364+
365+
<footer class="bg-black py-16 border-t border-gray-900 relative">
366+
<div class="container mx-auto px-4 text-center z-10 relative">
367+
<h2 class="text-3xl font-bold text-white mb-2">Virati Akiranandhan Reddy</h2>
368+
<p class="text-gray-600 mb-8">Maintainer & Developer</p>
369+
370+
<div class="flex justify-center gap-6 mb-12">
371+
<a href="https://github.com/ViratiAkiraNandhanReddy"
372+
class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center text-white hover:bg-cyber-primary hover:text-black transition-all hover:-translate-y-1"><i
373+
class="fa-brands fa-github"></i></a>
374+
<a href="https://www.linkedin.com/in/viratiakiranandhanreddy/"
375+
class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center text-white hover:bg-[#0077b5] hover:text-white transition-all hover:-translate-y-1"><i
376+
class="fa-brands fa-linkedin"></i></a>
377+
<a href="https://instagram.com/viratiakiranandhanreddy"
378+
class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center text-white hover:bg-pink-500 hover:border border-white transition-all hover:-translate-y-1"><i
379+
class="fa-brands fa-instagram"></i></a>
380+
<a href="mailto:contact.viratiakiranandhanreddy+python@gmail.com"
381+
class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center text-white hover:bg-red-500 hover:text-white transition-all hover:-translate-y-1"><i
382+
class="fa-solid fa-envelope"></i></a>
383+
</div>
384+
385+
<div class="border-t border-gray-900 pt-8 text-sm text-gray-600">
386+
<p>&copy; 2026 ViratiAkiraNandhanReddy. Released under the <a
387+
href="https://github.com/ViratiAkiraNandhanReddy/CaesarCipher.extended?tab=GPL-3.0-1-ov-file"
388+
class="text-cyber-primary hover:underline">GNU GPLv3 License</a>.</p>
389+
</div>
390+
</div>
391+
</footer>
392+
393+
<script src="script.js"></script>
394+
</body>
395+
396+
</html>

0 commit comments

Comments
 (0)