feat: replace hardcoded values with environment variables in templates
- Replace hardcoded GitHub URLs with {{ github_url }} template variable
- Use {{ app_name }} for application title and branding
- Add {{ app_description }} for dynamic descriptions
- Support {{ api_docs_url }} for API documentation links
- Improve HTML formatting and structure
- Enable full customization through environment variables
This commit is contained in:
William Valentin
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Editor - UnitForge</title>
|
||||
<title>Editor - {{ 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">
|
||||
@@ -12,7 +12,7 @@
|
||||
<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">
|
||||
<meta name="apple-mobile-web-app-title" content="{{ app_name }}">
|
||||
<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.5.1/css/all.min.css" rel="stylesheet">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.0.1/codemirror.min.css" rel="stylesheet">
|
||||
@@ -23,7 +23,7 @@
|
||||
<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
|
||||
<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>
|
||||
|
||||
@@ -1,80 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>UnitForge - Systemd Unit File Creator</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.5.1/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 active" 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" href="/templates">Templates</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/api/docs" target="_blank">
|
||||
<i class="fas fa-book me-1"></i>API Docs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="hero-section bg-light py-5">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<h1 class="display-4 fw-bold mb-3">UnitForge</h1>
|
||||
<p class="lead mb-4">
|
||||
Create, validate, and manage systemd unit files with ease.
|
||||
Whether you're deploying web services, scheduling tasks, or managing containers,
|
||||
UnitForge provides the tools you need.
|
||||
</p>
|
||||
<div class="d-flex gap-3">
|
||||
<a href="/editor" class="btn btn-primary btn-lg">
|
||||
<i class="fas fa-edit me-2"></i>Start Creating
|
||||
</a>
|
||||
<a href="/templates" class="btn btn-outline-primary btn-lg">
|
||||
<i class="fas fa-templates me-2"></i>Browse Templates
|
||||
</a>
|
||||
</div>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{{ app_name }} - Systemd Unit File Creator</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="{{ app_name }}" />
|
||||
<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.5.1/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>{{ 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 active" 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" href="/templates">Templates</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link"
|
||||
href="{{ api_docs_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="fas fa-book me-1"></i>API Docs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="code-preview bg-dark text-light p-4 rounded">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<i class="fas fa-file-code me-2"></i>
|
||||
<span class="fw-bold">myapp.service</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="hero-section bg-light py-5">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<h1 class="display-4 fw-bold mb-3">{{ app_name }}</h1>
|
||||
<p class="lead mb-4">
|
||||
{{ app_description }}. Whether you're deploying web
|
||||
services, scheduling tasks, or managing containers,
|
||||
{{ app_name }} provides the tools you need.
|
||||
</p>
|
||||
<div class="d-flex gap-3">
|
||||
<a href="/editor" class="btn btn-primary btn-lg">
|
||||
<i class="fas fa-edit me-2"></i>Start Creating
|
||||
</a>
|
||||
<a
|
||||
href="/templates"
|
||||
class="btn btn-outline-primary btn-lg"
|
||||
>
|
||||
<i class="fas fa-templates me-2"></i>Browse
|
||||
Templates
|
||||
</a>
|
||||
</div>
|
||||
<pre class="mb-0"><code>[Unit]
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div
|
||||
class="code-preview bg-dark text-light p-4 rounded"
|
||||
>
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<i class="fas fa-file-code me-2"></i>
|
||||
<span class="fw-bold">myapp.service</span>
|
||||
</div>
|
||||
<pre class="mb-0"><code>[Unit]
|
||||
Description=My Web Application
|
||||
After=network.target
|
||||
|
||||
@@ -88,182 +114,235 @@ WorkingDirectory=/opt/myapp
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container my-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto text-center mb-5">
|
||||
<h2 class="h1 mb-3">Choose Your Approach</h2>
|
||||
<p class="lead text-muted">
|
||||
UnitForge offers multiple ways to create systemd unit files,
|
||||
from quick templates to detailed manual editing.
|
||||
</p>
|
||||
<div class="container my-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto text-center mb-5">
|
||||
<h2 class="h1 mb-3">Choose Your Approach</h2>
|
||||
<p class="lead text-muted">
|
||||
{{ app_name }} offers multiple ways to create systemd
|
||||
unit files, from quick templates to detailed manual
|
||||
editing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 mb-5">
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 border-0 shadow-sm hover-lift">
|
||||
<div class="card-body text-center">
|
||||
<div
|
||||
class="feature-icon bg-primary bg-gradient rounded-circle mx-auto mb-3"
|
||||
>
|
||||
<i class="fas fa-magic text-white"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Quick Templates</h5>
|
||||
<p class="card-text text-muted">
|
||||
Use pre-built templates for common services like
|
||||
web apps, databases, and containers.
|
||||
</p>
|
||||
<a
|
||||
href="/templates"
|
||||
class="btn btn-outline-primary"
|
||||
>
|
||||
Browse Templates
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 border-0 shadow-sm hover-lift">
|
||||
<div class="card-body text-center">
|
||||
<div
|
||||
class="feature-icon bg-success bg-gradient rounded-circle mx-auto mb-3"
|
||||
>
|
||||
<i class="fas fa-edit text-white"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Visual Editor</h5>
|
||||
<p class="card-text text-muted">
|
||||
Create and edit unit files with our intuitive
|
||||
form-based editor with real-time validation.
|
||||
</p>
|
||||
<a href="/editor" class="btn btn-outline-success">
|
||||
Open Editor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 border-0 shadow-sm hover-lift">
|
||||
<div class="card-body text-center">
|
||||
<div
|
||||
class="feature-icon bg-warning bg-gradient rounded-circle mx-auto mb-3"
|
||||
>
|
||||
<i class="fas fa-check-circle text-white"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Validation</h5>
|
||||
<p class="card-text text-muted">
|
||||
Validate existing unit files and get detailed
|
||||
feedback on syntax and best practices.
|
||||
</p>
|
||||
<button
|
||||
class="btn btn-outline-warning"
|
||||
onclick="showUploadModal()"
|
||||
>
|
||||
Validate File
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 border-0 shadow-sm hover-lift">
|
||||
<div class="card-body text-center">
|
||||
<div
|
||||
class="feature-icon bg-info bg-gradient rounded-circle mx-auto mb-3"
|
||||
>
|
||||
<i class="fas fa-terminal text-white"></i>
|
||||
</div>
|
||||
<h5 class="card-title">CLI Tool</h5>
|
||||
<p class="card-text text-muted">
|
||||
Use the command-line interface for automation
|
||||
and integration with your development workflow.
|
||||
</p>
|
||||
<button
|
||||
class="btn btn-outline-info"
|
||||
onclick="showCliModal()"
|
||||
>
|
||||
View CLI
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="text-center mb-4">
|
||||
<h3>Supported Unit Types</h3>
|
||||
<p class="text-muted">
|
||||
{{ app_name }} supports all major systemd unit types
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="unit-type-badge">
|
||||
<i class="fas fa-play-circle me-2"></i>Service
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="unit-type-badge">
|
||||
<i class="fas fa-clock me-2"></i>Timer
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="unit-type-badge">
|
||||
<i class="fas fa-plug me-2"></i>Socket
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="unit-type-badge">
|
||||
<i class="fas fa-hdd me-2"></i>Mount
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="unit-type-badge">
|
||||
<i class="fas fa-bullseye me-2"></i>Target
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="unit-type-badge">
|
||||
<i class="fas fa-folder me-2"></i>Path
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 mb-5">
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 border-0 shadow-sm hover-lift">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-primary bg-gradient rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-magic text-white"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Quick Templates</h5>
|
||||
<p class="card-text text-muted">
|
||||
Use pre-built templates for common services like web apps, databases, and containers.
|
||||
</p>
|
||||
<a href="/templates" class="btn btn-outline-primary">
|
||||
Browse Templates
|
||||
</a>
|
||||
<!-- Upload Modal -->
|
||||
<div class="modal fade" id="uploadModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">
|
||||
<i class="fas fa-upload me-2"></i>Validate Unit File
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 border-0 shadow-sm hover-lift">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-success bg-gradient rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-edit text-white"></i>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label for="fileInput" class="form-label"
|
||||
>Select unit file to validate:</label
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
class="form-control"
|
||||
id="fileInput"
|
||||
accept=".service,.timer,.socket,.mount,.target,.path"
|
||||
/>
|
||||
</div>
|
||||
<div id="uploadResults" class="d-none">
|
||||
<h6>Validation Results:</h6>
|
||||
<div id="validationOutput"></div>
|
||||
</div>
|
||||
<h5 class="card-title">Visual Editor</h5>
|
||||
<p class="card-text text-muted">
|
||||
Create and edit unit files with our intuitive form-based editor with real-time validation.
|
||||
</p>
|
||||
<a href="/editor" class="btn btn-outline-success">
|
||||
Open Editor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 border-0 shadow-sm hover-lift">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-warning bg-gradient rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-check-circle text-white"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Validation</h5>
|
||||
<p class="card-text text-muted">
|
||||
Validate existing unit files and get detailed feedback on syntax and best practices.
|
||||
</p>
|
||||
<button class="btn btn-outline-warning" onclick="showUploadModal()">
|
||||
Validate File
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 border-0 shadow-sm hover-lift">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-info bg-gradient rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-terminal text-white"></i>
|
||||
</div>
|
||||
<h5 class="card-title">CLI Tool</h5>
|
||||
<p class="card-text text-muted">
|
||||
Use the command-line interface for automation and integration with your development workflow.
|
||||
</p>
|
||||
<button class="btn btn-outline-info" onclick="showCliModal()">
|
||||
View CLI
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
onclick="validateFile()"
|
||||
>
|
||||
<i class="fas fa-check me-2"></i>Validate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="text-center mb-4">
|
||||
<h3></h3>Supported Unit Types</h3>
|
||||
<p class="text-muted">UnitForge supports all major systemd unit types</p>
|
||||
</div>
|
||||
<!-- CLI Modal -->
|
||||
<div class="modal fade" id="cliModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">
|
||||
<i class="fas fa-terminal me-2"></i>CLI Usage
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h6>Installation:</h6>
|
||||
<pre
|
||||
class="bg-dark text-light p-3 rounded"
|
||||
><code>pip install -e .</code></pre>
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="unit-type-badge">
|
||||
<i class="fas fa-play-circle me-2"></i>Service
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="unit-type-badge">
|
||||
<i class="fas fa-clock me-2"></i>Timer
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="unit-type-badge">
|
||||
<i class="fas fa-plug me-2"></i>Socket
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="unit-type-badge">
|
||||
<i class="fas fa-hdd me-2"></i>Mount
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="unit-type-badge">
|
||||
<i class="fas fa-bullseye me-2"></i>Target
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="unit-type-badge">
|
||||
<i class="fas fa-folder me-2"></i>Path
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upload Modal -->
|
||||
<div class="modal fade" id="uploadModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">
|
||||
<i class="fas fa-upload me-2"></i>Validate Unit File
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label for="fileInput" class="form-label">Select unit file to validate:</label>
|
||||
<input type="file" class="form-control" id="fileInput" accept=".service,.timer,.socket,.mount,.target,.path">
|
||||
</div>
|
||||
<div id="uploadResults" class="d-none">
|
||||
<h6>Validation Results:</h6>
|
||||
<div id="validationOutput"></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-primary" onclick="validateFile()">
|
||||
<i class="fas fa-check me-2"></i>Validate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CLI Modal -->
|
||||
<div class="modal fade" id="cliModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">
|
||||
<i class="fas fa-terminal me-2"></i>CLI Usage
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h6>Installation:</h6>
|
||||
<pre class="bg-dark text-light p-3 rounded"><code>pip install -e .</code></pre>
|
||||
|
||||
<h6 class="mt-4">Common Commands:</h6>
|
||||
<pre class="bg-dark text-light p-3 rounded"><code># Create a new service
|
||||
<h6 class="mt-4">Common Commands:</h6>
|
||||
<pre
|
||||
class="bg-dark text-light p-3 rounded"
|
||||
><code># Create a new service
|
||||
unitforge create --type service --name myapp --exec-start "/usr/bin/myapp"
|
||||
|
||||
# Validate a unit file
|
||||
@@ -275,48 +354,64 @@ unitforge template generate webapp --interactive
|
||||
# List available templates
|
||||
unitforge template list</code></pre>
|
||||
|
||||
<h6 class="mt-4">Template Usage:</h6>
|
||||
<pre class="bg-dark text-light p-3 rounded"><code># Generate web app service
|
||||
<h6 class="mt-4">Template Usage:</h6>
|
||||
<pre
|
||||
class="bg-dark text-light p-3 rounded"
|
||||
><code># Generate web app service
|
||||
unitforge template generate webapp \
|
||||
--param name=mywebapp \
|
||||
--param exec_start="/usr/bin/node server.js" \
|
||||
--param user=www-data \
|
||||
--param working_directory=/opt/mywebapp</code></pre>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<a href="/api/docs" class="btn btn-primary" target="_blank">
|
||||
<i class="fas fa-book me-2"></i>Full Documentation
|
||||
</a>
|
||||
</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
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<a
|
||||
href="{{ api_docs_url }}"
|
||||
class="btn btn-primary"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="fas fa-book me-2"></i>Full Documentation
|
||||
</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>
|
||||
</body>
|
||||
<footer class="bg-dark text-light py-4 mt-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6><i class="fas fa-cogs me-2"></i>{{ app_name }}</h6>
|
||||
<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>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,246 +1,395 @@
|
||||
<!DOCTYPE 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.5.1/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>
|
||||
<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="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
<meta name="apple-mobile-web-app-title" content="{{ app_name }}" />
|
||||
<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.5.1/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>{{ 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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 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.
|
||||
<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-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 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>
|
||||
</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>
|
||||
<!-- 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><i class="fas fa-cogs me-2"></i>{{ app_name }}</h6>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user