Static Instagram-style web app built entirely in JS with PDExtension DOM helpers: feed, stories, explore, DMs, notifications, profiles and post popups.
Overview
| Item | Value |
|---|---|
| Created | 2022-10-12 |
| Category | App & Platform Examples |
| HTML files | index.html |
| Source | target/20221012 |
Live Preview
Page Sections
| Section | Description |
|---|---|
| Side / bottom nav | Generated by initNav(): logo (image/logo.svg), 首頁 / 探索 / 訊息 links via ?pg=, 通知 and 建立 toggle buttons, profile link, 更多 button, plus a compact mobile top bar (div#nav). |
| Home feed (default) | showHomePage(): story strip with new / seen rings, post cards with author, swipeable multi-photo carousel with dots and arrows, like / comment / share / bookmark actions and comment input, plus a side column with account switch, 推薦用戶 suggestions and footer links. |
| Explore (?pg=search) | showSearch(): image grid tiles showing like and comment counts; clicking a tile opens the post popup (showPopPost). |
| Messages (?pg=message) | showMessage(): conversation list and chat view with auto-growing textarea and send / emoji / image / like buttons. |
| Notifications panel | showNotify(): 今天 / 昨天 groups of like and comment notifications in #nav-notify. |
| Profile (?pg=user&uid=) | showUser(): avatar, name, follower / following counts, bio, link, story highlights (新焦點動態) and 貼文 / 我的珍藏 / 已標注 tabs over a post grid. |
| Post page / popups | showPost(pid) full post page (?pg=post&pid=), showPopPost() modal #pop, showPopStory() full-screen story viewer #pop-story with prev / next and reply input. |
Interactions
- Query-param routing: init() reads ?pg= (search / message / user / post) and uid / pid, and each view pushes history via URL.param({...})._history().
- Photo carousel: scroll-snapping by debounced scroll handler (100ms) that rounds scrollLeft to the nearest page, updates dot sel attribute and hides / shows arrows.
- Notification and create buttons toggle an 'on' attribute and switch far / fas icons; opening create closes notifications.
- Chat textarea auto-resizes on input and keeps the message list scrolled to bottom; focus / blur swaps send and icon buttons.
- Story viewer prev / next buttons toggle sel / ani / unsel classes with timeouts and scroll the strip horizontally.
Dependencies
| Name | Version | Source |
|---|---|---|
| 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 |
Styling
| Item | Value |
|---|---|
| SCSS entry | sass/index.scss |
| Output 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 |
Entry imports nav / home / search / message / post / user / pop inside a fixed full-viewport body; home and user partials pull in the story, info, post-list and user sub-partials. body::after prints a 'Pardn Ltd' badge.
cd target/20221012
npx sass sass/index.scss css/index.css --no-source-map || exit 1
Techniques
- String-to-DOM builder: "div#id.class"._(attrs, children) creates elements; chained ._click / ._scroll / ._input / .go(url) helpers.
- Attribute-driven state (sel, on) styled by CSS attribute selectors.
- Mobile-first breakpoints mirroring Instagram (470 / 735 / 750 / 785 / 1000 / 1112 / 1280px) and pointer-fine hover rules.
- CSS variables on :root (--col-border, --col-text-lighter, --col-text-lightest).
External Assets
https://fakeimg.pl/1024/282828/eae0d0/?text=samplehttps://pardn.io/image/head.pnghttps://pardn.io/web-template/image/20221012.jpg- image/logo.svg, image/logo_fff.svg (relative, included in folder)