Spaces:

cjian2025
/

LLMandWpSystem

Running

App Files Files Community

LLMandWpSystem / index.html

cjian2025

Update index.html

1de367b verified 6 months ago

raw

history blame contribute delete

4.07 kB

	<!DOCTYPE html>
	<html lang="zh-TW">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>LLM+ Web scraping Application</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	display: flex;
	height: 100vh;
	margin: 0;
	flex-direction: column;
	background-color: #f4f4f9;
	}

	.header {
	text-align: center;
	padding: 20px;
	background-color: #fff;
	border-bottom: 2px solid #ddd;
	}

	.header h1 {
	margin: 0;
	font-size: 2.5em;
	color: #333;
	}

	.header h2 {
	margin: 5px 0 0;
	font-size: 1em;
	color: #777;
	}

	.container {
	display: flex;
	flex-grow: 1;
	}

	.sidebar {
	width: 250px;
	background-color: #333;
	color: white;
	padding: 20px;
	box-shadow: 2px 0 5px rgba(0,0,0,0.1);
	}

	.sidebar ul {
	list-style-type: none;
	padding: 0;
	}

	.sidebar li {
	margin-bottom: 10px;
	}

	.sidebar button {
	background-color: #555;
	color: white;
	border: none;
	padding: 15px;
	text-align: left;
	width: 100%;
	font-size: 1.1em;
	cursor: pointer;
	transition: background-color 0.3s ease;
	}

	.sidebar button:hover, .sidebar button.active {
	background-color: #007bff;
	}

	.content {
	flex-grow: 1;
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #e9ecef;
	}

	.iframe-container {
	display: none;
	width: 100%;
	height: 100%;
	max-width: 850px;
	max-height: 450px;
	border: 2px solid #ccc;
	border-radius: 8px;
	overflow: hidden;
	background-color: #fff;
	}

	.iframe-container.active {
	display: block;
	}

	iframe {
	width: 100%;
	height: 100%;
	border: none;
	}
	</style>
	</head>
	<body>
	<div class="header">
	<h1>LLM+ Web scraping Application</h1>
	<h2>cj huang@2025copyright</h2>
	</div>

	<div class="container">
	<div class="sidebar">
	<ul>
	<li><button onclick="showIframe('iframe01')" class="active">ESG 爬蟲</button></li>
	<li><button onclick="showIframe('iframe02')">多模態 API 應用</button></li>
	</ul>
	</div>
	<div class="content">
	<div id="iframe01" class="iframe-container active">
	<iframe src="https://cjian2025-0824-demo.hf.space" frameborder="0"></iframe>
	</div>
	<div id="iframe02" class="iframe-container">
	<iframe src="https://cjian2025-groq-api-gradio.hf.space" frameborder="0"></iframe>
	</div>
	</div>
	</div>

	<script>
	function showIframe(iframeId) {
	// 隱藏所有 iframe
	const iframes = document.querySelectorAll('.iframe-container');
	iframes.forEach(iframe => {
	iframe.classList.remove('active');
	});

	// 顯示點擊的 iframe
	const activeIframe = document.getElementById(iframeId);
	activeIframe.classList.add('active');

	// 移除所有按鈕的 active 狀態
	const buttons = document.querySelectorAll('.sidebar button');
	buttons.forEach(button => {
	button.classList.remove('active');
	});

	// 為被點擊的按鈕添加 active 狀態
	event.currentTarget.classList.add('active');
	}
	</script>
	</body>
	</html>