Sochen
0d92451271
- All secondary fields (shoresh, PoS, ktiv male, plural, related words) behind a "מידע נוסף" toggle button using HTML <details>/<summary> - Conjugation back: English meaning, binyan also behind toggle - Related words: table format with word + meaning, sorted by frequency - Hebrew words not bold, English meanings 24px gray (#555) - "מִילִים קְשׁוּרוֹת" sub-header with nikkud inside toggle - "אֵיךְ אוֹמְרִים" prompt centered using hint class - New CSS: .more-toggle, .more-header, .related-header, .rw-word, .rw-meaning - Dark mode support for all new classes - Bump to v0.18 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
110 lines
6.9 KiB
HTML
110 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html dir="rtl">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
body { font-family: 'Heebo', 'Arial Hebrew', sans-serif; background: #fff; max-width: 600px; margin: 20px auto; }
|
|
.card-container { border: 1px solid #ccc; border-radius: 8px; margin: 20px 0; overflow: hidden; }
|
|
.card-label { background: #333; color: #fff; padding: 6px 12px; font-size: 14px; font-family: sans-serif; direction: ltr; }
|
|
.card-content { padding: 16px; text-align: center; }
|
|
.card-content hr { border: none; border-top: 1px solid #ccc; margin: 12px 0; }
|
|
|
|
.hebrew { font-size: 48px; font-weight: bold; color: #222; direction: rtl; text-align: center; }
|
|
.hebrew-sm { font-size: 28px; font-weight: normal; color: #222; direction: rtl; }
|
|
.meaning { font-size: 28px; color: #1a1a8c; text-align: center; direction: ltr; margin: 4px 0; }
|
|
.emoji-img { font-size: 48px; text-align: center; margin: 4px 0; }
|
|
.divider { border-top: 1px solid #ccc; margin: 8px 0; }
|
|
.sec-table { display: table; margin: 6px auto 0; direction: rtl; border-collapse: collapse; }
|
|
.sec-label { display: table-row; font-size: 28px; font-weight: normal; color: #222; direction: rtl; }
|
|
.sec-key { display: table-cell; font-size: 28px; color: #222; font-weight: bold; text-align: right; padding: 2px 0 2px 8px; white-space: nowrap; }
|
|
.sec-val { display: table-cell; font-size: 28px; color: #222; text-align: right; padding: 2px 0; }
|
|
.hint { font-size: 22px; color: #555; margin: 4px 0; direction: rtl; text-align: center; }
|
|
.example { font-size: 24px; color: #222; padding: 6px 8px; direction: rtl; text-align: center; border-left: 3px solid #ccc; font-style: italic; margin: 6px auto; max-width: 90%; }
|
|
.voice-label { font-size: 20px; color: #888; }
|
|
|
|
.more-toggle { text-align: center; direction: rtl; margin-top: 8px; }
|
|
.more-header {
|
|
display: inline-block; font-size: 18px; color: #555; cursor: pointer; list-style: none;
|
|
border: 1px solid #ccc; border-radius: 16px; padding: 4px 16px; margin: 4px 0; background: #f8f8f8;
|
|
}
|
|
.more-header::-webkit-details-marker { display: none; }
|
|
.more-header::before { content: "○ "; font-size: 14px; }
|
|
details[open] > .more-header::before { content: "● "; }
|
|
|
|
.related-header { font-size: 22px; color: #555; text-align: center; margin: 4px 0; }
|
|
.rw-word { display: table-cell; font-size: 28px; color: #222; font-weight: normal; text-align: right; padding: 2px 0 2px 8px; white-space: nowrap; }
|
|
.rw-meaning { display: table-cell; font-size: 24px; color: #555; text-align: left; direction: ltr; padding: 2px 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h2 style="font-family:sans-serif;direction:ltr;">Vocab: English → Hebrew (BACK) — collapsed</h2>
|
|
<div class="card-container">
|
|
<div class="card-label">English → Hebrew — Back (default: collapsed)</div>
|
|
<div class="card-content">
|
|
|
|
<div class="meaning">time (occasion), time round; once (when used as an adverb)</div>
|
|
<div class="emoji-img">📍</div>
|
|
<div class="divider"></div>
|
|
<div class="hebrew">פַּעַם</div>
|
|
|
|
<details class="more-toggle"><summary class="more-header">מידע נוסף</summary>
|
|
<div class="sec-table">
|
|
<div class="sec-label"><span class="sec-key">לְלֹא נִיקּוּד:</span><span class="sec-val">פעם</span></div>
|
|
<div class="sec-label"><span class="sec-key">שֹׁרֶשׁ:</span><span class="sec-val">פ.ע.ם</span></div>
|
|
<div class="sec-label"><span class="sec-key">חֵלֶק דִּיבּוּר:</span><span class="sec-val">שֵׁם עֶצֶם, נְקֵבָה</span></div>
|
|
<div class="sec-label"><span class="sec-key">רַבִּים:</span><span class="sec-val">פְּעָמִים</span></div>
|
|
</div>
|
|
<div class="divider" style="margin:6px 0;"></div>
|
|
<div class="related-header">מִילִים קְשׁוּרוֹת</div>
|
|
<div class="sec-table">
|
|
<div class="sec-label"><span class="rw-word">פַּעְמַיִם</span><span class="rw-meaning">twice, two times</span></div>
|
|
<div class="sec-label"><span class="rw-word">לְפַעֵם</span><span class="rw-meaning">to surge (feeling, emotion)</span></div>
|
|
<div class="sec-label"><span class="rw-word">פַּעֲמוֹן</span><span class="rw-meaning">bell</span></div>
|
|
<div class="sec-label"><span class="rw-word">פְּעִימָה</span><span class="rw-meaning">heartbeat; beat; stroke (technolo…</span></div>
|
|
<div class="sec-label"><span class="rw-word">לִפְעֹם</span><span class="rw-meaning">to beat, to pulse, to throb</span></div>
|
|
<div class="sec-label"><span class="rw-word">לְהִתְפַּעֵם</span><span class="rw-meaning">to be excited (emotionally)</span></div>
|
|
<div class="sec-label"><span class="rw-word">לְהַפְעִים</span><span class="rw-meaning">to excite, to agitate (lit.)</span></div>
|
|
<div class="sec-label"><span class="rw-word">לְהִפָּעֵם</span><span class="rw-meaning">to be excited, to be thrilled</span></div>
|
|
</div>
|
|
</details>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<h2 style="font-family:sans-serif;direction:ltr;">Same card — EXPANDED</h2>
|
|
<div class="card-container">
|
|
<div class="card-label">English → Hebrew — Back (expanded)</div>
|
|
<div class="card-content">
|
|
|
|
<div class="meaning">time (occasion), time round; once (when used as an adverb)</div>
|
|
<div class="emoji-img">📍</div>
|
|
<div class="divider"></div>
|
|
<div class="hebrew">פַּעַם</div>
|
|
|
|
<details class="more-toggle" open><summary class="more-header">מידע נוסף</summary>
|
|
<div class="sec-table">
|
|
<div class="sec-label"><span class="sec-key">לְלֹא נִיקּוּד:</span><span class="sec-val">פעם</span></div>
|
|
<div class="sec-label"><span class="sec-key">שֹׁרֶשׁ:</span><span class="sec-val">פ.ע.ם</span></div>
|
|
<div class="sec-label"><span class="sec-key">חֵלֶק דִּיבּוּר:</span><span class="sec-val">שֵׁם עֶצֶם, נְקֵבָה</span></div>
|
|
<div class="sec-label"><span class="sec-key">רַבִּים:</span><span class="sec-val">פְּעָמִים</span></div>
|
|
</div>
|
|
<div class="divider" style="margin:6px 0;"></div>
|
|
<div class="related-header">מִילִים קְשׁוּרוֹת</div>
|
|
<div class="sec-table">
|
|
<div class="sec-label"><span class="rw-word">פַּעְמַיִם</span><span class="rw-meaning">twice, two times</span></div>
|
|
<div class="sec-label"><span class="rw-word">לְפַעֵם</span><span class="rw-meaning">to surge (feeling, emotion)</span></div>
|
|
<div class="sec-label"><span class="rw-word">פַּעֲמוֹן</span><span class="rw-meaning">bell</span></div>
|
|
<div class="sec-label"><span class="rw-word">פְּעִימָה</span><span class="rw-meaning">heartbeat; beat; stroke (technolo…</span></div>
|
|
<div class="sec-label"><span class="rw-word">לִפְעֹם</span><span class="rw-meaning">to beat, to pulse, to throb</span></div>
|
|
<div class="sec-label"><span class="rw-word">לְהִתְפַּעֵם</span><span class="rw-meaning">to be excited (emotionally)</span></div>
|
|
<div class="sec-label"><span class="rw-word">לְהַפְעִים</span><span class="rw-meaning">to excite, to agitate (lit.)</span></div>
|
|
<div class="sec-label"><span class="rw-word">לְהִפָּעֵם</span><span class="rw-meaning">to be excited, to be thrilled</span></div>
|
|
</div>
|
|
</details>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|