style(design): migrate to DESIGN.md system

Full visual migration: Space Grotesk + DM Sans + JetBrains Mono fonts,
warm amber two-accent system (amber=state, blue=action), dark mode with
CSS vars + localStorage + FOUC prevention, mobile bottom nav (5 tabs),
full-width tables, error/skipped dot glow, ~13 hardcoded hex replaced
with CSS vars in 4 JS files, 5 new E2E tests.

Files: style.css (full rewrite), base.html (fonts, theme script, dark
toggle, bottom nav), settings.html (dark toggle card), dashboard.js,
logs.js, mappings.js, settings.js (color vars), 5 templates (bnav
active blocks), test_design_system_e2e.py (NEW).

Cache-bust: style.css?v=18, shared.js?v=14, dashboard.js?v=27,
logs.js?v=13, mappings.js?v=12, settings.js?v=8

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-03-27 11:36:07 +00:00
parent c5757b8322
commit a8292c2ef2
13 changed files with 550 additions and 183 deletions

View File

@@ -1,10 +1,23 @@
{% extends "base.html" %}
{% block title %}Setari - GoMag Import{% endblock %}
{% block nav_settings %}active{% endblock %}
{% block bnav_settings %}active{% endblock %}
{% block main_class %}constrained{% endblock %}
{% block content %}
<h4 class="mb-3">Setari</h4>
<!-- Dark mode toggle -->
<div class="theme-toggle-card">
<div>
<i class="bi bi-moon-fill me-2"></i>
<label for="settDarkMode">Mod intunecat</label>
</div>
<div class="form-check form-switch mb-0">
<input class="form-check-input" type="checkbox" role="switch" id="settDarkMode" style="width:2.5rem;height:1.25rem">
</div>
</div>
<div class="row g-3 mb-3">
<!-- GoMag API card -->
<div class="col-md-6">
@@ -233,5 +246,5 @@
{% endblock %}
{% block scripts %}
<script src="{{ request.scope.get('root_path', '') }}/static/js/settings.js?v=7"></script>
<script src="{{ request.scope.get('root_path', '') }}/static/js/settings.js?v=8"></script>
{% endblock %}