|
<html><head><base href="https://websim.ai/perspectives-ponderer"><title>Perspectives Ponderer: Weigh Pros and Cons with Depth</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<style> |
|
@keyframes tilt { |
|
0%, 100% { transform: rotate(0deg); } |
|
25% { transform: rotate(-5deg); } |
|
75% { transform: rotate(5deg); } |
|
} |
|
.scale-tilt { |
|
animation: tilt 5s infinite ease-in-out; |
|
transform-origin: center; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gradient-to-br from-teal-500 to-blue-600 text-gray-100 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-white">Perspectives Ponderer ⚖️</h1> |
|
<p class="mt-2 text-center text-teal-100">Weigh Pros and Cons with Depth</p> |
|
</div> |
|
</header> |
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
<div class="bg-white rounded-lg shadow-lg p-6 mb-8"> |
|
<h2 class="text-2xl font-semibold mb-4 text-teal-800">Ponder a Topic</h2> |
|
<form id="ponderer-form" method="GET" action="https://websim.ai/perspectives-ponderer" class="space-y-4"> |
|
<div> |
|
<label for="topic-input" class="block text-sm font-medium text-gray-700">Your Topic:</label> |
|
<input type="text" id="topic-input" name="topic" class="mt-1 block w-full px-3 py-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-500 text-gray-900" placeholder="Enter a topic to analyze..."> |
|
</div> |
|
<div> |
|
<label for="perspective-depth" class="block text-sm font-medium text-gray-700">Analysis Depth:</label> |
|
<select id="perspective-depth" name="depth" class="mt-1 block w-full px-3 py-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-500 text-gray-900"> |
|
<option value="brief">Brief Overview</option> |
|
<option value="moderate">Moderate Analysis</option> |
|
<option value="in-depth">In-Depth Exploration</option> |
|
</select> |
|
</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-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"> |
|
Ponder Perspectives 🤔 |
|
</button> |
|
</div> |
|
</form> |
|
</div> |
|
|
|
<div id="result-container" class="bg-white rounded-lg shadow-lg p-6 hidden"> |
|
<h2 class="text-2xl font-semibold mb-4 text-teal-800">Perspectives Analysis</h2> |
|
<div id="analysis-result" class="space-y-4"> |
|
|
|
</div> |
|
</div> |
|
|
|
<div class="mt-8 bg-white rounded-lg shadow-lg p-6"> |
|
<h2 class="text-2xl font-semibold mb-4 text-teal-800">Critical Thinking Tips</h2> |
|
<ul class="list-disc list-inside space-y-2 text-gray-700"> |
|
<li>Consider multiple viewpoints</li> |
|
<li>Look for evidence and data to support claims</li> |
|
<li>Identify potential biases</li> |
|
<li>Think about long-term consequences</li> |
|
<li>Question assumptions and challenge your own beliefs</li> |
|
</ul> |
|
</div> |
|
</main> |
|
|
|
<script> |
|
const pondererForm = document.getElementById('ponderer-form'); |
|
const resultContainer = document.getElementById('result-container'); |
|
const analysisResult = document.getElementById('analysis-result'); |
|
|
|
pondererForm.addEventListener('submit', function(e) { |
|
e.preventDefault(); |
|
const topic = document.getElementById('topic-input').value.trim(); |
|
const depth = document.getElementById('perspective-depth').value; |
|
|
|
if (!topic) { |
|
alert('Please enter a topic to analyze.'); |
|
return; |
|
} |
|
|
|
analyzeTopicPerspectives(topic, depth); |
|
}); |
|
|
|
function analyzeTopicPerspectives(topic, depth) { |
|
// Show loading state |
|
resultContainer.classList.remove('hidden'); |
|
analysisResult.innerHTML = '<div class="flex justify-center"><svg class="animate-spin h-10 w-10 text-teal-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></div>'; |
|
|
|
// Simulate API call with setTimeout |
|
setTimeout(() => { |
|
const analysis = generateAnalysis(topic, depth); |
|
displayAnalysisResult(topic, analysis); |
|
}, 2000); |
|
} |
|
|
|
function generateAnalysis(topic, depth) { |
|
// This is a simplified analysis generator. In a real application, this would use more sophisticated NLP and reasoning models. |
|
const perspectives = { |
|
pros: [ |
|
"Potential for positive impact", |
|
"Economic benefits", |
|
"Technological advancement", |
|
"Improved quality of life", |
|
"Enhanced social connections" |
|
], |
|
cons: [ |
|
"Potential negative consequences", |
|
"Ethical concerns", |
|
"Environmental impact", |
|
"Social inequalities", |
|
"Privacy and security risks" |
|
] |
|
}; |
|
|
|
const depthMultiplier = { brief: 2, moderate: 3, "in-depth": 5 }; |
|
const numPoints = depthMultiplier[depth]; |
|
|
|
return { |
|
pros: perspectives.pros.slice(0, numPoints).map(pro => ({ point: pro, details: generateDetails(pro, topic) })), |
|
cons: perspectives.cons.slice(0, numPoints).map(con => ({ point: con, details: generateDetails(con, topic) })) |
|
}; |
|
} |
|
|
|
function generateDetails(point, topic) { |
|
// This function would ideally use more advanced language models to generate contextual details |
|
return `This aspect of ${topic} relates to ${point.toLowerCase()}. Further research and consideration of specific scenarios would be beneficial for a comprehensive understanding.`; |
|
} |
|
|
|
function displayAnalysisResult(topic, analysis) { |
|
let analysisHTML = ` |
|
<h3 class="text-xl font-semibold text-teal-700 mb-4">Topic: ${topic}</h3> |
|
<div class="flex flex-col md:flex-row gap-6"> |
|
<div class="flex-1"> |
|
<h4 class="text-lg font-semibold text-green-600 mb-2">Pros:</h4> |
|
<ul class="list-disc list-inside space-y-4"> |
|
${analysis.pros.map(pro => ` |
|
<li> |
|
<span class="font-medium">${pro.point}</span> |
|
<p class="ml-6 text-sm text-gray-600">${pro.details}</p> |
|
</li> |
|
`).join('')} |
|
</ul> |
|
</div> |
|
<div class="flex-1"> |
|
<h4 class="text-lg font-semibold text-red-600 mb-2">Cons:</h4> |
|
<ul class="list-disc list-inside space-y-4"> |
|
${analysis.cons.map(con => ` |
|
<li> |
|
<span class="font-medium">${con.point}</span> |
|
<p class="ml-6 text-sm text-gray-600">${con.details}</p> |
|
</li> |
|
`).join('')} |
|
</ul> |
|
</div> |
|
</div> |
|
<div class="mt-8 text-center"> |
|
<svg class="w-24 h-24 mx-auto scale-tilt" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#0D9488" stroke-width="2"/> |
|
<path d="M7 12H17" stroke="#0D9488" stroke-width="2" stroke-linecap="round"/> |
|
<path d="M12 17V7" stroke="#0D9488" stroke-width="2" stroke-linecap="round"/> |
|
</svg> |
|
<p class="mt-4 text-gray-700">Remember, this analysis is a starting point. Critical thinking and further research are encouraged for a comprehensive understanding.</p> |
|
</div> |
|
`; |
|
|
|
analysisResult.innerHTML = analysisHTML; |
|
} |
|
</script> |
|
</body></html> |
