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 |
Live Preview
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.
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
