secubox-openwrt/secubox-tools/webui/templates/profiles.html
CyberMind-FR 0d6aaa1111 feat(webui): add Project Hub workspace and remove Command Center glow effects
- Add complete Project Hub & Workspace Interface implementation
  - New data models: Project, ModuleKit, Workspace
  - 3 fixture projects (cybermind.fr, cybermood.eu, secubox-c3)
  - 4 module kits (Security, Network, Automation, Media)
  - Workspace routes with project switching and kit installation
  - 4 workspace tabs: Overview, Module Kits, Devices, Composer
  - New navigation item: Workspace (7th section)

- Remove all glowing effects from UI
  - Remove Command Center widget glow and backdrop blur
  - Remove device status indicator glow
  - Remove toggle button glow effects

- Extend DataStore with 13 new methods for workspace management
- Add 270+ lines of workspace-specific CSS with responsive layouts
- Create workspace templates and result partials

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-03 08:10:22 +01:00

109 lines
4.7 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% extends theme_template %}
{% block title %}Profiles - SecuBox WebUI{% endblock %}
{% block content %}
<section class="panel">
<div class="panel-head">
<div>
<h2>📦 Configuration Profiles</h2>
<p>Bundled module configurations and preset collections</p>
</div>
<button class="btn primary" disabled> Create Profile</button>
</div>
<!-- Profiles List -->
{% if profiles %}
<div style="display: flex; flex-direction: column; gap: 1rem;">
{% for profile in profiles %}
<div class="card {% if profile.active %}card-highlighted{% endif %}"
style="border-left: 4px solid {% if profile.active %}var(--accent){% else %}var(--border){% endif %};">
<div class="card-header" style="display: flex; justify-content: space-between; align-items: start;">
<div>
<h3>{{ profile.emoji }} {{ profile.name }}</h3>
<p class="muted">by {{ profile.author }}</p>
</div>
<div style="display: flex; gap: 0.5rem; align-items: center;">
{% if profile.active %}
<span class="pill pill-stable">✓ Active</span>
{% endif %}
<span class="muted" style="font-size: 0.9rem;">Priority: {{ profile.priority }}</span>
</div>
</div>
<div class="card-body">
<p>{{ profile.description }}</p>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
<div>
<strong>Modules ({{ profile.modules|length }})</strong>
{% if profile.modules %}
<ul style="margin-top: 0.5rem; margin-left: 1.5rem;">
{% for module_id in profile.modules[:5] %}
<li>{{ module_id }}</li>
{% endfor %}
{% if profile.modules|length > 5 %}
<li class="muted">... and {{ profile.modules|length - 5 }} more</li>
{% endif %}
</ul>
{% endif %}
</div>
<div>
<strong>Presets ({{ profile.presets|length }})</strong>
{% if profile.presets %}
<ul style="margin-top: 0.5rem; margin-left: 1.5rem;">
{% for preset_id in profile.presets[:5] %}
<li>{{ preset_id }}</li>
{% endfor %}
{% if profile.presets|length > 5 %}
<li class="muted">... and {{ profile.presets|length - 5 }} more</li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
{% if profile.tags %}
<div class="tag-row" style="margin-top: 1rem;">
{% for tag in profile.tags %}
<span class="chip small">#{{ tag }}</span>
{% endfor %}
</div>
{% endif %}
</div>
<div class="card-footer" style="display: flex; gap: 0.5rem;">
{% if profile.active %}
<button class="btn ghost small"
hx-post="/profiles/{{ profile.id }}/reload"
hx-target="#profile-result-{{ profile.id }}"
hx-swap="innerHTML">
🔄 Reload
</button>
<button class="btn danger small"
hx-post="/profiles/{{ profile.id }}/deactivate"
hx-target="#profile-result-{{ profile.id }}"
hx-confirm="Deactivate this profile?">
⏸️ Deactivate
</button>
{% else %}
<button class="btn primary small"
hx-post="/profiles/{{ profile.id }}/activate"
hx-target="#profile-result-{{ profile.id }}">
▶️ Activate
</button>
{% endif %}
<button class="btn ghost small" disabled>⚙️ Configure</button>
</div>
<div id="profile-result-{{ profile.id }}"></div>
</div>
{% endfor %}
</div>
{% else %}
<div style="text-align: center; padding: 3rem; color: var(--text-muted);">
<p>No profiles configured. Create a profile to bundle modules and presets together.</p>
</div>
{% endif %}
</section>
{% endblock %}