From 2eb016dbd7575c47c0c52a07831a6a3c097f1ee8 Mon Sep 17 00:00:00 2001
From: Paul Buetow <paul@buetow.org>
Date: Mon, 4 May 2026 20:24:36 +0300
Subject: Add project logo, favicon, and display logo on login screen

- Add logo.svg at project root and reference it in README.md
- Generate favicon.ico from logo and place in web/
- Serve logo.svg and favicon.ico as static assets
- Display logo on the login page with responsive sizing
---
 README.md              |   2 ++
 internal/api/server.go |   3 +++
 logo.svg               |  60 +++++++++++++++++++++++++++++++++++++++++++++++++
 web/css/login.css      |   6 +++++
 web/favicon.ico        | Bin 0 -> 135230 bytes
 web/login.html         |   1 +
 web/logo.svg           |  60 +++++++++++++++++++++++++++++++++++++++++++++++++
 7 files changed, 132 insertions(+)
 create mode 100644 logo.svg
 create mode 100644 web/favicon.ico
 create mode 100644 web/logo.svg

diff --git a/README.md b/README.md
index 5507968..9b5ec04 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
 player
 ======
 
+![Player logo](logo.svg)
+
 Player is an opinionated KISS web media player. It is designed to be simple, lightweight, and easy to use and designed keyboard-first.  It supports:
 
 * Videos
diff --git a/internal/api/server.go b/internal/api/server.go
index 23cb5eb..63cd060 100644
--- a/internal/api/server.go
+++ b/internal/api/server.go
@@ -150,6 +150,9 @@ func (s *Server) routesStatic() {
 	staticHandler := http.FileServer(s.staticFS)
 	s.mux.Handle("/css/", staticHandler)
 	s.mux.Handle("/js/", staticHandler)
+	s.mux.Handle("/logo.svg", staticHandler)
+	s.mux.Handle("/favicon.ico", staticHandler)
+	s.mux.Handle("/favicon.svg", staticHandler)
 }
 
 // routesHTML wires the SPA HTML page routes.
diff --git a/logo.svg b/logo.svg
new file mode 100644
index 0000000..068b873
--- /dev/null
+++ b/logo.svg
@@ -0,0 +1,60 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600" role="img" aria-labelledby="title desc">
+  <title id="title">Player media software logo</title>
+  <desc id="desc">A rounded gradient app icon with a play triangle and landscape motif, followed by the word Player.</desc>
+
+  <defs>
+    <linearGradient id="iconGradient" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0A7CFF"/>
+      <stop offset="48%" stop-color="#4B67FF"/>
+      <stop offset="100%" stop-color="#8D45F7"/>
+    </linearGradient>
+
+    <linearGradient id="hillDark" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#4A2AD9"/>
+      <stop offset="100%" stop-color="#6539E8"/>
+    </linearGradient>
+
+    <linearGradient id="hillLight" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#9D72FF"/>
+      <stop offset="100%" stop-color="#C091FF"/>
+    </linearGradient>
+
+    <clipPath id="iconClip">
+      <rect x="90" y="170" width="330" height="260" rx="58" ry="58"/>
+    </clipPath>
+
+    <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="14" stdDeviation="18" flood-color="#132044" flood-opacity="0.10"/>
+    </filter>
+  </defs>
+
+  <!-- Icon -->
+  <g filter="url(#softShadow)">
+    <rect x="90" y="170" width="330" height="260" rx="58" ry="58" fill="url(#iconGradient)"/>
+
+    <g clip-path="url(#iconClip)">
+      <!-- Dark foreground hill -->
+      <path d="M70 420 C110 365 145 350 185 384 L315 500 L70 500 Z" fill="url(#hillDark)" opacity="0.92"/>
+
+      <!-- Light background hill -->
+      <path d="M210 430 C255 382 292 360 340 398 L455 500 L210 500 Z" fill="url(#hillLight)" opacity="0.72"/>
+
+      <!-- Gentle purple wash near bottom -->
+      <path d="M90 390 C175 350 260 388 420 340 L420 500 L90 500 Z" fill="#6E42EA" opacity="0.24"/>
+    </g>
+
+    <!-- Play triangle -->
+    <path d="M200 236 L200 364 Q200 384 218 374 L318 311 Q337 300 318 289 L218 226 Q200 216 200 236 Z" fill="#FFFFFF"/>
+
+    <!-- Photo sun/dot -->
+    <circle cx="365" cy="335" r="26" fill="#FFFFFF" opacity="0.98"/>
+  </g>
+
+  <!-- Wordmark -->
+  <text x="480" y="352"
+        font-family="Inter, Avenir Next, Nunito Sans, Segoe UI, Helvetica, Arial, sans-serif"
+        font-size="148"
+        font-weight="800"
+        letter-spacing="-5"
+        fill="#071126">Player</text>
+</svg>
diff --git a/web/css/login.css b/web/css/login.css
index a32ebd8..086e54c 100644
--- a/web/css/login.css
+++ b/web/css/login.css
@@ -25,3 +25,9 @@
   padding: 1.25rem 1.25rem 1rem;
 }
 .login-form .btn { width: 100%; margin-top: 0.5rem; }
