505 lines
33 KiB
HTML
505 lines
33 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>发布动态 · 汪圈</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;450;510;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet" />
|
||
<style>
|
||
:root {
|
||
--bg: #14102b;
|
||
--bg-warm: #1c1442;
|
||
--surface: #1f1742;
|
||
--surface-2: #251c4a;
|
||
--surface-hi: #2d2255;
|
||
--fg: #f0e9ff;
|
||
--fg-2: #c7b9e0;
|
||
--muted: #8a7aab;
|
||
--border: #2e234a;
|
||
--accent: #d8b4ff;
|
||
--accent-2: #ffb3c8;
|
||
--primary: #ffd9a8;
|
||
--primary-on: #2a1d10;
|
||
--success: #8fe5b5;
|
||
--warn: #ffd166;
|
||
--font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
|
||
--font-body: 'Inter', system-ui, -apple-system, 'PingFang SC', sans-serif;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html, body { height: 100%; overflow: hidden; }
|
||
body {
|
||
background: radial-gradient(ellipse 70% 50% at 25% 0%, rgba(216, 180, 255, 0.10), transparent 60%), radial-gradient(ellipse 60% 50% at 75% 100%, rgba(255, 179, 200, 0.08), transparent 60%), #0a0719;
|
||
color: var(--fg);
|
||
font-family: var(--font-body);
|
||
-webkit-font-smoothing: antialiased;
|
||
display: grid; place-items: center;
|
||
overflow: auto;
|
||
}
|
||
.stage-wrap { padding: 24px; }
|
||
.phone { width: 390px; height: 844px; background: #0a0719; border-radius: 50px; position: relative; overflow: hidden; box-shadow: 0 60px 120px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 0 0 2px rgba(255, 255, 255, 0.04); }
|
||
.phone::before { content: ''; position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 110px; height: 32px; background: #000; border-radius: 9999px; z-index: 100; }
|
||
.screen { position: absolute; inset: 0; background: linear-gradient(180deg, #1c1442 0%, #14102b 100%); display: flex; flex-direction: column; overflow: hidden; }
|
||
.status-bar { height: 54px; flex-shrink: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 32px 8px; font: 600 15px/1 var(--font-body); }
|
||
.status-bar .right { display: flex; align-items: center; gap: 6px; }
|
||
.status-bar .ic-sig { display: flex; align-items: flex-end; gap: 2px; }
|
||
.status-bar .ic-sig span { width: 3px; background: var(--fg); border-radius: 1px; }
|
||
.status-bar .ic-sig span:nth-child(1) { height: 4px; } .status-bar .ic-sig span:nth-child(2) { height: 6px; } .status-bar .ic-sig span:nth-child(3) { height: 8px; } .status-bar .ic-sig span:nth-child(4) { height: 10px; }
|
||
.status-bar .ic-batt { width: 26px; height: 12px; border: 1.2px solid rgba(240, 233, 255, 0.6); border-radius: 3px; padding: 1.5px; }
|
||
.status-bar .ic-batt .fill { display: block; height: 100%; background: var(--fg); border-radius: 1px; width: 78%; }
|
||
|
||
/* WeChat mini program capsule */
|
||
.mp-capsule {
|
||
display: flex; align-items: center;
|
||
height: 28px; border-radius: 14px;
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||
overflow: hidden;
|
||
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
|
||
}
|
||
.mp-capsule .capsule-btn {
|
||
display: grid; place-items: center;
|
||
width: 32px; height: 28px;
|
||
background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--fg);
|
||
}
|
||
.mp-capsule .capsule-btn + .capsule-btn { border-left: 1px solid rgba(255, 255, 255, 0.12); }
|
||
.mp-capsule svg { width: 14px; height: 14px; }
|
||
|
||
.content { flex: 1; overflow-y: auto; padding-bottom: 40px; -webkit-overflow-scrolling: touch; }
|
||
.content::-webkit-scrollbar { display: none; }
|
||
|
||
/* top nav */
|
||
.top-nav { padding: 8px 16px 8px; display: flex; align-items: center; gap: 10px; }
|
||
.icon-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: transparent; border: 0; }
|
||
.icon-btn svg { width: 22px; height: 22px; color: var(--fg); }
|
||
.top-nav h1 { font-family: var(--font-display); font-size: 18px; font-weight: 600; flex: 1; text-align: center; }
|
||
.post-btn { display: block; width: 100%; padding: 14px 20px; border-radius: 14px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--primary-on); font: 600 15px/1 var(--font-body); border: 0; cursor: pointer; text-align: center; letter-spacing: 0.04em; transition: transform 200ms, opacity 200ms, box-shadow 200ms, filter 200ms; box-shadow: 0 6px 20px rgba(216, 180, 255, 0.25); }
|
||
.post-btn:hover:not(:disabled) { transform: scale(1.02); box-shadow: 0 10px 28px rgba(216, 180, 255, 0.4); }
|
||
.post-btn:active:not(:disabled) { transform: scale(0.99); }
|
||
.post-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
|
||
.post-btn:disabled { background: rgba(45, 34, 85, 0.4); color: var(--muted); cursor: not-allowed; box-shadow: none; }
|
||
.post-btn:disabled:hover { transform: none; }
|
||
|
||
.composer { padding: 0 20px; }
|
||
.author { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
|
||
.av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: var(--primary-on); font: 700 16px/1 var(--font-display); }
|
||
.author .col { flex: 1; }
|
||
.author .nm { font: 600 14px/1.2 var(--font-body); display: flex; align-items: center; gap: 6px; }
|
||
.author .level-badge { padding: 2px 6px; border-radius: 6px; background: rgba(216, 180, 255, 0.1); color: var(--accent); font: 500 9px/1 var(--font-display); letter-spacing: 0.04em; }
|
||
.author .sub { font: 400 11px/1.3 var(--font-body); color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
|
||
|
||
.input-area { min-height: 120px; padding: 8px 0; }
|
||
.input-area textarea {
|
||
width: 100%; min-height: 120px; background: transparent; border: 0; outline: 0;
|
||
color: var(--fg); font: 400 16px/1.5 var(--font-body); resize: none;
|
||
font-feature-settings: "tnum";
|
||
}
|
||
.input-area textarea::placeholder { color: var(--muted); }
|
||
.input-area textarea:focus-visible { outline: 0; }
|
||
.input-area .tag { color: var(--accent); font-weight: 500; }
|
||
|
||
/* images */
|
||
.images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
|
||
.img-slot { aspect-ratio: 1; border-radius: 12px; position: relative; overflow: hidden; cursor: pointer; }
|
||
.img-slot.filled-1 { background: radial-gradient(circle at 30% 40%, rgba(255, 217, 168, 0.6), transparent 50%), linear-gradient(135deg, #6b4f9a 0%, #3a2a6a 100%); }
|
||
.img-slot.filled-2 { background: radial-gradient(circle at 70% 50%, rgba(255, 179, 200, 0.5), transparent 60%), linear-gradient(135deg, #4a3a7a 0%, #251c4a 100%); }
|
||
.img-slot.filled-3 { background: radial-gradient(circle at 50% 30%, rgba(143, 229, 181, 0.4), transparent 60%), linear-gradient(135deg, #5a4a8a 0%, #2a1f4a 100%); }
|
||
.img-slot.filled-1::after, .img-slot.filled-2::after, .img-slot.filled-3::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.2), transparent 60%); }
|
||
.img-slot .x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); display: grid; place-items: center; color: var(--fg); font-size: 12px; z-index: 2; opacity: 0.85; transition: opacity 200ms, transform 200ms; border: 0; padding: 0; cursor: pointer; }
|
||
.img-slot:hover .x { opacity: 1; }
|
||
.img-slot .x:hover { transform: scale(1.1); }
|
||
.img-slot .x:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; opacity: 1; }
|
||
.img-slot .cover { position: absolute; left: 8px; top: 8px; padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px); font: 500 9px/1 var(--font-body); color: var(--fg); z-index: 2; }
|
||
.img-slot.add {
|
||
background: rgba(45, 34, 85, 0.3); border: 1.5px dashed rgba(216, 180, 255, 0.2);
|
||
display: grid; place-items: center; gap: 4px;
|
||
color: var(--muted);
|
||
}
|
||
.img-slot.add .ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
|
||
.img-slot.add .ic svg { width: 18px; height: 18px; }
|
||
.img-slot.add .lbl { font: 500 10px/1 var(--font-body); }
|
||
|
||
/* section label */
|
||
.label-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
|
||
.label-row .ttl { font: 600 11px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
|
||
.label-row .right { font: 400 11px/1 var(--font-body); color: var(--accent); }
|
||
|
||
/* tags */
|
||
.tag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
|
||
.tag-chip {
|
||
padding: 6px 12px; border-radius: 999px; background: rgba(45, 34, 85, 0.4);
|
||
border: 1px solid rgba(216, 180, 255, 0.1); color: var(--fg-2);
|
||
font: 500 12px/1 var(--font-body); cursor: pointer; transition: all 200ms;
|
||
display: flex; align-items: center; gap: 4px;
|
||
}
|
||
.tag-chip .ic { opacity: 0.6; }
|
||
.tag-chip.act { background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--primary-on); border-color: transparent; }
|
||
.tag-chip.act .ic { opacity: 1; }
|
||
|
||
/* rows */
|
||
.rows { background: rgba(45, 34, 85, 0.4); border-radius: 18px; border: 1px solid rgba(216, 180, 255, 0.06); overflow: hidden; }
|
||
.row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; border-bottom: 1px solid rgba(216, 180, 255, 0.04); transition: background 200ms; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; color: inherit; font: inherit; }
|
||
.row:last-child { border-bottom: 0; }
|
||
.row:hover, .row:focus-visible { background: rgba(45, 34, 85, 0.6); }
|
||
.row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
|
||
.row .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
|
||
.row .ic svg { width: 16px; height: 16px; color: var(--primary-on); }
|
||
.row .ic.m1 { background: linear-gradient(135deg, #ffb3c8, #ffd9a8); }
|
||
.row .ic.m2 { background: linear-gradient(135deg, #d8b4ff, #a4d4ff); }
|
||
.row .ic.m3 { background: linear-gradient(135deg, #8fe5b5, #d8b4ff); }
|
||
.row .ic.m4 { background: linear-gradient(135deg, #ffd9a8, #ffb3c8); }
|
||
.row .nm { font: 500 14px/1.2 var(--font-body); flex: 1; }
|
||
.row .right { display: flex; align-items: center; gap: 8px; }
|
||
.row .val { font: 400 12px/1 var(--font-body); color: var(--muted); }
|
||
.row .val.has-avatar { display: flex; align-items: center; gap: 6px; }
|
||
.row .val .pet-av { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #ffd9a8, #ffb3c8); }
|
||
.row .chev { color: var(--muted); font-size: 18px; line-height: 1; }
|
||
|
||
/* sticky bottom panel */
|
||
.sticky { position: sticky; bottom: 0; padding: 12px 20px 20px; background: linear-gradient(180deg, transparent 0%, var(--bg) 30%); display: flex; flex-direction: column; gap: 12px; }
|
||
.sticky-row { display: flex; align-items: center; gap: 10px; }
|
||
.toolbar { flex: 1; display: flex; gap: 6px; }
|
||
.tool { width: 40px; height: 40px; border-radius: 12px; background: rgba(45, 34, 85, 0.4); display: grid; place-items: center; cursor: pointer; border: 1px solid rgba(216, 180, 255, 0.06); color: var(--fg-2); padding: 0; transition: background 200ms, border-color 200ms; }
|
||
.tool:hover, .tool:focus-visible { background: rgba(45, 34, 85, 0.7); border-color: rgba(216, 180, 255, 0.18); }
|
||
.tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||
.tool svg { width: 18px; height: 18px; }
|
||
.word-count { font: 500 11px/1 var(--font-body); color: var(--muted); padding: 0 4px; font-variant-numeric: tabular-nums; transition: color 200ms; }
|
||
.word-count.warn { color: var(--warn); }
|
||
|
||
/* switch (proper button) */
|
||
.switch { width: 36px; height: 22px; background: var(--muted); border-radius: 11px; position: relative; cursor: pointer; border: 0; padding: 0; flex-shrink: 0; transition: background 200ms; }
|
||
.switch[aria-checked="true"] { background: var(--accent); }
|
||
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--fg); border-radius: 50%; transition: transform 200ms cubic-bezier(0.2, 0, 0, 1); }
|
||
.switch[aria-checked="true"]::after { transform: translateX(14px); }
|
||
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||
|
||
/* notice card (community rules) */
|
||
.notice { margin-top: 16px; padding: 10px 12px; background: rgba(255, 217, 168, 0.08); border-radius: 10px; border: 1px solid rgba(255, 217, 168, 0.15); display: flex; align-items: center; gap: 8px; }
|
||
.notice svg { width: 14px; height: 14px; color: var(--primary); flex-shrink: 0; }
|
||
.notice .text { font: 400 11px/1.5 var(--font-body); color: var(--fg-2); }
|
||
|
||
/* success modal (centered variant) */
|
||
.sheet-bg.success-modal { align-items: center; }
|
||
.success-modal .sheet { border-radius: 24px; max-width: 320px; margin: 0 auto; text-align: center; padding: 32px 24px; }
|
||
.success-modal .check-circle { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); display: grid; place-items: center; margin: 0 auto 16px; box-shadow: 0 10px 24px rgba(216, 180, 255, 0.3); color: var(--primary-on); }
|
||
.success-modal .check-circle svg { width: 32px; height: 32px; }
|
||
.success-modal .actions { display: flex; gap: 10px; margin-top: 20px; }
|
||
.success-modal .btn { flex: 1; padding: 12px; border-radius: 12px; font: 600 14px/1 var(--font-body); border: 0; cursor: pointer; text-align: center; transition: transform 200ms, opacity 200ms; }
|
||
.success-modal .btn-primary { background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--primary-on); }
|
||
.success-modal .btn-secondary { background: rgba(45, 34, 85, 0.4); color: var(--fg); border: 1px solid rgba(216, 180, 255, 0.1); }
|
||
.success-modal .btn:hover { transform: scale(1.02); }
|
||
.success-modal .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||
|
||
/* sheet overlays */
|
||
.sheet-bg { position: absolute; inset: 0; background: rgba(10, 7, 25, 0.6); backdrop-filter: blur(8px); z-index: 200; display: none; align-items: flex-end; }
|
||
.sheet-bg.show { display: flex; }
|
||
.sheet { width: 100%; background: var(--surface-2); border-radius: 24px 24px 0 0; padding: 16px 16px 32px; transform: translateY(0); animation: slideUp 280ms cubic-bezier(0.2, 0, 0, 1); border-top: 1px solid rgba(216, 180, 255, 0.1); }
|
||
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
|
||
.sheet-grabber { width: 36px; height: 4px; background: var(--muted); border-radius: 2px; margin: 0 auto 16px; opacity: 0.4; }
|
||
.sheet h3 { font: 600 16px/1 var(--font-display); margin-bottom: 4px; padding: 0 4px; }
|
||
.sheet .desc { color: var(--muted); font-size: 12px; margin-bottom: 16px; padding: 0 4px; }
|
||
.opt { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-radius: 12px; cursor: pointer; transition: background 200ms; }
|
||
.opt:hover { background: rgba(45, 34, 85, 0.4); }
|
||
.opt .ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
|
||
.opt .ic svg { width: 18px; height: 18px; color: var(--primary-on); }
|
||
.opt .ic.b1 { background: linear-gradient(135deg, #d8b4ff, #a4d4ff); }
|
||
.opt .ic.b2 { background: linear-gradient(135deg, #8fe5b5, #d8b4ff); }
|
||
.opt .ic.b3 { background: linear-gradient(135deg, #ffb3c8, #ffd9a8); }
|
||
.opt .ic.b4 { background: linear-gradient(135deg, #ffd9a8, #ffb3c8); }
|
||
.opt .col { flex: 1; }
|
||
.opt .nm { font: 500 14px/1.2 var(--font-body); }
|
||
.opt .sub { font: 400 11px/1.4 var(--font-body); color: var(--muted); margin-top: 3px; }
|
||
.opt .check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); display: grid; place-items: center; flex-shrink: 0; }
|
||
.opt.checked .check { background: var(--accent); border-color: var(--accent); }
|
||
.opt.checked .check svg { color: var(--primary-on); width: 12px; height: 12px; }
|
||
|
||
.home-indicator { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 134px; height: 5px; background: var(--fg); border-radius: 3px; opacity: 0.7; z-index: 70; }
|
||
|
||
/* reduced motion */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="stage-wrap">
|
||
<div class="phone">
|
||
<div class="screen">
|
||
<div class="status-bar">
|
||
<span>9:41</span>
|
||
<div class="mp-capsule" aria-label="小程序菜单">
|
||
<button class="capsule-btn" aria-label="更多">
|
||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||
<circle cx="6" cy="12" r="1.6"></circle>
|
||
<circle cx="12" cy="12" r="1.6"></circle>
|
||
<circle cx="18" cy="12" r="1.6"></circle>
|
||
</svg>
|
||
</button>
|
||
<button class="capsule-btn" aria-label="关闭">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
|
||
<div class="top-nav">
|
||
<button class="icon-btn" id="btnClose" aria-label="关闭">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
<h1>发布动态</h1>
|
||
</div>
|
||
|
||
<div class="composer">
|
||
<div class="author">
|
||
<div class="av" aria-hidden="true">阿</div>
|
||
<div class="col">
|
||
<div class="nm">阿布的家长 <span class="level-badge">Lv.6</span></div>
|
||
<div class="sub">@abudejiazhang · 6 年养宠</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="input-area">
|
||
<textarea placeholder="说说你家毛孩子的故事吧… 使用 # 提及话题" id="textInput" aria-label="动态内容" maxlength="2000"></textarea>
|
||
</div>
|
||
|
||
<div class="images" id="images" role="list">
|
||
<div class="img-slot filled-1" role="listitem"><span class="cover" aria-hidden="true">1/3</span><button class="x" type="button" aria-label="移除图片 1">✕</button></div>
|
||
<div class="img-slot filled-2" role="listitem"><span class="cover" aria-hidden="true">2/3</span><button class="x" type="button" aria-label="移除图片 2">✕</button></div>
|
||
<div class="img-slot filled-3" role="listitem"><span class="cover" aria-hidden="true">3/3</span><button class="x" type="button" aria-label="移除图片 3">✕</button></div>
|
||
</div>
|
||
|
||
<div class="label-row">
|
||
<div class="ttl">话题</div>
|
||
<div class="right">+ 自定义</div>
|
||
</div>
|
||
<div class="tag-chips" id="tagChips" role="group" aria-label="话题选择">
|
||
<div class="tag-chip act" data-tag="滨江公园" role="button" tabindex="0" aria-pressed="true">#滨江公园 <span class="ic" aria-hidden="true">✕</span></div>
|
||
<div class="tag-chip act" data-tag="金毛日常" role="button" tabindex="0" aria-pressed="true">#金毛日常 <span class="ic" aria-hidden="true">✕</span></div>
|
||
<div class="tag-chip" data-tag="遛弯" role="button" tabindex="0" aria-pressed="false"><span class="ic" aria-hidden="true">+</span>#遛弯</div>
|
||
<div class="tag-chip" data-tag="周末聚会" role="button" tabindex="0" aria-pressed="false"><span class="ic" aria-hidden="true">+</span>#周末聚会</div>
|
||
<div class="tag-chip" data-tag="猫咪" role="button" tabindex="0" aria-pressed="false"><span class="ic" aria-hidden="true">+</span>#猫咪</div>
|
||
<div class="tag-chip" data-tag="新手养宠" role="button" tabindex="0" aria-pressed="false"><span class="ic" aria-hidden="true">+</span>#新手养宠</div>
|
||
</div>
|
||
|
||
<div class="rows" role="list">
|
||
<div class="row" id="rowPet" role="button" tabindex="0" aria-label="选择关联宠物">
|
||
<div class="ic m1" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="4" r="2"/><circle cx="18" cy="8" r="2"/><circle cx="20" cy="16" r="2"/><circle cx="9" cy="20" r="2"/><circle cx="4" cy="14" r="2"/><path d="M8.5 14.5c1.5-2 5-2 6.5 0 1 1.3 1 3 0 4-1.3 1.3-3 1.3-4.3.5-1.3-1-1.5-3-1-4.5z" fill="currentColor" stroke="none" opacity="0.7"/></svg></div>
|
||
<div class="nm">关联宠物</div>
|
||
<div class="right">
|
||
<div class="val has-avatar"><div class="pet-av" aria-hidden="true"></div>奶昔</div>
|
||
<span class="chev" aria-hidden="true">›</span>
|
||
</div>
|
||
</div>
|
||
<div class="row" id="rowLocation" role="button" tabindex="0" aria-label="选择位置">
|
||
<div class="ic m2" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div>
|
||
<div class="nm">位置</div>
|
||
<div class="right">
|
||
<div class="val">上海 · 滨江公园</div>
|
||
<span class="chev" aria-hidden="true">›</span>
|
||
</div>
|
||
</div>
|
||
<div class="row" id="rowVisibility" role="button" tabindex="0" aria-label="选择可见范围">
|
||
<div class="ic m3" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg></div>
|
||
<div class="nm">可见范围</div>
|
||
<div class="right">
|
||
<div class="val" id="visVal">公开 · 所有人可见</div>
|
||
<span class="chev" aria-hidden="true">›</span>
|
||
</div>
|
||
</div>
|
||
<div class="row" id="rowDraft">
|
||
<div class="ic m4" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg></div>
|
||
<div class="nm">保存为草稿</div>
|
||
<div class="right">
|
||
<button class="switch" id="draftSwitch" type="button" role="switch" aria-checked="false" aria-label="保存为草稿"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="notice" role="note">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
|
||
<div class="text">分享到广场需遵守汪圈社区公约。请勿发布违规内容,文明养宠。</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="sticky">
|
||
<div class="sticky-row">
|
||
<div class="toolbar" role="toolbar" aria-label="插入内容">
|
||
<button class="tool" type="button" title="图片" aria-label="添加图片"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg></button>
|
||
<button class="tool" type="button" title="视频" aria-label="添加视频"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg></button>
|
||
<button class="tool" type="button" title="位置" aria-label="添加位置"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></button>
|
||
<button class="tool" type="button" title="话题" aria-label="添加话题"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></svg></button>
|
||
<button class="tool" type="button" title="表情" aria-label="添加表情"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg></button>
|
||
</div>
|
||
<div class="word-count" id="wordCount" aria-live="polite" aria-atomic="true">0/2000</div>
|
||
</div>
|
||
<button class="post-btn" id="btnPost" type="button" disabled aria-disabled="true">发布</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="home-indicator"></div>
|
||
</div>
|
||
|
||
<!-- visibility sheet -->
|
||
<div class="sheet-bg" id="visSheet" role="dialog" aria-modal="true" aria-labelledby="visTitle">
|
||
<div class="sheet">
|
||
<div class="sheet-grabber"></div>
|
||
<h3 id="visTitle">选择可见范围</h3>
|
||
<div class="desc">不同范围的动态会出现在不同的信息流中</div>
|
||
<div class="opt" role="button" tabindex="0" data-val="公开 · 所有人可见" aria-checked="true">
|
||
<div class="ic b1" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></div>
|
||
<div class="col"><div class="nm">公开</div><div class="sub">所有汪圈用户可见,会出现在广场推荐中</div></div>
|
||
<div class="check" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||
</div>
|
||
<div class="opt" role="button" tabindex="0" data-val="汪友 · 仅好友可见" aria-checked="false">
|
||
<div class="ic b2" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
|
||
<div class="col"><div class="nm">汪友</div><div class="sub">仅你关注的人可见,会出现在关注信息流</div></div>
|
||
<div class="check" aria-hidden="true"></div>
|
||
</div>
|
||
<div class="opt" role="button" tabindex="0" data-val="仅自己 · 私人记录" aria-checked="false">
|
||
<div class="ic b3" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>
|
||
<div class="col"><div class="nm">仅自己</div><div class="sub">仅自己可见,作为私人记录保存</div></div>
|
||
<div class="check" aria-hidden="true"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- success sheet -->
|
||
<div class="sheet-bg success-modal" id="successSheet" role="alertdialog" aria-modal="true" aria-labelledby="successTitle">
|
||
<div class="sheet">
|
||
<div class="check-circle" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
</div>
|
||
<h3 id="successTitle">发布成功</h3>
|
||
<div class="desc">你的动态已发布到广场,正在通知关注你的人</div>
|
||
<div class="actions">
|
||
<button class="btn btn-secondary" type="button" id="btnStay">留在发布</button>
|
||
<button class="btn btn-primary" type="button" id="btnGoPlaza">查看动态</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Tag toggle
|
||
const tagChips = document.getElementById('tagChips');
|
||
tagChips.addEventListener('click', (e) => {
|
||
const c = e.target.closest('.tag-chip');
|
||
if (!c) return;
|
||
const on = !c.classList.contains('act');
|
||
c.classList.toggle('act', on);
|
||
c.setAttribute('aria-pressed', String(on));
|
||
});
|
||
|
||
// Word count + post button enable
|
||
const ti = document.getElementById('textInput');
|
||
const wc = document.getElementById('wordCount');
|
||
const postBtn = document.getElementById('btnPost');
|
||
function updateCount() {
|
||
const n = ti.value.length;
|
||
wc.textContent = `${n}/2000`;
|
||
wc.classList.toggle('warn', n > 1800);
|
||
const enabled = n > 0 && n <= 2000;
|
||
postBtn.disabled = !enabled;
|
||
postBtn.setAttribute('aria-disabled', String(!enabled));
|
||
}
|
||
ti.addEventListener('input', updateCount);
|
||
updateCount();
|
||
|
||
// Close
|
||
document.getElementById('btnClose').addEventListener('click', () => {
|
||
if (ti.value.length > 0) {
|
||
if (confirm('有未发布的内容,确认关闭吗?')) location.href = 'plaza.html';
|
||
} else {
|
||
location.href = 'plaza.html';
|
||
}
|
||
});
|
||
|
||
// Image remove
|
||
document.querySelectorAll('.img-slot .x').forEach(x => {
|
||
x.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
x.closest('.img-slot').remove();
|
||
});
|
||
});
|
||
|
||
// Row click handlers (visibility opens sheet; others are stubs)
|
||
const visSheet = document.getElementById('visSheet');
|
||
const visVal = document.getElementById('visVal');
|
||
document.getElementById('rowVisibility').addEventListener('click', () => visSheet.classList.add('show'));
|
||
visSheet.addEventListener('click', (e) => {
|
||
if (e.target === visSheet) visSheet.classList.remove('show');
|
||
const opt = e.target.closest('.opt');
|
||
if (opt) {
|
||
visSheet.querySelectorAll('.opt').forEach(x => {
|
||
x.classList.remove('checked');
|
||
x.setAttribute('aria-checked', 'false');
|
||
});
|
||
opt.classList.add('checked');
|
||
opt.setAttribute('aria-checked', 'true');
|
||
visVal.textContent = opt.dataset.val;
|
||
setTimeout(() => visSheet.classList.remove('show'), 220);
|
||
}
|
||
});
|
||
|
||
// Draft switch (proper button + aria-checked)
|
||
const draftSwitch = document.getElementById('draftSwitch');
|
||
draftSwitch.addEventListener('click', () => {
|
||
const on = draftSwitch.getAttribute('aria-checked') === 'true';
|
||
draftSwitch.setAttribute('aria-checked', String(!on));
|
||
});
|
||
|
||
// Post
|
||
const success = document.getElementById('successSheet');
|
||
postBtn.addEventListener('click', () => {
|
||
if (postBtn.disabled) return;
|
||
success.classList.add('show');
|
||
// Move focus to success modal
|
||
document.getElementById('btnGoPlaza').focus();
|
||
});
|
||
document.getElementById('btnStay').addEventListener('click', () => {
|
||
success.classList.remove('show');
|
||
ti.value = '';
|
||
updateCount();
|
||
postBtn.focus();
|
||
});
|
||
document.getElementById('btnGoPlaza').addEventListener('click', () => {
|
||
location.href = 'plaza.html';
|
||
});
|
||
|
||
// Esc closes any open sheet, restores focus
|
||
let lastFocus = null;
|
||
const observer = new MutationObserver(() => {
|
||
document.querySelectorAll('.sheet-bg').forEach(s => {
|
||
if (s.classList.contains('show')) {
|
||
lastFocus = document.activeElement;
|
||
const firstBtn = s.querySelector('button, [tabindex="0"]');
|
||
if (firstBtn) firstBtn.focus();
|
||
} else if (lastFocus) {
|
||
lastFocus.focus();
|
||
lastFocus = null;
|
||
}
|
||
});
|
||
});
|
||
observer.observe(document.body, { subtree: true, attributes: true, attributeFilter: ['class'], childList: true });
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape') {
|
||
document.querySelectorAll('.sheet-bg.show').forEach(s => s.classList.remove('show'));
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|