mini-tools/about.html at main · de4aultnull/mini-tools · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About - Mini Tools</title>
    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛠️</text></svg>">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Header -->
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-6 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="bg-blue-500 text-white p-2 rounded-lg">
                    <i data-feather="tool" class="w-6 h-6"></i>
                </div>
                <h1 class="text-2xl font-bold text-gray-800">Mini Tools</h1>
            </div>
            <nav>
                <ul class="flex space-x-6">
                    <li><a href="index.html" class="text-gray-600 hover:text-blue-500 font-medium">Home</a></li>
                    <li><a href="about.html" class="text-blue-500 font-medium">About</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="container mx-auto px-4 py-12">
        <div class="max-w-3xl mx-auto">
            <div class="text-center mb-12" data-aos="fade-up">
                <h1 class="text-4xl font-bold text-gray-800 mb-6">About Mini Tools</h1>
                <div class="w-24 h-1 bg-blue-500 mx-auto"></div>
            </div>

            <div class="bg-white rounded-2xl shadow-lg p-8 mb-12" data-aos="fade-up">
                <div class="prose prose-lg max-w-none">
                    <p class="text-gray-700 mb-6">
                        Welcome to Mini Tools, your all-in-one digital Swiss Army knife!
                    </p>

                    <p class="text-gray-700 mb-6">
                        Mini Tools is a passion project born from a simple idea: to gather the most useful everyday web applications in a single, fast, and intuitive interface. Why open ten different tabs when you can have everything here, for free and with no ads?
                    </p>

                    <p class="text-gray-700 mb-6">
                        Each tool was designed to be functional, elegant, and respectful of your privacy. All your data (like your notes or to-do lists) remains stored locally on your device.
                    </p>

                    <p class="text-gray-700 mb-6">
                        For the curious and developers: This project is open source! You can view the source code, suggest improvements, or even contribute on GitHub. It's a showcase of my work and passion for web development.
                    </p>

                    <div class="bg-gray-100 p-4 rounded-lg mb-6">
                        <a href="https://github.com/de4aultnull/mini-tools" target="_blank" class="text-blue-600 hover:underline break-all">
                            https://github.com/de4aultnull/mini-tools
                        </a>
                    </div>

                    <p class="text-gray-700 mb-6">
                        More tools are coming soon! Stay tuned.
                    </p>

                    <p class="text-gray-700">
                        Crafted with ❤️ by d3faultnull.
                    </p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
                <div class="bg-white p-6 rounded-xl shadow-md text-center" data-aos="fade-up" data-aos-delay="100">
                    <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i data-feather="zap" class="text-blue-500 w-8 h-8"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">Fast & Lightweight</h3>
                    <p class="text-gray-600">Optimized for performance with minimal loading times.</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md text-center" data-aos="fade-up" data-aos-delay="200">
                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i data-feather="lock" class="text-green-500 w-8 h-8"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">Privacy First</h3>
                    <p class="text-gray-600">Your data never leaves your device.</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md text-center" data-aos="fade-up" data-aos-delay="300">
                    <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i data-feather="code" class="text-purple-500 w-8 h-8"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">Open Source</h3>
                    <p class="text-gray-600">Transparent development for everyone.</p>
                </div>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="bg-white text-blue-500 p-2 rounded-lg">
                            <i data-feather="tool" class="w-6 h-6"></i>
                        </div>
                        <h2 class="text-2xl font-bold">Mini Tools</h2>
                    </div>
                    <p class="text-gray-400 max-w-md">A collection of essential tools designed to simplify your daily tasks and boost productivity.</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
                    <ul class="space-y-2">
                        <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
                        <li><a href="about.html" class="text-gray-400 hover:text-white transition">About</a></li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
            </div>
        </div>
    </footer>

    <script>
        // Initialize AOS
        AOS.init({
            duration: 800,
            easing: 'ease-in-out'
        });

        // Initialize Feather Icons
        feather.replace();
    </script>
</body>
</html>