# Social Networking

Three-column creative community/portfolio app (Chinese UI) rendered in JS with PDRenderKit 1.0.1: albums, services, cases, posts, bookmarks, inbox and popups.

## Overview

| Item | Value |
|---|---|
| Created | 2023-07-30 |
| Category | App & Platform Examples |
| HTML files | `index.html` |
| Source | [target/20230730](https://github.com/pardnio/demo-web/tree/main/target/20230730) |

## Live Preview

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

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

## Page Sections

| Section | Description |
|---|---|
| Top nav | image/logo.svg, title '作品分享', '張貼' (post) button and avatar. |
| Left tab bar (BODY_LEFT / LEFT_TAB) | User card and tabs with inline SVG icons: 作品分享, 自我介紹, 案件發包, 社群貼文, 收藏, 通知, 設定, plus a 張貼 button. |
| Center top carousel (INDEX_TOP) | Horizontal strip of album cards (avatar, cover, caption) with left/right arrows and dots. |
| Center toolbar (INDEX_BUTTON) | 張貼 / 收藏 / 已張貼 buttons, 活躍度 sort, list/grid toggle, hashtag keyword input. |
| Center list (INDEX_LIST) | Album entries with author, title, count/views/date, a photo collage whose layout depends on photo count (total=1..6), description, like/bookmark/share buttons. |
| Right inbox (.right .message) | 收件匣 header, name search, 全部 / 未讀 tabs and a list of 5 chat contacts. |
| Popups (.pop) | albumPop: single album detail with author contacts (image/icon/contact/*.svg); photoPop: full-screen photo viewer with thumbnails; notification panel. |

## Interactions

- js/index.js: mock data arrays chats, albums, services, cases, posts generated at load (services/posts shuffled randomly).
- albumIndex / serviceIndex / caseIndex / postIndex / bookmarkIndex switch the center column and set LEFT_TAB [index]; albumGrid etc. toggle grid view.
- Carousel arrows clamp and write [index] on INDEX_TOP; albumPop/photoPop create .pop overlays closed with a timed removal; photoPop prev/next update [index] and scrollTo() animates thumbnail scroll with setInterval.
- notifyList(show) toggles a #POP_NOTIFY panel, remembering and restoring the previous left-tab index; body[ready] set to 1 after 50ms.

## 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 |
| PDRenderKit | 1.0.1 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.1/dist/PDRenderKit.js |
| Google Analytics (gtag.js) | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| Noto Sans TC (font-family only) | - | declared in SCSS; no font stylesheet is linked, so it relies on a locally installed font or the sans-serif fallback |

## Styling

| Item | Value |
|---|---|
| SCSS entry | `sass/index.scss` |
| Output CSS | `css/index.css` |
| Partials | `_body-left.scss`, `_body-right.scss`, `_pop-single.scss`, `body-center/_index.scss`, `body-center/_button.scss`, `body-center/top/_index.scss`, `body-center/top/_user.scss`, `body-center/top/_album.scss`, `body-center/top/_service.scss`, `body-center/list/_index.scss`, `body-center/list/_heading.scss`, `body-center/list/_button.scss`, `body-center/list/_album.scss`, `body-center/list/_album-grid.scss`, `body-center/list/_service.scss`, `body-center/list/_service-grid.scss`, `body-center/list/_post.scss`, `body-center/list/_case.scss`, `body-center/list/cover/_total-1..6.scss`, `single/_left.scss`, `single/_right.scss`, `animation/_bg-move.scss (not imported)`, `animation/_pie.scss (not imported)` |

index.scss defines --width-max: 1024px and --bgcolor, then imports body-left (sticky tab bar), body-center (top carousel, toolbar, list types, collage covers per photo count), body-right (sticky inbox) and pop-single (album popup reusing single/_left and single/_right). The animation partials are not imported and do not appear in css/index.css.

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

## Techniques

- PDRenderKit JS DOM building with element ids held in constants (BODY_LEFT, INDEX_TOP, LEFT_TAB...) and "id".$ lookups.
- Inline SVG icon strings for the tab bar; Font Awesome icons via 'fa-...'.$fa helpers.
- Attribute selectors drive layout: [total="n"] collage positioning with nth-child, [index] tab highlight via SCSS @for; position: sticky side columns.
- Breakpoints 360/480/640/800/1024/1280/1440px.

## External Assets

- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (avatars and photos)
- local: image/logo.svg, image/icon/contact/{email,line,instagram,behance,facebook,github,phone}.svg (relative)
- https://pardn.io/image/head.png (favicon), https://pardn.io/web-template/image/20230730.jpg (og/twitter image), canonical/og:url https://pardn.io/web-template/target/20230730

## Related

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