[{"data":1,"prerenderedAt":96},["ShallowReactive",2],{"room:03-homepages":3},{"path":4,"meta":5,"html":84,"css":85,"skinCss":86,"snippets":87},"03-homepages",{"id":6,"slug":4,"title":7,"years":8,"summary":9,"context":10,"traits":14,"tech":39,"thenVsNow":44,"snippets":45,"sources":63,"recreated":79},"03","Personal homepages","1995–2000","Free hosting turned everyone into a webmaster: tiled star backgrounds, Comic Sans, hit counters, guestbooks, webrings and an “under construction” sign that never came down.",{"screens":11,"connection":12,"browsers":13},"800×600 on 15-inch CRTs, 256 colours or “thousands”; 640×480 still common","28.8k and 56k dial-up modems; every GIF counted against a minute-by-minute load","Netscape Navigator 3–4 and Internet Explorer 3–5, each with its own tags",[15,18,21,24,27,30,33,36],{"id":16,"label":17},"tiled-bg","A tiled background image",{"id":19,"label":20},"comic-sans","\u003Cfont face=\"Comic Sans MS\">, \u003Ccenter> and a rainbow bar",{"id":22,"label":23},"under-construction","An animated “under construction” GIF",{"id":25,"label":26},"marquee","Scrolling \u003Cmarquee> and \u003Cblink>ing text",{"id":28,"label":29},"hit-counter","An odometer-style hit counter",{"id":31,"label":32},"guestbook","A guestbook (sign it!)",{"id":34,"label":35},"webring","A webring navigation bar",{"id":37,"label":38},"best-viewed","“Best viewed in … at 800x600” badge, MIDI and a mailbox GIF",[40,41,42,43],"Table layouts with fixed widths and align=\"left\" images","Presentational HTML: \u003Cfont>, \u003Ccenter>, bgcolor, BACKGROUND= and \u003Cbr clear=\"all\">","Animated GIFs, CGI hit counters and Perl guestbook scripts on the free host","\u003Cmarquee>, \u003Cblink>, and \u003Cembed>\u002F\u003Cbgsound> for MIDI files","Guestbooks became comment sections, webrings became social feeds and link-in-bio pages, and hit counters became analytics dashboards nobody else can see.",[46,51,55,58],{"file":47,"lang":48,"caption":49,"region":50},"demo.html","html","Layout with \u003Ctable>, \u003Ccenter> and \u003Cfont>","layout",{"file":52,"lang":53,"caption":54,"region":25},"era.css","css","Recreating \u003Cmarquee> with a CSS animation",{"file":52,"lang":53,"caption":56,"region":57},"The tiled star background","tile",{"file":59,"lang":60,"caption":61,"region":62},"era.client.ts","typescript","A “MIDI” tune with Web Audio, only after a click","midi",[64,67,70,73,76],{"label":65,"url":66},"GeoCities (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeoCities",{"label":68,"url":69},"Webring (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FWebring",{"label":71,"url":72},"The marquee element (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fmarquee",{"label":74,"url":75},"Blink element (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FBlink_element",{"label":77,"url":78},"Web Design Museum","https:\u002F\u002Fwww.webdesignmuseum.org\u002F",[80,81,82,83],"\u003Cmarquee> and \u003Cblink> are recreated with CSS animations (blink at 1 Hz, under the flash threshold).","Animated GIFs (under construction, mailbox) are drawn as animated inline SVG.","Background MIDI is replaced by a Web Audio square-wave tune that only plays after you press Play.","The hit counter and guestbook live in your browser’s localStorage instead of a CGI script.","\u003Cdiv class=\"dk\" data-trait=\"tiled-bg\">\n\u003Cdiv class=\"dk__scroll\">\n\u003Ctable class=\"dk__page\" width=\"760\" border=\"0\" cellpadding=\"8\" cellspacing=\"0\" align=\"center\">\n\u003Ctr>\u003Ctd>\n\u003Ccenter>\n\u003Cp class=\"dk__hood\">\u003Cfont size=\"2\" face=\"Verdana, Arial\">Hosted free by \u003Cb>HomeTown Pages\u003C\u002Fb> · neighborhood: \u003Ca href=\"#guestbook\">SpaceStation\u002FOrbit\u002F4417\u003C\u002Fa>\u003C\u002Ffont>\u003C\u002Fp>\n\u003Ch1 class=\"dk__title\" data-trait=\"comic-sans\">\u003Cfont face=\"Comic Sans MS\" color=\"#FFFF00\">~*~ Welcome 2 Dave's Kool Page!!! ~*~\u003C\u002Ffont>\u003C\u002Fh1>\n\u003Cdiv class=\"dk__marquee\" data-trait=\"marquee\" aria-label=\"Scrolling message\">\u003Cspan>*** Thanx 4 stopping by!!! *** This page is ALWAYS changing so come back soon!!! *** Now with MIDI music!!! *** Sign my guestbook!!! ***\u003C\u002Fspan>\u003C\u002Fdiv>\n\u003C\u002Fcenter>\n\n\u003Ccenter>\n\u003Csvg class=\"dk__uc\" data-trait=\"under-construction\" role=\"img\" aria-label=\"Under construction animated GIF: a worker with a shovel beside a flashing barrier\" viewBox=\"0 0 120 64\" width=\"240\" height=\"128\" shape-rendering=\"crispEdges\">\n \u003Crect width=\"120\" height=\"64\" fill=\"#000\"\u002F>\n \u003Cg class=\"dk__uc-light\">\u003Crect x=\"96\" y=\"6\" width=\"8\" height=\"6\" fill=\"#ff8800\"\u002F>\u003Crect x=\"94\" y=\"4\" width=\"12\" height=\"2\" fill=\"#ffcc00\"\u002F>\u003C\u002Fg>\n \u003Crect x=\"99\" y=\"12\" width=\"2\" height=\"10\" fill=\"#888\"\u002F>\n \u003Cg transform=\"translate(70 22)\">\u003Crect width=\"46\" height=\"12\" fill=\"#ffd200\"\u002F>\n \u003Cpath d=\"M0 0h6l12 12h-6zM12 0h6l12 12h-6zM24 0h6l12 12h-6zM36 0h6l4 4v6z\" fill=\"#000\"\u002F>\n \u003Crect x=\"4\" y=\"12\" width=\"3\" height=\"16\" fill=\"#aaa\"\u002F>\u003Crect x=\"39\" y=\"12\" width=\"3\" height=\"16\" fill=\"#aaa\"\u002F>\u003C\u002Fg>\n \u003Cg class=\"dk__uc-man\">\n \u003Crect x=\"22\" y=\"14\" width=\"10\" height=\"4\" fill=\"#ffd200\"\u002F>\u003Crect x=\"20\" y=\"17\" width=\"14\" height=\"2\" fill=\"#ffd200\"\u002F>\n \u003Crect x=\"23\" y=\"19\" width=\"8\" height=\"7\" fill=\"#f5c08a\"\u002F>\u003Crect x=\"24\" y=\"21\" width=\"2\" height=\"2\" fill=\"#000\"\u002F>\u003Crect x=\"28\" y=\"21\" width=\"2\" height=\"2\" fill=\"#000\"\u002F>\n \u003Crect x=\"21\" y=\"26\" width=\"12\" height=\"14\" fill=\"#ff6600\"\u002F>\u003Crect x=\"21\" y=\"30\" width=\"12\" height=\"2\" fill=\"#ffff66\"\u002F>\n \u003Crect x=\"22\" y=\"40\" width=\"4\" height=\"14\" fill=\"#2848a8\"\u002F>\u003Crect x=\"28\" y=\"40\" width=\"4\" height=\"14\" fill=\"#2848a8\"\u002F>\n \u003Crect x=\"20\" y=\"54\" width=\"6\" height=\"3\" fill=\"#5a3a1a\"\u002F>\u003Crect x=\"28\" y=\"54\" width=\"6\" height=\"3\" fill=\"#5a3a1a\"\u002F>\n \u003Cg class=\"dk__uc-shovel\">\u003Crect x=\"33\" y=\"28\" width=\"4\" height=\"3\" fill=\"#f5c08a\"\u002F>\u003Crect x=\"36\" y=\"22\" width=\"2\" height=\"30\" fill=\"#8a5a2a\"\u002F>\u003Crect x=\"33\" y=\"50\" width=\"8\" height=\"7\" fill=\"#999\"\u002F>\u003C\u002Fg>\n \u003C\u002Fg>\n \u003Crect x=\"0\" y=\"57\" width=\"120\" height=\"7\" fill=\"#7a4a1a\"\u002F>\n \u003Ctext x=\"50\" y=\"10\" fill=\"#fff\" font-family=\"monospace\" font-size=\"6\">UNDER\u003C\u002Ftext>\n \u003Ctext x=\"44\" y=\"18\" fill=\"#fff\" font-family=\"monospace\" font-size=\"6\">CONSTRUCTION\u003C\u002Ftext>\n\u003C\u002Fsvg>\n\u003Cbr>\u003Cfont size=\"2\" face=\"Comic Sans MS\" color=\"#00FFFF\">Sorry, parts of my page are still under construction!!\u003C\u002Ffont>\n\u003C\u002Fcenter>\n\n\u003Chr class=\"dk__rainbow\">\n\n\u003Ctable class=\"dk__cols\" width=\"100%\" border=\"0\" cellpadding=\"6\">\n\u003Ctr>\n\u003Ctd class=\"dk__side\" width=\"200\" valign=\"top\">\n\u003Cfont face=\"Comic Sans MS\" size=\"3\" color=\"#FFFF00\">\u003Cb>~ My Links ~\u003C\u002Fb>\u003C\u002Ffont>\n\u003Cul class=\"dk__nav\">\n\u003Cli>\u003Ca href=\"#about\">About Me\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#cat\">My Cat Pixel\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#links\">Kool Links\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#guestbook\">Guestbook\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#awards\">Awards\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ccenter>\n\u003Cp class=\"dk__counter-wrap\" data-trait=\"hit-counter\">\u003Cfont size=\"2\" face=\"Verdana\">You are visitor #\u003C\u002Ffont>\u003Cbr>\n\u003Cspan class=\"dk__counter\" aria-label=\"Hit counter\">\u003Cspan class=\"dk__digits\">0004417\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Ca class=\"dk__mail\" href=\"#guestbook\">\u003Csvg class=\"dk__mailbox\" viewBox=\"0 0 48 40\" width=\"72\" height=\"60\" shape-rendering=\"crispEdges\" aria-hidden=\"true\">\u003Crect x=\"22\" y=\"22\" width=\"4\" height=\"18\" fill=\"#7a4a1a\"\u002F>\u003Cpath d=\"M6 10h30a8 8 0 0 1 8 8v8H6z\" fill=\"#2050d0\"\u002F>\u003Crect x=\"6\" y=\"18\" width=\"38\" height=\"8\" fill=\"#1840a8\"\u002F>\u003Cg class=\"dk__letter\">\u003Crect x=\"10\" y=\"4\" width=\"16\" height=\"10\" fill=\"#fff\"\u002F>\u003Cpath d=\"M10 4l8 6 8-6\" stroke=\"#c00\" stroke-width=\"1.5\" fill=\"none\"\u002F>\u003C\u002Fg>\u003Cg class=\"dk__flag\">\u003Crect x=\"38\" y=\"4\" width=\"2\" height=\"16\" fill=\"#555\"\u002F>\u003Crect x=\"38\" y=\"4\" width=\"8\" height=\"5\" fill=\"#ff2020\"\u002F>\u003C\u002Fg>\u003C\u002Fsvg>\u003Cbr>\u003Cfont face=\"Comic Sans MS\" size=\"2\">E-mail me!!\u003C\u002Ffont>\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Csvg class=\"dk__badge\" data-trait=\"best-viewed\" role=\"img\" aria-label=\"Best viewed in Netscape Navigator 3.0 at 800 by 600\" viewBox=\"0 0 88 31\" width=\"132\" height=\"46\" shape-rendering=\"crispEdges\">\u003Crect width=\"88\" height=\"31\" fill=\"#003\"\u002F>\u003Crect x=\"1\" y=\"1\" width=\"86\" height=\"29\" fill=\"none\" stroke=\"#99f\"\u002F>\u003Crect x=\"3\" y=\"4\" width=\"22\" height=\"22\" fill=\"#08a\"\u002F>\u003Cpath d=\"M5 22c4-6 9-10 18-12\" stroke=\"#fff\" stroke-width=\"2\" fill=\"none\"\u002F>\u003Ccircle cx=\"20\" cy=\"9\" r=\"2\" fill=\"#ff0\"\u002F>\u003Ctext x=\"28\" y=\"10\" fill=\"#fff\" font-family=\"Verdana, sans-serif\" font-size=\"5.5\">best viewed in\u003C\u002Ftext>\u003Ctext x=\"28\" y=\"18\" fill=\"#ff0\" font-family=\"Verdana, sans-serif\" font-size=\"6\" font-weight=\"700\">Navigator 3.0\u003C\u002Ftext>\u003Ctext x=\"28\" y=\"26\" fill=\"#9cf\" font-family=\"Verdana, sans-serif\" font-size=\"5.5\">at 800x600\u003C\u002Ftext>\u003C\u002Fsvg>\u003C\u002Fp>\n\u003C\u002Fcenter>\n\u003C\u002Ftd>\n\n\u003Ctd valign=\"top\">\n\u003Ch2 id=\"about\">\u003Cfont face=\"Comic Sans MS\" color=\"#FF66FF\">About Me\u003C\u002Ffont>\u003C\u002Fh2>\n\u003Cp>\u003Cfont face=\"Comic Sans MS\" color=\"#FFFFFF\">Hi!!! My name is Dave and I am 15 and I live in Ohio. I like computers, skateboarding, sci-fi shows and my cat (see below). I made this page all by myself in Notepad. It took me \u003Cb>3 weeks\u003C\u002Fb>!!! Right-click and \"View Source\" if u want 2 see how.\u003C\u002Ffont>\u003C\u002Fp>\n\u003Cp>\u003Cfont face=\"Comic Sans MS\" color=\"#FFFFFF\">My \u003Cspan class=\"dk__blink\" data-trait=\"marquee\">NEW\u003C\u002Fspan> computer is a Pentium 133 with 16 megs of RAM and a 28.8 modem. It is SO fast.\u003C\u002Ffont>\u003C\u002Fp>\n\n\u003Ch2 id=\"cat\">\u003Cfont face=\"Comic Sans MS\" color=\"#FF66FF\">My Cat Pixel\u003C\u002Ffont>\u003C\u002Fh2>\n\u003Ctable border=\"3\" cellpadding=\"4\" bgcolor=\"#000033\" align=\"left\" class=\"dk__cat\">\u003Ctr>\u003Ctd>\n\u003Csvg viewBox=\"0 0 32 24\" width=\"128\" height=\"96\" shape-rendering=\"crispEdges\" role=\"img\" aria-label=\"Scanned photo of Pixel the cat, a grey tabby (pixelated)\">\u003Crect width=\"32\" height=\"24\" fill=\"#664\"\u002F>\u003Crect y=\"16\" width=\"32\" height=\"8\" fill=\"#a33\"\u002F>\u003Cpath d=\"M8 8l2-4 2 4h6l2-4 2 4v8H8z\" fill=\"#888\"\u002F>\u003Crect x=\"10\" y=\"10\" width=\"2\" height=\"2\" fill=\"#3c3\"\u002F>\u003Crect x=\"18\" y=\"10\" width=\"2\" height=\"2\" fill=\"#3c3\"\u002F>\u003Crect x=\"14\" y=\"13\" width=\"2\" height=\"1\" fill=\"#e9a\"\u002F>\u003Crect x=\"6\" y=\"16\" width=\"20\" height=\"6\" fill=\"#888\"\u002F>\u003Crect x=\"24\" y=\"12\" width=\"3\" height=\"6\" fill=\"#777\"\u002F>\u003Cpath d=\"M8 18h16M8 20h16\" stroke=\"#666\"\u002F>\u003C\u002Fsvg>\n\u003Cbr>\u003Cfont size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Pixel, scanned at school (41k)\u003C\u002Ffont>\n\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftable>\n\u003Cp>\u003Cfont face=\"Comic Sans MS\" color=\"#FFFFFF\">This is Pixel. She is 4 years old and she likes sitting on the monitor because it is warm. One time she stepped on the keyboard and deleted my whole homework. True story!!\u003C\u002Ffont>\u003C\u002Fp>\n\u003Cbr clear=\"all\">\n\n\u003Ch2 id=\"links\">\u003Cfont face=\"Comic Sans MS\" color=\"#FF66FF\">Kool Links\u003C\u002Ffont>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"#links\">The Ultimate Starship Fan Page\u003C\u002Fa> \u003Cspan class=\"dk__new\">NEW!\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#links\">Skate Tricks Archive\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#links\">Free Animated GIFs Gallery\u003C\u002Fa> (where I got my mailbox)\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#links\">Jenny's Unicorn World\u003C\u002Fa> (my cousin)\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ccenter>\n\u003Cp>\u003Cfont face=\"Comic Sans MS\" color=\"#00FF00\">♫ Now playing: \u003Ci>orbit.mid\u003C\u002Fi> ♫\u003C\u002Ffont>\u003Cbr>\n\u003Cbutton type=\"button\" class=\"dk__midi\" aria-pressed=\"false\">▶ Play MIDI\u003C\u002Fbutton>\n\u003Cfont size=\"1\" face=\"Verdana\" color=\"#CCCCCC\">\u003Cbr>(Music starts only when you click. Unlike in 1997.)\u003C\u002Ffont>\u003C\u002Fp>\n\u003C\u002Fcenter>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n\u003Chr class=\"dk__rainbow\">\n\n\u003Ch2 id=\"guestbook\">\u003Ccenter>\u003Cfont face=\"Comic Sans MS\" color=\"#FFFF00\">~ Sign My Guestbook!!! ~\u003C\u002Ffont>\u003C\u002Fcenter>\u003C\u002Fh2>\n\u003Cdiv class=\"dk__gb\" data-trait=\"guestbook\">\n\u003Cform class=\"dk__gbform\" action=\"#guestbook\">\n\u003Ctable border=\"2\" cellpadding=\"4\" bgcolor=\"#000066\" align=\"center\">\n\u003Ctr>\u003Ctd>\u003Clabel for=\"dk-name\">\u003Cfont face=\"Verdana\" size=\"2\" color=\"#FFFFFF\">Name:\u003C\u002Ffont>\u003C\u002Flabel>\u003C\u002Ftd>\u003Ctd>\u003Cinput id=\"dk-name\" name=\"name\" size=\"24\" maxlength=\"30\" required>\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>\u003Clabel for=\"dk-from\">\u003Cfont face=\"Verdana\" size=\"2\" color=\"#FFFFFF\">Where r u from?\u003C\u002Ffont>\u003C\u002Flabel>\u003C\u002Ftd>\u003Ctd>\u003Cinput id=\"dk-from\" name=\"from\" size=\"24\" maxlength=\"30\">\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd valign=\"top\">\u003Clabel for=\"dk-msg\">\u003Cfont face=\"Verdana\" size=\"2\" color=\"#FFFFFF\">Comments:\u003C\u002Ffont>\u003C\u002Flabel>\u003C\u002Ftd>\u003Ctd>\u003Ctextarea id=\"dk-msg\" name=\"msg\" rows=\"3\" cols=\"28\" maxlength=\"200\" required>\u003C\u002Ftextarea>\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd colspan=\"2\" align=\"center\">\u003Cinput type=\"submit\" value=\"Sign it!\"> \u003Cinput type=\"reset\" value=\"Clear\">\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftable>\n\u003C\u002Fform>\n\u003Col class=\"dk__entries\" reversed>\n\u003Cli>\u003Cb>Jenny\u003C\u002Fb> (Kansas): \u003Ci>kool page dave!!! ur cat is SO cute. visit my unicorn page!!\u003C\u002Fi> \u003Csmall>Mar 3 1998\u003C\u002Fsmall>\u003C\u002Fli>\n\u003Cli>\u003Cb>SkaterX\u003C\u002Fb> (Toronto): \u003Ci>nice tricks section. u should add more. also ur MIDI is stuck in my head lol\u003C\u002Fi> \u003Csmall>Feb 21 1998\u003C\u002Fsmall>\u003C\u002Fli>\n\u003Cli>\u003Cb>Mr. Hendricks\u003C\u002Fb> (Room 12): \u003Ci>Very impressive, Dave. Now please finish your science project.\u003C\u002Fi> \u003Csmall>Feb 9 1998\u003C\u002Fsmall>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"dk__rainbow\">\n\n\u003Ccenter id=\"awards\">\n\u003Cp>\u003Cfont face=\"Comic Sans MS\" color=\"#FFFFFF\">Awards I have won:\u003C\u002Ffont>\u003Cbr>\n\u003Cspan class=\"dk__award\" role=\"img\" aria-label=\"Award: Kool Site of the Day\">★ Kool Site of the Day ★\u003C\u002Fspan>\n\u003Cspan class=\"dk__award\" role=\"img\" aria-label=\"Award: Top 5% of Orbit\">★ Top 5% of Orbit ★\u003C\u002Fspan>\u003C\u002Fp>\n\n\u003Ctable class=\"dk__ring\" data-trait=\"webring\" border=\"2\" cellpadding=\"4\" bgcolor=\"#000000\">\n\u003Ctr>\u003Ctd align=\"center\">\u003Cfont face=\"Verdana\" size=\"2\" color=\"#FFFFFF\">This \u003Cb>Kool Kids Webring\u003C\u002Fb> site is owned by \u003Ca href=\"#guestbook\">Dave\u003C\u002Fa>.\u003C\u002Ffont>\u003Cbr>\n\u003Cfont face=\"Verdana\" size=\"2\">[\u003Ca href=\"#ring\" data-ring=\"prev\">Prev\u003C\u002Fa>] [\u003Ca href=\"#ring\" data-ring=\"random\">Random\u003C\u002Fa>] [\u003Ca href=\"#ring\" data-ring=\"next\">Next\u003C\u002Fa>] [\u003Ca href=\"#ring\" data-ring=\"list\">List Sites\u003C\u002Fa>] [\u003Ca href=\"#guestbook\">Join\u003C\u002Fa>]\u003C\u002Ffont>\u003Cbr>\n\u003Coutput id=\"ring\" class=\"dk__ringout\">\u003Cfont face=\"Verdana\" size=\"1\" color=\"#AAAAAA\">Site 7 of 212\u003C\u002Ffont>\u003C\u002Foutput>\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n\u003Cp>\u003Cfont face=\"Verdana\" size=\"1\" color=\"#CCCCCC\">© 1998 Dave. Made with Notepad. This page is a member of HomeTown Pages.\u003Cbr>Last updated: 03\u002F04\u002F98\u003C\u002Ffont>\u003C\u002Fp>\n\u003C\u002Fcenter>\n\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftable>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","@layer era, shell, skin;\n@layer era {\n\u002F* Era 03: a free-hosted personal homepage, 1998. Tables, \u003Cfont>, tiled backgrounds and lots of motion. *\u002F\n[data-era=\"03\"] {\n \u002F* A 40px star-field \"background.gif\", tiled the way BACKGROUND= tiled it. *\u002F\n background-color: #000022;\n background-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='40' height='40' shape-rendering='crispEdges'%3E%3Crect width='40' height='40' fill='%23000022'\u002F%3E%3Crect x='4' y='6' width='1' height='1' fill='%23fff'\u002F%3E%3Crect x='22' y='3' width='2' height='2' fill='%23ffff99'\u002F%3E%3Crect x='31' y='19' width='1' height='1' fill='%23fff'\u002F%3E%3Crect x='12' y='27' width='1' height='1' fill='%2399ccff'\u002F%3E%3Crect x='35' y='34' width='1' height='1' fill='%23fff'\u002F%3E%3Crect x='18' y='16' width='1' height='3' fill='%23ff99ff'\u002F%3E%3Crect x='17' y='17' width='3' height='1' fill='%23ff99ff'\u002F%3E%3Crect x='6' y='36' width='1' height='1' fill='%23ffff99'\u002F%3E%3C\u002Fsvg%3E\");\n background-repeat: repeat;\n color: #fff;\n font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', cursive;\n\n .dk {\n padding: 12px 0 24px;\n }\n \u002F* The page is 760px wide, as designed for 800x600. Narrow screens scroll it sideways. *\u002F\n .dk__scroll {\n overflow-x: auto;\n max-width: 100%;\n }\n .dk__page {\n background: rgb(0 0 34 \u002F 0.55);\n }\n \u002F* \u003Cfont face> only names one font; with no Comic Sans installed, the browser fell back to Times. *\u002F\n font[face='Comic Sans MS'] {\n font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', sans-serif;\n }\n a {\n color: #66ccff;\n }\n a:visited {\n color: #ff99ff;\n }\n a:hover {\n color: #ffff00;\n }\n .dk__hood {\n margin: 0 0 4px;\n color: #ccc;\n }\n .dk__title {\n font-size: 34px;\n margin: 8px 0;\n text-shadow: 3px 3px 0 #cc00cc;\n }\n h2 {\n margin: 18px 0 8px;\n font-size: 22px;\n }\n\n \u002F* \u003Cmarquee> recreated: one span sliding through an overflow-hidden box. *\u002F\n .dk__marquee {\n contain: inline-size;\n overflow: hidden;\n white-space: nowrap;\n background: #000080;\n border: 2px ridge #c0c0c0;\n color: #00ff00;\n font: 700 16px\u002F1.6 'Courier New', Courier, monospace;\n }\n .dk__marquee span {\n display: inline-block;\n padding-left: 100%;\n animation: e03-marquee 22s linear -7s infinite;\n }\n @keyframes e03-marquee {\n to { transform: translateX(-100%); }\n }\n\n \u002F* \u003Cblink> recreated: on\u002Foff at 1 Hz, well under 3 flashes per second. *\u002F\n .dk__blink {\n color: #ff3333;\n font-weight: 700;\n animation: e03-blink 1s steps(1) infinite;\n }\n @keyframes e03-blink {\n 50% { visibility: hidden; }\n }\n .dk__new {\n color: #ffff00;\n font: 700 11px Verdana, sans-serif;\n background: #ff0000;\n padding: 0 3px;\n animation: e03-blink 1s steps(1) infinite;\n }\n\n .dk__uc {\n display: block;\n margin: 12px auto 4px;\n border: 2px outset #c0c0c0;\n image-rendering: pixelated;\n }\n .dk__uc-light {\n animation: e03-blink 0.8s steps(1) infinite;\n }\n .dk__uc-shovel {\n transform-origin: 37px 28px;\n animation: e03-dig 0.8s steps(2) infinite;\n }\n @keyframes e03-dig {\n 50% { transform: rotate(-18deg); }\n }\n\n .dk__rainbow {\n height: 6px;\n border: 0;\n margin: 16px 0;\n background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff);\n }\n\n .dk__side {\n background: rgb(0 0 102 \u002F 0.6);\n border: 2px ridge #6666cc;\n }\n .dk__nav {\n list-style: none;\n padding: 0;\n margin: 8px 0 16px;\n }\n .dk__nav li::before {\n content: '\\2605 ';\n color: #ffff00;\n }\n .dk__nav li {\n margin: 4px 0;\n font-size: 15px;\n }\n\n .dk__counter {\n display: inline-block;\n background: #000;\n border: 2px inset #888;\n padding: 2px;\n }\n .dk__digits {\n font: 700 18px\u002F1 'Courier New', Courier, monospace;\n letter-spacing: 0;\n color: #fff;\n }\n .dk__digit {\n display: inline-block;\n width: 1.1ch;\n padding: 2px 2px;\n margin: 0 1px;\n background: linear-gradient(#333, #000 50%, #222 50%, #111);\n color: #fff;\n text-align: center;\n }\n .dk__digit.is-rolling {\n animation: e03-roll 0.35s ease-out;\n }\n @keyframes e03-roll {\n from { transform: translateY(-60%); opacity: 0; }\n }\n\n .dk__mail {\n text-decoration: none;\n color: #fff;\n display: inline-block;\n }\n .dk__letter {\n animation: e03-letter 2s steps(4) infinite;\n }\n @keyframes e03-letter {\n 0% { transform: translateY(0); }\n 50% { transform: translateY(8px); }\n 100% { transform: translateY(8px); opacity: 0; }\n }\n .dk__flag {\n transform-origin: 39px 20px;\n animation: e03-flag 2s steps(1) infinite;\n }\n @keyframes e03-flag {\n 50% { transform: rotate(-80deg); }\n }\n\n .dk__cat {\n margin: 0 12px 8px 0;\n }\n .dk__midi {\n font: 700 14px 'Comic Sans MS', cursive;\n background: #c0c0c0;\n border: 3px outset #fff;\n padding: 4px 14px;\n margin-top: 6px;\n cursor: pointer;\n }\n .dk__midi[aria-pressed='true'] {\n border-style: inset;\n background: #00cc00;\n }\n\n .dk__gbform input,\n .dk__gbform textarea {\n font: 13px 'Courier New', Courier, monospace;\n }\n .dk__entries {\n max-width: 560px;\n margin: 16px auto;\n padding: 0;\n list-style: none;\n }\n .dk__entries li {\n border: 1px dashed #6666cc;\n background: rgb(0 0 80 \u002F 0.6);\n margin: 8px 0;\n padding: 8px;\n font-size: 14px;\n }\n .dk__entries small {\n display: block;\n color: #aaa;\n font: 11px Verdana, sans-serif;\n }\n\n .dk__award {\n display: inline-block;\n margin: 8px 4px;\n padding: 6px 10px;\n font: 700 12px Verdana, sans-serif;\n color: #330000;\n background: linear-gradient(#fff3a0, #e0a800);\n border: 2px outset #ffd700;\n }\n .dk__ring {\n margin: 12px auto;\n }\n .dk__ring td {\n background: #000;\n border: 2px ridge #cc00cc;\n }\n .dk__ringout {\n display: block;\n margin-top: 4px;\n }\n\n :focus-visible {\n outline: 2px dashed #ffff00;\n outline-offset: 2px;\n }\n}\n\n}","@layer era, shell, skin;\n@layer skin {\n\u002F* Era 03 time bar skin: a starfield webring strip. *\u002F\nhtml[data-era-page=\"03\"] .timebar {\n --tb-bg: #000033;\n --tb-fg: #ffffff;\n --tb-muted: #ccccff;\n --tb-accent: #ffff00;\n --tb-accent-fg: #000033;\n --tb-notch: #cc00cc;\n --tb-btn-bg: #000066;\n --tb-btn-border: 2px ridge #cc66ff;\n --tb-btn-radius: 0;\n --tb-font: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', cursive;\n --tb-shadow: 0 -2px 0 #ff00ff;\n background-image:\n radial-gradient(1px 1px at 12px 14px, #fff 50%, transparent 51%),\n radial-gradient(1px 1px at 47px 38px, #ffff99 50%, transparent 51%),\n radial-gradient(1.5px 1.5px at 83px 22px, #ff99ff 50%, transparent 51%),\n radial-gradient(1px 1px at 120px 48px, #99ccff 50%, transparent 51%);\n background-size: 140px 60px;\n border-top: 3px solid transparent;\n border-image: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff) 1;\n}\nhtml[data-era-page=\"03\"] .timebar__years {\n color: #ffff00;\n}\nhtml[data-era-page=\"03\"] .timebar__notch {\n background: #000033;\n}\nhtml[data-era-page=\"03\"] .timebar__notch[aria-current='page'] {\n background: var(--tb-accent);\n}\n\n}",[88,90,92,94],{"caption":49,"file":47,"html":89},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">table\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"dk__page\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"760\"\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\"> border\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> cellpadding\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"8\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> cellspacing\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\"> align\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"center\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">tr\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">td\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">center\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"dk__hood\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">font\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> size\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"2\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> face\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Verdana, Arial\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Hosted free by <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>HomeTown Pages<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">&middot;\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> neighborhood: <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#guestbook\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>SpaceStation\u002FOrbit\u002F4417<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">font\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h1\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"dk__title\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"comic-sans\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">font\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> face\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Comic Sans MS\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#FFFF00\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>~*~ Welcome 2 Dave's Kool Page!!! ~*~<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">font\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h1\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"dk__marquee\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"marquee\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Scrolling message\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>*** Thanx 4 stopping by!!! *** This page is ALWAYS changing so come back soon!!! *** Now with MIDI music!!! *** Sign my guestbook!!! ***<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">center\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":54,"file":52,"html":91},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">\u002F* <marquee> recreated: one span sliding through an overflow-hidden box. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.dk__marquee\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\"> contain\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: inline-size;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\"> overflow\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">hidden\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\"> white-space\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">nowrap\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\"> background\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#000080\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\"> border\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">2\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> ridge\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> #c0c0c0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\"> color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#00ff00\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\"> font\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">700\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 16\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">1.6\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> 'Courier New'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">Courier\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">monospace\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.dk__marquee\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\"> display\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">inline-block\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\"> padding-left\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">100\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\"> animation\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: e03-marquee \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">22\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">s\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> linear\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> -7\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">s\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> infinite\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">@keyframes\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\"> e03-marquee\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\"> to\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">transform\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">translateX\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">-100\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">); }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":56,"file":52,"html":93},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">\u002F* A 40px star-field \"background.gif\", tiled the way BACKGROUND= tiled it. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8DDB8C\">background-color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">#000022\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8DDB8C\">background-image\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: url(\"\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">data\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">:image\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">+\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">xml,%3Csvg xmlns='http:\u002F\u002Fwww\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.w3\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.org\u002F2000\u002Fsvg' width='40' height='40' \u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">shape-rendering\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">='crispEdges'%3E%3Crect width='40' height='40' fill='%23000022'\u002F%3E%3Crect x='4' y='6' width='1' height='1' fill='%23fff'\u002F%3E%3Crect x='22' y='3' width='2' height='2' fill='%23ffff99'\u002F%3E%3Crect x='31' y='19' width='1' height='1' fill='%23fff'\u002F%3E%3Crect x='12' y='27' width='1' height='1' fill='%2399ccff'\u002F%3E%3Crect x='35' y='34' width='1' height='1' fill='%23fff'\u002F%3E%3Crect x='18' y='16' width='1' height='3' fill='%23ff99ff'\u002F%3E%3Crect x='17' y='17' width='3' height='1' fill='%23ff99ff'\u002F%3E%3Crect x='6' y='36' width='1' height='1' fill='%23ffff99'\u002F%3E%3C\u002Fsvg%3E\");\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8DDB8C\">background-repeat\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: repeat;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":61,"file":59,"html":95},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">\u002F** A square-wave melody and bass, like a General MIDI file on a cheap sound card. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> btn\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> root.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">querySelector\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">HTMLButtonElement\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'.dk__midi'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">let\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ctx\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\"> AudioContext\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> |\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> null\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> null\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">let\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> timer \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> melody\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> [\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">72\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">76\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">79\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">76\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">81\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">79\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">76\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">72\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">74\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">77\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">81\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">77\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">79\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">79\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">72\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">76\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">79\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">84\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">83\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">79\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">76\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">74\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">72\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">74\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">76\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">72\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">67\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">72\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> bass\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> [\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">48\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">48\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">45\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">45\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">41\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">41\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">43\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">43\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">const\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> hz\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">n\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> number\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 440\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> *\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 2\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> **\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ((n \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">-\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 69\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 12\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">function\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> note\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">freq\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> number\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">at\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> number\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">len\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> number\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">type\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\"> OscillatorType\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">vol\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> number\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\"> const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> o\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ctx\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">createOscillator\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\"> const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> g\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ctx\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">createGain\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"> o.type \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> type\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"> o.frequency.value \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> freq\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"> g.gain.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">setValueAtTime\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(vol, at)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"> g.gain.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">exponentialRampToValueAtTime\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.001\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, at \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">+\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> len)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"> o.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">connect\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(g).\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">connect\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(ctx\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.destination)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"> o.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">start\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(at)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"> o.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">stop\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(at \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">+\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> len)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">function\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> play\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"> ctx \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">??=\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> new\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> AudioContext\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\"> void\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ctx.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">resume\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\"> const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> step\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0.16\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\"> let\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> t \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ctx.currentTime \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">+\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0.05\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\"> let\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> i \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\"> const\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> schedule\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> () \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\"> while\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (t \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"><\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ctx\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.currentTime \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">+\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0.5\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\"> const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> m\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> melody[i \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> melody.\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">length\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\"> if\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (m) \u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">note\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">hz\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(m), t, step \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">*\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0.9\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'square'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.05\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\"> if\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (i \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 4\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> ===\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">note\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">hz\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(bass[(i \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 4\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> bass.\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">length\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">]), t, step \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">*\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 3.5\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'triangle'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.12\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"> t \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">+=\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> step\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"> i\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">++\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"> }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"> }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#DCBDFB\"> schedule\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"> timer \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> window.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">setInterval\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(schedule, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">100\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">function\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> stop\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#DCBDFB\"> clearInterval\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(timer)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\"> void\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ctx?.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">suspend\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1791223398956]