note-counter/about.html at main · PATILYASHH/note-counter · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Note Counter - Free Money Counting Calculator</title>
    <meta name="description" content="Learn about Note Counter - a comprehensive free online money counting calculator supporting 5 currencies. Created by Yash Patil for businesses, retailers, and personal use.">
    <link rel="canonical" href="https://notecounter.shop/about.html">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
    <link rel="shortcut icon" href="https://yashpatil.vercel.app/assets/images/projectimg/countnote.png" type="image/x-icon">

    <!-- Web Lock System -->
    <script src="/web-lock.js"></script>
</head>
<body class="bg-gray-50 font-sans">
    <!-- Header -->
    <header class="bg-white shadow-md">
        <nav class="container mx-auto px-4 py-4">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <img src="https://yashpatil.vercel.app/assets/images/projectimg/countnote.png" alt="Note Counter Logo" class="w-8 h-8">
                    <h1 class="text-xl font-bold text-gray-800">Note Counter</h1>
                </div>
                <div class="space-x-4">
                    <a href="/" class="text-indigo-600 hover:text-indigo-800">Home</a>
                    <a href="/about.html" class="text-gray-700 font-semibold">About</a>
                    <a href="/blog.html" class="text-gray-700 hover:text-gray-900">Blog</a>
                    <a href="/contact.html" class="text-gray-700 hover:text-gray-900">Contact</a>
                </div>
            </div>
        </nav>
    </header>

    <!-- Main Content -->
    <main class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- Hero Section -->
        <section class="text-center mb-12">
            <h1 class="text-4xl font-bold text-gray-800 mb-4">About Note Counter</h1>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                A comprehensive, privacy-first money counting application designed to help businesses, retailers, cashiers, and individuals count currency notes and coins quickly and accurately.
            </p>
        </section>

        <!-- Mission Section -->
        <section class="bg-white rounded-lg shadow-md p-8 mb-8">
            <h2 class="text-3xl font-semibold text-gray-800 mb-6">Our Mission</h2>
            <p class="text-lg text-gray-700 mb-4">
                Note Counter was created to solve a simple yet important problem: making money counting faster, more accurate, and accessible to everyone. Whether you're a small business owner reconciling daily sales, a bank teller processing transactions, or an individual managing personal finances, our tool provides the reliability and features you need.
            </p>
            <p class="text-lg text-gray-700">
                We believe in providing powerful tools that respect your privacy while delivering exceptional functionality - completely free of charge.
            </p>
        </section>

        <!-- Features Section -->
        <section class="mb-8">
            <h2 class="text-3xl font-semibold text-gray-800 mb-6">Key Features</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-xl font-semibold text-indigo-600 mb-3">🔐 Web Lock Security System</h3>
                    <p class="text-gray-700">
                        Advanced security features including PIN/password protection, session management, and instant lock functionality with <strong>Shift+L</strong> keyboard shortcut for immediate protection.
                    </p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-xl font-semibold text-indigo-600 mb-3">Multi-Currency Support</h3>
                    <p class="text-gray-700">
                        Support for 5 major currencies: Indian Rupee (INR), US Dollar (USD), Euro (EUR), British Pound (GBP), and UAE Dirham (AED). Each currency includes all standard denominations.
                    </p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-xl font-semibold text-indigo-600 mb-3">Hash Reference System</h3>
                    <p class="text-gray-700">
                        Unique hash references (#1, #2, #3) for saved countings, allowing easy cross-referencing in notes and professional documentation.
                    </p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-xl font-semibold text-indigo-600 mb-3">Privacy First</h3>
                    <p class="text-gray-700">
                        Zero data collection, local storage only, no tracking cookies, and complete transparency through open-source code availability.
                    </p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-xl font-semibold text-indigo-600 mb-3">Professional Tools</h3>
                    <p class="text-gray-700">
                        Built-in calculator, history tracking, data export/import, PDF generation, Web Lock security system, and comprehensive keyboard shortcuts including <strong>Shift+L</strong> for instant locking.
                    </p>
                </div>
            </div>
        </section>

        <!-- Developer Section -->
        <section class="bg-gradient-to-r from-indigo-50 to-blue-50 rounded-lg p-8 mb-8">
            <h2 class="text-3xl font-semibold text-gray-800 mb-6">About the Developer</h2>
            <div class="flex items-start space-x-6">
                <img src="https://yashpatil.vercel.app/assets/images/yash.png" alt="Yash Patil" class="w-24 h-24 rounded-full object-cover border-4 border-indigo-200">
                <div>
                    <h3 class="text-2xl font-semibold text-gray-800 mb-2">Yash Patil</h3>
                    <p class="text-lg text-gray-700 mb-4">
                        Computer Science student and freelance developer from India, passionate about creating user-friendly applications that solve real-world problems.
                    </p>
                    <p class="text-gray-700 mb-4">
                        With experience in web development and a focus on privacy-first solutions, Yash created Note Counter to help businesses and individuals manage their money counting tasks more efficiently.
                    </p>
                    <div class="flex space-x-4">
                        <a href="https://yashpatil.vercel.app" target="_blank" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
                            Portfolio
                        </a>
                        <a href="https://github.com/PATILYASHH/note-counter" target="_blank" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition-colors">
                            GitHub
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- Use Cases Section -->
        <section class="mb-8">
            <h2 class="text-3xl font-semibold text-gray-800 mb-6">Who Uses Note Counter?</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-white rounded-lg shadow-md p-6 text-center">
                    <div class="text-4xl mb-4">🏪</div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Retail Businesses</h3>
                    <p class="text-gray-700">Daily cash reconciliation, till counting, and sales reporting for small to medium retail establishments.</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6 text-center">
                    <div class="text-4xl mb-4">🏦</div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Financial Institutions</h3>
                    <p class="text-gray-700">Bank tellers, credit unions, and financial service providers for accurate cash handling and verification.</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6 text-center">
                    <div class="text-4xl mb-4">👤</div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Personal Use</h3>
                    <p class="text-gray-700">Individuals managing personal finances, collecting coins, or organizing cash savings and budgets.</p>
                </div>
            </div>
        </section>

        <!-- Technology Section -->
        <section class="bg-white rounded-lg shadow-md p-8 mb-8">
            <h2 class="text-3xl font-semibold text-gray-800 mb-6">Technology & Security</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-xl font-semibold text-indigo-600 mb-3">Built With Modern Tech</h3>
                    <ul class="space-y-2 text-gray-700">
                        <li>• React 18 with TypeScript for type safety</li>
                        <li>• Tailwind CSS for responsive design</li>
                        <li>• Progressive Web App (PWA) capabilities</li>
                        <li>• Local storage for data persistence</li>
                        <li>• Vite for fast development and building</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-semibold text-indigo-600 mb-3">Security & Privacy</h3>
                    <ul class="space-y-2 text-gray-700">
                        <li>• No data collection or tracking</li>
                        <li>• All processing happens locally</li>
                        <li>• HTTPS encryption for secure access</li>
                        <li>• Open source for complete transparency</li>
                        <li>• No third-party analytics or cookies</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- Open Source Section -->
        <section class="bg-green-50 rounded-lg p-8 mb-8">
            <h2 class="text-3xl font-semibold text-gray-800 mb-6">Open Source & Community</h2>
            <p class="text-lg text-gray-700 mb-4">
                Note Counter is proudly open source under the MIT License. This means you can view the complete source code, contribute improvements, or even create your own version of the application.
            </p>
            <p class="text-lg text-gray-700 mb-6">
                We believe in transparency and community-driven development. Every line of code is available for inspection, ensuring you can trust the application with your financial data.
            </p>
            <div class="flex flex-wrap gap-4">
                <a href="https://github.com/PATILYASHH/note-counter" target="_blank" class="bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition-colors">
                    View Source Code
                </a>
                <a href="https://github.com/PATILYASHH/note-counter/issues" target="_blank" class="bg-gray-600 text-white px-6 py-3 rounded-lg hover:bg-gray-700 transition-colors">
                    Report Issues
                </a>
                <a href="https://github.com/PATILYASHH/note-counter/fork" target="_blank" class="border border-green-600 text-green-600 px-6 py-3 rounded-lg hover:bg-green-50 transition-colors">
                    Fork Project
                </a>
            </div>
        </section>

        <!-- Contact Section -->
        <section class="text-center">
            <h2 class="text-3xl font-semibold text-gray-800 mb-6">Get in Touch</h2>
            <p class="text-lg text-gray-700 mb-6">
                Have questions, suggestions, or need support? We'd love to hear from you!
            </p>
            <div class="flex justify-center space-x-4">
                <a href="/contact.html" class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors">
                    Contact Us
                </a>
                <a href="/blog.html" class="border border-indigo-600 text-indigo-600 px-6 py-3 rounded-lg hover:bg-indigo-50 transition-colors">
                    Read Our Blog
                </a>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-8 mt-12">
        <div class="container mx-auto px-4 text-center">
            <div class="mb-4">
                <a href="/" class="text-gray-300 hover:text-white mx-2">Home</a>
                <a href="/about.html" class="text-gray-300 hover:text-white mx-2">About</a>
                <a href="/blog.html" class="text-gray-300 hover:text-white mx-2">Blog</a>
                <a href="/contact.html" class="text-gray-300 hover:text-white mx-2">Contact</a>
                <a href="/privacy-policy.html" class="text-gray-300 hover:text-white mx-2">Privacy</a>
                <a href="/terms.html" class="text-gray-300 hover:text-white mx-2">Terms</a>
            </div>
            <p class="text-gray-400">&copy; 2025 Note Counter. Created by Yash Patil. Open Source under MIT License.</p>
        </div>
    </footer>
</body>
</html>