+
+.login-logo {
+  width: 4rem;
+  height: auto;
+  margin-bottom: 0.5rem;
+}
diff --git a/web/favicon.ico b/web/favicon.ico
new file mode 100644
index 0000000..16f3950
Binary files /dev/null and b/web/favicon.ico differ
diff --git a/web/login.html b/web/login.html
index 970a004..66a7c9d 100644
--- a/web/login.html
+++ b/web/login.html
@@ -10,6 +10,7 @@
 </head>
 <body>
 <div class="login-container" role="main">
+  <img src="/logo.svg" alt="Player logo" class="login-logo">
   <h1>Player</h1>
   <form id="login-form" class="login-form" novalidate>
     <label for="username">Username</label>
diff --git a/web/logo.svg b/web/logo.svg
new file mode 100644
index 0000000..068b873
--- /dev/null
+++ b/web/logo.svg
@@ -0,0 +1,60 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600" role="img" aria-labelledby="title desc">
+  <title id="title">Player media software logo</title>
+  <desc id="desc">A rounded gradient app icon with a play triangle and landscape motif, followed by the word Player.</desc>
+
+  <defs>
+    <linearGradient id="iconGradient" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0A7CFF"/>
+      <stop offset="48%" stop-color="#4B67FF"/>
+      <stop offset="100%" stop-color="#8D45F7"/>
+    </linearGradient>
+
+    <linearGradient id="hillDark" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#4A2AD9"/>
+      <stop offset="100%" stop-color="#6539E8"/>
+    </linearGradient>
+
+    <linearGradient id="hillLight" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#9D72FF"/>
+      <stop offset="100%" stop-color="#C091FF"/>
+    </linearGradient>
+
+    <clipPath id="iconClip">
+      <rect x="90" y="170" width="330" height="260" rx="58" ry="58"/>
+    </clipPath>
+
+    <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="14" stdDeviation="18" flood-color="#132044" flood-opacity="0.10"/>
+    </filter>
+  </defs>
+
+  <!-- Icon -->
+  <g filter="url(#softShadow)">
+    <rect x="90" y="170" width="330" height="260" rx="58" ry="58" fill="url(#iconGradient)"/>
+
+    <g clip-path="url(#iconClip)">
+      <!-- Dark foreground hill -->
+      <path d="M70 420 C110 365 145 350 185 384 L315 500 L70 500 Z" fill="url(#hillDark)" opacity="0.92"/>
+
+      <!-- Light background hill -->
+      <path d="M210 430 C255 382 292 360 340 398 L455 500 L210 500 Z" fill="url(#hillLight)" opacity="0.72"/>
+
+      <!-- Gentle purple wash near bottom -->
+      <path d="M90 390 C175 350 260 388 420 340 L420 500 L90 500 Z" fill="#6E42EA" opacity="0.24"/>
+    </g>
+
+    <!-- Play triangle -->
+    <path d="M200 236 L200 364 Q200 384 218 374 L318 311 Q337 300 318 289 L218 226 Q200 216 200 236 Z" fill="#FFFFFF"/>
+
+    <!-- Photo sun/dot -->
+    <circle cx="365" cy="335" r="26" fill="#FFFFFF" opacity="0.98"/>
+  </g>
+
+  <!-- Wordmark -->
+  <text x="480" y="352"
+        font-family="Inter, Avenir Next, Nunito Sans, Segoe UI, Helvetica, Arial, sans-serif"
+        font-size="148"
+        font-weight="800"
+        letter-spacing="-5"
+        fill="#071126">Player</text>
+</svg>
-- 
cgit v1.2.3