Instantly share code, notes, and snippets.

Embed
What would you like to do?
NodeJS FIM/MIM User Object Report WebApp UI
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
html {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.2;
color: #333;
}
.form-control {
width:415px;
}
.tt-dropdown-menu{
text-align: left;
}
.typeahead,
.tt-query,
.tt-hint {
padding: 8px 12px;
font-size: 24px;
outline: none;
}
.typeahead {
background-color: #fff;
}
.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-dropdown-menu {
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
.input-loading {
background-color: #ffffff;
background-image: url("./images/3.gif");
background-size: 25px 25px;
background-position:right center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<br/><br/><br/><br/><br/><br/>
<div class="container">
<div class="mimuserslookup">
<div class="mim">
<!-- Select a User by LoginID-->
<div id="outputbox"><h4>
<p id="selecteduser">Search for a user</p>
</h4>
</div>
<div class="input-group">
<!-- Select User LoginID -->
<input class="typeahead form-control" type="text" placeholder="LAN LoginID" autocomplete="off" spellcheck="false" dir="auto" >
<span class="input-group-btn">
<!-- Generate Report Button -->
<button class="btn btn-primary getuser" type="submit">Generate Report</button>
</span>
<input class="typeahead form-control" type="text" disabled="" autocomplete="off" spellcheck="false" style="visibility: hidden; ">
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: nowrap; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
<span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
<div class="tt-dataset-mimuserslookup"></div>
</span>
</div>
<div class= "outputbox" id="userReportOutput" item-width="200px" >
</div>
</div>
</div>
<script src="./javascripts/typeahead.bundle.js"></script>
<script src="./javascripts/mimuserreport.js"></script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment