|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>江阴市人民医院 - 24小时无人超声自助诊疗室</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> |
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
} |
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); |
|
|
} |
|
|
.scan-area { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.scan-area::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 3px; |
|
|
background: linear-gradient(90deg, transparent, #3b82f6, transparent); |
|
|
animation: scan 3s linear infinite; |
|
|
} |
|
|
@keyframes scan { |
|
|
0% { top: 0; } |
|
|
100% { top: 100%; } |
|
|
} |
|
|
.modal { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.modal-enter { |
|
|
opacity: 0; |
|
|
transform: scale(0.9); |
|
|
} |
|
|
.modal-enter-active { |
|
|
opacity: 1; |
|
|
transform: scale(1); |
|
|
} |
|
|
.modal-exit { |
|
|
opacity: 1; |
|
|
transform: scale(1); |
|
|
} |
|
|
.modal-exit-active { |
|
|
opacity: 0; |
|
|
transform: scale(0.9); |
|
|
} |
|
|
#previewImage { |
|
|
max-height: 300px; |
|
|
max-width: 100%; |
|
|
} |
|
|
#videoElement { |
|
|
width: 100%; |
|
|
height: auto; |
|
|
background-color: #000; |
|
|
} |
|
|
#canvas { |
|
|
display: none; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
|
|
|
<header class="gradient-bg text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<i class="fas fa-hospital text-3xl"></i> |
|
|
<div> |
|
|
<h1 class="text-2xl font-bold">江阴市人民医院</h1> |
|
|
<p class="text-sm opacity-80">24小时无人超声自助诊疗室</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-6"> |
|
|
<a href="#services" class="hover:text-blue-200 transition">服务项目</a> |
|
|
<a href="#process" class="hover:text-blue-200 transition">就诊流程</a> |
|
|
<a href="#contact" class="hover:text-blue-200 transition">联系我们</a> |
|
|
</div> |
|
|
<button class="md:hidden text-2xl" id="mobile-menu-button"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="md:hidden bg-white shadow-lg hidden" id="mobile-menu"> |
|
|
<div class="container mx-auto px-4 py-2 flex flex-col space-y-3"> |
|
|
<a href="#services" class="py-2 border-b border-gray-100">服务项目</a> |
|
|
<a href="#process" class="py-2 border-b border-gray-100">就诊流程</a> |
|
|
<a href="#contact" class="py-2">联系我们</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-16"> |
|
|
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h2 class="text-4xl font-bold mb-4">智能超声 自助诊疗</h2> |
|
|
<p class="text-xl mb-6">24小时全天候服务，AI辅助诊断，专业医师远程指导</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-blue-50 transition" id="start-btn"> |
|
|
开始自助诊疗 <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
<button class="border border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition" id="video-btn"> |
|
|
观看操作视频 <i class="fas fa-play-circle ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative w-64 h-64 bg-white bg-opacity-20 rounded-lg flex items-center justify-center scan-area"> |
|
|
<div class="text-center p-4"> |
|
|
<i class="fas fa-qrcode text-6xl mb-4"></i> |
|
|
<p class="text-sm">请扫描二维码上传检查资料</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">服务项目</h2> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition"> |
|
|
<div class="text-blue-600 text-4xl mb-4"> |
|
|
<i class="fas fa-heartbeat"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">心脏超声检查</h3> |
|
|
<p class="text-gray-600">包括心脏结构、功能评估，瓣膜活动情况，心包积液等检查项目</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition"> |
|
|
<div class="text-blue-600 text-4xl mb-4"> |
|
|
<i class="fas fa-baby"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">腹部超声检查</h3> |
|
|
<p class="text-gray-600">肝、胆、胰、脾、肾等腹部器官的形态学检查与功能评估</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition"> |
|
|
<div class="text-blue-600 text-4xl mb-4"> |
|
|
<i class="fas fa-venus"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">妇科超声检查</h3> |
|
|
<p class="text-gray-600">子宫、附件等妇科器官的常规检查与疾病筛查</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition"> |
|
|
<div class="text-blue-600 text-4xl mb-4"> |
|
|
<i class="fas fa-procedures"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">甲状腺超声检查</h3> |
|
|
<p class="text-gray-600">甲状腺形态、大小、血流及结节等病变的检查评估</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition"> |
|
|
<div class="text-blue-600 text-4xl mb-4"> |
|
|
<i class="fas fa-vial"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">血管超声检查</h3> |
|
|
<p class="text-gray-600">颈部血管、四肢血管等血管系统的结构与血流动力学检查</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition"> |
|
|
<div class="text-blue-600 text-4xl mb-4"> |
|
|
<i class="fas fa-user-md"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">远程专家会诊</h3> |
|
|
<p class="text-gray-600">疑难病例可申请三甲医院专家远程会诊服务</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="process" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">就诊流程</h2> |
|
|
<div class="relative"> |
|
|
|
|
|
<div class="hidden md:block absolute left-1/2 h-full w-1 bg-blue-200 transform -translate-x-1/2"></div> |
|
|
|
|
|
|
|
|
<div class="space-y-8 md:space-y-0"> |
|
|
|
|
|
<div class="relative md:flex justify-center mb-8"> |
|
|
<div class="md:w-5/12 md:pr-8 md:text-right"> |
|
|
<div class="p-6 bg-white rounded-lg shadow-sm"> |
|
|
<h3 class="text-xl font-semibold text-blue-600 mb-2">1. 扫码预约</h3> |
|
|
<p class="text-gray-600">扫描二维码上传个人信息和病史资料，完成预约登记</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center justify-center md:w-2/12"> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl font-bold"> |
|
|
1 |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-5/12"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative md:flex justify-center mb-8"> |
|
|
<div class="md:w-5/12"></div> |
|
|
<div class="hidden md:flex items-center justify-center md:w-2/12"> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl font-bold"> |
|
|
2 |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-5/12 md:pl-8"> |
|
|
<div class="p-6 bg-white rounded-lg shadow-sm"> |
|
|
<h3 class="text-xl font-semibold text-blue-600 mb-2">2. 自助检查</h3> |
|
|
<p class="text-gray-600">按照语音和屏幕提示完成超声检查操作</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative md:flex justify-center mb-8"> |
|
|
<div class="md:w-5/12 md:pr-8 md:text-right"> |
|
|
<div class="p-6 bg-white rounded-lg shadow-sm"> |
|
|
<h3 class="text-xl font-semibold text-blue-600 mb-2">3. AI初步诊断</h3> |
|
|
<p class="text-gray-600">系统自动生成初步诊断报告，供医师参考</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center justify-center md:w-2/12"> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl font-bold"> |
|
|
3 |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-5/12"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative md:flex justify-center"> |
|
|
<div class="md:w-5/12"></div> |
|
|
<div class="hidden md:flex items-center justify-center md:w-2/12"> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl font-bold"> |
|
|
4 |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-5/12 md:pl-8"> |
|
|
<div class="p-6 bg-white rounded-lg shadow-sm"> |
|
|
<h3 class="text-xl font-semibold text-blue-600 mb-2">4. 获取报告</h3> |
|
|
<p class="text-gray-600">医师审核后生成正式报告，可打印或电子版发送</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">技术优势</h2> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
<div class="text-center p-6"> |
|
|
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-robot text-blue-600 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">AI辅助诊断</h3> |
|
|
<p class="text-gray-600">基于深度学习的智能分析系统，辅助医师提高诊断准确性</p> |
|
|
</div> |
|
|
<div class="text-center p-6"> |
|
|
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-cloud text-blue-600 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">云端存储</h3> |
|
|
<p class="text-gray-600">所有检查数据安全存储在云端，随时可查</p> |
|
|
</div> |
|
|
<div class="text-center p-6"> |
|
|
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-shield-alt text-blue-600 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">隐私保护</h3> |
|
|
<p class="text-gray-600">严格遵循医疗数据隐私保护规范，确保信息安全</p> |
|
|
</div> |
|
|
<div class="text-center p-6"> |
|
|
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-headset text-blue-600 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">远程指导</h3> |
|
|
<p class="text-gray-600">实时视频连线专业医师，获取操作指导和诊断建议</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">联系我们</h2> |
|
|
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-sm overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/2 p-8"> |
|
|
<h3 class="text-xl font-semibold mb-4">江阴市人民医院超声科心超室</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-map-marker-alt text-blue-600 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-medium">地址</h4> |
|
|
<p class="text-gray-600">江苏省江阴市人民医院超声科心超室</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-user-md text-blue-600 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-medium">联系人</h4> |
|
|
<p class="text-gray-600">高春恒 主任医师</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-phone-alt text-blue-600 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-medium">电话</h4> |
|
|
<p class="text-gray-600">18921233382</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-clock text-blue-600 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-medium">服务时间</h4> |
|
|
<p class="text-gray-600">24小时全天候服务</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 bg-gray-100 p-8 flex flex-col items-center justify-center"> |
|
|
<div class="text-center mb-6"> |
|
|
<i class="fas fa-qrcode text-6xl text-blue-600 mb-4"></i> |
|
|
<p class="text-gray-600">扫描二维码上传检查资料</p> |
|
|
</div> |
|
|
<div class="w-full max-w-xs"> |
|
|
<form id="contact-form"> |
|
|
<div class="mb-4"> |
|
|
<input type="text" placeholder="您的姓名" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" id="contact-name"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<input type="email" placeholder="电子邮箱" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" id="contact-email"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<textarea placeholder="留言内容" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" id="contact-message"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-blue-700 transition"> |
|
|
发送留言 <i class="fas fa-paper-plane ml-2"></i> |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="md:flex justify-between items-center"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-hospital text-2xl"></i> |
|
|
<span class="text-xl font-semibold">江阴市人民医院</span> |
|
|
</div> |
|
|
<p class="text-gray-400 mt-2">24小时无人超声自助诊疗室</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-8"> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">快速链接</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#services" class="text-gray-400 hover:text-white transition">服务项目</a></li> |
|
|
<li><a href="#process" class="text-gray-400 hover:text-white transition">就诊流程</a></li> |
|
|
<li><a href="#contact" class="text-gray-400 hover:text-white transition">联系我们</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">关于我们</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">医院简介</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">医师团队</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">设备介绍</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="col-span-2 md:col-span-1"> |
|
|
<h4 class="text-lg font-semibold mb-4">关注我们</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-600 transition"> |
|
|
<i class="fab fa-weixin"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-red-600 transition"> |
|
|
<i class="fab fa-weibo"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-400 transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> |
|
|
<p>© 2023 江阴市人民医院. 版权所有.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="login-modal"> |
|
|
<div class="bg-white rounded-lg w-full max-w-md overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-2xl font-bold text-gray-800">用户登录</h3> |
|
|
<button id="close-modal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<form id="login-form"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="username">用户名</label> |
|
|
<input type="text" id="username" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2" for="password">密码</label> |
|
|
<input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-blue-700 transition mb-4"> |
|
|
登录 <i class="fas fa-sign-in-alt ml-2"></i> |
|
|
</button> |
|
|
<div class="text-center"> |
|
|
<p class="text-gray-600">没有账号? <a href="#" class="text-blue-600 hover:underline" id="register-link">立即注册</a></p> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
<div class="bg-gray-100 px-6 py-4 flex justify-center"> |
|
|
<div class="text-center"> |
|
|
<p class="text-gray-600 mb-2">或使用以下方式登录</p> |
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button class="w-10 h-10 bg-red-500 text-white rounded-full flex items-center justify-center"> |
|
|
<i class="fab fa-google"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 bg-blue-500 text-white rounded-full flex items-center justify-center"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 bg-black text-white rounded-full flex items-center justify-center"> |
|
|
<i class="fab fa-apple"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="register-modal"> |
|
|
<div class="bg-white rounded-lg w-full max-w-md overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-2xl font-bold text-gray-800">用户注册</h3> |
|
|
<button id="close-register-modal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<form id="register-form"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="reg-name">姓名</label> |
|
|
<input type="text" id="reg-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="reg-phone">手机号码</label> |
|
|
<input type="tel" id="reg-phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="reg-id">身份证号</label> |
|
|
<input type="text" id="reg-id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="reg-username">用户名</label> |
|
|
<input type="text" id="reg-username" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2" for="reg-password">密码</label> |
|
|
<input type="password" id="reg-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-blue-700 transition mb-4"> |
|
|
注册 <i class="fas fa-user-plus ml-2"></i> |
|
|
</button> |
|
|
<div class="text-center"> |
|
|
<p class="text-gray-600">已有账号? <a href="#" class="text-blue-600 hover:underline" id="login-link">立即登录</a></p> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="video-modal"> |
|
|
<div class="bg-white rounded-lg w-full max-w-4xl overflow-hidden"> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-gray-800">操作视频指南</h3> |
|
|
<button id="close-video-modal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="aspect-w-16 aspect-h-9"> |
|
|
<video controls class="w-full"> |
|
|
<source src="https://example.com/video.mp4" type="video/mp4"> |
|
|
您的浏览器不支持视频播放。 |
|
|
</video> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<h4 class="font-semibold mb-2">操作步骤说明:</h4> |
|
|
<ol class="list-decimal pl-5 space-y-2"> |
|
|
<li>扫描二维码或输入患者ID登录系统</li> |
|
|
<li>选择需要进行的超声检查项目</li> |
|
|
<li>按照屏幕提示正确放置超声探头</li> |
|
|
<li>系统将自动采集图像并进行分析</li> |
|
|
<li>查看AI生成的初步诊断报告</li> |
|
|
<li>如有需要可申请远程专家会诊</li> |
|
|
</ol> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="scan-modal"> |
|
|
<div class="bg-white rounded-lg w-full max-w-md overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-2xl font-bold text-gray-800">扫描上传</h3> |
|
|
<button id="close-scan-modal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="text-center mb-6"> |
|
|
<div class="relative w-64 h-64 mx-auto bg-gray-100 rounded-lg flex items-center justify-center scan-area"> |
|
|
<div id="camera-view" class="w-full h-full flex items-center justify-center"> |
|
|
<video id="videoElement" autoplay playsinline></video> |
|
|
<canvas id="canvas"></canvas> |
|
|
</div> |
|
|
<div id="scan-instructions" class="absolute inset-0 flex flex-col items-center justify-center p-4 text-center"> |
|
|
<i class="fas fa-qrcode text-6xl mb-4 text-blue-600"></i> |
|
|
<p class="text-gray-700">请将二维码置于框内扫描</p> |
|
|
<p class="text-sm text-gray-500 mt-2">或选择图片上传</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex flex-col space-y-4"> |
|
|
<button id="start-scan-btn" class="w-full bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-blue-700 transition"> |
|
|
开始扫描 <i class="fas fa-camera ml-2"></i> |
|
|
</button> |
|
|
<button id="upload-btn" class="w-full border border-blue-600 text-blue-600 px-6 py-2 rounded-lg font-semibold hover:bg-blue-50 transition"> |
|
|
上传图片 <i class="fas fa-upload ml-2"></i> |
|
|
</button> |
|
|
<input type="file" id="file-input" accept="image/*" class="hidden"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="diagnosis-modal"> |
|
|
<div class="bg-white rounded-lg w-full max-w-4xl overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-2xl font-bold text-gray-800">超声诊断报告</h3> |
|
|
<button id="close-diagnosis-modal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-2">患者信息</h4> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">姓名</p> |
|
|
<p class="font-medium" id="patient-name">张三</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">性别</p> |
|
|
<p class="font-medium" id="patient-gender">男</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">年龄</p> |
|
|
<p class="font-medium" id="patient-age">45岁</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">检查日期</p> |
|
|
<p class="font-medium" id="exam-date">2023-06-15</p> |
|
|
</div> |
|
|
<div class="col-span-2"> |
|
|
<p class="text-sm text-gray-500">检查项目</p> |
|
|
<p class="font-medium" id="exam-type">心脏超声检查</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h4 class="font-semibold mb-2 mt-4">超声图像</h4> |
|
|
<div class="bg-gray-50 p-4 rounded-lg flex justify-center"> |
|
|
<img id="previewImage" src="https://via.placeholder.com/300x200?text=超声图像" alt="超声图像" class="rounded"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-2">检查结果</h4> |
|
|
<div class="bg-gray-50 p-4 rounded-lg h-64 overflow-y-auto"> |
|
|
<div id="diagnosis-result"> |
|
|
<p><strong>超声所见:</strong></p> |
|
|
<p>1. 各房室大小正常范围</p> |
|
|
<p>2. 室间隔与左室后壁厚度正常，运动协调</p> |
|
|
<p>3. 各瓣膜形态、结构及启闭未见明显异常</p> |
|
|
<p>4. 主动脉及肺动脉内径正常</p> |
|
|
<p>5. 心包腔内未见明显液性暗区</p> |
|
|
<p>6. CDFI: 各瓣膜区未见明显异常血流信号</p> |
|
|
<br> |
|
|
<p><strong>超声提示:</strong></p> |
|
|
<p>心脏超声检查未见明显异常</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h4 class="font-semibold mb-2 mt-4">AI分析</h4> |
|
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-robot text-blue-600 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<p class="text-sm text-gray-700">AI系统分析认为本次检查结果在正常范围内，可信度评分: <span class="font-bold text-blue-600">92%</span>。建议定期复查。</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3"> |
|
|
<button class="flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-blue-700 transition"> |
|
|
<i class="fas fa-print mr-2"></i> 打印报告 |
|
|
</button> |
|
|
<button class="flex-1 border border-blue-600 text-blue-600 px-4 py-2 rounded-lg font-semibold hover:bg-blue-50 transition"> |
|
|
<i class="fas fa-share-alt mr-2"></i> 分享报告 |
|
|
</button> |
|
|
<button class="flex-1 bg-green-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-green-700 transition" id="consult-btn"> |
|
|
<i class="fas fa-user-md mr-2"></i> 专家会诊 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="consultation-modal"> |
|
|
<div class="bg-white rounded-lg w-full max-w-4xl overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-2xl font-bold text-gray-800">远程专家会诊</h3> |
|
|
<button id="close-consultation-modal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-2">会诊专家</h4> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center p-4 border border-gray-200 rounded-lg hover:border-blue-500 transition cursor-pointer"> |
|
|
<img src="https://via.placeholder.com/60x60?text=专家" alt="专家" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<p class="font-semibold">高春恒 主任医师</p> |
|
|
<p class="text-sm text-gray-600">江阴市人民医院超声科</p> |
|
|
<p class="text-xs text-blue-600">心血管超声诊断专家</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center p-4 border border-gray-200 rounded-lg hover:border-blue-500 transition cursor-pointer"> |
|
|
<img src="https://via.placeholder.com/60x60?text=专家" alt="专家" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<p class="font-semibold">李华 副主任医师</p> |
|
|
<p class="text-sm text-gray-600">上海中山医院超声科</p> |
|
|
<p class="text-xs text-blue-600">腹部超声诊断专家</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center p-4 border border-gray-200 rounded-lg hover:border-blue-500 transition cursor-pointer"> |
|
|
<img src="https://via.placeholder.com/60x60?text=专家" alt="专家" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<p class="font-semibold">王芳 主任医师</p> |
|
|
<p class="text-sm text-gray-600">北京协和医院超声科</p> |
|
|
<p class="text-xs text-blue-600">妇科超声诊断专家</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-2">会诊信息</h4> |
|
|
<div class="bg-gray-50 p-4 rounded-lg mb-4"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">会诊类型</label> |
|
|
<select class="w-full px-4 py-2 border border-gray-300 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> |
|
|
<textarea rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请详细描述您的症状和需求..."></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">上传补充资料</label> |
|
|
<div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center"> |
|
|
<i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> |
|
|
<p class="text-sm text-gray-500">拖放文件到此处或点击选择</p> |
|
|
<input type="file" class="hidden"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition"> |
|
|
提交会诊申请 <i class="fas fa-paper-plane ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-4 right-4 z-40"> |
|
|
<div class="bg-red-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center pulse-animation"> |
|
|
<i class="fas fa-phone-alt mr-2"></i> |
|
|
<span>紧急联系: 18921233382</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const backend = { |
|
|
users: [ |
|
|
{ username: 'user1', password: 'pass1', name: '张三', gender: '男', age: 45 }, |
|
|
{ username: 'user2', password: 'pass2', name: '李四', gender: '女', age: 32 } |
|
|
], |
|
|
exams: [ |
|
|
{ |
|
|
id: 1, |
|
|
patientId: 'user1', |
|
|
type: '心脏超声检查', |
|
|
date: '2023-06-15', |
|
|
image: 'https://via.placeholder.com/300x200?text=心脏超声', |
|
|
result: ` |
|
|
<p><strong>超声所见:</strong></p> |
|
|
<p>1. 各房室大小正常范围</p> |
|
|
<p>2. 室间隔与左室后壁厚度正常，运动协调</p> |
|
|
<p>3. 各瓣膜形态、结构及启闭未见明显异常</p> |
|
|
<p>4. 主动脉及肺动脉内径正常</p> |
|
|
<p>5. 心包腔内未见明显液性暗区</p> |
|
|
<p>6. CDFI: 各瓣膜区未见明显异常血流信号</p> |
|
|
<br> |
|
|
<p><strong>超声提示:</strong></p> |
|
|
<p>心脏超声检查未见明显异常</p> |
|
|
`, |
|
|
aiScore: 92 |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
patientId: 'user2', |
|
|
type: '腹部超声检查', |
|
|
date: '2023-06-10', |
|
|
image: 'https://via.placeholder.com/300x200?text=腹部超声', |
|
|
result: ` |
|
|
<p><strong>超声所见:</strong></p> |
|
|
<p>1. 肝脏大小形态正常，包膜光滑，实质回声均匀</p> |
|
|
<p>2. 胆囊大小正常，壁不厚，内未见明显异常回声</p> |
|
|
<p>3. 胰腺形态正常，主胰管无扩张</p> |
|
|
<p>4. 脾脏大小正常，实质回声均匀</p> |
|
|
<p>5. 双肾大小形态正常，集合系统无分离</p> |
|
|
<br> |
|
|
<p><strong>超声提示:</strong></p> |
|
|
<p>腹部超声检查未见明显异常</p> |
|
|
`, |
|
|
aiScore: 88 |
|
|
} |
|
|
] |
|
|
}; |
|
|
|
|
|
|
|
|
let currentUser = null; |
|
|
|
|
|
|
|
|
const elements = { |
|
|
mobileMenuButton: document.getElementById('mobile-menu-button'), |
|
|
mobileMenu: document.getElementById('mobile-menu'), |
|
|
startBtn: document.getElementById('start-btn'), |
|
|
videoBtn: document.getElementById('video-btn'), |
|
|
loginModal: document.getElementById('login-modal'), |
|
|
closeModal: document.getElementById('close-modal'), |
|
|
loginForm: document.getElementById('login-form'), |
|
|
registerModal: document.getElementById('register-modal'), |
|
|
closeRegisterModal: document.getElementById('close-register-modal'), |
|
|
registerForm: document.getElementById('register-form'), |
|
|
registerLink: document.getElementById('register-link'), |
|
|
loginLink: document.getElementById('login-link'), |
|
|
videoModal: document.getElementById('video-modal'), |
|
|
closeVideoModal: document.getElementById('close-video-modal'), |
|
|
scanModal: document.getElementById('scan-modal'), |
|
|
closeScanModal: document.getElementById('close-scan-modal'), |
|
|
startScanBtn: document.getElementById('start-scan-btn'), |
|
|
uploadBtn: document.getElementById('upload-btn'), |
|
|
fileInput: document.getElementById('file-input'), |
|
|
cameraView: document.getElementById('camera-view'), |
|
|
scanInstructions: document.getElementById('scan-instructions'), |
|
|
videoElement: document.getElementById('videoElement'), |
|
|
canvas: document.getElementById('canvas'), |
|
|
diagnosisModal: document.getElementById('diagnosis-modal'), |
|
|
closeDiagnosisModal: document.getElementById('close-diagnosis-modal'), |
|
|
patientName: document.getElementById('patient-name'), |
|
|
patientGender: document.getElementById('patient-gender'), |
|
|
patientAge: document.getElementById('patient-age'), |
|
|
examDate: document.getElementById('exam-date'), |
|
|
examType: document.getElementById('exam-type'), |
|
|
previewImage: document.getElementById('previewImage'), |
|
|
diagnosisResult: document.getElementById('diagnosis-result'), |
|
|
consultBtn: document.getElementById('consult-btn'), |
|
|
consultationModal: document.getElementById('consultation-modal'), |
|
|
closeConsultationModal: document.getElementById('close-consultation-modal'), |
|
|
contactForm: document.getElementById('contact-form') |
|
|
}; |
|
|
|
|
|
|
|
|
elements.mobileMenuButton.addEventListener('click', toggleMobileMenu); |
|
|
elements.startBtn.addEventListener('click', startDiagnosis); |
|
|
elements.videoBtn.addEventListener('click', showVideoModal); |
|
|
elements.closeModal.addEventListener('click', () => elements.loginModal.classList.add('hidden')); |
|
|
elements.closeRegisterModal.addEventListener('click', () => elements.registerModal.classList.add('hidden')); |
|
|
elements.closeVideoModal.addEventListener('click', () => elements.videoModal.classList.add('hidden')); |
|
|
elements.closeScanModal.addEventListener('click', closeScanModal); |
|
|
elements.closeDiagnosisModal.addEventListener('click', () => elements.diagnosisModal.classList.add('hidden')); |
|
|
elements.closeConsultationModal.addEventListener('click', () => elements.consultationModal.classList.add('hidden')); |
|
|
elements.registerLink.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
elements.loginModal.classList.add('hidden'); |
|
|
elements.registerModal.classList.remove('hidden'); |
|
|
}); |
|
|
elements.loginLink.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
elements.registerModal.classList.add('hidden'); |
|
|
elements.loginModal.classList.remove('hidden'); |
|
|
}); |
|
|
elements.loginForm.addEventListener('submit', handleLogin); |
|
|
elements.registerForm.addEventListener('submit', handleRegister); |
|
|
elements.startScanBtn.addEventListener('click', startScan); |
|
|
elements.uploadBtn.addEventListener('click', () => elements.fileInput.click()); |
|
|
elements.fileInput.addEventListener('change', handleFileUpload); |
|
|
elements.consultBtn.addEventListener('click', () => { |
|
|
elements.diagnosisModal.classList.add('hidden'); |
|
|
elements.consultationModal.classList.remove('hidden'); |
|
|
}); |
|
|
elements.contactForm.addEventListener('submit', handleContactForm); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
targetElement.scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
[elements.loginModal, elements.registerModal, elements.videoModal, elements.scanModal, elements.diagnosisModal, elements.consultationModal].forEach(modal => { |
|
|
modal.addEventListener('click', function(e) { |
|
|
if (e.target === modal) { |
|
|
modal.classList.add('hidden'); |
|
|
if (modal === elements.scanModal) { |
|
|
closeScanModal(); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function toggleMobileMenu() { |
|
|
elements.mobileMenu.classList.toggle('hidden'); |
|
|
} |
|
|
|
|
|
function startDiagnosis() { |
|
|
if (!currentUser) { |
|
|
elements.loginModal.classList.remove('hidden'); |
|
|
} else { |
|
|
|
|
|
const userExam = backend.exams.find(exam => exam.patientId === currentUser.username); |
|
|
if (userExam) { |
|
|
showDiagnosisReport(userExam); |
|
|
} else { |
|
|
elements.scanModal.classList.remove('hidden'); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function showVideoModal() { |
|
|
elements.videoModal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function showDiagnosisReport(exam) { |
|
|
elements.patientName.textContent = currentUser.name; |
|
|
elements.patientGender.textContent = currentUser.gender; |
|
|
elements.patientAge.textContent = currentUser.age + '岁'; |
|
|
elements.examDate.textContent = exam.date; |
|
|
elements.examType.textContent = exam.type; |
|
|
elements.previewImage.src = exam.image; |
|
|
elements.diagnosisResult.innerHTML = exam.result; |
|
|
elements.diagnosisModal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function handleLogin(e) { |
|
|
e.preventDefault(); |
|
|
const username = document.getElementById('username').value; |
|
|
const password = document.getElementById('password').value; |
|
|
|
|
|
|
|
|
const user = backend.users.find(u => u.username === username && u.password === password); |
|
|
if (user) { |
|
|
currentUser = user; |
|
|
elements.loginModal.classList.add('hidden'); |
|
|
alert('登录成功！'); |
|
|
startDiagnosis(); |
|
|
} else { |
|
|
alert('用户名或密码错误！'); |
|
|
} |
|
|
} |
|
|
|
|
|
function handleRegister(e) { |
|
|
e.preventDefault(); |
|
|
const name = document.getElementById('reg-name').value; |
|
|
const phone = document.getElementById('reg-phone').value; |
|
|
const id = document.getElementById('reg-id').value; |
|
|
const username = document.getElementById('reg-username').value; |
|
|
const password = document.getElementById('reg-password').value; |
|
|
|
|
|
|
|
|
backend.users.push({ |
|
|
username, |
|
|
password, |
|
|
name, |
|
|
gender: '未知', |
|
|
age: 0 |
|
|
}); |
|
|
|
|
|
alert('注册成功！请登录'); |
|
|
elements.registerModal.classList.add('hidden'); |
|
|
elements.loginModal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function startScan() { |
|
|
elements.scanInstructions.classList.add('hidden'); |
|
|
elements.cameraView.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { |
|
|
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }) |
|
|
.then(function(stream) { |
|
|
elements.videoElement.srcObject = stream; |
|
|
|
|
|
setTimeout(() => { |
|
|
simulateQRScan(); |
|
|
}, 2000); |
|
|
}) |
|
|
.catch(function(err) { |
|
|
console.error('无法访问摄像头:', err); |
|
|
alert('无法访问摄像头，请检查权限设置或尝试上传图片'); |
|
|
elements.scanInstructions.classList.remove('hidden'); |
|
|
elements.cameraView.classList.add('hidden'); |
|
|
}); |
|
|
} else { |
|
|
alert('您的设备不支持摄像头访问，请尝试上传图片'); |
|
|
elements.scanInstructions.classList.remove('hidden'); |
|
|
elements.cameraView.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
function simulateQRScan() { |
|
|
|
|
|
const userExam = backend.exams.find(exam => exam.patientId === (currentUser ? currentUser.username : 'user1')); |
|
|
if (userExam) { |
|
|
closeScanModal(); |
|
|
showDiagnosisReport(userExam); |
|
|
} else { |
|
|
alert('未找到匹配的检查记录'); |
|
|
closeScanModal(); |
|
|
} |
|
|
} |
|
|
|
|
|
function closeScanModal() { |
|
|
if (elements.videoElement.srcObject) { |
|
|
elements.videoElement.srcObject.getTracks().forEach(track => track.stop()); |
|
|
elements.videoElement.srcObject = null; |
|
|
} |
|
|
elements.scanModal.classList.add('hidden'); |
|
|
elements.scanInstructions.classList.remove('hidden'); |
|
|
elements.cameraView.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function handleFileUpload(e) { |
|
|
const file = e.target.files[0]; |
|
|
if (file) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(event) { |
|
|
elements.previewImage.src = event.target.result; |
|
|
closeScanModal(); |
|
|
|
|
|
|
|
|
const userExam = backend.exams.find(exam => exam.patientId === (currentUser ? currentUser.username : 'user1')); |
|
|
if (userExam) { |
|
|
showDiagnosisReport(userExam); |
|
|
} |
|
|
}; |
|
|
reader.readAsDataURL(file); |
|
|
} |
|
|
} |
|
|
|
|
|
function handleContactForm(e) { |
|
|
e.preventDefault(); |
|
|
const name = document.getElementById('contact-name').value; |
|
|
const email = document.getElementById('contact-email').value; |
|
|
const message = document.getElementById('contact-message').value; |
|
|
|
|
|
|
|
|
alert(`感谢您的留言，${name}！我们会尽快回复您。`); |
|
|
elements.contactForm.reset(); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
}); |
|
|
</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=echo3700/ai-echo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
