Spaces:

amr701
/

gazdo

Running

App Files Files Community

amr701 commited on May 15, 2025

Commit

7680b8a

verified ·

1 Parent(s): 389e5ae

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +698 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Gazdo
-emoji: 🚀
-colorFrom: blue
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: gazdo
+emoji: 🐳
+colorFrom: gray
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,698 @@
-<!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>DirectWork - Fair Job Platform</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .blur-effect {
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        }
+        .service-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+        }
+        .dark-mode {
+            background-color: #1a202c;
+            color: #f7fafc;
+        }
+        .dark-mode .card {
+            background-color: #2d3748;
+            color: #f7fafc;
+        }
+        .encrypted::before {
+            content: "🔒 ";
+        }
+        .tor-warning {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 0.8; }
+            50% { opacity: 1; }
+            100% { opacity: 0.8; }
+        }
+    </style>
+</head>
+<body class="gradient-bg min-h-screen">
+    <!-- Tor Warning Banner -->
+    <div class="tor-warning bg-yellow-100 text-yellow-800 p-2 text-center text-sm hidden" id="torBanner">
+        For maximum privacy, access this site through Tor browser. <a href="https://www.torproject.org/" target="_blank" class="font-bold underline">Get Tor</a>
+    </div>
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm blur-effect sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex">
+                    <div class="flex-shrink-0 flex items-center">
+                        <i class="fas fa-handshake text-blue-500 text-2xl"></i>
+                        <span class="ml-2 text-xl font-semibold">DirectWork</span>
+                    </div>
+                </div>
+                <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-4">
+                    <button id="darkModeToggle" class="p-1 rounded-full focus:outline-none">
+                        <i class="fas fa-moon text-gray-600"></i>
+                    </button>
+                    <button id="languageToggle" class="p-1 rounded-full focus:outline-none">
+                        <i class="fas fa-language text-gray-600"></i>
+                    </button>
+                    <button id="torToggle" class="p-1 rounded-full focus:outline-none">
+                        <i class="fas fa-user-secret text-gray-600"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <!-- Hero Section -->
+        <section class="text-center py-12">
+            <h1 class="text-4xl font-bold text-gray-800 mb-4">Fair Work. Direct Pay.</h1>
+            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+                Connecting workers directly with people who need help - no middlemen, no exploitation.
+            </p>
+            <div class="mt-8 flex justify-center space-x-4">
+                <button id="findWorkBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition">
+                    <i class="fas fa-search mr-2"></i> Find Work
+                </button>
+                <button id="findWorkerBtn" class="bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-lg font-medium transition">
+                    <i class="fas fa-users mr-2"></i> Find Worker
+                </button>
+            </div>
+        </section>
+        <!-- How It Works -->
+        <section class="py-12">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">How It Works</h2>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="text-blue-500 text-4xl mb-4">
+                        <i class="fas fa-user-plus"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">1. Create Profile</h3>
+                    <p class="text-gray-600">Workers create anonymous profiles with skills and availability.</p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="text-blue-500 text-4xl mb-4">
+                        <i class="fas fa-search"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">2. Find Match</h3>
+                    <p class="text-gray-600">Clients search for workers based on skills, location, and ratings.</p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="text-blue-500 text-4xl mb-4">
+                        <i class="fas fa-hand-holding-usd"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">3. Work & Get Paid</h3>
+                    <p class="text-gray-600">Direct payment upon completion with no middlemen taking cuts.</p>
+                </div>
+            </div>
+        </section>
+        <!-- Worker Registration Form (Hidden by default) -->
+        <section id="workerForm" class="hidden bg-white p-8 rounded-lg shadow-lg max-w-3xl mx-auto my-12">
+            <h2 class="text-2xl font-bold mb-6 text-center">Worker Registration</h2>
+            <form id="workerRegistrationForm">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-gray-700 mb-2">Choose a Nickname</label>
+                        <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Worker123" required>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2">Primary Skill</label>
+                        <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                            <option value="">Select...</option>
+                            <option>Cleaning</option>
+                            <option>Farming</option>
+                            <option>Construction</option>
+                            <option>Gardening</option>
+                            <option>Cooking</option>
+                            <option>Delivery</option>
+                            <option>Other</option>
+                        </select>
+                    </div>
+                    <div class="md:col-span-2">
+                        <label class="block text-gray-700 mb-2">Description</label>
+                        <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3" placeholder="Describe your skills and experience..." required></textarea>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2">Hourly Rate (€)</label>
+                        <input type="number" min="5" max="50" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="10" required>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2">Availability</label>
+                        <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                            <option value="">Select...</option>
+                            <option>Full-time</option>
+                            <option>Part-time</option>
+                            <option>Weekends</option>
+                            <option>Evenings</option>
+                            <option>On-call</option>
+                        </select>
+                    </div>
+                    <div class="md:col-span-2">
+                        <label class="block text-gray-700 mb-2">Contact Method</label>
+                        <div class="flex items-center space-x-4">
+                            <select class="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                                <option value="">Select...</option>
+                                <option>Signal</option>
+                                <option>Telegram</option>
+                                <option>WhatsApp</option>
+                                <option>Email</option>
+                                <option>Phone</option>
+                            </select>
+                            <input type="text" class="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Contact info" required>
+                        </div>
+                    </div>
+                    <div class="md:col-span-2">
+                        <div class="flex items-center">
+                            <input type="checkbox" id="privacyCheck" class="mr-2" required>
+                            <label for="privacyCheck" class="text-sm text-gray-600">I understand this platform collects minimal data and prioritizes privacy</label>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-6 text-center">
+                    <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-lg font-medium transition">
+                        <i class="fas fa-user-plus mr-2"></i> Register as Worker
+                    </button>
+                </div>
+            </form>
+        </section>
+        <!-- Client Search Form (Hidden by default) -->
+        <section id="clientForm" class="hidden bg-white p-8 rounded-lg shadow-lg max-w-3xl mx-auto my-12">
+            <h2 class="text-2xl font-bold mb-6 text-center">Find a Worker</h2>
+            <form id="clientSearchForm">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-gray-700 mb-2">Service Needed</label>
+                        <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                            <option value="">Select...</option>
+                            <option>Cleaning</option>
+                            <option>Farming</option>
+                            <option>Construction</option>
+                            <option>Gardening</option>
+                            <option>Cooking</option>
+                            <option>Delivery</option>
+                            <option>Other</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2">Location Area</label>
+                        <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="City or District" required>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2">Date Needed</label>
+                        <input type="date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2">Estimated Hours</label>
+                        <input type="number" min="1" max="12" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="4" required>
+                    </div>
+                    <div class="md:col-span-2">
+                        <label class="block text-gray-700 mb-2">Job Description</label>
+                        <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3" placeholder="Describe the work needed..." required></textarea>
+                    </div>
+                    <div class="md:col-span-2">
+                        <label class="block text-gray-700 mb-2">Budget (€ per hour)</label>
+                        <input type="range" min="5" max="30" value="10" class="w-full" id="budgetSlider">
+                        <div class="flex justify-between text-sm text-gray-600">
+                            <span>€5</span>
+                            <span id="budgetValue">€10</span>
+                            <span>€30</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-6 text-center">
+                    <button type="submit" class="bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-lg font-medium transition">
+                        <i class="fas fa-search mr-2"></i> Search Workers
+                    </button>
+                </div>
+            </form>
+        </section>
+        <!-- Worker Results (Hidden by default) -->
+        <section id="workerResults" class="hidden my-12">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold">Available Workers</h2>
+                <div class="flex space-x-2">
+                    <select class="px-3 py-1 border rounded-lg">
+                        <option>Sort by: Rating</option>
+                        <option>Sort by: Price</option>
+                        <option>Sort by: Availability</option>
+                    </select>
+                </div>
+            </div>
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6" id="workersContainer">
+                <!-- Worker cards will be added here by JavaScript -->
+            </div>
+        </section>
+        <!-- Worker Detail Modal (Hidden by default) -->
+        <div id="workerModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+            <div class="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+                <div class="p-6">
+                    <div class="flex justify-between items-start mb-4">
+                        <div>
+                            <h3 class="text-2xl font-bold" id="modalWorkerName">Worker Name</h3>
+                            <div class="flex items-center mt-1">
+                                <div class="flex text-yellow-400">
+                                    <i class="fas fa-star"></i>
+                                    <i class="fas fa-star"></i>
+                                    <i class="fas fa-star"></i>
+                                    <i class="fas fa-star"></i>
+                                    <i class="fas fa-star-half-alt"></i>
+                                </div>
+                                <span class="ml-2 text-gray-600" id="modalRating">4.5 (12 reviews)</span>
+                            </div>
+                        </div>
+                        <button id="closeModal" class="text-gray-500 hover:text-gray-700">
+                            <i class="fas fa-times text-2xl"></i>
+                        </button>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                        <div class="md:col-span-2">
+                            <h4 class="font-semibold text-lg mb-2">About</h4>
+                            <p id="modalDescription" class="text-gray-700 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                            <h4 class="font-semibold text-lg mb-2">Skills</h4>
+                            <div class="flex flex-wrap gap-2 mb-4">
+                                <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Cleaning</span>
+                                <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Organization</span>
+                                <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Laundry</span>
+                            </div>
+                            <h4 class="font-semibold text-lg mb-2">Availability</h4>
+                            <p id="modalAvailability" class="text-gray-700 mb-4">Weekdays, 9am-5pm</p>
+                        </div>
+                        <div class="bg-gray-50 p-4 rounded-lg">
+                            <h4 class="font-semibold text-lg mb-4">Hire This Worker</h4>
+                            <div class="mb-4">
+                                <label class="block text-gray-700 mb-2">Date</label>
+                                <input type="date" class="w-full px-3 py-2 border rounded-lg">
+                            </div>
+                            <div class="mb-4">
+                                <label class="block text-gray-700 mb-2">Hours Needed</label>
+                                <input type="number" min="1" value="2" class="w-full px-3 py-2 border rounded-lg">
+                            </div>
+                            <div class="mb-4">
+                                <label class="block text-gray-700 mb-2">Hourly Rate</label>
+                                <p class="font-semibold text-lg" id="modalRate">€12/hour</p>
+                            </div>
+                            <div class="mb-4">
+                                <label class="block text-gray-700 mb-2">Estimated Total</label>
+                                <p class="font-semibold text-xl">€24</p>
+                            </div>
+                            <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg font-medium">
+                                <i class="fas fa-handshake mr-2"></i> Request Worker
+                            </button>
+                            <p class="text-xs text-gray-500 mt-2 text-center encrypted">All communications are encrypted</p>
+                        </div>
+                    </div>
+                    <div>
+                        <h4 class="font-semibold text-lg mb-4">Reviews</h4>
+                        <div class="space-y-4" id="reviewsContainer">
+                            <!-- Reviews will be added here by JavaScript -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Security & Privacy Section -->
+        <section class="py-12 bg-white rounded-lg shadow-md mt-12">
+            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+                <h2 class="text-3xl font-bold text-center mb-8">Our Commitment to Privacy</h2>
+                <div class="grid md:grid-cols-2 gap-8">
+                    <div class="flex items-start">
+                        <div class="bg-blue-100 p-3 rounded-full mr-4">
+                            <i class="fas fa-shield-alt text-blue-500 text-xl"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-semibold mb-2">No Personal Data</h3>
+                            <p class="text-gray-600">We don't collect or store government-identifiable information about workers.</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start">
+                        <div class="bg-blue-100 p-3 rounded-full mr-4">
+                            <i class="fas fa-lock text-blue-500 text-xl"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-semibold mb-2">Encrypted Communications</h3>
+                            <p class="text-gray-600">All messages and transactions are encrypted end-to-end.</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start">
+                        <div class="bg-blue-100 p-3 rounded-full mr-4">
+                            <i class="fas fa-eye-slash text-blue-500 text-xl"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-semibold mb-2">No Tracking</h3>
+                            <p class="text-gray-600">We don't use tracking cookies or analytics that could compromise privacy.</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start">
+                        <div class="bg-blue-100 p-3 rounded-full mr-4">
+                            <i class="fas fa-network-wired text-blue-500 text-xl"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-semibold mb-2">Tor Compatible</h3>
+                            <p class="text-gray-600">Access our service anonymously through the Tor network for maximum privacy.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-8">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">DirectWork</h3>
+                    <p class="text-gray-400">Connecting workers directly with fair opportunities since 2023.</p>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Find Work</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Find Workers</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Safety Tips</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Resources</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Worker Rights</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Privacy Guide</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Tor Browser</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Contact</h3>
+                    <p class="text-gray-400">For support, use secure messaging apps:</p>
+                    <div class="flex space-x-4 mt-2">
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-telegram text-xl"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-signal text-xl"></i></a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
+                <p>© 2023 DirectWork. All rights reserved. This service operates in accordance with privacy laws.</p>
+                <p class="mt-2">This website does not collect personal data and respects user anonymity.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Sample worker data
+        const workers = [
+            {
+                id: 1,
+                nickname: "CleanExpert",
+                skill: "Cleaning",
+                description: "Professional cleaner with 5 years experience. Specialize in deep cleaning and organization. Very detail-oriented and reliable.",
+                rate: 12,
+                rating: 4.7,
+                reviews: 15,
+                availability: "Weekdays",
+                contact: "Telegram: @CleanExpertNL"
+            },
+            {
+                id: 2,
+                nickname: "FarmHand",
+                skill: "Farming",
+                description: "Experienced farm worker skilled in planting, harvesting, and animal care. Strong and hardworking with own transportation.",
+                rate: 15,
+                rating: 4.9,
+                reviews: 8,
+                availability: "Full-time",
+                contact: "Signal: +31 6 12345678"
+            },
+            {
+                id: 3,
+                nickname: "GreenThumb",
+                skill: "Gardening",
+                description: "Passionate gardener with knowledge of plants and landscaping. Can help with planting, pruning, and garden maintenance.",
+                rate: 14,
+                rating: 4.5,
+                reviews: 12,
+                availability: "Weekends",
+                contact: "WhatsApp: +31 6 87654321"
+            },
+            {
+                id: 4,
+                nickname: "FixItMax",
+                skill: "Construction",
+                description: "Skilled handyman for small construction and repair jobs. Honest and efficient with fair pricing.",
+                rate: 18,
+                rating: 4.8,
+                reviews: 20,
+                availability: "On-call",
+                contact: "Email: fixitmax@protonmail.com"
+            },
+            {
+                id: 5,
+                nickname: "FreshCook",
+                skill: "Cooking",
+                description: "Home cook specializing in healthy meals and traditional dishes. Can prepare meals for families or events.",
+                rate: 16,
+                rating: 4.6,
+                reviews: 7,
+                availability: "Evenings",
+                contact: "Telegram: @FreshCookNL"
+            },
+            {
+                id: 6,
+                nickname: "QuickDelivery",
+                skill: "Delivery",
+                description: "Reliable delivery person with own bicycle. Available for food, packages, and other local deliveries.",
+                rate: 10,
+                rating: 4.4,
+                reviews: 5,
+                availability: "Daily",
+                contact: "Signal: +31 6 11223344"
+            }
+        ];
+        // Sample reviews data
+        const reviews = [
+            {
+                workerId: 1,
+                author: "HappyClient",
+                rating: 5,
+                comment: "Did an amazing job cleaning my apartment. Very thorough and professional!",
+                date: "2023-05-15"
+            },
+            {
+                workerId: 1,
+                author: "SatisfiedCustomer",
+                rating: 4,
+                comment: "Good cleaning service, arrived on time and did what was asked.",
+                date: "2023-06-02"
+            },
+            {
+                workerId: 2,
+                author: "FarmOwner",
+                rating: 5,
+                comment: "Best farm worker I've ever hired. Knowledgeable and hardworking.",
+                date: "2023-04-20"
+            },
+            {
+                workerId: 3,
+                author: "GardenLover",
+                rating: 5,
+                comment: "Transformed my messy garden into a beautiful space. Highly recommend!",
+                date: "2023-05-30"
+            }
+        ];
+        // DOM Elements
+        const findWorkBtn = document.getElementById('findWorkBtn');
+        const findWorkerBtn = document.getElementById('findWorkerBtn');
+        const workerForm = document.getElementById('workerForm');
+        const clientForm = document.getElementById('clientForm');
+        const workerResults = document.getElementById('workerResults');
+        const workersContainer = document.getElementById('workersContainer');
+        const workerModal = document.getElementById('workerModal');
+        const closeModal = document.getElementById('closeModal');
+        const darkModeToggle = document.getElementById('darkModeToggle');
+        const torToggle = document.getElementById('torToggle');
+        const torBanner = document.getElementById('torBanner');
+        const budgetSlider = document.getElementById('budgetSlider');
+        const budgetValue = document.getElementById('budgetValue');
+        // Event Listeners
+        findWorkBtn.addEventListener('click', () => {
+            workerForm.classList.remove('hidden');
+            clientForm.classList.add('hidden');
+            workerResults.classList.add('hidden');
+            window.scrollTo({ top: workerForm.offsetTop - 20, behavior: 'smooth' });
+        });
+        findWorkerBtn.addEventListener('click', () => {
+            clientForm.classList.remove('hidden');
+            workerForm.classList.add('hidden');
+            workerResults.classList.add('hidden');
+            window.scrollTo({ top: clientForm.offsetTop - 20, behavior: 'smooth' });
+        });
+        document.getElementById('workerRegistrationForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            // In a real app, this would send data to backend
+            alert('Profile created successfully! Workers will contact you if interested.');
+            workerForm.classList.add('hidden');
+        });
+        document.getElementById('clientSearchForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            showWorkerResults();
+            window.scrollTo({ top: workerResults.offsetTop - 20, behavior: 'smooth' });
+        });
+        closeModal.addEventListener('click', () => {
+            workerModal.classList.add('hidden');
+        });
+        darkModeToggle.addEventListener('click', toggleDarkMode);
+        torToggle.addEventListener('click', toggleTorBanner);
+        budgetSlider.addEventListener('input', updateBudgetValue);
+        // Initialize
+        function updateBudgetValue() {
+            budgetValue.textContent = `€${budgetSlider.value}`;
+        }
+        function toggleDarkMode() {
+            document.body.classList.toggle('dark-mode');
+            const icon = darkModeToggle.querySelector('i');
+            if (document.body.classList.contains('dark-mode')) {
+                icon.classList.replace('fa-moon', 'fa-sun');
+            } else {
+                icon.classList.replace('fa-sun', 'fa-moon');
+            }
+        }
+        function toggleTorBanner() {
+            torBanner.classList.toggle('hidden');
+        }
+        function showWorkerResults() {
+            workerResults.classList.remove('hidden');
+            workersContainer.innerHTML = '';
+            workers.forEach(worker => {
+                const workerCard = document.createElement('div');
+                workerCard.className = 'bg-white rounded-lg shadow-md p-6 service-card transition duration-300';
+                workerCard.innerHTML = `
+                    <div class="flex justify-between items-start mb-4">
+                        <h3 class="text-xl font-semibold">${worker.nickname}</h3>
+                        <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">${worker.skill}</span>
+                    </div>
+                    <p class="text-gray-600 mb-4 line-clamp-3">${worker.description}</p>
+                    <div class="flex items-center mb-2">
+                        <div class="flex text-yellow-400">
+                            ${renderStars(worker.rating)}
+                        </div>
+                        <span class="ml-2 text-gray-600">${worker.rating.toFixed(1)} (${worker.reviews} reviews)</span>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <span class="font-semibold">€${worker.rate}/hour</span>
+                        <button class="view-worker-btn bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm transition" data-id="${worker.id}">
+                            View Profile
+                        </button>
+                    </div>
+                `;
+                workersContainer.appendChild(workerCard);
+            });
+            // Add event listeners to all view buttons
+            document.querySelectorAll('.view-worker-btn').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    const workerId = parseInt(e.target.getAttribute('data-id'));
+                    showWorkerModal(workerId);
+                });
+            });
+        }
+        function renderStars(rating) {
+            let stars = '';
+            const fullStars = Math.floor(rating);
+            const hasHalfStar = rating % 1 >= 0.5;
+            for (let i = 0; i < fullStars; i++) {
+                stars += '<i class="fas fa-star"></i>';
+            }
+            if (hasHalfStar) {
+                stars += '<i class="fas fa-star-half-alt"></i>';
+            }
+            const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
+            for (let i = 0; i < emptyStars; i++) {
+                stars += '<i class="far fa-star"></i>';
+            }
+            return stars;
+        }
+        function showWorkerModal(workerId) {
+            const worker = workers.find(w => w.id === workerId);
+            if (!worker) return;
+            // Update modal content
+            document.getElementById('modalWorkerName').textContent = worker.nickname;
+            document.getElementById('modalDescription').textContent = worker.description;
+            document.getElementById('modalAvailability').textContent = worker.availability;
+            document.getElementById('modalRate').textContent = `€${worker.rate}/hour`;
+            document.getElementById('modalRating').textContent = `${worker.rating.toFixed(1)} (${worker.reviews} reviews)`;
+            // Update stars
+            const starsContainer = document.querySelector('#workerModal .flex.text-yellow-400');
+            starsContainer.innerHTML = renderStars(worker.rating);
+            // Update reviews
+            const workerReviews = reviews.filter(r => r.workerId === workerId);
+            const reviewsContainer = document.getElementById('reviewsContainer');
+            reviewsContainer.innerHTML = '';
+            if (workerReviews.length === 0) {
+                reviewsContainer.innerHTML = '<p class="text-gray-500">No reviews yet.</p>';
+            } else {
+                workerReviews.forEach(review => {
+                    const reviewElement = document.createElement('div');
+                    reviewElement.className = 'bg-gray-50 p-4 rounded-lg';
+                    reviewElement.innerHTML = `
+                        <div class="flex justify-between items-center mb-2">
+                            <h5 class="font-medium">${review.author}</h5>
+                            <span class="text-sm text-gray-500">${review.date}</span>
+                        </div>
+                        <div class="flex text-yellow-400 mb-1">
+                            ${renderStars(review.rating)}
+                        </div>
+                        <p class="text-gray-700">${review.comment}</p>
+                    `;
+                    reviewsContainer.appendChild(reviewElement);
+                });
+            }
+            // Show modal
+            workerModal.classList.remove('hidden');
+        }
+        // Initialize budget value display
+        updateBudgetValue();
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=amr701/gazdo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes