WoW Freedom
Better VPS web page - Printable Version

+- WoW Freedom (https://wowfreedom-rp.com/f)
+-- Forum: News & Updates (https://wowfreedom-rp.com/f/forumdisplay.php?fid=53)
+--- Forum: Development and Staff Updates (https://wowfreedom-rp.com/f/forumdisplay.php?fid=5)
+---- Forum: Suggestions (https://wowfreedom-rp.com/f/forumdisplay.php?fid=8)
+---- Thread: Better VPS web page (/showthread.php?tid=42)



Better VPS web page - Azeroc - 07-26-2014

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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>