made demo sexy

scottgonzalez · Dec 6, 2010 · b0e9c1f · b0e9c1f
1 parent e6a9831
commit b0e9c1f
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 6 deletions.
diff --git a/demos/style.css b/demos/style.css
@@ -1,3 +1,78 @@
+body{
+	width:955px;
+	margin:0px auto;
+}
+
 .validationSuccess{
-    display: none;
-}
+	display: none;
+}
+
+.validationFailure{
+	display: block;
+	border: 2px solid #F6D10A;
+	margin: 20px 0;
+	padding:0 15px;
+
+	/*border*/
+	-moz-border-radius: 12px; 
+	-webkit-border-radius: 12px; 
+	border-radius: 12px; 
+
+	/*background gradient*/
+	background-color: #D6D1CA;
+	background-image: -moz-linear-gradient(top, #D6D1CA, #ffffff); 
+	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #D6D1CA),color-stop(1, #ffffff)); 
+	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#D6D1CA', EndColorStr='#ffffff'); 
+	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#D6D1CA', EndColorStr='#ffffff')"; 
+	}
+.successMessage{
+	border: 2px solid #709900;
+	margin: 20px 0;
+	padding:0 15px;
+
+	/*border*/
+	-moz-border-radius: 12px; 
+	-webkit-border-radius: 12px; 
+	border-radius: 12px; 
+
+	/*background gradient*/
+	background-color: #9ab34d;
+	background-image: -moz-linear-gradient(top, #9ab34d, #ffffff); 
+	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #9ab34d),color-stop(1, #ffffff)); 
+	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#9ab34d', EndColorStr='#ffffff'); 
+	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#9ab34d', EndColorStr='#ffffff')"; 	
+}
+
+label {
+	display: block;
+	float: left;
+	width: 100px;
+}
+
+input,textarea,select{
+	outline: none;
+	letter-spacing: 0;
+	height: 29px;
+	width:284px;
+	border: 2px solid #D6D6D6; -moz-border-radius:8px;
+	border-radius:8px; -webkit-border-radius:8px;
+	font-size:15px;
+	color:#777;
+	margin-left:15px;
+	margin-bottom:10px;
+	padding:8px 35px 0 6px;
+	}
+	input.submit{
+		height: 50px;
+		padding: 0;
+		margin: 0;
+		background-color: #D6D1CA;
+		background-image: -moz-linear-gradient(top, #D6D1CA, #ffffff); 
+		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #D6D1CA),color-stop(1, #ffffff)); 
+		filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#D6D1CA', EndColorStr='#ffffff'); 
+		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#D6D1CA', EndColorStr='#ffffff')"; 
+	}
+input:focus,textarea:focus{ 
+    border:2px solid #F6D10A;
+}
+
diff --git a/demos/templates/demo.php b/demos/templates/demo.php
@@ -11,7 +11,7 @@
 		<div id="messageBox" class=<?php if (!empty($aErrors)) {echo '"validationFailure"';} else {echo '"validationSuccess"';} ?> >
 			<?php
 			if (!empty($aErrors)) {
-				echo $aErrors['global'];
+				echo '<p>' . $aErrors['global'] . '</p>';
 				foreach ($aErrors['details'] as $sError) {
 					echo $sError;
 				}
@@ -25,7 +25,7 @@
 			<input type="text" id="username" name="username" /><br />
 			<label for="password" name="password">Password:</label>
 			<input type="password" name="password" input="password" /><br />
-			<input type="submit" name="submit" input="submit" value="Create My Account" />
+			<input class="submit" type="submit" name="submit" input="submit" value="Create My Account" />
 		</form>
 	</body>
 </html>
diff --git a/demos/templates/success.php b/demos/templates/success.php
@@ -8,6 +8,6 @@
 	<body>
 		<h1>MacGuffin App *beta</h1>
 		<p>Register for an account (doesn't actually save any data).</p>
-		<div id="messageBox"><p>You have successfully registered an account with MacGuffin App!</p></div>
+		<div id="messageBox" class="successMessage"><p>You have successfully registered an account with MacGuffin App!</p></div>
 	</body>
 </html>
diff --git a/demos/validation.js b/demos/validation.js
@@ -22,12 +22,14 @@ $(document).ready(function() {
 				messageBox.append($('<p>' + data.global + '</p>'));
 				if (data.valid) {
 					form.remove();
+					messageBox.removeClass('validationFailure validationSuccess')
+						.addClass('successMessage');
 				} else {
 					$.each(data.details, function(input, errorMessage){
 						messageBox.append(errorMessage);
 					});
+					messageBox.removeClass('validationSuccess').addClass('validationFailure');
 				}
-				messageBox.show();
 			}
 		});
 		return false;