deepjoshi11th · deepjoshi11th · Feb 20, 2026
diff --git a/public/era/1990/styles.css 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,4 +1,37 @@
-<!-- src/eras/1990/index.html -->
-<div class="era">
-    <h1>Welcome to 1990</h1>
+<div class="retro-page retro-1990">
+  <div class="retro-shell">
+    <center>
+      <h1>WELCOME TO YEAR 1990</h1>
+      <p class="tagline">*** Text mode mindset. Hypertext era is loading... ***</p>
+      <hr>
+    </center>
+
+    <table class="retro-nav" border="1" cellpadding="5" cellspacing="0" width="100%">
+      <tr>
+        <td><a href="#">Home</a></td>
+        <td><a href="#timeline">Timeline</a></td>
+        <td><a href="#systems">Systems</a></td>
+        <td><a href="#guestbook">Guestbook</a></td>
+      </tr>
+    </table>
+
+    <h2 id="timeline">Timeline Bulletin</h2>
+    <ul>
+      <li><strong>1990:</strong> World running fine without me and without JavaScript.</li>
+      <li><strong>1994:</strong> My arrival is still in future.</li>
+      <li><strong>1995:</strong> JavaScript is still in future.</li>
+    </ul>
+
+    <h2 id="systems">What powers this year?</h2>
+    <p>Think DOS terminals, UNIX workstations, BBS culture, C/Pascal/COBOL, and static text-first interfaces.</p>
+
+    <table class="retro-info" border="1" cellpadding="6" cellspacing="0" width="100%">
+      <tr><th align="left">Signal</th><th align="left">Status in 1990</th></tr>
+      <tr><td>Me</td><td>Not born yet</td></tr>
+      <tr><td>JavaScript</td><td>Not released yet</td></tr>
+      <tr><td>Feeling</td><td>Anticipation</td></tr>
+    </table>
+
+    <p id="guestbook" class="footer-note">Best viewed at 800x600 on a CRT. Please sign the guestbook after beeping your modem.</p>
+  </div>
 </div>
