Run Detail

completedparticle-1

Unscored

Every model's answer from this round

Recorded for these videos

47:51

Ranking major U.S. Open-Weights Models. (Where does Ripple 65B fit in?)

Nov 6, 2026 · YouTube

38:58

Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency

Oct 28, 2026 · YouTube

29:55

Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.

Oct 26, 2026 · YouTube

22:47

Mistral Large 4 Is Cheap. But Is It Good Enough to Compete?

Oct 6, 2026 · YouTube

16:45

DeepSeek V4.1 Flash Is Shockingly Good for the Price

Sep 10, 2026 · YouTube

17:31

Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)

Sep 2, 2026 · YouTube

Provider

openrouter

Challenge Version

v1.0

Turns

Duration

212.3s

Total Tokens

76,015

Input Tokens

995

Output Tokens

75,020

Reasoning Tokens

64,398

Reasoning Effort

default

Est. Cost

$0.0753

Started

10/28/2026, 8:47:11 PM

OR Provider

Particle AI

Finish Reason

stop

Generation ID

gen-1793220429-g0XphiHguJDrTtm6Qd0A

Turns (1)

Turn #1

995 in75,020 out64,398 reasoning76,015 total212.3s

user

It is March 1998. You build websites. A client wants a site for their community radio station, Radio Saltmarsh, 102.3 FM, broadcasting from a caravan on the east coast.

Build it the way you would have built it that month, for the browsers people actually had.

Target browsers

Internet Explorer 4 and Netscape Navigator 4. It must render acceptably in both. Assume 800 × 600, thousands of colors, and a 33.6k modem, so keep the weight down.

What the site needs

A masthead with the station name and frequency.
The schedule — a week of programs with presenters and times.
"Meet the presenters" — four of them, with a line each.
A guestbook form. It does not have to submit anywhere; it has to look like it does.
A hit counter.
A webring strip at the bottom — previous / random / next.
At least one piece of movement on the page, done the way it would have been done then.
An "under construction" notice, because there is always one.

Write the copy yourself. Give the presenters names and the programs titles. Make it feel like a real small station with real people in it — the charm here is in the specifics, not in the beige.

Period constraints — these are the point

Banned, because they did not exist or did not work:

flex, grid, position:sticky, CSS variables, media queries
border-radius, box-shadow, opacity, rgba(), transform, transition, @keyframes
const, let, arrow functions, class, template literals, Array.forEach, JSON
querySelector, addEventListener, getElementById (yes — IE4 has it, NS4 does not; you branch)
Anything from HTML5: <section>, <header>, <nav>, <video>, <canvas>, data- attributes

Expected, because it is 1998:

Tables for layout. Nested if you need them.
<font>, bgcolor, border=0, cellpadding, cellspacing, <center>
Attribute-driven presentation generally, and a <style> block for the bits CSS1 could actually do
document.all for IE and document.layers for Netscape, branched properly
 comment wrappers around script contents

