|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Construction Supervisor AI Coach</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
margin: 20px; |
|
background-color: #f4f4f4; |
|
} |
|
h1 { |
|
text-align: center; |
|
color: #333; |
|
} |
|
.container { |
|
max-width: 800px; |
|
margin: 0 auto; |
|
background: #fff; |
|
padding: 20px; |
|
border-radius: 8px; |
|
box-shadow: 0 0 10px rgba(0,0,0,0.1); |
|
} |
|
.row { |
|
display: flex; |
|
justify-content: space-between; |
|
margin-bottom: 15px; |
|
} |
|
.row div { |
|
flex: 1; |
|
margin-right: 10px; |
|
} |
|
.row div:last-child { |
|
margin-right: 0; |
|
} |
|
label { |
|
display: block; |
|
margin-bottom: 5px; |
|
font-weight: bold; |
|
} |
|
select, input[type="text"], textarea { |
|
width: 100%; |
|
padding: 8px; |
|
border: 1px solid #ccc; |
|
border-radius: 4px; |
|
box-sizing: border-box; |
|
} |
|
textarea { |
|
height: 80px; |
|
resize: vertical; |
|
} |
|
.button-row { |
|
display: flex; |
|
justify-content: center; |
|
margin-top: 10px; |
|
} |
|
button { |
|
padding: 10px 20px; |
|
background-color: #555; |
|
color: white; |
|
border: none; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
} |
|
button:hover { |
|
background-color: #666; |
|
} |
|
.output { |
|
margin-top: 20px; |
|
padding: 10px; |
|
border: 1px solid #ccc; |
|
border-radius: 4px; |
|
background-color: #f9f9f9; |
|
} |
|
.output p:empty::before { |
|
content: "No data available"; |
|
color: #888; |
|
} |
|
.error { |
|
color: red; |
|
margin-top: 10px; |
|
text-align: center; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<h1>Construction Supervisor AI Coach</h1> |
|
<form method="POST" action="{{ url_for('ui') }}"> |
|
<div class="row"> |
|
<div> |
|
<label for="supervisor_id">Supervisor ID</label> |
|
<input type="text" name="supervisor_id" id="supervisor_id" value="{{ form_data.supervisor_id | default('') }}" placeholder="e.g., SUP-001"> |
|
</div> |
|
<div> |
|
<label for="role">Role</label> |
|
<select name="role" id="role"> |
|
<option value="Supervisor" {% if form_data.role == 'Supervisor' %}selected{% endif %}>Supervisor</option> |
|
<option value="Foreman" {% if form_data.role == 'Foreman' %}selected{% endif %}>Foreman</option> |
|
<option value="Project Manager" {% if form_data.role == 'Project Manager' %}selected{% endif %}>Project Manager</option> |
|
</select> |
|
</div> |
|
</div> |
|
<div class="row"> |
|
<div> |
|
<label for="project_id">Project ID</label> |
|
<input type="text" name="project_id" id="project_id" value="{{ form_data.project_id | default('') }}" placeholder="e.g., PROJ-123"> |
|
</div> |
|
<div> |
|
<label for="weather">Weather</label> |
|
<input type="text" name="weather" id="weather" value="{{ form_data.weather | default('') }}" placeholder="e.g., Sunny, 25°C"> |
|
</div> |
|
</div> |
|
<div> |
|
<label for="milestones">Milestones (comma-separated)</label> |
|
<input type="text" name="milestones" id="milestones" value="{{ form_data.milestones | default('') }}" placeholder="e.g., Foundation complete, Framing started, Roof installed"> |
|
</div> |
|
<div> |
|
<label for="reflection">Reflection</label> |
|
<textarea name="reflection" id="reflection" placeholder="e.g., Facing delays due to weather and equipment issues.">{{ form_data.reflection | default('') }}</textarea> |
|
</div> |
|
<div class="button-row"> |
|
<button type="submit" name="action" value="generate">Generate</button> |
|
</div> |
|
</form> |
|
|
|
{% if error %} |
|
<div class="error">{{ error }}</div> |
|
{% endif %} |
|
|
|
<div class="output"> |
|
<h3>Checklist</h3> |
|
<p>{{ output.checklist | join('<br>') | default('') | safe }}</p> |
|
</div> |
|
<div class="output"> |
|
<h3>Suggestions</h3> |
|
<p>{{ output.tips | join('<br>') | default('') | safe }}</p> |
|
</div> |
|
<div class="output"> |
|
<h3>Quote</h3> |
|
<p>{{ output.quote | default('') }}</p> |
|
</div> |
|
</div> |
|
</body> |
|
</html> |