diff options
Diffstat (limited to 'engagements/templates/engagements/engagement_create.html')
| -rw-r--r-- | engagements/templates/engagements/engagement_create.html | 62 |
1 files changed, 42 insertions, 20 deletions
diff --git a/engagements/templates/engagements/engagement_create.html b/engagements/templates/engagements/engagement_create.html index 1e72ca0..e4aeee6 100644 --- a/engagements/templates/engagements/engagement_create.html +++ b/engagements/templates/engagements/engagement_create.html @@ -3,27 +3,49 @@ {% block title %}Create new engagement{% endblock title %} {% block content %} +<div class="container mx-auto px-4 py-8"> + <div class="bg-white shadow-md rounded-lg overflow-hidden"> + <header class="bg-blue-100 p-4"> + <h2 class="text-3xl font-bold text-center">{{ title }}</h2> + </header> + <div class="p-6"> + <div class="mb-8"> + <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg"> + <h4 class="text-lg font-semibold mb-2">Step 1</h4> + <p class="mb-4">To roughly plan out future events, you provide the minimal details here: <strong>start date</strong>, <strong>end date</strong> (optional), the <strong>type of Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external site</strong> or operation and finally the <strong>inspectors</strong> who are carrying out the work.</p> + <h4 class="text-lg font-semibold mb-2">Step 2</h4> + <p>So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to these components. In addition, each component can be associated with <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.</p> + </div> + </div> -<div class="w3-container w3-cell-row w3-margin-bottom"> - <h2>{{ title }}</h2> - <div class="w3-panel w3-light-blue w3-round w3-leftbar w3-border-blue w3-display-container"> - - <span onclick="this.parentElement.style.display='none'" - class="w3-button w3-display-topright">×</span> - <h4>Step 1</h4> - <p>To roughly plan out future events, you provide the minimal details here: <strong>start date</strong>, <strong>end date</strong> (optional),the <strong>type of Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external site</strong> or operation and finally the <strong>inspectors</strong> who are carrying out the work.</p> - <h4>Step 2</h4> - <p>So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to these components. In addition, each compontent can be associated with <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.</p> - </div> - - <hr> - <div class="w3-container w3-cell-middle"> - <h4>Enter main details:</h4> - <form method="post">{% csrf_token %} - {{ form.as_p }} - <input type="submit" class="w3-btn w3-green" value="Save"> - </form> + <div class="mt-8"> + <h4 class="text-xl font-semibold mb-4">Enter main details:</h4> + <form method="post" class="space-y-6"> + {% csrf_token %} + {% for field in form %} + <div> + <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700"> + {{ field.label }} + </label> + <div class="mt-1"> + {{ field }} + </div> + {% if field.help_text %} + <p class="mt-2 text-sm text-gray-500">{{ field.help_text|safe }}</p> + {% endif %} + {% for error in field.errors %} + <p class="mt-2 text-sm text-red-600">{{ error }}</p> + {% endfor %} + </div> + {% endfor %} + <div> + <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> + Save + </button> + </div> + </form> + </div> + </div> </div> </div> - {% endblock content %} |