feat(newsletter): Add subscription confirmation email functionality

- Implemented `send_subscription_confirmation` function to send a confirmation email upon subscription.
- Added a default HTML template for the confirmation email in settings.
- Updated the newsletter management page to handle subscription and unsubscription actions.
- Created new templates for embedding contact and newsletter forms.
- Added styles for the new templates and unified CSS styles across the application.
- Updated tests to reflect changes in the newsletter management API endpoints.

templates/admin_submissions.html

@@ -4,29 +4,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Contact Submissions</title>
+    <link rel="stylesheet" href="/static/css/styles.css" />
     <style>
       body {
-        font-family: Arial, sans-serif;
-        margin: 20px;
         max-width: 1200px;
         margin: 0 auto;
         padding: 20px;
       }
-      h1 {
-        color: #333;
-        margin-bottom: 20px;
-      }
-      .nav {
-        margin-bottom: 20px;
-      }
-      .nav a {
-        color: #007bff;
-        text-decoration: none;
-        margin-right: 20px;
-      }
-      .nav a:hover {
-        text-decoration: underline;
-      }
       .filters {
         background: #f8f9fa;
         padding: 15px;
@@ -39,124 +23,6 @@
         flex-wrap: wrap;
         align-items: end;
       }
-      .filters label {
-        display: block;
-        margin-bottom: 5px;
-        font-weight: bold;
-      }
-      .filters input,
-      .filters select {
-        padding: 8px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-      }
-      .filters button {
-        padding: 8px 15px;
-        background: #007bff;
-        color: white;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-      }
-      .filters button:hover {
-        background: #0056b3;
-      }
-      .filters .clear-btn {
-        background: #6c757d;
-      }
-      .filters .clear-btn:hover {
-        background: #545b62;
-      }
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        margin-top: 20px;
-      }
-      th,
-      td {
-        padding: 12px;
-        text-align: left;
-        border-bottom: 1px solid #ddd;
-      }
-      th {
-        background-color: #f8f9fa;
-        font-weight: bold;
-        cursor: pointer;
-      }
-      th:hover {
-        background-color: #e9ecef;
-      }
-      th.sort-asc::after {
-        content: " ↑";
-      }
-      th.sort-desc::after {
-        content: " ↓";
-      }
-      tr:hover {
-        background-color: #f5f5f5;
-      }
-      .message {
-        padding: 8px;
-        margin: 10px 0;
-        border-radius: 4px;
-      }
-      .message.success {
-        background-color: #d4edda;
-        color: #155724;
-        border: 1px solid #c3e6cb;
-      }
-      .message.error {
-        background-color: #f8d7da;
-        color: #721c24;
-        border: 1px solid #f5c6cb;
-      }
-      .pagination {
-        margin-top: 20px;
-        text-align: center;
-      }
-      .pagination button {
-        padding: 8px 12px;
-        margin: 0 2px;
-        border: 1px solid #ddd;
-        background: white;
-        cursor: pointer;
-      }
-      .pagination button:hover {
-        background: #f8f9fa;
-      }
-      .pagination button.active {
-        background: #007bff;
-        color: white;
-        border-color: #007bff;
-      }
-      .pagination button:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-      .delete-btn {
-        background: #dc3545;
-        color: white;
-        border: none;
-        padding: 4px 8px;
-        border-radius: 3px;
-        cursor: pointer;
-      }
-      .delete-btn:hover {
-        background: #c82333;
-      }
-      .loading {
-        text-align: center;
-        padding: 20px;
-      }
-      .no-data {
-        text-align: center;
-        padding: 40px;
-        color: #666;
-      }
-      .submission-details {
-        max-width: 300px;
-        word-wrap: break-word;
-      }
     </style>
   </head>
   <body>