refactor structor folder

e-commerce/final/index.html

@@ -0,0 +1,98 @@
+<!doctype html>
+<html lang="vi">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Tổng hợp tài liệu dự án</title>
+<style>
+  :root{
+    --bg:#eef1f7; --surface:#ffffff; --text:#16213a; --muted:#5b6478;
+    --accent:#1f4e9c; --accent-contrast:#ffffff; --border:#dde2ee;
+  }
+  @media (prefers-color-scheme: dark){
+    :root{
+      --bg:#0b0f18; --surface:#141b2b; --text:#e7ebf5; --muted:#9aa3b8;
+      --accent:#5b93e0; --accent-contrast:#0b0f18; --border:#2a3247;
+    }
+  }
+  *{box-sizing:border-box;}
+  html,body{margin:0;padding:0;height:100%;}
+  body{
+    background:var(--bg); color:var(--text);
+    font-family:"Segoe UI","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+    display:flex; flex-direction:column;
+  }
+  header{
+    display:flex; align-items:center; gap:16px;
+    padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--border);
+    flex:0 0 auto;
+  }
+  header h1{font-size:17px; margin:0; font-weight:700; white-space:nowrap;}
+  nav{display:flex; gap:4px; flex:1; overflow-x:auto;}
+  nav button{
+    appearance:none; border:1px solid var(--border); background:transparent; color:var(--muted);
+    padding:9px 18px; border-radius:8px 8px 0 0; font-size:14px; font-weight:600; cursor:pointer;
+    white-space:nowrap; border-bottom:none; transition:background .12s, color .12s;
+  }
+  nav button:hover{background:rgba(31,78,156,.08);}
+  nav button.active{
+    color:var(--accent-contrast); background:var(--accent); border-color:var(--accent);
+  }
+  main{flex:1; min-height:0; position:relative;}
+  .pane{
+    position:absolute; inset:0; display:none; flex-direction:column;
+  }
+  .pane.active{display:flex;}
+  .pane iframe{flex:1; width:100%; height:100%; border:0; background:var(--surface);}
+  .fallback{
+    display:none; align-items:center; justify-content:center; height:100%;
+    color:var(--muted); font-size:14px; text-align:center; padding:40px;
+  }
+  a.openlink{color:var(--accent); font-weight:600;}
+</style>
+</head>
+<body>
+
+<header>
+  <h1>Tổng hợp tài liệu dự án</h1>
+  <nav>
+    <button class="tab-btn active" data-target="pane-proposal">1. Phân tích &amp; đề xuất giải pháp</button>
+    <button class="tab-btn" data-target="pane-bid">2. Hồ sơ dự thầu chi tiết</button>
+    <button class="tab-btn" data-target="pane-deck">3. Slide thuyết trình</button>
+  </nav>
+</header>
+
+<main>
+  <section class="pane active" id="pane-proposal">
+    <iframe src="proposal/index.html" title="Đề xuất giải pháp" loading="lazy"></iframe>
+  </section>
+  <section class="pane" id="pane-bid">
+    <iframe src="bid/index.html" title="Hồ sơ dự thầu chi tiết" loading="lazy"></iframe>
+  </section>
+  <section class="pane" id="pane-deck">
+    <iframe src="bid/deck.html" title="Slide thuyết trình" loading="lazy"></iframe>
+  </section>
+</main>
+
+<script>
+(function(){
+  var buttons = Array.prototype.slice.call(document.querySelectorAll('.tab-btn'));
+  var panes = Array.prototype.slice.call(document.querySelectorAll('.pane'));
+
+  function activate(targetId){
+    buttons.forEach(function(b){ b.classList.toggle('active', b.dataset.target === targetId); });
+    panes.forEach(function(p){ p.classList.toggle('active', p.id === targetId); });
+    history.replaceState(null, '', '#' + targetId);
+  }
+
+  buttons.forEach(function(btn){
+    btn.addEventListener('click', function(){ activate(btn.dataset.target); });
+  });
+
+  var initial = location.hash.replace('#', '');
+  if (initial && document.getElementById(initial)) { activate(initial); }
+})();
+</script>
+
+</body>
+</html>