Spaces:

ImsssX
/

hosp1

Running

App Files Files Community

hosp1 / index.html

ImsssX

change html

e035287 verified 2 months ago

raw

history blame contribute delete

11.2 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>EMR System</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
	<style>
	.ai-panel {
	transition: transform 0.3s ease-in-out;
	}
	.ai-panel.collapsed {
	transform: translateX(100%);
	}
	</style>
	</head>
	<body class="bg-gray-100 min-h-screen p-8">
	<!-- Main Content -->
	<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-6" id="mainContent">
	<h1 class="text-3xl font-bold text-gray-800 mb-6">Electronic Medical Record</h1>

	<!-- Patient Info Section -->
	<div class="mb-6">
	<h2 class="text-xl font-semibold text-gray-700 mb-4">Patient Information</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div>
	<label class="block text-gray-700 mb-2">Patient Name</label>
	<input type="text" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400" id="patientName">
	</div>
	<div>
	<label class="block text-gray-700 mb-2">Date of Birth</label>
	<input type="date" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400" id="dob">
	</div>
	</div>
	</div>

	<!-- Diagnosis Section -->
	<div class="mb-6">
	<h2 class="text-xl font-semibold text-gray-700 mb-4">Diagnosis</h2>
	<textarea class="w-full p-2 border rounded h-32 focus:outline-none focus:ring-2 focus:ring-blue-400" id="diagnosis" placeholder="Enter diagnosis details..." oninput="triggerAIAnalysis(this.value)"></textarea>
	</div>

	<!-- Prescription Section -->
	<div class="mb-6">
	<h2 class="text-xl font-semibold text-gray-700 mb-4">Prescription</h2>
	<div id="prescriptionList">
	<div class="prescription-item grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
	<input type="text" placeholder="Medicine" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
	<input type="text" placeholder="Dosage" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
	<input type="text" placeholder="Frequency" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
	<input type="text" placeholder="Duration" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
	</div>
	</div>
	<button onclick="addPrescriptionField()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Add Medicine</button>
	</div>

	<!-- Medical History Section -->
	<div class="mb-6">
	<h2 class="text-xl font-semibold text-gray-700 mb-4">Medical History</h2>
	<textarea class="w-full p-2 border rounded h-32 focus:outline-none focus:ring-2 focus:ring-blue-400" id="medicalHistory" placeholder="Enter medical history..."></textarea>
	</div>

	<!-- Allergies Section -->
	<div class="mb-6">
	<h2 class="text-xl font-semibold text-gray-700 mb-4">Allergies</h2>
	<textarea class="w-full p-2 border rounded h-24 focus:outline-none focus:ring-2 focus:ring-blue-400" id="allergies" placeholder="Enter known allergies..."></textarea>
	</div>

	<!-- Further Tests Section -->
	<div class="mb-6">
	<h2 class="text-xl font-semibold text-gray-700 mb-4">Further Tests Required</h2>
	<textarea class="w-full p-2 border rounded h-24 focus:outline-none focus:ring-2 focus:ring-blue-400" id="tests" placeholder="Enter required tests..."></textarea>
	</div>

	<!-- Submit Button -->
	<div class="flex justify-end">
	<button onclick="saveRecord()" class="bg-green-500 text-white px-6 py-2 rounded hover:bg-green-600">Save Record</button>
	</div>
	</div>

	<!-- AI Assistant Panel -->
	<div class="fixed top-0 right-0 h-full w-80 bg-white shadow-lg ai-panel" id="aiPanel">
	<!-- Toggle Button -->
	<button onclick="toggleAIPanel()" class="absolute -left-12 top-1/2 transform -translate-y-1/2 bg-blue-500 text-white p-2 rounded-l-lg">
	<i class="fas fa-robot"></i>
	</button>

	<!-- AI Panel Content -->
	<div class="h-full flex flex-col">
	<!-- Header -->
	<div class="p-4 bg-blue-500 text-white">
	<h2 class="text-xl font-bold">AI Assistant</h2>
	</div>

	<!-- Recommendations Area -->
	<div class="flex-grow p-4 overflow-y-auto bg-gray-50" id="recommendationsArea">
	<div class="mb-4">
	<h3 class="font-semibold mb-2">Suggestions</h3>
	<div id="aiSuggestions" class="space-y-2">
	<!-- AI suggestions will be added here -->
	</div>
	</div>
	</div>

	<!-- Chat Interface -->
	<div class="border-t">
	<!-- Chat Messages -->
	<div class="h-48 overflow-y-auto p-4 bg-white" id="chatMessages">
	<div class="mb-2">
	<div class="bg-blue-100 p-2 rounded-lg inline-block">
	<p class="text-sm">Hello! I'm your AI assistant. How can I help you today?</p>
	</div>
	</div>
	</div>

	<!-- Chat Input -->
	<div class="p-4 border-t">
	<div class="flex gap-2">
	<input type="text" id="chatInput" placeholder="Ask me anything..."
	class="flex-grow p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400"
	onkeypress="handleChatKeyPress(event)">
	<button onclick="sendMessage()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
	<i class="fas fa-paper-plane"></i>
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script>
	// AI Panel Toggle
	function toggleAIPanel() {
	const panel = document.getElementById('aiPanel');
	panel.classList.toggle('collapsed');
	}

	// Add Prescription Field
	function addPrescriptionField() {
	const prescriptionList = document.getElementById('prescriptionList');
	const newItem = document.createElement('div');
	newItem.className = 'prescription-item grid grid-cols-1 md:grid-cols-4 gap-4 mb-4';
	newItem.innerHTML = `
	<input type="text" placeholder="Medicine" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
	<input type="text" placeholder="Dosage" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
	<input type="text" placeholder="Frequency" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
	<input type="text" placeholder="Duration" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
	`;
	prescriptionList.appendChild(newItem);
	}

	// Chat Functions
	function handleChatKeyPress(event) {
	if (event.key === 'Enter') {
	sendMessage();
	}
	}

	function sendMessage() {
	const input = document.getElementById('chatInput');
	const message = input.value.trim();
	if (message) {
	addMessageToChat('user', message);
	// Simulate AI response
	setTimeout(() => {
	addMessageToChat('ai', 'I understand you\'re asking about "' + message + '". How can I assist you further?');
	}, 1000);
	input.value = '';
	}
	}

	function addMessageToChat(sender, message) {
	const chatMessages = document.getElementById('chatMessages');
	const messageDiv = document.createElement('div');
	messageDiv.className = 'mb-2 ' + (sender === 'user' ? 'text-right' : '');
	messageDiv.innerHTML = `
	<div class="${sender === 'user' ? 'bg-blue-500 text-white' : 'bg-blue-100 text-gray-800'} p-2 rounded-lg inline-block">
	<p class="text-sm">${message}</p>
	</div>
	`;
	chatMessages.appendChild(messageDiv);
	chatMessages.scrollTop = chatMessages.scrollHeight;
	}

	// AI Analysis Function
	function triggerAIAnalysis(text) {
	if (text.length > 10) {
	const suggestions = document.getElementById('aiSuggestions');
	suggestions.innerHTML = `
	<div class="bg-white p-3 rounded shadow-sm">
	<div class="flex items-center gap-2">
	<i class="fas fa-lightbulb text-yellow-500"></i>
	<p class="text-sm">Consider adding more details about symptoms</p>
	</div>
	</div>
	<div class="bg-white p-3 rounded shadow-sm">
	<div class="flex items-center gap-2">
	<i class="fas fa-clipboard-check text-green-500"></i>
	<p class="text-sm">Similar cases suggest running additional tests</p>
	</div>
	</div>
	`;
	}
	}

	// Save Record Function
	function saveRecord() {
	const formData = {
	patientName: document.getElementById('patientName').value,
	dob: document.getElementById('dob').value,
	diagnosis: document.getElementById('diagnosis').value,
	prescriptions: Array.from(document.getElementsByClassName('prescription-item')).map(item => {
	const inputs = item.getElementsByTagName('input');
	return {
	medicine: inputs[0].value,
	dosage: inputs[1].value,
	frequency: inputs[2].value,
	duration: inputs[3].value
	};
	}),
	medicalHistory: document.getElementById('medicalHistory').value,
	allergies: document.getElementById('allergies').value,
	tests: document.getElementById('tests').value
	};

	console.log('Medical Record:', formData);
	alert('Record saved successfully!');
	}
	</script>
	</body>
	</html>