initial
This commit is contained in:
commit
8e27665e21
11 changed files with 2247 additions and 0 deletions
246
presentation.html
Normal file
246
presentation.html
Normal file
|
|
@ -0,0 +1,246 @@
|
|||
<title>Watt a House! Class Presentation</title>
|
||||
<style>
|
||||
:root{ --bg:#fef9ee; --ink:#23262f; --muted:#6b6f7d; --card:#ffffff;
|
||||
--yellow:#f7d33e; --yellow2:#d9b62f; --blue:#2f5b8c; --red:#e5463a;
|
||||
--accent:#f6a723; --grn:#2f9e57; --rule:#e7e0d0; }
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:var(--bg);color:var(--ink);
|
||||
font:18px/1.5 "Trebuchet MS","Segoe UI",system-ui,sans-serif;overflow:hidden;}
|
||||
.deck{height:100vh;display:flex;flex-direction:column;}
|
||||
.stage{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden;}
|
||||
.slide{display:none;width:100%;max-width:900px;text-align:center;}
|
||||
.slide.active{display:block;animation:fade .3s ease;}
|
||||
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
|
||||
h1{font-size:clamp(30px,6vw,58px);margin:.1em 0;line-height:1.05;}
|
||||
h2{font-size:clamp(24px,5vw,44px);margin:.1em 0 .3em;}
|
||||
p.big{font-size:clamp(19px,2.6vw,28px);color:var(--ink);margin:.4em auto;max-width:20em;}
|
||||
.kicker{display:inline-block;background:var(--yellow);color:#3a2c00;font-weight:bold;
|
||||
padding:6px 16px;border-radius:999px;font-size:16px;letter-spacing:.5px;margin-bottom:8px;}
|
||||
ul.pts{list-style:none;padding:0;margin:14px auto;max-width:18em;text-align:left;}
|
||||
ul.pts li{background:var(--card);border:2px solid var(--rule);border-radius:14px;
|
||||
padding:12px 16px;margin:10px 0;font-size:clamp(17px,2.3vw,24px);display:flex;gap:12px;align-items:center;}
|
||||
ol.steps{list-style:none;counter-reset:s;padding:0;margin:16px auto;max-width:20em;text-align:left;}
|
||||
ol.steps li{counter-increment:s;background:var(--card);border:2px solid var(--rule);border-radius:14px;
|
||||
padding:14px 16px 14px 58px;margin:12px 0;position:relative;font-size:clamp(17px,2.4vw,24px);}
|
||||
ol.steps li::before{content:counter(s);position:absolute;left:12px;top:50%;transform:translateY(-50%);
|
||||
width:32px;height:32px;background:var(--accent);color:#fff;border-radius:50%;
|
||||
display:flex;align-items:center;justify-content:center;font-weight:bold;}
|
||||
.art{margin:10px auto;}
|
||||
svg.fig{display:block;margin:0 auto;height:clamp(160px,30vh,280px);width:auto;}
|
||||
.demo{background:#fff7e6;border:3px dashed var(--accent);border-radius:20px;padding:22px;max-width:22em;margin:14px auto;}
|
||||
.demo .file{font-family:ui-monospace,Menlo,monospace;background:#fdeecb;padding:2px 8px;border-radius:6px;}
|
||||
.bar{display:flex;align-items:center;gap:14px;padding:10px 18px;border-top:2px solid var(--rule);background:#fffdf6;}
|
||||
.note{flex:1;font-size:15px;color:#4a4030;background:#fff6dc;border:1px solid #f0dfa8;border-radius:10px;
|
||||
padding:8px 14px;min-height:38px;}
|
||||
.note b{color:#8a5a00;}
|
||||
.note.hidden{visibility:hidden;}
|
||||
.count{font-family:ui-monospace,Menlo,monospace;color:var(--muted);font-size:14px;min-width:56px;text-align:center;}
|
||||
button{font:bold 16px inherit;border:0;border-radius:12px;padding:12px 20px;cursor:pointer;
|
||||
background:var(--blue);color:#fff;}
|
||||
button.ghost{background:#fff;color:var(--ink);border:2px solid var(--rule);}
|
||||
button:active{transform:translateY(1px);}
|
||||
.hint{color:var(--muted);font-size:13px;margin-top:16px;}
|
||||
.row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;align-items:flex-end;margin-top:8px;}
|
||||
.tagname{font-size:14px;color:var(--muted);margin-top:4px;}
|
||||
</style>
|
||||
|
||||
<!-- ===== characters ===== -->
|
||||
<svg width="0" height="0" style="position:absolute"><defs>
|
||||
<symbol id="minion" viewBox="0 0 60 150">
|
||||
<path d="M12 66 L6 18" stroke="var(--yellow2)" stroke-width="5"/><path d="M48 66 L54 18" stroke="var(--yellow2)" stroke-width="5"/>
|
||||
<circle cx="6" cy="16" r="5" fill="var(--yellow)" stroke="var(--yellow2)" stroke-width="1.5"/>
|
||||
<circle cx="54" cy="16" r="5" fill="var(--yellow)" stroke="var(--yellow2)" stroke-width="1.5"/>
|
||||
<rect x="8" y="20" width="44" height="110" rx="22" fill="var(--yellow)" stroke="var(--yellow2)" stroke-width="2"/>
|
||||
<path d="M24 20 l-2 -8 M30 19 l0 -9 M36 20 l2 -8" stroke="#2a2416" stroke-width="1.8" fill="none"/>
|
||||
<rect x="6" y="42" width="48" height="13" fill="#8b9099"/><rect x="6" y="42" width="48" height="13" fill="none" stroke="#5a5f68"/>
|
||||
<circle cx="30" cy="48.5" r="11" fill="#dfe3ea" stroke="#63687055" stroke-width="3"/>
|
||||
<circle cx="30" cy="48.5" r="7" fill="#fff"/><circle cx="31" cy="48.5" r="3.2" fill="#3a2b1a"/>
|
||||
<path d="M22 70 q8 7 16 0" stroke="#7a5b2a" stroke-width="1.6" fill="none"/>
|
||||
<path d="M8 96 h44 v12 a22 22 0 0 1 -44 0 z" fill="var(--blue)"/>
|
||||
<rect x="23" y="84" width="14" height="14" fill="var(--blue)"/>
|
||||
<path d="M24 84 l-4 -12 M36 84 l4 -12" stroke="var(--blue)" stroke-width="3"/>
|
||||
<rect x="14" y="128" width="14" height="12" rx="3" fill="#2a2a33"/><rect x="32" y="128" width="14" height="12" rx="3" fill="#2a2a33"/>
|
||||
</symbol>
|
||||
<symbol id="minion2" viewBox="0 0 60 150">
|
||||
<path d="M12 66 L6 18" stroke="var(--yellow2)" stroke-width="5"/><path d="M48 66 L54 18" stroke="var(--yellow2)" stroke-width="5"/>
|
||||
<circle cx="6" cy="16" r="5" fill="var(--yellow)" stroke="var(--yellow2)" stroke-width="1.5"/>
|
||||
<circle cx="54" cy="16" r="5" fill="var(--yellow)" stroke="var(--yellow2)" stroke-width="1.5"/>
|
||||
<rect x="8" y="20" width="44" height="110" rx="22" fill="var(--yellow)" stroke="var(--yellow2)" stroke-width="2"/>
|
||||
<rect x="6" y="42" width="48" height="13" fill="#8b9099"/><rect x="6" y="42" width="48" height="13" fill="none" stroke="#5a5f68"/>
|
||||
<line x1="30" y1="44" x2="30" y2="53" stroke="#5a5f68" stroke-width="1.4"/>
|
||||
<circle cx="21" cy="48.5" r="8.5" fill="#dfe3ea" stroke="#63687055" stroke-width="2.5"/>
|
||||
<circle cx="39" cy="48.5" r="8.5" fill="#dfe3ea" stroke="#63687055" stroke-width="2.5"/>
|
||||
<circle cx="21" cy="48.5" r="5" fill="#fff"/><circle cx="39" cy="48.5" r="5" fill="#fff"/>
|
||||
<circle cx="22" cy="48.5" r="2.3" fill="#3a2b1a"/><circle cx="40" cy="48.5" r="2.3" fill="#3a2b1a"/>
|
||||
<path d="M22 70 q8 6 16 0" stroke="#7a5b2a" stroke-width="1.6" fill="none"/>
|
||||
<path d="M8 96 h44 v12 a22 22 0 0 1 -44 0 z" fill="var(--blue)"/>
|
||||
<rect x="23" y="84" width="14" height="14" fill="var(--blue)"/>
|
||||
<path d="M24 84 l-4 -12 M36 84 l4 -12" stroke="var(--blue)" stroke-width="3"/>
|
||||
<rect x="14" y="128" width="14" height="12" rx="3" fill="#2a2a33"/><rect x="32" y="128" width="14" height="12" rx="3" fill="#2a2a33"/>
|
||||
</symbol>
|
||||
<symbol id="gru" viewBox="0 0 130 210">
|
||||
<path d="M42 92 Q39 98 34 122 L12 205 L118 205 L96 122 Q91 98 88 92 Z" fill="#3a3f4a" stroke="#242830" stroke-width="2"/>
|
||||
<rect x="36" y="107" width="58" height="18" rx="9" fill="#31333b" transform="rotate(23 65 118)"/>
|
||||
<rect x="36" y="107" width="58" height="18" rx="9" fill="#43464f" transform="rotate(-23 65 118)"/>
|
||||
<circle cx="91" cy="108" r="6.5" fill="#d9bb9d"/><circle cx="39" cy="108" r="6.5" fill="#d9bb9d"/>
|
||||
<path d="M39 72 Q65 87 91 72 L93 93 Q65 106 37 93 Z" fill="#9298a1" stroke="#585d66" stroke-width="1.5"/>
|
||||
<path d="M38 78 Q65 92 92 78 M37 85 Q65 99 93 85 M38 91 Q65 104 92 91" stroke="#33363c" stroke-width="2.6" fill="none"/>
|
||||
<path d="M80 93 l11 30 l-14 -3 l-1 -25 z" fill="#82878f"/>
|
||||
<ellipse cx="64" cy="45" rx="29" ry="31" fill="#d9bb9d"/><ellipse cx="64" cy="30" rx="24" ry="16" fill="#e0c4a8"/>
|
||||
<circle cx="35" cy="49" r="5" fill="#d9bb9d"/><circle cx="93" cy="49" r="5" fill="#d3b494"/>
|
||||
<path d="M61 42 Q58 54 61 60 Q66 64 72 59 Q74 51 69 43 Z" fill="#d0ae8f"/>
|
||||
<path d="M47 33 Q55 30 63 35 M82 37 Q75 33 68 36" stroke="#4a3b2a" stroke-width="2.6" fill="none" stroke-linecap="round"/>
|
||||
<ellipse cx="57" cy="43" rx="5" ry="6.2" fill="#fff" stroke="#3a3a3a"/><ellipse cx="71" cy="43" rx="5" ry="6.2" fill="#fff" stroke="#3a3a3a"/>
|
||||
<circle cx="58" cy="44" r="2.5" fill="#221"/><circle cx="71" cy="44" r="2.5" fill="#221"/>
|
||||
<path d="M53 65 Q64 61 75 66" stroke="#7a5b48" stroke-width="2" fill="none"/>
|
||||
</symbol>
|
||||
<symbol id="house" viewBox="0 0 200 180">
|
||||
<polygon points="100,20 186,92 14,92" fill="#c0553e"/>
|
||||
<rect x="150" y="40" width="18" height="30" fill="#9a4432"/>
|
||||
<rect x="30" y="92" width="140" height="80" fill="#f2c879" stroke="#c79a4a" stroke-width="2"/>
|
||||
<rect x="86" y="128" width="28" height="44" rx="2" fill="#7a5230"/>
|
||||
<circle cx="108" cy="150" r="2.5" fill="#ffd76a"/>
|
||||
<rect class="win" x="44" y="106" width="26" height="26" rx="2" fill="#fff2c2" stroke="#c79a4a"/>
|
||||
<rect class="win" x="130" y="106" width="26" height="26" rx="2" fill="#fff2c2" stroke="#c79a4a"/>
|
||||
<rect class="win" x="44" y="140" width="26" height="24" rx="2" fill="#fff2c2" stroke="#c79a4a"/>
|
||||
<rect class="win" x="130" y="140" width="26" height="24" rx="2" fill="#fff2c2" stroke="#c79a4a"/>
|
||||
</symbol>
|
||||
</defs></svg>
|
||||
|
||||
<div class="deck">
|
||||
<div class="stage">
|
||||
|
||||
<!-- 1 -->
|
||||
<section class="slide active" data-note="Hi everyone! My name is Sebastian. My project is called Watt a House, because a 'watt' is how we measure electricity! I'm going to show you my light-up house, and how I made it work with a little help from Gru and the Minions.">
|
||||
<span class="kicker">MY PROJECT</span>
|
||||
<h1>Watt a House!</h1>
|
||||
<p class="big">How I made a tiny house turn its lights on and off, with help from <b>Gru</b> and the <b>Minions</b>!</p>
|
||||
<svg class="fig" viewBox="0 0 200 180"><use href="#house"/></svg>
|
||||
<p class="hint">By Sebastian Ballance · Third Year, Lower Elementary</p>
|
||||
</section>
|
||||
|
||||
<!-- 2 -->
|
||||
<section class="slide" data-note="This is a house, but it's special. The rooms REALLY light up! I can turn on the living room, the bedrooms, the porch outside, and even a fireplace.">
|
||||
<h2>What I built </h2>
|
||||
<p class="big">A house where I can turn on the lights!</p>
|
||||
<ul class="pts">
|
||||
<li> living room & kitchen</li>
|
||||
<li> bedrooms upstairs</li>
|
||||
<li> porch & outside lights</li>
|
||||
<li> a fireplace that flickers</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- 3 -->
|
||||
<section class="slide" data-note="Here's the tricky part. There are LOTS of tiny lights. Something has to tell them all when to turn on and off. So I needed a boss to give orders, and helpers to do the work, just like Gru and the Minions!">
|
||||
<h2>The tricky part </h2>
|
||||
<p class="big">How do you control <b>SO many</b> little lights at once?</p>
|
||||
<p class="big">I needed a <b>boss</b> to give orders… and <b>helpers</b> to do the heavy work.</p>
|
||||
</section>
|
||||
|
||||
<!-- 4 -->
|
||||
<section class="slide" data-note="Meet the boss! This little computer is the brain of my house. I call him Gru. He decides what to do and gives the orders, but he is too weak to power all the lights by himself.">
|
||||
<h2>Meet the boss: <span style="color:var(--blue)">GRU</span></h2>
|
||||
<svg class="fig" viewBox="0 0 130 210"><use href="#gru"/></svg>
|
||||
<ul class="pts">
|
||||
<li> Gru is the <b>brain</b> (a tiny computer)</li>
|
||||
<li> He gives the <b>orders</b></li>
|
||||
<li> But he's too weak to do the heavy work himself!</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- 5 -->
|
||||
<section class="slide" data-note="Meet the workers, the Minions! They live inside a little black chip. Each minion has ONE job: turn on one part of the house. When Gru gives an order, the right minion does the work.">
|
||||
<h2>Meet the workers: the <span style="color:var(--yellow2)">Minions</span> </h2>
|
||||
<div class="row art">
|
||||
<div><svg class="fig" style="height:150px" viewBox="0 0 60 150"><use href="#minion"/></svg><div class="tagname">ground floor</div></div>
|
||||
<div><svg class="fig" style="height:150px" viewBox="0 0 60 150"><use href="#minion2"/></svg><div class="tagname">upstairs</div></div>
|
||||
<div><svg class="fig" style="height:150px" viewBox="0 0 60 150"><use href="#minion"/></svg><div class="tagname">outside</div></div>
|
||||
<div><svg class="fig" style="height:150px" viewBox="0 0 60 150"><use href="#minion2"/></svg><div class="tagname">fireplace</div></div>
|
||||
</div>
|
||||
<p class="big">Each minion turns on <b>one part</b> of the house.</p>
|
||||
</section>
|
||||
|
||||
<!-- 6 -->
|
||||
<section class="slide" data-note="Here's how it works. Gru shouts an order, like 'turn on the outside lights!' The minion for the outside hears it and flips its switch. And the lights come on! Each minion listens for its own order.">
|
||||
<h2>How it works </h2>
|
||||
<ol class="steps">
|
||||
<li>Gru shouts: <b>“Turn on the outside lights!”</b></li>
|
||||
<li>That minion flips its switch </li>
|
||||
<li>The lights glow! </li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<!-- 7 -->
|
||||
<section class="slide" data-note="Now let me show you for real! (Open the Minions page.) Watch, when I click 'Fireplace,' Gru says it, the minion lights up, and the fireplace turns red and flickers like real fire. Let me try 'All lights' too!">
|
||||
<h2>Let's try it! </h2>
|
||||
<div class="demo">
|
||||
<p class="big" style="margin-top:0">Open the <span class="file">Minions</span> page and click a button!</p>
|
||||
<p style="margin:.4em 0 0">Try <b>“Exterior lights”</b> and <b>“Fireplace”</b> </p>
|
||||
</div>
|
||||
<p class="hint">(Grown-up: open <b>gru-wiring.html</b> for the live demo)</p>
|
||||
</section>
|
||||
|
||||
<!-- 8 -->
|
||||
<section class="slide" data-note="Here are the parts inside my house. The brain is the boss. The minion chip is the helpers. The LEDs are the little lights. Resistors keep the lights safe. A battery gives the power, and wires connect everything.">
|
||||
<h2>What's inside </h2>
|
||||
<ul class="pts">
|
||||
<li> <b>Brain</b>, the boss (Gru)</li>
|
||||
<li> <b>Chip</b>, the minions (helpers)</li>
|
||||
<li> <b>LEDs</b>, the little lights</li>
|
||||
<li> <b>Resistors</b>, keep the lights safe</li>
|
||||
<li> <b>Battery</b>, the power</li>
|
||||
<li> <b>Wires</b>, connect it all</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- 9 -->
|
||||
<section class="slide" data-note="Four cool things I learned. One: electricity flows in a loop, like a race track, it has to go all the way around. Two: an LED is a tiny light that only works one way, so if you put it in backwards it stays dark! Three: a transistor is a tiny switch, and there are BILLIONS inside one chip, each smaller than a hair! Four: a resistor is like a seatbelt for the light, so it doesn't get too much power and burn out.">
|
||||
<h2>4 cool things I learned</h2>
|
||||
<ul class="pts">
|
||||
<li>Electricity flows in a <b>loop</b>, like a race track</li>
|
||||
<li>An <b>LED</b> is a tiny light that only works one way, backwards it stays dark!</li>
|
||||
<li>A <b>transistor</b> is a tiny switch, a chip has <b>billions</b>, each smaller than a hair!</li>
|
||||
<li>A <b>resistor</b> is a seatbelt for the light so it won't burn out</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- 10 -->
|
||||
<section class="slide" data-note="And that's my light-up house! Thank you for watching. Does anyone have any questions?">
|
||||
<span class="kicker"> THE END </span>
|
||||
<h1>Thanks for watching!</h1>
|
||||
<p class="big">Any questions? </p>
|
||||
<svg class="fig" viewBox="0 0 60 150" style="height:200px"><use href="#minion"/></svg>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bar">
|
||||
<button class="ghost" onclick="go(-1)">◀ Back</button>
|
||||
<div class="note" id="note"></div>
|
||||
<div class="count" id="count">1 / 10</div>
|
||||
<button onclick="toggleNote()" class="ghost" title="Show/hide what to say">Notes</button>
|
||||
<button onclick="go(1)">Next ▶</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const slides = [...document.querySelectorAll('.slide')];
|
||||
const note = document.getElementById('note');
|
||||
const count = document.getElementById('count');
|
||||
let i = 0, showNote = true;
|
||||
function render(){
|
||||
slides.forEach((s,n)=>s.classList.toggle('active', n===i));
|
||||
note.textContent = 'Say: ' + slides[i].dataset.note;
|
||||
note.classList.toggle('hidden', !showNote);
|
||||
count.textContent = (i+1) + ' / ' + slides.length;
|
||||
}
|
||||
function go(d){ i = Math.max(0, Math.min(slides.length-1, i+d)); render(); }
|
||||
function toggleNote(){ showNote = !showNote; render(); }
|
||||
document.onkeydown = e => {
|
||||
if(e.key==='ArrowRight'||e.key===' '){ e.preventDefault(); go(1); }
|
||||
else if(e.key==='ArrowLeft'){ go(-1); }
|
||||
else if(e.key.toLowerCase()==='n'){ toggleNote(); }
|
||||
};
|
||||
render();
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue