Claude
ebbf737dac
design/ holds the tokens for all six themes, the type scale, spacing, radii and sizes, the brand and usage guidelines, a guide and static preview for each component, the logo and icons as SVG, and wireframes of the tablet and foldable column layout. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RhmDdrN5hgWrgRcFLAMsV6
12 lines
1.9 KiB
HTML
12 lines
1.9 KiB
HTML
<!-- @dsCard group="Overlays" height=560 -->
|
|
<!doctype html><html><head><meta charset="utf-8"><style>body{margin:0;background:var(--surface)} .pad{padding:16px} .stack{display:flex;flex-direction:column;gap:16px} .cap{font:12px/16px var(--font-libron);color:var(--on-surface-variant);direction:ltr;text-align:left;margin-bottom:4px}</style></head><body>
|
|
<div class="gj" dir="rtl" lang="fa" style="background:var(--surface);padding-top:24px">
|
|
<div class="gj-sheet"><div class="gj-handle"></div>
|
|
<div class="gj-label">پوسته</div><div class="gj-chips"><button class="gj-chip" aria-pressed="false">سیستم</button><button class="gj-chip" aria-pressed="true"><svg class="gj-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>روشن</button><button class="gj-chip" aria-pressed="false">تاریک</button><button class="gj-chip" aria-pressed="false">کاغذی</button><button class="gj-chip" aria-pressed="false">کاغذی شب</button></div>
|
|
<div class="gj-toggle"><div class="gj-toggle-text"><div class="gj-toggle-title">پسزمینهٔ سیاه (OLED)</div><div class="gj-toggle-note">روی پوستههای تاریک اعمال میشود</div></div><button class="gj-switch" role="switch" aria-checked="false" aria-label="OLED"></button></div>
|
|
<div class="gj-label">قلم</div><div class="gj-chips"><button class="gj-chip" aria-pressed="true"><svg class="gj-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>نسخ</button><button class="gj-chip" aria-pressed="false">نستعلیق</button></div>
|
|
<div class="gj-label">اندازهٔ متن</div><input type="range" min="14" max="40" step="2" value="22" style="accent-color:var(--primary);width:100%">
|
|
<p class="gj-verse" style="margin:0">الا یا ایها الساقی ادر کأسا و ناولها</p>
|
|
</div></div>
|
|
</body></html>
|