{"id":3862,"date":"2026-07-20T01:00:41","date_gmt":"2026-07-20T05:00:41","guid":{"rendered":"https:\/\/patorjk.com\/blog\/?p=3862"},"modified":"2026-07-20T01:00:41","modified_gmt":"2026-07-20T05:00:41","slug":"new-ui-for-chain-letter-archive","status":"publish","type":"post","link":"https:\/\/patorjk.com\/blog\/2026\/07\/20\/new-ui-for-chain-letter-archive\/","title":{"rendered":"New UI for Chain Letter Archive"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">I&#8217;ve revamped the UI for my <a href=\"https:\/\/patorjk.com\/misc\/chain-letter-archive\/\">Chain Letter Archive<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/inbox.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"849\" src=\"https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/inbox-1024x849.png\" alt=\"\" class=\"wp-image-3863\" srcset=\"https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/inbox-1024x849.png 1024w, https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/inbox-300x249.png 300w, https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/inbox-768x637.png 768w, https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/inbox-1536x1274.png 1536w, https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/inbox.png 1594w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s modeled after an old AOL 4.0 inbox. I used AOL 4.0 with <a href=\"https:\/\/nina.chat\/\">NINA<\/a> for reference when making it, as well as the <a href=\"https:\/\/jdan.github.io\/98.css\/\">98.css<\/a> project. Icons are courtesy of <a href=\"https:\/\/svgrepo.com\">svgrepo.com<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each chain letter is an email inside of the inbox, and clicking them opens up the chain letter in an email message.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/phone_view.png\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"1024\" src=\"https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/phone_view-480x1024.png\" alt=\"\" class=\"wp-image-3865\" srcset=\"https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/phone_view-480x1024.png 480w, https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/phone_view-141x300.png 141w, https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/phone_view-768x1638.png 768w, https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/phone_view-720x1536.png 720w, https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/phone_view.png 802w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">The sender list is mostly just inside jokes. I debated adding more inside jokes in, like making the &#8220;Reply&#8221; and &#8220;Reply All&#8221; buttons actually do stuff, but I decided to hold back for now.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I actually really like how this turned out. When I did the original revamp last year I kept second guessing myself. You can see the old design below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/old-design.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"424\" src=\"https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/old-design-1024x424.png\" alt=\"\" class=\"wp-image-3864\" srcset=\"https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/old-design-1024x424.png 1024w, https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/old-design-300x124.png 300w, https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/old-design-768x318.png 768w, https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/old-design-1536x637.png 1536w, https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2026\/07\/old-design.png 1790w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In that case I was going for a Geocities-like feel, but I think I missed the mark. The site was ugly and it wasn&#8217;t clear that it was done on purpose. Doing bad design right is actually kind of hard.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Anyway, for the new site I actually found an 2 additional chain letters that I had saved on my old <a href=\"https:\/\/web.archive.org\/web\/*\/http:\/\/www.geocities.com\/Area51\/dimension\/6939\/*\">geocities website<\/a> that I hadn&#8217;t posted in the archive. So the archive now contains 7 letters. That&#8217;s not a lot, but I think one gets the gist for what a chain letter was after reading through a few of these. My original collection was around 10 letters, but over time the ones I didn&#8217;t post online got lost.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When I was originally collecting these I was only trying to save the good ones, which were few and far between. And then once the 2000&#8217;s hit, it seemed like these kind of letters completely disappeared. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">At the time these kind of letters mostly annoyed me, but I found myself getting oddly nostalgic for them when I was putting this together. Anyway, I hope the site can provide some amusement. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve revamped the UI for my Chain Letter Archive. It&#8217;s modeled after an old AOL 4.0 inbox. I used AOL 4.0 with NINA for reference when making it, as well as the 98.css project. Icons are courtesy of svgrepo.com. Each chain letter is an email inside of the inbox, and clicking them opens up the &hellip; <a href=\"https:\/\/patorjk.com\/blog\/2026\/07\/20\/new-ui-for-chain-letter-archive\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">New UI for Chain Letter Archive<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57,26],"tags":[],"class_list":["post-3862","post","type-post","status-publish","format-standard","hentry","category-aol","category-web-apps"],"_links":{"self":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/3862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/comments?post=3862"}],"version-history":[{"count":2,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/3862\/revisions"}],"predecessor-version":[{"id":3867,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/3862\/revisions\/3867"}],"wp:attachment":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/media?parent=3862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/categories?post=3862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/tags?post=3862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}