Scheduler Mockup

by clayshannon

HTML

<h1>Crew Scheduler</h1>
<button type="button" name="btnCr8sched" id="btnCre8sched">Create a Schedule</button>
<label for="selmaintenance">Maintain</label>
<select name="selmaintenance" id="selmaintenance">
  <option value="what">What (Job Definitions)</option>
  <option value="where">Where (Locations / Stations)</option>
  <option value="who">Who (Personnel)</option>
  <option value="when">When (Shifts)</option>
</select>
<br/>
<h2>What (Job Definition)</h2>
<label for="selwhat">What job type do you want to schedule? (one at a time)</label>
<select name="selwhat" id="selwhat">
  <option value="linecook">Line cook</option>
  <option value="barrista">Barrista</option>
  <option value="securityguard">Security Guard</option>
  <option value="fignipper">Nipper of Figs</option>
</select>
<h2>Where (Location / Station)</h2>
<label for="selwhere">Select the locations for the job type selected above</label>
<select name="selwhere" id="selwhere" multiple="multiple">
  <option value="stage">Stage</option>
  <option value="a1">A1</option>
  <option value="a2">A2</option>
  <option value="a3">A3</option>
</select>
<h2>Who (Personnel)</h2>
<label for="selwho">Select the personnel you want to assign to the job type and locations selected above</label>
<select name="selwho" id="selwho" multiple="multiple">
  <option value="cat1">John</option>
  <option value="chick1">Mary</option>
  <option value="cat2">Eric</option>
  <option value="chick2">Grace</option>
</select>
<h2>When (Shifts to schedule)</h2>
<label for="selwho">Select the shifts you want to schedule</label>
<select name="selwho" id="selwho" multiple="multiple">
  <option value="shift1">Create a table?</option>
  <option value="shift2">They choose date and</option>
  <option value="shift3">...beginning time and</option>
  <option value="shift4">...ending time</option>
</select>

CSS

label {
  vertical-align:top;
}