# Instagram

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](https://github.com/pardnio/demo-web/tree/main/target/20221012) |

## Live Preview

<iframe src="/target/20221012/" title="Instagram" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[Open the example in a new tab](/target/20221012/)

## 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&amp;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&amp;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.

```bash
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=sample`
- `https://pardn.io/image/head.png`
- `https://pardn.io/web-template/image/20221012.jpg`
- image/logo.svg, image/logo_fff.svg (relative, included in folder)

## Related

- [Project Structure](/project-structure)
- [Styling Workflow](/styling-workflow)
- [Frameworks](/frameworks)