Add tabs to the "wizard" for creation of new trials

application/views/trial/new.php

@@ -14,14 +14,14 @@
 			<?php echo validation_errors(); ?>
 				<ul>
 					<li>
-						<label>Versuchname <span class="req">*</span></label>
+						<h4>Versuchsbezeichnung <span class="req">*</span></h4>
 						<div>
 							<input type="text" name="name" class="short text" value="<?=set_value('name')?>">
 							<?=form_error('name')?>
 						</div>
 					</li>
 					<li>
-						<label>Beschreibung</label><br />
+						<h4>Beschreibung</h4>
 						<label class="note">Eine Beschreibung ist hilfreich, wenn andere Mitarbeiter an diesem Projekt mitarbeiten möchten.</label>
 						<div>
 							<textarea name="description" rows="6" cols="60" class="textarea"><?=set_value('description')?></textarea>
@@ -29,13 +29,15 @@
 						</div>
 					</li>
 					<li>
-						<label>3D-Modell</label><br />
+						<h4>3D-Modell</h4>
 <?
 	$defaultmodel = "foo";
 	if(isset($defaultmodel)):
 ?>
-						<label class="note"><strong>Für dieses Projekt ist ein Standardmodell vorhanden.</strong><br />
-							Wenn Sie hier eine neue Datei hochladen, wird für diesen Versuch das hier angegebene Modell verwendet.</label>
+						<div class="notice">
+							<strong>Für dieses Projekt ist ein Standardmodell vorhanden.</strong><br />
+							Wenn Sie hier eine neue Datei hochladen, wird für diesen Versuch das hier angegebene Modell verwendet.
+						</div>
 <?
 	endif;
 ?>
@@ -49,19 +51,27 @@
 
 		<div class="box">
 
-			<h3>Parameter für die Berechnung</h3>
+			<h3>Programmspezifische Parameter für die Berechnung</h3>
 <?
 	$defaultconfig = "foo";
 	if(isset($defaultconfig)):
 ?>
-			<p>
+			<div class="notice">
 				<strong>Für dieses Projekt ist eine Standardkonfiguration vorhanden.</strong><br />
 				Das folgende Formular enthält die Standardparameter. Diese können für diesen Versuch nach Belieben angepasst werden. <br />
 				Die Standardkonfiguration wird dabei nicht verändert.
-			</p>
+			</div>
 <?
 	endif;
 ?>
+			<p>Bitte wählen Sie zunächst das Programm aus, mit dem Sie eine Berechnung durchführen möchten:</p>
+			<ul class="tabs">
+				<li class="active"><a href="#tab1">Ultimate Scattering Tool</a></li>
+				<li><a href="#tab2">Crazy Little Simulator</a></li>
+			</ul>
+
+			<div class="tab_container">
+				<div id="tab1" class="tab_content">
 					<table>
 						<thead>
 							<tr>
@@ -85,6 +95,12 @@
 						</tbody>
 					</table>
 				</div>
+				<div id="tab2" class="tab_content">
+				   <p>foobar</p>
+				</div>
+			</div>
+
+		</div>
 	</form>
 
 </div>