Spaces:

cjian2025
/

RAGsystem

Running

App Files Files Community

RAGsystem / index.html

cjian2025

Update index.html

c8b3fc0 verified 8 months ago

raw

history blame contribute delete

10.7 kB

	<!DOCTYPE html>
	<html lang="zh-TW">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>PKM_RAG 系統登入</title>
	<style>
	* {
	box-sizing: border-box;
	}

	body {
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	background: url("https://images.unsplash.com/photo-1503264116251-35a269479413") no-repeat center center/cover;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	.login-container {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(15px);
	border-radius: 20px;
	padding: 40px;
	width: 400px;
	text-align: center;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	animation: fadeIn 1.5s ease;
	border: 1px solid rgba(255, 255, 255, 0.2);
	}

	@keyframes fadeIn {
	from {opacity: 0; transform: translateY(-50px);}
	to {opacity: 1; transform: translateY(0);}
	}

	.system-title {
	color: #00f2fe;
	margin-bottom: 30px;
	font-size: 28px;
	font-weight: bold;
	text-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
	}

	.login-container h2 {
	color: white;
	margin-bottom: 25px;
	font-size: 22px;
	}

	.input-box {
	margin-bottom: 20px;
	text-align: left;
	}

	.input-box label {
	color: white;
	font-weight: bold;
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	}

	.input-box input {
	width: 100%;
	padding: 12px 15px;
	border: none;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.2);
	color: white;
	font-size: 16px;
	outline: none;
	transition: all 0.3s ease;
	border: 1px solid rgba(255, 255, 255, 0.3);
	}

	.input-box input::placeholder {
	color: rgba(255, 255, 255, 0.7);
	}

	.input-box input:focus {
	background: rgba(255, 255, 255, 0.3);
	box-shadow: 0 0 15px rgba(0, 242, 254, 0.5);
	border-color: #00f2fe;
	}

	.captcha-container {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
	}

	.captcha-display {
	background: rgba(0, 0, 0, 0.3);
	color: #00f2fe;
	padding: 10px 15px;
	border-radius: 8px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 2px;
	min-width: 80px;
	text-align: center;
	border: 1px solid rgba(0, 242, 254, 0.3);
	}

	.refresh-btn {
	background: linear-gradient(135deg, #4facfe, #00f2fe);
	border: none;
	color: white;
	padding: 10px 12px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.3s ease;
	}

	.refresh-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
	}

	.captcha-input {
	flex: 1;
	}

	.btn {
	width: 100%;
	padding: 14px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(135deg, #4facfe, #00f2fe);
	color: white;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-top: 10px;
	}

	.btn:hover {
	transform: scale(1.02);
	background: linear-gradient(135deg, #00f2fe, #4facfe);
	box-shadow: 0 5px 20px rgba(0, 242, 254, 0.3);
	}

	.btn:disabled {
	background: rgba(255, 255, 255, 0.3);
	cursor: not-allowed;
	transform: none;
	}

	.msg {
	margin-top: 15px;
	font-size: 14px;
	font-weight: bold;
	min-height: 20px;
	}

	.success {
	color: #4ade80;
	}

	.error {
	color: #f87171;
	}

	.main-system {
	width: 100%;
	max-width: 1200px;
	height: 600px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(15px);
	border-radius: 20px;
	padding: 20px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.2);
	animation: fadeIn 1.5s ease;
	}

	.system-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	}

	.back-btn {
	background: linear-gradient(135deg, #f87171, #ef4444);
	border: none;
	color: white;
	padding: 10px 20px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: bold;
	transition: all 0.3s ease;
	}

	.back-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 5px 15px rgba(248, 113, 113, 0.3);
	}

	.iframe-container {
	width: 100%;
	height: 100%;
	border-radius: 15px;
	overflow: hidden;
	border: 2px solid rgba(0, 242, 254, 0.3);
	}

	.iframe-container iframe {
	width: 100%;
	height: 100%;
	border: none;
	}

	.hidden {
	display: none;
	}

	.loading {
	color: #00f2fe;
	font-size: 14px;
	}
	</style>
	</head>
	<body>
	<!-- 登入頁面 -->
	<div id="loginPage" class="login-container">
	<h1 class="system-title">PKM_RAG</h1>
	<h2>系統登入</h2>

	<div class="input-box">
	<label for="username">帳號</label>
	<input type="text" id="username" placeholder="請輸入帳號" autocomplete="username">
	</div>

	<div class="input-box">
	<label for="password">密碼</label>
	<input type="password" id="password" placeholder="請輸入密碼" autocomplete="current-password">
	</div>

	<div class="input-box">
	<label>驗證碼</label>
	<div class="captcha-container">
	<div class="captcha-display" id="captchaDisplay"></div>
	<button class="refresh-btn" onclick="generateCaptcha()" title="重新生成驗證碼">🔄</button>
	<input type="text" class="captcha-input" id="captchaInput" placeholder="請輸入驗證碼">
	</div>
	</div>

	<button class="btn" onclick="login()">登入系統</button>
	<p class="msg" id="msg"></p>
	</div>

	<!-- 主系統頁面 -->
	<div id="mainSystem" class="main-system hidden">
	<div class="system-header">
	<h1 class="system-title">PKM_RAG 系統</h1>
	<button class="back-btn" onclick="logout()">回到登入頁面</button>
	</div>

	<div class="iframe-container">
	<iframe src="https://cjian2025-resendlangchain.hf.space" title="PKM_RAG 主系統"></iframe>
	</div>
	</div>

	<script>
	// 正確的 HASH 值（根據您提供的修正值）
	const CORRECT_HASHES = {
	'ROOT2025': 'd7113846e19051e6d5752f60dcb53329e9563b2c7655452fb9aea5f27969cc4f',
	'123456': '8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92'
	};

	let currentCaptcha = '';

	// 生成驗證碼
	function generateCaptcha() {
	const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
	currentCaptcha = '';
	for (let i = 0; i < 4; i++) {
	currentCaptcha += chars.charAt(Math.floor(Math.random() * chars.length));
	}
	document.getElementById('captchaDisplay').textContent = currentCaptcha;
	}

	// SHA-256 雜湊函數
	async function sha256(message) {
	const msgBuffer = new TextEncoder().encode(message);
	const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
	const hashArray = Array.from(new Uint8Array(hashBuffer));
	const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
	return hashHex;
	}

	// 登入函數
	async function login() {
	const username = document.getElementById('username').value.trim();
	const password = document.getElementById('password').value;
	const captchaInput = document.getElementById('captchaInput').value.trim();
	const msgElement = document.getElementById('msg');

	// 清空之前的訊息
	msgElement.textContent = '';
	msgElement.className = 'msg';

	// 驗證輸入
	if (!username \|\| !password \|\| !captchaInput) {
	showMessage('請填寫所有欄位！', 'error');
	return;
	}

	// 驗證驗證碼
	if (captchaInput !== currentCaptcha) {
	showMessage('驗證碼錯誤！', 'error');
	generateCaptcha();
	document.getElementById('captchaInput').value = '';
	return;
	}

	// 顯示登入中狀態
	showMessage('登入中...', 'loading');

	try {
	// 計算 HASH 值
	const usernameHash = await sha256(username);
	const passwordHash = await sha256(password);

	// 驗證帳號密碼
	if (usernameHash === CORRECT_HASHES['ROOT2025'] &&
	passwordHash === CORRECT_HASHES['123456']) {

	showMessage('✅ 登入成功！正在進入系統...', 'success');

	// 延遲進入主系統
	setTimeout(() => {
	document.getElementById('loginPage').classList.add('hidden');
	document.getElementById('mainSystem').classList.remove('hidden');
	}, 1500);

	} else {
	showMessage('❌ 帳號或密碼錯誤！', 'error');
	generateCaptcha();
	clearForm();
	}

	} catch (error) {
	showMessage('❌ 系統錯誤，請稍後再試！', 'error');
	generateCaptcha();
	clearForm();
	}
	}

	// 登出函數
	function logout() {
	document.getElementById('mainSystem').classList.add('hidden');
	document.getElementById('loginPage').classList.remove('hidden');
	clearForm();
	generateCaptcha();
	showMessage('已登出系統', 'success');
	}

	// 顯示訊息
	function showMessage(message, type) {
	const msgElement = document.getElementById('msg');
	msgElement.textContent = message;
	msgElement.className = `msg ${type}`;
	}

	// 清空表單
	function clearForm() {
	document.getElementById('username').value = '';
	document.getElementById('password').value = '';
	document.getElementById('captchaInput').value = '';
	}

	// 處理 Enter 鍵登入
	document.addEventListener('keypress', function(e) {
	if (e.key === 'Enter' && !document.getElementById('loginPage').classList.contains('hidden')) {
	login();
	}
	});

	// 頁面載入時生成驗證碼
	window.addEventListener('load', function() {
	generateCaptcha();
	});
	</script>
	</body>
	</html>