a0ae5f869e
- New CLI page at /cli with detailed usage and improved Quick Start card header - Add CLI link to navbars and small ‘Try the CLI’ CTAs on Home & Templates - Remove CLI modals and unused showCliModal() handler (keep_small_simple) - Self-host Bootstrap and Font Awesome; add OSI logo and GPL notice in footers - Dockerfile: verify vendor assets exist at build time - Minor a11y/contrast and heading-order cleanups (100 a11y)
412 lines
18 KiB
HTML
412 lines
18 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Templates - {{ app_name }}</title>
|
|
<link rel="icon" type="image/svg+xml" href="/static/img/favicon.svg" />
|
|
<link
|
|
rel="icon"
|
|
type="image/svg+xml"
|
|
sizes="16x16"
|
|
href="/static/img/favicon-16x16.svg"
|
|
/>
|
|
<link rel="alternate icon" href="/static/img/favicon.svg" />
|
|
<link rel="apple-touch-icon" href="/static/img/icon-192x192.svg" />
|
|
<link rel="manifest" href="/static/img/site.webmanifest" />
|
|
<meta name="theme-color" content="#0d6efd" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
|
<meta name="description" content="{{ app_name }} Templates — generate production-ready systemd unit files from curated templates." />
|
|
<meta name="apple-mobile-web-app-title" content="{{ app_name }}" />
|
|
<link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
|
|
<link rel="stylesheet" href="/static/vendor/fontawesome/css/all.min.css" />
|
|
<link href="/static/css/style.css" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/">
|
|
<i class="fas fa-cogs me-2"></i>{{ app_name }}
|
|
</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 me-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/editor">Editor</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="/templates"
|
|
>Templates</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/cli">CLI</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container py-4">
|
|
<!-- Header -->
|
|
<div class="row mb-4">
|
|
<div class="col-lg-8">
|
|
<h1 class="display-5 fw-bold mb-3">
|
|
<i class="fas fa-templates me-3"></i>Unit File Templates
|
|
</h1>
|
|
<p class="lead">
|
|
Choose from pre-built templates for common systemd unit
|
|
configurations. Each template provides a solid
|
|
foundation that you can customize for your specific
|
|
needs.
|
|
</p>
|
|
<div class="mt-2">
|
|
<a href="/cli" class="btn btn-outline-secondary btn-sm">
|
|
<i class="fas fa-terminal me-1"></i>Try the CLI
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 text-lg-end">
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="searchInput"
|
|
placeholder="Search templates..."
|
|
onkeyup="filterTemplates()"
|
|
/>
|
|
<button
|
|
class="btn btn-outline-secondary"
|
|
type="button"
|
|
onclick="clearSearch()" aria-label="Clear search"
|
|
>
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter Tabs -->
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<ul class="nav nav-pills nav-fill" id="categoryTabs">
|
|
<li class="nav-item">
|
|
<button
|
|
class="nav-link active"
|
|
onclick="filterByCategory('all')"
|
|
id="tab-all"
|
|
>
|
|
All Templates
|
|
<span
|
|
class="badge bg-secondary ms-2"
|
|
id="count-all"
|
|
>0</span
|
|
>
|
|
</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button
|
|
class="nav-link"
|
|
onclick="filterByCategory('Web Services')"
|
|
id="tab-web"
|
|
>
|
|
Web Services
|
|
<span
|
|
class="badge bg-secondary ms-2"
|
|
id="count-web"
|
|
>0</span
|
|
>
|
|
</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button
|
|
class="nav-link"
|
|
onclick="filterByCategory('Database Services')"
|
|
id="tab-database"
|
|
>
|
|
Database
|
|
<span
|
|
class="badge bg-secondary ms-2"
|
|
id="count-database"
|
|
>0</span
|
|
>
|
|
</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button
|
|
class="nav-link"
|
|
onclick="filterByCategory('System Maintenance')"
|
|
id="tab-maintenance"
|
|
>
|
|
Maintenance
|
|
<span
|
|
class="badge bg-secondary ms-2"
|
|
id="count-maintenance"
|
|
>0</span
|
|
>
|
|
</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button
|
|
class="nav-link"
|
|
onclick="filterByCategory('Container Services')"
|
|
id="tab-container"
|
|
>
|
|
Containers
|
|
<span
|
|
class="badge bg-secondary ms-2"
|
|
id="count-container"
|
|
>0</span
|
|
>
|
|
</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button
|
|
class="nav-link"
|
|
onclick="filterByCategory('Network Services')"
|
|
id="tab-network"
|
|
>
|
|
Network
|
|
<span
|
|
class="badge bg-secondary ms-2"
|
|
id="count-network"
|
|
>0</span
|
|
>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div id="loadingState" class="text-center py-5">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading templates...</span>
|
|
</div>
|
|
<p class="mt-3 text-muted">Loading templates...</p>
|
|
</div>
|
|
|
|
<!-- Templates Grid -->
|
|
<div id="templatesGrid" class="row g-4 d-none">
|
|
<!-- Templates will be populated here by JavaScript -->
|
|
</div>
|
|
|
|
<!-- No Results -->
|
|
<div id="noResults" class="text-center py-5 d-none">
|
|
<i class="fas fa-search fa-3x text-muted mb-3"></i>
|
|
<h4>No templates found</h4>
|
|
<p class="text-muted">
|
|
Try adjusting your search criteria or browse all templates.
|
|
</p>
|
|
<button class="btn btn-primary" onclick="clearSearch()">
|
|
Show All Templates
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Template Detail Modal -->
|
|
<div class="modal fade" id="templateModal" tabindex="-1">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="templateModalTitle">
|
|
<i class="fas fa-file-code me-2"></i>Template
|
|
Details
|
|
</h5>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<!-- Template Info -->
|
|
<div class="col-lg-6">
|
|
<div class="mb-4">
|
|
<h6 class="text-muted mb-3">
|
|
Template Information
|
|
</h6>
|
|
<div id="templateInfo">
|
|
<!-- Template info will be populated here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Parameters Form -->
|
|
<div class="mb-4">
|
|
<h6 class="text-muted mb-3">
|
|
Configuration Parameters
|
|
</h6>
|
|
<form id="templateForm">
|
|
<div id="templateParameters">
|
|
<!-- Parameters will be populated here -->
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preview -->
|
|
<div class="col-lg-6">
|
|
<div class="mb-4">
|
|
<h6 class="text-muted mb-3">Preview</h6>
|
|
<div class="card bg-dark text-light">
|
|
<div
|
|
class="card-header d-flex justify-content-between align-items-center"
|
|
>
|
|
<span
|
|
><i
|
|
class="fas fa-file-code me-2"
|
|
></i
|
|
><span id="previewFilename"
|
|
>unit.service</span
|
|
></span
|
|
>
|
|
<button
|
|
class="btn btn-outline-light btn-sm"
|
|
onclick="copyPreviewToClipboard()"
|
|
title="Copy to clipboard"
|
|
>
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<pre
|
|
id="templatePreview"
|
|
class="mb-0"
|
|
style="
|
|
font-size: 0.875rem;
|
|
line-height: 1.4;
|
|
"
|
|
><code># Configure parameters to see preview</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Validation Results -->
|
|
<div id="validationResults" class="d-none">
|
|
<h6 class="text-muted mb-3">Validation</h6>
|
|
<div id="validationOutput"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
Close
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-success"
|
|
onclick="validateTemplate()"
|
|
id="validateBtn"
|
|
>
|
|
<i class="fas fa-check me-2"></i>Validate
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
onclick="generateAndDownload()"
|
|
id="generateBtn"
|
|
>
|
|
<i class="fas fa-download me-2"></i>Generate &
|
|
Download
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-info"
|
|
onclick="openInEditor()"
|
|
id="editorBtn"
|
|
>
|
|
<i class="fas fa-edit me-2"></i>Open in Editor
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Generate Status Modal -->
|
|
<div class="modal fade" id="generateModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-cog fa-spin me-2"></i>Generating
|
|
Unit File
|
|
</h5>
|
|
</div>
|
|
<div class="modal-body text-center">
|
|
<div
|
|
class="spinner-border text-primary mb-3"
|
|
role="status"
|
|
>
|
|
<span class="visually-hidden">Generating...</span>
|
|
</div>
|
|
<p class="mb-0">
|
|
Please wait while we generate your unit file...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="bg-dark text-light py-4 mt-5">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<p class="fw-bold mb-0"><i class="fas fa-cogs me-2"></i>{{ app_name }}</p>
|
|
<p class="text-muted small">{{ app_description }}.</p>
|
|
</div>
|
|
<div class="col-md-6 text-md-end">
|
|
<div class="d-flex justify-content-md-end gap-3">
|
|
<a
|
|
href="{{ api_docs_url }}"
|
|
class="text-light text-decoration-none"
|
|
>
|
|
<i class="fas fa-book me-1"></i>API Docs
|
|
</a>
|
|
<a
|
|
href="{{ github_url }}"
|
|
class="text-light text-decoration-none"
|
|
>
|
|
<i class="fab fa-github me-1"></i>GitHub
|
|
</a>
|
|
</div>
|
|
<div class="mt-2 small">
|
|
<span class="me-2">
|
|
<i class="fas fa-code-branch me-1"></i>Open Source
|
|
<span class="badge bg-success ms-2">OSI</span>
|
|
</span>
|
|
<span>
|
|
Licensed under
|
|
<a href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank" rel="noopener" class="text-decoration-underline text-light">GPL-3.0-or-later</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
|
|
<script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/static/js/main.js"></script>
|
|
<script src="/static/js/templates.js"></script>
|
|
</body>
|
|
</html>
|