The page ([url="http://wowfreedom-rp.com/freedomWoW/"><s></s>http://wowfreedom-rp.com/freedomWoW/) I made is rather simple but does its job of registering accounts. Now that server is open for public I will probably be still busy with bug-fixing. If there is someone experienced with web developing, that is HTML, CSS, JS (+AJAX and jQuery) and PHP (optional) and can make a good-looking web-page, we would be greatly thankful if you can make a better webpage than the current one. For security purposes, if you will do PHP side too, I expect proper string escaping or if dealing with SQL - proper prepared statements.
Current web-page source (excluding PHP for security reasons)
HTML
<blockquote class='code_blockquote'><dl><dt>Code: </dt><dd> </dd></dl><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/js/tabcontentswitch.js"></script>
<script src="assets/js/form.js"></script>
<title>Freedom WoW - Homepage</title>
</head>
<body>
<div id="main">
<div id="top">
<img src="assets/img/wowfreedom.png" alt="WoW Freedom">
</div>
<div id="menu">
<div class="menu-tabs">
<ul>
<li><a href="#home" class="menu-tab-current">Home</a></li>
<li><a href="#register">Register</a></li>
</ul>
</div>
<ul>
<li><a href="[url="http://w11.zetaboards.com/WoW_Freedom/index/%22%3EForums%3C/a%3E%3C/li"><LINK_TEXT text="http://w11.zetaboards.com/WoW_Freedom/i ... ms</a></li">http://w11.zetaboards.com/WoW_Freedom/index/">Forums</a></li</LINK_TEXT>[/url]>
<li><a href="[url="http://w11.zetaboards.com/WoW_Freedom/topic/10435508/%22%3EHow-to-Connect%3C/a%3E%3C/li"><LINK_TEXT text="http://w11.zetaboards.com/WoW_Freedom/t ... ct</a></li">http://w11.zetaboards.com/WoW_Freedom/topic/10435508/">How-to-Connect</a></li</LINK_TEXT>[/url]>
</ul>
</div>
<div id="content">
<div id="home" class="menu-tab-content">
<h1>Description</h1>
<p>WoW Freedom is a world of warcraft private roleplaying server.</p>
</div>
<div id="register" class="menu-tab-content">
<h1>Account Registration</h1>
<div id="registerform">
<h2>Fill out the form... </h2>
<form action="register.php" name="registrationform" method="post" class="ajax">
<ul>
<li><label for="accUsername">Account Username: </label></li>
<li><input type="text" name="accUsername" autocomplete="off" required></li>
<li><label for="accPassword">Account Password</label></li>
<li><input type="password" name="accPassword" autocomplete="off" required></li>
<li><label for="confirmPassword">Confirm Password</label></li>
<li><input type="password" name="confirmPassword" autocomplete="off" required></li>
<li><label for="accEmail">Account Email</label></li>
<li><input type="email" name="accEmail" autocomple="off" required></li>
<input type="submit" value="Register">
</ul>
</form>
</div>
<div id="formnotes">
<h2>... following these conditions.</h2>
<ul>
<li><p>• All fields of the form must be filled.</p></li>
<li><p>• Username can only contain 0-9, A-Z, and a-z.</p></li>
<li><p>• Email must be entered correctly.</p></li>
<li><p>• Username must be between 3 and 20 characters long.</p></li>
<li><p>• Password must be between 8 and 32 characters long.</p></li>
<li><p>• Both passwords must match.</p></li>
<li><p>• Username must not be already in use.</p></li>
</ul>
</div>
</div>
</div>
<div id="bottom">
<p id="copyright">© Copyright 2014 by WoW Freedom. All Rights reserved.</p>
<p id="notice">DISCLAIMER: SITE UNDER CONSTRUCTION, THIS IS NOT A FINISHED PRODUCT</p>
</div>
</div>
</body>
</html>
</code></blockquote>
CSS
<blockquote class='code_blockquote'><dl><dt>Code: </dt><dd> </dd></dl><code>
/*
Created on : 24-Jul-2014, 15:18:56
Author : Azeroc
*/
/* general */
h1, h2, h3, h4, h5, h6 {
margin-bottom: 15px;
}
/* main */
html {
background: black;
background-size: cover;
}
body {
color: white;
min-width: 800px;
}
/* body */
#top {
text-align: center;
background: RGBA(40,30,30, 0.5);
background-size: cover;
margin: 2% 10% 0% 10%;
border: 5px solid RGBA(50, 50, 50, 0.5);
border-radius: 50px 50px 0px 0px;
//border-radius: 50px 50px 0% 0%;
padding: 20px 20px 0px 20px;
min-height: 90px;
}
#menu {
background: RGBA(50,40,40, 0.5);
background-size: cover;
margin: 0% 10% 0% 10%;
border-left: 5px solid RGBA(50, 50, 50, 0.5);
border-right: 5px solid RGBA(50, 50, 50, 0.5);
border-bottom: 5px solid RGBA(50, 50, 50, 0.5);
min-height: 100px;
}
#content {
background: RGBA(50,50,50, 0.5);
background-size: cover;
margin: 0% 10% 0% 10%;
border-left: 5px solid RGBA(50, 50, 50, 0.5);
border-right: 5px solid RGBA(50, 50, 50, 0.5);
border-bottom: 5px solid RGBA(50, 50, 50, 0.5);
min-height: 500px;
padding: 20px;
}
#bottom {
background: RGBA(50,50,50, 0.5);
background-size: cover;
margin: 0% 10% 0% 10%;
border-left: 5px solid RGBA(50, 50, 50, 0.5);
border-right: 5px solid RGBA(50, 50, 50, 0.5);
border-bottom: 5px solid RGBA(50, 50, 50, 0.5);
min-height: 75px;
padding: 10px;
}
/* menu */
#menu a {
text-decoration: none;
color: RGB(150, 100, 100);
margin-left: 20px;
float: left;
background: RGBA(50, 30, 30, 0.5);
padding: 20px;
margin: 15px;
border: 5px solid RGBA(100, 25, 25, 0.75);
border-radius: 20px;
cursor: pointer;
}
#menu a:hover {
background: RGBA(75, 50, 50, 0.5);
color: white;
}
/* content format */
#content h1 {
color: RGB(150, 75, 75);
font-family: 'Impact', sans-serif;
}
/* registration */
#register h1 {
margin-left: 10px;
font-size: 30px;
}
#register h2 {
color: RGB(200, 100, 100);
font-size: 20px;
}
#registerform {
margin-left: 5%;
width: 45%;
float: left;
}
#formnotes {
width: 45%;
margin-right: 5%;
float: right;
}
.error {
color: red;
}
/* bottom stuff */
#copyright {
margin: 20px;
}
#notice {
color: red;
}
/* for tabs */
.menu-tab-content {
display: none;
}
#home {
display: block;
}
</code></blockquote>
Custom JS - tabcontentswitch.js
<blockquote class='code_blockquote'><dl><dt>Code: </dt><dd> </dd></dl><code>
$(document).ready(function() {
$(".menu-tabs a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("menu-tab-current");
$(this).parent().siblings().removeClass("menu-tab-current");
var tab = $(this).attr("href");
$(".menu-tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
</code></blockquote>
Custom JS - form.js
<blockquote class='code_blockquote'><dl><dt>Code: </dt><dd> </dd></dl><code>
$(document).ready(function() {
$('form.ajax').on('submit', function() {
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function() {
var that = $(this),
name = that.attr('name'),
value = that.val();
that.val(''); //clear input fields after submit
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
success: function(response) {
var str = response.substr(2);
console.log(str);
if (str === "DB_ERR_CONNECT") {
alert('ERROR: Failed to connect to the Auth database. Report this to developers!');
return;
}
var list = $('#formnotes li');
//register.php will send 6 bit string-type bitmask, one bit for each condition in #formnotes, if bit is set to 1, then a condition isn't satisfied
if (str === '000000') {
alert('Account created!');
}
else {
for (i = 0; i < list.length; ++i) {
list.eq(i).removeClass('error');
if (str.charAt(i) === '1') {
list.eq(i).addClass('error');
}
}
}
}
});
return false;
});
});
</code></blockquote>
Current web-page source (excluding PHP for security reasons)
HTML
<blockquote class='code_blockquote'><dl><dt>Code: </dt><dd> </dd></dl><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/js/tabcontentswitch.js"></script>
<script src="assets/js/form.js"></script>
<title>Freedom WoW - Homepage</title>
</head>
<body>
<div id="main">
<div id="top">
<img src="assets/img/wowfreedom.png" alt="WoW Freedom">
</div>
<div id="menu">
<div class="menu-tabs">
<ul>
<li><a href="#home" class="menu-tab-current">Home</a></li>
<li><a href="#register">Register</a></li>
</ul>
</div>
<ul>
<li><a href="[url="http://w11.zetaboards.com/WoW_Freedom/index/%22%3EForums%3C/a%3E%3C/li"><LINK_TEXT text="http://w11.zetaboards.com/WoW_Freedom/i ... ms</a></li">http://w11.zetaboards.com/WoW_Freedom/index/">Forums</a></li</LINK_TEXT>[/url]>
<li><a href="[url="http://w11.zetaboards.com/WoW_Freedom/topic/10435508/%22%3EHow-to-Connect%3C/a%3E%3C/li"><LINK_TEXT text="http://w11.zetaboards.com/WoW_Freedom/t ... ct</a></li">http://w11.zetaboards.com/WoW_Freedom/topic/10435508/">How-to-Connect</a></li</LINK_TEXT>[/url]>
</ul>
</div>
<div id="content">
<div id="home" class="menu-tab-content">
<h1>Description</h1>
<p>WoW Freedom is a world of warcraft private roleplaying server.</p>
</div>
<div id="register" class="menu-tab-content">
<h1>Account Registration</h1>
<div id="registerform">
<h2>Fill out the form... </h2>
<form action="register.php" name="registrationform" method="post" class="ajax">
<ul>
<li><label for="accUsername">Account Username: </label></li>
<li><input type="text" name="accUsername" autocomplete="off" required></li>
<li><label for="accPassword">Account Password</label></li>
<li><input type="password" name="accPassword" autocomplete="off" required></li>
<li><label for="confirmPassword">Confirm Password</label></li>
<li><input type="password" name="confirmPassword" autocomplete="off" required></li>
<li><label for="accEmail">Account Email</label></li>
<li><input type="email" name="accEmail" autocomple="off" required></li>
<input type="submit" value="Register">
</ul>
</form>
</div>
<div id="formnotes">
<h2>... following these conditions.</h2>
<ul>
<li><p>• All fields of the form must be filled.</p></li>
<li><p>• Username can only contain 0-9, A-Z, and a-z.</p></li>
<li><p>• Email must be entered correctly.</p></li>
<li><p>• Username must be between 3 and 20 characters long.</p></li>
<li><p>• Password must be between 8 and 32 characters long.</p></li>
<li><p>• Both passwords must match.</p></li>
<li><p>• Username must not be already in use.</p></li>
</ul>
</div>
</div>
</div>
<div id="bottom">
<p id="copyright">© Copyright 2014 by WoW Freedom. All Rights reserved.</p>
<p id="notice">DISCLAIMER: SITE UNDER CONSTRUCTION, THIS IS NOT A FINISHED PRODUCT</p>
</div>
</div>
</body>
</html>
</code></blockquote>
CSS
<blockquote class='code_blockquote'><dl><dt>Code: </dt><dd> </dd></dl><code>
/*
Created on : 24-Jul-2014, 15:18:56
Author : Azeroc
*/
/* general */
h1, h2, h3, h4, h5, h6 {
margin-bottom: 15px;
}
/* main */
html {
background: black;
background-size: cover;
}
body {
color: white;
min-width: 800px;
}
/* body */
#top {
text-align: center;
background: RGBA(40,30,30, 0.5);
background-size: cover;
margin: 2% 10% 0% 10%;
border: 5px solid RGBA(50, 50, 50, 0.5);
border-radius: 50px 50px 0px 0px;
//border-radius: 50px 50px 0% 0%;
padding: 20px 20px 0px 20px;
min-height: 90px;
}
#menu {
background: RGBA(50,40,40, 0.5);
background-size: cover;
margin: 0% 10% 0% 10%;
border-left: 5px solid RGBA(50, 50, 50, 0.5);
border-right: 5px solid RGBA(50, 50, 50, 0.5);
border-bottom: 5px solid RGBA(50, 50, 50, 0.5);
min-height: 100px;
}
#content {
background: RGBA(50,50,50, 0.5);
background-size: cover;
margin: 0% 10% 0% 10%;
border-left: 5px solid RGBA(50, 50, 50, 0.5);
border-right: 5px solid RGBA(50, 50, 50, 0.5);
border-bottom: 5px solid RGBA(50, 50, 50, 0.5);
min-height: 500px;
padding: 20px;
}
#bottom {
background: RGBA(50,50,50, 0.5);
background-size: cover;
margin: 0% 10% 0% 10%;
border-left: 5px solid RGBA(50, 50, 50, 0.5);
border-right: 5px solid RGBA(50, 50, 50, 0.5);
border-bottom: 5px solid RGBA(50, 50, 50, 0.5);
min-height: 75px;
padding: 10px;
}
/* menu */
#menu a {
text-decoration: none;
color: RGB(150, 100, 100);
margin-left: 20px;
float: left;
background: RGBA(50, 30, 30, 0.5);
padding: 20px;
margin: 15px;
border: 5px solid RGBA(100, 25, 25, 0.75);
border-radius: 20px;
cursor: pointer;
}
#menu a:hover {
background: RGBA(75, 50, 50, 0.5);
color: white;
}
/* content format */
#content h1 {
color: RGB(150, 75, 75);
font-family: 'Impact', sans-serif;
}
/* registration */
#register h1 {
margin-left: 10px;
font-size: 30px;
}
#register h2 {
color: RGB(200, 100, 100);
font-size: 20px;
}
#registerform {
margin-left: 5%;
width: 45%;
float: left;
}
#formnotes {
width: 45%;
margin-right: 5%;
float: right;
}
.error {
color: red;
}
/* bottom stuff */
#copyright {
margin: 20px;
}
#notice {
color: red;
}
/* for tabs */
.menu-tab-content {
display: none;
}
#home {
display: block;
}
</code></blockquote>
Custom JS - tabcontentswitch.js
<blockquote class='code_blockquote'><dl><dt>Code: </dt><dd> </dd></dl><code>
$(document).ready(function() {
$(".menu-tabs a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("menu-tab-current");
$(this).parent().siblings().removeClass("menu-tab-current");
var tab = $(this).attr("href");
$(".menu-tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
</code></blockquote>
Custom JS - form.js
<blockquote class='code_blockquote'><dl><dt>Code: </dt><dd> </dd></dl><code>
$(document).ready(function() {
$('form.ajax').on('submit', function() {
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function() {
var that = $(this),
name = that.attr('name'),
value = that.val();
that.val(''); //clear input fields after submit
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
success: function(response) {
var str = response.substr(2);
console.log(str);
if (str === "DB_ERR_CONNECT") {
alert('ERROR: Failed to connect to the Auth database. Report this to developers!');
return;
}
var list = $('#formnotes li');
//register.php will send 6 bit string-type bitmask, one bit for each condition in #formnotes, if bit is set to 1, then a condition isn't satisfied
if (str === '000000') {
alert('Account created!');
}
else {
for (i = 0; i < list.length; ++i) {
list.eq(i).removeClass('error');
if (str.charAt(i) === '1') {
list.eq(i).addClass('error');
}
}
}
}
});
return false;
});
});
</code></blockquote>