organizing the project
This commit is contained in:
102
src/templates/admin/add_product.html
Normal file
102
src/templates/admin/add_product.html
Normal file
@@ -0,0 +1,102 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block title %}Add New Product - KCAP Demo Server{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-8 offset-md-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>Add New Product</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="{{ url_for('admin.add_product') }}" method="POST" enctype="multipart/form-data">
|
||||
<div class="mb-3">
|
||||
<label for="product_id" class="form-label">Product ID *</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="product_id" name="product_id" required>
|
||||
<button class="btn btn-outline-secondary" type="button" id="generate-id-btn" title="Generate Random ID">
|
||||
<i class="bi bi-magic"></i> Generate
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-text">Must be unique. This will be used as the barcode for AR content.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Product Name *</label>
|
||||
<input type="text" class="form-control" id="name" name="name" required>
|
||||
<div class="form-text">Enter a descriptive name for the product.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="price" class="form-label">Price *</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">$</span>
|
||||
<input type="text" class="form-control" id="price" name="price" required pattern="[0-9]+(\.[0-9]{1,2})?" placeholder="49.99">
|
||||
</div>
|
||||
<div class="form-text">Enter the price in decimal format (e.g., 49.99)</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="image" class="form-label">Product Image</label>
|
||||
<input type="file" class="form-control" id="image" name="image" accept="image/*" onchange="previewImage(this)">
|
||||
<div class="form-text">Supported formats: .png, .jpg, .jpeg, .gif</div>
|
||||
<div class="mt-2">
|
||||
<img id="image-preview" class="image-preview" style="display: none;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
<a href="{{ url_for('admin.index') }}" class="btn btn-secondary">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">Add Product</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
function previewImage(input) {
|
||||
var preview = document.getElementById('image-preview');
|
||||
|
||||
if (input.files && input.files[0]) {
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onload = function(e) {
|
||||
preview.src = e.target.result;
|
||||
preview.style.display = 'block';
|
||||
}
|
||||
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
} else {
|
||||
preview.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Generate a random product ID
|
||||
document.getElementById('generate-id-btn').addEventListener('click', function() {
|
||||
// Generate a random alphanumeric ID
|
||||
// Format: 3 letters followed by 4 numbers (e.g., ABC1234)
|
||||
const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
const numbers = '0123456789';
|
||||
|
||||
let id = '';
|
||||
|
||||
// Add 3 random uppercase letters
|
||||
for (let i = 0; i < 3; i++) {
|
||||
id += letters.charAt(Math.floor(Math.random() * letters.length));
|
||||
}
|
||||
|
||||
// Add 4 random numbers
|
||||
for (let i = 0; i < 4; i++) {
|
||||
id += numbers.charAt(Math.floor(Math.random() * numbers.length));
|
||||
}
|
||||
|
||||
// Set the generated ID in the input field
|
||||
document.getElementById('product_id').value = id;
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
97
src/templates/admin/edit_product.html
Normal file
97
src/templates/admin/edit_product.html
Normal file
@@ -0,0 +1,97 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block title %}Edit Product - KCAP Demo Server{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-8 offset-md-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>Edit Product</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="{{ url_for('admin.edit_product', product_id=product_id) }}" method="POST" enctype="multipart/form-data">
|
||||
<div class="mb-3">
|
||||
<label for="product_id" class="form-label">Product ID</label>
|
||||
<input type="text" class="form-control" id="product_id" value="{{ product_id }}" disabled>
|
||||
<div class="form-text">Product ID cannot be changed.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Product Name *</label>
|
||||
{% for field in product %}
|
||||
{% if field.fieldName == '_name' %}
|
||||
<input type="text" class="form-control" id="name" name="name" required value="{{ field.value }}">
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="form-text">Enter a descriptive name for the product.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="price" class="form-label">Price *</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">$</span>
|
||||
{% for field in product %}
|
||||
{% if field.fieldName == '_price' %}
|
||||
{% set price_value = field.value|replace('$', '') %}
|
||||
<input type="text" class="form-control" id="price" name="price" required
|
||||
pattern="[0-9]+(\.[0-9]{1,2})?" value="{{ price_value }}">
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="form-text">Enter the price in decimal format (e.g., 49.99)</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="image" class="form-label">Product Image</label>
|
||||
<input type="file" class="form-control" id="image" name="image" accept="image/*" onchange="previewImage(this)">
|
||||
<div class="form-text">Leave empty to keep the current image.</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<label class="form-label">Current Image:</label>
|
||||
{% for field in product %}
|
||||
{% if field.fieldName == '_image' %}
|
||||
<div>
|
||||
<img src="{{ field.value }}" alt="Current product image" class="image-preview">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<label class="form-label">New Image Preview:</label>
|
||||
<img id="image-preview" class="image-preview" style="display: none;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
<a href="{{ url_for('admin.index') }}" class="btn btn-secondary">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">Update Product</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
function previewImage(input) {
|
||||
var preview = document.getElementById('image-preview');
|
||||
|
||||
if (input.files && input.files[0]) {
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onload = function(e) {
|
||||
preview.src = e.target.result;
|
||||
preview.style.display = 'block';
|
||||
}
|
||||
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
} else {
|
||||
preview.style.display = 'none';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
150
src/templates/admin/generate_barcode.html
Normal file
150
src/templates/admin/generate_barcode.html
Normal file
@@ -0,0 +1,150 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block title %}Generate Barcodes - KCAP Demo Server{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h2>Generate Barcodes for Product: {{ product_id }}</h2>
|
||||
<a href="{{ url_for('admin.index') }}" class="btn btn-outline-secondary">Back to Products</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if not dependencies.qrcode or not dependencies.barcode or not dependencies.pillow %}
|
||||
<div class="alert alert-warning mb-4">
|
||||
<h4 class="alert-heading">Missing Dependencies</h4>
|
||||
<p>Some barcode generation features are unavailable because required packages are not installed:</p>
|
||||
<ul>
|
||||
{% if not dependencies.qrcode %}
|
||||
<li><strong>QR Code:</strong> The 'qrcode' package is required for QR code generation</li>
|
||||
{% endif %}
|
||||
{% if not dependencies.barcode %}
|
||||
<li><strong>Barcodes:</strong> The 'python-barcode' package is required for EAN-13 and Code 128 generation</li>
|
||||
{% endif %}
|
||||
{% if not dependencies.pillow %}
|
||||
<li><strong>Image Processing:</strong> The 'Pillow' package is required for image processing</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<hr>
|
||||
<p class="mb-0">To install the required dependencies, run: <code>pip install -r requirements.txt</code></p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>QR Code</h3>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<img src="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='qrcode') }}" alt="QR Code" class="img-fluid mb-3" style="max-width: 250px;">
|
||||
<p class="text-muted">QR Code contains a link to the product AR info.</p>
|
||||
<a href="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='qrcode') }}" class="btn btn-primary" download="product_{{ product_id }}_qrcode.png">Download QR Code</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>EAN-13 Barcode</h3>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<img src="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='ean13') }}" alt="EAN-13 Barcode" class="img-fluid mb-3" style="max-width: 250px;">
|
||||
<p class="text-muted">Standard EAN-13 barcode format.</p>
|
||||
<a href="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='ean13') }}" class="btn btn-primary" download="product_{{ product_id }}_ean13.png">Download EAN-13</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Code 128 Barcode</h3>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<img src="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='code128') }}" alt="Code 128 Barcode" class="img-fluid mb-3" style="max-width: 250px;">
|
||||
<p class="text-muted">High-density alphanumeric barcode.</p>
|
||||
<a href="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='code128') }}" class="btn btn-primary" download="product_{{ product_id }}_code128.png">Download Code 128</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Product Information</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<p><strong>Product ID:</strong> {{ product_id }}</p>
|
||||
<p><strong>Price:</strong> {{ product.price }}</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p><strong>AR Info URL:</strong>
|
||||
<a href="{{ url_for('get_ar_info', barcode=product_id) }}" target="_blank">
|
||||
{{ url_for('get_ar_info', barcode=product_id, _external=True) }}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
{% if product.image %}
|
||||
<img src="{{ product.image }}" alt="Product Image" class="img-thumbnail" style="max-height: 100px;">
|
||||
{% else %}
|
||||
<p>No product image available</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Print All Codes</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Use the button below to open a printable version of all barcodes for this product.</p>
|
||||
<button class="btn btn-success" onclick="window.print()">Print Barcodes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
@media print {
|
||||
.navbar, .card-header, .btn, .text-muted, .alert {
|
||||
display: none;
|
||||
}
|
||||
.card {
|
||||
border: none;
|
||||
margin-bottom: 1cm;
|
||||
}
|
||||
.card-body {
|
||||
text-align: center;
|
||||
}
|
||||
.row {
|
||||
display: block;
|
||||
}
|
||||
.col-md-4 {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
flex: 0 0 100%;
|
||||
page-break-after: always;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
123
src/templates/admin/index.html
Normal file
123
src/templates/admin/index.html
Normal file
@@ -0,0 +1,123 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block title %}Admin Dashboard - KCAP Demo Server{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1>Product Management</h1>
|
||||
<a href="{{ url_for('admin.add_product') }}" class="btn btn-primary">Add New Product</a>
|
||||
</div>
|
||||
|
||||
{% if products %}
|
||||
<table class="table table-striped table-bordered align-middle">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 15%">Product ID</th>
|
||||
<th style="width: 25%">Name</th>
|
||||
<th style="width: 10%">Price</th>
|
||||
<th style="width: 20%">Image</th>
|
||||
<th style="width: 30%">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for product_id, product_data in products.items() %}
|
||||
<tr>
|
||||
<td>{{ product_id }}</td>
|
||||
<td>
|
||||
{% for field in product_data %}
|
||||
{% if field.fieldName == '_name' %}
|
||||
{{ field.value }}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</td>
|
||||
<td>
|
||||
{% for field in product_data %}
|
||||
{% if field.fieldName == '_price' %}
|
||||
{{ field.value }}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</td>
|
||||
<td>
|
||||
{% for field in product_data %}
|
||||
{% if field.fieldName == '_image' %}
|
||||
<div class="product-image-container">
|
||||
<img src="{{ field.value }}" alt="Product image" class="product-image">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-center gap-2">
|
||||
<a href="{{ url_for('admin.edit_product', product_id=product_id) }}" class="btn btn-sm btn-outline-primary">Edit</a>
|
||||
<a href="{{ url_for('admin.generate_barcode_page', product_id=product_id) }}" class="btn btn-sm btn-outline-success">Barcodes</a>
|
||||
<button type="button" class="btn btn-sm btn-outline-danger"
|
||||
data-bs-toggle="modal" data-bs-target="#deleteModal"
|
||||
data-product-id="{{ product_id }}"
|
||||
data-product-name="{% for field in product_data %}{% if field.fieldName == '_name' %}{{ field.value }}{% endif %}{% endfor %}">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
<form id="delete-form-{{ product_id }}" action="{{ url_for('admin.delete_product', product_id=product_id) }}" method="POST" style="display: none;">
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<div class="alert alert-info">
|
||||
No products available. Click "Add New Product" to get started.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-danger text-white">
|
||||
<h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete the product <strong id="delete-product-name"></strong>?</p>
|
||||
<p class="text-danger"><i class="bi bi-exclamation-triangle-fill"></i> This action cannot be undone.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" id="confirm-delete-btn">Delete Product</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
// Delete confirmation modal functionality
|
||||
const deleteModal = document.getElementById('deleteModal');
|
||||
if (deleteModal) {
|
||||
deleteModal.addEventListener('show.bs.modal', function (event) {
|
||||
// Button that triggered the modal
|
||||
const button = event.relatedTarget;
|
||||
|
||||
// Extract product info from data attributes
|
||||
const productId = button.getAttribute('data-product-id');
|
||||
const productName = button.getAttribute('data-product-name');
|
||||
|
||||
// Update modal content
|
||||
const modalProductName = document.getElementById('delete-product-name');
|
||||
modalProductName.textContent = productName + " (ID: " + productId + ")";
|
||||
|
||||
// Setup the confirm button action
|
||||
const confirmDeleteBtn = document.getElementById('confirm-delete-btn');
|
||||
confirmDeleteBtn.onclick = function() {
|
||||
document.getElementById('delete-form-' + productId).submit();
|
||||
};
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
40
src/templates/index.html
Normal file
40
src/templates/index.html
Normal file
@@ -0,0 +1,40 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block title %}Home - KCAP Demo Server{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="jumbotron">
|
||||
<h1 class="display-4">KCAP Demo Server</h1>
|
||||
<p class="lead">A simple Flask API for demonstrating AR content retrieval for barcode scanning applications.</p>
|
||||
<hr class="my-4">
|
||||
<p>This server simulates the Knox Capture API for AR overlays and includes endpoints for managing product attributes.</p>
|
||||
<div class="mt-4">
|
||||
<h2>API Endpoints</h2>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<strong>Login:</strong> <code>GET /login</code>
|
||||
<p>Simulates a simple login with a 200 response (no authentication required).</p>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Content Fields:</strong> <code>GET /arcontentfields</code>
|
||||
<p>Returns a list of available attributes (e.g., item ID, price, image URI).</p>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>AR Info:</strong> <code>GET /arinfo?barcode=123456</code>
|
||||
<p>Returns product details for a given barcode, including image URLs.</p>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Static Image Server:</strong> <code>GET /images/123456.png</code>
|
||||
<p>Serves image files from the <code>static/images/</code> directory.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a href="/admin" class="btn btn-primary btn-lg">Go to Admin Interface</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
96
src/templates/layout.html
Normal file
96
src/templates/layout.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}KCAP Demo Server{% endblock %}</title>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Bootstrap Icons -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
<style>
|
||||
.navbar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.image-preview {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* Product image styles for consistent display */
|
||||
.product-image-container {
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
max-width: 100px;
|
||||
max-height: 120px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Table styles */
|
||||
.table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Ensure consistent height for table rows */
|
||||
.table tr {
|
||||
height: 150px;
|
||||
}
|
||||
</style>
|
||||
{% block extra_css %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="/">KCAP Demo Server</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">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/admin/">Admin</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
{% with messages = get_flashed_messages() %}
|
||||
{% if messages %}
|
||||
<div class="mt-3">
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-info" role="alert">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap JavaScript -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
||||
{% block extra_js %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user