🗓 History Timeline Builder

Add events, color-code by category, and export your timeline.

Timeline Title

Add Event

Year / Date

Event Title

Description (optional)

${title}

${events.length} events · ${events.map(e=>e.year).join(' · ')}

${events.map(e=>`

${e.year}

${e.title}

${e.desc?`

${e.desc}

`:''}${e.cat}

`).join('')}

💾 Saved Timelines

`; const w=window.open('','_blank'); w.document.write(html); w.document.close(); setTimeout(()=>w.print(),400); } // Templates const TEMPLATES = { french:{ title:'French Revolution Timeline', events:[ {year:'1789',title:'Estates-General Convened',desc:'Louis XVI calls the Estates-General for the first time since 1614 to address France\'s financial crisis.',cat:'Political',color:'#6366f1',sortKey:1789}, {year:'June 1789',title:'Tennis Court Oath',desc:'Third Estate representatives swear to write a new constitution.',cat:'Political',color:'#6366f1',sortKey:1789}, {year:'July 1789',title:'Storming of the Bastille',desc:'Parisian crowds storm the Bastille fortress — symbolic start of the Revolution.',cat:'Military',color:'#ef4444',sortKey:1789}, {year:'Aug 1789',title:'Declaration of Rights of Man',desc:'National Assembly adopts the Declaration of the Rights of Man and of the Citizen.',cat:'Social',color:'#10b981',sortKey:1789}, {year:'1793',title:'Execution of Louis XVI',desc:'King Louis XVI is guillotined on January 21, 1793.',cat:'Political',color:'#ef4444',sortKey:1793}, {year:'1793–94',title:'The Reign of Terror',desc:'Radical phase led by Robespierre; thousands executed as enemies of the Revolution.',cat:'Political',color:'#ef4444',sortKey:1793}, {year:'1799',title:'Napoleon\'s Coup (18 Brumaire)',desc:'Napoleon Bonaparte seizes power in a coup, ending the Directory.',cat:'Political',color:'#8b5cf6',sortKey:1799}, ] }, ww2:{ title:'World War II Timeline', events:[ {year:'Sept 1939',title:'Germany Invades Poland',desc:'Nazi Germany\'s invasion of Poland triggers Britain and France to declare war.',cat:'Military',color:'#ef4444',sortKey:1939}, {year:'June 1940',title:'Fall of France',desc:'France falls to Germany; the Vichy regime is established.',cat:'Military',color:'#ef4444',sortKey:1940}, {year:'June 1941',title:'Operation Barbarossa',desc:'Germany launches the largest military invasion in history against the Soviet Union.',cat:'Military',color:'#ef4444',sortKey:1941}, {year:'Dec 1941',title:'Attack on Pearl Harbor',desc:'Japan attacks the US naval base; US enters WWII.',cat:'Military',color:'#f59e0b',sortKey:1941}, {year:'June 1944',title:'D-Day (Normandy)',desc:'Allied forces launch the largest seaborne invasion in history.',cat:'Military',color:'#0ea5e9',sortKey:1944}, {year:'Apr 1945',title:'Fall of Berlin',desc:'Soviet forces capture Berlin; Hitler dies by suicide.',cat:'Military',color:'#10b981',sortKey:1945}, {year:'Aug 1945',title:'Atomic Bombs / Japan Surrenders',desc:'US drops atomic bombs on Hiroshima and Nagasaki; Japan surrenders Sept 2.',cat:'Military',color:'#8b5cf6',sortKey:1945}, ] }, civilrights:{ title:'Civil Rights Movement Timeline', events:[ {year:'1954',title:'Brown v. Board of Education',desc:'Supreme Court rules school segregation unconstitutional.',cat:'Political',color:'#6366f1',sortKey:1954}, {year:'1955',title:'Montgomery Bus Boycott',desc:'381-day boycott led by Rosa Parks and MLK challenges bus segregation.',cat:'Social',color:'#10b981',sortKey:1955}, {year:'1957',title:'Little Rock Crisis',desc:'Federal troops escort Black students into Central High School, Arkansas.',cat:'Social',color:'#f59e0b',sortKey:1957}, {year:'1960',title:'Greensboro Sit-Ins',desc:'Four Black students sit at a whites-only Woolworth\'s lunch counter.',cat:'Social',color:'#ec4899',sortKey:1960}, {year:'Aug 1963',title:'March on Washington',desc:'250,000 attend; MLK delivers "I Have a Dream" speech.',cat:'Social',color:'#10b981',sortKey:1963}, {year:'1964',title:'Civil Rights Act',desc:'Outlaws discrimination based on race, color, religion, sex, or national origin.',cat:'Political',color:'#6366f1',sortKey:1964}, {year:'1965',title:'Voting Rights Act',desc:'Prohibits discriminatory voting practices; follows Bloody Sunday in Selma.',cat:'Political',color:'#6366f1',sortKey:1965}, ] }, coldwar:{ title:'Cold War Timeline', events:[ {year:'1947',title:'Truman Doctrine & Marshall Plan',desc:'US commits to containing communism and rebuilding Europe.',cat:'Political',color:'#6366f1',sortKey:1947}, {year:'1949',title:'NATO Founded / USSR Tests Atomic Bomb',desc:'NATO alliance formed; Soviet atomic bomb test surprises the West.',cat:'Military',color:'#ef4444',sortKey:1949}, {year:'1950–53',title:'Korean War',desc:'UN forces (led by US) fight North Korea backed by China/USSR.',cat:'Military',color:'#ef4444',sortKey:1950}, {year:'1957',title:'Sputnik Launched',desc:'Soviet Union launches the first artificial satellite, triggering the Space Race.',cat:'Scientific',color:'#8b5cf6',sortKey:1957}, {year:'1962',title:'Cuban Missile Crisis',desc:'13-day standoff between US and USSR over Soviet missiles in Cuba.',cat:'Military',color:'#ef4444',sortKey:1962}, {year:'1975',title:'Fall of Saigon',desc:'North Vietnam captures Saigon, ending the Vietnam War.',cat:'Military',color:'#f59e0b',sortKey:1975}, {year:'1989',title:'Fall of the Berlin Wall',desc:'East Germany opens the Berlin Wall; Cold War begins to end.',cat:'Political',color:'#10b981',sortKey:1989}, {year:'1991',title:'USSR Dissolves',desc:'Soviet Union formally dissolved on December 25; Cold War ends.',cat:'Political',color:'#10b981',sortKey:1991}, ] } }; function loadTemplate(key){ if(!confirm('Load this template? This will replace your current timeline.')) return; const t = TEMPLATES[key]; events = JSON.parse(JSON.stringify(t.events)); document.getElementById('tlTitle').value = t.title; saveEvents(); renderTimeline(); } // Init renderColorPicker(); renderTimeline(); // Named timeline saves var TL_SAVED = 'ace_timeline_saved'; function saveTimeline(){ var title = prompt('Name this timeline:','My Timeline'); if(!title) return; // grab current events from localStorage or from UI var events = JSON.parse(localStorage.getItem('ace_timeline_events')||'[]'); var saved = JSON.parse(localStorage.getItem(TL_SAVED)||'[]'); saved.unshift({ title, events, date: new Date().toLocaleDateString(), count: events.length }); localStorage.setItem(TL_SAVED, JSON.stringify(saved.slice(0,8))); renderTimelineSaved(); } function loadTimeline(i){ var saved = JSON.parse(localStorage.getItem(TL_SAVED)||'[]'); var t = saved[i]; if(!t) return; localStorage.setItem('ace_timeline_events', JSON.stringify(t.events)); if(typeof renderTimeline==='function') renderTimeline(); else location.reload(); } function renderTimelineSaved(){ var el = document.getElementById('timelineSaved'); if(!el) return; var saved = JSON.parse(localStorage.getItem(TL_SAVED)||'[]'); if(!saved.length){ el.innerHTML='

No saved timelines.

'; return; } el.innerHTML = saved.map((t,i)=>`

${t.title}

${t.count} event${t.count!==1?'s':''} · ${t.date}

`).join(''); } document.addEventListener("DOMContentLoaded", renderTimelineSaved);