From 81ff6ea6590dd4fbe4408e56eb418dd94fa0b44b Mon Sep 17 00:00:00 2001
From: josh <josh@thewrightserver.net>
Date: Sat, 4 Apr 2026 12:26:45 -0400
Subject: [PATCH] feat: roller coaster logo and working favicon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- public/logo.svg: amber coaster silhouette (lift hill + vertical loop +
  camelback) on transparent background; used in header and README
- app/icon.tsx: PNG favicon via Next.js ImageResponse (works in all
  browsers including Safari); renders simplified hill + loop on dark
  rounded-square background
- app/page.tsx: logo img added next to "Thoosie Calendar" title in header
- README.md: logo displayed at top of document
- Remove app/icon.svg (replaced by icon.tsx → PNG)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 README.md       |  2 ++
 app/icon.svg    |  8 -------
 app/icon.tsx    | 59 +++++++++++++++++++++++++++++++++++++++++++++++++
 app/page.tsx    | 20 ++++++++++-------
 public/logo.svg | 19 ++++++++++++++++
 5 files changed, 92 insertions(+), 16 deletions(-)
 delete mode 100644 app/icon.svg
 create mode 100644 app/icon.tsx
 create mode 100644 public/logo.svg

diff --git a/README.md b/README.md
index f08769c..2054b48 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # Thoosie Calendar
 
+<img src="public/logo.svg" alt="Thoosie Calendar" width="320">
+
 A week-by-week calendar showing operating hours for all Six Flags Entertainment Group theme parks — including the former Cedar Fair parks. Data is scraped from the Six Flags internal API and stored locally in SQLite. Click any park to see its full month calendar and live ride status with current wait times.
 
 ## Parks
diff --git a/app/icon.svg b/app/icon.svg
deleted file mode 100644
index cfc7eee..0000000
--- a/app/icon.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <!-- Dark rounded background matching app --color-bg -->
-  <rect width="32" height="32" rx="6" fill="#0c1220"/>
-  <!-- Amber T: horizontal bar -->
-  <rect x="6" y="8" width="20" height="4" rx="1.5" fill="#f59e0b"/>
-  <!-- Amber T: vertical stem -->
-  <rect x="13" y="12" width="6" height="14" rx="1.5" fill="#f59e0b"/>
-</svg>
diff --git a/app/icon.tsx b/app/icon.tsx
new file mode 100644
index 0000000..f856daf
--- /dev/null
+++ b/app/icon.tsx
@@ -0,0 +1,59 @@
+import { ImageResponse } from "next/og";
+
+export const size = { width: 32, height: 32 };
+export const contentType = "image/png";
+
+export default function Icon() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: 32,
+          height: 32,
+          borderRadius: 8,
+          backgroundColor: "#0c1220",
+          display: "flex",
+          position: "relative",
+        }}
+      >
+        {/* Ground line */}
+        <div
+          style={{
+            position: "absolute",
+            left: 3,
+            right: 3,
+            bottom: 7,
+            height: 2,
+            backgroundColor: "#f59e0b",
+            borderRadius: 1,
+          }}
+        />
+        {/* Lift hill — semicircle bump */}
+        <div
+          style={{
+            position: "absolute",
+            left: 3,
+            bottom: 9,
+            width: 10,
+            height: 13,
+            backgroundColor: "#f59e0b",
+            borderRadius: "50% 50% 0 0",
+          }}
+        />
+        {/* Vertical loop — circle outline */}
+        <div
+          style={{
+            position: "absolute",
+            right: 5,
+            bottom: 7,
+            width: 12,
+            height: 12,
+            border: "2.5px solid #f59e0b",
+            borderRadius: "50%",
+          }}
+        />
+      </div>
+    ),
+    { width: 32, height: 32 },
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index 63eed42..460f3fd 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -78,14 +78,18 @@ export default async function HomePage({ searchParams }: PageProps) {
           justifyContent: "space-between",
           gap: 12,
         }}>
-          <span style={{
-            fontSize: "1.1rem",
-            fontWeight: 700,
-            color: "var(--color-text)",
-            letterSpacing: "-0.02em",
-          }}>
-            Thoosie Calendar
-          </span>
+          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src="/logo.svg" alt="" style={{ height: 28, width: "auto" }} />
+            <span style={{
+              fontSize: "1.1rem",
+              fontWeight: 700,
+              color: "var(--color-text)",
+              letterSpacing: "-0.02em",
+            }}>
+              Thoosie Calendar
+            </span>
+          </div>
 
           <span style={{
             background: "var(--color-surface)",
diff --git a/public/logo.svg b/public/logo.svg
new file mode 100644
index 0000000..186147d
--- /dev/null
+++ b/public/logo.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 56" fill="none">
+  <!-- Lift hill + ground + camelback -->
+  <path
+    d="M 2 52 L 20 6 L 38 52 L 116 52 Q 134 22 152 52 L 196 52"
+    stroke="#f59e0b"
+    stroke-width="3.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <!-- Vertical loop -->
+  <circle
+    cx="75"
+    cy="33"
+    r="19"
+    stroke="#f59e0b"
+    stroke-width="3.5"
+    fill="none"
+  />
+</svg>