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
+ < link rel ="apple-touch-icon " sizes ="180x180 " href ="./assets/apple-touch-icon.png ">
7
+ < link rel ="icon " type ="image/png " sizes ="32x32 " href ="./assets/favicon-32x32.png ">
8
+ < link rel ="icon " type ="image/png " sizes ="16x16 " href ="./assets/favicon-16x16.png ">
9
+ < link rel ="manifest " href ="./assets/site.webmanifest ">
10
+ < script src ="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4 "> </ script >
11
+ < title > Snippet-Saver</ title >
12
+ </ head >
13
+ < body class ="bg-gray-900 text-gray-200 min-h-screen flex flex-col ">
14
+ < header class ="container mx-auto px-4 py-16 md:py-20 relative ">
15
+ < div class ="max-w-3xl mx-auto text-center relative z-10 ">
16
+ < div class ="inline-block mb-4 bg-indigo-600/20 px-4 py-1 rounded-full ">
17
+ < span class ="text-indigo-300 font-medium "> VS Code Extension</ span >
18
+ </ div >
19
+ < h1 class ="text-4xl md:text-6xl font-bold text-white mb-6 tracking-tight ">
20
+ < span class ="bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent "> Snippet Saver</ span >
21
+ </ h1 >
22
+ < p class ="text-lg text-gray-300 leading-relaxed mb-8 max-w-2xl mx-auto ">
23
+ Snippet-saver is a vscode extension tool, which relies on local storage of your device to provide create, read and delete functionality for code snippets. I have made this extension because I don't trust anyone with my code files and want to keep it in my local machine and I believe you should not trust anyone else for your personal data as well.
24
+ </ p >
25
+ < div class ="w-24 h-1 bg-indigo-500 mx-auto rounded-full "> </ div >
26
+ </ div >
27
+ < div class ="absolute inset-0 bg-gradient-to-b from-indigo-900/10 to-transparent opacity-50 "> </ div >
28
+ </ header >
29
+
30
+ < section id ="details " class ="container mx-auto px-4 py-12 flex flex-col items-center ">
31
+ < div class ="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10 max-w-4xl ">
32
+ < img src ="./assets/extension.png " alt ="where to find extension " class ="rounded-lg shadow-lg border border-gray-700 w-full ">
33
+ < img src ="./assets/demo.png " alt ="demo for extension " class ="rounded-lg shadow-lg border border-gray-700 w-full ">
34
+ </ div >
35
+ < a href ="https://marketplace.visualstudio.com/items?itemName=aditya-singh-vats.snippet-saver "
36
+ class ="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-8 rounded-lg transition duration-300 transform hover:scale-105 ">
37
+ Download Extension
38
+ </ a >
39
+ < div class ="w-full max-w-4xl mt-16 ">
40
+ < h2 class ="text-2xl md:text-3xl font-bold text-center mb-10 text-white "> How to use?</ h2 >
41
+ < iframe src ="./assets/snippet-saver-video.mp4 " allow ="autoplay " frameborder ="0 " class ="w-full h-[400px] rounded-lg shadow-lg border border-gray-700 mx-auto "> </ iframe >
42
+ </ div >
43
+
44
+ </ section >
45
+
46
+ < section id ="features " class ="container mx-auto px-12 py-12 bg-gray-800 rounded-lg w-full ">
47
+ < h2 class ="text-2xl md:text-3xl font-bold text-center mb-10 text-white "> Key Features</ h2 >
48
+ < div class ="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 ">
49
+ < div class ="bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 hover:bg-gray-650 ">
50
+ < div class ="text-center ">
51
+ < h3 class ="text-xl font-semibold text-indigo-300 pb-2 "> Open-Source</ h3 >
52
+ < p > This extension is completely open-source for reviews and contributions.</ p >
53
+ </ div >
54
+ </ div >
55
+ < div class ="bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 hover:bg-gray-650 ">
56
+ < div class ="text-center ">
57
+ < h3 class ="text-xl font-semibold text-indigo-300 pb-2 "> Privacy-focused</ h3 >
58
+ < p > The extension works by saving all your files onto your local machine.</ p >
59
+ </ div >
60
+ </ div >
61
+ < div class ="bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 hover:bg-gray-650 ">
62
+ < div class ="text-center ">
63
+ < h3 class ="text-xl font-semibold text-indigo-300 pb-2 "> Easy to use</ h3 >
64
+ < p > Extremely easy to use, just select the code and use the default command-palette.</ p >
65
+ </ div >
66
+ </ div >
67
+ < div class ="bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 hover:bg-gray-650 ">
68
+ < div class ="text-center ">
69
+ < h3 class ="text-xl font-semibold text-indigo-300 pb-2 "> No Internet</ h3 >
70
+ < p > You don't need internet to use this extension, it works offline for privacy reasons.</ p >
71
+ </ div >
72
+ </ div >
73
+ </ div >
74
+ </ section >
75
+
76
+ < footer class ="mt-auto text-center py-8 text-gray-400 text-sm border-t border-gray-800 ">
77
+ < p > © 2025 Snippet-Saver. All rights reserved.</ p >
78
+ < p class ="mt-1 "> Made with ❤️ by < a href ="https://aditya.webhop.me/ " class ="text-indigo-400 hover:text-indigo-300 transition "> Aditya</ a > </ p >
79
+ </ footer >
80
+ </ body >
81
+ </ html >
0 commit comments