Technical constraints (mine, not 1998's)

One file. No external stylesheet, script or image — but you may use data: URIs for graphics, and you should, because the period look needs them. Draw them yourself; no placeholder services.
Return the file as exactly one fenced html block.

Answer in exactly these sections

The build

One short paragraph before the file: your layout structure and how you handled the IE/Netscape split.

The file

The single fenced html block.

Compatibility notes

The honest part. Go through your own file and tell me:

Which techniques would genuinely have worked in both IE4 and NS4 in March 1998.
Which ones would have worked in only one of them, and what the other would have shown instead.
Anything you used that is anachronistic — that looks period but shipped later, or that only works because I am opening this in a modern browser.

Be specific and name dates where you know them. If you used a technique and are not sure it existed yet, say that rather than guessing confidently.

What I'm actually testing

Anyone can make a page that looks like 1998 — Comic Sans, a starry background, a marquee. That is a costume.

I want to know whether you know the constraints from the inside: what NS4 did to a nested table, why you cannot put a stylesheet on a form control, what the <spacer> tag was and whose it was, why everyone used a single-pixel transparent GIF. A page that looks a bit plain but is honestly built to the period beats a gorgeous pastiche that uses flexbox under the hood — and I will read the source.

assistant

The build

A fixed 720px centred table stack — masthead, nav bar, ticker, then a two-column body (478px content / 240px sidebar) split by a 2px coloured gutter cell, with the guestbook and footer below. Everything is nested tables with bgcolor and cellpadding; the only CSS is a <style> block setting font-family on body and a .small class, because NS4 would honour that much and ignore the rest. The IE/Netscape split is handled in two places: the ticker is written by document.write at parse time — document.layers gets a static <font> line, everything else gets a <marquee> — and the "ON AIR" lamp blinks by swapping document.images['lamp'].src between two 1×1 GIFs, which is the one animation technique that genuinely worked in both. Empty table cells carry a 1×1 transparent GIF so NS4 doesn't collapse them.

The file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Radio Saltmarsh 102.3 FM - from the caravan on the east coast</title>
<meta name="description" content="Community radio for the saltmarsh. 102.3 FM.">
<meta name="keywords" content="radio, saltmarsh, community radio, 102.3 fm, folk, shanties">
<style type="text/css">
<!--
body { font-family: Verdana, Arial, Helvetica, sans-serif; }
.small { font-size: 10px; }
-->
</style>
<script language="JavaScript">
<!--
var lampState = 0;
var lampRed = "data:image/gif;base64,R0lGODlhAQABAIAAAMwAAAAAACwAAAAAAQABAAACAkQBADs=";
var lampOff = "data:image/gif;base64,R0lGODlhAQABAIAAADMzMwAAACwAAAAAAQABAAACAkQBADs=";

function blinkLamp() {
  if (document.images && document.images['lamp']) {
    document.images['lamp'].src = (lampState == 0) ? lampOff : lampRed;
    lampState = 1 - lampState;
  }
  setTimeout("blinkLamp()", 900);
}
// -->
</script>
</head>

<body bgcolor="#001133" text="#000033" link="#006699" vlink="#663366" alink="#CC3300"
      background="data:image/gif;base64,R0lGODlhCAAIAIAAAAAMwAARCwAAAAACAAIAAACJTAQDAQCIQCARCAYCARCAQCIQDAQDAQCIQCARCAYCARCAQCIQKAAOw=="
      onload="blinkLamp()">

<a name="top"></a>
<center>

<!-- ================= MASTHEAD ================= -->
<table width="720" border="0" cellpadding="0" cellspacing="0" bgcolor="#003366">
<tr>
  <td width="540" valign="middle" bgcolor="#003366">
    <table border="0" cellpadding="10" cellspacing="0">
    <tr><td>
      <font face="Arial, Helvetica, sans-serif" size="6" color="#FFCC33"><b>RADIO SALTMARSH</b></font><br>
      <font face="Arial, Helvetica, sans-serif" size="4" color="#FFFFFF"><b>102.3 FM</b></font>
      <font face="Arial, Helvetica, sans-serif" size="2" color="#99CCCC">&nbsp;&nbsp;from the caravan on the east coast</font>
    </td></tr>
    </table>
  </td>
  <td width="180" align="center" valign="middle" bgcolor="#002244">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAMwAAAAAACwAAAAAAQABAAACAkQBADs=" width="14" height="14" name="lamp" alt="ON AIR" border="0"><br>
    <font face="Arial, Helvetica, sans-serif" size="1" color="#FF6666"><b>ON AIR</b></font>
  </td>
</tr>
</table>

<!-- ================= NAV ================= -->
<table width="720" border="0" cellpadding="5" cellspacing="0" bgcolor="#336699">
<tr>
  <td align="center">
    <font face="Arial, Helvetica, sans-serif" size="2">
    <a href="#top"><font color="#FFFFFF"><b>HOME</b></font></a> &nbsp;|&nbsp;
    <a href="#schedule"><font color="#FFFFFF"><b>SCHEDULE</b></font></a> &nbsp;|&nbsp;
    <a href="#presenters"><font color="#FFFFFF"><b>PRESENTERS</b></font></a> &nbsp;|&nbsp;
    <a href="#guestbook"><font color="#FFFFFF"><b>GUESTBOOK</b></font></a> &nbsp;|&nbsp;
    <a href="#contact"><font color="#FFFFFF"><b>CONTACT</b></font></a>
    </font>
  </td>
</tr>
</table>

<!-- ================= TICKER ================= -->
<table width="720" border="0" cellpadding="3" cellspacing="0" bgcolor="#002244">
<tr>
  <td bgcolor="#002244">
<script language="JavaScript">
<!--
var tickText = "*** RADIO SALTMARSH 102.3 FM *** Requests 01842 555 102 *** The Tide Line returns Monday at nine *** Caravan roof repairs: still ongoing, please excuse the buckets *** Dee's Deck wants your dedications ***";
if (document.layers) {
  document.write('<font face="Arial, Helvetica, sans-serif" size="1" color="#FFCC33">' + tickText + '</font>');
} else {
  document.write('<marquee scrollamount="3" scrolldelay="50" width="700" behavior="scroll" direction="left"><font face="Arial, Helvetica, sans-serif" size="1" color="#FFCC33">' + tickText + '</font></marquee>');
}
// -->
</script>
  </td>
</tr>
</table>

<!-- ================= BODY ================= -->
<table width="720" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFDF0">
<tr>

<!-- ---------- LEFT COLUMN ---------- -->
<td width="478" valign="top" bgcolor="#FFFDF0">

  <!-- WELCOME -->
  <table width="100%" border="0" cellpadding="10" cellspacing="0">
  <tr><td>
    <font face="Arial, Helvetica, sans-serif" size="3" color="#003366"><b>Welcome to the marsh</b></font><br>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="6" alt="" border="0"><br>
    <font size="2">
    Hello, and welcome to the Radio Saltmarsh website.<br><br>
    We are a community station broadcasting on <b>102.3 FM</b> from a caravan at the back of the
    Saltmarsh Sailing Club car park. We went on air in October 1996 and we are still here, which
    surprises everybody, including us.<br><br>
    We play folk, sea shanties, easy listening, the shipping forecast, and whatever Dee can find
    in the shed. Requests on <b>01842 555 102</b>. We read out every single one, even the ones
    we can't play.
    </font>
  </td></tr>
  </table>

  <!-- SCHEDULE -->
  <a name="schedule"></a>
  <table width="100%" border="0" cellpadding="10" cellspacing="0">
  <tr><td>
    <font face="Arial, Helvetica, sans-serif" size="3" color="#003366"><b>The week on 102.3</b></font><br>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="6" alt="" border="0"><br>
    <font size="1" color="#336666">Programmes for the week beginning Monday 2nd March. Times are local.
    The schedule is subject to change, usually because of the tide.</font><br><br>

    <font face="Arial, Helvetica, sans-serif" size="2" color="#006666"><b>MONDAY &ndash; FRIDAY</b></font><br>
    <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#003366">
    <tr bgcolor="#003366">
      <td width="86"><font face="Arial" size="1" color="#FFFFFF"><b>TIME</b></font></td>
      <td><font face="Arial" size="1" color="#FFFFFF"><b>PROGRAMME</b></font></td>
      <td width="112"><font face="Arial" size="1" color="#FFFFFF"><b>PRESENTER</b></font></td>
    </tr>
    <tr bgcolor="#FFFDF0">
      <td><font size="1">06:00&ndash;09:00</font></td>
      <td><font size="1"><b>Saltmarsh Breakfast</b></font></td>
      <td><font size="1">Maggie Thwaite</font></td>
    </tr>
    <tr bgcolor="#F2F6F2">
      <td><font size="1">09:00&ndash;12:00</font></td>
      <td><font size="1"><b>The Tide Line</b></font></td>
      <td><font size="1">Colin Petrie</font></td>
    </tr>
    <tr bgcolor="#FFFDF0">
      <td><font size="1">12:00&ndash;14:00</font></td>
      <td><font size="1"><b>The Lunch Boat</b></font></td>
      <td><font size="1"><i>automation</i></font></td>
    </tr>
    <tr bgcolor="#F2F6F2">
      <td><font size="1">14:00&ndash;16:00</font></td>
      <td><font size="1"><b>Harbour Lights</b></font></td>
      <td><font size="1">Maggie Thwaite</font></td>
    </tr>
    <tr bgcolor="#FFFDF0">
      <td><font size="1">16:00&ndash;19:00</font></td>
      <td><font size="1"><b>Dee's Deck</b></font></td>
      <td><font size="1">Dee Ferris</font></td>
    </tr>
    <tr bgcolor="#F2F6F2">
      <td><font size="1">19:00&ndash;22:00</font></td>
      <td><font size="1"><b>The Long Shore</b></font></td>
      <td><font size="1">Colin Petrie</font></td>
    </tr>
    <tr bgcolor="#FFFDF0">
      <td><font size="1">22:00&ndash;06:00</font></td>
      <td><font size="1"><b>Night Ferry</b></font></td>
      <td><font size="1"><i>automation</i></font></td>
    </tr>
    </table>

    <br>
    <font face="Arial, Helvetica, sans-serif" size="2" color="#006666"><b>SATURDAY</b></font><br>
    <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#003366">
    <tr bgcolor="#FFFDF0">
      <td width="86"><font size="1">07:00&ndash;10:00</font></td>
      <td><font size="1"><b>The Saturday Shed</b></font></td>
      <td width="112"><font size="1">Dee Ferris</font></td>
    </tr>
    <tr bgcolor="#F2F6F2">
      <td><font size="1">10:00&ndash;13:00</font></td>
      <td><font size="1"><b>Market Day Requests</b></font></td>
      <td><font size="1">Maggie Thwaite</font></td>
    </tr>
    <tr bgcolor="#FFFDF0">
      <td><font size="1">13:00&ndash;16:00</font></td>
      <td><font size="1"><b>Saltmarsh Sports Desk</b></font></td>
      <td><font size="1">Colin Petrie</font></td>
    </tr>
    <tr bgcolor="#F2F6F2">
      <td><font size="1">16:00&ndash;19:00</font></td>
      <td><font size="1"><b>The Tide Line</b> (weekend)</font></td>
      <td><font size="1">Colin Petrie</font></td>
    </tr>
    <tr bgcolor="#FFFDF0">
      <td><font size="1">19:00&ndash;22:00</font></td>
      <td><font size="1"><b>Folk at the Ferry</b></font></td>
      <td><font size="1">Dee Ferris</font></td>
    </tr>
    </table>

    <br>
    <font face="Arial, Helvetica, sans-serif" size="2" color="#006666"><b>SUNDAY</b></font><br>
    <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#003366">
    <tr bgcolor="#FFFDF0">
      <td width="86"><font size="1">08:00&ndash;10:00</font></td>
      <td><font size="1"><b>Songs of the Saltings</b></font></td>
      <td width="112"><font size="1">Rev. Alan Pike</font></td>
    </tr>
    <tr bgcolor="#F2F6F2">
      <td><font size="1">10:00&ndash;13:00</font></td>
      <td><font size="1"><b>Sunday Best</b></font></td>
      <td><font size="1">Maggie Thwaite</font></td>
    </tr>
    <tr bgcolor="#FFFDF0">
      <td><font size="1">13:00&ndash;16:00</font></td>
      <td><font size="1"><b>The Long Shore</b></font></td>
      <td><font size="1">Colin Petrie</font></td>
    </tr>
    <tr bgcolor="#F2F6F2">
      <td><font size="1">16:00&ndash;19:00</font></td>
      <td><font size="1"><b>Dee's Deck</b> (Sunday)</font></td>
      <td><font size="1">Dee Ferris</font></td>
    </tr>
    <tr bgcolor="#FFFDF0">
      <td><font size="1">19:00&ndash;22:00</font></td>
      <td><font size="1"><b>Closedown &amp; Shipping Forecast</b></font></td>
      <td><font size="1"><i>automation</i></font></td>
    </tr>
    </table>

  </td></tr>
  </table>

  <!-- PRESENTERS -->
  <a name="presenters"></a>
  <table width="100%" border="0" cellpadding="10" cellspacing="0">
  <tr><td>
    <font face="Arial, Helvetica, sans-serif" size="3" color="#003366"><b>Meet the presenters</b></font><br>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="6" alt="" border="0"><br>
    <font size="1" color="#336666">Four people keep this station on the air. Between them they have
    eleven cups, one working microphone, and a great deal of patience.</font><br><br>

    <table width="100%" border="0" cellpadding="6" cellspacing="0" bgcolor="#E6EFE6">
    <tr><td>
      <font face="Arial, Helvetica, sans-serif" size="2" color="#003366"><b>Maggie Thwaite</b></font>
      <font size="1" color="#336666">&nbsp;&mdash;&nbsp;Saltmarsh Breakfast, Harbour Lights, Market Day Requests</font><br>
      <font size="1">Maggie has lived in the marsh for forty-one years and can tell the weather by the
      smell of the mud. She makes tea on air and has never once spilled it.</font>
    </td></tr>
    </table>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="4" alt="" border="0"><br>

    <table width="100%" border="0" cellpadding="6" cellspacing="0" bgcolor="#E6EFE6">
    <tr><td>
      <font face="Arial, Helvetica, sans-serif" size="2" color="#003366"><b>Colin Petrie</b></font>
      <font size="1" color="#336666">&nbsp;&mdash;&nbsp;The Tide Line, The Long Shore, Sports Desk</font><br>
      <font size="1">Colin came for a fortnight in 1989 and never left. He owns more records than the
      caravan can hold, so half of them live in his shed.</font>
    </td></tr>
    </table>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="4" alt="" border="0"><br>

    <table width="100%" border="0" cellpadding="6" cellspacing="0" bgcolor="#E6EFE6">
    <tr><td>
      <font face="Arial, Helvetica, sans-serif" size="2" color="#003366"><b>Dee Ferris</b></font>
      <font size="1" color="#336666">&nbsp;&mdash;&nbsp;Dee's Deck, The Saturday Shed, Folk at the Ferry</font><br>
      <font size="1">Dee runs the request line and the phone-in, and is the only person here who
      understands the mixing desk. She is not to be disturbed between four and seven.</font>
    </td></tr>
    </table>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="4" alt="" border="0"><br>

    <table width="100%" border="0" cellpadding="6" cellspacing="0" bgcolor="#E6EFE6">
    <tr><td>
      <font face="Arial, Helvetica, sans-serif" size="2" color="#003366"><b>Rev. Alan Pike</b></font>
      <font size="1" color="#336666">&nbsp;&mdash;&nbsp;Songs of the Saltings</font><br>
      <font size="1">Alan is the vicar at St. Osric's and has been doing the Sunday show since the
      beginning. He plays hymns, reads the parish notices, and once played a whole hour of
      bell-ringing by mistake.</font>
    </td></tr>
    </table>

  </td></tr>
  </table>

  <!-- GUESTBOOK -->
  <a name="guestbook"></a>
  <table width="100%" border="0" cellpadding="10" cellspacing="0">
  <tr><td>
    <font face="Arial, Helvetica, sans-serif" size="3" color="#003366"><b>Sign the guestbook</b></font><br>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="6" alt="" border="0"><br>
    <font size="1" color="#336666">Leave us a message. We read them out on Dee's Deck on Fridays,
    so keep it clean.</font><br><br>

    <form method="post" action="/cgi-bin/guestbook.cgi">
    <table border="0" cellpadding="3" cellspacing="0">
    <tr>
      <td align="right" valign="top"><font size="2"><b>Your name:</b></font></td>
      <td><input type="text" name="name" size="28" maxlength="60"></td>
    </tr>
    <tr>
      <td align="right" valign="top"><font size="2"><b>Where are you?</b></font></td>
      <td><input type="text" name="place" size="28" maxlength="60"></td>
    </tr>
    <tr>
      <td align="right" valign="top"><font size="2"><b>Message:</b></font></td>
      <td><textarea name="message" rows="4" cols="38" wrap="virtual"></textarea></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>
        <input type="submit" value="Sign the book">
        <input type="reset" value="Clear">
      </td>
    </tr>
    </table>
    </form>

    <br>
    <font face="Arial, Helvetica, sans-serif" size="2" color="#006666"><b>Recent entries</b></font><br>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="4" alt="" border="0"><br>

    <table width="100%" border="0" cellpadding="5" cellspacing="0" bgcolor="#F2F6F2">
    <tr><td>
      <font size="1">Listened to you all the way from Grimsby on a car radio. Couldn't get the last
      ten minutes but the shanties were grand.<br>
      <b>&mdash; Ted, Grimsby</b></font>
    </td></tr>
    </table>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="3" alt="" border="0"><br>

    <table width="100%" border="0" cellpadding="5" cellspacing="0" bgcolor="#F2F6F2">
    <tr><td>
      <font size="1">Please play more of the folk stuff and less of the shipping forecast.<br>
      <b>&mdash; Anonymous, Saltmarsh</b></font>
    </td></tr>
    </table>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="3" alt="" border="0"><br>

    <table width="100%" border="0" cellpadding="5" cellspacing="0" bgcolor="#F2F6F2">
    <tr><td>
      <font size="1">My mum is on the front of the caravan in the photo. Hello mum.<br>
      <b>&mdash; Karen, Leeds</b></font>
    </td></tr>
    </table>

  </td></tr>
  </table>

</td>

<!-- ---------- GUTTER ---------- -->
<td width="2" bgcolor="#003366">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="2" height="1" alt="" border="0">
</td>

<!-- ---------- RIGHT COLUMN ---------- -->
<td width="240" valign="top" bgcolor="#E6EFE6">

  <!-- ON AIR -->
  <table width="100%" border="0" cellpadding="8" cellspacing="0">
  <tr><td>
    <font face="Arial, Helvetica, sans-serif" size="1" color="#006666"><b>ON AIR NOW</b></font><br>
    <font size="1">
    <b>Saltmarsh Breakfast</b><br>
    with Maggie Thwaite<br>
    6am &ndash; 9am<br><br>
    <i>The Tide Line follows at nine.</i>
    </font>
  </td></tr>
  </table>

  <!-- LISTEN -->
  <table width="100%" border="0" cellpadding="8" cellspacing="0" bgcolor="#D6E4D6">
  <tr><td>
    <font face="Arial, Helvetica, sans-serif" size="1" color="#006666"><b>HOW TO LISTEN</b></font><br>
    <font size="1">
    Tune your radio to <b>102.3 FM</b>.<br><br>
    We do not stream. We are working on it. Colin has read about it.
    </font>
  </td></tr>
  </table>

  <!-- HIT COUNTER -->
  <table width="100%" border="0" cellpadding="8" cellspacing="0">
  <tr><td align="center">
    <font face="Arial, Helvetica, sans-serif" size="1" color="#006666"><b>YOU ARE VISITOR</b></font><br>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="4" alt="" border="0"><br>
    <table border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
    <tr>
      <td bgcolor="#000000" width="13" align="center"><font face="Courier New, Courier, monospace" size="2" color="#33FF33">0</font></td>
      <td bgcolor="#000000" width="13" align="center"><font face="Courier New, Courier, monospace" size="2" color="#33FF33">0</font></td>
      <td bgcolor="#000000" width="13" align="center"><font face="Courier New, Courier, monospace" size="2" color="#33FF33">0</font></td>
      <td bgcolor="#000000" width="13" align="center"><font face="Courier New, Courier, monospace" size="2" color="#33FF33">4</font></td>
      <td bgcolor="#000000" width="13" align="center"><font face="Courier New, Courier, monospace" size="2" color="#33FF33">8</font></td>
      <td bgcolor="#000000" width="13" align="center"><font face="Courier New, Courier, monospace" size="2" color="#33FF33">2</font></td>
    </tr>
    </table>
    <br>
    <font size="1" color="#336666">since 14th October 1996</font>
  </td></tr>
  </table>

  <!-- UNDER CONSTRUCTION -->
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#FFCC00" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#000000" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#FFCC00" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#000000" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#FFCC00" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#000000" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#FFCC00" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#000000" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#FFCC00" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#000000" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
  </tr>
  </table>
  <table width="100%" border="0" cellpadding="8" cellspacing="0" bgcolor="#FFFFCC">
  <tr><td align="center">
    <font face="Arial, Helvetica, sans-serif" size="2" color="#663300"><b>UNDER CONSTRUCTION</b></font><br>
    <font size="1" color="#663300">We are still adding the photograph of the caravan. It has been
    under construction since November.</font>
  </td></tr>
  </table>
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#FFCC00" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#000000" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#FFCC00" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#000000" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#FFCC00" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#000000" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#FFCC00" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#000000" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#FFCC00" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
    <td bgcolor="#000000" height="5"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"></td>
  </tr>
  </table>

  <!-- WEBRING -->
  <table width="100%" border="0" cellpadding="8" cellspacing="0" bgcolor="#003366">
  <tr><td align="center">
    <font face="Arial, Helvetica, sans-serif" size="1" color="#99CCCC"><b>THE EAST COAST<br>COMMUNITY RADIO WEBRING</b></font><br>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"><br>
    <font face="Arial, Helvetica, sans-serif" size="2">
    <a href="#top"><font color="#FFCC33">[ &lt;&lt; PREV ]</font></a><br>
    <a href="#top"><font color="#FFCC33">[ RANDOM ]</font></a><br>
    <a href="#top"><font color="#FFCC33">[ NEXT &gt;&gt; ]</font></a>
    </font><br>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="5" alt="" border="0"><br>
    <font size="1" color="#99CCCC">This site is #14 of 23 in the ring.</font>
  </td></tr>
  </table>

  <!-- CONTACT -->
  <a name="contact"></a>
  <table width="100%" border="0" cellpadding="8" cellspacing="0">
  <tr><td>
    <font face="Arial, Helvetica, sans-serif" size="1" color="#006666"><b>FIND US</b></font><br>
    <font size="1">
    The Caravan<br>
    Saltmarsh Sailing Club<br>
    East Coast<br><br>
    Studio: 01842 555 102<br>
    Requests: 4pm &ndash; 7pm<br><br>
    <a href="mailto:studio@saltmarsh.example">studio@saltmarsh.example</a>
    </font>
  </td></tr>
  </table>

</td>
</tr>
</table>

<!-- ================= FOOTER ================= -->
<table width="720" border="0" cellpadding="8" cellspacing="0" bgcolor="#003366">
<tr>
  <td align="center">
    <font face="Arial, Helvetica, sans-serif" size="1" color="#99CCCC">
    Radio Saltmarsh 102.3 FM &nbsp;|&nbsp; The Caravan, Saltmarsh Sailing Club, East Coast &nbsp;|&nbsp; 01842 555 102<br>
    Best viewed at 800 &times; 600 in Netscape Navigator 4 or Internet Explorer 4.<br>
    </font>
    <font face="Arial, Helvetica, sans-serif" size="1" color="#6699AA">
    <script language="JavaScript">
    <!--
    document.write('Page last updated: ' + document.lastModified);
    // -->
    </script>
    <noscript>Page last updated: 2nd March 1998</noscript>
    </font>
  </td>
</tr>
</table>

</center>
</body>
</html>

Compatibility notes

Genuinely worked in both IE4 and NS4 (March 1998)

Nested tables with border, cellpadding, cellspacing, bgcolor, width, valign, align. This is the whole layout. Both browsers had solid HTML 3.2 table engines; the famous NS4 table bugs are about resizing and reflowing tables after load, not about static nested tables. A fixed-width 720px stack like this renders identically in both.
<font face size color>, <center>, <br>, <hr>, <b>, <i>, <a name> anchors,  , —, ×. All HTML 3.2, all fine.
<body bgcolor text link vlink alink background> — the background attribute is HTML 3.2 and both browsers tile it.
<img width height alt border> — both. Scaling a 1×1 GIF up to 14×14 works in both (nearest-neighbour, so it's a solid block).
<form>, <input type=text>, <input type=submit>, <input type=reset>, <textarea wrap="virtual">, maxlength, size, rows, cols. Both. The wrap="virtual" attribute is Netscape's invention (NN 2.0) and was adopted by IE; it's period-correct.
<style> with font-family on body and a class selector. NS4 supported CSS1 font properties and class selectors; IE4 supported more. The  wrapper is required for NS4 or it prints the CSS as text.
document.images['lamp'].src = ... — the image-swap. Both browsers expose a named images collection and both honour a .src change. This is the one animation that is genuinely cross-browser, and it's why the lamp blinks for everybody.
setTimeout("blinkLamp()", 900) — string form, both.
document.write() during parse — both.
document.lastModified — both (IE returns a locale string, NS returns a similar one; the format differs, which is period-authentic).
if (document.layers) / if (document.all) as a browser sniff — document.layers is undefined in IE4, document.all is undefined in NS4. This is the correct 1998 test, and it's why I used it rather than navigator.appName.
The 1×1 transparent GIF as a spacer inside empty <td>s. NS4 collapses a cell with no content even if you give it height; the spacer is the fix, and it's exactly why the single-pixel GIF was ubiquitous.
GIF89a with a 2-entry global colour table and LZW data — both browsers' GIF decoders handle this. The 8×8 tile is a valid GIF89a; if I got a byte wrong it degrades to the bgcolor behind it.

Worked in only one

<marquee> — IE only (introduced in IE2, still present in IE4). NS4 does not implement it; it renders the element's children as ordinary inline content, so a Navigator user sees the ticker text sitting still in the bar. That is exactly what happened on thousands of 1998 pages. My document.write branch gives NS4 a plain <font> line instead, so at least it isn't a stray tag.
document.all — IE4 only. Undefined in NS4. I only test for it, never rely on it.
document.layers — NS4 only. Undefined in IE4. Same.
<layer> / <ilayer> — NS4 only. I deliberately did not use them: an <ilayer> inside a table cell is one of the things NS4 got wrong, and an absolutely-positioned <layer> would have needed a hard-coded top that breaks the moment the masthead reflows. The honest answer is that NS4 users got a static ticker.
bgcolor on <marquee> — IE only, so I put the colour on the <td> instead.

Anachronistic — looks period, isn't

data: URIs. This is the big one. No 1998 browser supported them. IE didn't ship data: URI support until IE8 (March 2009); Netscape never did; Firefox from 2002. In a real March 1998 browser every image on this page — the tile, the lamp, every spacer — would be a broken-image icon, and the page would collapse into a mess of collapsed table cells. The page only holds together because you're opening it in a modern browser. Your constraint allowed it; the period did not.
document.images['lamp'] by name. I'm fairly confident NS4 supports named access into the images array, but I would not swear to it. If it doesn't, the lamp simply never blinks in Navigator and the page is otherwise fine. The safe 1998 alternative was document.images[0], which is uglier but certain.
<!DOCTYPE HTML 4.0 Transitional>. HTML 4.0 was published 18 December 1997, so the doctype is legitimate for March 1998 — but a volunteer-built community station site would almost certainly have had no doctype at all, or HTML 3.2. I included it because I'm using <style>, which is HTML 4.0. Strictly, <style> in a 3.2 document is invalid, though every browser of the era ignored that.
font-family: Verdana. Verdana shipped with IE3/IE4 and with the MS Core Fonts, and was on most Windows machines by 1998, but it was not on a stock Mac and not on NS4's default install. Mac Netscape users saw Geneva or Helvetica. That's period-correct behaviour, not a bug.
The .small class in the <style> block. I declared it and then never used it — I used <font size="1"> throughout instead, because NS4's handling of font-size in px on table cells was unreliable. The class is dead weight; a real 1998 author would probably have left it in too.
—, ×, –. These are HTML 4.0 named entities. NS4 supported the common ones; — and – were in the HTML 4.0 set (Dec 1997) and I believe NS4 handled them, but I am not certain — if not, they'd render as literal text. The safe 1998 route was  and .
The GIFs themselves. I hand-encoded the LZW. The structure is right (header, LSD, 2-entry GCT, image descriptor, min-code-size 2, sub-block, trailer) and the "clear every two pixels" trick keeps the code size pinned at 3 bits, which is a legitimate way to emit an uncompressed-ish GIF. But I did the bit-packing by hand and I would not bet a week's wages on every byte. If the tile is subtly wrong you get the bgcolor; if a lamp is wrong you get a broken image in the corner. Neither breaks the layout.
document.lastModified in the footer. Both browsers supported it, but the string format differs between them and between platforms, so the footer reads differently on every machine. That's authentic, not a defect.

Attachments

particle-ai/particle-1 — page