Instagram 仿製

完全以 JS 與 PDExtension DOM 輔助函式產生的仿 Instagram 靜態網頁應用：動態、限時動態、探索、私訊、通知、個人頁與貼文彈窗。

概要

區塊	說明
側邊／底部導覽	由 initNav() 產生：Logo（image/logo.svg）、以 ?pg= 切換的首頁／探索／訊息、通知與建立切換鈕、個人檔案連結、更多按鈕，以及行動版精簡頂列（div#nav）。
首頁動態（預設）	showHomePage()：限時動態列（新／已看外框）、貼文卡（作者、可滑動多圖輪播與指示點及左右鈕、讚／留言／分享／收藏與留言輸入），以及側欄帳號切換、推薦用戶與頁尾連結。
探索（?pg=search）	showSearch()：圖片格線，每格顯示讚數與留言數；點擊開啟貼文彈窗（showPopPost）。
訊息（?pg=message）	showMessage()：對話列表與聊天畫面，含自動增高 textarea 與傳送／表情／圖片／愛心按鈕。
通知面板	showNotify()：於 #nav-notify 依今天／昨天分組顯示按讚與留言通知。
個人頁（?pg=user&uid=）	showUser()：頭像、名稱、粉絲／追蹤數、簡介、連結、精選動態（新焦點動態）與貼文／我的珍藏／已標注分頁的貼文格線。
貼文頁／彈窗	showPost(pid) 完整貼文頁（?pg=post&pid=）、showPopPost() 彈窗 #pop、showPopStory() 全螢幕限時動態檢視 #pop-story，含上一則／下一則與回覆輸入。

查詢參數路由：init() 讀取 ?pg=（search / message / user / post）與 uid / pid，各畫面以 URL.param({...})._history() 推入歷史紀錄。
圖片輪播：以 100ms debounce 的 scroll 事件將 scrollLeft 對齊最近頁，更新指示點 sel 屬性並切換左右鈕顯示。
通知與建立按鈕切換 on 屬性並替換 far / fas 圖示；開啟建立時會關閉通知。
聊天 textarea 依輸入自動增高並讓訊息列表保持捲到底；focus / blur 切換傳送鈕與圖示鈕。
限時動態上一則／下一則按鈕以 timeout 切換 sel / ani / unsel class 並水平捲動。

名稱	版本	來源
Font Awesome Free	6.5.2	https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css
PDExtension.js (local; prototype extensions on Array / Object / Number / URL / String / HTMLElement, e.g. "tag#id.class"._(), _click, _history)	-	js/PDExtension.js
js/index.js (local app code with sample data)	-	js/index.js

項目	內容
SCSS 入口	`sass/index.scss`
輸出 CSS	`css/index.css`
Partials	`_nav.scss`, `_home.scss`, `_homeStory.scss`, `_homeInfo.scss`, `_postListTop.scss`, `_postListCenter.scss`, `_postListBottom.scss`, `_postListRow.scss`, `_search.scss`, `_message.scss`, `_post.scss`, `_user.scss`, `_userTop.scss`, `_userList.scss`, `_pop.scss`

入口在固定滿版 body 內引入 nav / home / search / message / post / user / pop；home 與 user 再引入限時動態、資訊、貼文列表與使用者子 partial。body::after 顯示「Pardn Ltd」標籤。

cd target/20221012
npx sass sass/index.scss css/index.css --no-source-map || exit 1

字串轉 DOM 建構器："div#id.class"._(attrs, children) 建立元素，串接 ._click / ._scroll / ._input / .go(url)。
以屬性（sel、on）表示狀態，由 CSS 屬性選擇器套樣式。
仿 Instagram 的行動優先斷點（470 / 735 / 750 / 785 / 1000 / 1112 / 1280px）與 pointer-fine hover 規則。
:root CSS 變數（--col-border、--col-text-lighter、--col-text-lightest）。