will.airport.main.<module>

Jul 2, 2026, 5:54:51 AM
httpcall_treeraw

POST /plan 200

session · 172cd4229584dc1488f451c4e0420140text/html; charset=utf-8 · 6547 B
Replayed from tape · byte-identical across runs
rendered response
Request in
hostflowing-lagoon-00492-main.motorapp.dev
content-length36
cookie__watt_tape_session=172cd4229584dc1488f451c4e0420140
accepttext/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
content-typeapplication/x-www-form-urlencoded
19 standard headers
connectionclose
upgrade-insecure-requests1
sec-fetch-modenavigate
priorityu=0, i
sec-ch-ua-mobile?0
user-agentMozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36
via2.0 f7064168e4303d46b71dd4af3fc34a86.cloudfront.net (CloudFront)
x-amz-cf-id-GNn0HenIm5DTTvCyreDPDeIwKY8YlzcOvRAnFHb9OTKac7jcgP8jw==
cache-controlmax-age=0
sec-fetch-sitesame-origin
x-forwarded-for75.18.241.129
accept-languageen-US,en;q=0.9
refererhttps://flowing-lagoon-00492-main.motorapp.dev/
accept-encodinggzip, deflate, br, zstd
sec-fetch-destdocument
sec-ch-ua-platform"macOS"
sec-ch-ua"Google Chrome";v="149", "Chromium";v="149", "Not)A;Brand";v="24"
originhttps://flowing-lagoon-00492-main.motorapp.dev
sec-fetch-user?1

application/x-www-form-urlencoded · 36 bytes

address=4220+irving+st&flight=ua+335
Response out
content-typetext/html; charset=utf-8

text/html; charset=utf-8 · 6547 bytes

source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>when do i leave for the airport?</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

