Hugging Face's logo

Spaces:
i6od
/
pixelperfect-ai-toolkit
Running

App Files Community
pixelperfect-ai-toolkit
File size: 9,871 Bytes
fe742db
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quick-Img – Free AI Background Remover, Object Eraser & Image Upscaler</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-50 min-h-screen">
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-6 flex justify-between items-center">
            <h1 class="text-2xl font-bold text-indigo-600">Quick-Img</h1>
            <nav>
                <ul class="flex space-x-6">
                    <li><a href="#" class="text-gray-600 hover:text-indigo-600">Home</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-indigo-600">Tools</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-indigo-600">About</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="container mx-auto px-4 py-12">
        <section class="mb-16">
            <h2 class="text-3xl font-bold text-center mb-12">AI-Powered Image Editing Tools</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- Background Remover -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                    <img src="https://quick-img.com/_next/image?url=%2Fanimations%2Fbg-remover-card.webp&w=3840&q=75" alt="Background remover" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Background Remover</h3>
                        <p class="text-gray-600 mb-4">Remove backgrounds from images instantly with AI</p>
                        <a href="https://quick-img.com/bg-remove" class="inline-flex items-center text-indigo-600 font-medium">
                            Try now <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                        </a>
                    </div>
                </div>

                <!-- Object Remover -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                    <img src="https://quick-img.com/_next/image?url=%2Fanimations%2Fobject-remover-card.webp&w=3840&q=75" alt="Object remover" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Object Remover</h3>
                        <p class="text-gray-600 mb-4">Erase unwanted objects from your photos seamlessly</p>
                        <a href="https://quick-img.com/object-remover" class="inline-flex items-center text-indigo-600 font-medium">
                            Try now <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                        </a>
                    </div>
                </div>

                <!-- Image Upscaler -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                    <img src="https://quick-img.com/_next/image?url=%2Fanimations%2Fupscale-card.webp&w=3840&q=75" alt="Image upscaler" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Image Upscaler</h3>
                        <p class="text-gray-600 mb-4">Enhance image resolution without losing quality</p>
                        <a href="https://quick-img.com/upscale" class="inline-flex items-center text-indigo-600 font-medium">
                            Try now <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                        </a>
                    </div>
                </div>

                <!-- Image Converter -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                    <img src="https://quick-img.com/_next/image?url=%2Fanimations%2Fconvert-card.jpg&w=3840&q=75" alt="Image converter" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Image Converter</h3>
                        <p class="text-gray-600 mb-4">Convert images between different formats easily</p>
                        <a href="https://quick-img.com/convert" class="inline-flex items-center text-indigo-600 font-medium">
                            Try now <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <section class="mb-16 max-w-3xl mx-auto">
            <h2 class="text-2xl font-bold mb-6">Service News</h2>
            <div class="bg-white rounded-xl shadow-md p-6">
                <h3 class="text-xl font-semibold mb-2">Quick-Img Nears Official Launch After Successful Beta</h3>
                <p class="text-gray-500 mb-4">11/27/2025</p>
                <p class="text-gray-700 mb-4">
                    Quick-Img, a free browser-based image toolkit, is wrapping up its testing phase and preparing for public release. 
                    The platform offers background removal, object erasing (inpaint), image upscaling, and format conversion — all without any software installation.
                </p>
                <a href="https://quick-img.com/" class="text-indigo-600 hover:underline">Visit Quick-Img</a>
            </div>
        </section>

        <section class="max-w-3xl mx-auto">
            <div class="bg-white rounded-xl shadow-md p-6 flex flex-col md:flex-row items-start">
                <img src="https://quick-img.com/_next/image?url=%2Fnicktanium-avatar.jpg&w=256&q=75" alt="Nikita" class="w-24 h-24 rounded-full mb-4 md:mb-0 md:mr-6">
                <div>
                    <h3 class="text-xl font-semibold mb-2">NICKTANIUM</h3>
                    <p class="text-gray-700 mb-4">
                        Hey! I'm Nikita from the YouTube channel <a href="https://www.youtube.com/@NICK-TANIUM" class="text-indigo-600 hover:underline">NICKTANIUM</a>. 
                        This site is my personal project. If you want to support me - you can just send the link to my YouTube videos to your friends or share them on social media.
                    </p>
                    <p class="text-gray-700 mb-4">Thanks for using my web app!</p>
                    <div class="mb-4">
                        <p class="font-medium text-gray-700 mb-1">Technical support & business inquiries:</p>
                        <div class="flex items-center">
                            <span class="bg-gray-100 px-3 py-2 rounded-md text-gray-800">support@quick-img.com</span>
                            <button class="ml-2 p-2 rounded-full hover:bg-gray-100" title="Copy to clipboard">
                                <i data-feather="copy" class="w-4 h-4 text-gray-500"></i>
                            </button>
                        </div>
                    </div>
                    <div>
                        <p class="font-medium text-gray-700 mb-2">My socials:</p>
                        <div class="flex space-x-4">
                            <a href="#" class="text-gray-500 hover:text-indigo-600"><i data-feather="youtube" class="w-5 h-5"></i></a>
                            <a href="#" class="text-gray-500 hover:text-indigo-600"><i data-feather="twitter" class="w-5 h-5"></i></a>
                            <a href="#" class="text-gray-500 hover:text-indigo-600"><i data-feather="instagram" class="w-5 h-5"></i></a>
                            <a href="#" class="text-gray-500 hover:text-indigo-600"><i data-feather="github" class="w-5 h-5"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h2 class="text-xl font-bold">Quick-Img</h2>
                    <p class="text-gray-400">Free AI-powered image editing tools</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
                    <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
                    <a href="#" class="text-gray-400 hover:text-white">Contact</a>
                </div>
            </div>
            <div class="mt-6 pt-6 border-t border-gray-700 text-center text-gray-400">
                <p>© 2025 Quick-Img. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        feather.replace();
        // Simple copy to clipboard functionality
        document.querySelectorAll('[data-feather="copy"]').forEach(button => {
            button.addEventListener('click', function() {
                const text = this.parentElement.previousElementSibling.textContent;
                navigator.clipboard.writeText(text);
                const originalIcon = this.getAttribute('data-feather');
                this.setAttribute('data-feather', 'check');
                feather.replace();
                setTimeout(() => {
                    this.setAttribute('data-feather', originalIcon);
                    feather.replace();
                }, 2000);
            });
        });
    </script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>