mish/evo-sync
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 5 Wiki Activity

Integrate Bootstrap 5 and Bootstrap Icons into UI

Browse Source 
- Add Bootstrap 5.3.3 + Icons via CDN to base.html
- Replace 315-line hand-written CSS with 35-line brand overrides
- Update all 13 templates with Bootstrap utility classes:
  - Responsive navbar with mobile hamburger menu
  - Consistent card-based layout for forms and profile
  - Proper button alignment with d-flex and d-grid utilities
  - List groups for data display (profile info)
  - Professional alerts and icons
- No backend changes, no build toolchain needed
- Responsive design works on mobile/tablet/desktop

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
mguschin
2026-03-05 21:05:30 +03:00
parent eea2d84260
commit bd0ff8f449
18 changed files with 486 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
web/templates/base.html
View File

@@ -4,40 +4,57 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}EvoSync{% endblock %}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<nav class="navbar">
<div class="container nav-content">
<a href="/" class="nav-logo">EvoSync</a>
<div class="nav-links">
{% if user %}
<a href="/profile">Личный кабинет</a>
<a href="/logout">Выход</a>
{% else %}
<a href="/login">Вход</a>
<a href="/register">Регистрация</a>
{% endif %}
<nav class="navbar navbar-expand-lg bg-white border-bottom border-2 brand-border">
<div class="container">
<a href="/" class="navbar-brand brand-logo">EvoSync</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
{% if user %}
<li class="nav-item">
<a href="/profile" class="nav-link"><i class="bi bi-person-circle me-1"></i>Личный кабинет</a>
</li>
<li class="nav-item">
<a href="/logout" class="nav-link text-muted">Выход</a>
</li>
{% else %}
<li class="nav-item">
<a href="/login" class="nav-link">Вход</a>
</li>
<li class="nav-item">
<a href="/register" class="nav-link">Регистрация</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<main class="container">
<main class="container py-4">
{% if errors %}
<div class="alert alert-error">
<div class="alert alert-danger">
{% for error in errors %}
<p>{{ error }}</p>
<p class="mb-1">{{ error }}</p>
{% endfor %}
</div>
{% endif %}
{% if success %}
<div class="alert alert-success">
<p>{{ success }}</p>
<p class="mb-0">{{ success }}</p>
</div>
{% endif %}
{% block content %}{% endblock %}
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>