lokeshloki143's picture
Update templates/index.html
13b8640 verified
<!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>