Source of ampchat.sql

-- 
-- Database: `ampchat`
-- 
CREATE DATABASE `ampchat` DEFAULT CHARACTER SET latin1 COLLATE latin1_general_ci;
USE `ampchat`;

-- --------------------------------------------------------

--
-- Table structure for table `msgs`
--

CREATE TABLE IF NOT EXISTS `msgs` (
  `id` int(11) NOT NULL auto_increment,
  `usrid` int(11) NOT NULL,
  `msg` text character set utf8 collate utf8_unicode_ci NOT NULL,
  `datetime` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

-- --------------------------------------------------------

--
-- Table structure for table `usrs`
--

CREATE TABLE IF NOT EXISTS `usrs` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(70) character set utf8 collate utf8_unicode_ci NOT NULL,
  `md5pw` varchar(70) character set utf8 collate utf8_unicode_ci NOT NULL,
  `ip` varchar(35) character set utf8 collate utf8_unicode_ci NOT NULL,
  `lastact` datetime NOT NULL,
  `email` varchar(70) character set utf8 collate utf8_unicode_ci NOT NULL,
  PRIMARY KEY  (`id`),
  UNIQUE KEY `name` (`name`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `usrs`
-- 202cb962ac59075b964b07152d234b70 is the md5 sum of 123123
--

INSERT INTO `usrs` (`id`, `name`, `md5pw`, `ip`, `lastact`, `email`) VALUES
(1, 'admin', '202cb962ac59075b964b07152d234b70', '', '', 'foo@bar.com'),
(2, 'guest', '202cb962ac59075b964b07152d234b70', '', '', 'foo@bar.com');

Source of config.php

<?php

// --
// AMPChat - written by Looke, 2009
// config.php
// --

// db configuration
define("db_host""localhost");
define("db_database""ampchat");
define("db_user""root");
define("db_password""foo");

// Signup unlock code
define("signup_unlock""foo");

?>

Source of ampchat.php

<?php

// --
// AMPChat - written by Looke, 2009
// ampchat.php
// --

error_reporting(E_ALL);

class 
AMPChat {

    
// --
    // Chat related functions
    // --

    // db connection
    
function AMPChat() {
        
mysql_connect(db_hostdb_userdb_password) or die("Connection Error! (".db_user."@".db_host.")");
        
mysql_select_db(db_database) or die("Select Error!");
        
mysql_query("SET NAMES 'utf8'");
        
mysql_query("SET CHARACTER SET 'utf8'");
    }

    
// creates the xml with the chat entries
    // parameters:
    // lastid: which is the last recieved msgid
    // limit: how many items shall I get from the db
    
function getMsgXML($lastid$limit) {
        
$lastid mysql_real_escape_string($lastid);
        
header("Content-type: text/xml; charset=utf-8");
        
header("Cache-Control: no-store, no-cache, must-revalidate");
        echo 
"<?xml version=\"1.0\" encoding=\"utf-8\"?>";
        echo 
"<msgs>";
        if (
$lastid == "0" && $limit != "0"$res_msgs mysql_query("SELECT * FROM msgs WHERE 1 ORDER BY id DESC LIMIT ".$limit);
        elseif (
$lastid == "0" && $limit == "0"$res_msgs mysql_query("SELECT * FROM msgs WHERE 1 ORDER BY id DESC");
        else 
$res_msgs mysql_query("SELECT * FROM msgs WHERE id > '".$lastid."' ORDER BY id DESC");
        while (
$row_msgs = @mysql_fetch_assoc($res_msgs)) {
            
// double use of htmlspecialchars() avoids html injection
            
echo "<msg ";
            echo 
"id=\"".$row_msgs['id']."\" ";
            echo 
"txt=\"".stripslashes(htmlspecialchars(htmlspecialchars($row_msgs['msg'])))."\" ";
            
$res_usr mysql_query("SELECT name FROM usrs WHERE id='".$row_msgs["usrid"]."'");
            while (
$row_usr = @mysql_fetch_assoc($res_usr)) {
                echo 
"usr=\"".stripslashes(htmlspecialchars(htmlspecialchars($row_usr['name'])))."\" ";
            }
            echo 
"date=\"".date("d. M, H:i"strtotime($row_msgs['datetime']))."\" ";
            echo 
"/>";
        }
        echo 
"</msgs>";
    }

    
// writes the chatmessages to the db
    
function submitMsg($msg$usrid) {
        
$msg mysql_real_escape_string($msg);
        
mysql_query("INSERT INTO msgs (msg, usrid) VALUES ('".$msg."', '".$usrid."')");
    }

    
// clears the db's contents
    
function clearMsgs() {
        
mysql_query("DELETE FROM msgs WHERE 1");
        
mysql_query("ALTER TABLE msgs AUTO_INCREMENT=1");
    }

    
// creates the xml with the online users
    
function getOnlineUsrXML() {
        
header("Content-type: text/xml; charset=utf-8");
        
header("Cache-Control: no-store, no-cache, must-revalidate");
        echo 
"<?xml version=\"1.0\" encoding=\"utf-8\"?>";
        echo 
"<usrs>";
        
$res mysql_query("SELECT * FROM usrs WHERE 1");
        while (
$row = @mysql_fetch_assoc($res)) {
            
// double use of htmlspecialchars() avoids html injection
            
if (strtotime($row["lastact"]) > time() - 5*60) echo "<usr name=\"".stripslashes(htmlspecialchars(htmlspecialchars($row['name'])))."\" lastact=\"".date("H:i"strtotime($row['lastact']))."\" />";
        }
        echo 
"</usrs>";
    }

    
// --
    // Site related functions
    // --

    // match password with provided username
    
function checkUsrPwMatch($usrname$pw) {
        
$usrname mysql_real_escape_string($usrname);
        
$res mysql_query("SELECT md5pw FROM usrs WHERE name='".$usrname."'");
        while (
$row = @mysql_fetch_assoc($res)) {
            if (
$row['md5pw'] == md5($pw)) return true;
            else return 
false;
        }
    }

    
// match password with provided username
    
function getUsrId($usrname) {
        
$usrname mysql_real_escape_string($usrname);
        
$res mysql_query("SELECT id FROM usrs WHERE name='".$usrname."'");
        while (
$row = @mysql_fetch_assoc($res)) {
            return 
$row["id"];
        }
    }

    
// match password with provided username
    
function getUsrEmail($usrid) {
        
$res mysql_query("SELECT email FROM usrs WHERE id='".$usrid."'");
        while (
$row = @mysql_fetch_assoc($res)) {
            return 
htmlspecialchars($row["email"]);
        }
    }

    
// update last user activity time
    
function updateUsrLastAct($usrid) {
        
mysql_query("UPDATE usrs SET lastact = '".date("Y-m-d H:i:s")."' WHERE id = '".$usrid."'");
    }

    
// update user ip address
    
function updateUsrIp($usrid) {
        
mysql_query("UPDATE usrs SET ip = '".$_SERVER["REMOTE_ADDR"]."' WHERE id = '".$usrid."'");
    }

    
// check if a username is already in the db
    
function checkUsrNameAvail($usrname) {
        
$usrname mysql_real_escape_string($usrname);
        
$res mysql_query("SELECT * FROM usrs WHERE name='".$usrname."'");
        if (
mysql_num_rows($res) > 0) return false;
        else return 
true;
    }

    
// create a useraccount
    
function createUsr($usrname$pw$email) {
        
$usrname mysql_real_escape_string($usrname);
        
$email mysql_real_escape_string($email);
        
$mailheader "From: AMPChat <ampchat@looke.ch>"."\r\n"."Reply-To: ampchat@looke.ch"."\r\n"."X-Mailer: PHP/".phpversion();
        
$mailbody "Hello ".$usrname."\r\n"."Your AMPChat account has been created"."\r\n"."Your username is: ".$usrname."\r\n"."Your password is: ".$pw."\r\n"."Cheers, Looke";
        if (
mysql_query("INSERT INTO usrs (name, md5pw, email) VALUES ('".$usrname."', '".md5($pw)."', '".$email."')")) {
            
mail($email"AMPChat account created"$mailbody$mailheader);
        }
    }

    
// update user password
    
function updateUsrPw($usrid$pw) {
        
mysql_query("UPDATE usrs SET md5pw = '".md5($pw)."' WHERE id = '".$usrid."'");
    }

    
// update user email
    
function updateUsrEmail($usrid$email) {
        
$email mysql_real_escape_string($email);
        
mysql_query("UPDATE usrs SET email = '".$email."' WHERE id = '".$usrid."'");
    }
}

?>

Source of ampchat.js

//<![CDATA[

    // initialize chat on page (re)load
    function startChat() {
        getMsgs();
        getOnlineUsrs();
        // poll for new messages
        setInterval(getMsgs, 2000);
        // refresh online user list
        setInterval(getOnlineUsrs, 10000);
    }

    // create an array for our chat items ids
    chatitems = new Array();

    // helping function to see if a value is present in a given array
    Array.prototype.containsValue = function(value) {
        var i;
        for (var i = 0, count = this.length; i < count; i++) {
            if (this[i] == value) {
                return true;
            }
        }
        return false;
    };

    // creates XMLHttp Request for Ajax action
    if (window.XMLHttpRequest) {
        // XMLHttp Request for browsers
        xmlHttpReqObj = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        // XMLHttp Request for pro-surftools (you know the deal...)
        xmlHttpReqObj = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // here, we GET our xml file
    function getXML(xmlLoc) {        
        if (window.XMLHttpRequest) {
            // xml handling
            xmlDoc = new XMLHttpRequest();
            xmlDoc.open("GET", xmlLoc , false);            
            xmlDoc.send("");
            return xmlDoc.responseXML;
        } else if (ActiveXObject("Microsoft.XMLDOM")) {
            // IE fashioned xml loading
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;
            // iefix is a stupid workaround to avoid ie from caching the xml file...
            xmlDoc.load(xmlLoc + "iefix=" + (new Date()).getTime());
            return xmlDoc;
        }
    }

    // write the chat contents from the recieved xml to the chatdiv
    function getOnlineUsrs() {        
        xmlUsrs = getXML("index.php?action=getOnlineUsrXML");
        document.getElementById("usrdiv").innerHTML = "";
        // see, if there are users around
        if (xmlUsrs.getElementsByTagName("usrs")[0].hasChildNodes()) {
            // iterate through all xml items            
            for (var i = 0; i <= xmlUsrs.getElementsByTagName("usrs")[0].childNodes.length - 1; i++) {            
                document.getElementById("usrdiv").innerHTML +=
                "<p>" + xmlUsrs.getElementsByTagName("usr")[i].attributes.getNamedItem("name").value + " - <i>Last activity: "
                + xmlUsrs.getElementsByTagName("usr")[i].attributes.getNamedItem("lastact").value + "</i></p>";                                
                // make sure, the div scrollbar is always at bottom position
                document.getElementById("usrdiv").scrollTop = document.getElementById("usrdiv").scrollHeight;                
            }
        }
    }

    // write the chat contents from the recieved xml to the chatdiv (new: only chatmsgs which are new get transferred)
    function getMsgs() {
        // get the id of the last chatmsg stored in the chatitems array
        var lastid;
        if (chatitems[chatitems.length - 1]) {
            lastid = chatitems[chatitems.length - 1];
        } else {
            lastid = 0;
        }

        xmlMsgs = getXML("index.php?action=getMsgXML&lastid=" + lastid);        
        // see, if there are chat messages around
        if (xmlMsgs.getElementsByTagName("msgs")[0].hasChildNodes()) {
            // iterate through all xml items
            for (var i = xmlMsgs.getElementsByTagName("msgs")[0].childNodes.length - 1; i >= 0; i--) {                
                chatitems.push(xmlMsgs.getElementsByTagName("msg")[i].attributes.getNamedItem("id").value);
                document.getElementById("msgdiv").innerHTML +=
                "<p><i>" + xmlMsgs.getElementsByTagName("msg")[i].attributes.getNamedItem("date").value    + "</i> - " 
                + xmlMsgs.getElementsByTagName("msg")[i].attributes.getNamedItem("usr").value + ": " 
                + xmlMsgs.getElementsByTagName("msg")[i].attributes.getNamedItem("txt").value + "</p>";
                // make sure, the div scrollbar is always at bottom position
                document.getElementById("msgdiv").scrollTop = document.getElementById("msgdiv").scrollHeight;                
            }
        }
    }

    // checks, if return/enter gets pressed while focus is on form input
    function submitMsgOnEnter(keyEvent){
        if ((keyEvent.keyCode && keyEvent.keyCode == 13) || (keyEvent.which && keyEvent.which == 13)) {
            submitMsg();
        }
    }

    // submits entered text to the ampchat backend
    function submitMsg() {
        if (xmlHttpReqObj) {
            if (xmlHttpReqObj.readyState == 4 || xmlHttpReqObj.readyState == 0) {
                // send the message to the script
                xmlHttpReqObj.open("GET", "index.php?action=submitMsg&msg=" + document.getElementById("msg").value, true);
                xmlHttpReqObj.send(null);
                // empty input field
                document.getElementById("msg").value = "";                
            }
        }
    }

//]]>

Source of index.php

<?php

// --
// AMPChat - written by Looke, 2009
// index.php
// --

error_reporting(E_ALL);

include(
"config.php");
include(
"ampchat.php");

session_start();

if (!isset(
$_SESSION["auth"])) header("Location: login.php");

// create AMPChat object
$obj = new AMPChat();

// GET parameter handlers
if (@$_GET["action"] == "logout") {
    
session_destroy();
    
header("location: ".$_SERVER["PHP_SELF"]);
}
if (@
$_GET["action"] == "getMsgXML") {
    if (isset(
$_GET["lastid"])) $obj->getMsgXML($_GET["lastid"], 20);
    die();
}
if (@
$_GET["action"] == "getChatLog") {
    
$obj->getMsgXML(00);
    die();
}
if (@
$_GET["action"] == "submitMsg") {
    if (isset(
$_GET["msg"]) && !empty($_GET["msg"])) {
        
$obj->submitMsg($_GET["msg"], $_SESSION["usrid"]);
        
$obj->updateUsrLastAct($_SESSION["usrid"]);
    }
    die();
}
if (@
$_GET["action"] == "clearMsgs") {
    
// only allow clearing the msg table to user with id 1 (main geek)
    
if ($_SESSION["usrid"] == "1"$obj->clearMsgs();
    
header("location: ".$_SERVER["PHP_SELF"]);
}
if (@
$_GET["action"] == "getOnlineUsrXML") {
    
$obj->getOnlineUsrXML();
    die();
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>AMPChat</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="ampchat.css" type="text/css">
<script language="JavaScript" src="ampchat.js" type="text/javascript"></script>
</head>
<body onload="startChat()">

<div id="topdiv">
    <h1>AMPChat</h1>
</div>

<div id="menuediv">
    <p>Logged in as: <i><?php echo stripslashes($_SESSION["usrname"]); ?></i>&nbsp; - &nbsp;
    <a href="profile.php">Edit profile</a>&nbsp; - &nbsp;
    <a href="index.php?action=getChatLog" target="_blank">Show chatlog</a>&nbsp; - &nbsp;
    <?php if ($_SESSION["usrid"] == "1") echo "<a href=\"index.php?action=clearMsgs\">Clear messages</a>&nbsp; - &nbsp;"?>
    <a href="index.php?action=logout">Log out</a></p>
</div>

<div id="maindiv">
    <div id="chatdiv">
        <div id="msgdiv"></div>
        <p><input id="msg" onkeypress="submitMsgOnEnter(event)" type="text"><input id="submitmsg" type="button" onclick="submitMsg()" value="submit"></p>
    </div>
    <div id="infodiv">
        <h2>Currently online:</h2>
        <div id="usrdiv"></div>
    </div>
</div>

<div id="bottomdiv">
    <p>2009, Looke</p>
    <p><a href="source.php" target="_blank">Show sourcecodes</a></p>
</div>

</body>
</html>

Source of login.php

<?php

// --
// AMPChat - written by Looke, 2009
// login.php
// --

error_reporting(E_ALL);

include(
"config.php");
include(
"ampchat.php");

session_start();

if (@
$_SESSION["auth"] == trueheader("Location: index.php");

// create AMPChat object
$obj = new AMPChat();

if (isset(
$_POST["usrname"]) && isset($_POST["pw"])) {
    if (
$obj->checkUsrPwMatch($_POST["usrname"], $_POST["pw"]) == true) {
        
// auth succeeded (has to stand before any output sent, because we set a new header here)
        
$_SESSION["auth"] = true;
        
$_SESSION["usrid"] = $obj->getUsrId($_POST["usrname"]);
        
$_SESSION["usrname"] = htmlentities($_POST["usrname"]);
        
$obj->updateUsrIp($_SESSION["usrid"]);
        
$obj->updateUsrLastAct($_SESSION["usrid"]);
        
session_write_close();
        
header("Location: index.php");
    }
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>AMPChat - Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="ampchat.css" type="text/css">
</head>
<body>

<div id="topdiv">
    <h1>AMPChat - Login</h1>
</div>

<div id="menuediv">
    <p><a href="signup.php">Create an account</a></p>
</div>

<div id="maindiv">
    <?php

    
if (isset($_POST["usrname"]) && isset($_POST["pw"])) {
        if (
$obj->checkUsrPwMatch($_POST["usrname"], $_POST["pw"]) == false) {
            
// auth failed
            
echo "<p class=\"error\">Login failed!</p><p><a href=\"javascript:history.back()\">Back</a></p>";
        }
    } else { 
?>

    <form enctype="multipart/form-data" method="POST" action="login.php">
        <fieldset>
            <legend>Please enter your username and password to enter the chat</legend>
            <ol>
                <li>
                    <label for="usrname">Username:</label>
                    <input type="text" id="usrname" name="usrname">
                </li>
                <li>
                    <label for="pw">Password:</label>
                    <input type="password" id="pw" name="pw">
                </li>
            </ol>
            <input type="submit" value="login">
        </fieldset>
    </form>

    <?php ?>
</div>

<div id="bottomdiv">
    <p>2009, Looke</p>
    <p><a href="source.php" target="_blank">Show sourcecodes</a></p>
</div>

</body>
</html>

Source of profile.php

<?php

// --
// AMPChat - written by Looke, 2009
// profile.php
// --

error_reporting(E_ALL);

include(
"config.php");
include(
"ampchat.php");

session_start();

if (!isset(
$_SESSION["auth"])) header("Location: login.php");

// create AMPChat object
$obj = new AMPChat();

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>AMPChat - Edit profile</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="ampchat.css" type="text/css">
</head>
<body>

<div id="topdiv">
    <h1>AMPChat - Edit profile</h1>
</div>

<div id="menuediv">
    <p>Logged in as: <i><?php echo stripslashes($_SESSION["usrname"]); ?></i>&nbsp; - &nbsp;
    <a href="index.php">Chat</a>&nbsp; - &nbsp;
    <a href="index.php?action=logout">Log out</a></p>
</div>

<div id="maindiv">
    <?php

    
if (isset($_POST["newpw"]) && !empty($_POST["newpw"]) &&
        isset(
$_POST["renewpw"]) && !empty($_POST["renewpw"])) {
        if (
$_POST["newpw"] != $_POST["renewpw"]) {
            echo 
"<p class=\"error\">The entered passwords do not match each other!</p><p><a href=\"javascript:history.back()\">Back</a></p>";
        } else {
            
$obj->updateUsrPw($_SESSION["usrid"], $_POST["newpw"]);
            echo 
"<p class=\"notice\">Your password has been updated.</p><p><a href=\"javascript:history.back()\">Back</a></p>";
        }
    }
    elseif (isset(
$_POST["email"]) && !empty($_POST["email"])) {
        
$obj->updateUsrEmail($_SESSION["usrid"], $_POST["email"]);
        echo 
"<p class=\"notice\">Your e-mail address has been updated.</p><p><a href=\"javascript:history.back()\">Back</a></p>";
    } else { 
?>

        <form enctype="multipart/form-data" method="POST" action="profile.php">
            <fieldset>
                <legend>Use the following form to update your password</legend>
                <ol>
                    <li>
                        <label for="newpw">New Password:</label>
                        <input type="password" id="newpw" name="newpw">
                    </li>
                    <li>
                        <label for="renewpw">Re enter new password:</label>
                        <input type="password" id="renewpw" name="renewpw">
                    </li>
                </ol>
                <input type="submit" value="change password">
            </fieldset>
        </form>

        <form enctype="multipart/form-data" method="POST" action="profile.php">
            <fieldset>
                <legend>Use the following form to update your e-mail address</legend>
                <ol>
                    <li>
                        <label for="pw">New e-mail address:</label>
                        <input type="text" id="email" name="email" value="<?php echo stripslashes($obj->getUsrEmail($_SESSION["usrid"])); ?>">
                    </li>
                </ol>
                <input type="submit" value="change e-mail address">
            </fieldset>
        </form>

    <?php ?>
</div>

<div id="bottomdiv">
    <p>2009, Looke</p>
    <p><a href="source.php" target="_blank">Show sourcecodes</a></p>
</div>

</body>
</html>

Source of signup.php

<?php

// --
// AMPChat - written by Looke, 2009
// signup.php
// --

error_reporting(E_ALL);

include(
"config.php");
include(
"ampchat.php");

session_start();

if (@
$_SESSION["auth"] == trueheader("Location: index.php");

// create AMPChat object
$obj = new AMPChat();

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>AMPChat - Create an account</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="ampchat.css" type="text/css">
</head>
<body>

<div id="topdiv">
    <h1>AMPChat - Create an account</h1>
</div>

<div id="menuediv">
    <p><a href="login.php">Login</a></p>
</div>

<div id="maindiv">
    <?php

    
if (isset($_POST["usrname"]) && !empty($_POST["usrname"]) &&
        isset(
$_POST["pw"]) && !empty($_POST["pw"]) &&
        isset(
$_POST["repw"]) && !empty($_POST["repw"]) &&
        isset(
$_POST["email"]) && !empty($_POST["email"]) &&
        isset(
$_POST["unlock"]) && !empty($_POST["unlock"])) {
            if (
$_POST["unlock"] != signup_unlock) {
                echo 
"<p class=\"error\">The entered unlock code is wrong!</p><p><a href=\"javascript:history.back()\">Back</a></p>";
            } elseif (
$obj->checkUsrNameAvail($_POST["usrname"]) == false) {
                echo 
"<p class=\"error\">The entered username is already taken!</p><p><a href=\"javascript:history.back()\">Back</a></p>";
            } elseif (
$_POST["pw"] != $_POST["repw"]) {
                echo 
"<p class=\"error\">The entered passwords do not match each other!</p><p><a href=\"javascript:history.back()\">Back</a></p>";
            } else {
                
$obj->createUsr($_POST["usrname"], $_POST["pw"], $_POST["email"]);
                echo 
"<p class=\"notice\">Your account has been created! You will get a confirmation Mail in a few minutes.</p>";
            }

    } else { 
?>

        <form enctype="multipart/form-data" method="POST" action="signup.php">
            <fieldset>
                <legend>To create an account, please fill out the following form</legend>
                <ol>
                    <li>
                        <label for="usrname">Desired username:</label>
                        <input type="text" id="usrname" name="usrname">
                    </li>
                    <li>
                        <label for="pw">Password:</label>
                        <input type="password" id="pw" name="pw">
                    </li>
                    <li>
                        <label for="repw">Re enter password:</label>
                        <input type="password" id="repw" name="repw">
                    </li>
                    <li>
                        <label for="email">E-mail address:</label>
                        <input type="text" id="email" name="email">
                    </li>
                    <li>
                        <label for="unlock">Unlock code:</label>
                        <input type="password" id="unlock" name="unlock">
                    </li>
                </ol>
                <input type="submit" value="submit">
            </fieldset>
        </form>

    <?php ?>
</div>

<div id="bottomdiv">
    <p>2009, Looke</p>
    <p><a href="source.php" target="_blank">Show sourcecodes</a></p>
</div>

</body>
</html>

Source of ampchat.css

body { 
    font-family: Verdana, sans-serif;
    font-size: 12px;
    background-color: #E6F1F2;
}

p {
    line-height: 1em;
    margin-top: 3px;
    margin-bottom: 3px;
}

p.error {
    color: #FF0000;
    margin-top: 20px;
    margin-bottom: 20px;
}

p.notice {
    margin-top: 20px;
    margin-bottom: 20px;
}

h1 {
    font-size: 16px;
    font-weight: bold;
}

h2 {
    font-size: 14px;
    font-weight: bold;
    padding-top: 0px;
    padding-bottom: 10px;
    margin: 0px;
}

a {
    color: #666666; 
    text-decoration: none; 
    font-weight: bold;
}

a:hover {
    color: #0000FF;
}

input {
    font-family: Verdana, sans-serif;
}

input:text {
    width: 150px;
}

div#topdiv {
}

div#menuediv {
    border-top: solid #999999;
    border-bottom: solid #999999;
    border-width: 1px;
}

div#maindiv {    
    width: 930px;
}

div#infodiv {
    float: right;    
    width: 450px;
    margin-top: 15px;
    margin-bottom: 15px;
}

div#usrdiv {
    overflow: auto;    
    height: 100%;
    width: 448px;    
}

div#chatdiv {
    float: left;
    width: 450px;
    margin-top: 15px;
    margin-bottom: 15px;    
}

div#msgdiv {    
    overflow: auto;
    vertical-align: bottom;
    /* background-color: #FFFFFF; */
    border: solid #999999;
    border-width: 1px;
    width: 448px;
    height: 175px;    
}

div#bottomdiv {    
    clear: both;
    font-size: 9px;
    border-top: solid #999999;
    border-width: 1px;
}

input#msg {
    float: left;
    width: 380px;    
    border: solid #999999;
    border-width: 1px;
}

input#submitmsg {
    float: right;
    width: 64px;
    background-color: #E6F1F2;
    border: solid #999999;
    border-width: 1px;
}

fieldset {
    margin-top: 15px;
    margin-bottom: 15px;
    border: none;
    padding: 0px;
}

fieldset legend {
    margin-left: -7px;
    margin-bottom: 10px;
    padding: 0px;
    font-weight: bold;
}

fieldset label {
    width: 160px;
    display: inline-block;    
}

fieldset ol {
    margin: 0px;
    margin-bottom: 10px;
    padding: 0px;
}

fieldset li {
    list-style: none;    
    margin: 0px;
}