Created
April 6, 2026 17:08
-
-
Save Arfin6900/40b6b055f248878eb0b2ca8ecc619323 to your computer and use it in GitHub Desktop.
algebra
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>From the Quran to Artificial Intelligence</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --midnight: #06080f; | |
| --deep: #0d1220; | |
| --navy: #111827; | |
| --gold: #c9a84c; | |
| --gold-light: #e8c97a; | |
| --gold-pale: #f5e6b8; | |
| --cream: #faf6ed; | |
| --text: #e8dfc8; | |
| --muted: #8a7d64; | |
| --accent: #7c4d2a; | |
| --emerald: #1a4a3a; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| background: var(--midnight); | |
| color: var(--text); | |
| font-family: 'Crimson Pro', Georgia, serif; | |
| font-size: 18px; | |
| line-height: 1.8; | |
| overflow-x: hidden; | |
| } | |
| /* ── GEOMETRIC BACKGROUND ── */ | |
| .geo-bg { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 0; | |
| pointer-events: none; | |
| overflow: hidden; | |
| } | |
| .geo-bg svg { | |
| position: absolute; | |
| opacity: 0.04; | |
| } | |
| .geo-bg .geo1 { top: -10%; right: -5%; width: 55vw; animation: rotateSlow 90s linear infinite; } | |
| .geo-bg .geo2 { bottom: -10%; left: -5%; width: 45vw; animation: rotateSlow 120s linear infinite reverse; } | |
| .geo-bg .geo3 { top: 40%; left: 40%; width: 30vw; opacity: 0.02; animation: rotateSlow 60s linear infinite; } | |
| @keyframes rotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } | |
| /* ── STARFIELD ── */ | |
| .stars { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 0; | |
| pointer-events: none; | |
| } | |
| .star { | |
| position: absolute; | |
| background: var(--gold-light); | |
| border-radius: 50%; | |
| animation: twinkle var(--d, 3s) ease-in-out infinite alternate; | |
| } | |
| @keyframes twinkle { from { opacity: 0.1; } to { opacity: 0.7; } } | |
| /* ── NAVIGATION ── */ | |
| nav { | |
| position: fixed; | |
| top: 0; left: 0; right: 0; | |
| z-index: 100; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1.2rem 3rem; | |
| background: linear-gradient(to bottom, rgba(6,8,15,0.95), transparent); | |
| backdrop-filter: blur(4px); | |
| } | |
| .nav-logo { | |
| font-family: 'Amiri', serif; | |
| font-size: 1.4rem; | |
| color: var(--gold); | |
| letter-spacing: 0.05em; | |
| } | |
| .nav-links { display: flex; gap: 2rem; } | |
| .nav-links a { | |
| font-family: 'Crimson Pro', serif; | |
| font-size: 0.85rem; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .nav-links a:hover { color: var(--gold); } | |
| /* ── SECTIONS ── */ | |
| section { position: relative; z-index: 1; } | |
| /* ── HERO ── */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| padding: 6rem 2rem 4rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(ellipse at center, rgba(201,168,76,0.08) 0%, transparent 70%); | |
| } | |
| .hero-arabic { | |
| font-family: 'Amiri', serif; | |
| font-size: clamp(2rem, 5vw, 4rem); | |
| color: var(--gold); | |
| opacity: 0.6; | |
| margin-bottom: 1.5rem; | |
| animation: fadeUp 1.2s ease forwards; | |
| letter-spacing: 0.05em; | |
| } | |
| .hero-eyebrow { | |
| font-size: 0.8rem; | |
| letter-spacing: 0.3em; | |
| text-transform: uppercase; | |
| color: var(--gold); | |
| margin-bottom: 1.5rem; | |
| animation: fadeUp 1.2s 0.2s ease both; | |
| } | |
| .hero-title { | |
| font-family: 'Playfair Display', serif; | |
| font-size: clamp(2.5rem, 6vw, 5.5rem); | |
| font-weight: 900; | |
| line-height: 1.1; | |
| color: var(--cream); | |
| max-width: 900px; | |
| animation: fadeUp 1.2s 0.4s ease both; | |
| margin-bottom: 1.5rem; | |
| } | |
| .hero-title span { color: var(--gold); font-style: italic; } | |
| .hero-subtitle { | |
| font-size: 1.2rem; | |
| color: var(--muted); | |
| max-width: 600px; | |
| font-style: italic; | |
| animation: fadeUp 1.2s 0.6s ease both; | |
| margin-bottom: 3rem; | |
| } | |
| .chain-display { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.8rem; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| animation: fadeUp 1.2s 0.8s ease both; | |
| margin-bottom: 3rem; | |
| } | |
| .chain-item { | |
| background: rgba(201,168,76,0.08); | |
| border: 1px solid rgba(201,168,76,0.25); | |
| padding: 0.5rem 1.2rem; | |
| border-radius: 2px; | |
| font-size: 0.85rem; | |
| letter-spacing: 0.08em; | |
| color: var(--gold-light); | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .chain-item:hover { background: rgba(201,168,76,0.2); transform: translateY(-2px); } | |
| .chain-arrow { color: var(--gold); opacity: 0.5; font-size: 1.2rem; } | |
| .scroll-hint { | |
| animation: bounce 2s infinite, fadeUp 1s 1.2s ease both; | |
| color: var(--muted); | |
| font-size: 0.8rem; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| display: flex; flex-direction: column; align-items: center; gap: 0.5rem; | |
| } | |
| .scroll-hint::after { content: '↓'; display: block; font-size: 1.5rem; } | |
| @keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } } | |
| @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } | |
| /* ── DIVIDER ── */ | |
| .divider { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.5rem; | |
| padding: 1rem 0; | |
| max-width: 300px; | |
| margin: 0 auto; | |
| } | |
| .divider-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); } | |
| .divider-icon { color: var(--gold); font-size: 1.2rem; } | |
| /* ── CHAPTER SECTIONS ── */ | |
| .chapter { | |
| padding: 7rem 2rem; | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| opacity: 0; | |
| transform: translateY(40px); | |
| transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .chapter.visible { opacity: 1; transform: none; } | |
| .chapter-number { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 7rem; | |
| font-weight: 900; | |
| color: rgba(201,168,76,0.07); | |
| line-height: 1; | |
| position: absolute; | |
| left: 0; | |
| top: 4rem; | |
| pointer-events: none; | |
| font-style: italic; | |
| letter-spacing: -0.03em; | |
| } | |
| .chapter-inner { position: relative; padding-left: 2rem; border-left: 2px solid rgba(201,168,76,0.2); } | |
| .chapter-tag { | |
| font-size: 0.75rem; | |
| letter-spacing: 0.3em; | |
| text-transform: uppercase; | |
| color: var(--gold); | |
| margin-bottom: 1rem; | |
| display: flex; align-items: center; gap: 0.8rem; | |
| } | |
| .chapter-tag::before { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); } | |
| .chapter-heading { | |
| font-family: 'Playfair Display', serif; | |
| font-size: clamp(2rem, 4vw, 3.5rem); | |
| font-weight: 700; | |
| line-height: 1.15; | |
| color: var(--cream); | |
| margin-bottom: 0.5rem; | |
| } | |
| .chapter-heading em { color: var(--gold); font-style: italic; } | |
| .chapter-arabic { | |
| font-family: 'Amiri', serif; | |
| font-size: 1.8rem; | |
| color: var(--gold); | |
| opacity: 0.5; | |
| margin-bottom: 2rem; | |
| direction: rtl; | |
| text-align: right; | |
| } | |
| .chapter-lead { | |
| font-size: 1.25rem; | |
| font-style: italic; | |
| color: var(--gold-pale); | |
| margin-bottom: 2rem; | |
| line-height: 1.6; | |
| max-width: 750px; | |
| } | |
| .chapter-body { | |
| color: #c8bfaa; | |
| max-width: 750px; | |
| font-size: 1.05rem; | |
| } | |
| .chapter-body p { margin-bottom: 1.5rem; } | |
| .chapter-body strong { color: var(--gold-light); font-weight: 600; } | |
| /* ── CALLOUT BOXES ── */ | |
| .callout { | |
| background: linear-gradient(135deg, rgba(201,168,76,0.06), rgba(201,168,76,0.02)); | |
| border: 1px solid rgba(201,168,76,0.2); | |
| border-left: 3px solid var(--gold); | |
| padding: 1.5rem 2rem; | |
| margin: 2.5rem 0; | |
| border-radius: 0 4px 4px 0; | |
| max-width: 750px; | |
| } | |
| .callout-title { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 0.9rem; | |
| letter-spacing: 0.15em; | |
| text-transform: uppercase; | |
| color: var(--gold); | |
| margin-bottom: 0.8rem; | |
| } | |
| .callout p { color: var(--text); font-style: italic; margin: 0; } | |
| /* ── FACT GRID ── */ | |
| .fact-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| margin: 3rem 0; | |
| max-width: 900px; | |
| } | |
| .fact-card { | |
| background: rgba(13,18,32,0.8); | |
| border: 1px solid rgba(201,168,76,0.15); | |
| padding: 1.5rem; | |
| border-radius: 4px; | |
| text-align: center; | |
| transition: all 0.3s; | |
| cursor: default; | |
| } | |
| .fact-card:hover { | |
| border-color: rgba(201,168,76,0.4); | |
| transform: translateY(-4px); | |
| background: rgba(201,168,76,0.05); | |
| } | |
| .fact-num { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 2.5rem; | |
| color: var(--gold); | |
| font-weight: 700; | |
| display: block; | |
| } | |
| .fact-label { font-size: 0.85rem; color: var(--muted); letter-spacing: 0.05em; } | |
| /* ── PERSON SPOTLIGHT ── */ | |
| .person { | |
| display: grid; | |
| grid-template-columns: auto 1fr; | |
| gap: 2rem; | |
| align-items: start; | |
| margin: 3rem 0; | |
| max-width: 750px; | |
| } | |
| .person-icon { | |
| width: 70px; height: 70px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, rgba(201,168,76,0.2), rgba(201,168,76,0.05)); | |
| border: 1px solid rgba(201,168,76,0.3); | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 1.8rem; | |
| flex-shrink: 0; | |
| } | |
| .person-name { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 1.3rem; | |
| color: var(--cream); | |
| margin-bottom: 0.3rem; | |
| } | |
| .person-dates { font-size: 0.8rem; color: var(--gold); letter-spacing: 0.1em; margin-bottom: 0.6rem; } | |
| .person-desc { font-size: 0.95rem; color: #a09080; } | |
| /* ── CHAIN VISUALIZATION ── */ | |
| .chain-viz { | |
| margin: 4rem 0; | |
| max-width: 800px; | |
| position: relative; | |
| } | |
| .chain-node { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 2rem; | |
| margin-bottom: 0; | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .chain-node-left { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| flex-shrink: 0; | |
| } | |
| .chain-dot { | |
| width: 16px; height: 16px; | |
| border-radius: 50%; | |
| background: var(--gold); | |
| border: 3px solid var(--midnight); | |
| box-shadow: 0 0 0 1px var(--gold); | |
| flex-shrink: 0; | |
| transition: transform 0.3s; | |
| margin-top: 0.3rem; | |
| } | |
| .chain-node:hover .chain-dot { transform: scale(1.4); box-shadow: 0 0 15px rgba(201,168,76,0.5); } | |
| .chain-connector { | |
| width: 2px; | |
| background: linear-gradient(to bottom, var(--gold), rgba(201,168,76,0.2)); | |
| flex: 1; | |
| min-height: 50px; | |
| } | |
| .chain-content { | |
| padding-bottom: 2.5rem; | |
| transition: all 0.3s; | |
| } | |
| .chain-node:hover .chain-content { transform: translateX(6px); } | |
| .chain-year { font-size: 0.75rem; letter-spacing: 0.15em; color: var(--gold); margin-bottom: 0.2rem; } | |
| .chain-title { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--cream); margin-bottom: 0.4rem; } | |
| .chain-text { font-size: 0.9rem; color: var(--muted); line-height: 1.6; } | |
| /* ── QUOTE ── */ | |
| .big-quote { | |
| text-align: center; | |
| padding: 5rem 2rem; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| position: relative; | |
| z-index: 1; | |
| opacity: 0; | |
| transition: all 1s ease; | |
| } | |
| .big-quote.visible { opacity: 1; } | |
| .big-quote::before { | |
| content: '"'; | |
| font-family: 'Playfair Display', serif; | |
| font-size: 15rem; | |
| color: rgba(201,168,76,0.05); | |
| position: absolute; | |
| top: -3rem; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| line-height: 1; | |
| pointer-events: none; | |
| } | |
| .big-quote blockquote { | |
| font-family: 'Playfair Display', serif; | |
| font-size: clamp(1.4rem, 3vw, 2.2rem); | |
| font-style: italic; | |
| color: var(--cream); | |
| line-height: 1.5; | |
| margin-bottom: 1.5rem; | |
| } | |
| .big-quote cite { | |
| font-size: 0.85rem; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| color: var(--gold); | |
| } | |
| /* ── INTERACTIVE TIMELINE ── */ | |
| .timeline-section { | |
| padding: 5rem 2rem; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| opacity: 0; | |
| transition: all 1s ease; | |
| } | |
| .timeline-section.visible { opacity: 1; } | |
| .section-header { text-align: center; margin-bottom: 4rem; } | |
| .section-header h2 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: clamp(1.8rem, 4vw, 3rem); | |
| color: var(--cream); | |
| margin-bottom: 0.5rem; | |
| } | |
| .section-header p { color: var(--muted); font-style: italic; } | |
| .timeline { | |
| position: relative; | |
| padding-left: 3rem; | |
| } | |
| .timeline::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; bottom: 0; | |
| width: 2px; | |
| background: linear-gradient(to bottom, transparent, var(--gold) 10%, var(--gold) 90%, transparent); | |
| } | |
| .tl-item { | |
| position: relative; | |
| padding: 0 0 3rem 2rem; | |
| opacity: 0; | |
| transform: translateX(-20px); | |
| transition: all 0.6s ease; | |
| } | |
| .tl-item.visible { opacity: 1; transform: none; } | |
| .tl-dot { | |
| position: absolute; | |
| left: -2.4rem; | |
| top: 0.3rem; | |
| width: 14px; height: 14px; | |
| border-radius: 50%; | |
| background: var(--midnight); | |
| border: 2px solid var(--gold); | |
| transition: all 0.3s; | |
| } | |
| .tl-item:hover .tl-dot { background: var(--gold); box-shadow: 0 0 12px rgba(201,168,76,0.6); } | |
| .tl-era { | |
| font-size: 0.7rem; | |
| letter-spacing: 0.25em; | |
| text-transform: uppercase; | |
| color: var(--gold); | |
| margin-bottom: 0.3rem; | |
| } | |
| .tl-title { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 1.3rem; | |
| color: var(--cream); | |
| margin-bottom: 0.5rem; | |
| } | |
| .tl-body { font-size: 0.95rem; color: #8a7d64; line-height: 1.7; max-width: 600px; } | |
| /* ── FINAL SECTION ── */ | |
| .finale { | |
| text-align: center; | |
| padding: 8rem 2rem; | |
| position: relative; | |
| overflow: hidden; | |
| z-index: 1; | |
| opacity: 0; | |
| transition: all 1s ease; | |
| } | |
| .finale.visible { opacity: 1; } | |
| .finale::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(ellipse at center, rgba(201,168,76,0.06) 0%, transparent 70%); | |
| } | |
| .finale h2 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: clamp(2rem, 5vw, 4rem); | |
| color: var(--cream); | |
| margin-bottom: 1.5rem; | |
| line-height: 1.2; | |
| } | |
| .finale h2 span { color: var(--gold); } | |
| .finale p { color: var(--muted); font-style: italic; max-width: 600px; margin: 0 auto 3rem; font-size: 1.1rem; } | |
| .finale-chain { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| flex-wrap: wrap; | |
| font-size: 0.9rem; | |
| } | |
| .finale-chain span { | |
| color: var(--gold-light); | |
| padding: 0.4rem 1rem; | |
| border: 1px solid rgba(201,168,76,0.3); | |
| border-radius: 2px; | |
| background: rgba(201,168,76,0.05); | |
| } | |
| .finale-chain .arr { color: var(--gold); opacity: 0.6; font-size: 1rem; } | |
| /* ── FOOTER ── */ | |
| footer { | |
| border-top: 1px solid rgba(201,168,76,0.1); | |
| padding: 3rem 2rem; | |
| text-align: center; | |
| position: relative; z-index: 1; | |
| color: var(--muted); | |
| font-size: 0.85rem; | |
| } | |
| footer .footer-arabic { | |
| font-family: 'Amiri', serif; | |
| font-size: 1.5rem; | |
| color: rgba(201,168,76,0.3); | |
| margin-bottom: 1rem; | |
| } | |
| /* ── PROGRESS BAR ── */ | |
| .progress-bar { | |
| position: fixed; | |
| top: 0; left: 0; | |
| height: 2px; | |
| background: linear-gradient(to right, var(--gold), var(--gold-light)); | |
| z-index: 200; | |
| transition: width 0.1s; | |
| box-shadow: 0 0 8px rgba(201,168,76,0.5); | |
| } | |
| /* ── SEPARATOR ── */ | |
| .sep { | |
| width: 100%; | |
| height: 1px; | |
| background: linear-gradient(to right, transparent, rgba(201,168,76,0.15), transparent); | |
| margin: 2rem 0; | |
| } | |
| /* ── RESPONSIVE ── */ | |
| @media (max-width: 768px) { | |
| nav { padding: 1rem 1.5rem; } | |
| .nav-links { display: none; } | |
| .chapter { padding: 4rem 1.5rem; } | |
| .person { grid-template-columns: 1fr; } | |
| .chain-viz { padding-left: 0; } | |
| .chapter-number { display: none; } | |
| } | |
| /* ── GLOW TEXT ── */ | |
| .glow { | |
| text-shadow: 0 0 30px rgba(201,168,76,0.4); | |
| } | |
| /* ── HIGHLIGHT ── */ | |
| mark { | |
| background: rgba(201,168,76,0.15); | |
| color: var(--gold-light); | |
| padding: 0.1em 0.3em; | |
| border-radius: 2px; | |
| } | |
| .full-sep { | |
| width: 100%; | |
| height: 80px; | |
| background: linear-gradient(to bottom, transparent, rgba(201,168,76,0.03), transparent); | |
| } | |
| .inline-arabic { | |
| font-family: 'Amiri', serif; | |
| color: var(--gold); | |
| font-size: 1.1em; | |
| direction: rtl; | |
| unicode-bidi: embed; | |
| } | |
| /* scroll indicator dots */ | |
| .scroll-dots { | |
| position: fixed; | |
| right: 1.5rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.6rem; | |
| z-index: 50; | |
| } | |
| .scroll-dot { | |
| width: 6px; height: 6px; | |
| border-radius: 50%; | |
| background: rgba(201,168,76,0.3); | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .scroll-dot.active { | |
| background: var(--gold); | |
| box-shadow: 0 0 8px rgba(201,168,76,0.6); | |
| transform: scale(1.5); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Progress Bar --> | |
| <div class="progress-bar" id="progressBar"></div> | |
| <!-- Geometric Background --> | |
| <div class="geo-bg"> | |
| <svg class="geo1" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> | |
| <g fill="none" stroke="#c9a84c" stroke-width="0.5"> | |
| <polygon points="200,10 390,110 390,290 200,390 10,290 10,110" /> | |
| <polygon points="200,40 360,130 360,270 200,360 40,270 40,130" /> | |
| <polygon points="200,70 330,150 330,250 200,330 70,250 70,150" /> | |
| <polygon points="200,100 300,170 300,230 200,300 100,230 100,170" /> | |
| <line x1="200" y1="10" x2="200" y2="390" /><line x1="10" y1="110" x2="390" y2="290" /><line x1="390" y1="110" x2="10" y2="290" /> | |
| <circle cx="200" cy="200" r="80" /><circle cx="200" cy="200" r="120" /><circle cx="200" cy="200" r="160" /> | |
| </g> | |
| </svg> | |
| <svg class="geo2" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> | |
| <g fill="none" stroke="#c9a84c" stroke-width="0.5"> | |
| <rect x="50" y="50" width="300" height="300" transform="rotate(45 200 200)" /> | |
| <rect x="80" y="80" width="240" height="240" transform="rotate(45 200 200)" /> | |
| <rect x="110" y="110" width="180" height="180" transform="rotate(45 200 200)" /> | |
| <rect x="50" y="50" width="300" height="300" /> | |
| <rect x="80" y="80" width="240" height="240" /> | |
| <circle cx="200" cy="200" r="100" /><circle cx="200" cy="200" r="60" /> | |
| </g> | |
| </svg> | |
| </div> | |
| <!-- Stars --> | |
| <div class="stars" id="stars"></div> | |
| <!-- Navigation --> | |
| <nav> | |
| <div class="nav-logo">القرآن إلى الذكاء الاصطناعي</div> | |
| <div class="nav-links"> | |
| <a href="#quran">The Quran</a> | |
| <a href="#scholarship">Scholarship</a> | |
| <a href="#algebra">Algebra</a> | |
| <a href="#computing">Computing</a> | |
| <a href="#ai">Intelligence</a> | |
| </div> | |
| </nav> | |
| <!-- Scroll Dots --> | |
| <div class="scroll-dots" id="scrollDots"> | |
| <div class="scroll-dot active" data-section="hero" onclick="scrollToSection('hero')"></div> | |
| <div class="scroll-dot" data-section="quran" onclick="scrollToSection('quran')"></div> | |
| <div class="scroll-dot" data-section="scholarship" onclick="scrollToSection('scholarship')"></div> | |
| <div class="scroll-dot" data-section="algebra" onclick="scrollToSection('algebra')"></div> | |
| <div class="scroll-dot" data-section="computing" onclick="scrollToSection('computing')"></div> | |
| <div class="scroll-dot" data-section="ai" onclick="scrollToSection('ai')"></div> | |
| <div class="scroll-dot" data-section="timeline" onclick="scrollToSection('timeline')"></div> | |
| </div> | |
| <!-- HERO --> | |
| <section class="hero" id="hero"> | |
| <div class="hero-arabic">بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ</div> | |
| <div class="hero-eyebrow">A Journey Across 14 Centuries</div> | |
| <h1 class="hero-title">How the <span>Quran</span> gave birth to<br>Artificial Intelligence</h1> | |
| <p class="hero-subtitle">The unbroken chain from divine revelation to the silicon minds of today</p> | |
| <div class="chain-display"> | |
| <div class="chain-item">📖 The Quran</div> | |
| <div class="chain-arrow">→</div> | |
| <div class="chain-item">🕌 Islamic Scholarship</div> | |
| <div class="chain-arrow">→</div> | |
| <div class="chain-item">🧮 Algebra</div> | |
| <div class="chain-arrow">→</div> | |
| <div class="chain-item">💻 Computing</div> | |
| <div class="chain-arrow">→</div> | |
| <div class="chain-item">🤖 Artificial Intelligence</div> | |
| </div> | |
| <div class="scroll-hint">Scroll to explore</div> | |
| </section> | |
| <div class="full-sep"></div> | |
| <!-- CHAPTER 1: THE QURAN --> | |
| <section id="quran"> | |
| <div class="chapter" id="ch1"> | |
| <div class="chapter-number">01</div> | |
| <div class="chapter-inner"> | |
| <div class="chapter-tag">Chapter One</div> | |
| <h2 class="chapter-heading">The <em>Quran</em> & the<br>Birth of Intellectual Curiosity</h2> | |
| <div class="chapter-arabic">اقْرَأْ بِاسْمِ رَبِّكَ الَّذِي خَلَقَ</div> | |
| <p class="chapter-lead">"Read! In the name of your Lord who created." — The very first word revealed to Prophet Muhammad ﷺ was not "Pray" or "Believe." It was <strong>Iqra — Read.</strong></p> | |
| <div class="chapter-body"> | |
| <p>This single command, the very first word of revelation, set in motion an intellectual revolution unlike anything the world had seen. The Quran did not just bring spiritual guidance — it explicitly and repeatedly commanded humanity to <strong>think, reason, observe, and reflect.</strong></p> | |
| <p>The Quran uses the word <mark>Aql (عقل) — reason/intellect</mark> in various forms over <strong>49 times</strong>, always as a command: "Will you not reason?" "Will you not reflect?" "Will you not understand?" This was not incidental — it was foundational. The Quran treated the use of reason as an act of worship.</p> | |
| <div class="callout"> | |
| <div class="callout-title">📖 Quran 3:190–191</div> | |
| <p>"Indeed, in the creation of the heavens and the earth and the alternation of the night and the day are signs for those of understanding — those who remember Allah while standing or sitting or lying on their sides, and <strong>reflect upon the creation of the heavens and the earth</strong>."</p> | |
| </div> | |
| <p>The Quran also introduced the world to a radical idea: the universe operates on <strong>fixed, discoverable laws</strong>. The Arabic word <span class="inline-arabic">سُنَّةُ اللَّه</span> — "Sunnah of God" — referred not just to religious practice but to the <strong>unchanging laws of nature</strong> that God has embedded into creation. This was an open invitation to science.</p> | |
| <div class="fact-grid"> | |
| <div class="fact-card"><span class="fact-num">49×</span><div class="fact-label">References to using Aql (Reason)</div></div> | |
| <div class="fact-card"><span class="fact-num">750+</span><div class="fact-label">Verses encouraging observation of nature</div></div> | |
| <div class="fact-card"><span class="fact-num">1st</span><div class="fact-label">Word of Revelation: Iqra (Read)</div></div> | |
| <div class="fact-card"><span class="fact-num">611 CE</span><div class="fact-label">Year the intellectual revolution began</div></div> | |
| </div> | |
| <p>The Quran introduced detailed laws of <strong>inheritance (Ilm al-Faraid)</strong> — dividing estates among family members with precise fractions. These calculations required a sophisticated mathematical framework. Muslim scholars, driven by the religious obligation to correctly apply these laws, were pushed to develop advanced arithmetic and eventually algebra.</p> | |
| <div class="callout"> | |
| <div class="callout-title">⚡ The Hidden Connection</div> | |
| <p>Al-Khwarizmi explicitly stated that he wrote his algebra book to help Muslims solve <strong>inheritance problems</strong> mandated by the Quran. The sacred law of God literally birthed the mathematics that powers your smartphone.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="sep"></div> | |
| <!-- BIG QUOTE 1 --> | |
| <div class="big-quote" id="bq1"> | |
| <blockquote>"Seek knowledge, even unto China."</blockquote> | |
| <cite>— Prophet Muhammad ﷺ (Hadith)</cite> | |
| </div> | |
| <div class="sep"></div> | |
| <!-- CHAPTER 2: ISLAMIC SCHOLARSHIP --> | |
| <section id="scholarship"> | |
| <div class="chapter" id="ch2"> | |
| <div class="chapter-number">02</div> | |
| <div class="chapter-inner"> | |
| <div class="chapter-tag">Chapter Two</div> | |
| <h2 class="chapter-heading"><em>Bayt al-Hikmah</em><br>The House of Wisdom</h2> | |
| <div class="chapter-arabic">بيت الحكمة</div> | |
| <p class="chapter-lead">In 830 CE, Baghdad became the intellectual capital of the world. The Islamic Golden Age had begun — and it would last five centuries.</p> | |
| <div class="chapter-body"> | |
| <p>Inspired by the Quranic mandate to seek knowledge, the Abbasid Caliphs established <strong>Bayt al-Hikmah (بيت الحكمة)</strong> — the House of Wisdom — in Baghdad. This was not merely a library. It was <strong>the world's first research institution</strong>: a translation bureau, observatory, library, and university all in one.</p> | |
| <p>Scholars from across the world — Arab, Persian, Greek, Indian, Jewish, Christian — gathered under one roof, translating and building upon the knowledge of every civilization that came before. The Islamic world did not just preserve Greek philosophy — it <strong>corrected, expanded, and transcended it.</strong></p> | |
| <div class="fact-grid"> | |
| <div class="fact-card"><span class="fact-num">830 CE</span><div class="fact-label">Founding of Bayt al-Hikmah</div></div> | |
| <div class="fact-card"><span class="fact-num">500+</span><div class="fact-label">Years of Islamic Golden Age</div></div> | |
| <div class="fact-card"><span class="fact-num">1000+</span><div class="fact-label">Greek texts translated to Arabic</div></div> | |
| <div class="fact-card"><span class="fact-num">Dozens</span><div class="fact-label">Sciences born or transformed</div></div> | |
| </div> | |
| <p>Here are some of the towering figures whose shoulders we still stand on:</p> | |
| <div class="person"> | |
| <div class="person-icon">🧮</div> | |
| <div> | |
| <div class="person-name">Muhammad ibn Musa al-Khwarizmi</div> | |
| <div class="person-dates">780 – 850 CE · Baghdad</div> | |
| <div class="person-desc">Father of Algebra. His book <em>Al-Kitab al-Mukhtasar fi Hisab al-Jabr wal-Muqabala</em> gave us the word "algebra." His name in Latin — <em>Algoritmi</em> — gave us the word "algorithm." Without him, no code, no software, no AI.</div> | |
| </div> | |
| </div> | |
| <div class="person"> | |
| <div class="person-icon">🔭</div> | |
| <div> | |
| <div class="person-name">Ibn al-Haytham (Alhazen)</div> | |
| <div class="person-dates">965 – 1040 CE · Basra / Cairo</div> | |
| <div class="person-desc">Father of Optics and the Scientific Method. He established that knowledge must come from <strong>observation and experimentation</strong> — not pure philosophy. His <em>Book of Optics</em> influenced Descartes, Newton, and Kepler. His method is the foundation of all modern science.</div> | |
| </div> | |
| </div> | |
| <div class="person"> | |
| <div class="person-icon">⚕️</div> | |
| <div> | |
| <div class="person-name">Ibn Sina (Avicenna)</div> | |
| <div class="person-dates">980 – 1037 CE · Persia</div> | |
| <div class="person-desc">His <em>Canon of Medicine</em> was the standard medical textbook in European universities until the 17th century. He also wrote extensively on logic, mathematics, and philosophy — direct inputs to the thinking that would later produce computing theory.</div> | |
| </div> | |
| </div> | |
| <div class="person"> | |
| <div class="person-icon">🌍</div> | |
| <div> | |
| <div class="person-name">Al-Biruni</div> | |
| <div class="person-dates">973 – 1048 CE · Khwarazm</div> | |
| <div class="person-desc">Calculated the circumference of the Earth to within 1% accuracy in the 11th century, using trigonometry and observation from a single mountain. He also documented Indian numerals — which became the digits we use in all computing today: 0, 1, 2, 3…</div> | |
| </div> | |
| </div> | |
| <p>These were not isolated geniuses. They were products of a civilization that had been <strong>commanded by its scripture to seek knowledge</strong>. The Quran created the culture; the culture created the science.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="full-sep"></div> | |
| <!-- CHAPTER 3: ALGEBRA --> | |
| <section id="algebra"> | |
| <div class="chapter" id="ch3"> | |
| <div class="chapter-number">03</div> | |
| <div class="chapter-inner"> | |
| <div class="chapter-tag">Chapter Three</div> | |
| <h2 class="chapter-heading">Al-Jabr:<br>The Science that <em>Rules Everything</em></h2> | |
| <div class="chapter-arabic">الجبر والمقابلة</div> | |
| <p class="chapter-lead">Every line of code ever written. Every circuit ever designed. Every AI model ever trained. All of it descends from one book, written in Baghdad, in 820 CE.</p> | |
| <div class="chapter-body"> | |
| <p>Al-Khwarizmi's full book title was <em>Al-Kitab al-Mukhtasar fi Hisab al-Jabr wal-Muqabala</em> — "The Compendious Book on Calculation by Completion and Balancing." The word <mark>al-jabr (الجبر)</mark> means "completion" or "restoration" — and it became <strong>Algebra</strong> in Latin Europe.</p> | |
| <div class="callout"> | |
| <div class="callout-title">💡 Why Al-Khwarizmi Wrote This Book</div> | |
| <p>He stated clearly in the introduction that his purpose was to help Muslims with <strong>calculations in matters of inheritance, legacies, partition, lawsuits, and trade</strong> — all areas governed by Islamic law derived from the Quran. Religion was literally the mother of mathematics.</p> | |
| </div> | |
| <p>But the impact went far beyond inheritance. Al-Khwarizmi's work established:</p> | |
| <p><strong>1. Variables</strong> — the concept of an unknown quantity (x) that can be solved for. This is the heartbeat of all programming.</p> | |
| <p><strong>2. Equations</strong> — the idea that two expressions can be set equal and manipulated. Every if/else statement in code is a descendant of this.</p> | |
| <p><strong>3. Algorithms</strong> — step-by-step procedures for solving problems. The word itself is his name. Every function, every loop, every AI training step is an algorithm.</p> | |
| <div class="chain-viz"> | |
| <div class="chain-node"> | |
| <div class="chain-node-left"><div class="chain-dot"></div><div class="chain-connector"></div></div> | |
| <div class="chain-content"> | |
| <div class="chain-year">820 CE</div> | |
| <div class="chain-title">Al-Khwarizmi writes Al-Jabr</div> | |
| <div class="chain-text">Establishes algebra, variables, equations, and algorithms in Baghdad.</div> | |
| </div> | |
| </div> | |
| <div class="chain-node"> | |
| <div class="chain-node-left"><div class="chain-dot"></div><div class="chain-connector"></div></div> | |
| <div class="chain-content"> | |
| <div class="chain-year">1202 CE</div> | |
| <div class="chain-title">Fibonacci brings it to Europe</div> | |
| <div class="chain-text">Leonardo of Pisa (Fibonacci) travels to North Africa, learns Arabic mathematics, and introduces Hindu-Arabic numerals and algebra to Europe via <em>Liber Abaci</em>.</div> | |
| </div> | |
| </div> | |
| <div class="chain-node"> | |
| <div class="chain-node-left"><div class="chain-dot"></div><div class="chain-connector"></div></div> | |
| <div class="chain-content"> | |
| <div class="chain-year">1637 CE</div> | |
| <div class="chain-title">Descartes creates Coordinate Geometry</div> | |
| <div class="chain-text">Building on algebra, Descartes unifies algebra and geometry — creating the mathematical space in which all machine learning models operate today.</div> | |
| </div> | |
| </div> | |
| <div class="chain-node"> | |
| <div class="chain-node-left"><div class="chain-dot"></div><div class="chain-connector"></div></div> | |
| <div class="chain-content"> | |
| <div class="chain-year">1854 CE</div> | |
| <div class="chain-title">Boole creates Boolean Algebra</div> | |
| <div class="chain-text">George Boole creates a system of algebra using only 0 and 1 — TRUE and FALSE. This becomes the literal language of every computer ever built.</div> | |
| </div> | |
| </div> | |
| <div class="chain-node"> | |
| <div class="chain-node-left"><div class="chain-dot"></div></div> | |
| <div class="chain-content"> | |
| <div class="chain-year">1936 CE</div> | |
| <div class="chain-title">Turing builds on algebra to define computing</div> | |
| <div class="chain-text">Alan Turing uses mathematical logic — descended directly from al-Khwarizmi's tradition — to define what a computer is. The Turing Machine. The birth of Computer Science.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <p>There is also <strong>Al-Kindi's</strong> work on cryptography — the first systematic use of frequency analysis to break codes — a direct ancestor of cybersecurity and data encryption that protects the internet today.</p> | |
| <div class="callout"> | |
| <div class="callout-title">🔢 The Zero — Islam's Other Gift to Computing</div> | |
| <p>The Hindu-Arabic numeral system, including <strong>zero (0)</strong>, was transmitted to the world through Islamic scholars. Al-Khwarizmi's other major work documented this system. Binary code — the entire foundation of computing — is <strong>0s and 1s</strong>. Without zero, there is literally no digital computer.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="sep"></div> | |
| <!-- CHAPTER 4: COMPUTING --> | |
| <section id="computing"> | |
| <div class="chapter" id="ch4"> | |
| <div class="chapter-number">04</div> | |
| <div class="chapter-inner"> | |
| <div class="chapter-tag">Chapter Four</div> | |
| <h2 class="chapter-heading">The <em>Computer</em>:<br>Algebra Made Physical</h2> | |
| <div class="chapter-arabic">الحوسبة</div> | |
| <p class="chapter-lead">When you type on your keyboard, you are manipulating algebra. Every keystroke is an equation being solved billions of times per second.</p> | |
| <div class="chapter-body"> | |
| <p>The modern computer is not a machine — it is <strong>algebra made physical</strong>. Every transistor in your processor is a Boolean algebra gate making a decision: is the voltage high (1) or low (0)? Your processor runs billions of these algebraic operations per second.</p> | |
| <p>Here is the direct lineage:</p> | |
| <div class="fact-grid"> | |
| <div class="fact-card"><span class="fact-num">al-jabr</span><div class="fact-label">Arabic word → "Algebra"</div></div> | |
| <div class="fact-card"><span class="fact-num">Algoritmi</span><div class="fact-label">Al-Khwarizmi's Latin name → "Algorithm"</div></div> | |
| <div class="fact-card"><span class="fact-num">0 & 1</span><div class="fact-label">Transmitted via Islamic scholars → Binary Code</div></div> | |
| <div class="fact-card"><span class="fact-num">Logic Gates</span><div class="fact-label">Boolean Algebra → Physical Transistors</div></div> | |
| </div> | |
| <p>The word <strong>"Computer"</strong> itself originally meant a person who computes — who performs mathematical calculations. The first computers were built to automate what Muslim mathematicians had begun doing by hand: solving algebraic equations systematically.</p> | |
| <p>Charles Babbage's <em>Difference Engine</em> (1822) — the first mechanical computer — was designed specifically to compute polynomial equations. Polynomials are a direct product of algebra. <strong>Al-Khwarizmi's algebra → Babbage's machine → your laptop.</strong></p> | |
| <div class="callout"> | |
| <div class="callout-title">🧵 Ada Lovelace — First Programmer</div> | |
| <p>Ada Lovelace wrote the first algorithm intended for a machine in 1843. An algorithm — from <em>Algoritmi</em> — from <strong>al-Khwarizmi</strong>. The first programmer in history was executing the intellectual legacy of a Muslim mathematician from Baghdad.</p> | |
| </div> | |
| <p>Alan Turing, in his landmark 1936 paper, described a theoretical machine that could solve any computable problem by following a set of rules — an <strong>algorithm</strong>. He named the concept after… well, you know the story by now. The Turing Machine became the blueprint for every computer ever built. And Turing credited mathematical logic — which had been systematized by al-Khwarizmi's tradition over a thousand years earlier.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="sep"></div> | |
| <!-- BIG QUOTE 2 --> | |
| <div class="big-quote" id="bq2"> | |
| <blockquote>"The word 'algorithm' is simply the Latin transliteration of al-Khwarizmi's name. Every time a computer runs an algorithm, it whispers the name of a Muslim scholar from Baghdad."</blockquote> | |
| <cite>— History of Mathematics</cite> | |
| </div> | |
| <div class="sep"></div> | |
| <!-- CHAPTER 5: AI --> | |
| <section id="ai"> | |
| <div class="chapter" id="ch5"> | |
| <div class="chapter-number">05</div> | |
| <div class="chapter-inner"> | |
| <div class="chapter-tag">Chapter Five</div> | |
| <h2 class="chapter-heading">Artificial Intelligence:<br>The <em>Final Descendant</em></h2> | |
| <div class="chapter-arabic">الذكاء الاصطناعي</div> | |
| <p class="chapter-lead">AI is not science fiction. It is the most sophisticated application of algebra ever built — and algebra, as you now know, began with a devout Muslim scholar responding to a divine command.</p> | |
| <div class="chapter-body"> | |
| <p>Modern AI — including models like the one generating this text — is built on a foundation called <strong>linear algebra and calculus</strong>. At its core, a neural network is nothing but:</p> | |
| <p><strong>Billions of algebraic equations</strong>, each taking inputs, multiplying by weights, adding biases, and passing through activation functions — then adjusting using calculus (gradient descent) to minimize error. That is it. That is the entire secret of AI.</p> | |
| <div class="callout"> | |
| <div class="callout-title">🧠 What AI Actually Is, Mathematically</div> | |
| <p>A neural network computes: <strong>y = f(Wx + b)</strong> — where W is a matrix of weights, x is input, b is a bias, and f is an activation function. This is a direct algebraic equation. Al-Khwarizmi would recognize it instantly.</p> | |
| </div> | |
| <p>The specific branches of mathematics that power AI:</p> | |
| <p><strong>Linear Algebra</strong> — matrix multiplication, the engine of neural networks. Directly descended from al-Khwarizmi's work on systems of equations.</p> | |
| <p><strong>Calculus</strong> — developed by Newton and Leibniz, building on the work of Ibn al-Haytham's optical mathematics and al-Kindi's rate-of-change concepts.</p> | |
| <p><strong>Statistics and Probability</strong> — the basis of machine learning. Al-Kindi was the first to use frequency analysis systematically — a statistical method — in the 9th century.</p> | |
| <p><strong>Logic</strong> — the foundation of all reasoning in AI. Ibn Sina's (Avicenna's) work on propositional logic directly influenced the European logicians who built the mathematical logic that Turing used.</p> | |
| <div class="fact-grid"> | |
| <div class="fact-card"><span class="fact-num">GPT-4</span><div class="fact-label">Runs on linear algebra — al-Khwarizmi's legacy</div></div> | |
| <div class="fact-card"><span class="fact-num">~1T</span><div class="fact-label">Parameters — each an algebraic variable</div></div> | |
| <div class="fact-card"><span class="fact-num">1200 yrs</span><div class="fact-label">From al-Jabr to AI — one unbroken chain</div></div> | |
| <div class="fact-card"><span class="fact-num">iqra</span><div class="fact-label">The first word — that started it all</div></div> | |
| </div> | |
| <p>And here is the profound irony that closes the circle: <strong>AI systems like me are now being used to study the Quran</strong> — analyzing its linguistic patterns, numerical structures, and meanings at a scale impossible for any human. The tool created by the intellectual tradition sparked by the Quran is now being turned back to serve and illuminate the Quran itself.</p> | |
| <div class="callout"> | |
| <div class="callout-title">🔄 The Full Circle</div> | |
| <p>The Quran commanded humanity to read and reason → Islamic scholars built the mathematical sciences → Those sciences became the foundations of computing → Computing gave birth to AI → AI is now used to explore and understand the Quran. <strong>The river has returned to its source.</strong></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="full-sep"></div> | |
| <!-- INTERACTIVE TIMELINE --> | |
| <section id="timeline"> | |
| <div class="timeline-section" id="tlSection"> | |
| <div class="section-header"> | |
| <div style="color: var(--gold); font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 0.8rem;">The Complete Journey</div> | |
| <h2>14 Centuries in One Timeline</h2> | |
| <p>From revelation to artificial minds</p> | |
| </div> | |
| <div class="timeline"> | |
| <div class="tl-item" id="tl1"> | |
| <div class="tl-dot"></div> | |
| <div class="tl-era">610 CE — Arabia</div> | |
| <div class="tl-title">📖 "Iqra" — Read</div> | |
| <div class="tl-body">The first word revealed to Prophet Muhammad ﷺ in the Cave of Hira. A single command that would, over 14 centuries, produce artificial intelligence.</div> | |
| </div> | |
| <div class="tl-item" id="tl2"> | |
| <div class="tl-dot"></div> | |
| <div class="tl-era">632–750 CE — Islamic World</div> | |
| <div class="tl-title">🌙 Quran Codified & Scholarship Begins</div> | |
| <div class="tl-body">The Quran is formally compiled. Islamic legal scholarship emerges, requiring precise mathematical calculations for inheritance laws — creating demand for advanced mathematics.</div> | |
| </div> | |
| <div class="tl-item" id="tl3"> | |
| <div class="tl-dot"></div> | |
| <div class="tl-era">830 CE — Baghdad</div> | |
| <div class="tl-title">🏛️ Bayt al-Hikmah Founded</div> | |
| <div class="tl-body">The House of Wisdom opens in Baghdad. The world's first research institution. Scholars from every civilization gather to translate, study, and advance all fields of knowledge.</div> | |
| </div> | |
| <div class="tl-item" id="tl4"> | |
| <div class="tl-dot"></div> | |
| <div class="tl-era">820 CE — Baghdad</div> | |
| <div class="tl-title">🧮 Al-Khwarizmi Writes Al-Jabr</div> | |
| <div class="tl-body">The founding text of algebra is written, giving humanity variables, equations, and algorithms. The words "algebra" and "algorithm" are born. The intellectual DNA of computing is created.</div> | |
| </div> | |
| <div class="tl-item" id="tl5"> | |
| <div class="tl-dot"></div> | |
| <div class="tl-era">965–1040 CE — Basra</div> | |
| <div class="tl-title">🔬 Ibn al-Haytham & the Scientific Method</div> | |
| <div class="tl-body">The foundation of all experimental science is laid. Knowledge must be tested, verified, and reproducible. Without this epistemological revolution, modern science — and therefore computing — could not exist.</div> | |
| </div> | |
| <div class="tl-item" id="tl6"> | |
| <div class="tl-dot"></div> | |
| <div class="tl-era">1202 CE — Europe</div> | |
| <div class="tl-title">🌍 Islamic Mathematics Enters Europe</div> | |
| <div class="tl-body">Fibonacci introduces Hindu-Arabic numerals (0–9) and algebra to Europe. The Renaissance, and later the Scientific Revolution, are built on this transmission of Islamic mathematical knowledge.</div> | |
| </div> | |
| <div class="tl-item" id="tl7"> | |
| <div class="tl-dot"></div> | |
| <div class="tl-era">1854 CE — England</div> | |
| <div class="tl-title">⚙️ Boolean Algebra</div> | |
| <div class="tl-body">George Boole creates an algebra of TRUE and FALSE — 1 and 0. Directly descended from Al-Khwarizmi's algebra. This becomes the literal language of every digital computer ever built.</div> | |
| </div> | |
| <div class="tl-item" id="tl8"> | |
| <div class="tl-dot"></div> | |
| <div class="tl-era">1936–1945 CE — England/USA</div> | |
| <div class="tl-title">💻 Turing & the First Computers</div> | |
| <div class="tl-body">Alan Turing defines computing using mathematical logic. The first electronic computers are built. They are, in essence, machines that run algorithms — a word that carries al-Khwarizmi's name to this day.</div> | |
| </div> | |
| <div class="tl-item" id="tl9"> | |
| <div class="tl-dot"></div> | |
| <div class="tl-era">1950s–1980s CE</div> | |
| <div class="tl-title">📡 Programming Languages & Software</div> | |
| <div class="tl-body">Programming languages emerge — all based on algebra and algorithmic thinking. FORTRAN, COBOL, C, Pascal. Every programmer, unknowingly, writes in a language whose very structure was conceived in 9th-century Baghdad.</div> | |
| </div> | |
| <div class="tl-item" id="tl10"> | |
| <div class="tl-dot"></div> | |
| <div class="tl-era">1990s–2010s CE</div> | |
| <div class="tl-title">🌐 The Internet & Machine Learning</div> | |
| <div class="tl-body">The internet connects the world. Machine learning — built on linear algebra and statistics — begins to flourish. Neural networks, the ancestors of today's AI, begin to show remarkable results.</div> | |
| </div> | |
| <div class="tl-item" id="tl11"> | |
| <div class="tl-dot"></div> | |
| <div class="tl-era">2017–Present</div> | |
| <div class="tl-title">🤖 The Age of Artificial Intelligence</div> | |
| <div class="tl-body">Transformer architecture (the engine of GPT, Claude, Gemini) emerges. AI systems trained on billions of algebraic operations can read, write, reason, and create. The command "Iqra" has, in a sense, been given to the machine.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FINALE --> | |
| <div class="finale" id="finale"> | |
| <h2>One Word.<br><span>Fourteen Centuries.</span><br>The Mind of a Machine.</h2> | |
| <p>From a cave in Arabia to the servers running artificial intelligence — it is one unbroken thread of human intellect, ignited by a divine command to read.</p> | |
| <div class="finale-chain"> | |
| <span>📖 Iqra</span><div class="arr">→</div> | |
| <span>🕌 Islamic Golden Age</span><div class="arr">→</div> | |
| <span>🧮 Algebra & Algorithms</span><div class="arr">→</div> | |
| <span>⚙️ Boolean Logic</span><div class="arr">→</div> | |
| <span>💻 Computing</span><div class="arr">→</div> | |
| <span>🤖 Artificial Intelligence</span> | |
| </div> | |
| </div> | |
| <footer> | |
| <div class="footer-arabic">وَعَلَّمَكَ مَا لَمْ تَكُن تَعْلَمُ</div> | |
| <p style="margin-bottom: 0.5rem;">"And He taught you what you did not know." — Quran 4:113</p> | |
| <p style="margin-top: 1rem; font-size: 0.75rem; opacity: 0.5;">The Quran → Islamic Scholarship → Algebra → Computing → Artificial Intelligence</p> | |
| </footer> | |
| <script> | |
| // Generate stars | |
| const starsEl = document.getElementById('stars'); | |
| for (let i = 0; i < 120; i++) { | |
| const s = document.createElement('div'); | |
| s.className = 'star'; | |
| const size = Math.random() * 2 + 0.5; | |
| s.style.cssText = `width:${size}px;height:${size}px;left:${Math.random()*100}%;top:${Math.random()*100}%;--d:${2+Math.random()*4}s;animation-delay:${Math.random()*5}s;`; | |
| starsEl.appendChild(s); | |
| } | |
| // Progress bar | |
| window.addEventListener('scroll', () => { | |
| const pct = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100; | |
| document.getElementById('progressBar').style.width = pct + '%'; | |
| updateDots(); | |
| }); | |
| // Intersection Observer for animations | |
| const obs = new IntersectionObserver((entries) => { | |
| entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }); | |
| }, { threshold: 0.15 }); | |
| document.querySelectorAll('.chapter, .big-quote, .timeline-section, .finale').forEach(el => obs.observe(el)); | |
| // Timeline item staggered animation | |
| const tlObs = new IntersectionObserver((entries) => { | |
| entries.forEach((e, i) => { | |
| if (e.isIntersecting) { | |
| setTimeout(() => e.target.classList.add('visible'), e.target.dataset.delay || 0); | |
| } | |
| }); | |
| }, { threshold: 0.2 }); | |
| document.querySelectorAll('.tl-item').forEach((el, i) => { | |
| el.dataset.delay = i * 80; | |
| tlObs.observe(el); | |
| }); | |
| // Scroll dots update | |
| const sections = ['hero','quran','scholarship','algebra','computing','ai','timeline']; | |
| function updateDots() { | |
| const scrollY = window.scrollY + window.innerHeight / 2; | |
| let active = 'hero'; | |
| sections.forEach(id => { | |
| const el = document.getElementById(id); | |
| if (el && el.offsetTop <= scrollY) active = id; | |
| }); | |
| document.querySelectorAll('.scroll-dot').forEach(d => { | |
| d.classList.toggle('active', d.dataset.section === active); | |
| }); | |
| } | |
| function scrollToSection(id) { | |
| const el = document.getElementById(id); | |
| if (el) el.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment