<!DOCTYPE html>
<html lang="en" >
	<head>
		<meta charset="utf-8">
		<title>OpenRPA</title>
		<link rel="stylesheet" type="text/css" href="3rdParty/Semantic-UI-CSS-master/semantic.min.css">
		<script
		  src="3rdParty/jQuery/jquery-3.1.1.min.js"
		  crossorigin="anonymous"></script>
		<script src="3rdParty/Semantic-UI-CSS-master/semantic.min.js"></script>
		  <script>
		  var mGlobal={}
		  $(document)
			.ready(function() {
			  // fix main menu to page on passing
			  $('.main.menu').visibility({
				type: 'fixed'
			  });
			  $('.overlay').visibility({
				type: 'fixed',
				offset: 80
			  });

			  // lazy load images
			  $('.image').visibility({
				type: 'image',
				transition: 'vertical flip in',
				duration: 500
			  });

			  // show dropdown on hover
			  $('.main.menu  .ui.dropdown').dropdown({
				on: 'hover'
			  });
			
			})
		  ;
		  </script>

		  <style type="text/css">

		  body {
			background-color: #FFFFFF;
		  }
		  .main.container {
			margin-top: 2em;
		  }

		  

		  .overlay {
			float: left;
			margin: 0em 3em 1em 0em;
		  }
		  .overlay .menu {
			position: relative;
			left: 0;
			transition: left 0.5s ease;
		  }

		  .main.menu.fixed {
			background-color: #FFFFFF;
			border: 1px solid #DDD;
			box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
		  }
		  .overlay.fixed .menu {
			left: 800px;
		  }

		  .text.container .left.floated.image {
			margin: 2em 2em 2em -4em;
		  }
		  .text.container .right.floated.image {
			margin: 2em -4em 2em 2em;
		  }

		  .ui.footer.segment {
			margin: 5em 0em 0em;
			padding: 5em 0em;
		  }
		  </style>
	</head>
	<body>
		<div class="ui internally celled grid">
			<div class="row black">
				<div class="two wide column">
					<h1 class="ui header inverted">OpenRPA</h1>
				</div>
				<div class="twelve wide column">
					<h1 class="ui header inverted">Daemon GUI</h1>
				</div>
				<div class="two wide column">
					<h5>by UnicodeLabs</h5>
				</div>
				
			</div>
			<div class="row">
				<div class="six wide column rpa-object-tree" >
					
				</div>
				<div class="six wide column rpa-hierarchy" >
					<p>This example shows how to use lazy loaded images, a sticky menu, and a simple text container</p>
				</div>
				<div class="four wide column rpa-property-list" >

				</div>
			</div>
			<div class="row black">
				<div class="two wide column">
					<button class="ui button grey labeled icon mini" onclick="mGlobal.GUIRefreshTree()">
						<i class="up refresh icon"></i>
						Refresh tree
					</button>
				</div>
				<div class="two wide column">
					<button class="ui button grey labeled icon mini">
						<i class="up arrow icon"></i>
						From
					</button>
				</div>
				<div class="two wide column">
					<button class="ui button grey labeled icon mini">
						<i class="down arrow icon"></i>
						To
					</button>
				</div>
				<div class="ten wide column">
				</div>
				
			</div>
			<div class="row">
				
			</div>
			<div class="row black">
				


			</div>
		</div>
		<div class="ui inverted vertical footer segment">
			<div class="ui center aligned container">
			  <div class="ui stackable inverted divided grid">
				<div class="three wide column">
				  <h4 class="ui inverted header">Pywinauto</h4>
				  <div class="ui inverted link list">
					<a href="https://pywinauto.readthedocs.io/en/latest/code/pywinauto.findwindows.html" class="item" target="_blank">Specification manual</a>
					<a href="https://pywinauto.readthedocs.io/en/latest/code/code.html#main-user-modules" class="item" target="_blank">Classes manual</a>
					<a href="https://pywinauto.readthedocs.io/en/latest/code/code.html#main-user-modules" class="item" target="_blank">How to use manual</a>
					<a href="https://pywinauto.readthedocs.io/en/latest/code/pywinauto.base_wrapper.html" class="item" target="_blank">Base wrapper manual</a>
				  </div>
				</div>
				<div class="three wide column">
				  <h4 class="ui inverted header">Semantic UI</h4>
				  <div class="ui inverted link list">
					<a href="https://semantic-ui.com/usage/theming.html" class="item" target="_blank">Color manual</a>
					<a href="https://semantic-ui.com/elements/input.html" class="item" target="_blank">Input manual</a>
					<a href="https://semantic-ui.com/elements/icon.html" class="item" target="_blank">Icon list</a>
					<a href="https://semantic-ui.com/elements/button.html" class="item" target="_blank">Button manual</a>
				  </div>
				</div>
				<div class="three wide column">
				  <h4 class="ui inverted header">GitLab</h4>
				  <div class="ui inverted link list">
					<a href="https://gitlab.com/UnicodeLabs/OpenRPA" class="item" target="_blank">OpenRPA repository</a>
					<a href="https://gitlab.com/UnicodeLabs" class="item" target="_blank">UnicodeLabs</a>
					<a href="#" class="item">Link -</a>
					<a href="#" class="item">Link -</a>
				  </div>
				</div>
				<div class="seven wide column">
				  <h4 class="ui inverted header">OpenRPA</h4>
				  <p>Open source Robotic Process Automation software by the Unicode Labs (Created by Ivan Maslov). Under the MIT license.</p>
				</div>
			  </div>
			  <div class="ui inverted section divider"></div>
			  <div class="ui horizontal inverted small divided link list">
				<a class="item" href="#">Site Map</a>
				<a class="item" href="#">Contact Us</a>
				<a class="item" href="#">Terms and Conditions</a>
				<a class="item" href="#">Privacy Policy</a>
			  </div>
			</div>
		</div>
		<div class="ui basic modal">
			<div class="ui icon header">
			</div>
			<div class="content">
				<p>Here is the message text!</p>
			</div>
			<div class="actions">
				<div class="ui red basic cancel inverted button">
					<i class="remove icon"></i>
					No
				</div>
				<div class="ui green ok inverted button">
					<i class="checkmark icon"></i>
					Yes
				</div>
			</div>
		</div>
		
		
		<div class="ui modal openrpa-code-list-gui-import-modal">
			<i class="close icon"></i>
			<div class="header">
			Code list import
			</div>
			<div class="content">
				<div class="description">
					<div class="ui header">Insert your JSON specification here.</div>
					<p><textarea style="width:100%" rows="6" cols="60"></textarea></p>
				</div>
			</div>
			<div class="actions">
				<div class="ui black deny button">
					Cancel
				</div>
				<div class="ui positive right labeled icon button" onclick="mGlobal.CodeList.fActionSpecificationImportFromJSON();">
					Parse
					<i class="checkmark icon"></i>
				</div>
			</div>
		</div>
	</body>
</html>