secubox-openwrt/secubox-tools/webui/templates/partials/template_preview.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

84 lines
3.0 KiB
HTML

<div class="modal-overlay" x-data="{ show: true }" x-show="show" @click.self="show = false; document.getElementById('modal-container').innerHTML = ''">
<div class="modal-content" style="max-width: 800px; max-height: 80vh; overflow-y: auto;">
<div class="modal-header">
<h3>{{ template.emoji }} {{ template.name }}</h3>
<button @click="show = false; document.getElementById('modal-container').innerHTML = ''" class="btn ghost small"></button>
</div>
<div class="modal-body">
<p><strong>Description:</strong> {{ template.description }}</p>
<p><strong>Type:</strong> {{ template.template_type }}</p>
{% if template.required_modules %}
<div style="margin-top: 1rem;">
<strong>Required Modules:</strong>
<div style="margin-top: 0.5rem;">
{% for module in template.required_modules %}
<span class="chip small">{{ module }}</span>
{% endfor %}
</div>
</div>
{% endif %}
<div style="margin-top: 1rem;">
<strong>Template Content:</strong>
<pre style="margin-top: 0.5rem; padding: 1rem; background: var(--bg-secondary); border-radius: 4px; overflow-x: auto; font-size: 0.85rem; font-family: monospace;">{{ template.content }}</pre>
</div>
{% if template.variables %}
<div style="margin-top: 1rem;">
<strong>Default Variables:</strong>
<pre style="margin-top: 0.5rem; padding: 0.5rem; background: var(--bg-secondary); border-radius: 4px; overflow-x: auto; font-size: 0.85rem;">{{ template.variables|tojson(indent=2) }}</pre>
</div>
{% endif %}
{% if template.examples %}
<div style="margin-top: 1rem;">
<strong>Examples:</strong>
{% for example in template.examples %}
<div style="margin-top: 0.5rem; padding: 0.75rem; background: var(--bg-secondary); border-radius: 4px;">
<div style="font-weight: 500;">{{ example.name }}</div>
<pre style="margin-top: 0.25rem; font-size: 0.85rem;">{{ example.variables|tojson(indent=2) }}</pre>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
<style>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
background: var(--bg);
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.modal-body {
line-height: 1.6;
}
</style>