271 lines
11 KiB
HTML
271 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mailing List Manager</title>
|
|
<link rel="stylesheet" href="static/css/style.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="container">
|
|
<div class="header-content">
|
|
<h1 class="logo">
|
|
<i class="fas fa-envelope"></i>
|
|
Mailing List Manager
|
|
</h1>
|
|
<div class="auth-section">
|
|
<div class="auth-controls" id="authControls">
|
|
<input type="password" id="apiToken" placeholder="Enter API Token" class="token-input">
|
|
<button class="btn btn-primary" id="loginBtn">Login</button>
|
|
</div>
|
|
<div class="user-info" id="userInfo" style="display: none;">
|
|
<span class="status-indicator">
|
|
<i class="fas fa-check-circle"></i>
|
|
Connected
|
|
</span>
|
|
<button class="btn btn-secondary" id="logoutBtn">Logout</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content" id="mainContent" style="display: none;">
|
|
<div class="container">
|
|
<!-- Navigation Tabs -->
|
|
<nav class="tab-nav">
|
|
<button class="tab-btn active" data-tab="lists">
|
|
<i class="fas fa-list"></i>
|
|
Mailing Lists
|
|
</button>
|
|
<button class="tab-btn" data-tab="members">
|
|
<i class="fas fa-users"></i>
|
|
Members
|
|
</button>
|
|
<button class="tab-btn" data-tab="subscriptions">
|
|
<i class="fas fa-link"></i>
|
|
Subscriptions
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- Notification Area -->
|
|
<div class="notification" id="notification" style="display: none;">
|
|
<span class="notification-message" id="notificationMessage"></span>
|
|
<button class="notification-close" id="notificationClose">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mailing Lists Tab -->
|
|
<div class="tab-content active" id="lists-tab">
|
|
<div class="section-header">
|
|
<h2>Mailing Lists</h2>
|
|
<button class="btn btn-primary" id="addListBtn">
|
|
<i class="fas fa-plus"></i>
|
|
Add List
|
|
</button>
|
|
</div>
|
|
|
|
<div class="data-table">
|
|
<table class="table" id="listsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Email</th>
|
|
<th>Description</th>
|
|
<th>Members</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="listsTableBody">
|
|
<!-- Dynamic content -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Members Tab -->
|
|
<div class="tab-content" id="members-tab">
|
|
<div class="section-header">
|
|
<h2>Members</h2>
|
|
<button class="btn btn-primary" id="addMemberBtn">
|
|
<i class="fas fa-plus"></i>
|
|
Add Member
|
|
</button>
|
|
</div>
|
|
|
|
<div class="data-table">
|
|
<table class="table" id="membersTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Email</th>
|
|
<th>Lists</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="membersTableBody">
|
|
<!-- Dynamic content -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Subscriptions Tab -->
|
|
<div class="tab-content" id="subscriptions-tab">
|
|
<div class="section-header">
|
|
<h2>Manage Subscriptions</h2>
|
|
<button class="btn btn-primary" id="addSubscriptionBtn">
|
|
<i class="fas fa-plus"></i>
|
|
Add Subscription
|
|
</button>
|
|
</div>
|
|
|
|
<div class="subscriptions-grid" id="subscriptionsGrid">
|
|
<!-- Dynamic content -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Loading Overlay -->
|
|
<div class="loading-overlay" id="loadingOverlay" style="display: none;">
|
|
<div class="loading-spinner">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<p>Loading...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
|
|
<!-- Add/Edit List Modal -->
|
|
<div class="modal" id="listModal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="listModalTitle">Add Mailing List</h3>
|
|
<button class="modal-close" id="listModalClose">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<form id="listForm">
|
|
<div class="form-group">
|
|
<label for="listName">List Name *</label>
|
|
<input type="text" id="listName" name="listName" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="listEmail">List Email *</label>
|
|
<input type="email" id="listEmail" name="listEmail" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="listDescription">Description</label>
|
|
<textarea id="listDescription" name="listDescription" rows="3"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="listActive" name="listActive" checked>
|
|
<span class="checkmark"></span>
|
|
Active
|
|
</label>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary" id="listCancelBtn">Cancel</button>
|
|
<button type="submit" class="btn btn-primary" id="listSubmitBtn">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add/Edit Member Modal -->
|
|
<div class="modal" id="memberModal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="memberModalTitle">Add Member</h3>
|
|
<button class="modal-close" id="memberModalClose">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<form id="memberForm">
|
|
<div class="form-group">
|
|
<label for="memberName">Member Name *</label>
|
|
<input type="text" id="memberName" name="memberName" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="memberEmail">Email Address *</label>
|
|
<input type="email" id="memberEmail" name="memberEmail" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="memberActive" name="memberActive" checked>
|
|
<span class="checkmark"></span>
|
|
Active
|
|
</label>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary" id="memberCancelBtn">Cancel</button>
|
|
<button type="submit" class="btn btn-primary" id="memberSubmitBtn">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Subscription Modal -->
|
|
<div class="modal" id="subscriptionModal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Add Subscription</h3>
|
|
<button class="modal-close" id="subscriptionModalClose">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<form id="subscriptionForm">
|
|
<div class="form-group">
|
|
<label for="subscriptionList">Mailing List *</label>
|
|
<select id="subscriptionList" name="subscriptionList" required>
|
|
<option value="">Select a list...</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="subscriptionMember">Member *</label>
|
|
<select id="subscriptionMember" name="subscriptionMember" required>
|
|
<option value="">Select a member...</option>
|
|
</select>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary" id="subscriptionCancelBtn">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Add Subscription</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirmation Modal -->
|
|
<div class="modal" id="confirmModal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Confirm Action</h3>
|
|
<button class="modal-close" id="confirmModalClose">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="confirmMessage">Are you sure you want to perform this action?</p>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary" id="confirmCancelBtn">Cancel</button>
|
|
<button type="button" class="btn btn-danger" id="confirmOkBtn">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="static/js/api.js"></script>
|
|
<script src="static/js/ui.js"></script>
|
|
<script src="static/js/app.js"></script>
|
|
</body>
|
|
</html> |