<style>
  :root{
    --bg:#111418;
    --panel:#0a0c0f;
    --line:#2a2f36;
    --amber:#f7c948;
    --muted:#7f8893;
    --text:#e8edf2;
    --go:#3ddc84;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; height:100%; }
  body{
    background:radial-gradient(120% 120% at 50% -10%, #1a1f26 0%, var(--bg) 55%);
    color:var(--text);
    font-family:'Space Mono', ui-monospace, monospace;
    min-height:100dvh;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:48px 18px;
  }
  .app{ width:100%; max-width:560px; }
  .head{
    display:flex; align-items:center; gap:10px;
    border-bottom:1px solid var(--line);
    padding-bottom:14px; margin-bottom:26px;
    color:var(--muted); font-size:12px; letter-spacing:2px; text-transform:uppercase;
  }
  .dot{ width:9px; height:9px; border-radius:99px; background:var(--go); box-shadow:0 0 8px var(--go); animation:pulse 2s infinite; }
  @keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
  .head .spacer{ flex:1; }
  .head .clock{ color:var(--amber); }
  .board-label{ font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin:6px 0 10px; }
  .board{ display:flex; gap:6px; margin-bottom:28px; }
  .cell{
    flex:1; position:relative; background:var(--panel); border-radius:6px;
    font-weight:700; color:var(--amber);
    font-size:clamp(34px,11vw,58px); line-height:1;
    text-align:center; padding:18px 2px;
    box-shadow:inset 0 -12px 16px -12px #000, inset 0 1px 0 var(--line);
    overflow:hidden; user-select:none;
  }
  .cell::after{
    content:""; position:absolute; left:0; right:0; top:50%;
    height:2px; background:rgba(0,0,0,.55); transform:translateY(-1px);
  }
  .cell.flipping{ animation:flap .07s ease-in; }
  @keyframes flap{ 0%{ transform:perspective(180px) rotateX(0) } 49%{ transform:perspective(180px) rotateX(-22deg) } 50%{ transform:perspective(180px) rotateX(22deg) } 100%{ transform:perspective(180px) rotateX(0) } }
  .cell.sep{ background:transparent; box-shadow:none; flex:0 0 16px; }
  .cell.sep::after{ display:none; }
  .rows{ margin-bottom:24px; }
  .row{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px dashed var(--line); font-size:14px; letter-spacing:1px; }
  .row .k{ color:var(--muted); text-transform:uppercase; font-size:11px; align-self:center; }
  .row .v{ color:var(--text); text-align:right; }
  .rowlink{ color:var(--amber); text-decoration:none; border-bottom:1px solid rgba(247,201,72,.4); margin-left:12px; font-size:12px; white-space:nowrap; }
  .rowlink:hover{ border-bottom-color:var(--amber); }
  .foot{ color:var(--muted); font-size:12px; line-height:1.6; }
  .back{ display:inline-block; background:none; border:none; color:var(--amber); font-family:inherit; font-size:13px; cursor:pointer; padding:0; margin-top:8px; letter-spacing:1px; text-decoration:none; }
  .back:hover{ text-decoration:underline; }
  .reveal{ opacity:0; transform:translateY(6px); animation:rise .4s ease forwards; }
  @keyframes rise{ to{ opacity:1; transform:none; } }
</style>
</head>
<body>
<div class="app">
  <div class="head">
    <span class="dot"></span>
    <span id="head-title">ua 335 · EUG → SFO</span>
    <span class="spacer"></span>
    <span class="clock" id="clock">--:--</span>
  </div>

  <section id="result-screen">
    <div class="board-label">Leave by</div>
    <div id="board" class="board" data-target="07:14" aria-label="leave by time"></div>

    <div class="rows">
      <div class="row reveal" style="animation-delay:.15s"><span class="k">your address</span><span class="v">4220 Irving St, San Francisco, CA 94122, USA</span></div>
      <div class="row reveal" style="animation-delay:.21s"><span class="k">coming from</span><span class="v">Eugene (EUG)</span></div>
      <div class="row reveal" style="animation-delay:.27s"><span class="k">took off</span><span class="v">06:00 (scheduled)</span></div>
      <div class="row reveal" style="animation-delay:.33s"><span class="k">lands at</span><span class="v">SFO airport · 07:35 (actual) <a class="rowlink" href="https://www.google.com/search?q=ua%20335%20flight%20status" target="_blank" rel="noopener">flight status &#8599;</a></span></div>
      <div class="row reveal" style="animation-delay:.39s"><span class="k">drive time</span><span class="v">21 min <a class="rowlink" href="https://www.google.com/maps/dir/?api=1&origin=4220%20Irving%20St%2C%20San%20Francisco%2C%20CA%2094122%2C%20USA&destination=San%20Francisco%20International%20Airport%20%28SFO%29%2C%20San%20Francisco%2C%20CA%2094128%2C%20USA" target="_blank" rel="noopener">directions &#8599;</a></span></div>
    </div>
    <a class="back" href="/">&#8592; plan another trip</a>
  </section>
</div>

<script>
"use strict";
const CONFIG = {
  CHARSET: " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789:.-/()→·",
  FLIP_STEP_MS: 38,
  CELL_STAGGER_MS: 90,
};
function renderBoard(container, text){
  container.innerHTML = "";
  const chars = text.toUpperCase().split("");
  const cells = chars.map(ch => {
    const cell = document.createElement("div");
    cell.className = "cell" + (ch === " " ? " sep" : "");
    cell.textContent = " ";
    container.appendChild(cell);
    return { el: cell, target: ch };
  });
  cells.forEach((c, i) => {
    setTimeout(() => flipCell(c.el, c.target), i * CONFIG.CELL_STAGGER_MS);
  });
}
function flipCell(el, target){
  const set = CONFIG.CHARSET;
  let idx = 0;
  const tick = () => {
    const ch = set[idx];
    el.textContent = ch === " " ? String.fromCharCode(160) : ch;
    el.classList.remove("flipping");
    void el.offsetWidth;
    el.classList.add("flipping");
    if (ch === target) return;
    idx = (idx + 1) % set.length;
    setTimeout(tick, CONFIG.FLIP_STEP_MS);
  };
  tick();
}
function tickClock(){
  const d = new Date();
  document.getElementById('clock').textContent =
    String(d.getHours()).padStart(2,'0') + ":" + String(d.getMinutes()).padStart(2,'0');
}
tickClock();
setInterval(tickClock, 10000);
const board = document.getElementById('board');
renderBoard(board, board.dataset.target);
</script>
</body>
</html>