- Add Jinja2 templates with data-testid attributes for testing - Create light/dark themes based on Gitea color scheme - Add theme switching with localStorage persistence - Create base CSS, components, and layout styles - Add mock web routes for UI demonstration - Register web router and static files in main.py - Add data-testid requirements to AGENTS.md - Install jinja2 dependency
36 lines
1.9 KiB
HTML
36 lines
1.9 KiB
HTML
<header class="site-header" data-testid="site-header">
|
|
<div class="container" data-testid="header-container">
|
|
<a href="/" class="site-logo" data-testid="nav-logo">
|
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="logo-icon">
|
|
<rect width="32" height="32" rx="6" fill="var(--color-primary)"/>
|
|
<path d="M8 12h16M8 16h12M8 20h8" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
<span data-testid="logo-text">Blog</span>
|
|
</a>
|
|
|
|
{% include "partials/nav.html" %}
|
|
|
|
<div class="header-actions" data-testid="header-actions">
|
|
<button
|
|
type="button"
|
|
class="theme-toggle"
|
|
data-testid="theme-toggle"
|
|
aria-label="Toggle theme"
|
|
title="Toggle theme"
|
|
>
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="theme-light-icon" style="display: none;">
|
|
<path d="M10 2v2M10 16v2M4.22 4.22l1.42 1.42M14.36 14.36l1.42 1.42M2 10h2M16 10h2M4.22 15.78l1.42-1.42M14.36 5.64l1.42-1.42" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
<circle cx="10" cy="10" r="4" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="theme-dark-icon" style="display: none;">
|
|
<path d="M18 10.79A9 9 0 1 1 9.21 2 7 7 0 0 0 18 10.79z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<a href="/posts/new" class="btn btn-primary btn-sm" data-testid="btn-create-post">
|
|
New Post
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|