diff --git a/src/era/1995/index.html b/src/era/1995/index.html
@@ -0,0 +1,40 @@
+<div class="retro-page retro-1995">
+  <div class="retro-shell">
+    <center>
+      <h1>WELCOME TO YEAR 1995</h1>
+      <p class="tagline">+++ Netscape days, table layouts, and JavaScript appears +++</p>
+      <hr>
+    </center>
+
+    <table class="retro-nav" border="1" cellpadding="5" cellspacing="0" width="100%">
+      <tr>
+        <td><a href="#">Home</a></td>
+        <td><a href="#milestones">Milestones</a></td>
+        <td><a href="#javascript">JavaScript</a></td>
+        <td><a href="#joke">Inside Joke</a></td>
+      </tr>
+    </table>
+
+    <h2 id="milestones">Milestones</h2>
+    <table class="retro-info" border="1" cellpadding="6" cellspacing="0" width="100%">
+      <tr><th align="left">Item</th><th align="left">Year</th><th align="left">State</th></tr>
+      <tr><td>My birth</td><td>1994</td><td>Done</td></tr>
+      <tr><td>JavaScript release</td><td>1995</td><td>Just launched</td></tr>
+    </table>
+
+    <h2 id="javascript">Proof that JavaScript exists now (1995)</h2>
+    <p>Brendan Eich creates JavaScript at Netscape in 1995. Suddenly web pages can react, validate forms, and do tiny client-side tricks.</p>
+    <pre class="code-block">&lt;script&gt;
+  function hello1995(){
+    alert('JavaScript says hello from 1995!');
+  }
+&lt;/script&gt;
+&lt;a href="#" onclick="hello1995(); return false;"&gt;Click me&lt;/a&gt;</pre>
+
+    <h2 id="joke">My birth-date binary joke</h2>
+    <p>I was expected on <strong>2 April</strong>, but I arrived on <strong>10 April</strong>.
+      In nerd terms: <code>(10)<sub>2</sub> = (2)<sub>10</sub></code>. So maybe I was right on time in binary.</p>
+
+    <p class="footer-note">Hand-authored retro layout, just like the 90s web vibe.</p>
+  </div>
+</div>
diff --git a/src/era/2000/index.html b/src/era/2000/index.html
@@ -0,0 +1,10 @@
+<div class="web-era era-2000">
+  <h1>Year 2000 — Table Layout Web</h1>
+  <p>Dial-up internet, portal homepages, hit counters, and "Best viewed in 800x600" badges.</p>
+  <ul>
+    <li>Layout trend: nested tables + spacer GIFs</li>
+    <li>Design trend: glossy buttons, bevels, animated GIF banners</li>
+    <li>Tech mood: HTML 4 + early CSS, Java applets/Flash intros</li>
+  </ul>
+  <div class="badge-row"><span>GeoCities vibe</span><span>Yahoo! directory era</span><span>ICQ/MSN days</span></div>
+</div>
diff --git a/src/era/2005/index.html b/src/era/2005/index.html
@@ -0,0 +1,10 @@
+<div class="web-era era-2005">
+  <h1>Year 2005 — Web 2.0 Arrives</h1>
+  <p>Rounded corners, gradients, glossy logos, comment sections, and user-generated platforms booming.</p>
+  <ul>
+    <li>Layout trend: div-based layouts replacing heavy tables</li>
+    <li>Design trend: shiny gradients, reflection effects, tag clouds</li>
+    <li>Tech mood: AJAX everywhere, jQuery momentum begins</li>
+  </ul>
+  <div class="badge-row"><span>YouTube launch</span><span>Gmail wave</span><span>RSS feeds</span></div>
+</div>
diff --git a/src/era/2010/index.html b/src/era/2010/index.html
@@ -0,0 +1,10 @@
+<div class="web-era era-2010">
+  <h1>Year 2010 — Mobile-First Wake-up</h1>
+  <p>Smartphones reshape web UX. Responsive thinking starts becoming mandatory.</p>
+  <ul>
+    <li>Layout trend: fluid grids, media queries, app-like nav bars</li>
+    <li>Design trend: cleaner UI, icon fonts, subtle shadows</li>
+    <li>Tech mood: HTML5/CSS3 adoption, single-page app momentum</li>
+  </ul>
+  <div class="badge-row"><span>iPhone/Android web</span><span>Bootstrap rise</span><span>API economy</span></div>
+</div>
diff --git a/src/era/2015/index.html b/src/era/2015/index.html
@@ -0,0 +1,10 @@
+<div class="web-era era-2015">
+  <h1>Year 2015 — Flat UI + App Ecosystem</h1>
+  <p>Material-inspired interfaces, stronger component patterns, and production JavaScript frameworks.</p>
+  <ul>
+    <li>Layout trend: card UIs, modular sections, cleaner spacing systems</li>
+    <li>Design trend: flat/minimal with bold accent colors</li>
+    <li>Tech mood: React/Angular/Vue mainstream, npm workflow normal</li>
+  </ul>
+  <div class="badge-row"><span>Progressive enhancement</span><span>ES6 era</span><span>CI/CD maturity</span></div>
+</div>
diff --git a/src/era/2020/index.html b/src/era/2020/index.html
@@ -0,0 +1,10 @@
+<div class="web-era era-2020">
+  <h1>Year 2020 — Remote-First Internet</h1>
+  <p>Web apps become workspaces. Performance, accessibility, and collaboration tools are central.</p>
+  <ul>
+    <li>Layout trend: dashboard-heavy interfaces and design systems</li>
+    <li>Design trend: dark mode defaults, glassmorphism experiments</li>
+    <li>Tech mood: Jamstack, TypeScript-first projects, edge deployment</li>
+  </ul>
+  <div class="badge-row"><span>Video calls everywhere</span><span>Notion/Figma era</span><span>WebVitals focus</span></div>
+</div>
diff --git 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 = `<h2>Error loading year ${year}</h2><p>${err}</p>`;
     }