Update index.html

index.html

@@ -5,148 +5,267 @@
     <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;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+            min-height: 100vh;
         }
 
         .header {
             text-align: center;
-            padding: 20px;
-            background-color: #fff;
-            border-bottom: 2px solid #ddd;
+            margin-bottom: 30px;
+            color: white;
         }
 
-        .header h1 {
-            margin: 0;
-            font-size: 2.5em;
-            color: #333;
+        .main-title {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
         }
 
-        .header h2 {
-            margin: 5px 0 0;
-            font-size: 1em;
-            color: #777;
+        .subtitle {
+            font-size: 1.1rem;
+            opacity: 0.9;
+            font-weight: 300;
         }
 
-        .container {
+        .app-container {
             display: flex;
-            flex-grow: 1;
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
+            overflow: hidden;
+            min-height: 600px;
         }
 
         .sidebar {
-            width: 250px;
-            background-color: #333;
-            color: white;
-            padding: 20px;
-            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
+            width: 300px;
+            background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
+            padding: 0;
+            display: flex;
+            flex-direction: column;
         }
 
-        .sidebar ul {
-            list-style-type: none;
-            padding: 0;
+        .tab-button {
+            padding: 25px 30px;
+            border: none;
+            background: transparent;
+            color: #ecf0f1;
+            font-size: 1.1rem;
+            font-weight: 500;
+            cursor: pointer;
+            text-align: left;
+            transition: all 0.3s ease;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+            position: relative;
         }
 
-        .sidebar li {
-            margin-bottom: 10px;
+        .tab-button:hover {
+            background: rgba(255,255,255,0.1);
+            transform: translateX(5px);
         }
 
-        .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;
+        .tab-button.active {
+            background: rgba(74, 144, 226, 0.3);
+            border-left: 4px solid #4a90e2;
         }
 
-        .sidebar button:hover, .sidebar button.active {
-            background-color: #007bff;
+        .tab-button.active::before {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 0;
+            height: 0;
+            border-top: 10px solid transparent;
+            border-bottom: 10px solid transparent;
+            border-right: 10px solid white;
+        }
+
+        .tab-title {
+            font-weight: 600;
+            margin-bottom: 5px;
+        }
+
+        .tab-description {
+            font-size: 0.9rem;
+            opacity: 0.8;
+            line-height: 1.4;
         }
 
         .content {
-            flex-grow: 1;
-            padding: 20px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background-color: #e9ecef;
+            flex: 1;
+            padding: 0;
+            background: #f8f9fa;
+            position: relative;
         }
 
-        .iframe-container {
+        .tab-content {
             display: none;
             width: 100%;
             height: 100%;
-            max-width: 850px;
-            max-height: 450px;
-            border: 2px solid #ccc;
-            border-radius: 8px;
-            overflow: hidden;
-            background-color: #fff;
+            padding: 20px;
         }
 
-        .iframe-container.active {
+        .tab-content.active {
             display: block;
         }
 
+        .iframe-container {
+            width: 100%;
+            height: 560px;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+            background: white;
+        }
+
         iframe {
             width: 100%;
             height: 100%;
             border: none;
         }
+
+        .loading {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            color: #666;
+            font-size: 1.1rem;
+        }
+
+        .loading::before {
+            content: '';
+            width: 20px;
+            height: 20px;
+            border: 2px solid #ddd;
+            border-top: 2px solid #4a90e2;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-right: 10px;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        @media (max-width: 768px) {
+            .app-container {
+                flex-direction: column;
+            }
+            
+            .sidebar {
+                width: 100%;
+                flex-direction: row;
+                overflow-x: auto;
+            }
+            
+            .tab-button {
+                min-width: 200px;
+                white-space: nowrap;
+            }
+            
+            .iframe-container {
+                height: 400px;
+            }
+            
+            .main-title {
+                font-size: 2rem;
+            }
+        }
     </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 class="header">
+            <h1 class="main-title">LLM+ Web scraping Application</h1>
+            <p class="subtitle">mikao07@2025copyright</p>
         </div>
-        <div class="content">
-            <div id="iframe01" class="iframe-container active">
-                <iframe src="https://cjian2025-0824-demo.hf.space" frameborder="0"></iframe>
+
+        <div class="app-container">
+            <div class="sidebar">
+                <button class="tab-button active" onclick="showTab('tab1')">
+                    <div class="tab-title">ESG爬蟲</div>
+                    <div class="tab-description">環境、社會與治理數據爬蟲工具</div>
+                </button>
+                <button class="tab-button" onclick="showTab('tab2')">
+                    <div class="tab-title">多模態API應用</div>
+                    <div class="tab-description">整合多種模態的API應用介面</div>
+                </button>
             </div>
-            <div id="iframe02" class="iframe-container">
-                <iframe src="https://cjian2025-groq-api-gradio.hf.space" frameborder="0"></iframe>
+
+            <div class="content">
+                <div id="tab1" class="tab-content active">
+                    <div class="iframe-container">
+                        <div class="loading">載入中...</div>
+                        <iframe src="https://mikao007-g-space-st.hf.space" onload="hideLoading(this)"></iframe>
+                    </div>
+                </div>
+
+                <div id="tab2" class="tab-content">
+                    <div class="iframe-container">
+                        <div class="loading">載入中...</div>
+                        <iframe src="https://mikao007-groq-api-gradio.hf.space" onload="hideLoading(this)"></iframe>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 
     <script>
-        function showIframe(iframeId) {
-            // 隱藏所有 iframe
-            const iframes = document.querySelectorAll('.iframe-container');
-            iframes.forEach(iframe => {
-                iframe.classList.remove('active');
+        function showTab(tabId) {
+            // 隱藏所有內容
+            const contents = document.querySelectorAll('.tab-content');
+            contents.forEach(content => {
+                content.classList.remove('active');
             });
 
-            // 顯示點擊的 iframe
-            const activeIframe = document.getElementById(iframeId);
-            activeIframe.classList.add('active');
-
-            // 移除所有按鈕的 active 狀態
-            const buttons = document.querySelectorAll('.sidebar button');
+            // 移除所有按鈕的active狀態
+            const buttons = document.querySelectorAll('.tab-button');
             buttons.forEach(button => {
                 button.classList.remove('active');
             });
 
-            // 為被點擊的按鈕添加 active 狀態
-            event.currentTarget.classList.add('active');
+            // 顯示選中的內容
+            document.getElementById(tabId).classList.add('active');
+
+            // 添加選中按鈕的active狀態
+            event.target.closest('.tab-button').classList.add('active');
         }
+
+        function hideLoading(iframe) {
+            const container = iframe.parentElement;
+            const loading = container.querySelector('.loading');
+            if (loading) {
+                loading.style.display = 'none';
+            }
+            iframe.style.display = 'block';
+        }
+
+        // 初始化載入動畫
+        document.addEventListener('DOMContentLoaded', function() {
+            const iframes = document.querySelectorAll('iframe');
+            iframes.forEach(iframe => {
+                iframe.style.display = 'none';
+            });
+        });
     </script>
 </body>
-</html>
+</html>