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>
114 lines
5.9 KiB
HTML
114 lines
5.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; }
|
|
.hint { font-size: 22px; color: #555; margin: 4px 0; direction: rtl; text-align: center; }
|
|
.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; }
|
|
.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;">Conjugation Card — FRONT</h2>
|
|
<div class="card-container">
|
|
<div class="card-label">Front</div>
|
|
<div class="card-content">
|
|
|
|
<div class="hint">אֵיךְ אוֹמְרִים</div>
|
|
<div class="hebrew">אַתָּה</div>
|
|
<div class="hebrew" style="color:#1a1a8c;">לִשְׁמֹר <span class="hebrew-sm">(על)</span></div>
|
|
<div class="hebrew">בַּהוֹוֶה</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<h2 style="font-family:sans-serif;direction:ltr;">Conjugation Card — BACK (collapsed)</h2>
|
|
<div class="card-container">
|
|
<div class="card-label">Back — default state</div>
|
|
<div class="card-content">
|
|
|
|
<div class="hint">אֵיךְ אוֹמְרִים</div>
|
|
<div class="hebrew">אַתָּה</div>
|
|
<div class="hebrew" style="color:#1a1a8c;">לִשְׁמֹר <span class="hebrew-sm">(על)</span></div>
|
|
<div class="hebrew">בַּהוֹוֶה</div>
|
|
<hr>
|
|
<div class="hebrew">שׁוֹמֵר (על)</div>
|
|
|
|
<details class="more-toggle"><summary class="more-header">מידע נוסף</summary>
|
|
<div class="sec-label" style="text-align:center;display:block;">to guard; to keep, to maintain</div>
|
|
<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>
|
|
<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">guard, watch; shift</span></div>
|
|
<div class="sec-label"><span class="rw-word">שׁוֹמֵר</span><span class="rw-meaning">guard, watchman</span></div>
|
|
<div class="sec-label"><span class="rw-word">שְׁמִירָה</span><span class="rw-meaning">guarding, watching</span></div>
|
|
<div class="sec-label"><span class="rw-word">לְהִשָּׁמֵר</span><span class="rw-meaning">to beware, to be careful</span></div>
|
|
</div>
|
|
</details>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<h2 style="font-family:sans-serif;direction:ltr;">Conjugation Card — BACK (expanded)</h2>
|
|
<div class="card-container">
|
|
<div class="card-label">Back — expanded</div>
|
|
<div class="card-content">
|
|
|
|
<div class="hint">אֵיךְ אוֹמְרִים</div>
|
|
<div class="hebrew">אַתָּה</div>
|
|
<div class="hebrew" style="color:#1a1a8c;">לִשְׁמֹר <span class="hebrew-sm">(על)</span></div>
|
|
<div class="hebrew">בַּהוֹוֶה</div>
|
|
<hr>
|
|
<div class="hebrew">שׁוֹמֵר (על)</div>
|
|
|
|
<details class="more-toggle" open><summary class="more-header">מידע נוסף</summary>
|
|
<div class="sec-label" style="text-align:center;display:block;">to guard; to keep, to maintain</div>
|
|
<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>
|
|
<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">guard, watch; shift</span></div>
|
|
<div class="sec-label"><span class="rw-word">שׁוֹמֵר</span><span class="rw-meaning">guard, watchman</span></div>
|
|
<div class="sec-label"><span class="rw-word">שְׁמִירָה</span><span class="rw-meaning">guarding, watching</span></div>
|
|
<div class="sec-label"><span class="rw-word">לְהִשָּׁמֵר</span><span class="rw-meaning">to beware, to be careful</span></div>
|
|
</div>
|
|
</details>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|