115e344157
- Created SVG favicons in multiple sizes (16x16, 32x32, 192x192, 512x512) - Added web app manifest for PWA functionality - Implemented Apple Touch Icon support for iOS devices - Added theme color and mobile web app meta tags - Used gear/cogs design matching UnitForge branding with blue gradient - Supports modern browsers with SVG and fallback compatibility - Enables 'Add to Home Screen' functionality on mobile devices All favicon files use the same blue gradient (#0d6efd to #0b5ed7) as the main UI theme for consistent branding.
247 lines
12 KiB
HTML
247 lines
12 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 - UnitForge</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="apple-mobile-web-app-status-bar-style" content="default">
|
|
<meta name="apple-mobile-web-app-title" content="UnitForge">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<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>UnitForge
|
|
</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>
|
|
</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 text-muted">
|
|
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>
|
|
<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()">
|
|
<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">
|
|
<h6></h6><i class="fas fa-cogs me-2"></i>UnitForge</h6>
|
|
<p class="text-muted small">
|
|
A comprehensive tool for creating and managing systemd unit files.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-6 text-md-end">
|
|
<div class="d-flex justify-content-md-end gap-3">
|
|
<a href="/api/docs" class="text-light text-decoration-none">
|
|
<i class="fas fa-book me-1"></i>API Docs
|
|
</a>
|
|
<a href="https://github.com/unitforge/unitforge" class="text-light text-decoration-none">
|
|
<i class="fab fa-github me-1"></i>GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/static/js/main.js"></script>
|
|
<script src="/static/js/templates.js"></script>
|
|
</body>
|
|
</html>
|