|
Server : Apache/2.4.62 System : FreeBSD fbsdweb2.web.rcn.net 14.1-RELEASE FreeBSD 14.1-RELEASE releng/14.1-n267679-10e31f0946d8 GENERIC amd64 User : www ( 80) PHP Version : 8.3.8 Disable Function : NONE Directory : /domains/drsuper/CalculusMechanics/ |
Upload File : |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Adventure 8 – The Layer That Changed the World</title>
<style>
body {
font-size: 18px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
margin: 0;
padding: 0;
background: #ffffff; /* remove outer blue page */
color: #222;
}
.wrap{
padding: 12px 18px 18px;
max-width: none;
margin: 0;
}
.nav-row{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:0.8rem;
align-items:center;
}
button {
background: #e9f0ff;
border: 2px solid #6b8cff;
border-radius: 0;
padding: 10px 18px;
font-size: 1rem;
cursor: pointer;
box-shadow: 0 3px 0 #4f6fe6;
transition: all 0.12s ease;
}
/* Hover */
button:hover {
background: #f3f7ff;
}
/* Pressed */
button:active {
background: #cddcff;
box-shadow: 0 1px 0 #4f6fe6;
transform: translateY(2px);
}
/* Optional: "checked" feeling after click */
button.checked {
background: #dff5e1;
border-color: #3a9b3a;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}
button.sampled {
background: #fff3d9;
border-color: #d9a441;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}
.card{
border:1px solid #dde3ff;
background:#f6f7ff;
border-radius:14px;
padding:1rem 1rem 0.95rem;
margin-top:12px;
}
.small{ font-size:0.95rem; color:#444; }
h1{ margin:0.2rem 0 0.25rem; font-size:2.1rem; }
h2{ margin-top:1.4rem; margin-bottom:0.4rem; font-size:1.55rem; }
p{ margin:0.35rem 0 0.7rem; line-height:1.55; }
.story-frame{
margin-top:1.4rem;
background:linear-gradient(180deg,#f9faff,#ffffff);
border:1px solid #dde3ff;
border-radius:18px;
padding:1.6rem 1.8rem 1.9rem;
box-shadow:0 10px 28px rgba(0,0,0,0.08);
}
.story-images{
display:grid;
grid-template-columns:repeat(3,1fr);
gap: 120px;
align-items:stretch;
}
.story-images img{
width:100%;
height:260px;
object-fit: cover; /* fills box */
border-radius:14px;
border:1px solid #000;
display:block;
border: 5px solid #222;
.
}
@media (max-width:800px){
.story-images{ grid-template-columns:1fr; }
.story-images img{ height:240px; }
}
.topbar{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
}
.topbar label{ margin-left:auto; }
.footer{
margin-top:2.2rem;
font-size:0.9rem;
color:#777;
text-align:left;
border-top:1px solid #eee;
padding-top:0.8rem;
}
.story-images figure {
margin: 0;
text-align: center;
}
.story-images figcaption {
margin-top: 0.6rem;
font-size: 0.95em;
color: #444;
}
</style>
</head>
<body>
<div class="wrap">
<div class="nav-row">
<a href="index.html"><button class="secondary">🧠Hub</button></a>
<a href="adventure_8_home.html"><button class="secondary">🏠Home</button></a>
</div>
<div class="card">
<h2 style="margin-top:0">🔊 Listen to the story</h2>
<p class="small" style="margin-top:6px">Click <b>Read</b> to hear the story aloud. You can pause or stop at any time.</p>
<div class="topbar" style="margin:10px 0 0">
<button class="btn" id="readBtn" type="button">Read</button>
<button class="btn secondary" id="pauseBtn" type="button">Pause</button>
<button class="btn secondary" id="stopBtn" type="button">Stop</button>
<label class="small" style="display:flex;align-items:center;gap:8px">
Voice:
<select id="voiceSelect" style="padding:8px 10px;border-radius:10px;border:1px solid #bbb;font-size:1rem;min-width:220px">
<option value="">Loading voices…</option>
</select>
</label>
</div>
<div class="small" id="ttsMsg" style="margin-top:10px"></div>
</div>
<div class="story-frame">
<div class="story-images">
<figure>
<img src="images/adventure_8_story_image_1.png"
alt="Walter Alvarez"
<figcaption>
<a href="https://www.youtube.com/watch?v=41duwcBxfms&list=PL6PAzUorozDOGdGf7mW2llqZdxpI_ehib" target="_blank">
<b>Walter and Luis Alvarez at Gubbio Italy - Big History on You Tube</b></a>
</figcaption>
</figure>
<figure>
<img src="images/adventure_8_story_image_2.png"
alt="K–Pg boundary"
<figcaption><b>the Bottaccione Gorge outcrop showing the cliff face where the K–Pg boundary layer is exposed.</b>
</figcaption>
</figure>
<figure>
<img src="images/adventure_8_story_image_3.png"
alt="Chicxulub crater"
<figcaption><b>Chicxulub crater - 66 million years ago when an asteroid, about ten kilometers in diameter, struck Earth.</b></figcaption>
</figure>
</div>
<div id="storyText"><h1>The Layer That Changed the World - The Extinction of Dinosaurs</h1>
<h2>The Dinosaur Extinction, the Missing Crater, and the DiVA Charts</h2>
<p>In 1980, a young geologist named Walter Alvarez was climbing the limestone cliffs of Gubbio, Italy, when he noticed something odd: a very thin, chocolate-brown band of clay—only a couple of centimeters thick—squeezed between massive layers of limestone. It looked ordinary, but Walter’s instincts said otherwise. He scraped a sample and took it home.
</p>
<p>Walter’s father, Luis Alvarez, a world-famous physicist and Nobel Prize winner, used to tease him: “Geology? That’s not real science. That’s just collecting rocks.” But he respected curiosity—especially Walter’s. So when he saw the strange clay, Luis contacted his colleague Frank Asaro, a nuclear chemist with one of the most advanced neutron-activation systems in the world. Asaro analyzed the sample using equipment normally reserved for high-precision physics.
</p>
<p>The results were stunning: the clay contained an enormous spike of iridium—hundreds of times more than Earth’s crust normally has. Iridium is extremely rare on Earth but common in asteroids.
</p>
<p>Then came the breakthrough. Geologists began reporting the same thin layer in Denmark, Spain, New Zealand, Egypt, North America, and even deep-sea drill cores. A global stripe of iridium-rich clay, laid down everywhere at the same moment—the instant the dinosaurs vanished.
</p>
<p>Walter, Luis, Asaro, and others pieced together the story: a six-mile-wide asteroid had slammed into Earth. Dust from the explosion, rich in iridium, circled the globe and settled into a slender stripe of clay—thin as a coin, yet recording one of history’s greatest catastrophes.
</p>
<p>One mystery remained: Where was the crater? For years, no one could find it. Then petroleum geologists in Mexico mapped unusual gravity readings under the Yucatán Peninsula. Their data revealed a buried circular scar, 110 miles wide. The Chicxulub crater—exactly the right age—had finally been found. The last missing piece clicked into place. And Luis Alvarez never again joked about Walter’s “rock collecting.”
</p>
<p>Beginning in the 1960s, Patterson examined these records and found a dramatic jump in atmospheric lead starting around 1927—the exact year tetra-ethyl lead was introduced into gasoline. Patterson used these results extensively to fight the big oil companies and get the Lead out of Gasoline. After the Clean Air Act, ice cores showed lead levels dropping just as quickly.
</p>
<h2>The DiVA Chart: Motion’s Iridium Layer </h2>
<p>Just as the thin iridium layer reveals Earth’s past, motion leaves behind its own thin stripe that reveals how something moved. A vertical stack of three curves: Distance; Velocity; Acceleration.
</p>Together they form the DiVA Chart—the Distance–Velocity–Acceleration layer. The name DiVA echoes the ancient Indo-Iranian word Deva, meaning “shining one, guiding light.” In later Persian tradition the same root became Div, a creature of chaos—reflecting a deep cultural inversion during Mithraic and proto-Zoroastrian transformations.</p>
<p>Together they form the DiVA Chart—the Distance–Velocity–Acceleration layer. The name DiVA echoes the ancient Indo-Iranian word Deva, meaning “shining one, guiding light.” In later Persian tradition the same root became Div, a creature of chaos—reflecting a deep cultural inversion during Mithraic and proto-Zoroastrian transformations.</p>
</p>Motion behaves the same way: when understood, it is elegant and clear like a Deva; when misunderstood, it feels chaotic like a Div. The DiVA Chart is the guiding light that makes motion readable.Just as geologists learned to read Earth’s past from a thin band of clay, you will learn to read motion from this thin band of calculus.
</p>
</div>
<div class="footer">Created by Dr. Super & Spark – Powered by ChatGPT</div>
</div>
<script>
(function(){
const readBtn = document.getElementById('readBtn');
const pauseBtn = document.getElementById('pauseBtn');
const stopBtn = document.getElementById('stopBtn');
const voiceSel = document.getElementById('voiceSelect');
const msgEl = document.getElementById('ttsMsg');
const storyEl = document.getElementById('storyText');
if(!('speechSynthesis' in window)){
msgEl.textContent = "Text-to-speech is not supported in this browser.";
readBtn.disabled = pauseBtn.disabled = stopBtn.disabled = true;
return;
}
let utter = null;
function pickThreeEnglish(voices){
const en = voices.filter(v => /^en(-|_)?/i.test(v.lang || "") || /english/i.test(v.name || ""));
en.sort((a,b) => (b.localService === true) - (a.localService === true));
const picked = [];
const seen = new Set();
for(const v of en){
const key = (v.name||"").toLowerCase();
if(seen.has(key)) continue;
picked.push(v); seen.add(key);
if(picked.length === 3) break;
}
return picked;
}
function loadVoices(){
const voices = window.speechSynthesis.getVoices();
const picked = pickThreeEnglish(voices);
voiceSel.innerHTML = "";
if(picked.length === 0){
voiceSel.innerHTML = "<option value=''>No English voices found</option>";
msgEl.textContent = "No English voices were found on this device. (Try Chrome or Edge.)";
return;
}
picked.forEach((v, idx) => {
const opt = document.createElement('option');
opt.value = v.name;
opt.textContent = `${v.name} (${v.lang})`;
voiceSel.appendChild(opt);
if(idx === 0) voiceSel.value = v.name;
});
msgEl.textContent = "";
}
loadVoices();
window.speechSynthesis.onvoiceschanged = loadVoices;
function buildUtterance(){
const text = (storyEl ? storyEl.innerText : '').trim();
if(!text){ msgEl.textContent = 'Could not find story text to read.'; return; }
utter = new SpeechSynthesisUtterance(text);
const voices = window.speechSynthesis.getVoices();
const chosenName = voiceSel.value;
const chosen = voices.find(v => v.name === chosenName);
if(chosen) utter.voice = chosen;
utter.rate = 1.0;
utter.pitch = 1.0;
utter.onend = () => {
readBtn.textContent = "Read";
};
utter.onerror = () => {
readBtn.textContent = "Read";
msgEl.textContent = "Could not play audio. Try another voice or refresh.";
};
}
function stop(){
window.speechSynthesis.cancel();
readBtn.textContent = "Read";
}
readBtn.addEventListener('click', () => {
msgEl.textContent = "";
stop();
buildUtterance();
window.speechSynthesis.speak(utter);
readBtn.textContent = "Reading…";
});
pauseBtn.addEventListener('click', () => {
if(window.speechSynthesis.speaking && !window.speechSynthesis.paused){
window.speechSynthesis.pause();
readBtn.textContent = "Read";
msgEl.textContent = "Paused. Click Pause again to resume.";
} else if(window.speechSynthesis.paused){
window.speechSynthesis.resume();
readBtn.textContent = "Reading…";
msgEl.textContent = "";
}
});
stopBtn.addEventListener('click', () => {
stop();
msgEl.textContent = "Stopped.";
});
voiceSel.addEventListener('change', () => {
if(window.speechSynthesis.speaking){
stop();
buildUtterance();
window.speechSynthesis.speak(utter);
readBtn.textContent = "Reading…";
msgEl.textContent = "";
}
});
})();
</script>
</body>
</html>