(style): Refactor HTML templates and add CSS
Refactored HTML templates for improved strucutre and clarity Moved styles to a separate CSS file for better maintainablilty
This commit is contained in:
		
							parent
							
								
									eb1e69ab3c
								
							
						
					
					
						commit
						fe8e8c7e64
					
				
					 4 changed files with 99 additions and 58 deletions
				
			
		|  | @ -4,30 +4,29 @@ | |||
|     <meta charset="UTF-8"> | ||||
|     <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||||
|     <title>Admin Center - Subscribers</title> | ||||
|     <style> | ||||
|         body { font-family: Arial, sans-serif; padding: 20px; } | ||||
|         table { border-collapse: collapse; width: 100%; } | ||||
|         th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } | ||||
|         th { background-color: #f2f2f2; } | ||||
|         a { margin-right: 10px; } | ||||
|     </style> | ||||
|     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | ||||
| </head> | ||||
| <body> | ||||
|     <h1>Subscribers</h1> | ||||
|   <p><a href="{{ url_for('send_update') }}">Send Update Email</a></p> | ||||
|   {% if emails %} | ||||
|     <table> | ||||
|       <tr> | ||||
|         <th>Email Address</th> | ||||
|       </tr> | ||||
|       {% for email in emails %} | ||||
|       <tr> | ||||
|         <td>{{ email }}</td> | ||||
|       </tr> | ||||
|       {% endfor %} | ||||
|     </table> | ||||
|   {% else %} | ||||
|     <p>No subscribers found.</p> | ||||
|   {% endif %} | ||||
|     <p><a href="{{ url_for('send_update') }}">Send Update Email</a></p> | ||||
| 
 | ||||
|     {% if emails %} | ||||
|         <table> | ||||
|             <thead> | ||||
|                 <tr> | ||||
|                     <th>Email Address</th> | ||||
|                 </tr> | ||||
|             </thead> | ||||
|             <tbody> | ||||
|                 {% for email in emails %} | ||||
|                     <tr> | ||||
|                         <td>{{ email }}</td> | ||||
|                     </tr> | ||||
|                 {% endfor %} | ||||
|             </tbody> | ||||
|         </table> | ||||
|     {% else %} | ||||
|         <p>No subscribers found.</p> | ||||
|     {% endif %} | ||||
| </body> | ||||
| </html> | ||||
| </html> | ||||
|  |  | |||
|  | @ -1,26 +1,21 @@ | |||
| <!DOCTYPE html> | ||||
| <html lang="en"> | ||||
| 
 | ||||
| <head> | ||||
|   <meta charset="UTF-8" /> | ||||
|   <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||||
|   <meta charset="UTF-8"> | ||||
|   <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||||
|   <title>Admin Login</title> | ||||
|   <style> | ||||
|     body { font-family: Arial, sans-serif; padding: 20px; } | ||||
|     form { max-width: 400px; margin: 0 auto; } | ||||
|     label { display: block; margin-top: 15px; } | ||||
|     input[type="text"], input[type="password"] { width: 100%; padding: 8px; } | ||||
|     button { margin-top: 15px; padding: 10px 20px; } | ||||
|     .flash { background-color: #f8d7da; color: #721c24; padding: 10px; margin-bottom: 10px; text-align: center; } | ||||
|   </style> | ||||
|   <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | ||||
| </head> | ||||
| 
 | ||||
| <body> | ||||
|   <h1>Admin Login</h1> | ||||
|   {% with messages = get_flashed_messages(with_categories=true) %} | ||||
|     {% if messages %} | ||||
|       {% for category, message in messages %} | ||||
|         <div class="flash">{{ message }}</div> | ||||
|       {% endfor %} | ||||
|     {% endif %} | ||||
|   {% if messages %} | ||||
|   {% for category, message in messages %} | ||||
|   <div class="flash">{{ message }}</div> | ||||
|   {% endfor %} | ||||
|   {% endif %} | ||||
|   {% endwith %} | ||||
|   <form action="{{ url_for('login') }}" method="POST"> | ||||
|     <label for="username">Username:</label> | ||||
|  | @ -30,4 +25,5 @@ | |||
|     <button type="submit">Login</button> | ||||
|   </form> | ||||
| </body> | ||||
| </html> | ||||
| 
 | ||||
| </html> | ||||
|  |  | |||
|  | @ -1,31 +1,21 @@ | |||
| <!DOCTYPE html> | ||||
| <html lang="en"> | ||||
| 
 | ||||
| <head> | ||||
|   <meta charset="UTF-8" /> | ||||
|   <meta charset="UTF-8"> | ||||
|   <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||||
|   <title>Admin Center - Send Update</title> | ||||
|   <style> | ||||
|     body { font-family: Arial, sans-serif; padding: 20px; } | ||||
|     form { max-width: 600px; } | ||||
|     label { display: block; margin-top: 15px; } | ||||
|     input[type="text"], textarea { width: 100%; padding: 8px; } | ||||
|     button { margin-top: 15px; padding: 10px 20px; } | ||||
|     .flash { | ||||
|       background-color: #f8d7da; | ||||
|       color: #721c24; | ||||
|       padding: 10px; | ||||
|       margin-bottom: 10px; | ||||
|     } | ||||
|   </style> | ||||
|   <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | ||||
| </head> | ||||
| 
 | ||||
| <body> | ||||
|   <h1>Send Update Email</h1> | ||||
|   {% with messages = get_flashed_messages() %} | ||||
|     {% if messages %} | ||||
|       {% for message in messages %} | ||||
|         <div class="flash">{{ message }}</div> | ||||
|       {% endfor %} | ||||
|     {% endif %} | ||||
|   {% if messages %} | ||||
|   {% for message in messages %} | ||||
|   <div class="flash">{{ message }}</div> | ||||
|   {% endfor %} | ||||
|   {% endif %} | ||||
|   {% endwith %} | ||||
| 
 | ||||
|   <form action="{{ url_for('send_update') }}" method="POST"> | ||||
|  | @ -42,4 +32,5 @@ | |||
|     <a href="{{ url_for('logout') }}">Logout</a> | ||||
|   </p> | ||||
| </body> | ||||
| 
 | ||||
| </html> | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue
	
	 Blake Ridgway
						Blake Ridgway