1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     2: 	  "http://www.w3.org/TR/html4/loose.dtd">
     3: <html>
     4: 
     5:   <head>
     6: 
     7:     <meta http-equiv="Content-Type"
     8: 	  content="text/html; charset=utf-8">
     9: 
    10:     <title>
    11:       CloudSession Control Center
    12:     </title>
    13: 
    14:     <!-- jquery itself -->
    15:     <script type="text/javascript"
    16: 	    src="js/jquery-1.4.2.js">
    17:     </script>
    18: 
    19:     <!-- jquery ui -->
    20:     <script type="text/javascript"
    21: 	    src="js/jquery-ui-1.8.2.custom.min.js">
    22:     </script>
    23: 
    24:     <!-- the jquery-ui theme -->
    25:     <link type="text/css"
    26: 	  href="css/cccolors/jquery-ui-1.8.2.custom.css"
    27: 	  rel="Stylesheet" />
    28: 
    29:     <!-- jquery plugin: sha256 hashing -->
    30:     <script type="text/javascript"
    31: 	    src="js/jquery.sha256.js">
    32:     </script>
    33: 
    34:     <!-- jquery plugin: cookie handling -->
    35:     <script type="text/javascript"
    36: 	    src="js/jquery.cookie.js">
    37:     </script>
    38: 
    39:     <!-- jquery plugin: center, not as useful a hoped
    40: 	 <script type="text/javascript"
    41: 		 src="js/jquery.center.js">
    42: 	 </script>
    43: 	 -->
    44: 
    45:     <!-- jquery plugin: pre css3 background scaling -->
    46:     <script type="text/javascript"
    47: 	    src="js/jquery.maximage.js">
    48:     </script>
    49: 
    50:     <!-- jquery plugin: pre css3 background scaling -->
    51:     <script type="text/javascript"
    52: 	    src="js/jquery.get_url_vars.js">
    53:     </script>
    54: 
    55:     <!-- self's primary javascript -->
    56:     <script type="text/javascript"
    57: 	    src="js/ccc_login.js">
    58:     </script>
    59: 
    60:     <!-- self's primary css -->
    61:     <link rel="stylesheet"
    62: 	  href="css/ccc_login.css"
    63: 	  type="text/css" />
    64: 
    65:     <!-- graceful noscript degradation -->
    66:     <!-- TODO: browser version detect and warn ie lt 8 ff lt 3 -->
    67:     <noscript>
    68:       <link rel="stylesheet"
    69: 	    href="css/noscript_ccc_login.css"
    70: 	    type="text/css" />
    71:     </noscript>
    72:     
    73:     <!-- self's inline js script -->
    74:     <script type="text/javascript">
    75:       // nothing for now
    76:     </script>
    77: 
    78:   </head>
    79: 
    80:   <!-- scratchpad comments
    81: 
    82: 
    83:     -->
    84: 
    85:   <body>
    86: 
    87:     <!-- the jq plugin maximage handles the magic of scaling this bg image -->
    88:     <img src="img/clinton-cloudy-sunset-ninth.jpg"
    89: 	 alt="CloudySunset" class="bgmaximage" />
    90:     
    91: 
    92:     <!-- going with nothing outside the main div
    93: 	 <hr/>
    94: 
    95: 	 <h3>
    96: 	   CloudSession Login
    97: 	 </h3>
    98: 
    99: 	 <hr/>
   100: 	 -->
   101: 
   102:     <!-- the dialog box div definitions start, and are followed by 'main' -->
   103: 
   104:     <div id="ccc_help_dialog"
   105: 	 title="CCC Help"
   106: 	 style="display:none;">
   107: 
   108:       <!-- title is good enough 
   109: 	   <span style="font-size: 133%; font-weight: bold;">
   110: 	     CloudSession Control Center Help
   111: 	   </span>
   112: 	   -->
   113: 
   114:       <ul>
   115: 	<li>
   116: 	  <a href="http://cloudsession.com/ccc/manual/" onclick="window.open(this.href, 'newwin'); return false;">
   117: 	    User Manual
   118: 	  </a>
   119: 	</li>
   120: 	<br/>
   121: 	<li>
   122: 	  <a href="http://cloudsession.com/ccc/faq/" onclick="window.open(this.href, 'newwin'); return false;">
   123: 	    Frequently Asked Questions
   124: 	  </a>
   125: 	</li>
   126: 	<br/>
   127: 	<li>
   128: 	  <a href="http://cloudsession.com/ccc/feedback/" onclick="window.open(this.href, 'newwin'); return false;">
   129: 	    Question/Feedback Form
   130: 	  </a>
   131: 	</li>
   132:       </ul>
   133:     </div>
   134:     <!-- end div ccc_help_dialog -->
   135: 
   136:     <div id="ccc_tos_dialog"
   137: 	 title="CCC Terms Of Service"
   138: 	 style="display:none;">
   139:       <p align="justify">
   140: 	The CloudSession Control Center Account Terms Of Service are as follows-<br/>
   141: 	<br/>
   142: 	This site is presently little more than a HelloWorld++ level ajax/lamp project written by a sole developer.  As such, you should expect that bugs will eat or expose any data you enter or upload.  Or that your account will, due to bug or whim or beta period expiration, disappear at any moment.  If this is a problem, please visit CloudSession.com again next year to see whether or not the site has sufficiently matured for your tastes.  However, if you are willing to use the site as is, that sole developer will be very greatful for the testing, and any positive or negative feedback you can provide.
   143:       </p>
   144:     </div>
   145:     <!-- end div ccc_help_dialog -->
   146: 
   147:     <div id="ccc_signup_req_send_dialog"
   148: 	 title="CCC Account Request"
   149: 	 style="display:none;">
   150:       <p align="justify">
   151: 	Sorry, this form is just a mock-up as of today, July 9th.  But things are progressing quickly.  Javascript and JQuery are really not too bad...
   152:       </p>
   153:     </div>
   154:     <!-- end div ccc_signup_req_send_dialog -->
   155: 
   156:     <div id="ccc_signup_req_pwnomatch_dialog"
   157: 	 title="CCC Account Request"
   158: 	 style="display:none;">
   159:       <p align="justify">
   160: 	Password and verify-pw do not match.  Please re-enter and resend.
   161:       </p>
   162:     </div>
   163:     <!-- end div ccc_signup_req_pwnomatch_dialog -->
   164: 
   165:     <div id="ccc_signup_req_alphanum_dialog"
   166: 	 title="CCC Account Request"
   167: 	 style="display:none;">
   168:       <p align="justify">
   169: 	Password must be at least three characters and alpha-numeric.  Please re-enter and resend.
   170:       </p>
   171:     </div>
   172:     <!-- end div ccc_signup_req_alphanum_dialog -->
   173: 
   174:     <div id="ccc_signup_server_error_dialog"
   175: 	 title="CCC Account Request"
   176: 	 style="display:none;">
   177:     </div>
   178:     <!-- end div ccc_signup_server_error_dialog -->
   179: 
   180:     <div id="ccc_signup_success_dialog"
   181: 	 title="CCC Account Request"
   182: 	 style="display:none;">
   183:     </div>
   184:     <!-- end div ccc_signup_success_dialog -->
   185: 
   186:     <div id="ccc_browser_bail_area">
   187:     </div>
   188: 
   189:     <div id="ccc_total_area">
   190: 
   191:       <!-- maybe one day I'll try to reimplement this with divs instead
   192: 	   of this table.  But this seems to work thus far, and there were
   193: 	   enough quirks with the logo animation, that I don't want to risk
   194: 	   a long effort to recreate what took a lot of effort to get working
   195: 	   this well.  -->
   196:       <table width="100%">
   197: 
   198:         <colgroup span="2">
   199: 	  <col width="75%" />
   200: 	  <col width="25%" />
   201: 	</colgroup>
   202: 
   203:         <tr>
   204: 
   205:           <td style="vertical-align: top;">
   206: 
   207: 	    <a href="http://cloudsession.com/"
   208: 	       class="undecorated_link">
   209: 	      <img src="img/csc-logo.png"
   210: 		   name="CloudSession.com"
   211: 		   id="ccc_main_logo"
   212: 		   style="width: 100%;" />
   213: 	    </a>
   214: 	    
   215: 	    <div class="ccc_dyn_pg_left ccc_dyn_pg_login"
   216: 		 id="ccc_dyn_pg_left_login">
   217: 
   218: 	      <table width="100%">
   219: 
   220: 		<colgroup span="2">
   221: 		  <col width="1%" />
   222: 		  <col width="99%" />
   223: 		</colgroup>
   224: 
   225: 		<tr>
   226: 		  <td>
   227: 		    <div class="ui-corner-all"
   228: 			 id="credentials_area_backdrop">
   229: 		      
   230: 		      <!-- same note for this table as above -->
   231: 		      <table width="100%"
   232: 			     cellpadding="4"
   233: 			     cellspacing="4">
   234: 
   235: 			<colgroup span="3">
   236: 			  <col width="1%" />
   237: 			  <col width="1%" />
   238: 			  <col width="" />
   239: 			</colgroup>
   240: 
   241: 			<tbody class="ccc_credentials_table">
   242: 			  <tr style="text-align: center;">
   243: 			    <td>
   244: 			      <div class="ccc_login_prompt">
   245: 				Hark!<br/>
   246: 				<br/>
   247: 			      </div>
   248: 			    </td>
   249: 			    <td>
   250: 			      <div class="ccc_login_prompt">
   251: 				Who goes there?<br/>
   252: 				<br/>
   253: 			      </div>
   254: 			    </td>
   255: 			  </tr>
   256: 			  
   257: 			  <tr>
   258: 			    
   259: 			    <td>
   260: 			      <div id="login_username_label">
   261: 				<label for="username">Username: </label>
   262: 			      </div>
   263: 			    </td>
   264: 			    
   265: 			    <td>
   266: 			      <input
   267: 				 type="text" name="username" id="username"
   268: 				 size="16" maxlength="42" tabindex="1"
   269: 				 class="text ui-widget-content ui-corner-all">
   270: 			    </td>
   271: 			    
   272: 			    <td>
   273: 			    </td>
   274: 			    
   275: 			  </tr>
   276: 			  
   277: 
   278: 			  <tr>
   279: 			    
   280: 			    <td>
   281: 			      <div id="login_password_label">
   282: 				<label for="password">Password: </label>
   283: 			      </div>
   284: 			    </td>
   285: 			    
   286: 			    <td>
   287: 			      <input
   288: 				 type="password" name="password" id="password"
   289: 				 size="16" maxlength="42" tabindex="2"
   290: 				 class="text ui-widget-content ui-corner-all">
   291: 			    </td>
   292: 			    
   293: 			    <td>
   294: 			    </td>
   295: 			    
   296: 			  </tr>
   297: 			  
   298: 			  
   299: 			  <tr>
   300: 			    
   301: 			    <td style="text-align: center; font-size: 70%;">
   302: 			      <br/>
   303: 			      <button
   304: 				 class="ccc_button ui-state-default ui-corner-all" 
   305: 				 id="ccc_button_login_attempt" type="button" tabindex="3">
   306: 				log in
   307: 			      </button>
   308: 			    </td>
   309: 			    
   310: 			    <td style="text-align: center; font-size: 70%;">
   311: 			      <br/>
   312: 			      <button
   313: 				 class="ccc_button ui-state-default ui-corner-all" 
   314: 				 id="ccc_button_login_clear" type="button" tabindex="4">
   315: 				clear
   316: 			      </button>
   317: 			    </td>
   318: 			    
   319: 			    <td>
   320: 			    </td>
   321: 			    
   322: 			  </tr>
   323: 			  <th colspan="2">
   324: 			    <div class="ui-corner-all"
   325: 				 id="ccc_login_server_response">
   326: 			    </div>
   327: 			    <tr>
   328: 			    </tr>
   329: 			  </th>
   330: 			  
   331: 			</tbody>
   332: 		      </table>
   333: 		      <!-- end of table to hold credentials fields -->
   334: 		    </div>
   335: 		    <!-- end credentials_area_backdrop div -->
   336: 		  </td>
   337: 		</tr>
   338: 	      </table>
   339: 	      <!-- end of table to hold credentials_area_backdrop -->
   340: 	      
   341: 	    </div>
   342: 	    <!-- end ccc_dyn_pg_left_login div -->
   343: 	    
   344: 	    <div class="ccc_dyn_pg_left ccc_dyn_pg_about ui-corner-all"
   345: 		 id="ccc_dyn_pg_left_about">
   346: 	      <span style="font-size: 150%; font-weight: bold;">
   347: 		About:: CloudSession Control Center<br/><br/>
   348: 	      </span>
   349: 
   350: 	      <b style="color: #007700; font-size: 133%;">
   351: 		THIS PAGE IS AN IN-DEVELOPMENT DEMO ONLY.<br/>
   352: 		user/pass is demo/123<br/>
   353: 		<br/>
   354: 	      </b>
   355: 
   356: 	      The CloudSession Control Center is <a href="http://en.wikipedia.org/wiki/Vaporware">vaporware</a> that will allow you to personalize your "Cloud Session".  CCC is still under very active, very early development.  Please check back in a few weeks, or contact <a href="http://cloudsession.com/dawg/profile/">Dawg</a> for early high-risk investment opportunities...<br/>
   357: <br/>
   358: Note that CCC is presently secured by the 1and1.com hosting service's shared ssl certificate, hence the https://ssl.perfora.net/secure url prefix.<br/>
   359: <br/>
   360: Now, what will thse "Cloud Sessions" let you do?- you may ask.  The short answer is that I haven't completely imagined the answer to that yet.  Right now the final vision is, shall we say, pie in the sky :)
   361: 	    </div>
   362: 	    <!-- end ccc_dyn_pg_left_about div -->
   363: 
   364: 	    <div class="ccc_dyn_pg_left ccc_dyn_pg_signup ui-corner-all"
   365: 		 id="ccc_dyn_pg_left_signup">
   366: 	      <span style="font-size: 150%; font-weight: bold;">
   367: 		New CCC Acount Request Form<br/><br/>
   368: 	      </span>
   369: 	      <!-- edunote: in ff3.5, the css span below does not work, but this does -->
   370: 	      <p align="justify">
   371: 		<span style="text-align: justify;">
   372: 
   373: 		  <b style="color: #007700; font-size: 133%;">
   374: 		    THIS PAGE IS IN ALPHA-TESTING MODE.<br/>
   375: 		    <br/>
   376: 		  </b>
   377: 
   378: 		  A CloudSession Control Center beta account is free, and will allow you to personalize your "Cloud Session".  To sign up, just fill out the information requested below and press the send button at the bottom of the page to dispatch your request into 'the cloud'.  Also, please read the <a href="http://cloudsession.com/about/tos" tabindex="1" onclick="$('#ccc_tos_dialog').dialog({ width: 600 }); return false;">terms of service</a>, which can be paraphrased as 'you get what you pay for'.  If you are interested in a more mature service, please visit cloudsession.com again in a year or so.  Be seeing you... :&#41; <!-- note that &#41; is close paren magic, to help emacs' highlighting -->
   379: 		  <br/>
   380: 		  <br/>
   381: 		</span>
   382: 	      </p>
   383: 
   384: 	    </div>
   385: 	    <!-- end ccc_dyn_pg_left_signup div -->
   386: 
   387: 	    <div class="ccc_dyn_pg_left ccc_dyn_pg_loggedin"
   388: 		 id="ccc_dyn_pg_left_loggedin">
   389: 	    </div>
   390: 	    <!-- end ccc_dyn_pg_left_loggedin div -->
   391: 
   392: 	  </td>
   393: 
   394: 	  <td style="vertical-align: top;">
   395: 
   396: 	    <div id="ccc_main_logo_text">
   397: 	      CloudSession
   398: 	      <br/>
   399: 	      Control 
   400: 	      <a href="http://cloudsession.com/dawg/profile/"
   401: 		 class="undecorated_link" >
   402: 		<img src="img/zyx_dawg_256.png" id="cscc_dz_logo" />
   403: 	      </a>
   404: 	      <br/>
   405: 	      Center&nbsp;
   406: 	    </div>
   407: 
   408: 	    <div class="ccc_dyn_pg_right ccc_dyn_pg_login"
   409: 		 id="ccc_dyn_pg_right_login">
   410: 	      <br/>
   411: 	      No account?&nbsp;<br/>
   412: 	      It's free to&nbsp;
   413: 	      <br/>
   414: 	      <button
   415: 		 class="ccc_button ui-state-default ui-corner-all ccc_button_signup" 
   416: 		 id="ccc_button_signup" type="button" tabindex="5">
   417: 		sign-up
   418: 	      </button>
   419: 	      <br/>
   420: 	      <br/>
   421: 	      <button
   422: 		 class="ccc_button ui-state-default ui-corner-all ccc_button_about" 
   423: 		 id="ccc_button_about" type="button" tabindex="6">
   424: 		about
   425: 	      </button>
   426: 	      <br/>
   427: 	      <br/>
   428: 	      <button
   429: 		 class="ccc_button ui-state-default ui-corner-all ccc_button_help" 
   430: 		 id="ccc_button_help" type="button" tabindex="7">
   431: 		help
   432: 	      </button>
   433: 	      <br/>
   434: 	      <br/>
   435: 	    </div>
   436: 	    <!-- end ccc_dyn_pg_right_login div -->
   437: 
   438: 	    <div class="ccc_dyn_pg_right ccc_dyn_pg_about"
   439: 		 id="ccc_dyn_pg_right_about">
   440: 	      <br/>
   441: 	      No account?&nbsp;<br/>
   442: 	      It's free to&nbsp;
   443: 	      <br/>
   444: 	      <button
   445: 		 class="ccc_button ui-state-default ui-corner-all ccc_button_signup" 
   446: 		 id="ccc_button_signup" type="button" tabindex="4">
   447: 		sign-up
   448: 	      </button>
   449: 	      <br/>
   450: 	      <br/>
   451: 	      <button
   452: 		 class="ccc_button ui-state-default ui-corner-all ccc_button_gotologin" 
   453: 		 id="ccc_button_gotologin" type="button" tabindex="5">
   454: 		log in
   455: 	      </button>
   456: 	      <br/>
   457: 	      <br/>
   458: 	      <button
   459: 		 class="ccc_button ui-state-default ui-corner-all ccc_button_help" 
   460: 		 id="ccc_button_help" type="button" tabindex="5">
   461: 		help
   462: 	      </button>
   463: 	    </div>
   464: 	    <!-- end ccc_dyn_pg_right_about div -->
   465: 
   466: 	    <div class="ccc_dyn_pg_right ccc_dyn_pg_signup"
   467: 		 id="ccc_dyn_pg_right_signup">
   468: 	      <br/>
   469: 	      <button
   470: 		 class="ccc_button ui-state-default ui-corner-all ccc_button_about" 
   471: 		 id="ccc_button_about" type="button" tabindex="7">
   472: 		&nbsp;about&nbsp;
   473: 	      </button>
   474: 	      <br/>
   475: 	      <br/>
   476: 	      <button
   477: 		 class="ccc_button ui-state-default ui-corner-all ccc_button_gotologin" 
   478: 		 id="ccc_button_gotologin" type="button" tabindex="8">
   479: 		log in
   480: 	      </button>
   481: 	      <br/>
   482: 	      <br/>
   483: 	      <button
   484: 		 class="ccc_button ui-state-default ui-corner-all ccc_button_help" 
   485: 		 id="ccc_button_help" type="button" tabindex="9">
   486: 		help
   487: 	      </button>
   488: 	      <br/>
   489: 	      <br/>
   490: 	    </div>
   491: 	    <!-- end ccc_dyn_pg_right_signup div -->
   492: 
   493: 	    <div class="ccc_dyn_pg_right ccc_dyn_pg_loggedin"
   494: 		 id="ccc_dyn_pg_right_loggedin">
   495: 	      <br/>
   496: 	      <button
   497: 		 class="ccc_button ui-state-default ui-corner-all ccc_button_logout"
   498: 		 id="ccc_button_logout" type="button" tabindex="4">
   499: 		log out
   500: 	      </button>
   501: 	      <br/>
   502: 	      <br/>
   503: 	      <button
   504: 		 class="ccc_button ui-state-default ui-corner-all ccc_button_help" 
   505: 		 id="ccc_button_help" type="button" tabindex="5">
   506: 		help
   507: 	      </button>
   508: 	      <br/>
   509: 	      <br/>
   510: 	    </div>
   511: 	    <!-- end ccc_dyn_pg_right_loggedin div -->
   512: 
   513: 	  </td>
   514: 	</tr>
   515:       </table>
   516: 
   517: 
   518:       <!-- The graceful javascript-disabled degradation section -->
   519:       <noscript>
   520: 	<span style="font-size: 133%; color: #dddddd;">
   521: 	  The CloudSession Control Center requires that javascript be enabled in your browser in order to run.  If you wish to use CCC, please enable javascript, and then reload this page.  For more information about <a href="http://cloudsession.com">CloudSession.com</a> or <a href="http://cloudsession.com/dawg/">Sonic Dawg Corp</a>, please follow the hyperlinx...
   522: 	</span>
   523:       </noscript>
   524: 
   525: 
   526:       <div class="ccc_dyn_pg_bottom ccc_dyn_pg_login"
   527: 	   id="ccc_dyn_pg_bottom_login">
   528: 	<br/>
   529: 	<br/>
   530: 	<div id="ccc_login_status">
   531: 	</div>
   532: 
   533: 
   534:       </div>
   535:       <!-- end ccc_dyn_pg_bottom_login div -->
   536: 
   537:       <div class="ccc_dyn_pg_bottom ccc_dyn_pg_about"
   538: 	   id="ccc_dyn_pg_bottom_about">
   539:       </div>
   540:       <!-- end ccc_dyn_pg_bottom_about div -->
   541: 
   542:       <div class="ccc_dyn_pg_bottom ccc_dyn_pg_signup ui-corner-all"
   543: 	   id="ccc_dyn_pg_bottom_signup">
   544: 
   545: 	      <span style="font-size: 125%; font-weight: bold;">
   546: 		Enter desired credentials ...<br/>
   547: 		<br/>
   548: 	      </span>
   549: 
   550: 	      <!-- same note for this table as above -->
   551: 	      <table width="100%"
   552: 		     cellpadding="4"
   553: 		     cellspacing="4">
   554: 		
   555: 		<colgroup span="3">
   556: 		  <col width="1%" />
   557: 		  <col width="1%" />
   558: 		  <col width="" />
   559: 		</colgroup>
   560: 		
   561: 		<tbody class="ccc_credentials_table">
   562: 		  <tr>
   563: 		    
   564: 		    <td>
   565: 		      <div id="req_username_label">
   566: 			<label for="req_username">Username: </label>
   567: 		      </div>
   568: 		    </td>
   569: 		    
   570: 		    <td>
   571: 		      <input
   572: 			 type="text" name="req_username" id="req_username"
   573: 			 size="16" maxlength="42" tabindex="2"
   574: 			 class="text ui-widget-content ui-corner-all">
   575: 		    </td>
   576: 		    
   577: 		    <td>
   578: 		    </td>
   579: 
   580: 		  </tr>
   581: 		  
   582: 		  <tr>
   583: 		    <td colspan="2">
   584: 		      <div id="req_username_advice_text">
   585: 			* Usernames must be alpha-numeric from 3 to 42 characters long.
   586: 		      </div>
   587: 		    </td>
   588: 		    <td>
   589: 		    </td>
   590: 		  </tr>
   591: 
   592: 		  <tr>
   593: 		    
   594: 		    <td>
   595: 		      <div id="req_password_label">
   596: 			<label for="req_password">Password: </label>
   597: 		      </div>
   598: 		    </td>
   599: 		    
   600: 		    <td>
   601: 		      <input
   602: 			 type="password" name="req_password" id="req_password"
   603: 			 size="16" maxlength="42" tabindex="3"
   604: 			 class="text ui-widget-content ui-corner-all">
   605: 		    </td>
   606: 		    
   607: 		    <td>
   608: 		    </td>
   609: 
   610: 		  </tr>
   611: 
   612: 		  <tr>
   613: 		    
   614: 		    <td>
   615: 		      <div id="req_password_vfy_label">
   616: 			<label for="req_password_vfy">Verify PW: </label>
   617: 		      </div>
   618: 		    </td>
   619: 		    
   620: 		    <td>
   621: 		      <input
   622: 			 type="password" name="req_password_vfy" id="req_password_vfy"
   623: 			 size="16" maxlength="42" tabindex="3"
   624: 			 class="text ui-widget-content ui-corner-all">
   625: 		    </td>
   626: 		    
   627: 		    <td>
   628: 		    </td>
   629: 
   630: 		  </tr>
   631: 		  
   632: 		  <tr>
   633: 		    <td colspan="2">
   634: 		      <div id="req_password_length_text">
   635: 			* Passwords must be alpha-numeric, from 3 to 42 characters long.
   636: 		      </div>
   637: 		      <div id="req_password_match_text">
   638: 		      </div>
   639: 		    </td>
   640: 		    <td>
   641: 		    </td>
   642: 		  </tr>
   643: 
   644: 		  <tr>
   645: 		    
   646: 		    <td>
   647: 		      <div id="req_email_label">
   648: 			<label for="req_password">Email: </label>
   649: 		      </div>
   650: 		    </td>
   651: 		    
   652: 		    <td>
   653: 		      <input
   654: 			 type="text" name="req_email" id="req_email"
   655: 			 size="16" maxlength="77" tabindex="4"
   656: 			 class="text ui-widget-content ui-corner-all">
   657: 		    </td>
   658: 		    
   659: 		    <td>
   660: 		    </td>
   661: 
   662: 		  </tr>
   663: 		  
   664: 		  <tr>
   665: 		    <td colspan="2">
   666: 		      <div id="req_email_text">
   667: 			* Optionally provide an email address for account activation confirmation.
   668: 		      </div>
   669: 		    </td>
   670: 		    <td>
   671: 		    </td>
   672: 		  </tr>
   673: 
   674: 		</tbody>
   675: 	      </table>
   676: 	      <!-- end of table to hold requested credentials fields -->
   677: 	      
   678: 	      <br/>
   679: 	      <br/>
   680: 
   681: 	      <span style="font-size: 125%; font-weight: bold;">
   682: 		... and prove that you are not a zombie or bot ...
   683: 		<br/>
   684: 	      </span>
   685: 
   686: 	      <p align="justify">
   687: 		<span style="text-align: justify;">
   688: 		  To do so, you must write in the area below at least a forty-two word paragraph or essay, that you would consider good advice for the youth that may read some archived version of it a hundred years after you die.  Zombies and Bots should be fairly detectable based on their responses.
   689: 		</span>
   690: 	      </p>
   691: 
   692: 	      <p style="text-align: center;">
   693: 	      <textarea rows="12" cols="40"
   694: 			name="req_sapcha"
   695: 			id="req_sapcha"
   696: 			tabindex="5"
   697: 			class="ui-corner-all" >
   698: 	      </textarea>
   699: 
   700: 	      <br/>
   701: 	      </p>
   702: 
   703: 	      <p id="req_sapcha_advice_text"
   704: 		 style="text-align: center;">
   705: 	      </p>
   706: 		
   707: 	      <p style="text-align: center;">
   708: 	      <br/>
   709: 
   710: 	      <button
   711: 		 class="ccc_button ui-state-default ui-corner-all ccc_button_signup_req_send" 
   712: 		 id="ccc_button_signup_req_send" type="button" tabindex="6">
   713: 		send request to the cloud
   714: 	      </button>
   715: 
   716: 	      &nbsp;&nbsp;&nbsp;
   717: 
   718: 	      <button
   719: 		 class="ccc_button ui-state-default ui-corner-all ccc_button_signup_req_clear" 
   720: 		 id="ccc_button_signup_req_clear" type="button" tabindex="7">
   721: 		clear
   722: 	      </button>
   723: 
   724: 	      </p>
   725: 
   726:       </div>
   727:       <!-- end ccc_dyn_pg_bottom_signup div -->
   728: 
   729:       <div class="ccc_dyn_pg_bottom ccc_dyn_pg_loggedin"
   730: 	   id="ccc_dyn_pg_bottom_loggedin">
   731:       </div>
   732:       <!-- end ccc_dyn_pg_bottom_loggedin div -->
   733: 
   734:       <div id="ccc_login_filler_area"
   735: 	   style="font-size: 150%; font-weight: bold; text-align: center; color: #eeeeee">
   736: 	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
   737: 	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
   738: 	An excellent sunset.  Be seeing you...
   739: 	<br/>
   740:       </div>
   741:       
   742:       <div id="ccc_bottom_buttons"
   743: 	   style="text-align: center;">
   744: 	<br/>
   745: 	<button
   746: 	   class="ccc_button ui-state-default ui-corner-all" 
   747: 	   id="ccc_button_toggle_bg" type="button" tabindex="0">
   748: 	  toggle background image
   749: 	</button>
   750: 	<br/>
   751: 	<br/>
   752: 	<br/>
   753:       </div>
   754: 
   755:     </div>
   756:     <!-- end ccc_total_area div -->
   757: 
   758:     <!-- ehh, going with nothing outside the main div
   759: 	 <hr/>
   760: 	 -->
   761: 
   762:   </body>
   763: 
   764: </html>
   765: 
   766: