Spaces:

123Sabrina
/

0827-two

Running

App Files Files Community

123Sabrina commited on Aug 27, 2025

Commit

d7eb3f8

verified ·

1 Parent(s): 39ad5ea

Update index.html

Browse files

Files changed (1) hide show

index.html +223 -19

index.html CHANGED Viewed

@@ -1,19 +1,223 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hugging Face System</title>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #007bff;
+            --secondary-color: #6c757d;
+            --background-color: #f8f9fa;
+            --card-background: #ffffff;
+            --text-color: #343a40;
+            --border-color: #e9ecef;
+            --header-height: 80px;
+            --nav-height: 50px;
+        }
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            line-height: 1.6;
+            transition: background-color 0.5s ease;
+        }
+        header {
+            background-color: var(--card-background);
+            padding: 20px 40px;
+            text-align: center;
+            border-bottom: 3px solid var(--primary-color);
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: var(--header-height);
+        }
+        h1 {
+            color: var(--primary-color);
+            margin: 0;
+            font-size: 2.8em;
+            font-weight: 700;
+            letter-spacing: 1.5px;
+        }
+        h2 {
+            color: var(--secondary-color);
+            margin: 8px 0 0;
+            font-size: 1.2em;
+            font-weight: 300;
+        }
+        nav {
+            background-color: var(--primary-color);
+            padding: 0 20px;
+            text-align: center;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            height: var(--nav-height);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        nav a {
+            color: #ffffff;
+            text-decoration: none;
+            padding: 15px 30px;
+            display: inline-block;
+            font-weight: 400;
+            font-size: 1.1em;
+            transition: background-color 0.3s ease, transform 0.2s ease;
+            border-radius: 5px;
+        }
+        nav a:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+            transform: translateY(-2px);
+        }
+        .container {
+            padding: 30px;
+            text-align: center;
+            max-width: 1200px;
+            margin: 20px auto;
+            background-color: var(--card-background);
+            border-radius: 12px;
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+            border: 1px solid var(--border-color);
+        }
+        h3 {
+            color: var(--primary-color);
+            font-size: 2.2em;
+            margin-bottom: 25px;
+            font-weight: 700;
+            position: relative;
+            display: inline-block;
+            padding-bottom: 10px;
+        }
+        h3::after {
+            content: '';
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            transform: translateX(-50%);
+            width: 80px;
+            height: 3px;
+            background-color: var(--primary-color);
+            border-radius: 2px;
+        }
+        iframe {
+            width: 100%; /* 寬度佔滿容器 */
+            height: 100vh; /* 初始設定高度為視窗高度 */
+            border: none; /* 移除邊框 */
+        }
+        .fullscreen-container {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.95);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+        }
+        .fullscreen-container.active {
+            display: flex;
+        }
+        .close-btn {
+            position: absolute;
+            top: 20px;
+            right: 30px;
+            color: white;
+            font-size: 3em;
+            cursor: pointer;
+            z-index: 1001;
+            transition: transform 0.2s ease;
+        }
+        .close-btn:hover {
+            transform: scale(1.1);
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Hugging Face System</h1>
+        <h2>123Sabrina@2025copyright</h2>
+    </header>
+    <nav>
+        <a href="#dashboard">日本不動產拍賣彙整儀表板</a>
+    </nav>
+    <div class="container">
+        <h3 id="dashboard">日本不動產拍賣彙整儀表板</h3>
+        <p style="margin-top: 20px; font-size: 1.1em; color: var(--secondary-color);">
+            如果內容無法完整顯示，請點擊下方按鈕以全螢幕模式查看。
+        </p>
+        <button onclick="toggleFullscreen()" style="
+            padding: 12px 25px;
+            font-size: 1.1em;
+            color: white;
+            background-color: var(--primary-color);
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            margin-bottom: 20px;
+            transition: background-color 0.3s ease, transform 0.2s ease;
+        ">開啟全螢幕</button>
+        <iframe
+            id="mainIframe"
+            src="https://sabrina91-j-realestate.hf.space"
+            frameborder="0"
+            style="width: 100%; min-height: 800px; border-radius: 10px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);">
+        </iframe>
+    </div>
+    <div id="fullscreenContainer" class="fullscreen-container">
+        <span class="close-btn" onclick="toggleFullscreen()">&times;</span>
+        <iframe
+            id="fullscreenIframe"
+            src="https://sabrina91-j-realestate.hf.space"
+            frameborder="0"
+            style="width: 95%; height: 95%;">
+        </iframe>
+    </div>
+    <script>
+        function toggleFullscreen() {
+            const container = document.getElementById('fullscreenContainer');
+            const mainIframe = document.getElementById('mainIframe');
+            const fullscreenIframe = document.getElementById('fullscreenIframe');
+            container.classList.toggle('active');
+            if (container.classList.contains('active')) {
+                // 當進入全螢幕模式時，將主 iframe 的 src 複製到全螢幕 iframe
+                fullscreenIframe.src = mainIframe.src;
+                document.body.style.overflow = 'hidden'; // 隱藏滾動條
+            } else {
+                document.body.style.overflow = 'auto'; // 恢復滾動條
+            }
+        }
+    </script>
+</body>
+</html>