Spaces:
Running
Running
| <html lang="he" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ืืฉืืืื ืืฉืจ ืืืื - ืืขื ื ืืืืชื ืืืืืืื</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap'); | |
| body { | |
| font-family: 'Rubik', sans-serif; | |
| } | |
| .option-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .progress-step { | |
| width: 30px; | |
| height: 30px; | |
| transition: all 0.3s ease; | |
| } | |
| .progress-step.active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .progress-step.completed { | |
| background-color: #10b981; | |
| color: white; | |
| } | |
| .tooltip { | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .tooltip-trigger:hover + .tooltip { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .answer-box { | |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); | |
| border-left: 4px solid #3b82f6; | |
| } | |
| .sources-box { | |
| background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); | |
| border-left: 4px solid #8b5cf6; | |
| } | |
| .history-item { | |
| transition: all 0.3s ease; | |
| } | |
| .history-item:hover { | |
| transform: translateX(-5px); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Homepage --> | |
| <div id="homepage" class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md py-4 px-6 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://via.placeholder.com/50" alt="Logo" class="h-12"> | |
| <h1 class="text-xl font-bold text-gray-800 mr-2">ืืฉืืืื ืืฉืจ ืืืื</h1> | |
| </div> | |
| <div> | |
| <button id="userBtn" class="text-gray-600 hover:text-gray-800"> | |
| <i class="fas fa-user-circle text-2xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow flex flex-col md:flex-row items-center justify-center px-6 py-12"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-4">ืืฉืืืื ืืฉืจ ืืืื</h1> | |
| <h2 class="text-xl text-gray-600 mb-8">ืืขื ื ืืืืืืื ืืฉืืืืช ืืืืชืืืช ืืืืื ืืืืืื</h2> | |
| <div class="flex space-x-4 space-x-reverse"> | |
| <button id="startBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium flex items-center transition duration-300"> | |
| ืืืชืืื <i class="fas fa-arrow-right mr-2"></i> | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium transition duration-300"> | |
| ืืชืืืื ืืคืจืืืืงื | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1606787366852-5fcb2a5d1b13?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Kosher Kitchen" | |
| class="rounded-lg shadow-xl object-cover h-64 w-full md:h-96"> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-100 py-4 px-6 text-center"> | |
| <div class="flex items-center justify-center mb-2"> | |
| <i class="fas fa-exclamation-circle text-yellow-500 mr-2"></i> | |
| <p class="text-gray-600 text-sm">ืชืืื ืืืืจื: ืืืฉืืืื ืขืฉืื ืืกืคืง ืชืฉืืืืช ืฉืืื ืืฉ ืืืฉืชืืฉ ืืืืืจืืช</p> | |
| </div> | |
| <div class="text-gray-500 text-sm"> | |
| <button class="hover:text-gray-700">ืืืืืช</button> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Wizard Interface --> | |
| <div id="wizard" class="min-h-screen flex flex-col hidden"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md py-4 px-6 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://via.placeholder.com/50" alt="Logo" class="h-12"> | |
| <h1 class="text-xl font-bold text-gray-800 mr-2">ืืฉืืืื ืืฉืจ ืืืื</h1> | |
| </div> | |
| <div> | |
| <button id="userBtnWizard" class="text-gray-600 hover:text-gray-800"> | |
| <i class="fas fa-user-circle text-2xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Wizard Content --> | |
| <main class="flex-grow px-6 py-8"> | |
| <!-- Progress Steps --> | |
| <div class="flex justify-center mb-8 space-x-2 space-x-reverse"> | |
| <div class="progress-step rounded-full border border-gray-300 flex items-center justify-center">8</div> | |
| <div class="progress-step rounded-full border border-gray-300 flex items-center justify-center">7</div> | |
| <div class="progress-step rounded-full border border-gray-300 flex items-center justify-center">6</div> | |
| <div class="progress-step rounded-full border border-gray-300 flex items-center justify-center">5</div> | |
| <div class="progress-step rounded-full border border-gray-300 flex items-center justify-center">4</div> | |
| <div class="progress-step rounded-full border border-gray-300 flex items-center justify-center">3</div> | |
| <div class="progress-step rounded-full border border-gray-300 flex items-center justify-center">2</div> | |
| <div class="progress-step rounded-full active flex items-center justify-center">1</div> | |
| </div> | |
| <!-- Header Image --> | |
| <div class="h-48 bg-gray-200 rounded-lg mb-6 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1606787366852-5fcb2a5d1b13?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Kosher Kitchen" | |
| class="object-cover w-full h-full"> | |
| </div> | |
| <!-- Wizard Title --> | |
| <h1 id="wizardTitle" class="text-3xl font-bold text-gray-800 mb-2 text-center">ืื ื ืืืจ ืกืื ืืื</h1> | |
| <h2 id="wizardSubtitle" class="text-xl text-gray-600 mb-8 text-center">ืื ืืืงืจื ืืืื ืฉืืืืฉ ืืืื ื ื ืืืืืจ ืืืจืฉืืื</h2> | |
| <!-- Wizard Options --> | |
| <div id="wizardOptions" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8"> | |
| <!-- Options will be dynamically inserted here --> | |
| </div> | |
| <!-- Navigation Buttons --> | |
| <div class="flex justify-center space-x-4 space-x-reverse"> | |
| <button id="backBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 w-32 py-3 rounded-full font-medium flex items-center justify-center transition duration-300 hidden"> | |
| <i class="fas fa-arrow-left ml-2"></i> ืืืืจ | |
| </button> | |
| <button id="nextBtn" class="bg-blue-500 hover:bg-blue-600 text-white w-32 py-3 rounded-full font-medium flex items-center justify-center transition duration-300"> | |
| ืืืฉื <i class="fas fa-arrow-right mr-2"></i> | |
| </button> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-100 py-4 px-6 text-center"> | |
| <div class="flex items-center justify-center mb-2"> | |
| <i class="fas fa-exclamation-circle text-yellow-500 mr-2"></i> | |
| <p class="text-gray-600 text-sm">ืชืืื ืืืืจื: ืืืฉืืืื ืขืฉืื ืืกืคืง ืชืฉืืืืช ืฉืืื ืืฉ ืืืฉืชืืฉ ืืืืืจืืช</p> | |
| </div> | |
| <div class="text-gray-500 text-sm"> | |
| <button class="hover:text-gray-700">ืืืืืช</button> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Answer Display Page --> | |
| <div id="answerPage" class="min-h-screen flex flex-col hidden"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md py-4 px-6 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://via.placeholder.com/50" alt="Logo" class="h-12"> | |
| <h1 class="text-xl font-bold text-gray-800 mr-2">ืืฉืืืื ืืฉืจ ืืืื</h1> | |
| </div> | |
| <div> | |
| <button id="userBtnAnswer" class="text-gray-600 hover:text-gray-800"> | |
| <i class="fas fa-user-circle text-2xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Answer Content --> | |
| <main class="flex-grow px-6 py-8"> | |
| <div class="max-w-3xl mx-auto"> | |
| <!-- Answer Box --> | |
| <div class="answer-box rounded-lg p-6 mb-8 shadow-md"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-scroll text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-2">ืชืฉืืื ืืืืชืืช</h2> | |
| <p id="answerText" class="text-gray-700 text-lg">ืขื ืคื ืืืืื, ืืืงืจื ืื ื ืืชื ืืืฉืชืืฉ ืืืื ืืืืจ ื ืืงืื ืืกืืื ืืืืขืื ืืืื ืจืืชืืื.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sources Box --> | |
| <div class="sources-box rounded-lg p-6 mb-8 shadow-md"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-book text-purple-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h2 class="text-xl font-bold text-gray-800 mb-2">ืืงืืจืืช ืืืกืืจืื</h2> | |
| <ul class="list-disc list-inside text-gray-700 space-y-2"> | |
| <li>ืฉืืืื ืขืจืื, ืืืจื ืืขื, ืกืืื ืงื"ื</li> | |
| <li>ืจืื"ื, ืืืืืช ืืืืืืช ืืกืืจืืช, ืคืจืง ื"ื</li> | |
| <li>ืืืื ืืืฉ, ืืืจื ืืขื, ืกืืื ื"ื</li> | |
| <li>ืืืขืื ืืขืืื ืืืฉืจ ืืืื ืืื ื ืื ืืืื ืืืขืื ืืื ื ื ืืืจ</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4 sm:space-x-reverse"> | |
| <button id="newQuestionBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center transition duration-300"> | |
| <i class="fas fa-plus-circle mr-2"></i> ืฉืืื ืืืฉื | |
| </button> | |
| <button id="supportProjectBtn" class="bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center transition duration-300"> | |
| <i class="fas fa-hand-holding-heart mr-2"></i> ืชืืืื ืืคืจืืืืงื | |
| </button> | |
| <button id="reportAnswerBtn" class="bg-red-500 hover:bg-red-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center transition duration-300"> | |
| <i class="fas fa-flag mr-2"></i> ืืืื ืขื ืืชืฉืืื | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-100 py-4 px-6 text-center"> | |
| <div class="flex items-center justify-center mb-2"> | |
| <i class="fas fa-exclamation-circle text-yellow-500 mr-2"></i> | |
| <p class="text-gray-600 text-sm">ืชืืื ืืืืจื: ืืืฉืืืื ืขืฉืื ืืกืคืง ืชืฉืืืืช ืฉืืื ืืฉ ืืืฉืชืืฉ ืืืืืจืืช</p> | |
| </div> | |
| <div class="text-gray-500 text-sm"> | |
| <button class="hover:text-gray-700">ืืืืืช</button> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Login/Registration Page --> | |
| <div id="authPage" class="min-h-screen flex flex-col hidden"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md py-4 px-6 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://via.placeholder.com/50" alt="Logo" class="h-12"> | |
| <h1 class="text-xl font-bold text-gray-800 mr-2">ืืฉืืืื ืืฉืจ ืืืื</h1> | |
| </div> | |
| <div> | |
| <button id="closeAuthBtn" class="text-gray-600 hover:text-gray-800"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Auth Content --> | |
| <main class="flex-grow flex items-center justify-center px-6 py-12"> | |
| <div class="w-full max-w-md bg-white rounded-lg shadow-xl overflow-hidden"> | |
| <!-- Tabs --> | |
| <div class="flex border-b"> | |
| <button id="loginTab" class="flex-1 py-4 px-6 font-medium text-center border-b-2 border-blue-500 text-blue-600">ืื ืืกื</button> | |
| <button id="registerTab" class="flex-1 py-4 px-6 font-medium text-center text-gray-500">ืืจืฉืื</button> | |
| </div> | |
| <!-- Login Form --> | |
| <div id="loginForm" class="p-6"> | |
| <div class="mb-4"> | |
| <label for="loginEmail" class="block text-gray-700 mb-2">ืืืืืื</label> | |
| <input type="email" id="loginEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="loginPassword" class="block text-gray-700 mb-2">ืกืืกืื</label> | |
| <input type="password" id="loginPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <button id="loginBtn" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg font-medium transition duration-300"> | |
| ืืชืืืจืืช | |
| </button> | |
| <div class="mt-4 text-center"> | |
| <button id="forgotPasswordBtn" class="text-blue-500 hover:text-blue-700 text-sm">ืฉืืืช ืกืืกืื?</button> | |
| </div> | |
| </div> | |
| <!-- Registration Form --> | |
| <div id="registerForm" class="p-6 hidden"> | |
| <div class="mb-4"> | |
| <label for="registerName" class="block text-gray-700 mb-2">ืฉื ืืื</label> | |
| <input type="text" id="registerName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="registerEmail" class="block text-gray-700 mb-2">ืืืืืื</label> | |
| <input type="email" id="registerEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="registerPassword" class="block text-gray-700 mb-2">ืกืืกืื</label> | |
| <input type="password" id="registerPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="registerConfirmPassword" class="block text-gray-700 mb-2">ืืืืืช ืกืืกืื</label> | |
| <input type="password" id="registerConfirmPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <button id="registerBtn" class="w-full bg-green-500 hover:bg-green-600 text-white py-3 rounded-lg font-medium transition duration-300"> | |
| ืืจืฉืื | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-100 py-4 px-6 text-center"> | |
| <div class="flex items-center justify-center mb-2"> | |
| <i class="fas fa-exclamation-circle text-yellow-500 mr-2"></i> | |
| <p class="text-gray-600 text-sm">ืชืืื ืืืืจื: ืืืฉืืืื ืขืฉืื ืืกืคืง ืชืฉืืืืช ืฉืืื ืืฉ ืืืฉืชืืฉ ืืืืืจืืช</p> | |
| </div> | |
| <div class="text-gray-500 text-sm"> | |
| <button class="hover:text-gray-700">ืืืืืช</button> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Profile Page --> | |
| <div id="profilePage" class="min-h-screen flex flex-col hidden"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md py-4 px-6 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://via.placeholder.com/50" alt="Logo" class="h-12"> | |
| <h1 class="text-xl font-bold text-gray-800 mr-2">ืืฉืืืื ืืฉืจ ืืืื</h1> | |
| </div> | |
| <div> | |
| <button id="closeProfileBtn" class="text-gray-600 hover:text-gray-800"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Profile Content --> | |
| <main class="flex-grow px-6 py-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Profile Header --> | |
| <div class="flex flex-col md:flex-row items-center mb-8"> | |
| <div class="bg-blue-100 p-4 rounded-full mr-0 md:mr-6 mb-4 md:mb-0"> | |
| <i class="fas fa-user-circle text-blue-500 text-5xl"></i> | |
| </div> | |
| <div class="text-center md:text-right"> | |
| <h2 class="text-2xl font-bold text-gray-800" id="profileName">ืืื ืืื</h2> | |
| <p class="text-gray-600" id="profileEmail">david@example.com</p> | |
| </div> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="flex border-b mb-6"> | |
| <button id="preferencesTab" class="py-3 px-6 font-medium text-center border-b-2 border-blue-500 text-blue-600">ืืขืืคืืช</button> | |
| <button id="historyTab" class="py-3 px-6 font-medium text-center text-gray-500">ืืืกืืืจืืืช ืฉืืืืช</button> | |
| </div> | |
| <!-- Preferences Section --> | |
| <div id="preferencesSection"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">ืืขืืคืืช ืืฉืชืืฉ</h3> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">ื ืืกื ืืชืฉืืื</label> | |
| <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>ืืคืืจื ืขื ืืงืืจืืช</option> | |
| <option>ืชืืฆืืชื</option> | |
| <option>ืขื ืืกืืจืื ืืืฉืื ืงืื</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">ืืชืจืื ืขื ืขืืืื ืื</label> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="notificationsCheckbox" class="mr-2 h-5 w-5 text-blue-500"> | |
| <label for="notificationsCheckbox" class="text-gray-700">ืงืืืช ืืชืจืืืช ืืืืื ืขื ืชืฉืืืืช ืืืฉืืช ืืขืืืื ืื</label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">ืขืืืื ืกืืกืื</label> | |
| <button id="changePasswordBtn" class="text-blue-500 hover:text-blue-700">ืืืฅ ืืื ืืฉืื ืื ืกืืกืื</button> | |
| </div> | |
| </div> | |
| <button id="savePreferencesBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition duration-300"> | |
| ืฉืืืจ ืืขืืคืืช | |
| </button> | |
| </div> | |
| <!-- History Section --> | |
| <div id="historySection" class="hidden"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">ืืืกืืืจืืืช ืฉืืืืช</h3> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <div class="space-y-4"> | |
| <div class="history-item bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium text-gray-800">ืฉืืืืฉ ืืกืืจ ืืฉืจื ืื ืืืื ืืืืื ืืืื</h4> | |
| <span class="text-sm text-gray-500">12/05/2023</span> | |
| </div> | |
| <p class="text-gray-600 mt-1 text-sm">ืชืฉืืื: ืืฉ ืืืืขืื ืืช ืืกืืจ ืืคื ื ืฉืืืืฉ ืืืื</p> | |
| </div> | |
| <div class="history-item bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium text-gray-800">ืืขืืจืช ืกืืื ืืืฉืจ ืืืื</h4> | |
| <span class="text-sm text-gray-500">05/05/2023</span> | |
| </div> | |
| <p class="text-gray-600 mt-1 text-sm">ืชืฉืืื: ื ืืชื ืืืฉืชืืฉ ืืืืชื ืกืืื ืืืืจ ื ืืงืื ืืกืืื</p> | |
| </div> | |
| <div class="history-item bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium text-gray-800">ืฉืืืืฉ ืืชืื ืืช ืืคืืื ืืคืจืืื ืืืืจ ืืฉืจ</h4> | |
| <span class="text-sm text-gray-500">28/04/2023</span> | |
| </div> | |
| <p class="text-gray-600 mt-1 text-sm">ืชืฉืืื: ืืื ืฆืืจื ืืืืขืื ืื ืืชืื ืืช ื ืงืืื ืืืื</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Logout Button --> | |
| <div class="mt-8 text-center"> | |
| <button id="logoutBtn" class="text-red-500 hover:text-red-700 font-medium"> | |
| <i class="fas fa-sign-out-alt mr-2"></i> ืืชื ืชืงืืช | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-100 py-4 px-6 text-center"> | |
| <div class="flex items-center justify-center mb-2"> | |
| <i class="fas fa-exclamation-circle text-yellow-500 mr-2"></i> | |
| <p class="text-gray-600 text-sm">ืชืืื ืืืืจื: ืืืฉืืืื ืขืฉืื ืืกืคืง ืชืฉืืืืช ืฉืืื ืืฉ ืืืฉืชืืฉ ืืืืืจืืช</p> | |
| </div> | |
| <div class="text-gray-500 text-sm"> | |
| <button class="hover:text-gray-700">ืืืืืช</button> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Wizard data | |
| const wizardSteps = [ | |
| { | |
| title: "ืื ื ืืืจ ืกืื ืืื", | |
| subtitle: "ืื ืืืงืจื ืืืื ืฉืืืืฉ ืืืื ื ื ืืืืืจ ืืืจืฉืืื", | |
| options: [ | |
| { icon: "utensils", text: "ืกืืจ", info: "ืืื ืืืฉืื ืขืืืง ืขื ืืืืืช" }, | |
| { icon: "utensils", text: "ืืืืช", info: "ืืื ืืืฉืื ืฉืืื ืขื ืืืืช" }, | |
| { icon: "utensils", text: "ืชืื ืืช", info: "ืืื ืืคืืื" }, | |
| { icon: "bowl-food", text: "ืงืขืจื", info: "ืืื ืืืฉื ืขืืืง" }, | |
| { icon: "utensils", text: "ืกืื\"ื", info: "ืืคืืช, ืืืืืืช ืืกืืื ืื" }, | |
| { icon: "plate-wheat", text: "ืฆืืืช", info: "ืืื ืืืฉื ืฉืืื" }, | |
| { icon: "ban", text: "ืืฉืืจ ืจืืง", info: "ืื ืืื ืฉืืืืฉ ืืืื" } | |
| ] | |
| }, | |
| { | |
| title: "ืื ื ืืืจ ืืช ืฉืืืืฉ ืืืื", | |
| subtitle: "ืืื ืืืื ืฉืืืจืช ืืืื ืืฉืจื ืื ืคืจืืื?", | |
| options: [ | |
| { icon: "drumstick-bite", text: "ืืฉืจื", info: "ืืฉืืฉ ืืืืฉืื ืื ืืืืืช ืืฉืจ" }, | |
| { icon: "cheese", text: "ืืืื", info: "ืืฉืืฉ ืืืืฉืื ืื ืืืืืช ืืืฆืจื ืืื" }, | |
| { icon: "bread-slice", text: "ืคืจืืื", info: "ืื ืืฉืจื ืืื ืืืื" } | |
| ] | |
| }, | |
| { | |
| title: "ืืืกืืืจืืืช ืืฉืืืืฉ ืืืื", | |
| subtitle: "ืืื ื ืขืฉื ืฉืืืืฉ ืืืื ื-24 ืฉืขืืช ืืืืจืื ืืช?", | |
| options: [ | |
| { icon: "clock", text: "ืื ืืืื", info: "ืฉืืืืฉ ืืืื ื-24 ืฉืขืืช ืืืืจืื ืืช" }, | |
| { icon: "clock-rotate-left", text: "ืื ืื ืืืื", info: "ืื ื ืขืฉื ืฉืืืืฉ ืืืื ื-24 ืฉืขืืช ืืืืจืื ืืช" } | |
| ] | |
| }, | |
| { | |
| title: "ืกืื ืืืืคืจืืืจื", | |
| subtitle: "ืื ืืืืชื ืืืืคืจืืืจื ืฉื ืืืื ืืขืช ืืฉืืืืฉ?", | |
| options: [ | |
| { icon: "temperature-high", text: "ืื ืืืื", info: "ืืืคืจืืืจื ืืขื 70 ืืขืืืช" }, | |
| { icon: "temperature-low", text: "ืื", info: "ืืืคืจืืืจื ืืื 40-70 ืืขืืืช" }, | |
| { icon: "temperature-empty", text: "ืคืืฉืจ", info: "ืืืคืจืืืจื ืืชืืช ื-40 ืืขืืืช" } | |
| ] | |
| }, | |
| { | |
| title: "ืืื ืืขืืจื ืืื ื ืืกืฃ", | |
| subtitle: "ืื ืืืงืจื ืืืื ืฉืืืืฉ ืืืื ื ืืกืฃ ื ื ืืืืืจ ืืืจืฉืืื", | |
| options: [ | |
| { icon: "utensils", text: "ืกืืจ", info: "ืืื ืืืฉืื ืขืืืง ืขื ืืืืืช" }, | |
| { icon: "utensils", text: "ืืืืช", info: "ืืื ืืืฉืื ืฉืืื ืขื ืืืืช" }, | |
| { icon: "utensils", text: "ืชืื ืืช", info: "ืืื ืืคืืื" }, | |
| { icon: "bowl-food", text: "ืงืขืจื", info: "ืืื ืืืฉื ืขืืืง" }, | |
| { icon: "utensils", text: "ืกืื\"ื", info: "ืืคืืช, ืืืืืืช ืืกืืื ืื" }, | |
| { icon: "plate-wheat", text: "ืฆืืืช", info: "ืืื ืืืฉื ืฉืืื" }, | |
| { icon: "ban", text: "ืืฉืืจ ืจืืง", info: "ืื ืืื ืฉืืืืฉ ืืืื ื ืืกืฃ" } | |
| ] | |
| }, | |
| { | |
| title: "ืื ื ืืืจ ืืช ืฉืืืืฉ ืืืื ืื ืืกืฃ", | |
| subtitle: "ืืื ืืืื ืื ืืกืฃ ืืืื ืืฉืจื ืื ืคืจืืื?", | |
| options: [ | |
| { icon: "drumstick-bite", text: "ืืฉืจื", info: "ืืฉืืฉ ืืืืฉืื ืื ืืืืืช ืืฉืจ" }, | |
| { icon: "cheese", text: "ืืืื", info: "ืืฉืืฉ ืืืืฉืื ืื ืืืืืช ืืืฆืจื ืืื" }, | |
| { icon: "bread-slice", text: "ืคืจืืื", info: "ืื ืืฉืจื ืืื ืืืื" } | |
| ] | |
| }, | |
| { | |
| title: "ืืืกืืืจืืืช ืืฉืืืืฉ ืืืื ืื ืืกืฃ", | |
| subtitle: "ืืื ื ืขืฉื ืฉืืืืฉ ืืืื ืื ืืกืฃ ื-24 ืฉืขืืช ืืืืจืื ืืช?", | |
| options: [ | |
| { icon: "clock", text: "ืื ืืืื", info: "ืฉืืืืฉ ืืืื ื-24 ืฉืขืืช ืืืืจืื ืืช" }, | |
| { icon: "clock-rotate-left", text: "ืื ืื ืืืื", info: "ืื ื ืขืฉื ืฉืืืืฉ ืืืื ื-24 ืฉืขืืช ืืืืจืื ืืช" } | |
| ] | |
| }, | |
| { | |
| title: "ืกืื ืืืืื", | |
| subtitle: "ืื ืืฉืืื ืืืืืช ืืืื ืื ื ืกืื ืื ืืื ืืจืืฃ", | |
| options: [ | |
| { icon: "pepper-hot", text: "ืืจืืฃ", info: "ืืืื ืืจืืฃ ืขื ืชืืืื ืื ืืืงืื" }, | |
| { icon: "pepper", text: "ืื ืืจืืฃ", info: "ืืืื ืื ืืจืืฃ" } | |
| ] | |
| } | |
| ]; | |
| // Current step | |
| let currentStep = 0; | |
| let selectedOptions = Array(wizardSteps.length).fill(null); | |
| let isLoggedIn = false; // Track login state | |
| // DOM Elements | |
| const homepage = document.getElementById('homepage'); | |
| const wizard = document.getElementById('wizard'); | |
| const answerPage = document.getElementById('answerPage'); | |
| const authPage = document.getElementById('authPage'); | |
| const profilePage = document.getElementById('profilePage'); | |
| const startBtn = document.getElementById('startBtn'); | |
| const backBtn = document.getElementById('backBtn'); | |
| const nextBtn = document.getElementById('nextBtn'); | |
| const wizardTitle = document.getElementById('wizardTitle'); | |
| const wizardSubtitle = document.getElementById('wizardSubtitle'); | |
| const wizardOptions = document.getElementById('wizardOptions'); | |
| const progressSteps = document.querySelectorAll('.progress-step'); | |
| const userBtn = document.getElementById('userBtn'); | |
| const userBtnWizard = document.getElementById('userBtnWizard'); | |
| const userBtnAnswer = document.getElementById('userBtnAnswer'); | |
| const closeAuthBtn = document.getElementById('closeAuthBtn'); | |
| const closeProfileBtn = document.getElementById('closeProfileBtn'); | |
| const newQuestionBtn = document.getElementById('newQuestionBtn'); | |
| const supportProjectBtn = document.getElementById('supportProjectBtn'); | |
| const reportAnswerBtn = document.getElementById('reportAnswerBtn'); | |
| const loginTab = document.getElementById('loginTab'); | |
| const registerTab = document.getElementById('registerTab'); | |
| const loginForm = document.getElementById('loginForm'); | |
| const registerForm = document.getElementById('registerForm'); | |
| const loginBtn = document.getElementById('loginBtn'); | |
| const registerBtn = document.getElementById('registerBtn'); | |
| const forgotPasswordBtn = document.getElementById('forgotPasswordBtn'); | |
| const preferencesTab = document.getElementById('preferencesTab'); | |
| const historyTab = document.getElementById('historyTab'); | |
| const preferencesSection = document.getElementById('preferencesSection'); | |
| const historySection = document.getElementById('historySection'); | |
| const savePreferencesBtn = document.getElementById('savePreferencesBtn'); | |
| const changePasswordBtn = document.getElementById('changePasswordBtn'); | |
| const logoutBtn = document.getElementById('logoutBtn'); | |
| const answerText = document.getElementById('answerText'); | |
| const profileName = document.getElementById('profileName'); | |
| const profileEmail = document.getElementById('profileEmail'); | |
| // Event Listeners | |
| startBtn.addEventListener('click', () => { | |
| homepage.classList.add('hidden'); | |
| wizard.classList.remove('hidden'); | |
| updateWizardStep(); | |
| }); | |
| backBtn.addEventListener('click', () => { | |
| if (currentStep > 0) { | |
| currentStep--; | |
| updateWizardStep(); | |
| } | |
| }); | |
| nextBtn.addEventListener('click', () => { | |
| if (selectedOptions[currentStep] !== null) { | |
| if (currentStep < wizardSteps.length - 1) { | |
| currentStep++; | |
| updateWizardStep(); | |
| } else { | |
| // Submit the form and show results | |
| showAnswerPage(); | |
| } | |
| } else { | |
| alert('ืื ื ืืืจ ืืคืฉืจืืช ืืคื ื ืฉืชืืฉืื'); | |
| } | |
| }); | |
| // User buttons | |
| userBtn.addEventListener('click', () => { | |
| if (isLoggedIn) { | |
| showProfilePage(); | |
| } else { | |
| showAuthPage(); | |
| } | |
| }); | |
| userBtnWizard.addEventListener('click', () => { | |
| if (isLoggedIn) { | |
| showProfilePage(); | |
| } else { | |
| showAuthPage(); | |
| } | |
| }); | |
| userBtnAnswer.addEventListener('click', () => { | |
| if (isLoggedIn) { | |
| showProfilePage(); | |
| } else { | |
| showAuthPage(); | |
| } | |
| }); | |
| closeAuthBtn.addEventListener('click', () => { | |
| authPage.classList.add('hidden'); | |
| if (wizard.classList.contains('hidden') && answerPage.classList.contains('hidden')) { | |
| homepage.classList.remove('hidden'); | |
| } else if (!wizard.classList.contains('hidden')) { | |
| wizard.classList.remove('hidden'); | |
| } else { | |
| answerPage.classList.remove('hidden'); | |
| } | |
| }); | |
| closeProfileBtn.addEventListener('click', () => { | |
| profilePage.classList.add('hidden'); | |
| if (wizard.classList.contains('hidden') && answerPage.classList.contains('hidden')) { | |
| homepage.classList.remove('hidden'); | |
| } else if (!wizard.classList.contains('hidden')) { | |
| wizard.classList.remove('hidden'); | |
| } else { | |
| answerPage.classList.remove('hidden'); | |
| } | |
| }); | |
| // Answer page buttons | |
| newQuestionBtn.addEventListener('click', () => { | |
| answerPage.classList.add('hidden'); | |
| currentStep = 0; | |
| selectedOptions = Array(wizardSteps.length).fill(null); | |
| wizard.classList.remove('hidden'); | |
| updateWizardStep(); | |
| }); | |
| supportProjectBtn.addEventListener('click', () => { | |
| alert('ืชืืื ืขื ืจืฆืื ื ืืชืืื ืืคืจืืืงื! ืืคืฉืจืืืืช ืืชืืืื ืืืฆืื ืืื.'); | |
| }); | |
| reportAnswerBtn.addEventListener('click', () => { | |
| alert('ืชืืื ืขื ืืืืืื! ื ืืืืง ืืช ืืชืฉืืื ืื ืขืืื ืืืชืื.'); | |
| }); | |
| // Auth tabs | |
| loginTab.addEventListener('click', () => { | |
| loginTab.classList.add('border-b-2', 'border-blue-500', 'text-blue-600'); | |
| loginTab.classList.remove('text-gray-500'); | |
| registerTab.classList.remove('border-b-2', 'border-blue-500', 'text-blue-600'); | |
| registerTab.classList.add('text-gray-500'); | |
| loginForm.classList.remove('hidden'); | |
| registerForm.classList.add('hidden'); | |
| }); | |
| registerTab.addEventListener('click', () => { | |
| registerTab.classList.add('border-b-2', 'border-blue-500', 'text-blue-600'); | |
| registerTab.classList.remove('text-gray-500'); | |
| loginTab.classList.remove('border-b-2', 'border-blue-500', 'text-blue-600'); | |
| loginTab.classList.add('text-gray-500'); | |
| registerForm.classList.remove('hidden'); | |
| loginForm.classList.add('hidden'); | |
| }); | |
| // Login/Register buttons | |
| loginBtn.addEventListener('click', () => { | |
| const email = document.getElementById('loginEmail').value; | |
| const password = document.getElementById('loginPassword').value; | |
| if (email && password) { | |
| // Simulate login | |
| isLoggedIn = true; | |
| profileName.textContent = "ืืื ืืื"; | |
| profileEmail.textContent = email; | |
| alert('ืืชืืืจืืช ืืืฆืขื ืืืฆืืื!'); | |
| authPage.classList.add('hidden'); | |
| if (wizard.classList.contains('hidden') && answerPage.classList.contains('hidden')) { | |
| homepage.classList.remove('hidden'); | |
| } else if (!wizard.classList.contains('hidden')) { | |
| wizard.classList.remove('hidden'); | |
| } else { | |
| answerPage.classList.remove('hidden'); | |
| } | |
| } else { | |
| alert('ืื ื ืืื ืืช ืื ืืฉืืืช'); | |
| } | |
| }); | |
| registerBtn.addEventListener('click', () => { | |
| const name = document.getElementById('registerName').value; | |
| const email = document.getElementById('registerEmail').value; | |
| const password = document.getElementById('registerPassword').value; | |
| const confirmPassword = document.getElementById('registerConfirmPassword').value; | |
| if (name && email && password && confirmPassword) { | |
| if (password === confirmPassword) { | |
| // Simulate registration | |
| isLoggedIn = true; | |
| profileName.textContent = name; | |
| profileEmail.textContent = email; | |
| alert('ืืจืฉืื ืืืฆืขื ืืืฆืืื!'); | |
| authPage.classList.add('hidden'); | |
| if (wizard.classList.contains('hidden') && answerPage.classList.contains('hidden')) { | |
| homepage.classList.remove('hidden'); | |
| } else if (!wizard.classList.contains('hidden')) { | |
| wizard.classList.remove('hidden'); | |
| } else { | |
| answerPage.classList.remove('hidden'); | |
| } | |
| } else { | |
| alert('ืืกืืกืืืืช ืืื ื ืชืืืืืช'); | |
| } | |
| } else { | |
| alert('ืื ื ืืื ืืช ืื ืืฉืืืช'); | |
| } | |
| }); | |
| forgotPasswordBtn.addEventListener('click', () => { | |
| alert('ืงืืฉืืจ ืืืืคืืก ืกืืกืื ื ืฉืื ืืืชืืืช ืืืืื ืฉืื.'); | |
| }); | |
| // Profile tabs | |
| preferencesTab.addEventListener('click', () => { | |
| preferencesTab.classList.add('border-b-2', 'border-blue-500', 'text-blue-600'); | |
| preferencesTab.classList.remove('text-gray-500'); | |
| historyTab.classList.remove('border-b-2', 'border-blue-500', 'text-blue-600'); | |
| historyTab.classList.add('text-gray-500'); | |
| preferencesSection.classList.remove('hidden'); | |
| historySection.classList.add('hidden'); | |
| }); | |
| historyTab.addEventListener('click', () => { | |
| historyTab.classList.add('border-b-2', 'border-blue-500', 'text-blue-600'); | |
| historyTab.classList.remove('text-gray-500'); | |
| preferencesTab.classList.remove('border-b-2', 'border-blue-500', 'text-blue-600'); | |
| preferencesTab.classList.add('text-gray-500'); | |
| historySection.classList.remove('hidden'); | |
| preferencesSection.classList.add('hidden'); | |
| }); | |
| // Profile buttons | |
| savePreferencesBtn.addEventListener('click', () => { | |
| alert('ืืขืืคืืชืื ื ืฉืืจื ืืืฆืืื!'); | |
| }); | |
| changePasswordBtn.addEventListener('click', () => { | |
| alert('ืืืคืก ืฉืื ืื ืกืืกืื ืืืฆื ืืื.'); | |
| }); | |
| logoutBtn.addEventListener('click', () => { | |
| isLoggedIn = false; | |
| alert('ืืชื ืชืงืืช ืืืฆืขื ืืืฆืืื.'); | |
| profilePage.classList.add('hidden'); | |
| homepage.classList.remove('hidden'); | |
| }); | |
| // Update wizard step | |
| function updateWizardStep() { | |
| // Update progress steps | |
| progressSteps.forEach((step, index) => { | |
| step.classList.remove('active', 'completed'); | |
| if (index === wizardSteps.length - currentStep - 1) { | |
| step.classList.add('active'); | |
| } else if (index > wizardSteps.length - currentStep - 1) { | |
| step.classList.add('completed'); | |
| } | |
| }); | |
| // Update titles | |
| wizardTitle.textContent = wizardSteps[currentStep].title; | |
| wizardSubtitle.textContent = wizardSteps[currentStep].subtitle; | |
| // Update options | |
| wizardOptions.innerHTML = ''; | |
| wizardSteps[currentStep].options.forEach((option, index) => { | |
| const optionElement = document.createElement('div'); | |
| optionElement.className = `option-card bg-white p-4 rounded-lg shadow-md flex flex-col items-center cursor-pointer transition duration-300 fade-in ${selectedOptions[currentStep] === index ? 'border-2 border-blue-500' : ''}`; | |
| optionElement.innerHTML = ` | |
| <i class="fas fa-${option.icon} text-3xl text-gray-700 mb-3"></i> | |
| <span class="font-bold text-gray-800 text-center">${option.text}</span> | |
| <div class="relative mt-2"> | |
| <i class="fas fa-question-circle text-gray-400 hover:text-gray-600 tooltip-trigger"></i> | |
| <div class="tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-gray-800 text-white text-sm px-3 py-1 rounded whitespace-nowrap"> | |
| ${option.info} | |
| </div> | |
| </div> | |
| `; | |
| optionElement.addEventListener('click', () => { | |
| selectedOptions[currentStep] = index; | |
| updateWizardStep(); | |
| }); | |
| wizardOptions.appendChild(optionElement); | |
| }); | |
| // Update navigation buttons | |
| backBtn.classList.toggle('hidden', currentStep === 0); | |
| nextBtn.textContent = currentStep === wizardSteps.length - 1 ? 'ืกืืื' : 'ืืืฉื'; | |
| } | |
| function showAnswerPage() { | |
| wizard.classList.add('hidden'); | |
| answerPage.classList.remove('hidden'); | |
| // Generate answer based on selections (simplified for demo) | |
| const toolType = wizardSteps[0].options[selectedOptions[0]].text; | |
| const toolUsage = wizardSteps[1].options[selectedOptions[1]].text; | |
| const toolHistory = wizardSteps[2].options[selectedOptions[2]].text; | |
| let answer = ""; | |
| if (toolUsage === "ืืฉืจื" && toolHistory === "ืื ืืืื") { | |
| answer = `ืขื ืคื ืืืืื, ${toolType} ืืฉืจื ืื ืืืื ืืืจืฉ ืืืขืื ืืคื ื ืฉืืืืฉ ืืืื. ืืฉ ืื ืงืืช ืืืื ืืช ืืืื, ืืืจืชืื ืืื ืืกืืจ ื ืคืจื, ืืืฉืคืื ืขื ืืืื ืืฉืื ืจืืชืืื.`; | |
| } else if (toolUsage === "ืืืื" && toolHistory === "ืื ืืืื") { | |
| answer = `ืขื ืคื ืืืืื, ${toolType} ืืืื ืื ืืืื ืืืจืฉ ืืืขืื ืืคื ื ืฉืืืืฉ ืืฉืจื. ืืฉ ืื ืงืืช ืืืื ืืช ืืืื, ืืืจืชืื ืืื ืืกืืจ ื ืคืจื, ืืืฉืคืื ืขื ืืืื ืืฉืื ืจืืชืืื.`; | |
| } else { | |
| answer = `ืขื ืคื ืืืืื, ${toolType} ${toolUsage} ${toolHistory === "ืื ืืืื" ? "ืื ืืืื" : "ืื ืื ืืืื"} ื ืืชื ืืฉืืืืฉ ืืื ืืืขืื ืืชื ืื ืฉื ืืงื ืืืื.`; | |
| } | |
| answerText.textContent = answer; | |
| } | |
| function showAuthPage() { | |
| homepage.classList.add('hidden'); | |
| wizard.classList.add('hidden'); | |
| answerPage.classList.add('hidden'); | |
| authPage.classList.remove('hidden'); | |
| // Reset forms | |
| document.getElementById('loginEmail').value = ""; | |
| document.getElementById('loginPassword').value = ""; | |
| document.getElementById('registerName').value = ""; | |
| document.getElementById('registerEmail').value = ""; | |
| document.getElementById('registerPassword').value = ""; | |
| document.getElementById('registerConfirmPassword').value = ""; | |
| // Show login form by default | |
| loginTab.click(); | |
| } | |
| function showProfilePage() { | |
| homepage.classList.add('hidden'); | |
| wizard.classList.add('hidden'); | |
| answerPage.classList.add('hidden'); | |
| profilePage.classList.remove('hidden'); | |
| // Show preferences by default | |
| preferencesTab.click(); | |
| } | |
| // Initialize tooltips | |
| document.addEventListener('mouseover', function(e) { | |
| if (e.target.classList.contains('tooltip-trigger')) { | |
| const tooltip = e.target.nextElementSibling; | |
| tooltip.style.visibility = 'visible'; | |
| tooltip.style.opacity = '1'; | |
| } | |
| }); | |
| document.addEventListener('mouseout', function(e) { | |
| if (e.target.classList.contains('tooltip-trigger')) { | |
| const tooltip = e.target.nextElementSibling; | |
| tooltip.style.visibility = 'hidden'; | |
| tooltip.style.opacity = '0'; | |
| } | |
| }); | |
| </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=CHBINHAYDDE/meshivon" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |