nngo/GOV_QR_Codes_Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add project management pages

Browse Source
This commit is contained in:
Nguyen Ngo
2025-08-12 16:31:28 -04:00
parent fb73fa236b
commit fa3a7923e2
9 changed files with 1886 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/create_project.html
+159
View File
@@ -0,0 +1,159 @@
{% extends "base.html" %}
{% block title %}Create Project - QR Code Management{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/projects.css') }}">
{% endblock %}
{% block content %}
<div class="projects-page">
<!-- Page Header -->
<div class="projects-header">
<div class="header-content">
<h1><i class="fas fa-folder-plus"></i> Create New Project</h1>
<p>Create a new project to organize your QR codes</p>
</div>
<div class="header-actions">
<a href="{{ url_for('projects') }}" class="btn btn-secondary">
<i class="fas fa-arrow-left"></i>
Back to Projects
</a>
</div>
</div>
<!-- Create Project Form -->
<div class="content-section">
<div class="section-header">
<h2><i class="fas fa-info-circle"></i> Project Information</h2>
</div>
<div style="padding: 1.5rem;">
<form method="POST" id="createProjectForm">
<div style="max-width: 600px;">
<!-- Project Name -->
<div class="form-group" style="margin-bottom: 1.5rem;">
<label for="name" style="display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem; font-size: 0.875rem;">
<i class="fas fa-tag"></i>
Project Name
</label>
<input
type="text"
id="name"
name="name"
required
maxlength="100"
placeholder="Enter project name"
style="width: 100%; padding: 0.75rem; border: 2px solid #d1d5db; border-radius: 0.5rem; font-size: 1rem; transition: all 0.2s ease-in-out; background-color: #ffffff;"
/>
<span class="character-counter" id="nameCounter" style="position: absolute; bottom: -1.5rem; right: 0; font-size: 0.75rem; color: #6b7280;">0/100</span>
</div>
<!-- Project Description -->
<div class="form-group" style="margin-bottom: 1.5rem; position: relative;">
<label for="description" style="display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem; font-size: 0.875rem;">
<i class="fas fa-align-left"></i>
Description (Optional)
</label>
<textarea
id="description"
name="description"
rows="4"
maxlength="500"
placeholder="Enter project description (optional)"
style="width: 100%; padding: 0.75rem; border: 2px solid #d1d5db; border-radius: 0.5rem; font-size: 1rem; transition: all 0.2s ease-in-out; background-color: #ffffff; resize: vertical; min-height: 80px;"
></textarea>
<span class="character-counter" id="descriptionCounter" style="position: absolute; bottom: -1.5rem; right: 0; font-size: 0.75rem; color: #6b7280;">0/500</span>
<small style="display: block; margin-top: 0.5rem; font-size: 0.75rem; color: #6b7280;">
<i class="fas fa-info-circle"></i>
Provide a brief description of what this project is for
</small>
</div>
<!-- Form Actions -->
<div style="display: flex; justify-content: flex-start; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb;">
<a href="{{ url_for('projects') }}" class="btn btn-secondary" style="background: #f1f5f9; color: #475569; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s ease-in-out; border: 1px solid #cbd5e1;">
<i class="fas fa-arrow-left"></i>
Cancel
</a>
<button type="submit" class="btn btn-primary" id="submitBtn" style="background: #2563eb; color: #ffffff; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s ease-in-out; border: none; cursor: pointer;">
<i class="fas fa-plus"></i>
Create Project
</button>
</div>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% block extra_scripts %}
<script>
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("createProjectForm");
const submitBtn = document.getElementById("submitBtn");
// Character counters
const counters = [
{ input: "name", counter: "nameCounter", max: 100 },
{ input: "description", counter: "descriptionCounter", max: 500 }
];
counters.forEach((item) => {
const input = document.getElementById(item.input);
const counter = document.getElementById(item.counter);
if (input && counter) {
input.addEventListener("input", function () {
const length = this.value.length;
counter.textContent = `${length}/${item.max}`;
if (length > item.max * 0.9) {
counter.style.color = '#f59e0b';
} else {
counter.style.color = '#6b7280';
}
});
// Focus styles
input.addEventListener("focus", function() {
this.style.borderColor = '#2563eb';
this.style.boxShadow = '0 0 0 3px rgba(37, 99, 235, 0.1)';
});
input.addEventListener("blur", function() {
this.style.borderColor = '#d1d5db';
this.style.boxShadow = 'none';
});
}
});
// Form submission
form.addEventListener("submit", function (e) {
const name = document.getElementById("name").value.trim();
if (!name) {
e.preventDefault();
alert("Project name is required");
return false;
}
// Show loading state
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating Project...';
submitBtn.disabled = true;
submitBtn.style.opacity = '0.7';
});
// Add smooth animation on load
const contentSection = document.querySelector('.content-section');
contentSection.style.opacity = '0';
contentSection.style.transform = 'translateY(20px)';
setTimeout(() => {
contentSection.style.transition = 'all 0.5s ease-out';
contentSection.style.opacity = '1';
contentSection.style.transform = 'translateY(0)';
}, 100);
});
</script>
{% endblock %}