{"tool":"get_design","slug":"field-notes","title":"Field Notes — Write it down, find it later","url":"/field-notes","kind":"Live website","code":"<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\" />\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n<title>Field Notes — Write it down, find it later</title>\n<meta name=\"description\" content=\"Field Notes is a simple notes app that works. Write a note, search it, pin it, delete it. Notes live in your browser only.\" />\n<style>\n*{box-sizing:border-box}\nbody{margin:0;background:#F6F1E7;color:#1C1917;font-family:Inter,system-ui,sans-serif}\n.wrap{max-width:760px;margin:0 auto;padding:28px 20px 48px}\nh1{font-size:34px;margin:0 0 4px}\n.lede{color:#57534E;margin:0 0 20px}\ntextarea{width:100%;min-height:90px;padding:12px;border:1.5px solid #D6D3D1;border-radius:12px;font:inherit;background:#fff}\nbutton{border:0;cursor:pointer;font:inherit;font-weight:700;border-radius:999px;padding:10px 16px}\n.add{background:#1C1917;color:#fff}\n.search{width:100%;padding:11px 14px;border:1.5px solid #D6D3D1;border-radius:999px;font:inherit;margin:16px 0;background:#fff}\n.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}\n.note{background:#fff;border:1px solid #E7E5E4;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;white-space:pre-wrap}\n.note.pinned{border-color:#D97706}\n.note time{font-size:12px;color:#78716C}\n.row{display:flex;gap:8px}\n.row button{background:#F5F5F4;color:#1C1917;font-size:13px;padding:6px 10px}\n.count{color:#57534E;font-size:14px}\n</style>\n</head>\n<body>\n<div class=\"wrap\">\n  <h1>Field Notes</h1>\n  <p class=\"lede\">Write it down, find it later. Notes live in your browser only — nothing is sent anywhere.</p>\n  <textarea id=\"text\" placeholder=\"Write a note…\"></textarea>\n  <div style=\"margin-top:10px\"><button class=\"add\" id=\"add\" type=\"button\">Add note</button></div>\n  <input class=\"search\" id=\"search\" type=\"search\" placeholder=\"Search your notes…\" aria-label=\"Search notes\" />\n  <p class=\"count\" id=\"count\"></p>\n  <div class=\"grid\" id=\"grid\"></div>\n</div>\n<script>\nvar notes = JSON.parse(localStorage.getItem(\"field-notes\") || \"[]\");\nvar text = document.getElementById(\"text\"), grid = document.getElementById(\"grid\"),\n    search = document.getElementById(\"search\"), count = document.getElementById(\"count\");\nfunction save(){ localStorage.setItem(\"field-notes\", JSON.stringify(notes)); }\nfunction render(){\n  var q = search.value.trim().toLowerCase();\n  var list = notes.map(function(n,i){ return {n:n, i:i}; }).filter(function(x){\n    return !q || x.n.text.toLowerCase().indexOf(q) !== -1;\n  });\n  list.sort(function(a,b){ return (b.n.pinned - a.n.pinned) || (b.n.created - a.n.created); });\n  count.textContent = notes.length + (notes.length === 1 ? \" note\" : \" notes\") + (q ? \" · \" + list.length + \" match\" : \"\");\n  grid.innerHTML = list.length ? \"\" : \"<p style='color:#78716C'>No notes yet — write your first one above.</p>\";\n  list.forEach(function(x){\n    var d = document.createElement(\"article\");\n    d.className = \"note\" + (x.n.pinned ? \" pinned\" : \"\");\n    var t = document.createElement(\"div\"); t.textContent = x.n.text; d.appendChild(t);\n    var tm = document.createElement(\"time\"); tm.textContent = new Date(x.n.created).toLocaleString(); d.appendChild(tm);\n    var row = document.createElement(\"div\"); row.className = \"row\";\n    var pin = document.createElement(\"button\"); pin.type = \"button\"; pin.textContent = x.n.pinned ? \"Unpin\" : \"Pin\";\n    pin.onclick = function(){ notes[x.i].pinned = !notes[x.i].pinned; save(); render(); };\n    var del = document.createElement(\"button\"); del.type = \"button\"; del.textContent = \"Delete\";\n    del.onclick = function(){ notes.splice(x.i, 1); save(); render(); };\n    row.appendChild(pin); row.appendChild(del); d.appendChild(row);\n    grid.appendChild(d);\n  });\n}\ndocument.getElementById(\"add\").addEventListener(\"click\", function(){\n  var v = text.value.trim();\n  if (!v) return;\n  notes.push({text:v, created:Date.now(), pinned:false});\n  text.value = \"\"; save(); render();\n});\nsearch.addEventListener(\"input\", render);\nrender();\n</script>\n</body>\n</html>\n","code_bytes":4038}