|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Neurodivergent Translator</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"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
50: '#f0f9ff', |
|
|
100: '#e0f2fe', |
|
|
200: '#bae6fd', |
|
|
300: '#7dd3fc', |
|
|
400: '#38bdf8', |
|
|
500: '#0ea5e9', |
|
|
600: '#0284c7', |
|
|
700: '#0369a1', |
|
|
800: '#075985', |
|
|
900: '#0c4a6e', |
|
|
}, |
|
|
secondary: { |
|
|
50: '#f5f3ff', |
|
|
100: '#ede9fe', |
|
|
200: '#ddd6fe', |
|
|
300: '#c4b5fd', |
|
|
400: '#a78bfa', |
|
|
500: '#8b5cf6', |
|
|
600: '#7c3aed', |
|
|
700: '#6d28d9', |
|
|
800: '#5b21b6', |
|
|
900: '#4c1d95', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #f8fafc; |
|
|
} |
|
|
|
|
|
.input-box { |
|
|
transition: all 0.2s ease; |
|
|
min-height: 120px; |
|
|
} |
|
|
|
|
|
.input-box:focus { |
|
|
border-color: #7dd3fc; |
|
|
box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.3); |
|
|
} |
|
|
|
|
|
.output-bubble { |
|
|
position: relative; |
|
|
background-color: #f0f9ff; |
|
|
border-radius: 18px; |
|
|
} |
|
|
|
|
|
.output-bubble:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: -10px; |
|
|
width: 0; |
|
|
height: 0; |
|
|
border: 10px solid transparent; |
|
|
border-right-color: #f0f9ff; |
|
|
border-left: 0; |
|
|
margin-left: 20px; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
transform: translateY(-1px); |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
|
} |
|
|
|
|
|
.btn-primary:active { |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.feedback-textarea { |
|
|
min-height: 80px; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.feedback-textarea:focus { |
|
|
border-color: #c4b5fd; |
|
|
box-shadow: 0 0 0 3px rgba(196, 181, 253, 0.3); |
|
|
} |
|
|
|
|
|
@media (max-width: 640px) { |
|
|
.container-padding { |
|
|
padding-left: 1rem; |
|
|
padding-right: 1rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen bg-gray-50"> |
|
|
<div class="max-w-2xl mx-auto container-padding py-8 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-8"> |
|
|
<div class="flex items-center justify-center mb-4"> |
|
|
<div class="bg-primary-100 p-3 rounded-full"> |
|
|
<i class="fas fa-brain text-primary-600 text-2xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h1 class="text-3xl font-bold text-gray-800 mb-2">Neurodivergent Translator</h1> |
|
|
<p class="text-gray-600 max-w-md mx-auto">Bridge communication gaps with tailored message transformations</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6 mb-6"> |
|
|
<div class="mb-6"> |
|
|
<label for="original-message" class="block text-sm font-medium text-gray-700 mb-2"> |
|
|
Your original message |
|
|
</label> |
|
|
<textarea |
|
|
id="original-message" |
|
|
class="input-box w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-200" |
|
|
placeholder="Type or paste your message here..." |
|
|
rows="4"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="transformation-type" class="block text-sm font-medium text-gray-700 mb-2"> |
|
|
Transformation Type |
|
|
</label> |
|
|
<select |
|
|
id="transformation-type" |
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-200"> |
|
|
<option value="clarify">Clarify my intent</option> |
|
|
<option value="decode">Decode this message</option> |
|
|
<option value="professional">Make it sound professional</option> |
|
|
<option value="soften">Soften tone, keep meaning</option> |
|
|
<option value="meltdown">I'm melting down, fix it</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<button |
|
|
id="translate-btn" |
|
|
class="btn-primary w-full bg-primary-500 hover:bg-primary-600 text-white font-medium py-3 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-200 focus:ring-offset-2"> |
|
|
<i class="fas fa-language mr-2"></i> Translate |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="output-section" class="hidden bg-white rounded-xl shadow-sm p-6 mb-6"> |
|
|
<h2 class="text-lg font-medium text-gray-800 mb-4">Translated Message</h2> |
|
|
<div class="output-bubble p-4 mb-6"> |
|
|
<p id="translated-output" class="text-gray-700"></p> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4 border-t border-gray-100"> |
|
|
<h3 class="text-sm font-medium text-gray-700 mb-3">How helpful was this?</h3> |
|
|
<textarea |
|
|
id="feedback-text" |
|
|
class="feedback-textarea w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary-200" |
|
|
placeholder="Your feedback helps us improve..."></textarea> |
|
|
<button |
|
|
id="feedback-btn" |
|
|
class="mt-3 w-full bg-secondary-500 hover:bg-secondary-600 text-white font-medium py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary-200 focus:ring-offset-2"> |
|
|
Submit Feedback |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const translateBtn = document.getElementById('translate-btn'); |
|
|
const originalMessage = document.getElementById('original-message'); |
|
|
const transformationType = document.getElementById('transformation-type'); |
|
|
const outputSection = document.getElementById('output-section'); |
|
|
const translatedOutput = document.getElementById('translated-output'); |
|
|
const feedbackBtn = document.getElementById('feedback-btn'); |
|
|
const feedbackText = document.getElementById('feedback-text'); |
|
|
|
|
|
|
|
|
function mockTranslate(message, type) { |
|
|
|
|
|
return new Promise(resolve => { |
|
|
setTimeout(() => { |
|
|
const transformations = { |
|
|
'clarify': `Clarified version: ${message} (I mean this sincerely and want to communicate my thoughts clearly)`, |
|
|
'decode': `Decoded meaning: This likely means "${message}" but might be confusing due to neurodivergent communication style`, |
|
|
'professional': `Professional version: Dear colleague, ${message}. Best regards.`, |
|
|
'soften': `Gentler phrasing: I was wondering if perhaps ${message.toLowerCase()}? No pressure though!`, |
|
|
'meltdown': `Emergency support message: I'm struggling right now. I need help with: ${message}. Can we talk about this when I'm calmer?` |
|
|
}; |
|
|
resolve(transformations[type] || message); |
|
|
}, 800); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
translateBtn.addEventListener('click', async function() { |
|
|
const message = originalMessage.value.trim(); |
|
|
const type = transformationType.value; |
|
|
|
|
|
if (!message) { |
|
|
alert('Please enter a message to translate'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
translateBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Translating...'; |
|
|
translateBtn.disabled = true; |
|
|
|
|
|
|
|
|
try { |
|
|
const result = await mockTranslate(message, type); |
|
|
translatedOutput.textContent = result; |
|
|
outputSection.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
outputSection.scrollIntoView({ behavior: 'smooth' }); |
|
|
} catch (error) { |
|
|
console.error('Translation error:', error); |
|
|
alert('Translation failed. Please try again.'); |
|
|
} finally { |
|
|
|
|
|
translateBtn.innerHTML = '<i class="fas fa-language mr-2"></i> Translate'; |
|
|
translateBtn.disabled = false; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
feedbackBtn.addEventListener('click', function() { |
|
|
const feedback = feedbackText.value.trim(); |
|
|
|
|
|
if (!feedback) { |
|
|
alert('Please provide some feedback'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
feedbackBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Submitting...'; |
|
|
feedbackBtn.disabled = true; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
alert('Thank you for your feedback! We appreciate your input.'); |
|
|
feedbackText.value = ''; |
|
|
feedbackBtn.innerHTML = 'Submit Feedback'; |
|
|
feedbackBtn.disabled = false; |
|
|
}, 800); |
|
|
}); |
|
|
|
|
|
|
|
|
function autoExpand(textarea) { |
|
|
textarea.style.height = 'auto'; |
|
|
textarea.style.height = (textarea.scrollHeight) + 'px'; |
|
|
} |
|
|
|
|
|
originalMessage.addEventListener('input', function() { |
|
|
autoExpand(this); |
|
|
}); |
|
|
|
|
|
feedbackText.addEventListener('input', function() { |
|
|
autoExpand(this); |
|
|
}); |
|
|
}); |
|
|
</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=nomadicsynth/neurodivergent-translator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
