mirror of
https://github.com/hoshikawa2/ai_logistic_outlook_integration.git
synced 2026-07-09 16:44:21 +00:00
first commit
This commit is contained in:
208
files/templates/emails_filter.html
Normal file
208
files/templates/emails_filter.html
Normal file
@@ -0,0 +1,208 @@
|
||||
<!DOCTYPE html>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Email Query - International Logistics</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f3f3f3;
|
||||
margin: 20px;
|
||||
}
|
||||
.container {
|
||||
max-width: 1100px;
|
||||
margin: auto;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 0 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
form {
|
||||
margin-bottom: 25px;
|
||||
padding: 10px;
|
||||
background: #fafafa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
form input, form select {
|
||||
padding: 6px 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
button {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
.email {
|
||||
border-left: 5px solid #ccc;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
.email.alert {
|
||||
border-left-color: #d32f2f;
|
||||
background: #ffeaea;
|
||||
}
|
||||
.email h4 {
|
||||
margin: 0;
|
||||
}
|
||||
.email small {
|
||||
color: #555;
|
||||
}
|
||||
.brief {
|
||||
margin-top: 6px;
|
||||
font-style: italic;
|
||||
color: #333;
|
||||
}
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
}
|
||||
.badge.alert { background: #d32f2f; }
|
||||
.badge.ok { background: #388e3c; }
|
||||
.badge.pending { background: #fbc02d; color: black; }
|
||||
.badge.analysis { background: #1976d2; }
|
||||
|
||||
.filters-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
gap: 14px 20px;
|
||||
background: #ffffff;
|
||||
padding: 15px 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.filters-container label {
|
||||
font-weight: 600;
|
||||
color: #004b8d;
|
||||
display: block;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.filters-container input,
|
||||
.filters-container select {
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 0.95em;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.filters-container button {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
padding: 8px 14px;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.filters-container button:hover {
|
||||
background: #005ec5;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.filters-container {
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.badge.forwarded {
|
||||
background: #bdbdbd;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a.icon-link i {
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
a.icon-link:hover i {
|
||||
color: #005ec5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2>Email Search</h2>
|
||||
<form class="filters-container" method="get">
|
||||
<div>
|
||||
<label>Booking:</label>
|
||||
<input type="text" name="booking" value="{{ filters.booking }}" style="width: 120px;">
|
||||
</div>
|
||||
<div>
|
||||
<label>From:</label>
|
||||
<input type="date" name="start" value="{{ filters.start }}">
|
||||
</div>
|
||||
<div>
|
||||
<label>To:</label>
|
||||
<input type="date" name="end" value="{{ filters.end }}">
|
||||
</div>
|
||||
<div>
|
||||
<label>Attention:</label>
|
||||
<select name="alert" style="width: 100px;">
|
||||
<option value="">All</option>
|
||||
<option value="YES" {% if filters.alert == 'YES' %}selected{% endif %}>Yes</option>
|
||||
<option value="NO" {% if filters.alert == 'NO' %}selected{% endif %}>No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label>Status:</label>
|
||||
<select name="status" style="width: 180px;">
|
||||
<option value="">All</option>
|
||||
{% for s in status_options %}
|
||||
<option value="{{ s }}" {% if filters.status == s %}selected{% endif %}>{{ s }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" name="include_forwarded" {% if filters.include_forwarded %}checked{% endif %}>
|
||||
Include Forwarded Emails
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit">🔍 Search</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{% if records|length == 0 %}
|
||||
<p><i>No results found.</i></p>
|
||||
{% endif %}
|
||||
|
||||
{% for e in records %}
|
||||
<div class="email {% if e.ALERT == 'YES' %}alert{% endif %}">
|
||||
<h4>{{ e.SUBJECT }}</h4>
|
||||
<small>
|
||||
<b>Date:</b> {{ e.DATE_SENT }} |
|
||||
<b>From:</b> {{ e.EMAIL_FROM }} |
|
||||
<b>To:</b> {{ e.EMAIL_TO }}
|
||||
</small><br>
|
||||
<span class="badge {% if e.ALERT == 'YES' %}alert{% elif e.STATUS == 'completed' %}ok{% elif e.STATUS == 'pending' %}pending{% else %}analysis{% endif %}">
|
||||
{{ e.STATUS }}
|
||||
</span>
|
||||
{% if e.ALERT == 'YES' %}
|
||||
<span style="color:#d32f2f;font-weight:bold;margin-left:6px;">⚠️ Alert</span>
|
||||
{% endif %}
|
||||
{% if e.BRIEF_DESCRIPTION %}
|
||||
<div class="brief">📝 {{ e.BRIEF_DESCRIPTION }}</div>
|
||||
{% endif %}
|
||||
<td>
|
||||
<a href="{{ url_for('view_email', file_name=e.FILE_NAME|urlencode) }}"
|
||||
class="icon-link"
|
||||
target="_blank"
|
||||
title="View original email">
|
||||
<i class="fa-solid fa-envelope-open-text"></i>
|
||||
</a>
|
||||
</td>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user