CyberMind-FR
0d6aaa1111
- 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>
97 lines
4.1 KiB
HTML
97 lines
4.1 KiB
HTML
<!-- Module Kits Browser -->
|
||
<section class="panel">
|
||
<div class="panel-head">
|
||
<div>
|
||
<h2>📦 Module Kits</h2>
|
||
<p>Curated bundles of modules for specific use cases</p>
|
||
</div>
|
||
<button class="btn primary" disabled>➕ Create Kit</button>
|
||
</div>
|
||
|
||
<!-- Category Filters -->
|
||
<div class="tag-row" style="margin-bottom: 1.5rem;">
|
||
<button class="chip" :class="{ 'chip-active': !category }" @click="category = null">
|
||
All Kits
|
||
</button>
|
||
<button class="chip" :class="{ 'chip-active': category === 'security' }" @click="category = 'security'">
|
||
🛡️ Security
|
||
</button>
|
||
<button class="chip" :class="{ 'chip-active': category === 'networking' }" @click="category = 'networking'">
|
||
🌐 Networking
|
||
</button>
|
||
<button class="chip" :class="{ 'chip-active': category === 'automation' }" @click="category = 'automation'">
|
||
🤖 Automation
|
||
</button>
|
||
<button class="chip" :class="{ 'chip-active': category === 'media' }" @click="category = 'media'">
|
||
🎬 Media
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Module Kits Grid -->
|
||
<div class="kit-grid">
|
||
{% for kit in module_kits %}
|
||
<template x-if="!category || category === '{{ kit.category }}'">
|
||
<div class="kit-card">
|
||
<div class="kit-header">
|
||
<span class="kit-emoji">{{ kit.emoji }}</span>
|
||
<div style="flex: 1;">
|
||
<h3>{{ kit.name }}</h3>
|
||
<p class="muted" style="font-size: 0.85rem;">v{{ kit.version }} by {{ kit.author }}</p>
|
||
</div>
|
||
{% if kit.verified %}
|
||
<span class="pill pill-stable" style="font-size: 0.75rem;">✓ Verified</span>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="card-body" style="padding: 1rem 0;">
|
||
<p style="margin-bottom: 0.75rem;">{{ kit.description }}</p>
|
||
|
||
<div class="kit-stats" style="display: flex; gap: 1rem; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.75rem;">
|
||
<span>⭐ {{ kit.rating }}</span>
|
||
<span>⬇️ {{ kit.downloads }}</span>
|
||
<span>📦 {{ kit.modules|length }} modules</span>
|
||
</div>
|
||
|
||
<div class="kit-modules-count">
|
||
<strong>Includes:</strong>
|
||
<ul style="margin-top: 0.5rem; margin-left: 1.5rem; font-size: 0.85rem;">
|
||
{% for module_id in kit.modules[:3] %}
|
||
<li>{{ module_id }}</li>
|
||
{% endfor %}
|
||
{% if kit.modules|length > 3 %}
|
||
<li class="muted">... and {{ kit.modules|length - 3 }} more</li>
|
||
{% endif %}
|
||
</ul>
|
||
</div>
|
||
|
||
{% if kit.tags %}
|
||
<div class="tag-row" style="margin-top: 0.75rem;">
|
||
{% for tag in kit.tags %}
|
||
<span class="chip small">#{{ tag }}</span>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="kit-actions">
|
||
<button class="btn primary small"
|
||
hx-post="/workspace/kits/{{ kit.id }}/install"
|
||
hx-target="#kit-result-{{ kit.id }}"
|
||
hx-swap="innerHTML">
|
||
⬇️ Install
|
||
</button>
|
||
<button class="btn ghost small" disabled>ℹ️ Details</button>
|
||
</div>
|
||
<div id="kit-result-{{ kit.id }}"></div>
|
||
</div>
|
||
</template>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
{% if not module_kits %}
|
||
<div style="text-align: center; padding: 3rem; color: var(--text-muted);">
|
||
<p>No module kits available. Check back later for curated module bundles!</p>
|
||
</div>
|
||
{% endif %}
|
||
</section>
|