Spaces:
Running
Running
| <html><head><base href="https://websim.ai/ethical-dilemma-navigator"><title>Ethical Dilemma Navigator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @keyframes thoughtBubble { | |
| 0% { transform: scale(0.95); opacity: 0.7; } | |
| 50% { transform: scale(1.05); opacity: 1; } | |
| 100% { transform: scale(0.95); opacity: 0.7; } | |
| } | |
| .thought-bubble { | |
| animation: thoughtBubble 5s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-900 to-purple-900 text-white min-h-screen font-sans"> | |
| <header class="py-6 relative"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl font-bold text-center text-blue-300">Ethical Dilemma Navigator</h1> | |
| <p class="mt-2 text-center text-purple-200">Exploring Moral Complexities with Nuanced Perspectives</p> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-6 mb-8"> | |
| <h2 class="text-2xl font-semibold mb-4 text-blue-200">Describe Your Ethical Dilemma</h2> | |
| <form id="dilemma-form" method="GET" action="https://websim.ai/ethical-dilemma-navigator" class="space-y-4"> | |
| <div> | |
| <label for="dilemma-description" class="block text-sm font-medium text-purple-200">What's the ethical situation you're grappling with?</label> | |
| <textarea id="dilemma-description" name="dilemma" rows="4" class="mt-1 block w-full px-3 py-2 bg-blue-800 border border-blue-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-white" placeholder="e.g., 'Is it ethical to use AI to replace human workers?', 'Should I report a colleague's minor misconduct?'"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-blue-900 bg-blue-400 hover:bg-blue-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Explore Perspectives | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="result-container" class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-6 hidden"> | |
| <h2 class="text-2xl font-semibold mb-4 text-blue-200">Ethical Perspectives</h2> | |
| <div id="perspectives-result" class="space-y-4"> | |
| <!-- Perspectives will be inserted here --> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-6"> | |
| <h2 class="text-2xl font-semibold mb-4 text-blue-200">Ethical Frameworks</h2> | |
| <ul class="list-disc list-inside space-y-2 text-purple-200"> | |
| <li><span class="font-semibold">Utilitarianism:</span> Focuses on maximizing overall happiness and well-being for the greatest number of people</li> | |
| <li><span class="font-semibold">Deontology:</span> Emphasizes adherence to moral rules and duties, regardless of consequences</li> | |
| <li><span class="font-semibold">Virtue Ethics:</span> Centers on cultivating moral character and virtues</li> | |
| <li><span class="font-semibold">Care Ethics:</span> Prioritizes compassion, empathy, and responsibility in relationships</li> | |
| <li><span class="font-semibold">Social Contract Theory:</span> Based on implicit agreements that form the basis of a just society</li> | |
| </ul> | |
| </div> | |
| </main> | |
| <div class="fixed bottom-4 right-4 w-32 h-32 thought-bubble"> | |
| <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full text-blue-300 opacity-50"> | |
| <path fill="currentColor" d="M44.7,-76.4C58.8,-69.2,71.8,-59.1,79.6,-45.8C87.4,-32.6,90,-16.3,89.1,-0.5C88.2,15.3,83.8,30.6,76.2,44.2C68.5,57.8,57.6,69.6,44.4,77.5C31.1,85.4,15.5,89.4,0.3,88.9C-15,88.4,-30,83.3,-43.3,75.4C-56.6,67.4,-68.2,56.6,-76.3,43.5C-84.4,30.4,-89,15.2,-89.1,-0.1C-89.2,-15.4,-84.8,-30.8,-76.7,-43.9C-68.6,-57,-56.8,-67.8,-43.3,-75.5C-29.8,-83.2,-14.9,-87.8,0.6,-88.8C16.1,-89.8,32.2,-87.3,44.7,-76.4Z" transform="translate(100 100)" /> | |
| </svg> | |
| </div> | |
| <script> | |
| const dilemmaForm = document.getElementById('dilemma-form'); | |
| const resultContainer = document.getElementById('result-container'); | |
| const perspectivesResult = document.getElementById('perspectives-result'); | |
| dilemmaForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const dilemmaDescription = document.getElementById('dilemma-description').value.trim(); | |
| if (!dilemmaDescription) { | |
| alert('Please describe the ethical dilemma you want to explore.'); | |
| return; | |
| } | |
| generatePerspectives(dilemmaDescription); | |
| }); | |
| function generatePerspectives(dilemmaDescription) { | |
| // Show loading state | |
| resultContainer.classList.remove('hidden'); | |
| perspectivesResult.innerHTML = '<p class="text-purple-200">Analyzing the ethical complexities...</p>'; | |
| // Simulate API call with setTimeout | |
| setTimeout(() => { | |
| const perspectivesData = createPerspectives(dilemmaDescription); | |
| displayPerspectivesResult(perspectivesData); | |
| }, 2000); | |
| } | |
| function createPerspectives(dilemmaDescription) { | |
| // This is a simplified perspective generation. In a real application, this would be much more sophisticated and nuanced. | |
| const perspectives = [ | |
| { | |
| framework: "Utilitarianism", | |
| perspective: "Consider the overall impact on happiness and well-being for all parties involved. What action would lead to the greatest good for the greatest number of people?" | |
| }, | |
| { | |
| framework: "Deontology", | |
| perspective: "Examine the inherent rightness or wrongness of the action itself, regardless of its consequences. What moral rules or duties are at play here?" | |
| }, | |
| { | |
| framework: "Virtue Ethics", | |
| perspective: "Reflect on what a person of good character would do in this situation. What virtues (e.g., honesty, compassion, courage) are relevant to this dilemma?" | |
| }, | |
| { | |
| framework: "Care Ethics", | |
| perspective: "Consider the relationships and responsibilities involved. How can we approach this situation with empathy and compassion for all affected parties?" | |
| }, | |
| { | |
| framework: "Social Contract Theory", | |
| perspective: "Think about what principles we would agree to in an ideal, fair society. How does this dilemma relate to our social agreements and expectations?" | |
| } | |
| ]; | |
| return { | |
| dilemma: dilemmaDescription, | |
| perspectives: perspectives | |
| }; | |
| } | |
| function displayPerspectivesResult(perspectivesData) { | |
| let perspectivesHTML = ` | |
| <p class="text-lg font-semibold text-blue-300 mb-4">Dilemma: "${perspectivesData.dilemma}"</p> | |
| <div class="space-y-6"> | |
| `; | |
| perspectivesData.perspectives.forEach(perspective => { | |
| perspectivesHTML += ` | |
| <div class="bg-white bg-opacity-5 rounded-lg p-4"> | |
| <h3 class="text-lg font-semibold text-blue-300 mb-2">${perspective.framework} Perspective:</h3> | |
| <p class="text-purple-200">${perspective.perspective}</p> | |
| </div> | |
| `; | |
| }); | |
| perspectivesHTML += ` | |
| </div> | |
| <p class="mt-6 text-sm text-purple-300">Remember, ethical dilemmas often don't have clear-cut answers. Consider these perspectives as tools for deeper reflection rather than definitive solutions.</p> | |
| `; | |
| perspectivesResult.innerHTML = perspectivesHTML; | |
| } | |
| </script> | |
| </body></html> |