-
Notifications
You must be signed in to change notification settings - Fork 0
/
sunday8verse.html
34 lines (26 loc) · 3.35 KB
/
sunday8verse.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!--I suggest we put the original text here and strip down the prose.
"Original Essay:
It’s 1981 or so. Probably a Sunday afternoon. Mom takes me to the mall. The good one with a Radio Shack and an arcade, not the boring one with jewelry, fashion.
The big department store at the far end. I beeline to the electronics department. The sound of televisions gives it away. Rows of RCAs and Magnavoxes, resplendent in woodgrain cabinets, a buzz that kid hearing can't miss.
It’s not TVs I’m there to see, it’s the TV games, it’s the computers. An Atari 400. The cute lid pops open to reveal the cartridge slot. Sleek, flat keyboard, all browns and oranges. What I want to see and touch.
My internal timer counts down to the moment when I’m told to come on, Kay, we have to go. I try not to let nagging inevitability ruin it.
Maybe the Atari is running MEMO PAD. A blank electronic slate, a blue canvas. My words appear but don’t do anything. I draw a simple picture. As I type, the speaker makes a succinct tick, tick, tick.
Or there might be a BASIC cartridge under that lid. A one-person speed programming challenge now. What little program can I create in the few minutes I have? Tick, tick, tick.
Mom’s calling. Bye, friend."
-->
</head>
<body><style>#d{stroke:#000}#d.p{fill:url(#g)}div{width:80vh}</style><div><svg viewbox="0 0 100 100"><defs><linearGradient id="R"x1="0"y1="0"x2="0"y2="100%"><stop offset="0%"stop-color="hsl(15,100%,50%)"/><stop offset="33%"stop-color="hsl(90,100%,50%)"/><stop offset="66%"stop-color="hsl(240,1,50%)"/><stop offset="100%" stop-color="hsl(360,100%,50%)"/></linearGradient></defs><pattern id="g"x="0"y="0"width="100%"height="300%"><rect x="0"y="0"width="100%"height="150%"fill="url(#R)"><animate attributeName="y"from="0"to="149%"dur="5s"repeatCount="99"/></rect><rect x="0"y="150%"width="100%"height="150%"fill="url(#R)"><animate attributeName="y" from="-150%"to="0"dur="5s"repeatCount="99"/></rect></pattern><g id="d" class="p"></g></svg></div><p id="I"></p><script>s=t=>document.getElementById(t),t=(e,s)=>e.textContent=s,h=(e,h)=>e.innerHTML=e.innerHTML+h,c=(x,y,w,h)=>`<rect x="${x}"y="${y}"width="${w}"height="${h}"/>`,j=(x,y)=>`<path d="m${x},${y}-1.6,-7.6,-1.7,7.6h3.3zm5.9 6.6h-3.9l-1-3.4h-5.2l-1 3.4h-3.9l4.9-15.6c.2-.6.5-1.1.9-1.5.5-.5 1-.7 1.7-.7.7 0 1.3.2 1.9.7.5.4.8 1 1 1.7l4.6 15.4z"/>`,I=s('I'),d=s('d'),D=d.classList,w=700,N=i=>i+1,L=[{f(){D.remove('p')},a:"It's 1981. Sunday Afternoon."},{f(){h(d,c(28.2,6,5.5,47))},a:"Mom drives. Radio Shack looms."},{f(){h(d,`<path d="M3 53C16 53 26 41 26 26V6h-4V19C22 33 14 45 3 46v7Z"/>`)},a:"Beeline to electronics. Rows of RCAs."},{a:"Magnavoxes, resplendent woodgrain."},
{a:"A cute lid pops open. Atari 400."},
{f(){h(d,`<path d="M58,53C46,53,36,41,36,26V6h4V20c0,13,8,25,18,26v7Z"/>`)},a:"Sleek, flat keyboard, all browns and oranges."},
{a:"My time here is short. MEMO PAD. I draw. I type."},
{a:"The speaker makes a succinct tick, tick, tick."},
{a:"A cartridge slot revealed. Want. See. Touch."},
{f(){D.add('p')},a:"A BASIC cartridge. Speed programming challenge now. Tick, tick, tick."},{f(){w=150},a:"Mom’s calling. "},{a:"Bye, friend."}],G=i=>{n=L[i];n.f?n.f():0;t(I,n.a);i>10?N=i=>11:0;setTimeout(G,(n.l?n.l:6)*w,N(i))};G(0)</script>
</body>
</html>