reading

site/Cargo.toml

@@ -5,5 +5,5 @@ edition = "2021"
 
 [dependencies]
 leptos = { version = "0.7", features = ["csr"] }
-web-sys = { version = "0.3", features = ["HtmlAudioElement", "HtmlInputElement"] }
+web-sys = { version = "0.3", features = ["Element", "HtmlAudioElement", "HtmlInputElement"] }
 wasm-bindgen-futures = "0.4"

site/src/data.rs

@@ -131,17 +131,17 @@ pub const DICTIONARY: &[Word] = &[
     entry!("rain", "reɪn", "рейн"),
     entry!("hits", "hɪts", "хитс"),
     entry!("runs", "rʌnz", "ранз"),
-    entry!("rocks", "rɑks", "ракс"),
+    entry!("rocks", "rɑks", "рокс"),
     entry!("wait", "weɪt", "уэйт"),
     entry!("tents", "tɛnts", "тентс"),
     entry!("chat", "tʃæt", "чэт"),
     entry!("can", "kæn", "кэн"),
     entry!("see", "siː", "си"),
     entry!("drip", "drɪp", "дрип"),
-    entry!("on", "ɑn", "ан"),
+    entry!("on", "ɑn", "он"),
     entry!("fast", "fæst", "фэст"),
     entry!("swim", "swɪm", "свим"),
-    entry!("pond", "pɑnd", "панд"),
+    entry!("pond", "pɑnd", "понд"),
     entry!("grab", "ɡræb", "грэб"),
     entry!("rush", "rʌʃ", "раш"),
     entry!("wet", "wɛt", "уэт"),
@@ -166,7 +166,7 @@ pub const DICTIONARY: &[Word] = &[
     entry!("road", "roʊd", "роуд"),
     entry!("shells", "ʃɛlz", "шелз"),
     entry!("wash", "wɑʃ", "уош"),
-    entry!("chop", "tʃɑp", "чап"),
+    entry!("chop", "tʃɑp", "чоп"),
     entry!("fix", "fɪks", "фикс"),
     entry!("bike", "baɪk", "байк"),
     entry!("tape", "teɪp", "тейп"),
@@ -185,9 +185,9 @@ pub const DICTIONARY: &[Word] = &[
     entry!("safe", "seɪf", "сейф"),
     entry!("bag", "bæɡ", "бэг"),
     entry!("day", "deɪ", "дей"),
-    entry!("stops", "stɑps", "стапс"),
-    entry!("spot", "spɑt", "спат"),
-    entry!("hot", "hɑt", "хат"),
+    entry!("stops", "stɑps", "стопс"),
+    entry!("spot", "spɑt", "спот"),
+    entry!("hot", "hɑt", "хот"),
     entry!("last", "læst", "лэст"),
     entry!("up", "ʌp", "ап"),
     entry!("home", "hoʊm", "хоум"),

site/src/main.rs

@@ -6,8 +6,9 @@ use data::{
 };
 use leptos::ev::KeyboardEvent;
 use leptos::prelude::*;
+use leptos::wasm_bindgen::JsCast;
 use wasm_bindgen_futures::{spawn_local, JsFuture};
-use web_sys::HtmlInputElement;
+use web_sys::{Element, HtmlInputElement};
 
 #[derive(Clone, Copy, PartialEq, Eq)]
 enum AudioState {
@@ -32,6 +33,8 @@ fn App() -> impl IntoView {
     let selected_id = RwSignal::new(None::<&'static str>);
     let query = RwSignal::new(String::new());
     let audio_ref = NodeRef::<leptos::html::Audio>::new();
+    let rules_panel_ref = NodeRef::<leptos::html::Section>::new();
+    let reading_card_ref = NodeRef::<leptos::html::Section>::new();
     let audio_state = RwSignal::new(AudioState::Ready);
 
     let select_word = move |id: &'static str| {
@@ -94,25 +97,49 @@ fn App() -> impl IntoView {
                             </div>
                         }.into_any())}
                     </section>
-                    <section class="rules-panel" aria-labelledby="rules-heading">
+                    <section node_ref=rules_panel_ref class="rules-panel" aria-labelledby="rules-heading">
                         <div class="rules-heading">
                             <p class="section-number">"02"</p>
                             <div>
                                 <h2 id="rules-heading">"Правила чтения"</h2>
                                 <p>"Полный справочник урока: правила, исключения и алгоритм."</p>
                             </div>
+                            <button
+                                class="fullscreen-button"
+                                type="button"
+                                title="Открыть правила чтения на весь экран"
+                                aria-label="Открыть правила чтения на весь экран"
+                                on:click=move |_| {
+                                    if let Some(panel) = rules_panel_ref.get() {
+                                        let panel: Element = panel.unchecked_into();
+                                        let _ = panel.request_fullscreen();
+                                    }
+                                }
+                            >"На весь экран"</button>
                         </div>
                         <div class="rules-scroll">{rules_view()}</div>
                     </section>
                 </aside>
 
-                <section class="reading-card" aria-labelledby="reading-heading">
+                <section node_ref=reading_card_ref class="reading-card" aria-labelledby="reading-heading">
                     <div class="section-heading">
                         <p class="section-number">"01"</p>
                         <div>
                             <h2 id="reading-heading">{reading_text.title}</h2>
                             <p>"Каждое слово — отдельная карточка для слуха и произношения."</p>
                         </div>
+                        <button
+                            class="fullscreen-button"
+                            type="button"
+                            title="Открыть текст на весь экран"
+                            aria-label="Открыть текст на весь экран"
+                            on:click=move |_| {
+                                if let Some(panel) = reading_card_ref.get() {
+                                    let panel: Element = panel.unchecked_into();
+                                    let _ = panel.request_fullscreen();
+                                }
+                            }
+                        >"На весь экран"</button>
                         <p class="word-count">{format!("{word_count} слов")}</p>
                     </div>
                     <p class="reading-text">
@@ -330,7 +357,7 @@ fn detail_view(
             <p class="detail-kicker">"Словарная карточка"</p>
             <h2 id="detail-heading">{word.spelling}</h2>
             <dl class="pronunciation-grid">
-                <div><dt>"Американский IPA"</dt><dd>{word.ipa_us}</dd></div>
+                <div><dt>"Американский IPA"</dt><dd class="detail-ipa">{word.ipa_us}</dd></div>
                 <div><dt>"Русская подсказка"</dt><dd>{word.russian_hint}</dd></div>
             </dl>
             <audio

site/style.css

@@ -35,6 +35,7 @@
   --type-rule-copy: 0.9rem;
   --type-word: clamp(1.25rem, 2vw, 1.65rem);
   --type-detail: 1.4rem;
+  --tracking-ipa: 0.06em;
   --type-heading: clamp(1.8rem, 4vw, 3.2rem);
   --type-display: clamp(2.8rem, 8vw, 6.5rem);
   --workspace-detail-min: 18rem;
@@ -64,6 +65,8 @@ h2 { font-family: var(--serif); font-size: var(--type-heading); font-weight: 400
 .section-heading, .dictionary-heading { align-items: flex-start; display: flex; gap: var(--space-4); }
 .section-heading > div, .dictionary-heading > div { flex: 1; }
 .section-heading p:not(.section-number), .dictionary-heading p:not(.section-number) { color: var(--ink-muted); line-height: 1.5; }
+.fullscreen-button { align-items: center; background: transparent; border: var(--border-width) solid var(--forest); border-radius: var(--radius-sm); color: var(--forest); display: inline-flex; flex: 0 0 auto; font-size: var(--type-caption); font-weight: 800; justify-content: center; padding: var(--space-2) var(--space-3); text-align: center; }
+.fullscreen-button:hover, .fullscreen-button:focus-visible { background: var(--forest); color: var(--paper); outline: var(--border-emphasis) solid var(--coral); outline-offset: var(--space-1); }
 .word-count { background: var(--sun); border-radius: 999px; font-size: var(--type-meta); font-weight: 800; margin: 0; padding: var(--space-2) var(--space-3); white-space: nowrap; }
 .reading-text { font-family: var(--serif); font-size: var(--type-word); line-height: 2; margin: var(--space-6) 0 0; }
 .reading-word { background: transparent; border: 0; border-bottom: var(--border-emphasis) solid transparent; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; padding: 0; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
@@ -77,6 +80,7 @@ h2 { font-family: var(--serif); font-size: var(--type-heading); font-weight: 400
 .pronunciation-grid div { border-top: var(--border-width) solid var(--forest-light); padding-top: var(--space-2); }
 dt { color: var(--forest-pale); font-size: var(--type-overline); font-weight: 800; letter-spacing: 0.08em; margin-bottom: var(--space-2); text-transform: uppercase; }
 dd { font-family: var(--serif); font-size: var(--type-detail); margin: 0; }
+.detail-ipa { letter-spacing: var(--tracking-ipa); }
 .audio-button { background: var(--sun); border: var(--border-emphasis) solid var(--sun); border-radius: var(--radius-sm); color: var(--ink); font-weight: 800; padding: var(--space-3) var(--space-5); }
 .audio-button:hover, .audio-button:focus-visible { background: transparent; color: var(--sun); outline: var(--border-emphasis) solid var(--sun); outline-offset: var(--space-1); }
 .audio-button:disabled { background: transparent; border-color: var(--forest-light); color: var(--forest-pale); cursor: not-allowed; }
@@ -86,10 +90,10 @@ dd { font-family: var(--serif); font-size: var(--type-detail); margin: 0; }
 .detail-empty { max-width: 32rem; }
 .rules-panel { background: var(--mist); display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; padding: var(--space-4); }
 .rules-heading { align-items: flex-start; display: flex; flex: 0 0 auto; gap: var(--space-3); }
-.rules-heading > div { flex: 1; }
+.rules-heading > div { flex: 1; min-width: 0; }
 .rules-heading h2 { font-size: var(--type-detail); }
 .rules-heading p:not(.section-number) { color: var(--ink-muted); font-size: var(--type-caption); line-height: 1.5; }
-.rules-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-2) var(--space-2) 0; scroll-padding: var(--space-4); }
+.rules-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-2) var(--space-2) 0; scroll-padding: var(--space-4); }
 .rules-caveat { background: var(--surface); border-left: var(--border-emphasis) solid var(--coral); font-size: var(--type-rule-copy); line-height: 1.55; margin: 0; padding: var(--space-3); }
 .rule-section { border-top: var(--border-width) solid var(--line); padding: var(--space-4) 0; }
 .rule-section:last-child { padding-bottom: 0; }
@@ -122,3 +126,9 @@ th { color: var(--forest); font-size: var(--type-overline); letter-spacing: 0.08
 @media (min-width: 80rem) { .lesson-shell { width: calc(100% - clamp(4rem, 5vw, 12rem)); } }
 @media (max-width: 58rem) { .reader-workspace { display: flex; flex-direction: column; height: auto; } .reader-workspace .reading-card { order: -1; overflow: visible; } .rules-panel { flex: initial; } .rules-scroll { overflow: visible; } }
 @media (max-width: 38rem) { .lesson-shell { width: min(100% - var(--space-4), 76rem); padding: var(--space-5) 0; } .reading-card, .detail-panel, .rules-panel, .dictionary-section { padding: var(--space-4); } .section-heading, .dictionary-heading { gap: var(--space-3); } .word-count { display: none; } .pronunciation-grid { grid-template-columns: 1fr; } }
+
+.rules-panel:fullscreen, .reading-card:fullscreen { border-radius: 0; box-shadow: none; height: 100%; margin: 0; max-width: none; overflow: hidden; padding: var(--space-6); width: 100%; }
+.rules-panel:fullscreen { display: flex; flex-direction: column; }
+.rules-panel:fullscreen .rules-scroll { overflow-y: auto; }
+.reading-card:fullscreen { display: flex; flex-direction: column; }
+.reading-card:fullscreen .reading-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-2) var(--space-2) 0; scroll-padding: var(--space-4); }