Spaces:
Running
Running
| <html lang="zh-TW"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>電商比價平台 · PChome × momo</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg: #0a0a0f; | |
| --surface: #111118; | |
| --surface2: #18181f; | |
| --border: rgba(255,255,255,0.07); | |
| --pchome: #e8001c; | |
| --pchome-glow: rgba(232,0,28,0.25); | |
| --momo: #f68c1e; | |
| --momo-glow: rgba(246,140,30,0.25); | |
| --text: #f0f0f5; | |
| --muted: rgba(240,240,245,0.45); | |
| --divider: rgba(255,255,255,0.04); | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| font-family: 'Noto Sans TC', sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Ambient background */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background: | |
| radial-gradient(ellipse 60% 40% at 15% 20%, rgba(232,0,28,0.06) 0%, transparent 70%), | |
| radial-gradient(ellipse 60% 40% at 85% 80%, rgba(246,140,30,0.06) 0%, transparent 70%); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* HEADER */ | |
| header { | |
| position: relative; | |
| z-index: 10; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 32px; | |
| height: 64px; | |
| border-bottom: 1px solid var(--border); | |
| background: rgba(10,10,15,0.85); | |
| backdrop-filter: blur(20px); | |
| } | |
| .logo-area { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .logo-icon { | |
| width: 34px; | |
| height: 34px; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 3px; | |
| } | |
| .logo-icon span { | |
| border-radius: 3px; | |
| display: block; | |
| } | |
| .logo-icon span:nth-child(1) { background: var(--pchome); } | |
| .logo-icon span:nth-child(2) { background: var(--momo); } | |
| .logo-icon span:nth-child(3) { background: var(--momo); } | |
| .logo-icon span:nth-child(4) { background: var(--pchome); } | |
| .logo-text { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 13px; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| color: var(--text); | |
| } | |
| .logo-text sub { | |
| font-size: 9px; | |
| color: var(--muted); | |
| letter-spacing: 0.12em; | |
| display: block; | |
| margin-top: -2px; | |
| } | |
| .header-tabs { | |
| display: flex; | |
| gap: 4px; | |
| background: var(--surface2); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 4px; | |
| } | |
| .tab-btn { | |
| padding: 7px 18px; | |
| border-radius: 7px; | |
| border: none; | |
| background: transparent; | |
| color: var(--muted); | |
| font-family: 'Noto Sans TC', sans-serif; | |
| font-size: 12px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| white-space: nowrap; | |
| } | |
| .tab-btn.active { | |
| background: var(--surface); | |
| color: var(--text); | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.4); | |
| } | |
| .tab-btn:hover:not(.active) { color: var(--text); } | |
| .header-status { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-family: 'Space Mono', monospace; | |
| font-size: 11px; | |
| color: var(--muted); | |
| } | |
| .status-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: #22c55e; | |
| box-shadow: 0 0 8px #22c55e; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.4; } | |
| } | |
| /* PLATFORM BADGES */ | |
| .platforms-row { | |
| position: relative; | |
| z-index: 5; | |
| display: flex; | |
| gap: 0; | |
| padding: 16px 32px; | |
| align-items: center; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .platform-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 20px; | |
| border-radius: 10px; | |
| border: 1px solid transparent; | |
| cursor: pointer; | |
| transition: all 0.25s; | |
| flex: 1; | |
| max-width: 220px; | |
| } | |
| .platform-badge.pchome { | |
| border-color: rgba(232,0,28,0.25); | |
| background: rgba(232,0,28,0.06); | |
| } | |
| .platform-badge.momo { | |
| border-color: rgba(246,140,30,0.25); | |
| background: rgba(246,140,30,0.06); | |
| margin-left: 12px; | |
| } | |
| .platform-badge:hover { | |
| transform: translateY(-1px); | |
| filter: brightness(1.15); | |
| } | |
| .badge-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| } | |
| .pchome .badge-dot { background: var(--pchome); box-shadow: 0 0 10px var(--pchome-glow); } | |
| .momo .badge-dot { background: var(--momo); box-shadow: 0 0 10px var(--momo-glow); } | |
| .badge-name { | |
| font-weight: 700; | |
| font-size: 13px; | |
| } | |
| .pchome .badge-name { color: var(--pchome); } | |
| .momo .badge-name { color: var(--momo); } | |
| .badge-url { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 10px; | |
| color: var(--muted); | |
| } | |
| .platforms-divider { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--muted); | |
| font-size: 11px; | |
| font-family: 'Space Mono', monospace; | |
| letter-spacing: 0.1em; | |
| } | |
| .platforms-divider::before, | |
| .platforms-divider::after { | |
| content: ''; | |
| flex: 1; | |
| height: 1px; | |
| background: var(--border); | |
| margin: 0 12px; | |
| } | |
| /* MAIN CONTENT */ | |
| .main-content { | |
| position: relative; | |
| z-index: 5; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| height: calc(100vh - 64px - 65px); | |
| min-height: 400px; | |
| } | |
| .panel { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .panel + .panel { | |
| border-left: 1px solid var(--border); | |
| } | |
| /* Panel header strip */ | |
| .panel-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 12px 20px; | |
| border-bottom: 1px solid var(--border); | |
| flex-shrink: 0; | |
| } | |
| .panel-header-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .panel-accent-bar { | |
| width: 3px; | |
| height: 20px; | |
| border-radius: 2px; | |
| flex-shrink: 0; | |
| } | |
| .panel.pchome-panel .panel-accent-bar { background: var(--pchome); } | |
| .panel.momo-panel .panel-accent-bar { background: var(--momo); } | |
| .panel-title { | |
| font-weight: 700; | |
| font-size: 13px; | |
| } | |
| .panel.pchome-panel .panel-title { color: var(--pchome); } | |
| .panel.momo-panel .panel-title { color: var(--momo); } | |
| .panel-subtitle { | |
| font-size: 11px; | |
| color: var(--muted); | |
| font-family: 'Space Mono', monospace; | |
| } | |
| .panel-actions { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| .panel-btn { | |
| padding: 5px 12px; | |
| border-radius: 6px; | |
| border: 1px solid var(--border); | |
| background: var(--surface2); | |
| color: var(--muted); | |
| font-size: 11px; | |
| font-family: 'Noto Sans TC', sans-serif; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .panel-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.15); } | |
| /* Iframe wrapper */ | |
| .iframe-wrapper { | |
| flex: 1; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .iframe-wrapper iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| display: block; | |
| background: #fff; | |
| } | |
| /* Loading overlay */ | |
| .loading-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: var(--surface); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 16px; | |
| z-index: 10; | |
| transition: opacity 0.5s, visibility 0.5s; | |
| } | |
| .loading-overlay.hidden { | |
| opacity: 0; | |
| visibility: hidden; | |
| pointer-events: none; | |
| } | |
| .spinner { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| border: 3px solid var(--border); | |
| border-top-color: currentColor; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| .panel.pchome-panel .spinner { color: var(--pchome); } | |
| .panel.momo-panel .spinner { color: var(--momo); } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .loading-text { | |
| font-size: 12px; | |
| color: var(--muted); | |
| font-family: 'Space Mono', monospace; | |
| } | |
| /* View modes */ | |
| .main-content.fullscreen-left .panel.pchome-panel { grid-column: 1 / 3; } | |
| .main-content.fullscreen-left .panel.momo-panel { display: none; } | |
| .main-content.fullscreen-right .panel.momo-panel { grid-column: 1 / 3; } | |
| .main-content.fullscreen-right .panel.pchome-panel { display: none; } | |
| /* Focus mode indicator */ | |
| .view-label { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-family: 'Space Mono', monospace; | |
| font-size: 80px; | |
| font-weight: 700; | |
| opacity: 0.015; | |
| pointer-events: none; | |
| letter-spacing: -2px; | |
| white-space: nowrap; | |
| } | |
| .pchome-panel .view-label { color: var(--pchome); } | |
| .momo-panel .view-label { color: var(--momo); } | |
| /* Resize handle */ | |
| .resize-handle { | |
| position: absolute; | |
| top: 0; | |
| right: -4px; | |
| width: 8px; | |
| height: 100%; | |
| cursor: col-resize; | |
| z-index: 20; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .resize-handle::after { | |
| content: ''; | |
| width: 2px; | |
| height: 40px; | |
| background: var(--border); | |
| border-radius: 1px; | |
| transition: background 0.2s; | |
| } | |
| .resize-handle:hover::after { background: rgba(255,255,255,0.2); } | |
| /* Animations */ | |
| @keyframes fadeSlideIn { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| header { animation: fadeSlideIn 0.4s ease both; } | |
| .platforms-row { animation: fadeSlideIn 0.4s 0.1s ease both; } | |
| .main-content { animation: fadeSlideIn 0.4s 0.2s ease both; } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .main-content { | |
| grid-template-columns: 1fr; | |
| grid-template-rows: 1fr 1fr; | |
| } | |
| .panel + .panel { border-left: none; border-top: 1px solid var(--border); } | |
| .platforms-row { display: none; } | |
| header { padding: 0 16px; } | |
| .logo-text sub { display: none; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="logo-area"> | |
| <div class="logo-icon"> | |
| <span></span><span></span> | |
| <span></span><span></span> | |
| </div> | |
| <div class="logo-text"> | |
| DUAL·SHOP | |
| <sub>COMPARE PLATFORM</sub> | |
| </div> | |
| </div> | |
| <div class="header-tabs"> | |
| <button class="tab-btn active" onclick="setView('split')">分割瀏覽</button> | |
| <button class="tab-btn" onclick="setView('pchome')">PChome</button> | |
| <button class="tab-btn" onclick="setView('momo')">momo</button> | |
| </div> | |
| <div class="header-status"> | |
| <div class="status-dot"></div> | |
| <span>2 平台上線</span> | |
| </div> | |
| </header> | |
| <div class="platforms-row"> | |
| <div class="platform-badge pchome" onclick="setView('pchome')"> | |
| <div class="badge-dot"></div> | |
| <div> | |
| <div class="badge-name">PChome 24h</div> | |
| <div class="badge-url">pchome.hf.space</div> | |
| </div> | |
| </div> | |
| <div class="platforms-divider">VS</div> | |
| <div class="platform-badge momo" onclick="setView('momo')"> | |
| <div class="badge-dot"></div> | |
| <div> | |
| <div class="badge-name">momo 購物網</div> | |
| <div class="badge-url">momo.hf.space</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="main-content" id="mainContent"> | |
| <!-- PChome Panel --> | |
| <div class="panel pchome-panel" id="pchomePanel"> | |
| <div class="panel-header"> | |
| <div class="panel-header-left"> | |
| <div class="panel-accent-bar"></div> | |
| <div> | |
| <div class="panel-title">PChome 24h 購物</div> | |
| <div class="panel-subtitle">auy1897yg-pchome.hf.space</div> | |
| </div> | |
| </div> | |
| <div class="panel-actions"> | |
| <button class="panel-btn" onclick="reloadFrame('pchomeFrame', 'pchomeLoading')">重新載入</button> | |
| <button class="panel-btn" onclick="setView('pchome')">全螢幕</button> | |
| </div> | |
| </div> | |
| <div class="iframe-wrapper"> | |
| <div class="view-label">PCHOME</div> | |
| <div class="loading-overlay" id="pchomeLoading"> | |
| <div class="spinner"></div> | |
| <div class="loading-text">載入 PChome 中...</div> | |
| </div> | |
| <iframe | |
| id="pchomeFrame" | |
| src="https://auy1897yg-pchome.hf.space" | |
| onload="hideLoading('pchomeLoading')" | |
| title="PChome 24h 購物" | |
| ></iframe> | |
| </div> | |
| </div> | |
| <!-- Momo Panel --> | |
| <div class="panel momo-panel" id="momoPanel"> | |
| <div class="panel-header"> | |
| <div class="panel-header-left"> | |
| <div class="panel-accent-bar"></div> | |
| <div> | |
| <div class="panel-title">momo 購物網</div> | |
| <div class="panel-subtitle">auy1897yg-momo.hf.space</div> | |
| </div> | |
| </div> | |
| <div class="panel-actions"> | |
| <button class="panel-btn" onclick="reloadFrame('momoFrame', 'momoLoading')">重新載入</button> | |
| <button class="panel-btn" onclick="setView('momo')">全螢幕</button> | |
| </div> | |
| </div> | |
| <div class="iframe-wrapper"> | |
| <div class="view-label">MOMO</div> | |
| <div class="loading-overlay" id="momoLoading"> | |
| <div class="spinner"></div> | |
| <div class="loading-text">載入 momo 中...</div> | |
| </div> | |
| <iframe | |
| id="momoFrame" | |
| src="https://auy1897yg-momo.hf.space" | |
| onload="hideLoading('momoLoading')" | |
| title="momo 購物網" | |
| ></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let currentView = 'split'; | |
| function hideLoading(id) { | |
| const el = document.getElementById(id); | |
| if (el) el.classList.add('hidden'); | |
| } | |
| function reloadFrame(frameId, loadingId) { | |
| const frame = document.getElementById(frameId); | |
| const loading = document.getElementById(loadingId); | |
| if (!frame) return; | |
| loading?.classList.remove('hidden'); | |
| frame.src = frame.src; | |
| } | |
| function setView(view) { | |
| const content = document.getElementById('mainContent'); | |
| const tabs = document.querySelectorAll('.tab-btn'); | |
| content.classList.remove('fullscreen-left', 'fullscreen-right'); | |
| if (view === 'pchome') { | |
| content.classList.add('fullscreen-left'); | |
| } else if (view === 'momo') { | |
| content.classList.add('fullscreen-right'); | |
| } | |
| currentView = view; | |
| tabs.forEach((btn, i) => { | |
| const map = ['split', 'pchome', 'momo']; | |
| btn.classList.toggle('active', map[i] === view); | |
| }); | |
| } | |
| // Auto-hide loading after 8s as fallback | |
| setTimeout(() => { | |
| document.querySelectorAll('.loading-overlay').forEach(el => el.classList.add('hidden')); | |
| }, 8000); | |
| </script> | |
| </body> | |
| </html> | |