~admin/FaceX_AI_智能守卫.git

New file
			@@ -0,0 +1,202 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<title>äººè¸è¯å«èå¤ - äººè¸å½å¥æ¨¡å</title>
			<style>
			body {
			font-family: Arial, sans-serif;
			margin: 20px;
			}
			.container {
			max-width: 600px;
			margin: auto;
			padding: 20px;
			border: 1px solid #ccc;
			border-radius: 8px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			}
			h1 {
			text-align: center;
			color: #333;
			}
			.form-group {
			margin-bottom: 15px;
			}
			label {
			display: block;
			margin-bottom: 5px;
			font-weight: bold;
			}
			input[type="text"], button {
			width: 100%;
			padding: 10px;
			font-size: 16px;
			border: 1px solid #ccc;
			border-radius: 4px;
			}
			button {
			background-color: #007bff;
			color: white;
			cursor: pointer;
			}
			button:hover {
			background-color: #0056b3;
			}
			.camera-preview {
			margin-top: 20px;
			text-align: center;
			}
			.camera-preview video {
			max-width: 100%;
			height: auto;
			border: 1px solid #ccc;
			border-radius: 4px;
			}
			.image-preview {
			margin-top: 20px;
			text-align: center;
			}
			.image-preview img {
			max-width: 100%;
			height: auto;
			border: 1px solid #ccc;
			border-radius: 4px;
			}
			.status-message {
			margin-top: 15px;
			text-align: center;
			font-size: 14px;
			color: #555;
			}
			</style>
			</head>
			<body>
			<div class="container">
			<h1>äººè¸è¯å«èå¤ - äººè¸å½å¥æ¨¡å</h1>

			<!-- å·¥å·è¾å¥ -->
			<div class="form-group">
			<label for="employee-id">è¾å¥å·¥å·:</label>
			<input type="text" id="employee-id" placeholder="è¯·è¾å¥å·¥å·">
			</div>

			<!-- æ¥è¯¢ä¿¡æ¯æé® -->
			<button onclick="searchUserInfo()">æ¥è¯¢ä¿¡æ¯</button>

			<!-- ç¨æ·ä¿¡æ¯å±ç¤º -->
			<div class="form-group" id="user-info" style="display: none;">
			<label>ç¨æ·ä¿¡æ¯:</label>
			<p id="user-details"></p>
			</div>

			<!-- æ¨¡ææåå¤´æåå¾ç -->
			<div class="camera-preview" id="camera-preview" style="display: none;">
			<video id="camera-video" autoplay playsinline></video>
			<div>
			<button onclick="captureImage('front')">æåæ£è¸</button>
			<button onclick="captureImage('left')">æåå·¦ä¾§è¸</button>
			<button onclick="captureImage('right')">æåå³ä¾§è¸</button>
			</div>
			</div>

			<!-- å¾çé¢è§ -->
			<div class="image-preview" id="image-preview" style="display: none;">
			<h3>æåçå¾çé¢è§</h3>
			<div id="captured-images">
			<img id="front-image" src="" alt="æ£è¸å¾ç" style="display: none;">
			<img id="left-image" src="" alt="å·¦ä¾§è¸å¾ç" style="display: none;">
			<img id="right-image" src="" alt="å³ä¾§è¸å¾ç" style="display: none;">
			</div>
			</div>

			<!-- æäº¤æé® -->
			<button onclick="submitData()" style="display: none;" id="submit-btn">æäº¤</button>

			<!-- ç¶ææ¶æ¯ -->
			<div class="status-message" id="status-message"></div>
			</div>

			<script>
			let cameraStream = null;

			// æ¨¡ææ¥è¯¢ç¨æ·ä¿¡æ¯
			function searchUserInfo() {
			const employeeId = document.getElementById('employee-id').value;
			if (!employeeId) {
			alert('è¯·è¾å¥å·¥å·');
			return;
			}

			// æ¨¡ææ¥è¯¢ç»æ
			const userInfo = {
			id: employeeId,
			name: 'å¼ ä¸',
			department: 'ææ¯é¨'
			};

			// æ¾ç¤ºç¨æ·ä¿¡æ¯
			document.getElementById('user-details').innerText = `å§å: ${userInfo.name}, é¨é¨: ${userInfo.department}`;
			document.getElementById('user-info').style.display = 'block';

			// æ¾ç¤ºæåå¤´
			startCamera();
			}

			// æå¼æåå¤´
			async function startCamera() {
			try {
			cameraStream = await navigator.mediaDevices.getUserMedia({ video: true });
			const videoElement = document.getElementById('camera-video');
			videoElement.srcObject = cameraStream;
			document.getElementById('camera-preview').style.display = 'block';
			} catch (error) {
			alert('æ æ³è®¿é®æåå¤´ï¼è¯·æ£æ¥æéæè®¾å¤æ¯å¦å¯ç¨ã');
			console.error('æåå¤´è®¿é®å¤±è´¥:', error);
			}
			}

			// æåå¾ç
			function captureImage(faceType) {
			const videoElement = document.getElementById('camera-video');
			const canvas = document.createElement('canvas');
			canvas.width = videoElement.videoWidth;
			canvas.height = videoElement.videoHeight;
			const context = canvas.getContext('2d');
			context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

			// å°æåçå¾çæ¾ç¤ºå¨é¡µé¢ä¸
			const imageUrl = canvas.toDataURL('image/png');
			const imageElement = document.getElementById(`${faceType}-image`);
			imageElement.src = imageUrl;
			imageElement.style.display = 'block';

			// å¦æä¸å¼ å¾çé½å·²æåï¼æ¾ç¤ºæäº¤æé®
			const frontImage = document.getElementById('front-image').src;
			const leftImage = document.getElementById('left-image').src;
			const rightImage = document.getElementById('right-image').src;
			if (frontImage && leftImage && rightImage) {
			document.getElementById('submit-btn').style.display = 'block';
			}
			}

			// æ¨¡ææäº¤æ°æ®
			function submitData() {
			const employeeId = document.getElementById('employee-id').value;
			if (!employeeId) {
			alert('è¯·åè¾å¥å·¥å·å¹¶æ¥è¯¢ä¿¡æ¯');
			return;
			}

			// æ¨¡æä¸ä¼ å¾çåæäº¤æ°æ®
			const statusMessage = document.getElementById('status-message');
			statusMessage.innerText = 'æ£å¨ä¸ä¼ å¾çå¹¶æäº¤æ°æ®...';

			setTimeout(() => {
			statusMessage.innerText = 'æäº¤æåï¼';
			}, 2000); // æ¨¡æä¸ä¼ å»¶è¿
			}
			</script>
			</body>
			</html>

	Client/王雨阳/code/UI.html	202 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	Client/王雨阳/document/项目需求书2.0版.docx	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	Client/王雨阳/log/日志_王雨阳_250218.doc	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	Client/王雨阳/log/王雨阳_250218.doc	补丁 \| 查看 \| 原始文档 \| blame \| 历史