<div class="container my-5">
  <h1 class="mb-4">Service Activity Submission Form</h1>
  <p class="text-danger">Please submit this form within three days of completing the service activity. Failure to submit on time will negate the hours earned.</p>
  
  <form>
    <!-- Student Information -->
    <div class="mb-3">
      <label for="studentName" class="form-label">Student Name</label>
      <input type="text" class="form-control" id="studentName" placeholder="John Doe" required>
    </div>

    <!-- Activity Information -->
    <div class="mb-3">
      <label for="activityName" class="form-label">Activity Name</label>
      <input type="text" class="form-control" id="activityName" placeholder="Beach Cleanup" required>
    </div>
    <div class="row mb-3">
      <div class="col-md-6">
        <label for="activityDate" class="form-label">Date of Activity</label>
        <input type="date" class="form-control" id="activityDate" required>
      </div>
      <div class="col-md-6">
        <label for="hours" class="form-label">Hours Completed</label>
        <input type="number" class="form-control" id="hours" placeholder="3" required>
      </div>
    </div>
    <div class="mb-3">
      <label for="activityDescription" class="form-label">Description of Activity</label>
      <textarea class="form-control" id="activityDescription" rows="3" placeholder="Describe what you did and your contributions." required></textarea>
    </div>

    <!-- Supervisor Information -->
    <div class="mb-3">
      <label for="supervisorName" class="form-label">Supervisor Name</label>
      <input type="text" class="form-control" id="supervisorName" placeholder="Ms. Jane Smith" required>
    </div>
    <div class="mb-3">
      <label for="supervisorEmail" class="form-label">Supervisor Email</label>
      <input type="email" class="form-control" id="supervisorEmail" placeholder="supervisor@example.com" required>
      <div class="form-text">Submitting this form will send a confirmation email to the supervisor. Please alert them to expect it.</div>
    </div>

    <button type="submit" class="btn btn-primary">Submit Service Activity</button>
  </form>
</div>