Hugging Face's logo

Spaces:
amr701
/
gazdo
Running

App Files Community
gazdo / index.html
amr701's picture
amr701
Add 3 files
7680b8a verified
raw
history blame contribute delete
36.3 kB
<!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>