Update index.html

index.html

@@ -1,19 +1,315 @@
-<!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-Hant">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>即時互動文字雲 - 教師主控端</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
+    background: #F1F5F9; color: #1E293B; min-height: 100vh;
+  }
+  header {
+    background: #fff; padding: 14px 22px;
+    border-bottom: 2px solid #E2E8F0;
+    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
+  }
+  header h1 { font-size: 20px; font-weight: 800; color: #F97316; }
+  .badge { background: #F97316; color: #fff; font-size: 16px; font-weight: 700; padding: 6px 14px; border-radius: 20px; }
+  .btn { padding: 7px 16px; border: none; border-radius: 8px; background: #E2E8F0; color: #1E293B; cursor: pointer; font-size: 14px; transition: .2s; }
+  .btn:hover { filter: brightness(.94); }
+  .btn.primary { background: #F97316; color: #fff; }
+  .btn.danger { background: #EF4444; color: #fff; }
+  .qr-box { margin-left: auto; text-align: right; font-size: 12px; color: #475569; }
+
+  #question-bar {
+    display: flex; align-items: center; gap: 12px;
+    padding: 12px 22px; background: #FFF7ED; border-bottom: 1px solid #FED7AA;
+  }
+  #question-bar input {
+    flex: 1; padding: 9px 12px; font-size: 16px;
+    border: 1px solid #FDBA74; border-radius: 8px; outline: none;
+  }
+  #question-preview { font-size: 14px; color: #EA580C; }
+
+  #cloud-container {
+    position: relative; width: calc(100% - 32px);
+    height: calc(100vh - 300px); min-height: 420px;
+    margin: 16px; background: #fff; border-radius: 16px; overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0,0,0,.06);
+  }
+  #word-canvas { width: 100%; height: 100%; display: block; cursor: pointer; }
+
+  #stats { padding: 0 22px 10px; font-size: 14px; color: #475569; }
+  #stats b { color: #F97316; font-size: 18px; }
+
+  /* 詞彙選單 overlay */
+  .overlay {
+    display: none; position: fixed; inset: 0; z-index: 1000;
+    background: rgba(15,23,42,.55); align-items: center; justify-content: center;
+  }
+  .panel {
+    background: #fff; padding: 28px 32px; border-radius: 20px;
+    max-width: 560px; width: 90%; max-height: 72vh; overflow-y: auto;
+    box-shadow: 0 20px 60px rgba(0,0,0,.3);
+  }
+  .panel h3 { margin-bottom: 16px; color: #1E293B; }
+  .word-chip {
+    display: inline-block; margin: 5px; padding: 8px 14px; font-size: 15px;
+    background: #FEF3C7; border: 1px solid #FCD34D; border-radius: 20px; cursor: pointer;
+  }
+  .word-chip:hover { background: #FDE68A; }
+  .panel-close { margin-top: 16px; text-align: right; }
+
+  /* 放大卡 */
+  #zoom-card { text-align: center; }
+  #zoom-text { font-size: 60px; font-weight: 900; color: #1E293B; word-break: break-word; }
+  #zoom-actions { margin-top: 28px; display: flex; gap: 12px; justify-content: center; }
+
+  /* 浮水印超連結列(DOM) */
+  #credit-bar {
+    position: fixed; left: 14px; bottom: 12px; z-index: 999;
+    background: rgba(255,255,255,.9); padding: 6px 14px; border-radius: 8px;
+    border: 1px solid #d5dbe5; font-size: 13px; color: #475569;
+  }
+  #credit-bar a { color: #4361a8; text-decoration: none; font-weight: 600; }
+  #credit-bar a:hover { text-decoration: underline; }
+</style>
+</head>
+<body>
+
+<header>
+  <h1>☁️ 即時互動文字雲</h1>
+  <span class="badge">房號:<span id="room-span">----</span></span>
+  <button class="btn" id="btn-lock">🔒 鎖定房間</button>
+  <button class="btn" id="btn-multiple">多重送出:關</button>
+  <button class="btn" id="btn-fullscreen">⛶ 全螢幕</button>
+  <button class="btn" id="btn-screenshot">📸 截圖</button>
+  <button class="btn" id="btn-csv">📄 匯出 CSV</button>
+  <button class="btn danger" id="btn-reset">🗑 清除重來</button>
+  <div class="qr-box"><div id="qr"></div><div id="join-link" style="max-width:180px;word-break:break-all;margin-top:4px;"></div></div>
+</header>
+
+<div id="question-bar">
+  <input id="q-input" type="text" placeholder="輸入討論題目,學生端將即時同步顯示…">
+  <button class="btn primary" id="q-send">送出題目</button>
+  <span id="question-preview"></span>
+</div>
+
+<div id="stats">總詞彙數量:<b id="word-count">0</b></div>
+
+<div id="cloud-container"><canvas id="word-canvas"></canvas></div>
+
+<!-- 詞彙選單 -->
+<div class="overlay" id="pick-overlay">
+  <div class="panel">
+    <h3>選擇要放大��詞彙:</h3>
+    <div id="pick-list"></div>
+    <div class="panel-close"><button class="btn" onclick="hidePick()">取消</button></div>
+  </div>
+</div>
+
+<!-- 放大卡 -->
+<div class="overlay" id="zoom-overlay">
+  <div class="panel" id="zoom-card">
+    <div id="zoom-text"></div>
+    <div id="zoom-actions">
+      <button class="btn danger" id="zoom-delete">🗑 刪除此詞</button>
+      <button class="btn" id="zoom-close">關閉</button>
+    </div>
+  </div>
+</div>
+
+<!-- 浮水印:只有「臉書社團:萬物皆數」是連結 -->
+<div id="credit-bar">
+  程式設計者:精華國中 藍星宇 ·
+  <a href="https://www.facebook.com/groups/1554372228718393" target="_blank" rel="noopener">臉書社團:萬物皆數</a>
+</div>
+
+<script type="module">
+import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js';
+import { getFirestore, doc, setDoc, updateDoc, deleteField, onSnapshot } from 'https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js';
+
+const firebaseConfig = {
+  apiKey: "AIzaSyBaq7kJWERsUtcP6U8ugJK6YbdpXkqwRw0",
+  authDomain: "awei-lab.firebaseapp.com",
+  projectId: "awei-lab",
+  storageBucket: "awei-lab.firebasestorage.app",
+  messagingSenderId: "63459297039",
+  appId: "1:63459297039:web:d904ef831a4df32f4ae07a"
+};
+
+const app = initializeApp(firebaseConfig);
+const db  = getFirestore(app);
+
+const roomCode   = Math.floor(1000 + Math.random() * 9000).toString();
+let allowMultiple = false;
+let isLocked     = false;
+let words        = {};
+let isDrawing    = false;
+let drawQueue    = false;
+let selectedWord = null;
+
+const canvas    = document.getElementById('word-canvas');
+const container = document.getElementById('cloud-container');
+const roomRef   = doc(db, 'rooms', roomCode);
+
+await setDoc(roomRef, { roomCode, locked: false, allowMultiple: false, words: {}, question: '' }, { merge: true });
+document.getElementById('room-span').textContent = roomCode;
+
+onSnapshot(roomRef, (snap) => {
+  const data = snap.data();
+  if (!data) return;
+  words          = data.words || {};
+  isLocked       = data.locked || false;
+  allowMultiple  = data.allowMultiple || false;
+  document.getElementById('question-preview').textContent = data.question ? '📌 目前題目:' + data.question : '';
+  document.getElementById('word-count').textContent = Object.keys(words).length;
+  document.getElementById('btn-lock').textContent = isLocked ? '🔓 解除鎖定' : '🔒 鎖定房間';
+  document.getElementById('btn-multiple').textContent = '多重送出:' + (allowMultiple ? '開' : '關');
+  queueDraw();
+});
+
+function queueDraw() {
+  if (isDrawing) { drawQueue = true; return; }
+  drawCloud();
+}
+
+function drawCloud() {
+  canvas.width  = container.clientWidth;
+  canvas.height = container.clientHeight;
+  const list = Object.entries(words).map(([word, count]) => [word, count]);
+
+  if (list.length === 0) {
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.font = '24px "Noto Sans TC"';
+    ctx.fillStyle = '#CBD5E1'; ctx.textAlign = 'center';
+    ctx.fillText('等待學生送出詞彙…', canvas.width/2, canvas.height/2);
+    return;
+  }
+
+  isDrawing = true;
+  import('https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.2/wordcloud2.min.js')
+    .then(() => WordCloud(canvas, {
+      list, gridSize: 8,
+      weightFactor: (w) => Math.max(1, Math.min(40, Math.pow(w, 1.3) * 12)),
+      fontFamily: 'Noto Sans TC, Microsoft JhengHei, sans-serif',
+      color: () => ['#F97316','#3B82F6','#10B981','#8B5CF6','#EF4444','#F59E0B','#06B6D4'][Math.floor(Math.random()*7)],
+      rotateRatio: 0.2, minSize: 0, shape: 'circle', ellipticity: 0.7,
+      backgroundColor: '#ffffff'
+    }));
+}
+
+canvas.addEventListener('wordcloudstop', function onStop() {
+  drawWatermark();
+  isDrawing = false;
+  canvas.removeEventListener('wordcloudstop', onStop);
+  if (drawQueue) { drawQueue = false; setTimeout(drawCloud, 500); }
+});
+
+// 浮水印畫在 canvas(僅示意;真正可點連結在下方 DOM)
+function drawWatermark() {
+  const ctx = canvas.getContext('2d');
+  const w = canvas.width, h = canvas.height;
+  const fontSize = Math.max(10, Math.min(15, w/70));
+  ctx.textAlign = 'right'; ctx.textBaseline = 'bottom';
+  ctx.font = `bold ${fontSize}px 'Noto Sans TC'`;
+  ctx.fillStyle = 'rgba(100,100,100,0.45)';
+  ctx.fillText('程式設計者:精華國中 藍星宇', w - 16, h - 14);
+  ctx.font = `500 ${Math.max(9, fontSize-2)}px 'Noto Sans TC'`;
+  ctx.fillText('萬物皆數  fb.com/groups/...', w - 16, h - 14 - (fontSize + 6));
+}
+
+// ---- 點擊 canvas → 彈出詞彙選單(避免命中問題) ----
+canvas.addEventListener('click', () => {
+  if (Object.keys(words).length === 0) return;
+  const listEl = document.getElementById('pick-list');
+  listEl.innerHTML = '';
+  Object.keys(words).sort((a,b) => words[b] - words[a]).forEach(word => {
+    const chip = document.createElement('span');
+    chip.className = 'word-chip';
+    chip.textContent = word;
+    chip.addEventListener('click', () => { hidePick(); showZoom(word); });
+    listEl.appendChild(chip);
+  });
+  document.getElementById('pick-overlay').style.display = 'flex';
+});
+function hidePick(){ document.getElementById('pick-overlay').style.display = 'none'; }
+
+// ---- 放大顯示 ----
+function showZoom(word) {
+  selectedWord = word;
+  document.getElementById('zoom-text').textContent = word;
+  document.getElementById('zoom-overlay').style.display = 'flex';
+}
+function hideZoom(){ document.getElementById('zoom-overlay').style.display = 'none'; selectedWord = null; }
+document.getElementById('zoom-close').addEventListener('click', hideZoom);
+document.getElementById('zoom-overlay').addEventListener('click', e => {
+  if (e.target === document.getElementById('zoom-overlay')) hideZoom();
+});
+document.getElementById('zoom-delete').addEventListener('click', async () => {
+  if (!selectedWord) return;
+  await updateDoc(roomRef, { words: { [selectedWord]: deleteField() } });
+  hideZoom();
+});
+
+// ---- 控制 ----
+document.getElementById('btn-lock').addEventListener('click', async () => {
+  isLocked = !isLocked;
+  await updateDoc(roomRef, { locked: isLocked });
+});
+document.getElementById('btn-multiple').addEventListener('click', async () => {
+  allowMultiple = !allowMultiple;
+  await updateDoc(roomRef, { allowMultiple });
+});
+document.getElementById('q-send').addEventListener('click', async () => {
+  const text = document.getElementById('q-input').value.trim();
+  await updateDoc(roomRef, { question: text });
+});
+document.getElementById('btn-fullscreen').addEventListener('click', () => {
+  if (!document.fullscreenElement) document.documentElement.requestFullscreen();
+  else document.exitFullscreen();
+});
+document.getElementById('btn-screenshot').addEventListener('click', () => {
+  const temp = document.createElement('canvas');
+  temp.width = canvas.width; temp.height = canvas.height;
+  const t = temp.getContext('2d');
+  t.fillStyle = '#F8FAFC'; t.fillRect(0,0,temp.width,temp.height);
+  t.drawImage(canvas, 0, 0);
+  const a = document.createElement('a');
+  a.href = temp.toDataURL('image/png');
+  a.download = `即時互動文字雲_${roomCode}.png`;
+  a.click();
+});
+document.getElementById('btn-csv').addEventListener('click', () => {
+  const rows = [['詞彙','次數'], ...Object.entries(words)];
+  const csv  = rows.map(r => r.map(v => `"${String(v).replace(/"/g,'""')}"`).join(',')).join('\n');
+  const blob = new Blob(['\uFEFF'+csv], { type:'text/csv;charset=utf-8;' });
+  const u = URL.createObjectURL(blob);
+  const a = document.createElement('a'); a.href = u; a.download = `文字雲_${roomCode}.csv`; a.click();
+  URL.revokeObjectURL(u);
+});
+document.getElementById('btn-reset').addEventListener('click', async () => {
+  if (confirm('確定清除所有詞彙並重新開始?')) await updateDoc(roomRef, { words: {} });
+});
+
+// ---- QR Code ----
+import('https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js').then(() => {
+  const joinUrl = `${location.origin}${location.pathname.replace(/[^/]*$/, '')}guest.html?room=${roomCode}`;
+  document.getElementById('join-link').textContent = joinUrl;
+  new QRCode(document.getElementById('qr'), { text: joinUrl, width: 90, height: 90 });
+});
+</script>
+
+<script>
+window.MathJax = {
+  tex: { inlineMath: [['$','$'],['\\(','\\)']], displayMath: [['$$','$$'],['\\[','\\]']], processEscapes: true },
+  options: { skipHtmlTags: ['script','noscript','style','textarea','pre'] }
+};
+</script>
+<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
+
+</body>
+</html>