<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dialog">
<form id="register">
<h1>CIUDADANIA</h1>
<input id="firstname" type="text" placeholder="Nombre"><br>
<input id="lastname" type="text" placeholder="Apellidos"><br>
<input id="dateofbirth" type="text" placeholder="Fecha de nacimiento (DD/MM/YYYY)"><br>
<input id="height" type="text" placeholder="Altura (140-200 cm)"><br>
<div class="toggle_radio">
<input type="radio" name="sex" value="m" class="toggle_option" id="first_toggle">
<input type="radio" name="sex" value="f" checked class="toggle_option" id="second_toggle">
<label for="first_toggle"><p>Hombre</p></label>
<label for="second_toggle"><p>Mujer</p></label>
<div class="toggle_option_slider"></div>
</div>
<button id="submit" type="submit">Crear</button>
</form>
</div>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
body {
font-family: sans-serif;
overflow: hidden;
display: block;
}
.dialog {
width: 400px;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
padding: 10px;
box-shadow: 0px 0px 50px 0px #000;
background-color: #343a40;
overflow: hidden;
opacity: 0.9;
}
input[type=text] {
width: 100%;
padding: 7px;
margin-top: 4px;
text-align: left;
color: #fff;
border-bottom: 1px solid #28a745;
background-color: transparent;
border-radius: 10px;
transition: border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
}
input[type=radio] {
width: 100%;
padding: 7px;
margin: 1px;
text-align: left;
color: #fff;
border-radius: 0;
}
button {
display: block;
margin-top: 5px;
padding: 10px;
background-color: transparent;
border: 1px solid #D8F6CE;
color: #fff;
border-radius: 10px;
width: 100%;
}
button:hover {
display: block;
margin-top: 5px;
padding: 10px;
background-color: #28a745;
border: 0;
color: #fff;
border-radius: 10px;
width: 100%;
}
h1 {
display: block;
margin-top: 5px;
margin-right: 5px;
padding: 10px;
color: #fff;
width: 93%;
text-align: center;
}
.toggle_radio{
position: relative;
background: rgba(255,255,255,.1);
margin: 4px auto;
overflow: hidden;
padding: 0 !important;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
position: relative;
height: 26px;
width: 212px;
}
.toggle_radio > * {
float: left;
}
.toggle_radio input[type=radio]{
display: none;
/*position: fixed;*/
}
.toggle_radio label{
font: 90%/1.618 "Source Sans Pro";
color: rgba(255,255,255,.9);
z-index: 0;
display: block;
width: 100px;
height: 20px;
margin: 3px 3px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
cursor: pointer;
z-index: 1;
/*background: rgba(0,0,0,.1);*/
text-align: center;
/*margin: 0 2px;*/
/*background: blue;*/ /*make it blue*/
}
.toggle_option_slider{
/*display: none;*/
/*background: red;*/
width: 100px;
height: 20px;
position: absolute;
top: 3px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
}
#first_toggle:checked ~ .toggle_option_slider{
background: rgba(255,255,255,.3);
left: 3px;
}
#second_toggle:checked ~ .toggle_option_slider{
background: rgba(255,255,255,.3);
left: 109px;
}
$(function() {
window.addEventListener('message', function(event) {
if (event.data.type == "enableui") {
document.body.style.display = event.data.enable ? "block" : "none";
}
});
document.onkeyup = function (data) {
if (data.which == 27) { // Escape key
$.post('http://esx_identity/escape', JSON.stringify({}));
}
};
$("#register").submit(function(event) {
event.preventDefault(); // Prevent form from submitting
// Verify date
var date = $("#dateofbirth").val();
var dateCheck = new Date($("#dateofbirth").val());
if (dateCheck == "Invalid Date") {
date == "invalid";
}
$.post('http://esx_identity/register', JSON.stringify({
firstname: $("#firstname").val().trim(),
lastname: $("#lastname").val().trim(),
dateofbirth: date,
sex: $("input[type='radio'][name='sex']:checked").val(),
height: $("#height").val().trim()
}));
});
});
