Nationalism in India — Class X Revision Sheet

The user wants an image that summarizes the Class 10 CBSE Social Science chapter "Nationalism in India". Since I can't generate raster images, I'll create a rich, poster-style HTML page — a visual summary infographic that they can screenshot or print. This is actually a great use case: an educational infographic poster. Let me recall the chapter content (NCERT Class 10 History Chapter 2 - "Nationalism in India"): **Key topics:** 1. **First World War, Khilafat and Non-Cooperation** - WWI (1914-1918): increased defence expenditure → war loans, increased taxes, customs duties, income tax - Prices doubled (1913-1918), forced recruitment in rural areas - Crop failure 1918-19, 1920-21 famine, influenza epidemic — 12-13 million died - Idea of Satyagraha — January 1915 Gandhi returned from South Africa - Champaran 1917 (indigo planters), Kheda 1917 (crop failure, plague, revenue relaxation), Ahmedabad 1918 (cotton mill workers) - Rowlatt Act 1919 — "no dalil, no vakil, no appeal" — Rowlatt Satyagraha, Jallianwala Bagh massacre April 13, 1919 (General Dyer) - Khilafat Movement — Muhammad Ali and Shaukat Ali, March 1919, Calcutta session September 1920 — Non-Cooperation with Khilafat - Non-Cooperation Movement (1920-22): surrender titles, boycott of civil services, army, police, courts, legislative councils, schools, foreign goods. Nagpur session Dec 1920. 2. **The Movement in the Towns** - Middle-class participation, students left schools, teachers resigned, lawyers gave up practices - Council elections Nov 1920 — except Madras, no not except... (Madras where Justice Party — the party of non-Brahmans — boycotted council elections because entering was a way of gaining power that usually only Brahmans had access to) - Foreign goods boycotted, liquor shops picketed, foreign cloth burnt — import of foreign cloth halved 1921-1922 - Demand for swadeshi, use of khadi - Movement slowed: khadi expensive, no alternative Indian institutions 3. **Rebellion in the Countryside** - Awadh — peasants led by Baba Ramchandra — talukdars, high rents, begar - Demands: reduction of revenue, abolition of begar, social boycott of oppressive landlords - June 1920 Jawaharlal Nehru village tours, Oudh Kisan Sabha October 1920 — within a month 300+ branches - Peasant movement developed differently — attacked houses of talukdars and merchants, looted bazaars, grain hoards - Tribal peasants — Gudem Hills of Andhra Pradesh — Alluri Sitaram Raju — claimed special powers, militant guerrilla movement, attacked police stations, attempted to kill British officials; Raju captured and executed 1924 4. **Swaraj in the Plantations** - Assam plantation workers — Inland Emigration Act 1859 — couldn't leave tea gardens without permission - Workers' swaraj = freedom to move, retain link with village - Thousands left plantations, stranded, caught by police, brutally beaten 5. **Towards Civil Disobedience** - February 1922 Gandhi withdrew Non-Cooperation (Chauri Chaura incident) - CR Das and Motilal Nehru formed Swaraj Party — return to council politics - Simon Commission 1928 — "Go back Simon" — no Indian member - October 1929 Lord Irwin's vague offer of "dominion status", December 1929 Lahore Congress — Purna Swaraj — January 26, 1930 First Independence Day - Salt March — March 12, 1930, Sabarmati to Dandi, 240 miles, 24 days, reached April 6 — violated salt law - Civil Disobedience Movement — people asked to break salt law, manufacture salt, boycott foreign cloth and liquor - Abdul Ghaffar Khan arrested April 1930; Gandhi arrested — violent clashes, Kholkuri... - Gandhi-Irwin Pact March 5, 1931 — Gandhi agreed to participate in Second Round Table Conference (Dec 1931, London) — returned empty handed, movement relaunched — by 1934 lost momentum 6. **How Participants saw the Movement** - Rich peasants (Patidars of Gujarat, Jats of UP) — fight against high revenue - Poor peasants — wanted unpaid rent remitted — no gain, many joined radical movements, often unreliable - Business classes — FICCI 1927, Purshottamdas Thakurdas, G.D. Birla — wanted protection of imports, rupee-sterling foreign exchange ratio; marked as "Swaraj" - Industrial workers — limited participation, Nagpur region excepted - Women — large-scale participation, Gandhi believed home duty... Manufactured salt, picketed — changed position of women 7. **Limits of Civil Disobedience** - Dalits (untouchables) — Ambedkar — separate electorates, Poona Pact September 1932 (Depressed Classes, later Scheduled Castes) - Gandhi began fast unto death against separate electorate — Poona Pact gave reserved seats but general electorate - Muslim political organisations lukewarm — after Non-Cooperation-Khilafat declined, large sections of Muslims felt alienated 8. **The Sense of Collective Belonging** - Image of Bharat Mata — Bankim Chandra Chattopadhyay — Vande Mataram (Anandamath), Abanindranath Tagore's painting - Folklore — Rabindranath Tagore, Natesa Sastri - Flag — tricolour (red, green, yellow) swaraj flag 1921 by Gandhi — spinning wheel - Reinterpretation of history **Key dates summary:** - 1914-18 WWI - 1915 Gandhi returns - 1916 Champaran... no Champaran 1917 - 1916 Lucknow Pact (Congress-Muslim League)... mentioned - 1917 Champaran, Kheda - 1918 Ahmedabad - 1919 Rowlatt Act, Jallianwala Bagh, Khilafat Committee - 1920 Non-Cooperation launched (Nagpur session Dec) - 1922 Chauri Chaura, withdrawal - 1928 Simon Commission arrives - 1929 Lahore Congress, Purna Swaraj - 1930 Salt March, Civil Disobedience - 1931 Gandhi-Irwin Pact, Second Round Table - 1932 Poona Pact - 1934 CDM ends Now the design. The user wants an "image" — so I should make a poster-style layout, fixed aspect ratio feel, that could be exported. I could add an "Download as PNG" button using html2canvas or similar from CDN — that would make it a real deliverable image. That's a nice touch: the page renders a tall infographic poster, with a button to download it as PNG. Design direction: I want this to look like an authored, editorial-quality infographic — not a generic template. Ideas: - **Aesthetic**: VintageIndian history poster feel — think handloom khadi textures, deep indigo (charkha/spinning wheel motif), terracotta red, cream/aged-paper background, ink-black type. A palette drawn from the era: paper cream (#F5EFE0 or similar), ink black (#1a1712), indigo blue (#1E3A5F or a deep dyed indigo #2B3A67... let me pick a real indigo dye color like #28345C or #1F2E4D), terracotta/gerua (saffron-ochre #C1531B / #D06B2A), deep green for accents. This is rooted in the actual chapter (swadeshi indigo, khadi, gerua). Avoid gradients — use flat inks, halftone/texture, ruled lines, numbered chapters. - **Typography**: For a history poster, a strong serif display face. I could use Google Fonts: "Playfair Display" is a bit overused but appropriate... Maybe "Fraunces" (expressive serif) for headings and "Spectral" or "Newsreader" for body. Or "DM Serif Display" + "Public Sans". Fraunces has optical sizing and looks editorial. For Hindi-inspired accent maybe "Yatra One" for a Devanagari-flavored display of "Vande Mataram" or "स्वराज" — that could be a signature touch. Yatra One is a Latin+Devanagari display font with a hand-lettered feel. Body: "Newsreader" or "Source Serif". Let me use: - Display: "Fraunces" (72pt optical, heavy) - Devanagari accent: "Yatra One" for words like "स्वतंत्रता", "वंदे मातरम्", "सत्याग्रह" - Body/labels: "Newsreader" or a grotesque like "Archivo" for small caps labels. Mixing a serif body with a mono for dates could be nice — "Space Grotesk" or "IBM Plex Mono" for date stamps gives an archival-document feel. - **Layout structure** (tall poster, e.g., 1000px wide, very tall): 1. **Masthead**: "NATIONALISM IN INDIA" big, with chapter tag "CBSE Class X · History · Chapter 2", era stamp "1915–1934". A charkha (spinning wheel) drawn in SVG as a central motif — the wheel can slowly rotate on hover or continuously subtle. The charkha/wheel is the iconic symbol (Gandhi's spinning wheel appeared on the Congress flag). I'll draw an SVG spinning wheel with spokes — that's authentic, not decorative fluff. 2. **Timeline spine**: A vertical chronological spine running through the poster (1915 → 1934) with year markers — this is the backbone. Each major section hangs off it. 3. **Sections**: - The Wartime Backdrop (WWI hardships) — stat blocks: prices doubled, forced recruitment, 12–13M died in epidemic/famine - Satyagraha — Champaran · Kheda · Ahmedabad (three quick cards? no — avoid uniform card rows. Instead a ledger-style list with dates on the spine) - Rowlatt Act & Jallianwala Bagh (Apr 13, 1919) — dramatic treatment - Khilafat + Non-Cooperation (1920–22) — what boycott meant (title, civil services, courts, schools, foreign goods); movement in towns, countryside (Awadh - Baba Ramchandra; Gudem Hills - Alluri Sitaram Raju), plantations (Assam, Inland Emigration Act 1859) - Chauri Chaura (Feb 1922) → withdrawal - Simon Commission (1928), Lahore Congress (Dec 1929) Purna Swaraj - Salt March (12 Mar – 6 Apr 1930) — a route line graphic from Sabarmati to Dandi, 240 miles/24 days - Civil Disobedience — participants table: rich peasants (Patidars, Jats), poor peasants, business (FICCI 1927), women, industrial workers — could be a matrix of who participated and what "swaraj" meant to each. That's a great infographic element: "What did Swaraj mean to them?" — a list with roles. - Limits: Dalits (Ambedkar, Poona Pact Sep 1932), Muslims - Sense of Collective Belonging: Bharat Mata (Bankim, Vande Mataram, Abanindranath Tagore), folklore (Natesa Sastri), flag (1921 tricolour with charkha), history reinterpretation 4. **Key dates strip** — a compact index of all dates at the bottom (this is gold for board exam revision). 5. **Quick revision box**: "Exam pointers" — e.g., reasons for withdrawal, differences between NCM and CDM, why salt was chosen as a symbol (it united all; consumed by rich & poor alike; most oppressive act). Given it's a lot of content, I need careful hierarchy so it reads as a poster, not a document dump. **Signature moment**: The charkha wheel at top, slowly spinning (subtle), reacting to scroll or hover — and the timeline spine drawn as a stitched/ruled line with year nodes. Also maybe a scroll-driven progress that rotates the wheel. The "download as PNG" makes it an actual image deliverable. Let me plan interactivity: - The charkha rotates continuously slowly (CSS animation), speeds up when hovering, and maybe its rotation is tied to scroll (like you're spinning it as you read). Scroll-linked rotation is delightful: rotation = scrollY * factor. I'll do that with JS on scroll + a base slow spin. Actually combining both is fine: base slow rotation plus scroll delta added. - Timeline nodes highlight on scroll (IntersectionObserver) — the year on the spine fills in when its section is in view. - A download button (html2canvas from CDN) that exports the poster at 2x as PNG. Note: html2canvas can be finicky with fonts but usually works. I should ensure fonts are loaded before render. Use `document.fonts.ready`. Fallback: if export fails, show a toast. - Print-friendly? Could add `@media print` to strip the toolbar. Nice extra. Icons: I'll mostly avoid needing icons; where needed, use small inline SVG (drawn by me) — e.g., a tiny salt crystal, a wheel, a crown/hat for boycott items? Better to keep it typographic with drawn SVG motifs. For the toolbar buttons I need icons (download, print) — I'll hand-draw simple SVG strokes. Let me think about avoiding "uniform equal-width 3-column card rows". Instead: - Use an asymmetric editorial grid: a two-column body within the poster — left rail (narrow) for the year spine and marginal notes, right column (wide) for content. Marginalia in small caps. Alternating full-width interludes for big moments (Jallianwala Bagh, Salt March) with dramatic typography. - The "participants of CDM" can be a ledger table — rows with role → their notion of swaraj → outcome. Tables feel archival and are exam-useful. - The "boycott list" of Non-Cooperation can be a strikethrough list — foreign cloth, titles, courts, schools — visually struck through with a hand-drawn line (SVG scribble). That's evocative: items boycotted get a red strike-through animation when scrolled into view. That's a nice signature micro-moment. Content drafting — let me write the actual copy concisely (poster language, short but complete): **Header:** - Kicker: CBSE · CLASS X · HISTORY (INDIA AND THE CONTEMPORARY WORLD – II) · CHAPTER 02 - Title: Nationalism in India - Devanagari: वंदे मातरम् (small accent) — or "सत्याग्रह"? Maybe "चरखा" ... The masthead could have "स्वराज" as a large ghost word. Hmm, keep it tasteful: a small stamp "वंदे मातरम्". - Subtitle: How the freedom struggle became a mass movement, 1915–1934 — the full chapter in one sheet. **Section 0 — Why the seeds (The First World War, 1914–18):** - War → defence spending ↑ → loans & higher taxes: customs duties, income tax introduced - Prices doubled between 1913–18 → hardship - Forced recruitment (villages), crop failure 1918–19 & 1920–21 famine + influenza: ~12–13 million died - Result: anger & hope → Gandhiji's return (Jan 1915) from South Africa with the weapon of **Satyagraha** Stat chips: "2×" prices doubled; "12–13 mn" deaths; "1915" Gandhi returns. **Satyagraha's first battles (local experiments):** - 1917 Champaran (Bihar) — indigo planters' oppression - 1917 Kheda (Gujarat) — crop failure + plague → demanded revenue relaxation - 1918 Ahmedabad — cotton mill workers **1919 — The turning point:** - Rowlatt Act (Mar 1919): detention without trial — "No dalil, no vakil, no appeal" → Rowlatt Satyagraha (first all-India struggle) - 13 Apr 1919: Jallianwala Bagh massacre — Gen. Dyer fires on a peaceful gathering (Baisakhi); martial law in Punjab - Khilafat: Ali brothers (Muhammad Ali & Shaukat Ali), Calcutta session Sept 1920 → **Non-Cooperation** proposed by Gandhi (Hindu-Muslim unity + mass struggle) - Nagpur session Dec 1920: NCM adopted **Non-Cooperation 1920–22 — how it unfolded:** Programme: surrender titles · boycott civil services, courts, police, army, councils, schools · boycott foreign goods (liquor shops picketed, foreign cloth burnt — imports halved 1921–22) · swadeshi & khadi; national schools/colleges set up. Towns: middle class led — students, teachers, lawyers. Faltered: khadi costly, no alternative Indian institutions. Countryside: - Awadh: Baba Ramchandra — tenants vs talukdars & high rents + begar; Oudh Kisan Sabha (Oct 1920, Nehru). Movement turned violent (looting bazaars, grain hoards). - Gudem Hills (AP): Alluri Sitaram Raju — tribal guerrilla struggle, claimed special powers; executed 1924. Plantations (Assam): Inland Emigration Act 1859 trapped workers; swaraj = right to move freely, return to village; thousands walked out (caught, beaten). Feb 1922: Chauri Chaura violence → Gandhi withdraws NCM. Swaraj Party (C.R. Das & Motilal Nehru) returns to council politics. **Towards Civil Disobedience:** - 1927 Simon Commission (no Indian member) → "Go Back Simon", 1928 protests - Oct 1929: Irwin's vague "dominion status" offer rejected - Dec 1929 Lahore Congress, Jawaharlal Nehru president → **Purna Swaraj** resolution; 26 Jan 1930 = first Independence Day - Why salt? Consumed by rich & poor alike; tax most oppressive symbol of British rule. - Salt March: 12 Mar – 6 Apr 1930, Sabarmati → Dandi (240 miles, 24 days, 78 volunteers) → salt law broken → **Civil Disobedience** — break salt law, don't pay taxes, boycott foreign cloth & liquor. - Repression → Gandhi–Irwin Pact (5 Mar 1931) → Second Round Table Conference (Dec 1931, London) failed → movement relaunched → faded by 1934. **Who joined, and what swaraj meant to them** (ledger): - Rich peasants (Patidars of Gujarat, Jats of UP) — fight high revenue; disappointed when no-for-revenue-campaign (1931 revenue lowered? actually CDM not renewed as no fight for high revenue in second round) → lost interest - Poor peasants — wanted unpaid rent remitted; Congress unwilling to support "no rent" → many joined radical movements (often led by Socialists & Communists); unreliable support - Business class (FICCI 1927; Purshottamdas Thakurdas, G.D. Birla) — protection from imports, rupee–sterling exchange, no civil disobedience limits on business; gave financial aid; swaraj = a time when colonial restrictions would end, trade & industry flourish. Tensions: after 1931 pact failed, business leaders were more willing to cooperate with the... Actually: when the movement was restarted, industrialists were critical; many wanted no active participation. Also note spread of "socialist ideas" worry. - Industrial workers — participated selectively (Nagpur region exception); didn't join en masse (industrialists close to Congress; need for Congress to protect workers' interests... they stayed away) - Women — thousands came out (Gandhi said duty to home... he saw women's participation as sacrifice); manufactured salt, picketed shops, went to jail; but "changed position" limited — no radical change in women's position; Gandhi believed women's domain was home. **Limits of the movement:** - Dalits ("Depressed Classes"): Congress ignored them (fear of offending sanatanis); Ambedkar — separate electorates demanded; Gandhi's fast unto death (1932); **Poona Pact (Sept 1932)** — reserved seats in provincial & central councils but voted in by general electorate. Ambedkar: "Gandhism made the depressed classes helpless"... maybe skip quotes. Dalit leaders keen on political rights, described untouchability differently... - Muslims: after Khilafat declined, felt alienated; Congress & Hindu Mahasabha... Muslim League demanded reserved seats & separate electorates; Muhammad Ali Jinnah — reserved seats + separate electorates demands from Congress; failed negotiations (1927 M.A. Jinnah; 1928... M.R. Jayakar of Hindu Mahasabha opposed efforts at compromise) → communal friction. **Sense of collective belonging:** - Image of **Bharat Mata** — first painted by Abanindranath Tagore (1905); devotion to mother figure; Bankim Chandra Chattopadhyay wrote *Vande Mataram* (in *Anandamath*, 1870s/1882) — later a national song, sung in Swadeshi movement. - **Folklore** — Rabindranath Tagore in Bengal; Natesa Sastri (Tamil) collected folk tales — *The Folklore of Southern India* — believed folklore = "the most trustworthy manifestation of people's real thoughts and characteristics". - **Flag** — Swadeshi movement: tricolour (red, green, yellow), 8 lotuses (8 provinces), crescent moon (Hindus & Muslims); Gandhi 1921: **Swaraj flag** — tricolour (red, green, white) with spinning wheel — self-help symbol. - **History reinterpretation** — glorious past (art, architecture, science, maths, religion, culture, law, philosophy, trade) → decline blamed on colonial rule; problem: glories were Hindu, images celebrated the same; divided people. **Key dates index (bottom strip):** 1914–18 · 1915 · 1917 · 1918 · 1919 · 1920 · 1921 · 1922 · 1927 · 1928 · 1929 · 1930 · 1931 · 1932 · 1934 with one-line events. **Quick exam pointers box:** - Difference: NCM = not to cooperate with British; CDM = to actively break colonial laws - Why Gandhiji withdrew NCM: Chauri Chaura (Feb 1922) violence — satyagraha demands non-violence - Salt chosen: united all classes, simple, universally used, most oppressive tax symbol - Poona Pact: between Gandhi & Ambedkar — reserved seats instead of separate electorates for Depressed Classes Also key people mini-glossary: Gandhi, Ali brothers, Baba Ramchandra, Alluri Sitaram Raju, C.R. Das & Motilal Nehru, Jawaharlal Nehru, Ambedkar, Abanindranath & Rabindranath Tagore, Bankim Chandra, Natesa Sastri. This is a LOT. The poster will be long — that's fine for a summary sheet. I'll organize with a left spine + marginalia, big interludes. **Layout plan (poster width ~1060px, centered, paper background):** Toolbar (outside poster, fixed): title small + "Download PNG" + "Print" buttons. Toast for feedback. Poster: ``` [ Masthead ] top rule row: "CLASS X · CBSE" | "HISTORY · CH. 02" | "1915–1934" Huge title: Nationalism in India (Fraunces, tight) Devanagari side-stamp: स्वराज 1921... charkha SVG spinning at right of the masthead intro line [ Spine starts ] — vertical dotted/ruled line at left ~ with year nodes Section 01 — The War Turns the Tide (1914–1918) with stat blocks inline (big numbers typographically, not cards — e.g., a row: "2×" prices doubled | "12–13 mn" deaths | but avoid equal cards... I can do an inline stat line: large numeral + small caption, separated by rules — a stat ledger. Fine.) Section 02 — Satyagraha Finds Its Feet (1915–1918): three local satyagrahas as a chronology list (year + place + cause), ledger style. Interlude — 1919: Rowlatt + Jallianwala: full-width dark band (ink black background, cream text) — dramatic. "13 APRIL 1919" big. Include "no dalil, no vakil, no appeal" in a typographic treatment. Section 03 — Non-Cooperation (1920–22): programme as strikethrough boycott list; the three arenas (towns/countryside/plantations) as stacked asymmetric rows (not equal cards): each row: place label (left, small caps) + content (right). Interlude — 22 FEB 1922 Chauri Chaura (small note on spine). Section 04 — Towards Civil Disobedience (1927–1931): Simon, Lahore, Salt March with a route SVG (Sabarmati → Dandi dotted path with two nodes and a walking figure? A simple dotted arc with distance callouts: 240 miles · 24 days · 78 volunteers). Section 05 — Civil Disobedience: who joined (ledger table: Role | Their 'Swaraj' | Outcome). Section 06 — The Limits: Dalits & Muslims (two-column asymmetric text with Poona Pact callout). Section 07 — A Nation Imagined: Bharat Mata / Folklore / Flag / History — as numbered sub-items in a 2-col asymmetric arrangement or stacked entries. I can include a small Bharat Mata flag SVG: the 1921 Swaraj flag (red, green, white horizontal with charkha) — small drawn flag. Also the earlier swadeshi tricolour. Two small flags side by side with captions — nice authentic visual. [ Bottom ] Key dates index — a horizontal grid of year → event lines (multi-column but as a dense index table, which is legitimate, not filler). [ Exam pointers ] a boxed "Last-minute revision" area with 4-5 bullets. Footer: made-with note. ``` Color palette (flat inks, no gradients): - Paper: #F3EDDF (aged cream) with subtle paper grain (SVG noise via feTurbulence at low opacity — that's texture, not gradient; acceptable and adds authenticity). - Ink: #221C15 (near-black warm) - Indigo: #2A3D66 → maybe deeper: #27395F. Let me choose indigo dye: #33427A? Classic indigo: #3C4A6B... I'll go #2E4057 or richer #2B3F6B. Let's use `--indigo: #2C3E68`. - Gerua/terracotta: #B84A1B or #C0511F (for strikes, accents, red strokes) - Deep green: #3D5A3C (flag green accent) — used sparingly (flag, maybe section 07) - Muted line color: #D8CFBA (rule lines on paper) Typography: - Fraunces (wght 300–900, opsz) — headings, big numerals - Newsreader — body (serif, readable, editorial) - Space Grotesk or IBM Plex Mono — date stamps, labels, index. IBM Plex Mono has good character; use it for year nodes and small caps labels. Actually for small-caps labels a grotesque might be cleaner: "Archivo" (with wdth?) — but mono gives archival stamp feel. I'll use "IBM Plex Mono" for years/labels and "Newsreader" for body. Devanagari: "Yatra One" (has Devanagari subset? Yatra One supports Devanagari and Latin — yes, it's designed for Devanagari with Latin support). Alternatively "Kalam" (handwriting Devanagari). Yatra One for "वंदे मातरम्" stamp. Font loading: Google Fonts link. Charkha SVG: draw a spinning wheel: outer rim circle, inner hub circle, spokes (say 16 spokes), a stand? For masthead, a wheel with spokes + charkha stand simplified. Rotation applied to a `` with spokes. Radius ~ 90-120px. Strokes in ink color, maybe rim in indigo. I'll construct with JS or hand-write: 12 spokes via transform rotate. Hand-write with a small loop in JS injecting lines, or just write 12 `` elements with rotate transforms — fine. Interactions: 1. Wheel rotation: on scroll, rotation += (scrollDelta * 0.15); also a slow idle rotation via rAF. I'll implement rAF loop: baseSpeed deg/s + scroll velocity impulse decaying. Keep subtle. 2. Spine year nodes: IntersectionObserver adds `.active` — fills the node with gerua and the year label darkens. 3. Boycott strikethrough: when section visible, animate an SVG line drawing across each struck item (staggered) — implement strike as a pseudo-element line scaleX 0→1 with transition, staggered delays. 4. Download PNG via html2canvas: capture `#poster` at scale 2. Need fonts ready. Watch out: html2canvas sometimes struggles with feTurbulence filters — the paper grain via SVG filter inside an `` italic Newsreader. Interludes (Jallianwala band): full-bleed within poster (negative margins to poster padding edges), ink background (#221C15), paper text. Content: left big date "13 APR 1919" (mono, gerua), right text. Add subtle detail: "no dalil · no vakil · no appeal" as a large italic line. Height modest. Salt March route SVG: width ~full content; a path from left-bottom to right-top? Sabarmati (left) to Dandi (right): draw a gentle dotted curve with two circles labeled, plus along it ticks for 24 days; annotations: "12 MARCH — 78 VOLUNTEERS SET OUT", "6 APRIL — SALT LAW BROKEN". Distance "240 MILES" centered above. Draw in ink with gerua nodes. Hand-drawn feel: use dashed stroke (stroke-dasharray 2 6, round caps) = footprint-like dotted trail. Ledger table (CDM participants): CSS grid rows: columns `150px 1fr 1fr` (Who | Their idea of swaraj | What happened). Header row mono small caps with bottom rule. Row separators thin rules. On narrow screens stack. Boycott strike list: In NCM section, a "The programme" block: items list; each item has a strike span: `.strike` with `::after` absolute line (gerua, 2px, slight rotate -1deg) scaleX 0 → 1 with transition delay staggered; triggered by `.inview` class via IntersectionObserver. Items: "Titles & honours", "Courts & councils", "Government schools & colleges", "Civil services, police, army", "Foreign cloth & liquor". Then a following line: "…and in their place: khadi, national schools, picketing." Show stat: foreign cloth imports halved ₹102cr → ₹57cr (1921–22). Stat ledger in war section: horizontal row of 3 stats separated by vertical rules: - "2×" — prices doubled 1913–18 - "1,00,000+"? no. Use: "12–13 mn" — died in famine & influenza, 1918–21 - "Rs 102 cr→57 cr" is for NCM. War stats: "2×", "12–13 mn", "3 satyagrahas 1917–18"? Better third: "1915" Gandhi returns? That's not a stat. Keep two big + line. Or: "2×" prices; "12–13 mn" lives; "1918–21" crop failure, famine & flu. Fine — three entries with the third being period. OK. Dates index at bottom: "The chapter in fifteen dates" — a grid: 3 columns × 5 rows of `YEAR — event` in mono year + small serif text. This is dense but it's an index — legitimate. Use 2 columns on mobile. Add rule-separated. Exam pointers: a bordered box (double border) titled "BEFORE YOU ENTER THE HALL — five pointers". Bullets: 1. NCM vs CDM: non-cooperation refused British institutions; civil disobedience broke colonial laws (salt). 2. Why salt: used by all classes, most visible injustice — one law everyone could break. 3. Chauri Chaura (Feb 1922) → NCM called off; Gandhi–Irwin Pact (5 Mar 1931) paused CDM. 4. Poona Pact (Sept 1932): reserved seats instead of separate electorates for Depressed Classes. 5. Bharat Mata first imagined by Bankim Chandra (Vande Mataram); painted by Abanindranath Tagore. Footer: "Compiled from NCERT 'India and the Contemporary World – II', Chapter 2. Study sheet for personal revision." + tiny wheel glyph repeat. Toolbar: fixed top or floating bottom-right pill: "Download PNG" (primary, ink bg), "Print". Add subtle instructions? A small hint line under? Keep toolbar minimal: left label "NATIONALISM IN INDIA — REVISION SHEET", right buttons. On mobile, simplify. Toast: bottom center small ink pill, appears 2.4s. html2canvas: CDN `https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js`. Capture with `scale: 2, backgroundColor: '#F3EDDF'` (use computed paper color), `useCORS: true`. Wait fonts: `await document.fonts.ready`. Also temporarily pause wheel animation? It's fine. One catch: html2canvas renders transforms — the rotated wheel will capture at current angle — fine. Potential html2canvas issues: `mix-blend-mode` (avoid using), `background-clip: text` (avoid), CSS `filter` (avoid on poster), `position: sticky` in capture (avoid), custom `clip-path`? avoid. Use plain layout for poster. Also `box-shadow` renders fine. Letter-spacing fine. OK. Devanagari in html2canvas: it draws text glyph-by-glyph via canvas — should handle complex shaping? html2canvas uses the browser's fillText, which shapes correctly with fonts loaded. Should be fine. Also the strike-through pseudo-elements: html2canvas supports pseudo elements? It does render ::before/::after (it computes them). scaleX transform transitions — capture mid-animation risk; ensure strikes completed or capture anyway. Fine. IntersectionObserver won't matter during capture (states already applied). Grain texture: generated canvas noise tile → set as `poster.style.backgroundImage = url(dataurl)` with `background-blend-mode: multiply`? background-blend may not render in html2canvas. Instead generate speckle PNG with transparency at low alpha in ink color, and just layer it (normal blending) — poster background-color paper + background-image noise URL. The noise drawn with rgba(34,28,21, ~0.05) dots + a few lighter flecks rgba(255,255,255,0.06). Straightforward. Apply to body too? Apply to poster only (that's what we export) and toolbar area can be darker neutral (#E9E2D0 or dark ink desktop backdrop). Actually page behind poster: a deep ink (#191512) backdrop so the cream poster pops like a mounted sheet with shadow. On export, only poster captured — good. Toolbar sits on backdrop. Wait — "large low-contrast gray areas on dark backgrounds" — the backdrop is just a frame around a bright poster; fine, the poster is the content. Poster shadow: `box-shadow: 0 30px 80px rgba(0,0,0,.5)`. Now spine/section structure — let me define sections: 1. PART 01 — 1914–1918 · THE WAR TURNS THE TIDE (year node: 1914) 2. PART 02 — 1915–1918 · SATYAGRAHA FINDS ITS FEET (node: 1915) 3. INTERLUDE — 1919 (dark band) (node: 1919) 4. PART 03 — 1920–22 · NON-COOPERATION (node: 1920) - includes sub "three arenas" and Chauri Chaura note (node 1922 on the interlude between? maybe a small spine marker "1922" mid-part) 5. PART 04 — 1927–29 · TOWARDS CIVIL DISOBEDIENCE (node: 1928 or 1927) 6. PART 05 — 1930–34 · CIVIL DISOBEDIENCE (node: 1930) — includes salt march route + participants ledger + pact 7. PART 06 — THE LIMITS OF THE MOVEMENT (node: 1932) 8. PART 07 — A NATION IMAGINED (node: 1921? flag) — collective belonging 9. Index of dates (node: ——) 10. Exam pointers box 11. Footer Hmm, "The Limits" chronologically is 1932; "A nation imagined" is timeless (19th–20th c). Nodes: use 1932 and "IDEAS". Fine — the node label can be text. Between part 4 and 5, include mini-node "1929" for Purna Swaraj? I'll fold 1929 into Part 04 heading range "1927–29". Part 05 "1930–34". Left rail year values: 1914 · 1915 · 1919 · 1920 · 1927 · 1930 · 1932 · ✳ — good chronology. Also add small mid markers (small dot, no label) for 1922, 1929, 1931 within sections? Might clutter. Instead inside content, use inline date stamps in mono gerua — consistent device: `22 FEB 1922` before notes. That gives density of dates without spine clutter. Good. People glossary? Maybe integrate people names with small caps bold on first mention + a "Dramatis personae" mini-index in footer area? Space is already big. Skip separate glossary; ensure names bolded in text. Actually a compact "Faces in the chapter" strip could help: Gandhi, Ali brothers, Baba Ramchandra, Alluri Sitaram Raju, C.R. Das & Motilal Nehru, Jinnah, Ambedkar, Bankim & Abanindranath Tagore, Natesa Sastri — one line each. Could fold into bottom index section as second grid "People". Good idea: bottom has two indexes: "THE CHAPTER IN FIFTEEN DATES" and "PEOPLE TO NAME-DROP" (10 entries, role + one line). This adds real revision value. That's a big build. Let me be disciplined and write it. Copy drafting (concise, board-accurate): --- **MASTHEAD** Kicker row: "INDIA AND THE CONTEMPORARY WORLD – II" · "CBSE CLASS X" · "HISTORY SHEET Nº 02 · 1915–1934" Title: Nationalism in India Deck: "How a handful of local satyagrahas became a movement of millions — the whole chapter, one sheet, exam-ready." Core line (mono): SWARAJ · SATYAGRAHA · NON-VIOLENCE · SWADESHI **PART 01 — 1914–1918 · THE WAR TURNS THE TIDE** Body: The First World War changed India's economy to fund the British war effort. Defence spending soared through war loans and steeper taxes — customs duties rose and income tax was introduced. Prices doubled between 1913 and 1918 while wages stayed still; villages saw forced recruitment; and the failure of crops in 1918–19 and 1920–21, followed by famine and the influenza epidemic, killed 12–13 million people. Hardship bred hope: if hardships were shared, so should struggle be. Stats: 2× (prices doubled, 1913–18) · 12–13 mn (lives lost to famine & influenza) · 1915 (Gandhiji returns from South Africa, January) Marginalia: "Anger at scarcity + hope of change = soil for mass nationalism." **PART 02 — 1915–1918 · SATYAGRAHA FINDS ITS FEET** Lead: January 1915 — Mohandas Karamchand Gandhi returns from South Africa with a new weapon: satyagraha — mass struggle without violence, appealing to the oppressor's conscience. Ledger list: - 1917 · CHAMPARAN, Bihar — Gandhiji fights for indigo planters crushed by the plantation system. - 1917 · KHEDA, Gujarat — crop failure and a plague epidemic; he demands revenue relaxation. - 1918 · AHMEDABAD — he sits (and fasts) with cotton-mill workers in dispute over wages. Marginalia: "Satyagraha = truth-force: the cause is fought, not the man." **INTERLUDE 1919 (dark band)** Left: 1919 / THE YEAR OF FURY - Rowlatt Act (March): political prisoners could be detained without trial for two years. Indians named it: no dalil, no vakil, no appeal. Gandhiji's first all-India satyagraha — hartal on 6 April. - 13 April 1919 — Jallianwala Bagh, Amritsar: villagers gathered for Baisakhi; General Dyer blocked the exits and fired. Martial law followed in Punjab. The empire had crossed a line. **PART 03 — 1920–22 · NON-COOPERATION** Lead: To unite Hindus and Muslims after Jallianwala, Gandhiji joined hands with the Khilafat issue (Muhammad Ali & Shaukat Ali; Calcutta, Sept 1920). Nagpur session, Dec 1920: Congress adopts the Non-Cooperation Movement. Boycott block: "British titles, courts, councils, schools, services, goods — given back, walked out of, burnt:" Strikes: surrender titles & honours / boycott councils, courts, civil services, police, army / leave government schools & colleges / picket liquor shops / burn foreign cloth. Replace line: In their place — khadi, swadeshi, national schools. Foreign cloth imports halved: ₹102 crore → ₹57 crore (1921–22). Three arenas rows: - THE TOWNS — Middle class leads: students leave classes, teachers resign, lawyers give up practice. Falters: khadi is costlier than mill cloth, and there are no Indian institutions to replace the British ones. - THE COUNTRYSIDE — Awadh: Baba Ramchandra leads tenants against talukdars, high rents and begar; Oudh Kisan Sabha (Oct 1920, with Jawaharlal Nehru) grows to 300+ branches in a month. By 1921, peasants loot bazaars and grain hoards in Gandhiji's name. Gudem Hills (Andhra): Alluri Sitaram Raju leads tribal guerrillas who raid police stations — he honours Gandhi yet insists only force frees India; executed 1924, now a folk hero. - THE PLANTATIONS — Assam: the Inland Emigration Act (1859) chains workers to tea gardens. Their swaraj = the right to walk home. Thousands leave as the movement rises — many are caught and beaten when strikes strand them en route. Dark note inline: 22 FEB 1922 · CHAURI CHAURA — a crowd burns a police station; satyagraha cannot mean violence. Gandhiji halts the movement. C.R. Das & Motilal Nehru form the Swaraj Party to return to councils; Jawaharlal Nehru & Subhas Chandra Bose push for full independence. **PART 04 — 1927–29 · TOWARDS CIVIL DISOBEDIENCE** - Depression bites: agricultural prices collapse after 1930 (falling from 1926). - 1928 · Simon Commission arrives — all-British, no Indian member — met with "GO BACK SIMON" by Congress and the Muslim League alike. - Oct 1929 — Lord Irwin's vague promise of "dominion status" convinces no one. - DEC 1929 · LAHORE CONGRESS — Jawaharlal Nehru as president resolves PURNA SWARAJ, complete independence. 26 Jan 1930 celebrated as Independence Day. **PART 05 — 1930–34 · CIVIL DISOBEDIENCE** Lead: Gandhiji writes to Irwin with eleven demands; the most stirring — abolish the salt tax. Salt touches every Indian; one law everyone could break. Salt March graphic: SABARMATI ASHRAM — 12 MARCH 1930 — 78 volunteers · 240 miles · 24 days → DANDI — 6 APRIL — salt law broken. Following: India answers — salt made, foreign cloth & liquor boycotted, revenue & chaukidari taxes refused, village officials resign, forest laws broken in the Reserved Forests. Repression & pause: Abdul Ghaffar Khan (Apr) and Gandhiji (May) arrested; ≈100,000 jailed, women and children beaten. 5 MARCH 1931 · GANDHI–IRWIN PACT — prisoners released; Gandhiji attends the Second Round Table Conference (London, Dec 1931) — returns empty-handed. Movement relaunched, loses force by 1934. Participants ledger (Who joined & what swaraj meant): - Rich peasants — Patidars (Gujarat), Jats (UP) — swaraj = lower revenue; crushed by depression. → Enthusiastic till 1931; when revenue wasn't cut, they sat out 1932. - Poor peasants — small tenants — swaraj = rent unpaid to landlords remitted. → Congress wouldn't back 'no rent'; many drifted to Socialist/Communist radicals; unreliable support. - Business classes — FICCI (1927); Purshottamdas Thakurdas, G.D. Birla — swaraj = trade without colonial restriction; protection from imports. → Fund the movement; later wary of militancy, disruption and rising socialism. - Industrial workers — swaraj = wages, conditions, rights. → Sparse participation (Nagpur region excepted); strikes in railways (1930) & docks (1932); Congress keeps distance to hold industrialist support. - Women — swaraj = a place in the public struggle. → Thousands march, make salt, picket, fill jails — yet no real change in their status; Congress offers only ceremonial roles. **PART 06 — 1932 · THE LIMITS OF THE MOVEMENT** Two columns: - Dalits / Depressed Classes — Gandhiji calls untouchability a blot: "swaraj will not come for a hundred years without it." Ambedkar (Depressed Classes Association, 1930) demands separate electorates at the Second RTC; the British concede; Gandhiji begins a fast unto death. POONA PACT · SEPT 1932 — reserved seats in councils, but elected by a general electorate. Dalit leaders stay wary of a Congress they see as high-caste. - Muslims — after Khilafat fades, many feel alienated; Congress drifts close to Hindu nationalist groups. Jinnah offers separate electorates in exchange for reserved seats & proportional representation (Bengal & Punjab) — talks fail (Jayakar's opposition, 1928). Suspicion deepens; communal riots spread; large sections of Muslims stand apart from the united struggle. **PART 07 — A NATION IMAGINED** Lead: Movements need more than demands — they need an India one can feel. Entries: - BHARAT MATA — Bankim Chandra Chattopadhyay writes Vande Mataram (in Anandamath); Abanindranath Tagore paints the motherland as a calm, divine ascetic. Prints carry her into every bazaar. - FOLKLORE — Rabindranath Tagore collects Bengali ballads; Natesa Sastri publishes The Folklore of Southern India — "the most trustworthy manifestation of people's real thoughts." - THE FLAG — Swadeshi Bengal: red-green-yellow with 8 lotuses (8 provinces) & a crescent. 1921: Gandhiji's Swaraj tricolour (red, green, white) with the spinning wheel — self-help in cloth. (small SVG flags) - HISTORY RETOLD — a glorious ancient past (science, maths, art, trade) and colonial decline. Warning: a Hindu-tinted glory left other communities feeling left out. **INDEX — THE CHAPTER IN FIFTEEN DATES** (grid 3×5 or flowing) 1914–18 WWI hardships · 1915 Gandhi returns (Jan) · 1917 Champaran & Kheda · 1918 Ahmedabad mill workers · 1919 Rowlatt Act; Jallianwala Bagh (13 Apr) · 1920 NCM begins; Oudh Kisan Sabha · 1921 foreign cloth imports halved · 1922 Chauri Chaura; NCM withdrawn (Feb) · 1928 Simon Commission · 1929 Purna Swaraj (Lahore, Dec) · 1930 Salt March (12 Mar–6 Apr); CDM · 1931 Gandhi–Irwin Pact (5 Mar); 2nd RTC · 1932 Poona Pact (Sep) · 1934 CDM fades out. — that's 14; add 1927 FICCI founded → 15. **PEOPLE index** (10): - Mahatma Gandhi — satyagraha; leads NCM, CDM, Salt March - Muhammad Ali & Shaukat Ali — Khilafat leaders, 1920 - Baba Ramchandra — Awadh peasants against talukdars - Alluri Sitaram Raju — Gudem Hills tribal guerrilla, executed 1924 - C.R. Das & Motilal Nehru — Swaraj Party, 1922 - Jawaharlal Nehru — Oudh Kisan Sabha; Purna Swaraj, 1929 - Purshottamdas Thakurdas & G.D. Birla — business support, FICCI - B.R. Ambedkar — Depressed Classes; separate electorates; Poona Pact - Bankim Chandra Chattopadhyay — Vande Mataram / Anandamath - Abanindranath Tagore — painted Bharat Mata; Natesa Sastri — Tamil folklore. (combine or 10th = Abanindranath; mention Natesa in folklore entry) **EXAM POINTERS box** (5 bullets as drafted above). **FOOTER**: "Compiled from NCERT · India and the Contemporary World – II · Chapter 02 — for personal revision." + wheel glyph + "वंदे मातरम्". --- Now code. Single HTML file. Let me carefully write CSS. CSS variables: ``` --paper:#F4EEDF; --paper-deep:#EAE2CC; --ink:#211B12; --ink-soft: rgba(33,27,18,.78); --indigo:#2C3E68; --gerua:#B4441C; --leaf:#41603F; --line:rgba(33,27,18,.22); --line-strong: rgba(33,27,18,.55); ``` Hmm gerua #B4441C on paper contrast ~ fine (used for accents/big text). For body text use ink. Fonts: ``` ``` Backdrop: body background #171310 (deep warm black), poster centered with padding. Toolbar: fixed bottom center pill? A floating bottom bar could obstruct; use fixed top bar: height 56px, backdrop ink, contains left title mono small + right buttons. On capture, poster excluded toolbar (capture only #poster element) ✓. Print: hide toolbar. Buttons: paper bg, ink text, border 1px ink, mono 12px uppercase, hover invert. Primary: gerua bg? Gerua bg with paper text — flat, bold, fine. Poster structure: ```html

...

...
...

...

``` Wait spine should run through the whole body including dark interludes. Interlude full-bleed: if poster has padding 64px, interlude uses negative margins to stretch across full poster width. The spine sits at left of `#body` (position relative) — line from top to bottom of body. Interlude inside body keeps grid so spine continues over it? The interlude has ink bg full-bleed; the spine line would overlap the band — visually the line crossing the dark band could be okay if line color adapts... simpler: let the dark band be inside the content column (not full-bleed), i.e., a dark block within content area with margin. Full-bleed is punchier. Option: spine line at left in the rail area — dark band spans from rail into content but I can make the band start after the rail (band occupies content column + extends right to poster edge; rail keeps paper bg). Asymmetric full-bleed-right — actually stylish: the dark band bleeds off the right edge, spine continues on paper rail. Let's do: `.bleed-r { margin-right: -64px; }` (poster padding), applied to interlude container which sits in content column. Nice. Grid for parts: ```css .part{ display:grid; grid-template-columns: 108px 1fr; gap: 0 28px; padding: 44px 0; } .rail{ ... } .content{ ... } ``` Spine line absolute in #body at left: 54px (center of 108 rail), width 1px, bg line color; fill overlay gerua 2px width, translateX -0.5px. Node: each .part has .node absolutely at top aligned with part padding: dot at spine x. Implement node inside .rail: `.rail .year { position:relative }` with dot via ::before positioned at left: -(rail center distance)... Let me structure: `.rail` contains `.year` (mono, 15px, 600). The dot: `.part::before` absolute: left: 54px center: `left: calc(54px - 4px); top: 48px;` 9px circle, paper bg, 2px border line-strong; active: bg gerua border gerua + small ring. Year text in rail: `text-align: right`? If spine at 54px, year label left of it, right-aligned to 42px. Rail width 108: label occupies 0–44px right aligned. Hmm or put year right of the line: rail 108px, line at left edge (x=8px), dot at 8px, year at 26px+. Simpler! Spine line at left: 8px of body; rail column starts with the year offset by 26px padding-left. Node dot at (8px). Then content column = rest. So: `.part { grid-template-columns: 132px 1fr }`; rail has `padding-left: 26px`; spine at body left 8px. Year stacked: big year mono + tiny part no below ("PART 03"). Thread fill: from body top to current scroll point. JS: ```js const bodyRect = threadwrap.getBoundingClientRect(); const targetY = Math.min(window.innerHeight*0.55, ...) // fill to viewport middle clamp ``` Compute fill px = clamp(viewportMid - bodyTop, 0, bodyHeight). Set fill.style.height. Smooth via transition none (updates on scroll). Also a small knot: `#threadFill::after` dot at bottom. Fine, but ::after inside element with height works. Also mark nodes active when fill passes them or when section in view — use IO with rootMargin center band: `{rootMargin: "-40% 0px -55% 0px"}` toggles `.on`. Charkha SVG with rotating group. Let me write it: ```html ``` Charkha stand: an A-frame: lines from (110,110) to (70,196) and to (150,196), plus base line (52,196)-(168,196), stroke ink 5. But then rotation of wheel would rotate... stand outside rotating group ✓. Also a handle crank? skip. Spokes generated by JS: 16 lines x1=110+17cosθ etc. Or hardcode via transform: `` ×16 — JS loop simpler, generate into #spokes on load. But html2canvas captures fine since DOM is real. Size ~200px in masthead right. Also small wheel glyph in footer (reuse via ``? define symbol) — define `` and two ``. Rotation only for masthead instance. Rotation of `` shadow DOM — skip rotating footer one. Devanagari stamp: `.stamp { border:2.5px solid var(--gerua); color: var(--gerua); padding: 6px 14px; transform: rotate(-6deg); font-family:'Yatra One'; font-size: 20px; letter-spacing:1px }` with slightly rough border? keep clean. Content "वंदे मातरम्". Position under charkha or overlapped. Place under the charkha, rotated -5deg, like stamped ink. Maybe add double border via outline offset. Dark interlude styles: `.interlude { background: var(--ink); color: #F0E8D5; margin-right:-64px; padding: 36px 40px 36px 36px; }` Inside: grid date + text. Big "1919" in Fraunces 900 gerua on ink — gerua on ink contrast okay (#B4441C on #211B12 — moderate; better use a brighter gerua for dark bg: #D9682F). Define `--gerua-lit:#D9682F`. "no dalil, no vakil, no appeal" — italic Fraunces large, paper color, with quotes. Salt march SVG: viewBox="0 0 760 150". Path M 40 110 C 200 40, 420 130, 700 60 — gentle wave. dashed stroke ink 2, dasharray "1 9", linecap round → dotted. Nodes: circle at (40,110) r6 gerua fill; (700,60) r6 ink. Labels mono 11px. Ticks: 24 small perpendicular ticks along path? Complex path math; instead show "· · · 24 DAYS · · ·" centered label above path middle: mono text "240 MILES · 24 DAYS · 78 VOLUNTEERS". Also a tiny walking stick + cap glyph? A simple Gandhi topi triangle glyph at end? Draw a small "white cap" as a rounded rect trapezoid at Dandi node — cute detail: ``—a small cap above Dandi dot. Text elements in SVG: use `` with mono font — html2canvas handles svg? html2canvas has partial SVG support... Actually html2canvas renders inline SVG by serializing to image — it draws SVG elements via `new Image()` with serialized SVG; text in SVG uses fonts — serialized SVG drawn in `` cannot access document webfonts → mono fallback. Risk: fonts in SVG export fallback. Mitigation: use system-safe font stack in SVG text (`font-family="'IBM Plex Mono', ui-monospace, Menlo, monospace"`) — in-page it uses Plex Mono; in export falls back to monospace — acceptable slight difference. Alternatively render labels as HTML absolutely positioned over SVG — better: SVG only for the path + dots + cap; labels as HTML elements positioned via flex above/below. Cleaner. Let me do: a `.march` block: - HTML row: "SABARMATI ASHRAM · 12 MAR" — center "240 MILES · 24 DAYS · 78 VOLUNTEERS" — right "DANDI · 6 APR — SALT LAW BROKEN" positioned with grid, and the SVG path beneath spanning. Positioning: left label bottom-left, right label top-right. Use relative container: svg width 100%; labels absolutely placed. Simple. Flags SVG (Part 07): two small flags 120×80: - Swadeshi flag (red/green/yellow horizontal stripes + 8 lotuses + crescent): stripes: red top? Textbook: tricolour (red, green, yellow), eight lotuses (eight provinces), crescent moon (Hindu & Muslim). Draw: three stripes (#C0511F? use gerua for red, --leaf green, ochre #D9A02B yellow), 8 small lotus dots... lotus shape complex; use 8 small circles/petals arranged? Simplify: 8 tiny lotus = 8 small flower glyphs — I'll draw 8 small 5-petal marks as circles cluster? Keep: 8 small dots in two rows + crescent path on right. With caption. Hand-drawn ok. - Swaraj flag 1921: red, green, white stripes + charkha wheel center: reuse mini wheel symbol (circle + spokes) in ink. Captions: mono small: "SWADESHI FLAG · BENGAL" / "SWARAJ FLAG · GANDHI, 1921". html2canvas + inline SVG: it serializes inline SVG — should render shapes fine (no external refs, no CSS vars inside? CSS variables inside SVG attributes won't resolve in serialized SVG! Use literal hex colors in SVG markup, not var()). Important: any `` references also OK same-doc? In serialized SVG `` referencing symbol defined in same SVG tree — include symbol inside same svg or duplicate shapes manually. To be safe: draw mini wheel manually with a JS-generated group duplicating spokes (or just use 8 spokes lines hardcoded) — I'll write a JS helper `wheelInto(svgEl, cx, cy, r, spokes, stroke, sw)` that builds spoke lines; used for masthead wheel and mini flag wheel. All colors literal. Main wheel: JS builds all circles too? Circles are static markup with literal colors — fine, keep literal hex in markup for export fidelity. I'll use literal hexes in ALL inline SVG (avoid var() there). CSS styling of svg elements (stroke via CSS) also risks serialization missing external CSS — html2canvas copies computed styles? For inline SVG elements html2canvas uses the serialized DOM — presentation attributes survive; CSS classes on svg children generally don't. So set all SVG paint as presentation attributes. Good rule. Noise tile generation: ```js function makeGrain(){ const c=document.createElement('canvas'); c.width=c.height=160; const x=c.getContext('2d'); const img=x.createImageData(160,160); for(let i=0;i{ const d=window.scrollY-lastY; lastY=window.scrollY; vel=Math.min(9, vel + d*0.05); },{passive:true}); function tick(){ angle+=vel; vel+= (0.12-vel)*0.02; wheelRot.setAttribute('transform',`rotate(${angle} 110 110)`); requestAnimationFrame(tick);} ``` Slow idle ~0.12deg/frame ≈ 7deg/s. Scrolling boosts. Good. Hover speed-up: poster mouseover charkha → vel=4 briefly. Add cursor pointer + title? Fine minor. Thread fill: ```js function thread(){ const r=threadwrap.getBoundingClientRect(); const mid=innerHeight*0.5; let h= mid - r.top; h=Math.max(0,Math.min(h,r.height)); fill.style.height=h+'px'; } ``` Call on scroll/resize/load. IO for `.part` active & reveal animations: `.reveal` elements start opacity .0 translateY(14px); IO adds .in. Apply to section content blocks & ledger rows with stagger via transition-delay inline style? Use CSS `transition-delay: calc(var(--i)*60ms)` with `--i` set via JS or nth-child. Keep simple: rows get `--i` inline. Strike animation: `.strike{position:relative}` `.strike::after{content:'';position:absolute;left:-2%;right:auto;width:104%;top:52%;height:2.5px;background:var(--gerua);transform:scaleX(0) rotate(-0.6deg);transform-origin:left center;transition:transform .6s cubic-bezier(.7,0,.2,1) var(--d,0s)}` `.inview .strike::after{transform:scaleX(1) rotate(-0.6deg)}` with per-item `--d`. Trigger `.inview` on the boycott list container via IO once. Toast: `#toast` fixed bottom center; function toast(msg). Download: ```js btn.addEventListener('click', async ()=>{ btn.disabled=true; btn.textContent='RENDERING…'; try{ await document.fonts.ready; const canvas=await html2canvas(document.getElementById('poster'),{scale:2, backgroundColor:'#F4EEDF', useCORS:true, logging:false}); const a=document.createElement('a'); a.download='nationalism-in-india-class10.png'; a.href=canvas.toDataURL('image/png'); a.click(); toast('PNG downloaded — 2200px wide, print-ready.'); }catch(e){ toast('Export failed here — use the Print button and "Save as PDF".'); } btn.disabled=false; btn.textContent='DOWNLOAD PNG'; }); ``` toDataURL on large canvas (2200 × maybe 10000+) could exceed limits — 2200×~12000 = 26.4M px ok under most limits (Chrome max canvas ~268M px, area dimension 65535). Fine. Print CSS: `@media print { .toolbar{display:none} body{background:#fff; padding:0} #poster{box-shadow:none; margin:0; width:100%; max-width:none} .interlude{ -webkit-print-color-adjust:exact; print-color-adjust:exact } }` and add `* {print-color-adjust: exact}` maybe. Responsive: max-width 1100; padding clamp. Under 720px: parts become single column with spine hidden or thinner (rail shows year above content, spine at 8px still works if rail stacked? simpler: hide spine, rail displays year inline before heading). I'll do: `@media (max-width:760px){ .part{grid-template-columns:1fr} .rail{display:flex; padding-left:26px...} .spine{left:8px} }` Keep spine visible with rail as a row above content: year + part number inline. Set `.part::before` dot still at left 8px aligned top. OK. Let me now also design headings inside content: ``` .part h2 { font-family:Fraunces; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 640; letter-spacing:-0.01em; margin: 2px 0 14px } .kick { font-family:mono; font-size:11px; letter-spacing:.22em; color:var(--gerua); font-weight:600 } ``` Sub-block labels ("THE TOWNS") as `.arena` grid rows: `grid-template-columns: 130px 1fr` with mono label gerua-ish indigo? Use indigo labels for arenas, gerua reserved for dates & spine. Define hierarchy: gerua = chronology/action (dates, strikes, nodes); indigo = concepts/names. Ledger table: ``` .ledger{border-top:2px solid var(--ink)} .lrow{display:grid;grid-template-columns:150px 1.1fr 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)} .lhead{mono 10px uppercase letterspace, color ink-soft, padding 8px 0} ``` Who cell: Newsreader 600 + small italic parenthetical. Dates index: `.dates{columns? use grid: repeat(auto-fill,minmax(230px,1fr)); }` each `.d{border-top:1px solid var(--line); padding:10px 0; display:flex; gap:12px}` year mono gerua fixed width 74px. 15 items → rows of varying count; that's an index not cards — ok. Border-top rules give ledger feel. People index: similar grid but serif text with name bold. Exam box: `border:2.5px solid var(--ink); outline:1px solid var(--ink); outline-offset:4px; padding:26px 30px; background:paper` — double frame archival. Title mono. Numbered items with Fraunces numerals gerua. Footer: double rule top (2px + 1px), mono microcopy, small wheel use + Devanagari. Masthead details: top double rule: `border-top:3px solid ink; border-bottom:1px solid ink; padding:8px 0` containing 3 mono labels justified space-between. Then title block grid: `grid-template-columns: 1fr 240px`. Right col: charkha + stamp overlapped (stamp absolute rotated at wheel bottom-left overlapping slightly). Also add ghost giant "स्वराज" behind title? Maybe too much; skip — restraint. One more accent: under title, thick rule 3px ink then thin 1px (classic editorial double rule) before deck. Let me also consider heading kickers text: - PART 01 — THE BACKDROP · 1914–1918, h2 "The war turns the tide" - PART 02 — 1915–1918, h2 "Satyagraha finds its feet" - Interlude: 1919 (dark) - PART 03 — 1920–22, h2 "Non-cooperation: the first mass movement" - PART 04 — 1927–29, h2 "Towards civil disobedience" - PART 05 — 1930–34, h2 "Civil disobedience: salt breaks the empire" hmm "Salt breaks the law" — "The salt marches, the empire wobbles"? Keep: "Civil disobedience: breaking the salt law" - PART 06 — 1930–32, h2 "The limits of the movement" (year node 1932) - PART 07 — IDEAS, h2 "A nation imagined" Rail years: 1914, 1915, [1919 dark], 1920, 1927, 1930, 1932, ✳(symbol "✳"? no emoji — use "MIND"? use "19ᵗʰ–20ᵗʰ C." too long. Use "∞"? Use "IDEA") — rail label "IDEA" in mono. Fine. Interlude as its own `.part` too so node 1919 shows; inside dark band but rail area stays paper: band bleeds right only. Chauri Chaura: include as an inline "halt" notice within Part 03 bottom: bordered-left 3px gerua block, date mono, text. Good. Now — time to write the actual file. I'll be careful with quantity but complete. Also ensure no emoji anywhere. No gradients. No lorem. Let me write JS bits list: 1. build spokes (masthead 16; flag mini 8; footer 8) 2. grain 3. scroll: wheel rotation + thread fill 4. IO: parts active (dot+year), reveal 5. IO: boycott strikes 6. buttons: download, print, toast 7. generate index? no, static HTML. Also `document.fonts.ready.then(build)` not needed; fonts swap fine. Small detail: `html {scroll-behavior:smooth}` not needed. Let me write the mini lotus marks for swadeshi flag: 8 lotuses — I'll place 8 small circles in 2 rows of 4 on middle stripe? Textbook doesn't specify arrangement; commonly depicted row of 8 lotuses across middle. Draw 8 tiny lotus glyphs: each = `` too fiddly; represent as 8 small flowers: circle r2 with 5 petal strokes? I'll draw each lotus as a simple 3-petal fan: path `M -3 0 Q 0 -6 3 0` plus center dot. Positioned y = middle stripe center, x spread. And crescent: `` crescent via two arcs: `M x y a r r 0 1 1 ...` — simpler: `` overlapped with stripe-colored circle to cut → crescent = path: `M 96 34 a7 7 0 1 0 0.01 0 z`? Let me do crescent using mask-free approach: draw full circle white? On yellow stripe... I'll draw crescent as path: `M100 26 a8 8 0 1 1 -8 -8 a6.5 6.5 0 1 0 8 8 z` roughly. Let me compute: standard crescent path: `M 100,18 A 9,9 0 1 0 100,36 A 11,11 0 1 1 100,18 Z` — produces crescent facing... acceptable visually; tune later mentally: crescents via two arcs share endpoints (100,18)-(100,36): outer arc A 9 9 0 1 0 (big sweep), inner arc back A 11 11 0 1 1. It'll look crescent-ish. Fine — it's a tiny detail. Flag dims: 132×88, stripes 29.33 each: red #B4441C, green #3F6B3F? and yellow #D9A02B. Swaraj flag: red top, green middle, white bottom + wheel ink centered. Wait textbook swaraj flag: "tricolour (red, green and white)" and swadeshi "tricolour (red, green and yellow)". ✓. Salt march svg path with dotted footprints — add small foot dots pairs? Keep single dotted trail. Now think about total length: this HTML will be long (~700-900 lines). That's fine. Content text — write final copy now (careful, concise, accurate): **P1 body:** "The First World War (1914–18) made India pay for Britain's war: defence spending rose through war loans, customs duties climbed and income tax arrived. Between 1913 and 1918 prices doubled while wages did not move; villages faced forced recruitment. Then crops failed in 1918–19 and 1920–21 — famine and an influenza epidemic followed. Hardship bred a question: if sacrifice is shared, why not struggle?" Stats: "2× — price rise, 1913–18" / "12–13 mn — lives lost to famine & influenza" / "1915 — Jan: Gandhiji returns from South Africa". **P2 lead:** "January 1915 — Mohandas Karamchand Gandhi comes home from South Africa carrying a new method of protest: satyagraha — fight injustice without violence, and appeal to the oppressor's conscience instead of his fear. He tests it on three local battles:" ledger: - 1917 · CHAMPARAN (BIHAR): Indigo planters trapped in an oppressive plantation system — Gandhiji's first satyagraha on Indian soil. - 1917 · KHEDA (GUJARAT): Crop failure and a plague epidemic; he demands relaxation of revenue collection. - 1918 · AHMEDABAD: Satyagraha — and a fast — with cotton-mill workers over their wages. **Interlude:** Left col: "1919" giant + "THE YEAR OF FURY" Right: p: "The Rowlatt Act (March) lets the government jail political prisoners without trial for two years. United Indian opposition is steamrolled. Indians rename it —" big italic: "'No dalil, no vakil, no appeal.'" p: "Gandhiji answers with his first all-India satyagraha — a hartal on 6 April. On 13 April, in Amritsar, villagers gathered at Jallianwala Bagh for Baisakhi are fired on by General Dyer, who has blocked the only exits. Martial law follows across Punjab." foot: "KHILAFAT — Ali brothers Muhammad Ali & Shaukat Ali build a movement to defend the Ottoman Khalifa. Calcutta, Sept 1920: Gandhiji ties it to Non-Cooperation — one struggle, Hindus and Muslims together." **P3 lead:** "Nothing against the Raj, nothing with the Raj. Congress adopts the programme at the Nagpur session (Dec 1920). The movement's grammar:" boycott heading "THE BOYCOTT —" list struck: "Titles & honorary offices / Councils, courts & legislative bodies / Government schools, colleges & civil services / Foreign cloth & liquor shops". Replace line: "→ in their place: khadi and swadeshi, picketing, national schools & colleges." Stat line: "Foreign cloth imports halved — ₹102 crore (1921) → ₹57 crore (1922)." Faltering note (towns): as arenas. Arena rows: - IN THE TOWNS: "The middle class leads — students walk out of classes, teachers resign, lawyers give up practice. But khadi costs more than mill cloth, and Britain's schools and courts have no Indian replacements. By early 1922 the towns are trickling back. (Madras: the non-Brahman Justice Party contests the councils instead of boycotting — for them, councils were a rare path to power.)" - ON THE LAND: "Awadh — Baba Ramchandra, once an indentured labourer in Fiji, leads tenants against talukdars, exorbitant rents and begar. The Oudh Kisan Sabha (Oct 1920, with Jawaharlal Nehru) spreads to 300+ villages within a month. By 1921 peasants are looting bazaars and grain hoards — 'Gandhi Raj' invoked for their own ideas of justice. Gudem Hills (Andhra) — Alluri Sitaram Raju leads tribal guerrillas against police stations; he reveres Gandhi yet insists India will be freed by force. Executed in 1924, he lives on as a folk hero." - IN THE PLANTATIONS: "Assam — under the Inland Emigration Act of 1859, tea-garden workers cannot leave without a permit. Their swaraj is simple: the right to walk home. Thousands leave the gardens as the movement rises; strikes strand them on the road, and police beat back many of those caught." Chauri note: "22 FEB 1922 · CHAURI CHAURA, U.P. — a protesting crowd burns a police station with policemen inside. For satyagraha, violence voids the struggle. Gandhiji calls off Non-Cooperation. C.R. Das and Motilal Nehru form the Swaraj Party to fight from within councils; Jawaharlal Nehru and Subhas Chandra Bose argue for nothing less than full independence." **P4 rows (event list style with date stamps):** - 1926→: Depression — world farm prices slide, then collapse after 1930. Peasant India is squeezed. - 1927–28: Simon Commission — a constitutional commission with not one Indian on it. "GO BACK SIMON" greets it in every city — Congress and Muslim League protest together. - OCT 1929: Lord Irwin offers a vague "dominion status" — nobody is convinced. - DEC 1929: Lahore Congress — Jawaharlal Nehru as president passes the PURNA SWARAJ resolution. 26 JANUARY 1930 is celebrated as Independence Day. **P5:** lead: "Gandhiji writes to Irwin with eleven demands; the most stirring: abolish the salt tax. Salt is the one thing every Indian — rich or poor — must buy from the state. One law, everyone can break it." March graphic. Then: "The country answers — salt is made on the coast, foreign cloth and liquor shops are boycotted, peasants refuse revenue and chaukidari taxes, forest laws are broken in the Reserved Forests, village officials resign." Repression block: "Abdul Ghaffar Khan (Apr 1930) and Gandhiji (May) are arrested; about 100,000 satyagrahis are jailed; women and children are beaten in Sholapur and Peshawar." Pact block: "5 MAR 1931 · GANDHI–IRWIN PACT — political prisoners released; Gandhiji agrees to attend the Second Round Table Conference in London (Dec 1931). It fails. The movement is relaunched — and by 1934 it runs out of force." Ledger heading: "WHO JOINED — AND WHAT SWARAJ MEANT TO THEM" rows as drafted. **P6 columns:** Dalit col heading "THE DALIT QUESTION" text: "Gandhiji calls untouchability a wound on Hindu society — 'swaraj will not come for a hundred years,' he says, if it is not removed. He calls Dalits harijan, cleans toilets himself, satyagrahas for temple and well access. B.R. Ambedkar (Depressed Classes Association, 1930) wants political power, not sympathy: separate electorates for the Depressed Classes, demanded at the Second Round Table Conference. The British agree; Gandhiji begins a fast unto death." callout: "POONA PACT · SEPT 1932 — Depressed Classes (later, Scheduled Castes) get reserved seats in provincial & central councils — elected by a general electorate, not a separate one. Many Dalit leaders stay wary of a movement they see as high-caste." Muslim col heading "THE MUSLIM QUESTION": "After Khilafat fades, many Muslims feel alienated from a Congress drifting close to Hindu Mahasabha politics. Muhammad Ali Jinnah offers a deal — give up separate electorates for reserved seats in the Central Assembly and proportional representation in Bengal & Punjab. Talks collapse (M.R. Jayakar of the Hindu Mahasabha opposes compromise, 1928). By 1930 suspicion is thick; communal riots spread; a large part of Muslim India stands apart from the call for a united struggle." **P7 entries:** 1 BHARAT MATA — "Bankim Chandra Chattopadhyay writes Vande Mataram as a hymn to the motherland (later part of Anandamath); sung through the Swadeshi movement. Abanindranath Tagore paints her — calm, ascetic, divine. Popular prints carry her into every bazaar." 2 FOLKLORE — "Rabindranath Tagore gathers Bengali ballads and rhymes; in Madras, Natesa Sastri publishes The Folklore of Southern India in four volumes — folk tradition, nationalists believe, is the truest record of the people's mind, corrupted by outside rule." 3 THE FLAG — "Swadeshi Bengal raises a tricolour of red, green and yellow — eight lotuses for eight provinces, a crescent for Hindus and Muslims. In 1921 Gandhiji designs the Swaraj flag: red, green and white with the spinning wheel — self-help at the centre." (flags visual here) 4 A GLORIOUS PAST — "Nationalists mine history for golden ages of science, mathematics, art, philosophy and trade — decline blamed on colonisation. The trap: a past told only through Hindu iconography leaves other communities feeling like guests." **Dates index (15):** 1914–18 First World War: taxes ↑, prices double, forced recruitment 1915 Jan — Gandhiji returns from South Africa 1917 Champaran & Kheda satyagrahas 1918 Ahmedabad mill-workers' satyagraha 1919 Rowlatt Act · 13 Apr: Jallianwala Bagh 1920 Khilafat–Non-Cooperation begins; Oudh Kisan Sabha 1921 Foreign cloth imports halved (₹102 cr → ₹57 cr) 1922 Feb — Chauri Chaura; NCM withdrawn 1927 FICCI founded; Simon Commission named 1928 'Go Back Simon' demonstrations 1929 Dec — Lahore Congress: Purna Swaraj 1930 12 Mar–6 Apr Salt March; Civil Disobedience begins 1931 5 Mar — Gandhi–Irwin Pact; Nov? 2nd RTC Dec 1932 Sep — Poona Pact 1934 Civil Disobedience fades out **People index (10):** as drafted. **Exam pointers (5):** 1 "NCM vs CDM — Non-Cooperation refused to use British institutions; Civil Disobedience actively broke British laws. One withdrew, one defied." 2 "Why salt? — Used by every class, made costly by one unfair tax: the perfect single law for a nation to break together." 3 "Both movements ended in pause — NCM: Chauri Chaura violence (Feb 1922); CDM: Gandhi–Irwin Pact (Mar 1931) → failed RTC → relaunch → fade by 1934." 4 "Poona Pact (Sept 1932) — between Gandhiji's fast and Ambedkar's demand: reserved seats for Depressed Classes, general electorate." 5 "Bharat Mata — imagined first by Bankim Chandra (Vande Mataram), painted by Abanindranath Tagore; folklore (Tagore, Natesa Sastri), the flag and retold history built collective belonging." Footer: "REVISED FROM NCERT · INDIA AND THE CONTEMPORARY WORLD – II · CH. 02 — ONE-SHEET REVISION FOR THE CBSE CLASS X BOARD" + wheel + वंदे मातरम् + "SCROLL SPINS THE CHARKHA · SPINE THREAD SHOWS YOUR PROGRESS" hint maybe in toolbar instead. Alright — also masthead: maybe add a small "READ TIME ~8 MIN · EVERY DATE IN THE SYLLABUS" mono line? Skip. Now write code meticulously. Key layout values: ``` body{background:#16120D; padding: 96px 20px 80px; font-family:'Newsreader'} #poster{width:min(1120px,100%); margin:0 auto; background:var(--paper); color:var(--ink); padding: clamp(28px,6vw,68px); box-shadow: 0 40px 90px rgba(0,0,0,.55); position:relative;} ``` Toolbar fixed top: ``` .toolbar{position:fixed; inset:0 0 auto 0; height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; background:rgba(22,18,13,.92); border-bottom:1px solid rgba(244,238,223,.14); backdrop-filter:blur(6px); z-index:50; color:#EDE5D2} ``` backdrop-filter may not export — toolbar not captured anyway. Left: mono small "NATIONALISM IN INDIA · CLASS X REVISION SHEET". Right: two buttons. .btn{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.14em; padding:10px 16px; border:1px solid #EDE5D2; background:transparent; color:#EDE5D2; cursor:pointer; transition:...} .btn.primary{background:#B4441C; border-color:#B4441C; color:#F7F1E1} hover: .btn:hover{background:#EDE5D2; color:#16120D} primary hover darker gerua. Icons inside buttons: small inline svg (download arrow, printer) stroke currentColor. Toast: fixed bottom 24px center, ink bg paper text mono 12px, opacity/translate transition. Masthead: ```html

INDIA AND THE CONTEMPORARY WORLD – IICBSE · CLASS X · HISTORYSHEET Nº 02 · 1915 – 1934

Nationalism
in India

How a handful of local satyagrahas became a movement of millions — the whole chapter on one sheet: causes, movements, people, dates and the exam traps between them.

SWARAJ · SATYAGRAHA · NON-VIOLENCE · SWADESHI

वंदे मातरम्

``` h1: Fraunces; `em` italic weight 400? Fraunces italic gorgeous at high opsz. font-size clamp(56px, 9vw, 104px), line-height .95, letter-spacing -0.02em. "in India" italic wght 460. dblrule: border-top:3px solid ink; then :after 1px line 3px below — do `border-top:3px; margin... ` use div with `border-top:3px solid var(--ink); border-bottom:1px solid var(--ink); height:4px;` classic. core: mono 12px letterspacing .3em, gerua, margin-top 18px, with small wheels? keep text. Body container: ```html

... parts ...
``` .chapters{position:relative; margin-top:56px} .spine{position:absolute; left:9px; top:0; bottom:0; width:1px; background:var(--line)} .spine-fill{position:absolute; left:8px; top:0; width:3px; background:var(--gerua); height:0} fill has ::after dot at bottom: position absolute bottom -4 left -2.5: 8px circle gerua. Part: ```html

1914PART 01

THE BACKDROP · 1914 – 1918

The war turns the tide
...

``` .part{position:relative; display:grid; grid-template-columns:128px minmax(0,1fr); column-gap:34px; padding:46px 0} .ynode{position:absolute; left:5px; top:52px; width:9px;height:9px; border-radius:50%; background:var(--paper); border:2px solid var(--line-strong); transition:.4s} .part.on .ynode{background:var(--gerua); border-color:var(--gerua); box-shadow:0 0 0 4px rgba(180,68,28,.15)} .rail{padding-left:30px} wait node at left 5 (dot center at 9.5 ≈ spine 9) ✓; year text padding-left:26px. .ytxt{display:block; font-family:'IBM Plex Mono'; font-weight:600; font-size:15px; color:var(--ink-soft); padding-left:26px; transition:color .4s} .part.on .ytxt{color:var(--gerua)} .ptag{display:block; mono 10px; letter-spacing:.2em; color:var(--ink-soft) 60%; padding-left:26px; margin-top:6px} Interlude part: ```html

…1919 / PART ✳ or "PART 03"? numbering: parts 01,02, dark interlude unnumbered, then 03… Let me number interludes as "⸻"? ptag "TURNING POINT".

…

``` .interlude{background:var(--ink); color:#EFE7D3; margin-right:calc(-1 * var(--pad)); padding:34px 38px; margin-left:-34px?} The content column starts after rail; to bleed right only: margin-right:-68px (post pad). Left side stays at content edge. Rail visible on paper. Good. Inside interlude grid: `grid-template-columns: 190px 1fr; gap:28px`. Left: huge "1919" Fraunces 900 gerua-lit 84px + under mono label "THE YEAR OF FURY" letterspaced. Right text column. Quotes styling: `.apex{font-family:Fraunces; font-style:italic; font-weight:560; font-size:26px; color:#F4EDDC}`. Boycott list: `.boycott{margin:22px 0; padding:18px 22px; border:1.5px solid var(--ink)}` items ul li mono? Items serif 17px with strike span. Stagger via nth-child delays in CSS: ``` .strikes li{--d:0s} .strikes li:nth-child(2){--d:.18s} ... ``` Arena rows: `.arena{display:grid; grid-template-columns:148px 1fr; gap:8px 24px; padding:16px 0; border-top:1px solid var(--line)}` label mono indigo 600 11px letterspaced with small mark. Date stamp inline: `.dt{font-family:'IBM Plex Mono'; font-size:11.5px; font-weight:600; letter-spacing:.08em; color:var(--gerua)}` used at starts of paragraphs/blocks. Halt block (Chauri): `.halt{margin-top:26px; border-left:3px solid var(--gerua); padding:4px 0 4px 18px}`. P4 event rows: `.events .ev{display:grid; grid-template-columns:110px 1fr; gap:20px; padding:13px 0; border-top:1px solid var(--line)}` date mono gerua; text serif. March visual: ```html

SABARMATI ASHRAM
12 March 1930 · 78 volunteers240 MILES · 24 DAYSDANDI COAST
6 April — salt law broken

``` labels: flex space-between; mid centered mono letterspaced; ends mono 11 bold + serif italic sub. Path: `M 30 84 C 220 30, 460 116, 730 46` dotted. Nodes circles at (30,84) r6 gerua; (730,46) r6 ink fill. Cap glyph near (716,26): path small. Also tiny ticks? skip. The participants ledger (P5): ```html

WHOWHAT SWARAJ MEANTWHAT ACTUALLY HAPPENED
5 rows
``` .lrow{grid-template-columns:150px 1fr 1.15fr} P6: `.duo{display:grid; grid-template-columns:1fr 1fr; gap:34px}` each col h3 Fraunces 20px + p + callout box (bordered). On mobile stack. Callout: `.pact{border:1.5px solid var(--ink); padding:14px 16px; margin-top:14px; background:rgba(180,68,28,.06)}` flat tint ok. P7 entries: `.imagine{display:grid; grid-template-columns:1fr 1fr; gap: 26px 40px}` entries with mono numeral "01" gerua + h3 + p; flags visual inside entry 3 spanning? Flags: entry 3 contains two mini flag SVGs inline (64×43 each) with captions beneath. Might make entry 3 taller — fine, or place flags figure beside entry: put flags as a wide figure after grid spanning both columns? Put the two flags figure between entry 3's text... simpler: entries grid 2×2; flags embedded in entry 3 under text (two svg side by side 66px). ok. Dates index section: heading "INDEX I — THE CHAPTER IN FIFTEEN DATES" mono + grid `repeat(auto-fill,minmax(250px,1fr))` `.d{display:flex; gap:10px; border-top:1px solid var(--line); padding:9px 0 10px}` `.dy{mono 12px 600 gerua; min-width:64px}` `.dt2` serif 14px. Put in rail-less full width container (extends across, with its own spine node? place as .part with year "IDX" rail label: ytxt "INDEX" ptag "REFRESH"). Nice consistency. Same for exam box: rail label "REVISION" / "READY". And people: year "NAMES" ptag "PART 08"? Keep ptag "INDEX II". Sections list final with rails: 1. 1914 · PART 01 2. 1915 · PART 02 3. 1919 · TURNING POINT (dark) 4. 1920 · PART 03 5. 1927 · PART 04 6. 1930 · PART 05 7. 1932 · PART 06 8. IDEA · PART 07 9. INDEX · DATES (rail: "15 DATES"?) ytxt "DATES", ptag "INDEX I" 10. NAMES · "INDEX II" people 11. "EXAM" · "REVISION" pointers box Footer part: no rail, full width, top double rule. Exam box content: ```html

BEFORE YOU ENTER THE HALL

Five pointers the paper loves

items with Fraunces numbers
``` .exam{border:2.5px solid var(--ink); outline:1px solid var(--ink); outline-offset:5px; padding:30px 34px; margin: 8px 0 4px} list: two columns? five items single column fine; use grid-template-columns:1fr 1fr gap for 5 items → 3+2. numbered via CSS counter with Fraunces gerua numerals. Let me do grid 2 cols with items breaking nicely (5 items → ok ragged last). Item: `.xi{display:grid; grid-template-columns:34px 1fr}` number mono? Fraunces 22 gerua. Footer: flex between: left mono microcopy 2 lines; right: small wheel svg + वंदे मातरम् Yatra One gerua. Also hint text somewhere for interactivity: put in toolbar left second line? Toolbar left: title; under on hover? Add tiny hint in footer mono: "TIP — SCROLLING SPINS THE CHARKHA; THE RED THREAD MARKS HOW FAR YOU'VE SPUN." Cute. Include in footer. Responsive breakpoints: @media (max-width: 900px): mastgrid stack (charkha smaller, order after title? put right column below), part columns → 96px rail, ledger rows → keep 3 cols until 720. @media (max-width: 720px): .part{grid-template-columns:1fr; padding-left:30px} spine stays at 9px; rail becomes horizontal row: ytxt & ptag inline. `.rail{padding-left:0; display:flex; gap:12px; align-items:baseline; margin-bottom:10px}` ynode absolute still at left:-21px relative? Since part now padded 30px from container left, node should sit at container x=9 → .part position relative, node absolute left:-21px? part's padding-left:30px means content starts 30px; node at left:5px of PART would be inside padding area: set .ynode{left:5px} — but part is now full width starting at container 0 → left:5px puts dot at 5px ≈ spine 9? dot width 9+2*2 border=13 → left:3px center ~9.5 ✓ keep left:3px? Actually dot 13px wide centered at 9.5 → left:3px. Desktop earlier: part not padded; rail column 128; node absolute left:3px top:52 — same absolute coordinates relative to section. Good: keep left:3px top:52px always (sections have padding-top 46 so dot near first line ✓). Mobile: top maybe 50. fine. Interlude grid stack. Duo stack. Ledger: rows → `grid-template-columns:1fr` with internal labels? Simplify: at 720px, .lrow{grid-template-columns:1fr; gap:4px} and hide lhead (display:none), add per-cell via ::before? Too fussy — instead keep ledger scrollable horizontally? Simplest acceptable: stack with who bold and prefix labels via data-attr ::before mono tiny. I'll add data-label attrs on spans and CSS ::before{content:attr(data-label)} mono 9px gerua shown only mobile. Do same for arenas (they have explicit labels already) and events (date above text: 1fr). march labels: font smaller, mid hidden? keep small. Poster padding var: --pad: clamp(22px, 5vw, 64px); interlude margin-right uses calc(-1*var(--pad)) — but part content column is inside grid; margin-right negative extends to poster edge ✓. Hmm: .interlude inside .content (grid child). content col width = rest; interlude margin-right negative pad extends right edge ✓. For rail on desktop, .ynode absolute is relative to .part (position relative) ✓. Reveal animation: `.part .content{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)} .part.in .content{opacity:1; transform:none}` BUT html2canvas capture before IO triggers? All parts pass through viewport when scrolling; user likely scrolled. Also add fallback: after 2.5s mark all .in anyway? Safer for capture: IO with threshold 0.05 rootMargin "0px 0px -8% 0px". Plus on load, run thread + a safety `setTimeout(()=>parts.forEach(add in),3000)`? If user screenshots via download quickly at top, later sections unrevealed → captured transparent/empty. html2canvas captures full element including off-viewport parts — unrevealed parts would be invisible! Important fix: reveal elements only via IO, but ALSO before capture, force all .in classes. I'll do that in download handler: `document.querySelectorAll('.part').forEach(p=>p.classList.add('in','on'))` plus strikes container add inview. Also print: force before print via `beforeprint` event adding classes. Good. Similarly .strike animations: force via .inview added. Also html2canvas and CSS `outline-offset` outlines render? Outline may not render in html2canvas (it renders borders; outlines might be ignored). Use double border via box-shadow instead: `box-shadow: 0 0 0 1px var(--paper), 0 0 0 2.5px var(--ink), 0 0 0 3.5px var(--paper), 0 0 0 4.5px var(--ink)`? That's rings outward. Alternative: wrapper div with border + inner border: `.exam{border:1px solid var(--ink); padding:5px}` `.exam-in{border:2.5px solid var(--ink); padding:28px}` reliable everywhere. Do that. Similarly masthead dblrule uses borders ✓. box-shadow on poster for page — capture only poster (shadow excluded since capturing element itself, good). Fonts in headers using `font-variation-settings`? Just use weight/font-style; Fraunces variable via Google with opsz auto. Add `"SOFT" 0, "WONK" 1`? Fraunces has SOFT/WONK axes — Google Fonts API supports `Fraunces:ital,opsz,wght@...` only by default; specifying custom axes requires listing them. I'll skip axes beyond opsz/wght/ital. Letterspacing on Fraunces display: -0.015em. Now the charkha idle rotation transform updates every frame → html2canvas capture reads current attr ✓. Write spoke generator: ```js function spokes(g,cx,cy,r0,r1,n,sw,color){ let s=''; for(let i=0;i`} g.innerHTML=s; } ``` Masthead: `spokes(document.getElementById('spokes'),110,110,17,78,16,2.3,'#211B12')`. Flag mini wheel: `#flagwheel` spokes(g,33,21.5? compute), footer wheel. Flag swaraj svg: width 70 height 47 viewBox "0 0 70 47": stripes rects: y0 h15.67 red #B4441C; y15.67 green #3E6B41; y31.33 h15.67 paper #F4EEDF stroke? On paper bg, white stripe needs border: give flag an outer border rect stroke ink 1.5 and each stripe rect... just outline full rect ink + wheel center ink (circle r7.5 stroke ink 1.6 + hub dot + 8 spokes via helper with color ink r0 2.5 r1 6.5). Swadeshi svg: stripes red/green/yellow: red #B4441C top? Use muted: red #A93E1B, yellow #D9A02B, green #3E6B41. 8 lotuses on middle(green)? lotuses color paper/ink? Textbook image shows lotuses on... unspecified color. Put 8 small lotus marks along the yellow middle? I'll set stripes order red, green, yellow? Hmm typical depiction: red top, yellow middle, green bottom with 8 lotuses across middle & crescent top? Unknown; I'll draw red top, green middle, yellow bottom? Textbook order "red, green and yellow" → top red, middle green, bottom yellow. Lotuses (8, ink) across middle stripe, crescent (ink) on right of top? Crescent represents Hindus & Muslims — place white crescent on green middle right side, lotuses across left/middle. Fine — it's a stylised reproduction; captions clarify. Lotus glyph path (small): `M0 0 c-2 -4 -6 -4 -6 0 c0 3 3 4 6 4 c3 0 6 -1 6 -4 c0 -4 -4 -4 -6 0 z`? I'll just use tiny circles r1.8 alternating? For honesty: draw 8 lotus as small "fan" paths: `d="M -4 2 Q 0 -5 4 2 Q 0 0 -4 2 Z"` — a leaf shape (petal). Place 8 across. Looks like petals from distance ✓. Crescent path at (58, 8): `M58 3 a6 6 0 1 0 0 12 a7.5 7.5 0 0 1 0 -12 z`? Let me think: crescent = outer circle arc minus inner. Path: start top point, arc along outer circle (big, left side) to bottom point, arc back along inner (offset) circle. `M 58 2 A 7 7 0 1 0 58 16 A 9 9 0 1 1 58 2 Z` — arcs from (58,2) to (58,16): first A rx7 sweep 0 large 1 → goes left around; second back with rx9 sweep 1 large 1... produce lune facing right. Colors: fill #F4EEDF (paper) with ink stroke? fill paper reads as crescent on green ✓ plus 0.75 ink outline. Mini wheels with 8 spokes r~6: helper reuse. Footer wheel: 12px symbol: circle + 8 spokes, ink, 26px size. OK writing final HTML now. Also include ``. Also noscript? skip. Title of page: "Nationalism in India — Class X Revision Sheet". Let me also add subtle hover interactions in ledger rows: on hover, row background rgba(44,62,104,.05) & who-cell indigo. And arena labels shift? Keep minimal but alive. Links? none. Also add top "progress" in toolbar? The red thread is progress; enough. Potential html2canvas text-shadow issues — avoid text-shadow except maybe stamp? Avoid entirely. Check emoji rule — none used. Icons: two button svgs + drawn motifs ✓. Write out. I'll aim for clean, organized code with comments in English (user language = English). One more consideration: the poster must render self-contained even if html2canvas CDN fails (guard `typeof html2canvas==='undefined'` → toast suggests print). Let me now write the whole file carefully, keeping CSS tidy. Rail width mobile handling: `.part{padding-left:0}` desktop; mobile `padding-left:34px`. Ledger labels mobile via data-label: ```html ……… ``` CSS mobile: `.lrow span::before{content:attr(data-label); display:block; font-family:mono; font-size:9px; color:gerua; letter-spacing:.18em; margin-bottom:3px}` and lhead display none. Desktop: ::before content none? set `.lrow span::before{display:none}` desktop, mobile display block for .lmean/.lreal only (who is obvious) — simpler: show for all except lwho desktop none; mobile show lmean,lreal. fine. Events grid mobile: 1fr with dt above. Interlude mobile: grid 1fr; big 1919 inline smaller. Now finalize interlude "PTAG": "TURNING POINT". Year 1919. Also parts numbering: 01 backdrop,02 satyagraha, interlude unnumbered, 03 non-cooperation,04 towards CD,05 CD,06 limits,07 nation imagined. ✓ ptag for interlude "TURNING POINT". For the strike items also add small "BOYCOTT" heading and tick "SWADESHI" pairing visual: two-column: left "BOYCOTT —" struck list; right "IN ITS PLACE —" positive list (no strike). Positive list: "Titles? no..." positive: "khadi & the charkha / national schools & colleges / picketing in front of shops / arbitrations, not courts". Show as `.swlist` with gerua→indigo arrows "→". Good visual contrast: struck red vs built indigo. Stat row P1: `.stats{display:flex; gap:0; margin-top:20px; border-top:1.5px solid var(--ink); border-bottom:1px solid var(--line)}` each `.stat{flex:1; padding:14px 18px 12px; border-left:1px solid var(--line)} first no border` numeral Fraunces 40px gerua? Use ink for numeral, gerua small unit? Numeral Fraunces 600 38px ink; caption mono 9.5px letterspaced soft. 3 stats flex — is this "uniform card row"? It's a stat strip with rules, standard editorial — acceptable and not card-y (no backgrounds). ✓ Deck width 52ch, size 1.06rem, line-height 1.55, color ink 85%. H2 sizes ~ clamp(24px,3.2vw,34px). Body p size 16.5px lh 1.62 color rgba(33,27,18,.85); strong{font-weight:600; color:ink} names bold; `.np{color:var(--indigo); font-weight:600}` for names to add indigo layer. OK also small marginalia: `.note{font-size:13.5px; font-style:italic; color:rgba(33,27,18,.62); border-top:1px solid var(--line); padding-top:10px; margin-top:18px}` used sparingly. Time to write. I'll write ~ complete file mentally ensuring correctness. JS details for thread fill with fill dot: `.spine-fill::after{content:''; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); width:9px;height:9px;border-radius:50%; background:var(--gerua)}` shows only when height>0 — always at bottom of fill (fill height 0 initially, dot at top of spine — visible at start? bottom:-5 relative to 0-height element → at top. Slight artifact; hide when h==0: toggle style.display. Minor: set visibility hidden if h<4. IO observer: ```js const io=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting)e.target.classList.add('on','in')}),{rootMargin:'-30% 0px -50% 0px'}); document.querySelectorAll('.part').forEach(p=>io.observe(p)); ``` But threshold via rootMargin only with threshold 0: triggers when part top enters 30%..50% band ✓. Once true stays (unobserve after). Strikes: ```js const io2=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('inview'); io2.unobserve(e.target)}}),{threshold:.4}); ``` Download flow with forced classes + rAF wait + html2canvas options `windowWidth`? default ok. Set `scrollY: -window.scrollY`? html2canvas handles element offset internally (it clones). Known quirk: transforms/animations — disable charkha animation during capture? Clone keeps current transform — fine. Also `scale:2` and huge height might be slow (a few seconds) — set button state text accordingly. Print: `window.print()`; add `@media print` rules incl. `-webkit-print-color-adjust:exact; print-color-adjust:exact` on poster & interlude. Force reveals on beforeprint. Assemble people index items (10) with bold names serif 15px: Each `.ppl{border-top:1px solid var(--line); padding:10px 0}` grid auto-fill minmax(300px,1fr) → two/three columns list. Content: `Mahatma Gandhi — satyagraha; leads Champaran to Salt March; NCM & CDM.` etc: 1 Gandhi 2 Muhammad Ali & Shaukat Ali — Khilafat leaders; bring Muslims into NCM 3 Baba Ramchandra — Awadh tenants vs talukdars & begar 4 Alluri Sitaram Raju — Gudem Hills guerrilla; hanged 1924 5 C.R. Das & Motilal Nehru — Swaraj Party after 1922 6 Jawaharlal Nehru — Oudh Kisan Sabha; Purna Swaraj, 1929 7 Purshottamdas Thakurdas & G.D. Birla — industrialists funding the movement; FICCI 8 B.R. Ambedkar — Depressed Classes; separate electorates → Poona Pact 9 Bankim Chandra Chattopadhyay — Vande Mataram; Anandamath 10 Abanindranath Tagore & Natesa Sastri — Bharat Mata on canvas; Tamil folklore Great. Final copy for footer microcopy: left: "COMPILED FROM NCERT — INDIA AND THE CONTEMPORARY WORLD – II, CHAPTER 02 · FOR PERSONAL REVISION ONLY" right column: wheel + "वंदे मातरम्" below center: "TIP — SCROLLING SPINS THE CHARKHA · THE GERUA THREAD SHOWS HOW FAR YOU'VE SPUN · EXPORT A PNG FROM THE TOP BAR" Now produce code. Watch quotes/escapes. Let me carefully draft the entire HTML. Also I need the toolbar left not collide mobile: hide left title under 560px. Let me write: ```html Nationalism in India — Class X Revision Sheet toolbar
…
toast ``` CSS full: ```css :root{ --paper:#F4EEDF; --ink:#211B12; --ink85:rgba(33,27,18,.85); --ink60:rgba(33,27,18,.6); --indigo:#2C3E68; --gerua:#B4441C; --gerua-lit:#E07A3F; --leaf:#3E6B41; --ochre:#D9A02B; --line:rgba(33,27,18,.22); --line2:rgba(33,27,18,.5); --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --serif:'Newsreader',Georgia,serif; --disp:'Fraunces',Georgia,serif; --pad:clamp(24px,5.2vw,64px); } *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{background:#171310;font-family:var(--serif);color:var(--ink);padding:92px 18px 90px} ::selection{background:var(--gerua);color:var(--paper)} ``` Toolbar CSS as above. Poster: ```css #poster{position:relative;width:min(1120px,100%);margin:0 auto;background-color:var(--paper);color:var(--ink);padding:var(--pad);box-shadow:0 30px 80px rgba(0,0,0,.6)} ``` Masthead etc… I'll write inline as I go. Let me finalize measurements and write everything now in the answer. I'll keep code commented lightly. For h1 line: "Nationalism" then line2 "in India" italic: ```css h1{font-family:var(--disp);font-weight:640? use 620;font-size:clamp(54px,8.6vw,102px);line-height:.94;letter-spacing:-.022em;font-variation-settings:'opsz' 144;} h1 em{font-style:italic;font-weight:430;} ``` Fraunces variable weight 620 ok (range 300–900 in URL uses 0,9..144,300..900 → variable ✓). Interlude huge year: Fraunces 900, size clamp(56px,7vw,84px), color var(--gerua-lit). Stamp: ```css .stamp{display:inline-block;margin-top:14px;font-family:'Yatra One',serif;color:var(--gerua);border:2.5px solid var(--gerua);padding:7px 16px 5px;font-size:19px;letter-spacing:.06em;transform:rotate(-5deg);border-radius:3px;position:relative} .stamp::after{content:'';position:absolute;inset:3px;border:1px solid rgba(180,68,28,.55);border-radius:2px} ``` double stamp frame ✓. Charkha container: .mastright{display:flex;flex-direction:column;align-items:center} svg width clamp(150px,18vw,210px). Mastgrid: grid-template-columns:1fr auto; gap:30px; align-items:start? end? center. rules top: ```css .rules{display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink85);border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);padding:9px 2px;margin-bottom:clamp(26px,4vw,44px)} ``` dblrule under title: ```css .dblrule{border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);height:5px;margin:22px 0 20px;max-width:560px} ``` core line: ```css .core{font-family:var(--mono);font-size:11px;letter-spacing:.32em;color:var(--gerua);font-weight:600;margin-top:16px} ``` kick: ```css .kick{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.24em;color:var(--gerua);margin-bottom:10px} h2{font-family:var(--disp);font-weight:600;font-size:clamp(24px,3vw,33px);letter-spacing:-.012em;line-height:1.08;margin-bottom:16px} p.body{font-size:16.5px;line-height:1.64;color:var(--ink85);max-width:70ch} p.body+p.body{margin-top:10px} strong{font-weight:640;color:var(--ink)} .np{color:var(--indigo);font-weight:640} em{font-style:italic} ``` part CSS as planned. content max-width none. Stats: ```css .stats{display:flex;margin-top:22px;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line)} .stat{flex:1;padding:14px 16px 13px} .stat+.stat{border-left:1px solid var(--line)} .stat b{display:block;font-family:var(--disp);font-weight:620;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.02em;line-height:1} .stat span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink60);margin-top:7px;text-transform:uppercase} @media narrow: flex-direction column, border-left→border-top. ``` Satyagraha ledger list: ```css .saty{margin-top:20px;border-top:1.5px solid var(--ink)} .saty .srow{display:grid;grid-template-columns:86px 1fr;gap:18px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline} .sy{font-family:var(--mono);font-weight:600;color:var(--gerua);font-size:13px;letter-spacing:.08em} .sp{font-size:16px;color:var(--ink85)} .sp b{...} place name bold + region small italic. ``` Boycott block: ```css .ncmgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;margin-top:20px;border:1.5px solid var(--ink);padding:20px 22px} .blk h4{font-family:var(--mono);font-size:10px;letter-spacing:.22em;margin-bottom:12px;font-weight:600} .blk--no h4{color:var(--gerua)} .blk--yes h4{color:var(--indigo)} .strikes li{list-style:none;position:relative;font-size:16.5px;padding:5px 0;color:var(--ink85)} .strike{position:relative;z-index:1} .strike::after{content:'';position:absolute;left:-3%;top:54%;width:106%;height:2.5px;background:var(--gerua);transform:scaleX(0) rotate(-.7deg);transform-origin:left center;transition:transform .55s cubic-bezier(.75,0,.2,1);transition-delay:var(--d,0s)} .inview .strike::after{transform:scaleX(1) rotate(-.7deg)} .yeslist li{list-style:none;padding:5px 0;font-size:16.5px;color:var(--ink85)} .yeslist li::before{content:'→';color:var(--indigo);font-family:var(--mono);margin-right:10px} .ncmstat{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink85)} .ncmstat b{color:var(--gerua)} ``` Arena rows and halt as planned. Arena label `.alab{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;color:var(--indigo);padding-top:5px}`. Events (P4) `.ev .ed{mono 12.5px 600 gerua}`. March figure: ```css .march{margin:26px 0 6px;border:1.5px solid var(--ink);padding:18px 18px 8px} .mlabels{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;font-weight:600} .mlabels em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:13.5px;letter-spacing:0;color:var(--ink60);margin-top:3px;text-transform:none} .mmid{color:var(--gerua);letter-spacing:.24em;padding-bottom:14px} .march svg{width:100%;height:auto;display:block;margin-top:-6px} ``` labels text-transform none since mixing. Keep first/last uppercase manually. Pact & repression blocks: `.stamp-block{...}` reuse `.halt` style with `.dt`. Ledger: ```css .ledger{margin-top:24px;border-top:2.5px solid var(--ink)} .lrow{display:grid;grid-template-columns:158px 1fr 1.12fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);transition:background .3s} .lrow:not(.lhead):hover{background:rgba(44,62,104,.055)} .lhead{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--ink60);padding:9px 0} .lwho{font-weight:640;color:var(--ink);font-size:15.5px} .lwho i{display:block;font-weight:400;font-style:italic;color:var(--ink60);font-size:13px;margin-top:2px} .lmean,.lreal{font-size:14.5px;line-height:1.5;color:var(--ink85)} ``` Duo (P6): ```css .duo{display:grid;grid-template-columns:1fr 1fr;gap:38px;margin-top:6px} .duo h3{font-family:var(--disp);font-weight:620;font-size:21px;margin-bottom:10px} .pact{border:1.5px solid var(--ink);padding:14px 16px;margin-top:16px;font-size:14.5px;line-height:1.55;background:rgba(180,68,28,.05)} .pact .dt{display:block;margin-bottom:5px} ``` Imagine grid: ```css .imagine{display:grid;grid-template-columns:1fr 1fr;gap:30px 44px;margin-top:8px} .imag .no{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--gerua)} .imag h3{font-family:var(--disp);font-size:20px;font-weight:620;margin:6px 0 8px} .imag p{font-size:15px;line-height:1.58;color:var(--ink85)} .flags{display:flex;gap:18px;align-items:flex-end;margin-top:14px} .flag{width:74px} .flag svg{width:100%;height:auto;display:block;border:1px solid var(--ink)} .flag figcaption{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:var(--ink60);margin-top:6px} ``` Indexes: ```css .idxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 26px;margin-top:16px} .dcell{display:flex;gap:12px;border-top:1px solid var(--line);padding:9px 0 11px;align-items:baseline} .dy{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--gerua);min-width:62px;letter-spacing:.04em} .dx{font-size:13.5px;line-height:1.42;color:var(--ink85)} .pcell{border-top:1px solid var(--line);padding:10px 0 12px;font-size:14px;line-height:1.5;color:var(--ink85)} .pcell b{color:var(--ink);font-weight:640} ``` Exam: ```css .exam{border:1px solid var(--ink);padding:5px;margin-top:6px} .exam-in{border:2.5px solid var(--ink);padding:26px 28px 22px} .exam ol{list-style:none;counter-reset:x;display:grid;grid-template-columns:1fr 1fr;gap:16px 30px;margin-top:6px} .exam li{counter-increment:x;display:grid;grid-template-columns:30px 1fr;gap:6px;font-size:14.5px;line-height:1.55;color:var(--ink85)} .exam li::before{content:counter(x,decimal-leading-zero);font-family:var(--disp);font-weight:640;font-size:21px;color:var(--gerua);line-height:1} ``` 5 items in 2 cols → last spans? fine. Footer: ```css .pfoot{margin-top:52px;border-top:3px solid var(--ink);padding-top:6px} .pfoot .inner{border-top:1px solid var(--ink);padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:20px} .fmicro{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--ink60);line-height:1.9} .fright{display:flex;align-items:center;gap:14px} .fdev{font-family:'Yatra One';color:var(--gerua);font-size:20px} ``` plus tip line centered below: `.ftip{text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--ink60);margin-top:16px}` Interlude inner: ```css .interlude{background:var(--ink);color:#EFE7D2;margin-right:calc(-1*var(--pad));padding:clamp(24px,3.4vw,38px) clamp(24px,3.4vw,40px);display:grid;grid-template-columns:200px 1fr;gap:30px} .iyear{font-family:var(--disp);font-weight:800;font-size:clamp(58px,7vw,86px);line-height:.9;color:var(--gerua-lit);letter-spacing:-.02em} .isub{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:rgba(239,231,210,.65);margin-top:12px} .itext p{font-size:15.5px;line-height:1.62;color:rgba(239,231,210,.88);max-width:64ch} .itext p+p{margin-top:10px} .apex{font-family:var(--disp);font-style:italic;font-weight:560;font-size:clamp(21px,2.4vw,26px);color:#F6EFDD;margin:12px 0;padding-left:16px;border-left:3px solid var(--gerua-lit)} .inote{margin-top:14px;padding-top:12px;border-top:1px solid rgba(239,231,210,.25);font-size:14px;color:rgba(239,231,210,.75)} .inote b{color:#F6EFDD} .itext .dt{color:var(--gerua-lit)} ``` Note: .dt gerua base defined; override inside dark. Reveal: ```css .part .content,.part .interlude{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.7,.25,1)} .part.in .content,.part.in .interlude{opacity:1;transform:none} ``` Interlude inside content? I placed interlude as second grid child (not .content). Add it. Node/year colors: ```css .ynode{position:absolute;left:3px;top:52px;width:9px;height:9px;border-radius:50%;background:var(--paper);border:2px solid var(--line2);transition:all .45s} .part.on .ynode{background:var(--gerua);border-color:var(--gerua);box-shadow:0 0 0 5px rgba(180,68,28,.14)} .ytxt{display:block;font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.05em;color:var(--ink60);padding-left:27px;transition:color .45s} .part.on .ytxt{color:var(--gerua)} .ptag{display:block;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.26em;color:var(--ink60);opacity:.7;padding-left:27px;margin-top:7px} .rail{position:relative? not needed since node positioned on .part} ``` Spine & fill: ```css .chapters{position:relative;margin-top:clamp(34px,5vw,58px)} .spine{position:absolute;left:9px;top:6px;bottom:6px;width:1px;background:var(--line)} #threadFill{position:absolute;left:8.5px;top:6px;width:2px;background:var(--gerua);height:0} #threadFill::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-4px;width:9px;height:9px;border-radius:50%;background:var(--gerua)} ``` Toolbar & toast: ```css .toolbar{position:fixed;top:0;left:0;right:0;z-index:60;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:rgba(20,16,12,.93);border-bottom:1px solid rgba(244,238,223,.16);backdrop-filter:blur(8px)} .tl{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:rgba(244,238,223,.85)} .tr{display:flex;gap:10px} .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;padding:9px 14px;cursor:pointer;border:1px solid rgba(244,238,223,.7);background:transparent;color:#F1EAD8;transition:.25s} .btn:hover{background:#F1EAD8;color:#171310} .btn.pri{background:var(--gerua);border-color:var(--gerua);color:#FBF5E6} .btn.pri:hover{background:#963714;border-color:#963714;color:#FBF5E6} .btn svg{width:13px;height:13px} #toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);background:var(--ink);color:#F1EAD8;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;padding:11px 18px;border:1px solid rgba(244,238,223,.25);opacity:0;pointer-events:none;transition:.35s;z-index:70;max-width:90vw;text-align:center} #toast.show{opacity:1;transform:translate(-50%,0)} ``` Media queries: ```css @media(max-width:920px){ .mastgrid{grid-template-columns:1fr} .mastright{flex-direction:row;justify-content:flex-start;align-items:center;gap:26px} .stamp{margin-top:0} .ncmgrid,.duo,.imagine,.exam ol{grid-template-columns:1fr} .interlude{grid-template-columns:1fr} .iyear{font-size:56px} .lrow{grid-template-columns:150px 1fr} .lrow .lreal{grid-column:2} hmm complicated — switch at 720 instead. } @media(max-width:740px){ .part{grid-template-columns:1fr;padding-left:34px;column-gap:0} .rail{display:flex;align-items:baseline;gap:14px;margin-bottom:12px} .ytxt,.ptag{padding-left:0} .ptag{margin-top:0} .ynode{left:3px;top:54px} (relative to part incl its padding-top46 → top:52 ok) .interlude{margin-right:calc(-1*var(--pad));margin-left:0} keep .lrow{grid-template-columns:1fr;gap:3px;padding:13px 0} .lrow .lmean,.lrow .lreal{padding-left:0} .lmean::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--indigo);margin:6px 0 3px} .lreal::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--gerua);margin:6px 0 3px} .lhead{display:none} .arena{grid-template-columns:1fr;gap:6px} .ev{grid-template-columns:1fr;gap:4px} .stats{flex-direction:column} .stat+.stat{border-left:none;border-top:1px solid var(--line)} .srow{grid-template-columns:64px 1fr} .mlabels .mmid{display:none} .tl{display:none} } ``` Desktop arena: `.arena{display:grid;grid-template-columns:150px 1fr;gap:6px 26px;padding:16px 0;border-top:1px solid var(--line)}` first arena also border-top? give `.arenas{margin-top:22px;border-top:1.5px solid var(--ink)}` heading? Actually add heading row "THE MOVEMENT IN THREE ARENAS" mono small before. Put as h4-like `.sublead`. Ev: `.ev{display:grid;grid-template-columns:120px 1fr;gap:6px 22px;padding:13px 0;border-top:1px solid var(--line)}` inside `.events{margin-top:18px;border-top:1.5px solid var(--ink)}`. Print: ```css @media print{ body{background:#fff;padding:0} .toolbar,#toast{display:none} #poster{width:100%;box-shadow:none;padding:24px} *{-webkit-print-color-adjust:exact;print-color-adjust:exact} } ``` SVGs markup — masthead charkha: ```html ``` Stand legs from hub (115,103) to base y 200 ✓. Rotation origin (115,103). transform rotate(angle 115 103). Footer wheel: ```html ``` use spokes(g,20,20,4.5,14.5,8,1.6,'#211B12'), circles stroke 2.4 / hub fill r2. Flag svgs inline with literal colors; mini wheel spokes generated by same helper targeting g id, cx etc. Swaraj flag: viewBox 0 0 78 52: rects(78x17.33): red y0, green y17.33, paper y34.66; border rect 0.75 stroke #211B12; wheel group center (39,26): circle r7 stroke 1.7 fill none; circle r1.6 fill; spokes 8 from r2.2→6 stroke 1. Swadeshi: same stripes red/#3E6B41 green mid/#D9A02B bottom; lotuses: 8 petals across middle: for i x=10..68 step 8.28: path petal at (x, 26): `M x-3.4 27.5 Q x 20 x+3.4 27.5 Q x 25.5 x-3.4 27.5 Z` fill #F4EEDF? paper-colored petals on green — visible ✓ maybe fill #211B12 ink looks printed. Choose ink fill? Textbook B&W unknown; ink reads "printed illustration". Use paper fill with ink 0.6 stroke — nah keep ink fill simple silhouettes. Crescent: at (64,10) on green? green middle spans y17-34; top red. Put crescent bottom-left on yellow? Place crescent on right of middle green: path at cx 66 cy 26: `M66 20 A 7 7 0 1 0 66 34 A 8.6 8.6 0 1 1 66 20 Z` fill #F4EEDF — overlapping lotuses? Shift lotuses to x=8..52 (6 lotuses) and crescent right. But 8 lotuses required! Keep 8 small: x from 6 to 60 step 7.7, petals small (±2.6 width, top 20.5). Crescent then at (67,26) smaller r5: `M67 21.5 A 5.4 5.4 0 1 0 67 32 A 6.6 6.6 0 1 1 67 21.5 Z`. Hmm arcs: from (67,21.5) to (67,32) vertical distance 10.5, radius 5.4 ≥ half 5.25 ✓. The march svg: ```html ``` Topi above Dandi node (732,44): cap around (713-735, 26-39) ✓. Also small start flag at Sabarmati? add tiny flag: line from (28,84) up to (28,60) stroke; triangle path M28 60 L46 66 L28 72 Z fill gerua. Nice. March container border maybe unneeded if figure already framed — keep border for archival plate look + inner padding. Also `.march figcaption`? labels serve. Now compile EVERYTHING into final answer. Also brief explanation after code per my practice. Content assembly order in HTML — write it all out now (long). Also ensure `data-year` unused? I used rail spans directly; drop data-year. For IO parts also `.on` for dot & year: separate observer adds both on same trigger ✓ (class 'on' and 'in' both added). Edge: The `.part.in` reveals content; interlude also. Safety: after window load, if html2canvas missing, disable btn? Keep guard on click. Let me also give the march mid label "240 MILES · 24 DAYS" and under-mid maybe tick text "ONE SALT PINCH AT A TIME"? cute serif italic centered below path — add absolutely? skip. Alright, also `strong` inside dark contexts color — inote b set. Devanagari words used: वंदे मातरम् (stamp + footer). Yatra One subsets Devanagari ✓ (it's a Devanagari font family). Also add `lang="hi"` on Devanagari spans for correctness. Final check for banned patterns: no gradients ✓ (noise canvas, flat colors), no emoji ✓, fonts distinctive ✓, no blue-purple ✓ (indigo is deep desaturated navy — part of historical palette; it's #2C3E68 — arguably blue-family but as ink accent not primary UI theme; primary identity is cream/ink/gerua — fine), no equal 3-col cards ✓ (stat strip is 3 flex stats — it's a stat rule strip; acceptable? It's borderline "3 uniform items" but as typographic stat band it's standard editorial device, and items differ in content; borders not cards. Keep — or make widths uneven via flex-grow values 1/1.3/1? Eh, fine as is; it's a classic stat rule line, not cards.), no alert ✓, all interactive wired ✓ (buttons work), no lorem ✓. Signature moments: scroll-spun charkha, thread-progress spine, animated strike-throughs, salt-march plate, exportable PNG. Now write the final code block completely and carefully. I'll number JS helper for strikes delays: CSS nth-child delays: ```css .strikes li:nth-child(1) .strike::after{transition-delay:.05s} … (5 items .05/.2/.35/.5/.65) ``` simpler than var. Also yeslist items maybe also stagger fade: `.part.in .yeslist li{opacity...}` — keep static, strikes are the show. For .sy years list (satyagraha rows): include place bold: `Champaran (Bihar) — indigo…`. Write everything. Also I'll add `loading` of html2canvas as regular script (defer not, needs availability on click only; fine). Double-check thread fill dot visibility when height 0 — dot at top overlapping spine start under masthead — looks like a seed knot; acceptable, even nice ("the thread starts here"). Keep visible always. Also on load, call thread() and set initial reveals for first part via IO immediately (IO fires on observe for visible ones ✓). Wheel rAF: also pause when tab hidden — rAF auto-pauses ✓. Poster background grain: applied via JS on #poster style.backgroundImage; ensure `background-repeat:repeat` set in CSS (#poster{background-repeat:repeat}). Export includes it ✓ (data URI PNG). Also toolbar sits over poster top when scrolled — poster top padding large enough; body padding-top 92 accounts. I think I'm ready. Also include `

Kkk