IPB/upload/html/sys-img/css.html

<html>
 <head>
  <title>CSS Generator</title>
  <style type="text/css">
  TABLE, TR, TD     { font: 10px Verdana; color:#000000 }
  BODY      { font: 10px Verdana; color:#000000 }
  INPUT, SUBMIT 	{
                      font-family: Courier, Courier New, Monaco;
	                   font-size: 10pt;
	                   font-family: verdana, helvetica, sans-serif;
                      vertical-align:middle;
                      background-color: #FFFFFF;
	}
  </style>
 <script language='Javascript'>
 // It's crappy, it's by Matt!
 function do_css() {
    var theForm = document.css_form;
    var theName = theForm.NAME.value;
    var theFont = theForm.FONT.value;
    var theSize = theForm.SIZE.value;
    var theSizeT = theForm.SIZE_TYPE.value;
    var theWeight = theForm.WEIGHT.value;
    var theColor  = theForm.COLOUR.value;
    var theBG     = theForm.BGCOLOUR.value;
    var theBW     = theForm.BWEIGHT.value;
    var theBC     = theForm.BCOLOUR.value;
    var theSpace  = theForm.SPACE.value;
    var theSpaceT = theForm.SPACING.value;
    var theLSpace = theForm.LSPACE.value;
    
    //defaults
    
    var tmp_style = "solid";
    var tmp_col   = "black";
    var tmp_thick = "1px";
    
    // Check for empties
    var msg = "";
    
    if (theName == "") { msg = "You must enter a CSS definition name"; }
    // more here eventually?
    if (msg != "") {
        alert(msg);
        return;
    }
    
    var thecss = "#" + theName + " {\n";
    // start the build the css
    
    if (theFont != "") {
     thecss += "\t font-family: " + theFont + ";\n";
    }
    if (theSize != "") {
     thecss += "\t font-size: " + theSize + theSizeT + ";\n";
    }
    if (theWeight != "normal") {
     thecss += "\t font-weight: " +  theWeight + ";\n";
    }
    if (theColor != "") {
     thecss += "\t color: " +  theColor + ";\n";
    }
    if (theBG != "") {
     thecss += "\t background-color: " +  theBG + ";\n";
    }
    if (theBW != "") {
     tmp_thick    = theBW + "px";
    }
    if (theBC != "") {
     tmp_col  = theBC;
    }
    if (theBW != "" && theBC != "") {
     thecss += "\t border: " + tmp_style + " " + tmp_col + " " + tmp_thick + ";\n";
    }
    if (theSpace != "") {
     thecss += "\t line-height: " + theSpace + theSpaceT + ";\n";
    }
    if (theLSpace != "") {
     thecss += "\t letter-spacing: " + theLSpace + "px;\n";
    }
    thecss += "}";
    
    theForm.CSS.value = thecss;
    return;
    
   }

    function preview() {
       var theCSS = document.css_form.CSS.value;
       var theID  = document.css_form.NAME.value;
       var Template = "<html><head><title>testing CSS</title><style type=\"text/css\">"+theCSS+"</style></head>\n<body bgcolor='#FFFFFF'>\n";
       Template += "<span id='"+theID+"'>Cozy lummox gives smart squid who asks for job pen<br>Apparently....</span>";
       Template += "\n</body></html>";
       var newWin = window.open( '', 'PREVIEW', 'width=500,height=200,top=0,left=0,resizable=1,scrollbars=1,location=no,directories=no,status=no,menubar=no,toolbar=no');
       newWin.document.write(Template);
       newWin.document.close();
   }    
    
 <!--
 
 //-->
 </script>
 </head>
 <body bgcolor='#FFFFFF'>
 <table width='95%' align='center' border='0' cellspacing='1' cellpadding='0'>
 <tr>
 <td>
 <b><span style='font-family: verdana, arial; font-size:20px; color:#4C77B6; font-weight:bold; letter-spacing:-1px'>Simple CSS Generator</span></b>
 <br><br>
 This is designed to generate a simple CSS definition. It does not contain
 all the CSS attributes, just the most commonly used ones.
 <br><br>
 </td>
 </tr>
 </table>
 <form name='css_form'>
 
 <table width='95%' border='0' align='center'>
 <tr>
  <td width='60%'>
 
	 <table width='100%' align='center' border='0' bgcolor='#000000' cellspacing='1' cellpadding='0'>
	 <tr>
	  <td>
	   <table width='100%' align='center' border='0' bgcolor='#EEF2F7' cellspacing='0' cellpadding='4'>
	   <tr>
		<td width='40%'><b>CSS ID Definition name?</b></td>
		<td width='60%'><input type='text' name='NAME'></td>
	   </tr>
	   <tr>
		<td width='40%'><b>Font name (separate many with a comma)</b></td>
		<td width='60%'><input type='text' name='FONT'></td>
	   </tr>
	   <tr>
		<td width='40%'><b>Font size</b></td>
		<td width='60%'><input type='text' name='SIZE' size='5'>&nbsp;<select name='SIZE_TYPE'><option value='px'>Pixels<option value='pt'>Points<option value='em'>em</select></td>
	   </tr>
	   <tr>
		<td width='40%'><b>Font Weight</b></td>
		<td width='60%'><select name='WEIGHT'><option value='normal'>normal<option value='bold'>Bold<option value='bolder'>Bolder</select></td>
	   </tr>
	   <tr>
		<td width='40%'><b>Font Colour</b></td>
		<td width='60%'><input type='text' name='COLOUR'></td>
	   </tr>
	   <tr>
		<td width='40%'><b>Background Colour</b></td>
		<td width='60%'><input type='text' name='BGCOLOUR'></td>
	   </tr>
	   <tr>
		<td width='40%'><b>Border...</b></td>
		<td width='60%'>Weight (in pixels or leave blank)&nbsp;<input type='text' name='BWEIGHT' size='5'>&nbsp;Colour<input type='text' name='BCOLOUR' size='15'></td>
	   </tr>
	   <tr>
		<td width='40%'><b>Line Spacing</b></td>
		<td width='60%'><input type='text' name='SPACE' size='5'>&nbsp;<select name='SPACING'><option value='px'>Pixels<option value='pt'>Points<option value='%'>%</select></td>
	   </tr>
	   <tr>
		<td width='40%'><b>Letter Spacing</b></td>
		<td width='60%'><input type='text' name='LSPACE' size='5'>&nbsp;point</td>
	   </tr>
	   <tr>
	   <td colspan='2' align='center'><input type='button' onClick='do_css();' value='Generate the CSS definition'></td>
	   </tr>
	 </table>
	</td>
	</tr>
	</table>
 </td>
 <td width='40%'>

  <br><br><br><center>Your CSS will appear below once generated.<br><textarea name='CSS' rows='10' style='width:100%' wrap='soft'></textarea>
  <input type='button' onClick='preview();' value='Preview this style'></center>
  
 </td>
</tr>
</table>
</form>
</body>
</html>