Spaces:

i6od
/

pixelperfect-ai-toolkit

Running

App Files Files Community

i6od commited on Jan 3

Commit

fe742db

verified ·

1 Parent(s): 65fb80c

I just wanna see it first then ill tell u what to redesign

Browse files

Files changed (4) hide show

README.md +8 -5
index.html +164 -19
script.js +8 -0
style.css +21 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Pixelperfect Ai Toolkit
-emoji: ⚡
-colorFrom: indigo
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: PixelPerfect AI Toolkit ✨
+colorFrom: blue
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,164 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>

script.js ADDED Viewed

	@@ -0,0 +1,8 @@

+// Main JavaScript file for shared functionality
+document.addEventListener('DOMContentLoaded', function() {
+    // Any shared JavaScript functionality can go here
+    console.log('Quick-Img loaded successfully!');
+    // You could add more interactive elements here
+    // For example, tooltips, animations, etc.
+});

style.css CHANGED Viewed

@@ -1,28 +1,31 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom styles that can't be achieved with Tailwind */
 body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
 }
+/* Smooth hover transitions */
+.card-hover {
+    transition: all 0.3s ease;
 }
+.card-hover:hover {
+    transform: translateY(-5px);
 }
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}