Files
sx-fc/app/views/layouts/login.html.erb

208 lines
8.0 KiB
Plaintext
Executable File
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>SmartSales : Restaurant</title>
<%= csrf_meta_tags %>
<!-- Favicon-->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Google Fonts -->
<!-- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css"> -->
<!-- Bootstrap Core Css -->
<!-- <link href="plugins/bootstrap/css/bootstrap.css" rel="stylesheet"> -->
<!-- Waves Effect Css -->
<!-- <link href="plugins/node-waves/waves.css" rel="stylesheet" /> -->
<!-- Animation Css -->
<!-- <link href="plugins/animate-css/animate.css" rel="stylesheet" /> -->
<!-- Morris Chart Css-->
<!-- <link href="plugins/morrisjs/morris.css" rel="stylesheet" /> -->
<!-- Custom Css -->
<!-- <link href="css/style.css" rel="stylesheet"> -->
<!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
<!-- <link href="css/themes/all-themes.css" rel="stylesheet" /> -->
<%= stylesheet_link_tag 'login', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> -->
<%= javascript_include_tag 'login', 'data-turbolinks-track': 'reload' %>
</head>
<body class="login-page">
<!-- Page Loader -->
<div class="page-loader-wrapper">
<div class="loader">
<div class="preloader">
<div class="spinner-layer pl-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<p>Please wait...</p>
</div>
</div>
<!-- #END# Page Loader -->
<% flash.each do |type, message| %>
<%
if type == "notice"
color = "alert-success"
elsif type == "error"
color = "alert-danger"
elsif type == "warning"
color = "alert-warning"
else
color = "bg-black"
end %>
<p id="noti" class="hidden noti" data-placement-from="top" data-message="<%=message%>" data-placement-align="center"
data-animate-enter="" data-animate-exit="" data-color-name="<%=color%>" >
</p>
<% end %>
<div class="login-box">
<div class="logo text-center">
<img src="/image/SX-logo.png" width="150px" height="150px">
<p>
<small>Version - 1.0.1</small>
</p>
</div>
<div class="row">
<div class="col-lg-12_ col-md-12 col-sm-12 col-xs-12 text-center">
<div class="current-shop-name">
<span><%= current_shop.name %></span>
</div>
</div>
</div>
<%= simple_form_for(@login_form, url: login_path, method: "post") do |f| %>
<div class="card padding-10">
<div class="card-header m-l-">
<div class="row clearfix">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 login_pwd">
<%= f.input :emp_id, as: :hidden, required: false, class: "form-control" %>
<%= f.input :password, label: "Access PIN", required: false, class: "form-control" %>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-10 login_ent">
<br>
<span class="input-group-addon enter m-t-25 m-l--25" data-value="ENT" style="cursor: pointer;padding:0.1rem !important;">
<i class="material-icons">send</i>
</span>
</div>
</div>
</div>
<div class="card-content">
<div class='col-md-12'>
<div class='row bottom'>
<div class="pin_pad " data-value="1">1</div>
<div class="pin_pad left" data-value="2">2</div>
<div class="pin_pad left" data-value="3">3</div>
</div>
<div class='row bottom'>
<div class="pin_pad" data-value="4">4</div>
<div class="pin_pad left" data-value="5">5</div>
<div class="pin_pad left" data-value="6">6</div>
</div>
<div class='row bottom'>
<div class="pin_pad" data-value="7">7</div>
<div class="pin_pad left" data-value="8">8</div>
<div class="pin_pad left" data-value="9">9</div>
</div>
<div class='row bottom'>
<!-- <div class="pin_pad bg-grey" data-value="CLR">CLR</div>
<div class="pin_pad left" data-value="0">0</div>
<div class="pin_pad left bg-indigo" data-value="ENT">ENT</div> -->
<% if request.user_agent.include? 'Mobile' %>
<div class="pin_pad bg-blue-grey" data-value="CLR">CLR</div>
<div class="pin_pad left" data-value="0">0</div>
<div class="pin_pad bg-grey left" data-value="ENT">ENTER</div>
<% else %>
<div class="pin_pad bg-blue-grey" data-value="BAC">BACK</div>
<div class="pin_pad left" data-value="0">0</div>
<div class="pin_pad bg-blue-grey" data-value="CLR">CLR</div>
<% end %>
</div>
</div>
</div>
<% end %>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#login_form_password").focus();
$(".pin_pad").click(function (event) {
event.preventDefault();
var value = $(this).data("value");
if (value == "CLR") {
$("#login_form_password").val("");
} else if (value == "ENT") {
$("#new_login_form").submit();
} else if (value == "BAC") {
window.location.href = "/"
} else {
var old_value = $("#login_form_password").val();
$("#login_form_password").val(old_value + value);
}
});
$(".enter").click(function (event) {
event.preventDefault();
var value = $(this).data("value");
if (value == "ENT") {
$("#new_login_form").submit();
}
});
});
function showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit) {
if (colorName === null || colorName === '') { colorName = 'bg-black'; }
if (animateEnter === null || animateEnter === '') { animateEnter = 'animated fadeInDown'; }
if (animateExit === null || animateExit === '') { animateExit = 'animated fadeOutUp'; }
var allowDismiss = true;
$.notify({
message: text
},
{
type: colorName,
allow_dismiss: allowDismiss,
newest_on_top: true,
timer: 1000,
placement: {
from: placementFrom,
align: placementAlign
},
animate: {
enter: animateEnter,
exit: animateExit
},
template: '<div data-notify="container" class="bootstrap-notify-container alert alert-dismissible {0} ' + (allowDismiss ? "p-r-30" : "") + '" role="alert">' +
'<button type="button" aria-hidden="true" class="close float-right m-l-20 m-t--5" data-notify="dismiss">×</button>' +
'<span data-notify="icon"></span> ' +
'<span data-notify="title">{1}</span> ' +
'<span data-notify="message">{2}</span>' +
'<div class="progress" data-notify="progressbar">' +
'<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
'</div>' +
'<a href="{3}" target="{4}" data-notify="url"></a>' +
'</div>'
});
}
//end Notificaiotn message
</script>
</body>
</html>