108 lines
7.6 KiB
HTML
108 lines
7.6 KiB
HTML
<title>Watt a House! Report</title>
|
|
<style>
|
|
:root{ --ink:#23262f; --muted:#6b6f7d; --yellow:#f7d33e; --yellow2:#d9b62f;
|
|
--blue:#2f5b8c; --red:#e5463a; --accent:#f6a723; --rule:#e2dcce; --paper:#fffdf7; }
|
|
*{box-sizing:border-box}
|
|
body{margin:0;background:#efe9db;color:var(--ink);
|
|
font:16px/1.6 "Trebuchet MS","Segoe UI",system-ui,sans-serif;padding:24px;}
|
|
.page{max-width:760px;margin:0 auto;background:var(--paper);border:1px solid var(--rule);
|
|
border-radius:14px;padding:40px 46px;box-shadow:0 6px 24px rgba(0,0,0,.08);}
|
|
header{text-align:center;border-bottom:3px solid var(--yellow);padding-bottom:14px;margin-bottom:18px;}
|
|
h1{font-size:32px;margin:.1em 0;}
|
|
.by{color:var(--muted);font-size:15px;}
|
|
h2{font-size:21px;color:var(--blue);margin:22px 0 6px;}
|
|
p{margin:8px 0;}
|
|
.lead{font-size:17px;}
|
|
.float{float:right;width:150px;margin:0 0 8px 18px;}
|
|
.float svg{width:100%;height:auto;}
|
|
.cap{font-size:12px;color:var(--muted);text-align:center;margin-top:2px;}
|
|
.cards{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0;}
|
|
.cards div{flex:1 1 40%;background:#fff8e8;border:1px solid #f0e2b8;border-radius:10px;padding:8px 12px;font-size:15px;}
|
|
.learned{background:#f2f8f2;border:1px solid #cfe6d3;border-radius:12px;padding:6px 18px;margin-top:8px;}
|
|
.quote{background:#fff4dd;border-left:5px solid var(--accent);padding:10px 16px;border-radius:6px;font-style:italic;margin:12px 0;}
|
|
b.g{color:var(--blue);} b.m{color:var(--yellow2);}
|
|
footer{margin-top:24px;border-top:2px solid var(--rule);padding-top:12px;color:var(--muted);font-size:14px;text-align:center;}
|
|
@media print{ body{background:#fff;padding:0;} .page{box-shadow:none;border:0;border-radius:0;max-width:none;} }
|
|
</style>
|
|
|
|
<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="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>
|
|
</defs></svg>
|
|
|
|
<div class="page">
|
|
<header>
|
|
<h1>Watt a House!</h1>
|
|
<div class="by">By Sebastian Ballance · Third Year, Lower Elementary · Science Project</div>
|
|
</header>
|
|
|
|
<p class="lead">I built a house where the rooms really light up! I can turn on the living room, the bedrooms, the porch outside, and even a fireplace that flickers like real fire. I can turn them on one at a time, or all at once.</p>
|
|
|
|
<h2>The problem</h2>
|
|
<div class="float">
|
|
<svg viewBox="0 0 130 210"><use href="#gru"/></svg>
|
|
<div class="cap">Gru = the brain</div>
|
|
</div>
|
|
<p>My house has lots of tiny lights. Something has to tell them all when to turn on and off. So I used a <b>boss</b> to give the orders and <b>helpers</b> to do the heavy work. To make it easy to understand, I think about them like <b class="g">Gru</b> and the <b class="m">Minions</b> from the movie!</p>
|
|
|
|
<h2>Gru is the boss</h2>
|
|
<p>The brain of my house is a tiny computer called an <b>Arduino</b>. I call it <b class="g">Gru</b>. Gru is smart and gives all the orders, like <i>“turn on the outside lights!”</i> But Gru is too weak to power all the lights by himself. He needs helpers.</p>
|
|
|
|
<h2>The Minions do the work</h2>
|
|
<div class="float">
|
|
<svg viewBox="0 0 60 150" style="width:80px;display:block;margin:0 auto"><use href="#minion"/></svg>
|
|
<div class="cap">A minion = one switch</div>
|
|
</div>
|
|
<p>The helpers live inside a little black chip (its real name is a <b>ULN2803A</b>). I think of them as <b class="m">minions</b>. Each minion has one job: turn on one part of the house. When Gru shouts an order, the right minion flips its switch and lets the electricity through. That makes the lights glow!</p>
|
|
|
|
<div class="quote">Gru shouts the order, the minion flips the switch, the lights turn on!</div>
|
|
|
|
<h2>What's inside</h2>
|
|
<div class="cards">
|
|
<div><b>Brain (Arduino)</b>, the boss</div>
|
|
<div><b>Chip</b>, the minions</div>
|
|
<div><b>LEDs</b>, the little lights</div>
|
|
<div><b>Resistors</b>, keep lights safe</div>
|
|
<div><b>Battery</b>, the power</div>
|
|
<div><b>Wires</b>, connect everything</div>
|
|
</div>
|
|
|
|
<h2>What I would like to teach you</h2>
|
|
<div class="learned">
|
|
<p><b>Electricity flows in a loop</b>, like a race track. It has to go all the way around to work.</p>
|
|
<p>An <b>LED</b> is a tiny light. It only works one way, so if you put it in backwards it stays dark! LED is short for <b>Light Emitting Diode</b>.</p>
|
|
<p>A <b>transistor</b> is a tiny switch. There are <b>billions</b> of them inside one chip, and each one is smaller than a human hair!</p>
|
|
<p>A <b>resistor</b> is like a seatbelt for a light. It stops the light from getting too much power and burning out.</p>
|
|
</div>
|
|
|
|
<h2>The best part</h2>
|
|
<p>My favorite part is the <b>fireplace</b>. It uses a red light that flickers, so it looks like a real fire in the house. When I press the button, Gru tells the fireplace minion to turn it on!</p>
|
|
|
|
<footer>
|
|
Thank you for reading about my light-up house!
|
|
</footer>
|
|
</div>
|