|
|
<!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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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 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> |
|
|
|
|
|
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" |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
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" |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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(); |
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
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)`; |
|
|
|
|
|
|
|
|
const starsContainer = document.querySelector('#workerModal .flex.text-yellow-400'); |
|
|
starsContainer.innerHTML = renderStars(worker.rating); |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
workerModal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
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> |
