 |
| Passenger Page |
Passenger Page consists of passenger list in which all passenger are listed. New passengers are inserted with the help of the new passenger page. A specific passenger can be searched on the search page. If passengers are inserted on wrong information that's why update page design. Update page will upload soon. Delete passenger page used for delete passenger information.
<div id ="user_panel" class = "col-md-12 display-none"
>
<nav id= "user_nav" class = "nav nav-pills nav-stacked my-3"
>
<a id = "new_user_nav_link" class = "nav-link" href = "#" > New </a>
<a id = "search_user_nav_link" class = "nav-link" href = "#" > Search </a>
<a id = "update_user_nav_link" class = "nav-link" href = "#" > Update </a>
<a id = "delete_user_nav_link" class = "nav-link" href = "#" > Delete </a>
</nav>
<div class = "row" >
<div id = "user_heading_panel" class = "col-md-12" >
<div class = "card" >
<div class = "card-header bg-grey-500"
>
<strong id = "user_panel_text" ></strong>
</div>
</div>
</div>
<div id = "display_user_panel" class = "col-md-12 my-3"
>
<div class = "card" >
<div class = "card-body" >
<table class = "table table-bordered"
>
<thead class = "thead-inverse" >
<tr>
<th class = "w-25" > U-ID </th>
<th class = "w-25" > Name </th>
<th class = "w-25" > Phone No </th>
<th class = "w-25"> Email </th>
</tr>
</thead>
<tbody>
<tr>
<td class = "w-25" scope ="row" ></td>
<td class = "w-25" ></td>
<td class = "w-25" ></td>
<td class = "w-25" ></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id = "new_user_panel" class ="col-md-12 my-3"
>
<div class = "card" >
<div class = "card-body" >
<div class ="row" >
<div class = "col-md-6" >
<div class = "form-group" >
<label for = "my-input" > First Name </label>
<input id = "my-input" class = "form-control" type = "text" name = "">
<small class = "form-text text-muted"
> Validation </small>
</div>
</div>
<div class = "col-md-6" > Validation </div>
<div class = "col-md-6" >
<div class = "form-group" >
<label for = "my-input" > Last Name </label>
<input id = "my-input" class = "form-control" type = "text" name = "">
<small class = "form-text text-muted"
> Validation </small>
</div>
</div>
<div class = "col-md-6" > Validation </div>
<div class = "col-md-6" >
<div class = "form-group" >
<label for = "my-input" > Father Name </label>
<input id=" my-input" class = "form-control" type = "text" name = "" >
<small class = " form-text text-muted"
> Validation </small>
</div>
</div>
<div class = "col-md-6" > Validation </div>
<div class = "col-md-6" >
<div class = "form-group" >
<label for = "my-input" > Phone No </label>
<input id = "my-input" class = "form-control" type = "text" name = "" >
<small class = "form-text text-muted"
> Validation </small>
</div>
</div>
<div class = "col-md-6" > Validation </div>
<div class = "col-md-6" >
<div class = "form-group" >
<label for = "my-input" > CNIC </label>
<input id = "my-input" class = "form-control" type = "text" name = "" >
<small class = "form-text text-muted"
> Validation </small>
</div>
</div>
<div class = "col-md-6" > Validation </div>
<div class = "col-md-6" >
<div class = "form-group" >
<label for = "my-input" > Home / Village </label>
<input id = "my-input" class = "form-control" type = "text" name = "" >
<small class = "form-text text-muted"
> Validation </small>
</div>
</div>
<div class = "col-md-6" > Validation </div>
<div class = "col-md-6" >
<div class = "form-group" >
<label for = "my-input"> Post Office </label>
<input id = "my-input" class = "form-control" type = "text" name = "" >
<small class = "form-text text-muted"
> Validation </small>
</div>
</div>
<div class = "col-md-6" > Validation </div>
<div class = "col-md-6" >
<div class = "form-group" >
<label for = "my-input" > District </label>
<input id = "my-input" class = "form-control" type = "text" name = "" >
<small class = "form-text text-muted"
> Validation </small>
</div>
</div>
<div class = "col-md-6" > Validation </div>
<div class = "col-md-6" >
<div class = "form-group" >
<label for = "my-input" > Email </label>
<input id = "my-input" class = "form-control" type = "text" name = "" >
<small class = "form-text text-muted"
> Validation </small>
</div>
</div>
<div class = "col-md-6" > Validation </div>
<div class = "col-md-6" >
<button class = "btn btn-success w-25 float-right"
> Save </button>
</div>
</div>
</div>
</div>
</div>
<div id = "search_user_panel" class = "col-md-12 my-3"
>
<div class = "card" >
<div class = "card-body" >
<div class = "row" >
<div class = "col-md-6" >
<div class = "form-group" >
<label for = "my-input" > Enter User ID </label>
<input id = "my-input" class = "form-control" type = "text" name = "" >
<small class = "form-text text-muted"
> Validation </small>
</div>
</div>
<div class = "col-md-6" > Validation </div>
<div class = "col-md-6" >
<button class = "btn btn-success w-25 float-right"
> Search </button>
</div>
<div class = "col-md-12 mt-3"
>
<table class = "table table-bordered"
>
<thead class = "thead-inverse" >
<tr>
<td class = "w-25" > U-ID </td>
<td class = "w-25" > </td>
<td class = "w-25" > Name </td>
<td class = "w-25" > </td>
</tr>
</thead>
<tbody>
<tr>
<td class = "w-25"> Father Name </td>
<td class = "w-25"> </td>
<td class = "w-25" > Phone No </td>
<td class = "w-25" > </td>
</tr>
<tr>
<td class="w-25">CNIC</td>
<td class="w-25"></td>
<td class="w-25">Email</td>
<td class="w-25"></td>
</tr>
<tr>
<td class="w-25">Address</td>
<td class="w-75" colspan="4"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="update_user_panel" class="col-md-12 my-3">
<div class="card">
<div class="card-body">
Update User
</div>
</div>
</div>
<div id="delete_user_panel" class="col-md-12 my-3">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="my-input">Enter User ID</label>
<input id="my-input" class="form-control" type="text" name="">
<small class="form-text text-muted">Validation</small>
</div>
</div>
<div class="col-md-6">
Validation
</div>
<div class="col-md-6">
<button class="btn btn-success w-25 float-right">Submit</button>
</div>
<div class="col-md-12 mt-3">
<div class="alert alert-success" role="alert">
Messsage.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Output:
 |
| Passenger View |
 |
| Passenger Collapes View |
 |
| Passenger Delete View |
 |
| Passenger Search View |
 |
| New Passenger View |
0 Comments
Thanks