請提供兩個完整的檔案程式碼：`Code.gs` (後端) 和 `index.html` (前端)，需求如下：

### 1. 系統架構與流程

- 平台：Google Apps Script (Web App)。

- 資料儲存：將使用者輸入的文字存入綁定的 Google Sheet。

- A 欄：存入時間戳記。

- B 欄：存入文字內容。

- 重要：讀取與寫入時請「不要」預設有標題列，從第 1 列開始讀寫，以免漏掉資料。

- 運作流程：

1. 網頁載入時，自動讀取 Sheet B 欄所有歷史資料並生成文字雲。

2. 使用者在輸入框輸入文字，按下「送出」。

3. 程式將文字傳回後端存入 Sheet。

4. 存檔成功後，前端自動清空輸入框，並重新讀取全班資料更新文字雲。

### 2. 前端介面設計 (index.html)

- CSS 框架：使用 Tailwind CSS (CDN) 進行快速排版。

- 視覺風格：

- UI 主色調：暖橘色系 (Warm Orange)、米白色背景 (#FDFBF7)，呈現溫暖的教室氛圍。

- 響應式設計 (RWD)：必須完美支援手機與電腦版面。手機上標題與按鈕會自動堆疊，畫布寬度自動適應。

- 字體設定：

- 強制引入 Google Fonts `Noto Sans TC`。

- CSS font-family 順序：`'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif`，確保中文字體在各裝置都能正確顯示。

### 3. 文字雲核心邏輯

- 函式庫：使用 `wordcloud2.js` (CDN)。

- 分詞邏輯：

- 為了相容性，**不要**使用 `Intl.Segmenter`。

- 請使用正則表達式 (Regex) 依據「換行」、「空白」與「常見標點符號」來切割字串。

- 過濾規則：只保留含有「中文、英文、數字」的詞彙。**不要**過濾虛字（如：的、是、我），所有輸入的有效文字都要顯示。

- 文字雲配色：文字顏色請使用「多樣化鮮豔色系」（包含橘、紅、藍、綠、紫、深灰），讓圖表活潑易讀。

- 文字大小：預設字體要夠大 (Size Factor 預設約 8)，並提供拉桿 (Range Slider) 讓使用者調整大小。

- 功能按鈕：

- 「送出」按鈕。

- 「強制重繪」按鈕。

- 「下載圖片」按鈕 (將 Canvas 下載為 PNG)。

### 4. 程式碼要求

- Code.gs：包含 `doGet` (回傳 HTML)、`saveToSheet` (存檔)、`getDataFromSheet` (讀取 B 欄所有資料)。

- index.html：包含完整的 HTML/CSS/JS。需加入 `document.fonts.ready` 檢測，確保字體載入後才繪製 Canvas，避免中文字消失。

請直接給我這兩個檔案的完整程式碼，不需要過多的解釋。

### 1. 技術架構要求：

* 單一檔案：所有 HTML、CSS、JavaScript 必須寫在同一個 .html 檔案中，不依賴外部圖書館。

* 切圖技術：不使用 Canvas 切割，請使用 CSS `background-image` 配合 `background-position` 與 `background-size` 的技巧來模擬拼圖塊。

* RWD 自適應：網頁需適應手機與電腦，最大寬度設為 600px，保持良好的視覺比例。

### 2. 核心功能邏輯：

* 智慧網格計算：當載入圖片時，程式需讀取圖片原始長寬比 (Aspect Ratio)，自動計算最適合的「行數 (Rows)」與「列數 (Cols)」。

* 目標總片數控制在 12~16 片左右（例如 3x4 或 4x4）。

* 拼圖容器的比例需隨著圖片比例自動調整。

* 雙重操作模式：

* 電腦版：支援直覺的「拖放 (Drag and Drop)」交換拼圖位置。

* 觸控/行動版：支援「點選交換 (Click to Swap)」，點選 A 塊再點選 B 塊即可交換，以優化觸控體驗。

* 遊戲流程：網頁載入或切換關卡時，自動打亂拼圖順序。

* 勝利判定：每次移動後檢查是否完成，若完成請跳出簡單美觀的 Modal 恭喜視窗，並有按鈕可重新開始。

### 3. 使用者介面 (UI) 與功能：

* 關卡選擇器：請在控制區製作一個 `<select>` 下拉選單，包含以下預設關卡：

* 預設關卡 1：`https://i.ibb.co/cXX0gR0M/edited-image.png`

* 預設關卡 2：`https://raw.githubusercontent.com/mathruffian-dot/teaching-assets/refs/heads/main/%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202025-12-10%20103628.png`

* 自訂圖片上傳：提供一個檔案上傳按鈕 (input type="file")，讓使用者能上傳自己的圖片，並立即根據新圖片重新計算網格生成拼圖。

* 輔助功能：

* 查看原圖：一個按鈕，按住時顯示完整圖片（偷看），放開後變回拼圖。

* 重新開始：一個按鈕，重新打亂當前拼圖。

### 4. 視覺樣式設計 (CSS)：

* 配色風格：適合國中小的活潑風格。主色調使用亮橘色 (#FF9F1C)，輔助色使用藍綠色 (#2EC4B6)，背景色為白色。

* 全頁背景圖：請使用 CSS `body::before` 偽元素，將以下圖片設為全螢幕背景，並設定 `opacity: 0.5` (50% 透明度) 與 `z-index: -1`，營造浮水印質感。

* 背景圖連結：`https://raw.githubusercontent.com/mathruffian-dot/teaching-assets/refs/heads/main/image.avif`

* 拼圖塊樣式：選取時要有發光或邊框效果，拼圖之間保留微小間隙 (gap)。

請生成完整的程式碼。