rideaware/admin-panel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: init overhaul of admin panel

Browse source
This commit is contained in:
Cipher Vance 2025-08-25 21:32:45 -05:00
parent 9d78f1fdb4
commit 69468dc5bf
6 changed files with 2686 additions and 295 deletions
Download patch file Download diff file Expand all files Collapse all files

667
templates/send_newsletter.html Normal file
View file

@ -0,0 +1,667 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Send Newsletter - Newsletter Admin</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #667eea;
--primary-dark: #5a67d8;
--secondary: #764ba2;
--success: #48bb78;
--warning: #ed8936;
--error: #f56565;
--info: #4299e1;
--dark: #2d3748;
--light: #f7fafc;
--gray-100: #f7fafc;
--gray-200: #edf2f7;
--gray-300: #e2e8f0;
--gray-400: #cbd5e0;
--gray-500: #a0aec0;
--gray-600: #718096;
--gray-700: #4a5568;
--gray-800: #2d3748;
--gray-900: #1a202c;
--white: #ffffff;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--border-radius: 8px;
--border-radius-lg: 12px;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
color: var(--gray-800);
line-height: 1.6;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.header {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
color: white;
padding: 2rem 0;
margin-bottom: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
}
.header-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.header h1 {
font-size: 2rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.75rem;
}
.nav-links {
display: flex;
gap: 1.5rem;
align-items: center;
}
.nav-links a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: var(--border-radius);
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.nav-links a:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.flash-messages {
margin-bottom: 1.5rem;
}
.flash {
padding: 1rem;
border-radius: var(--border-radius);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.flash.success {
background: #f0fff4;
color: #22543d;
border: 1px solid #c6f6d5;
}
.flash.error {
background: #fff5f5;
color: #742a2a;
border: 1px solid #fed7d7;
}
.flash.warning {
background: #fffbeb;
color: #744210;
border: 1px solid #feebc8;
}
.flash.info {
background: #ebf8ff;
color: #2a4a5a;
border: 1px solid #bee3f8;
}
.main-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}
.card {
background: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow);
overflow: hidden;
}
.card-header {
padding: 1.5rem;
border-bottom: 1px solid var(--gray-200);
background: var(--gray-50);
}
.card-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--gray-800);
display: flex;
align-items: center;
gap: 0.5rem;
}
.card-body {
padding: 1.5rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--gray-700);
font-size: 0.875rem;
}
.form-input {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--gray-300);
border-radius: var(--border-radius);
font-size: 1rem;
transition: all 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form-textarea {
min-height: 300px;
resize: vertical;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border: none;
border-radius: var(--border-radius);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
justify-content: center;
}
.btn-primary {
background: var(--primary);
color: white;
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-secondary {
background: var(--gray-600);
color: white;
}
.btn-secondary:hover {
background: var(--gray-700);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-success {
background: var(--success);
color: white;
}
.btn-success:hover {
background: #38a169;
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.btn-group {
display: flex;
gap: 1rem;
justify-content: flex-end;
}
.preview-container {
border: 2px dashed var(--gray-300);
border-radius: var(--border-radius);
padding: 2rem;
margin-top: 1rem;
background: var(--gray-50);
}
.preview-container.has-content {
border-color: var(--primary);
background: var(--white);
border-style: solid;
}
.email-preview {
background: var(--white);
border-radius: var(--border-radius);
padding: 1.5rem;
box-shadow: var(--shadow);
}
.email-preview h3 {
color: var(--gray-800);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--primary);
}
.email-body {
margin-bottom: 2rem;
line-height: 1.7;
}
.toolbar {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--gray-100);
border-radius: var(--border-radius);
border: 1px solid var(--gray-300);
}
.toolbar button {
padding: 0.5rem;
border: none;
background: var(--white);
border-radius: var(--border-radius);
cursor: pointer;
transition: all 0.3s ease;
color: var(--gray-600);
min-width: 2.5rem;
}
.toolbar button:hover {
background: var(--primary);
color: white;
}
.stats-info {
background: var(--gray-100);
border-radius: var(--border-radius);
padding: 1rem;
margin-bottom: 1rem;
}
.stats-info h3 {
color: var(--gray-800);
margin-bottom: 0.5rem;
font-size: 1rem;
}
.stats-item {
display: flex;
justify-content: space-between;
margin-bottom: 0.25rem;
font-size: 0.875rem;
}
.stats-item strong {
color: var(--primary);
}
.tips {
background: var(--info);
color: white;
padding: 1rem;
border-radius: var(--border-radius);
margin-bottom: 1rem;
}
.tips h3 {
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.tips ul {
margin-left: 1rem;
font-size: 0.875rem;
}
.tips li {
margin-bottom: 0.25rem;
}
.spinner {
display: inline-block;
width: 1rem;
height: 1rem;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 768px) {
.container {
padding: 1rem;
}
.header-content {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.nav-links {
flex-wrap: wrap;
justify-content: center;
}
.main-content {
grid-template-columns: 1fr;
}
.btn-group {
flex-direction: column;
}
}
</style>
</head>
<body>
<header class="header">
<div class="header-content">
<h1>
<i class="fas fa-paper-plane"></i>
Send Newsletter
</h1>
<nav class="nav-links">
<a href="/"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
<a href="/subscribers"><i class="fas fa-users"></i> Subscribers</a>
<a href="/newsletter_history"><i class="fas fa-history"></i> History</a>
<a href="/logout"><i class="fas fa-sign-out-alt"></i> Logout</a>
</nav>
</div>
</header>
<div class="container">
<!-- Flash Messages -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="flash-messages">
{% for category, message in messages %}
<div class="flash {{ category }}">
{% if category == 'success' %}
<i class="fas fa-check-circle"></i>
{% elif category == 'error' %}
<i class="fas fa-exclamation-circle"></i>
{% elif category == 'warning' %}
<i class="fas fa-exclamation-triangle"></i>
{% else %}
<i class="fas fa-info-circle"></i>
{% endif %}
{{ message }}
</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
<div class="main-content">
<!-- Newsletter Form -->
<div class="card">
<div class="card-header">
<h2 class="card-title">
<i class="fas fa-edit"></i>
Compose Newsletter
</h2>
</div>
<div class="card-body">
<form method="POST" id="newsletter-form">
<div class="form-group">
<label for="subject" class="form-label">Subject Line</label>
<input type="text"
id="subject"
name="subject"
class="form-input"
placeholder="Enter a compelling subject line..."
value="{{ subject or '' }}"
required>
</div>
<div class="form-group">
<label for="body" class="form-label">Email Content (HTML allowed)</label>
<!-- Rich Text Toolbar -->
<div class="toolbar">
<button type="button" onclick="formatText('bold')" title="Bold">
<i class="fas fa-bold"></i>
</button>
<button type="button" onclick="formatText('italic')" title="Italic">
<i class="fas fa-italic"></i>
</button>
<button type="button" onclick="formatText('underline')" title="Underline">
<i class="fas fa-underline"></i>
</button>
<button type="button" onclick="insertLink()" title="Insert Link">
<i class="fas fa-link"></i>
</button>
<button type="button" onclick="insertList()" title="Insert List">
<i class="fas fa-list-ul"></i>
</button>
</div>
<textarea id="body"
name="body"
class="form-input form-textarea"
placeholder="Write your newsletter content here... HTML tags are supported."
required>{{ body or '' }}</textarea>
</div>
<div class="btn-group">
<button type="submit" name="action" value="preview" class="btn btn-secondary">
<i class="fas fa-eye"></i> Preview
</button>
<button type="submit" name="action" value="send" class="btn btn-success" id="send-btn">
<span id="send-text">
<i class="fas fa-paper-plane"></i> Send Newsletter
</span>
<span id="send-spinner" class="spinner" style="display: none;"></span>
</button>
</div>
</form>
</div>
</div>
<!-- Sidebar -->
<div>
<!-- Statistics -->
<div class="card">
<div class="card-header">
<h3 class="card-title">
<i class="fas fa-chart-bar"></i>
Quick Stats
</h3>
</div>
<div class="card-body">
<div class="stats-info" id="subscriber-stats">
<h3>Subscriber Information</h3>
<div class="stats-item">
<span>Active Subscribers:</span>
<strong id="active-count">Loading...</strong>
</div>
<div class="stats-item">
<span>New This Month:</span>
<strong id="recent-count">Loading...</strong>
</div>
<div class="stats-item">
<span>Total Sent:</span>
<strong id="sent-count">Loading...</strong>
</div>
</div>
</div>
</div>
<!-- Tips -->
<div class="tips">
<h3><i class="fas fa-lightbulb"></i> Writing Tips</h3>
<ul>
<li>Keep subject lines under 50 characters</li>
<li>Use personalization when possible</li>
<li>Include a clear call-to-action</li>
<li>Test your content before sending</li>
<li>Mobile-friendly formatting is key</li>
</ul>
</div>
<!-- Preview Container -->
{% if preview %}
<div class="card">
<div class="card-header">
<h3 class="card-title">
<i class="fas fa-eye"></i>
Email Preview
</h3>
</div>
<div class="card-body">
<div class="preview-container has-content">
{{ preview|safe }}
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
<script>
// Load subscriber stats
async function loadStats() {
try {
const response = await fetch('/api/stats');
const stats = await response.json();
document.getElementById('active-count').textContent = stats.total_active;
document.getElementById('recent-count').textContent = stats.recent_signups;
document.getElementById('sent-count').textContent = stats.newsletters_sent;
} catch (error) {
console.error('Error loading stats:', error);
document.getElementById('active-count').textContent = 'Error';
document.getElementById('recent-count').textContent = 'Error';
document.getElementById('sent-count').textContent = 'Error';
}
}
// Rich text formatting functions
function formatText(command) {
const textarea = document.getElementById('body');
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const selectedText = textarea.value.substring(start, end);
if (selectedText) {
let formattedText = '';
switch (command) {
case 'bold':
formattedText = `<strong>${selectedText}</strong>`;
break;
case 'italic':
formattedText = `<em>${selectedText}</em>`;
break;
case 'underline':
formattedText = `<u>${selectedText}</u>`;
break;
}
textarea.value = textarea.value.substring(0, start) + formattedText + textarea.value.substring(end);
textarea.focus();
textarea.setSelectionRange(start, start + formattedText.length);
}
}
function insertLink() {
const url = prompt('Enter the URL:');
const text = prompt('Enter the link text:') || url;
if (url) {
const textarea = document.getElementById('body');
const start = textarea.selectionStart;
const linkText = `<a href="${url}">${text}</a>`;
textarea.value = textarea.value.substring(0, start) + linkText + textarea.value.substring(textarea.selectionEnd);
textarea.focus();
textarea.setSelectionRange(start + linkText.length, start + linkText.length);
}
}
function insertList() {
const textarea = document.getElementById('body');
const start = textarea.selectionStart;
const listText = `<ul>\n <li>List item 1</li>\n <li>List item 2</li>\n <li>List item 3</li>\n</ul>`;
textarea.value = textarea.value.substring(0, start) + listText + textarea.value.substring(textarea.selectionEnd);
textarea.focus();
textarea.setSelectionRange(start + listText.length, start + listText.length);
}
// Handle form submission
document.getElementById('newsletter-form').addEventListener('submit', function(e) {
const action = e.submitter.value;
if (action === 'send') {
if (!confirm('Are you sure you want to send this newsletter to all subscribers? This action cannot be undone.')) {
e.preventDefault();
return;
}
// Show loading state
const sendBtn = document.getElementById('send-btn');
const sendText = document.getElementById('send-text');
const sendSpinner = document.getElementById('send-spinner');
sendBtn.disabled = true;
sendText.style.display = 'none';
sendSpinner