02-06-2014, 04:35 AM
Fixing for login with avatar
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<?php include 'includes.php';?>
<title><?php echo get_phrase('login');?> | <?php echo $system_title;?></title>
</head>
<body>
<?php if($this->session->flashdata('flash_message') != ""):?>
<script>
$(document).ready(function() {
Growl.info({title:"<?php echo $this->session->flashdata('flash_message');?>",text:" "})
});
</script>
<?php endif;?>
<div class="navbar navbar-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="<?php echo base_url();?>"><?php echo $system_name;?></a>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Select Language <b class="caret"></b></a>
<!-- Language Selector -->
<ul class="dropdown-menu">
<?php
$fields = $this->db->list_fields('language');
foreach ($fields as $field)
{
if($field == 'phrase_id' || $field == 'phrase')continue;
?>
<li>
<a href="<?php echo base_url();?>index.php?multilanguage/select_language/<?php echo $field;?>">
<?php echo $field;?>
<?php //selecting current language
if($this->session->userdata('current_language') == $field):?>
<i class="icon-ok"></i>
<?php endif;?>
</a>
</li>
<?php
}
?>
</ul>
<!-- Language Selector -->
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="span4 offset4">
<div class="padded">
<center>
<img src="<?php echo base_url();?>uploads/logo.png" style="max-height:200px;" />
</center>
<div class="login box" style="margin-top: 10px;">
<div class="box-header">
<span class="title"><?php echo get_phrase('login');?></span>
</div>
<div class="box-content padded">
<script>
function check_account_type()
{
var account_type = document.getElementById('account_selector').value;
if (account_type == "") {
Growl.info({title:"Please select an account type first",text:" "})
return false;
}
else
return true;
}
</script>
<form method="post" action="<?php echo base_url();?>index.php?login" class="separate-sections" onsubmit="return check_account_type()">
<center>
<div style="height:100px;">
<div id="avatar" class="avatar">
<img src="<?php echo base_url();?>template/images/icons_big/account.png" class="avatar-big" id="account_img" style=""/>
</div>
</div>
<img src="<?php echo base_url();?>template/images/icons_big/admin.png" style="display:none;"/>
<img src="<?php echo base_url();?>template/images/icons_big/teacher.png" style="display:none;"/>
<img src="<?php echo base_url();?>template/images/icons_big/student.png" style="display:none;"/>
<img src="<?php echo base_url();?>template/images/icons_big/parent.png" style="display:none;"/>
</center>
<div class="">
<select id="account_selector" class="validate[required]" name="login_type" style="width:100%;">
<option value=""><?php echo get_phrase('account_type');?></option>
<option value="admin"><?php echo get_phrase('admin');?></option>
<option value="teacher"><?php echo get_phrase('teacher');?></option>
<option value="student"><?php echo get_phrase('student');?></option>
</select>
</div>
<style>
.flip_in{
opacity:0;
-moz-transform:rotateY(-90deg);
-webkit-transform:rotateY(-90deg);
transform:rotateY(-90deg);
transition:.2s;
}
.flip_out{
opacity:1;
-moz-transform:rotateY(0deg);
-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);
transition:.2s;
}
</style>
<script>
$(document).ready(function(){
$("#account_selector").change(function(){
//squeezee in
function rotate_in()
{
$('#avatar').toggleClass('flip_in');
}
setTimeout(rotate_in, 0);
//change img src
function set_img()
{
var img = document.getElementById('account_selector').value;
if(img == "")
img = 'account';
$("#account_img").attr("src", "<?php echo base_url();?>template/images/icons_big/"+img+".png");
}
setTimeout(set_img, 200);
//expand out
function rotate_out()
{
$('#avatar').toggleClass('flip_out');
}
setTimeout(rotate_out, 200);
//clear css
function reset_class()
{
$("#avatar").attr("class", "avatar");
}
setTimeout(reset_class, 500);
});
});
</script>
<div class="input-prepend">
<span class="add-on" href="#">
<i class="icon-envelope"></i>
</span>
<input name="email" type="text" placeholder="<?php echo get_phrase('email');?>">
</div>
<div class="input-prepend">
<span class="add-on" href="#">
<i class="icon-key"></i>
</span>
<input name="password" type="password" placeholder="<?php echo get_phrase('password');?>">
</div>
<div>
<button type="submit" class="btn btn-gray btn-block" >
<?php echo get_phrase('login');?> <i class="icon-signin"></i>
</button>
</div>
</form>
<div>
<a data-toggle="modal" href="#modal-simple">
<?php echo get_phrase('forgot_password?');?>
</a>
</div>
</div>
</div>
<hr />
<!----------DUMMY ACCOUNTS LOGIN INFO--------->
<!--<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#Administrator">
Administrator
</a>
</div>
<div id="Administrator" class="accordion-body collapse in">
<div class="accordion-inner">
<span class="label label-blue">Demo login : admin@school.com , 1234</span>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#Doctor">
Teacher
</a>
</div>
<div id="Doctor" class="accordion-body collapse">
<div class="accordion-inner">
<span class="label label-blue">Demo login : teacher@school.com , 1234</span>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#Patient">
Student
</a>
</div>
<div id="Patient" class="accordion-body collapse">
<div class="accordion-inner">
<span class="label label-blue">Demo login : student@school.com , 1234</span>
</div>
</div>
</div>
</div>-->
<!----------DUMMY ACCOUNTS LOGIN INFO--------->
</div>
</div>
</div>
<!-----------password reset form ------>
<div id="modal-simple" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h6 id="modal-tablesLabel">Modal Heading</h6>
</div>
<div class="modal-body">
Cool stuff eh?
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-blue">Save changes</button>
</div>
</div>
<!-----------password reset form ------>
</body>
</html>