Add authentication, public profile, and infinite scroll

- Implement session-based auth with argon2 password hashing
- Add login form and logout button in nav
- Create public /tyler profile page with curated stats
- Implement infinite scroll for film lists (load 20 at a time)
- Add lazy loading for poster images
- Fix profile page CSS to use dark theme variables
- Use consistent star character (✦) across all pages
- Add /films/partial endpoint for pagination

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

1 files changed, 60 insertions, 0 deletions

diff --git a/templates/login.html b/templates/login.html
new file mode 100644
index 0000000..c164531
--- /dev/null
+++ b/templates/login.html
@@ -0,0 +1,60 @@
+{% extends "base.html" %}
+
+{% block title %}Login - Lumière{% endblock %}
+
+{% block content %}
+<div style="max-width: 320px; margin: 60px auto; padding: 0 20px;">
+  <div style="text-align: center; margin-bottom: 40px;">
+    <h1 style="margin: 0; font-size: 32px; color: var(--text);">Lumière</h1>
+    <p style="color: var(--muted); margin: 8px 0 0 0;">Film Diary</p>
+  </div>
+
+  <form method="post" style="display: flex; flex-direction: column; gap: 16px;">
+    {% if error %}
+    <div style="
+      background: rgba(223, 110, 98, 0.1);
+      border: 1px solid rgba(223, 110, 98, 0.4);
+      color: #ffc7c0;
+      padding: 12px;
+      border-radius: 6px;
+      font-size: 14px;
+    ">{{ error }}</div>
+    {% endif %}
+
+    <div style="display: flex; flex-direction: column; gap: 6px;">
+      <label for="password" style="font-weight: 500; font-size: 14px; color: var(--text);">Password</label>
+      <input
+        type="password"
+        id="password"
+        name="password"
+        required
+        autofocus
+        style="
+          padding: 11px 12px;
+          border: 1px solid var(--line);
+          border-radius: 6px;
+          font-size: 16px;
+          background: #11100e;
+          color: var(--text);
+        "
+      />
+    </div>
+
+    <button
+      type="submit"
+      style="
+        padding: 11px 12px;
+        background: var(--accent);
+        color: #0e0a04;
+        border: none;
+        border-radius: 6px;
+        font-size: 16px;
+        font-weight: 800;
+        cursor: pointer;
+      "
+    >
+      Sign In
+    </button>
+  </form>
+</div>
+{% endblock %}