From b4aa54723a80b916ca9e6b6a27b5464f85b52d0c Mon Sep 17 00:00:00 2001 From: Deep Joshi Date: Fri, 20 Feb 2026 17:08:11 +0530 Subject: [PATCH] Add timeline eras from 2000 to 2020 with web trend snapshots --- public/era/1990/styles.css | 69 +++++++++++++++++++++++++++++++ public/era/1995/styles.css | 78 +++++++++++++++++++++++++++++++++++ public/era/2000/styles.css | 5 +++ public/era/2005/styles.css | 5 +++ public/era/2010/styles.css | 5 +++ public/era/2015/styles.css | 5 +++ public/era/2020/styles.css | 6 +++ src/components/TimeSlider.js | 1 - src/era/1990/index.html | 39 ++++++++++++++++-- src/era/1995/index.html | 40 ++++++++++++++++++ src/era/2000/index.html | 10 +++++ src/era/2005/index.html | 10 +++++ src/era/2010/index.html | 10 +++++ src/era/2015/index.html | 10 +++++ src/era/2020/index.html | 10 +++++ src/utils/animateEraChange.js | 19 +++++---- 16 files changed, 310 insertions(+), 12 deletions(-) create mode 100644 public/era/1990/styles.css create mode 100644 public/era/1995/styles.css create mode 100644 public/era/2000/styles.css create mode 100644 public/era/2005/styles.css create mode 100644 public/era/2010/styles.css create mode 100644 public/era/2015/styles.css create mode 100644 public/era/2020/styles.css create mode 100644 src/era/1995/index.html create mode 100644 src/era/2000/index.html create mode 100644 src/era/2005/index.html create mode 100644 src/era/2010/index.html create mode 100644 src/era/2015/index.html create mode 100644 src/era/2020/index.html diff --git a/public/era/1990/styles.css b/public/era/1990/styles.css new file mode 100644 index 0000000..f4dc6c3 --- /dev/null +++ b/public/era/1990/styles.css @@ -0,0 +1,69 @@ +.retro-page { + color: #000; + padding: 16px; + text-align: left; +} + +.retro-shell { + max-width: 920px; + margin: 0 auto; + border: 2px solid #000; + padding: 14px; +} + +.retro-1990 { + background: #c0c0c0; + font-family: "Times New Roman", Times, serif; +} + +.retro-1990 .retro-shell { + background: #f5f5f5; +} + +.retro-page h1 { + margin: 0; + font-size: 2rem; + color: #000080; +} + +.retro-page h2 { + font-size: 1.25rem; + margin: 16px 0 8px; + color: #000; +} + +.retro-page .tagline { + margin: 8px 0; + font-size: 0.95rem; +} + +.retro-page hr { + border: 0; + border-top: 2px solid #000; +} + +.retro-page a { + color: #0000ee; + text-decoration: underline; +} + +.retro-nav, +.retro-info { + background: #fff; + border-color: #000; + margin-top: 10px; +} + +.retro-nav td { + text-align: center; +} + +.retro-info th { + background: #000080; + color: #fff; +} + +.footer-note { + margin-top: 14px; + font-size: 0.85rem; +} diff --git a/public/era/1995/styles.css b/public/era/1995/styles.css new file mode 100644 index 0000000..75c2f54 --- /dev/null +++ b/public/era/1995/styles.css @@ -0,0 +1,78 @@ +.retro-page { + color: #000; + padding: 16px; + text-align: left; +} + +.retro-shell { + max-width: 920px; + margin: 0 auto; + border: 1px solid #000; + padding: 14px; +} + +.retro-1995 { + background: #ffffe1; + font-family: Verdana, Arial, sans-serif; +} + +.retro-1995 .retro-shell { + background: #fff; +} + +.retro-page h1 { + margin: 0; + font-size: 1.9rem; + color: #003399; +} + +.retro-page h2 { + font-size: 1.15rem; + margin: 16px 0 8px; + color: #111; +} + +.retro-page .tagline { + margin: 8px 0; + font-size: 0.9rem; +} + +.retro-page hr { + border: 0; + border-top: 1px dashed #333; +} + +.retro-page a { + color: #0000ee; + text-decoration: underline; +} + +.retro-nav, +.retro-info { + background: #fff; + border-color: #666; + margin-top: 10px; +} + +.retro-nav td { + text-align: center; +} + +.retro-info th { + background: #3366cc; + color: #fff; +} + +.code-block { + background: #f2f2f2; + border: 1px solid #888; + padding: 8px; + overflow-x: auto; + font-family: "Courier New", monospace; + font-size: 0.86rem; +} + +.footer-note { + margin-top: 14px; + font-size: 0.82rem; +} diff --git a/public/era/2000/styles.css b/public/era/2000/styles.css new file mode 100644 index 0000000..5bf84b0 --- /dev/null +++ b/public/era/2000/styles.css @@ -0,0 +1,5 @@ +body, html { background: #d9d9d9; } +.web-era { max-width: 840px; margin: 2rem auto; padding: 1rem 1.25rem; border: 3px ridge #777; background: #fff; font-family: Tahoma, Arial, sans-serif; } +.era-2000 h1 { color: #003399; text-decoration: underline; } +.era-2000 p { background: #ffffcc; padding: 0.5rem; border: 1px dashed #999; } +.badge-row span { display: inline-block; margin: 0.25rem; padding: 0.3rem 0.6rem; border: 2px outset #bbb; background: #efefef; font-size: 0.85rem; } diff --git a/public/era/2005/styles.css b/public/era/2005/styles.css new file mode 100644 index 0000000..3da9365 --- /dev/null +++ b/public/era/2005/styles.css @@ -0,0 +1,5 @@ +body, html { background: linear-gradient(#ecf4ff, #d8e8ff); } +.web-era { max-width: 860px; margin: 2rem auto; padding: 1.25rem 1.4rem; border: 1px solid #9db8df; border-radius: 14px; background: #fff; font-family: Verdana, Arial, sans-serif; box-shadow: 0 8px 20px rgba(0,0,0,0.12); } +.era-2005 h1 { color: #2f5ea3; } +.era-2005 p { padding: 0.55rem 0.75rem; border-radius: 10px; background: #f2f8ff; border: 1px solid #cfe0ff; } +.badge-row span { display: inline-block; margin: 0.3rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid #adc5eb; background: linear-gradient(#ffffff, #dbeafe); font-size: 0.82rem; } diff --git a/public/era/2010/styles.css b/public/era/2010/styles.css new file mode 100644 index 0000000..40a3e80 --- /dev/null +++ b/public/era/2010/styles.css @@ -0,0 +1,5 @@ +body, html { background: #f5f7fa; } +.web-era { max-width: 900px; margin: 2.1rem auto; padding: 1.3rem 1.5rem; border: 1px solid #d6dde7; background: #fff; font-family: 'Segoe UI', Arial, sans-serif; } +.era-2010 h1 { color: #1f3a5f; } +.era-2010 p { border-left: 4px solid #4f83cc; padding: 0.6rem 0.8rem; background: #f7fbff; } +.badge-row span { display: inline-block; margin: 0.25rem; padding: 0.3rem 0.65rem; background: #edf3fa; border: 1px solid #ced9e8; border-radius: 4px; font-size: 0.82rem; } diff --git a/public/era/2015/styles.css b/public/era/2015/styles.css new file mode 100644 index 0000000..c5a40ca --- /dev/null +++ b/public/era/2015/styles.css @@ -0,0 +1,5 @@ +body, html { background: #fafafa; } +.web-era { max-width: 940px; margin: 2.2rem auto; padding: 1.4rem 1.6rem; border: 1px solid #e7e7e7; border-radius: 10px; background: #fff; font-family: Roboto, 'Segoe UI', Arial, sans-serif; box-shadow: 0 10px 24px rgba(0,0,0,0.08); } +.era-2015 h1 { color: #263238; } +.era-2015 p { padding: 0.65rem 0.8rem; background: #f5f9ff; border-radius: 8px; } +.badge-row span { display: inline-block; margin: 0.25rem; padding: 0.35rem 0.7rem; background: #1565c0; color: #fff; border-radius: 4px; font-size: 0.8rem; } diff --git a/public/era/2020/styles.css b/public/era/2020/styles.css new file mode 100644 index 0000000..2e2c12c --- /dev/null +++ b/public/era/2020/styles.css @@ -0,0 +1,6 @@ +body, html { background: #0f172a; } +.web-era { max-width: 980px; margin: 2.3rem auto; padding: 1.5rem 1.7rem; border: 1px solid rgba(148,163,184,0.35); border-radius: 14px; background: rgba(15,23,42,0.86); color: #e2e8f0; font-family: Inter, 'Segoe UI', sans-serif; box-shadow: 0 14px 34px rgba(2,6,23,0.45); } +.era-2020 h1 { color: #93c5fd; } +.era-2020 p { padding: 0.7rem 0.9rem; background: rgba(30,41,59,0.9); border-radius: 10px; } +.era-2020 ul { color: #cbd5e1; } +.badge-row span { display: inline-block; margin: 0.28rem; padding: 0.35rem 0.75rem; background: rgba(56,189,248,0.16); color: #7dd3fc; border: 1px solid rgba(125,211,252,0.4); border-radius: 999px; font-size: 0.8rem; } diff --git a/src/components/TimeSlider.js b/src/components/TimeSlider.js index badf488..c7506cd 100644 --- a/src/components/TimeSlider.js +++ b/src/components/TimeSlider.js @@ -5,7 +5,6 @@ export function createTimeSlider() { slider.max = 2025; slider.step = 5; slider.value = 2025; - slider.disabled = true; slider.oninput = () => { const event = new CustomEvent("era-change", { diff --git a/src/era/1990/index.html b/src/era/1990/index.html index 323bb2f..2d3c058 100644 --- a/src/era/1990/index.html +++ b/src/era/1990/index.html @@ -1,4 +1,37 @@ - -
-

Welcome to 1990

+
+
+
+

WELCOME TO YEAR 1990

+

*** Text mode mindset. Hypertext era is loading... ***

+
+
+ + + + + + + + +
HomeTimelineSystemsGuestbook
+ +

Timeline Bulletin

+
    +
  • 1990: World running fine without me and without JavaScript.
    • +
  • 1994: My arrival is still in future.
    • +
  • 1995: JavaScript is still in future.
    • +
+ +

What powers this year?

+

Think DOS terminals, UNIX workstations, BBS culture, C/Pascal/COBOL, and static text-first interfaces.

+ + + + + + +
SignalStatus in 1990
MeNot born yet
JavaScriptNot released yet
FeelingAnticipation
+ + +
diff --git a/src/era/1995/index.html b/src/era/1995/index.html new file mode 100644 index 0000000..a2001f9 --- /dev/null +++ b/src/era/1995/index.html @@ -0,0 +1,40 @@ +
+
+
+

WELCOME TO YEAR 1995

+

+++ Netscape days, table layouts, and JavaScript appears +++

+
+
+ + + + + + + + +
HomeMilestonesJavaScriptInside Joke
+ +

Milestones

+ + + + +
ItemYearState
My birth1994Done
JavaScript release1995Just launched
+ +

Proof that JavaScript exists now (1995)

+

Brendan Eich creates JavaScript at Netscape in 1995. Suddenly web pages can react, validate forms, and do tiny client-side tricks.

+ 
<script>
+  function hello1995(){
+    alert('JavaScript says hello from 1995!');
+  }
+</script>
+<a href="#" onclick="hello1995(); return false;">Click me</a>
+ +

My birth-date binary joke

+

I was expected on 2 April, but I arrived on 10 April. + In nerd terms: (10)2 = (2)10. So maybe I was right on time in binary.

+ +

Hand-authored retro layout, just like the 90s web vibe.

+
+
diff --git a/src/era/2000/index.html b/src/era/2000/index.html new file mode 100644 index 0000000..28f56e6 --- /dev/null +++ b/src/era/2000/index.html @@ -0,0 +1,10 @@ +
+

Year 2000 — Table Layout Web

+

Dial-up internet, portal homepages, hit counters, and "Best viewed in 800x600" badges.

+
    +
  • Layout trend: nested tables + spacer GIFs
    • +
  • Design trend: glossy buttons, bevels, animated GIF banners
    • +
  • Tech mood: HTML 4 + early CSS, Java applets/Flash intros
    • +
+
GeoCities vibeYahoo! directory eraICQ/MSN days
+
diff --git a/src/era/2005/index.html b/src/era/2005/index.html new file mode 100644 index 0000000..7c269e8 --- /dev/null +++ b/src/era/2005/index.html @@ -0,0 +1,10 @@ +
+

Year 2005 — Web 2.0 Arrives

+

Rounded corners, gradients, glossy logos, comment sections, and user-generated platforms booming.

+
    +
  • Layout trend: div-based layouts replacing heavy tables
    • +
  • Design trend: shiny gradients, reflection effects, tag clouds
    • +
  • Tech mood: AJAX everywhere, jQuery momentum begins
    • +
+
YouTube launchGmail waveRSS feeds
+
diff --git a/src/era/2010/index.html b/src/era/2010/index.html new file mode 100644 index 0000000..fee4823 --- /dev/null +++ b/src/era/2010/index.html @@ -0,0 +1,10 @@ +
+

Year 2010 — Mobile-First Wake-up

+

Smartphones reshape web UX. Responsive thinking starts becoming mandatory.

+
    +
  • Layout trend: fluid grids, media queries, app-like nav bars
    • +
  • Design trend: cleaner UI, icon fonts, subtle shadows
    • +
  • Tech mood: HTML5/CSS3 adoption, single-page app momentum
    • +
+
iPhone/Android webBootstrap riseAPI economy
+
diff --git a/src/era/2015/index.html b/src/era/2015/index.html new file mode 100644 index 0000000..1b3d9e2 --- /dev/null +++ b/src/era/2015/index.html @@ -0,0 +1,10 @@ +
+

Year 2015 — Flat UI + App Ecosystem

+

Material-inspired interfaces, stronger component patterns, and production JavaScript frameworks.

+
    +
  • Layout trend: card UIs, modular sections, cleaner spacing systems
    • +
  • Design trend: flat/minimal with bold accent colors
    • +
  • Tech mood: React/Angular/Vue mainstream, npm workflow normal
    • +
+
Progressive enhancementES6 eraCI/CD maturity
+
diff --git a/src/era/2020/index.html b/src/era/2020/index.html new file mode 100644 index 0000000..a397066 --- /dev/null +++ b/src/era/2020/index.html @@ -0,0 +1,10 @@ +
+

Year 2020 — Remote-First Internet

+

Web apps become workspaces. Performance, accessibility, and collaboration tools are central.

+
    +
  • Layout trend: dashboard-heavy interfaces and design systems
    • +
  • Design trend: dark mode defaults, glassmorphism experiments
    • +
  • Tech mood: Jamstack, TypeScript-first projects, edge deployment
    • +
+
Video calls everywhereNotion/Figma eraWebVitals focus
+
diff --git a/src/utils/animateEraChange.js b/src/utils/animateEraChange.js index 515ebfd..d1458b7 100644 --- a/src/utils/animateEraChange.js +++ b/src/utils/animateEraChange.js @@ -29,14 +29,17 @@ export async function renderEra(year) { // Remove any previously added era scripts const existingEraScript = document.getElementById("era-script"); if (existingEraScript) existingEraScript.remove(); - - // Add the new JS script for the selected era - const script = document.createElement("script"); - script.type = "module"; - script.src = `${base}/era/${year}/main.js`; - script.id = "era-script"; - script.async = true; - document.head.appendChild(script); + + // Load era scripts only when needed (retro eras intentionally stay script-free) + const scriptYears = new Set(["2025"]); + if (scriptYears.has(String(year))) { + const script = document.createElement("script"); + script.type = "module"; + script.src = `${base}/era/${year}/main.js`; + script.id = "era-script"; + script.async = true; + document.head.appendChild(script); + } } catch (err) { app.innerHTML = `

Error loading year ${year}

${err}

`; }