<div class="pg_auth_page">
<div class="login_aside">
<div class="to_auth_circle-1"></div>
<div class="to_auth_circle-2"></div>
<div class="login_aside_innr">
<span class="user_avatar avatar_male">
<img src="{{CONFIG site_url}}/media/img/user-m.png" class="male_ava" alt="user">
<img src="{{CONFIG site_url}}/media/img/user-f.png" class="female_ava" alt="user">
</span>
<p>{{LANG min_to_get_start}}</p>
<a class="btn" href="{{CONFIG site_url}}/welcome"><span>{{LANG sign_in}}</span></a>
</div>
</div>
<div class="login_page">
<div class="login-pagez">
<a href="{{CONFIG site_url}}" class="logo"><img src="{{CONFIG site_url}}/media/img/<?php if ($_COOKIE['mode'] == 'night') { ?>light-logo<?php } else { ?>logo<?php } ?>.{{CONFIG logo_extension}}" alt="logo"></a>
<h3>{{LANG let_set_up}}</h3>
<p>{{LANG create_acc_proceed}} {{CONFIG site_name}}</p>
<form action="" class="form" id="signup">
<div class="signup-alert"></div>
<div class="pg_mat_input">
<input required="true" type="text" name="username" id="username" placeholder="{{LANG username}}" autofocus />
<label for="username">{{LANG username}}</label>
</div>
<div class="pg_mat_input">
<input required="true" type="email" name="email" id="email" placeholder="{{LANG email_addr}}" />
<label for="email">{{LANG email_addr}}</label>
</div>
<div class="row">
<div class="col-md-6">
<div class="pg_mat_input">
<input required="true" class="show_password" type="password" name="password" id="password" placeholder="{{LANG password}}" />
<label for="password">{{LANG password}}</label>
</div>
</div>
<div class="col-md-6">
<div class="pg_mat_input">
<input required="true" class="show_password" type="password" name="conf_password" id="conf_password" placeholder="{{LANG confirm_passwd}}" />
<label for="conf_password">{{LANG confirm_passwd}}</label>
<div class="icon-wrapper">
<span toggle=".show_password" class="field-icon toggle-password">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="eye"><path fill="currentColor" d="M1.181 12C2.121 6.88 6.608 3 12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9zM12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0-2a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="eye-off"><path fill="currentColor" d="M4.52 5.934L1.393 2.808l1.415-1.415 19.799 19.8-1.415 1.414-3.31-3.31A10.949 10.949 0 0 1 12 21c-5.392 0-9.878-3.88-10.819-9a10.982 10.982 0 0 1 3.34-6.066zm10.237 10.238l-1.464-1.464a3 3 0 0 1-4.001-4.001L7.828 9.243a5 5 0 0 0 6.929 6.929zM7.974 3.76C9.221 3.27 10.58 3 12 3c5.392 0 9.878 3.88 10.819 9a10.947 10.947 0 0 1-2.012 4.592l-3.86-3.86a5 5 0 0 0-5.68-5.68L7.974 3.761z"/></svg>
</span>
</div>
</div>
</div>
</div>
<div class="pg_mat_input">
<select name="gender" id="gender">
<option value="male" selected="selected">{{LANG male}}</option>
<option value="female">{{LANG female}}</option>
</select>
</div>
<input type="hidden" name="hash" value="<?php echo($context['csrf_token']) ?>">
<div class="pp_terms">
<input type="checkbox" name="terms" id="terms" onchange="activateButton(this)">
<label for="terms"> I agree to the <a href="<?php echo pxp_link('terms-of-use');?>">{{LANG terms_of_use}}</a></label>
</div>
<button class="btn btn-large btn-main btn-mat" id="sign_submit" type="submit" disabled>{{LANG signup}}</button>
</form>
<p class="to_altr_auth_opt">Already have an account? <a href="{{CONFIG site_url}}/welcome">{{LANG sign_in}}</a></p>
</div>
<svg width="742px" height="135px" viewBox="0 0 742 135" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,18.1943359 C0,18.1943359 33.731258,1.47290595 88.7734375,0.0931329845 C219.81339,-3.19171847 250.381265,81.3678781 463.388672,103.315789 C574.953531,114.811237 741.039062,66.8974609 741.039062,66.8974609 L741.039062,134 L0,133.714227 L0,18.1943359 Z" id="Rectangle-2" fill="#ffe2f6" opacity="0.53177472" style="mix-blend-mode: multiply;"></path><path d="M0,98.1572266 C0,98.1572266 104.257812,78.1484375 186.296875,78.1484375 C268.335938,78.1484375 310.78125,115.222656 369,104.40625 C534.365804,73.6830944 552.410156,15.5898438 625.519531,7.62890625 C698.628906,-0.33203125 741.039062,42.75 741.039062,42.75 L741.039062,134 L0,134.166016 L0,98.1572266 Z" id="Rectangle-4" fill="#ffe2f6" opacity="0.37004431" style="mix-blend-mode: multiply;"></path> <path d="M0,45 C0,45 62.1359299,107.911868 208.148437,109.703125 C354.160945,111.494382 436.994353,57.1871807 491.703125,51.9257812 C644.628906,37.21875 741.039062,109.703125 741.039062,109.703125 L741.039062,134 L0,134 L0,45 Z" id="Rectangle-5" fill="#ffe2f6" opacity="0.231809701" style="mix-blend-mode: multiply;"></path> <path d="M0.288085938,112.378906 C0.288085938,112.378906 81.0614612,76.8789372 194.78125,75.40625 C308.501039,73.9335628 337.203138,98.34218 458.777344,106.441406 C580.35155,114.540633 741,116.601562 741,116.601562 L741.039062,134 L0,132.889648 L0.288085938,112.378906 Z" id="Rectangle-6" fill="#ffe2f6" opacity="0.209188433" style="mix-blend-mode: multiply;"></path></svg>
</div>
</div>
<script>
jQuery(document).ready(function($) {
$("form#signup").ajaxForm({
url:'<?php echo($context['xhr_url']) ?>/signup',
dataType:'json',
type:'POST',
beforeSend:function(){
$('form').find('button[type="submit"]').attr('disabled','true');
},
success:function(data){
scroll2top();
if (data.status == 200) {
$(".signup-alert").html($('<div>',{
class: 'alert alert-success',
text: data.message
}));
<?php if ($config['email_validation'] != 'on') { ?>
setTimeout(function(){
window.location.href = "{{CONFIG site_url}}";
},1500);
<?php } ?>
}
else{
$(".signup-alert").html($('<div>',{
class: 'alert alert-danger',
text: data.message
}));
}
$('form').find('button[type="submit"]').removeAttr('disabled');
},
error: function(data){
console.log(data);
}
})
});
$(document).ready(function() {
// hide/show password
$(".icon-wrapper").click(function() {
$(this).toggleClass("show_eye");
var input = $($(".toggle-password").attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
$("select#gender").change(function(){
var ddl = document.getElementById("gender");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "male"){
$('.user_avatar').removeClass('avatar_female');
$('.user_avatar').addClass('avatar_male');
}
else if (selectedValue == "female"){
$('.user_avatar').removeClass('avatar_male');
$('.user_avatar').addClass('avatar_female');
}
});
});
function activateButton(element) {
if(element.checked) {
document.getElementById("sign_submit").disabled = false;
}
else {
document.getElementById("sign_submit").disabled = true;
}
};
</script>