<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daily OJT Training Form</title>
<!-- Tailwind CSS CDN -->
<script src="[Link]
<link href="[Link]
family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f3f4f6;
display: flex;
justify-content: center;
align-items: flex-start; /* Align to top for longer forms */
min-height: 100vh;
padding: 2rem 1rem;
}
.form-container {
background-color: #ffffff;
border-radius: 1rem; /* Rounded corners for the container */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px
rgba(0, 0, 0, 0.05);
padding: 2rem;
max-width: 900px; /* Max width for readability */
width: 100%;
}
.form-group label {
font-weight: 600;
color: #374151;
margin-bottom: 0.5rem;
display: block;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem; /* Rounded corners for inputs */
font-size: 1rem;
color: #4b5563;
transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-
out;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #3b82f6; /* Blue focus border */
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); /* Light blue shadow
on focus */
}
.form-group textarea {
min-height: 100px;
resize: vertical; /* Allow vertical resizing */
}
.signature-area {
border-top: 1px dashed #d1d5db;
padding-top: 1.5rem;
margin-top: 2rem;
}
.signature-line {
border-bottom: 1px solid #9ca3af;
width: 100%;
height: 1px;
margin-top: 2rem;
}
.rating-group label {
display: inline-block;
margin-right: 1rem;
}
.rating-group input[type="radio"] {
margin-right: 0.5rem;
}
</style>
</head>
<body>
<div class="form-container">
<h1 class="text-3xl font-bold text-center text-gray-800 mb-8">Daily OJT
Training Form</h1>
<p class="text-center text-gray-600 mb-8">Please fill out this form
daily to document your on-the-job training progress.</p>
<form class="space-y-6">
<!-- Section: General Information -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="form-group">
<label for="date">Date:</label>
<input type="date" id="date" name="date" class="rounded-lg"
required>
</div>
<div class="form-group">
<label for="technicianName">Technician's Name:</label>
<input type="text" id="technicianName" name="technicianName"
class="rounded-lg" placeholder="Enter technician's full name" required>
</div>
<div class="form-group">
<label for="trainerName">Trainer's Name:</label>
<input type="text" id="trainerName" name="trainerName"
class="rounded-lg" placeholder="Enter trainer's full name" required>
</div>
<div class="form-group">
<label for="shift">Shift:</label>
<select id="shift" name="shift" class="rounded-lg" required>
<option value="">Select Shift</option>
<option value="day">Day Shift</option>
<option value="night">Night Shift</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-group">
<label for="areaDepartment">Area/Department:</label>
<input type="text" id="areaDepartment" name="areaDepartment"
class="rounded-lg" placeholder="e.g., Assembly Line 1, Quality Control"
required>
</div>
<div class="form-group">
<label for="processTask">Process/Task Being Trained On:</label>
<input type="text" id="processTask" name="processTask"
class="rounded-lg" placeholder="e.g., Machine Operation, Troubleshooting PLC"
required>
</div>
<!-- Section: Daily Activities & Learning -->
<div class="form-group">
<label for="dailyActivities">Daily
Activities/Observations:</label>
<textarea id="dailyActivities" name="dailyActivities"
class="rounded-lg" rows="5" placeholder="Describe the tasks performed,
observations made, and any specific procedures followed today."></textarea>
</div>
<div class="form-group">
<label for="skillsLearned">Skills Learned/Practiced:</label>
<textarea id="skillsLearned" name="skillsLearned"
class="rounded-lg" rows="3" placeholder="List new skills acquired or existing
skills practiced. Be specific (e.g., 'Calibrated sensor X using method Y',
'Performed routine maintenance on machine Z')."></textarea>
</div>
<div class="form-group">
<label for="challengesQuestions">Challenges/Questions:</label>
<textarea id="challengesQuestions" name="challengesQuestions"
class="rounded-lg" rows="3" placeholder="Note any difficulties encountered,
areas of confusion, or questions for your trainer."></textarea>
</div>
<!-- Section: Understanding & Proficiency Rating -->
<div class="form-group">
<label class="mb-2">Technician's Self-Assessment of
Understanding/Proficiency for Today's Training:</label>
<div class="rating-group flex flex-wrap gap-4 mt-2">
<label class="flex items-center">
<input type="radio" name="proficiencyRating" value="1"
class="mr-1"> 1 (Beginner)
</label>
<label class="flex items-center">
<input type="radio" name="proficiencyRating" value="2"
class="mr-1"> 2 (Basic)
</label>
<label class="flex items-center">
<input type="radio" name="proficiencyRating" value="3"
class="mr-1"> 3 (Developing)
</label>
<label class="flex items-center">
<input type="radio" name="proficiencyRating" value="4"
class="mr-1"> 4 (Proficient)
</label>
<label class="flex items-center">
<input type="radio" name="proficiencyRating" value="5"
class="mr-1"> 5 (Expert)
</label>
</div>
</div>
<!-- Section: Trainer's Feedback -->
<div class="form-group">
<label for="trainerFeedback">Trainer's
Feedback/Comments:</label>
<textarea id="trainerFeedback" name="trainerFeedback"
class="rounded-lg" rows="4" placeholder="Trainer to provide feedback on
technician's performance, areas for improvement, and next steps."></textarea>
</div>
<!-- Section: Signatures -->
<div class="signature-area grid grid-cols-1 md:grid-cols-2 gap-8 mt-
8">
<div>
<div class="signature-line"></div>
<p class="text-center text-gray-600 mt-2">Technician's
Signature</p>
</div>
<div>
<div class="signature-line"></div>
<p class="text-center text-gray-600 mt-2">Trainer's
Signature</p>
</div>
</div>
<div class="flex justify-center mt-8">
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-
white font-bold py-3 px-8 rounded-lg shadow-lg transition duration-300 ease-in-
out transform hover:scale-105">
Submit Daily Report
</button>
</div>
</form>
</div>
<script>
// Auto-fill the date field with the current date
[Link] = function() {
const today = new Date();
const year = [Link]();
const month = String([Link]() + 1).padStart(2, '0'); //
Months are 0-indexed
const day = String([Link]()).padStart(2, '0');
[Link]('date').value = `${year}-${month}-${day}`;
};
</script>
</body>
</html>