kevin.legarreta
/
Proyecto_Oller


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
							<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	    <!-- Link to CSS -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<title>MSI</title>
		<!-- Collapse Navbar (needs some work) -->
		<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  			<a class="navbar-brand" href="#"><img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/c8/Francisco_Oller.jpg/220px-Francisco_Oller.jpg" width="30" height="30" class="d-inline-block align-top" alt=""> Proyecto Oller</a>
  				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    				<span class="navbar-toggler-icon"></span>
  				</button>

  			<div class="collapse navbar-collapse" id="navbarSupportedContent">
	    		<ul class="navbar-nav mr-auto">
	      			<li class="nav-item active">
	        			<a class="nav-link" href="#">Home</a>
	      			</li>
			      	<li class="nav-item">
				    	<a class="nav-link" href="#">Link</a>
			      	</li>
	      			<li class="nav-item dropdown">
	        			<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	          			Dropdown
	        			</a>
	        			<div class="dropdown-menu" aria-labelledby="navbarDropdown">
	          				<a class="dropdown-item" href="#">Action</a>
	          				<a class="dropdown-item" href="#">Another action</a>
	          				<div class="dropdown-divider"></div>
	          					<a class="dropdown-item" href="#">Something else here</a>
	        				</div>
	      			</li>
	      			<li class="nav-item">
	        			<a class="nav-link disabled" href="#">Disabled</a>
	      			</li>
    			</ul>
	    		<form class="form-inline my-2 my-lg-0">
	      			<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
	      			<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
	    		</form>
	  		</div>
		</nav>

	</head>
	<body>
	    <!-- Optional JavaScript (No se para que es esto.) -->
	    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
	    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
	    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


		<script type="text/javascript" src="scripts/getImages.js"></script>
		

	    <!-- Image Selector -->
	    <div class="row" id="row">
	        <nav class="col-md-1 d-none d-md-block bg-light sidebar" style="height: 100%;">
          		<div class="sidebar-sticky">
            		<ul class="nav flex-column">
	              		<li class="nav-item">
                			<a class="nav-link" href="#">
                  			<span data-feather="shopping-cart"></span>
                  			Home
                			</a>
              			</li>
              			<li class="nav-item">
                			<a class="nav-link" href="#">
                  			<span data-feather="file"></span>
                  			XRF
                			</a>
              			</li>
              			<li class="nav-item">
                			<a class="nav-link" href="#">
                  			<span data-feather="file"></span>
                  			FSR
                			</a>
              			</li>
              			<li class="nav-item">
							<a class="nav-link active" href="msi.html">
		                  	<span data-feather="home"></span>
		                  	MSI <span class="sr-only">(current)</span>
                			</a>
              			</li>
            		</ul>
          		</div>
        	</nav>
			<div class="col-md-9">
				<div class="msi">
					<div class="msi-foreground" id="1">
						<img onclick="edit()" src="images/front.jpg" class="foreground" id="msi-fore"/>
						<p id="fore"></p>
						
						<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
						Your browser does not support the HTML5 canvas tag.</canvas>
					</div>
					

					<div class="msi-background">
						<img class="background" id="msi-back"/>

					</div>
				</div>
			</div>
			<div class="col-md-2">
			 	<form>
					<div class="form-group">
				    	<label for="foreground">Front Image</label>
				    	<select class="form-control" id="foreground" onchange="getFore(this)">
				    		<option></option>
				      		<option>front.png</option>
						    <option>back.png</option>
				    	</select>
				  	</div>
				  	<div class="form-group">
				    	<label for="background">Background Image</label>
				    	<select class="form-control" id="background" onchange="getBack(this)">
				    		<option></option>					
				      		<option>back.png</option>
						    <option>front.png</option>
				    	</select>
				  	</div>
						<div style="height:100px; width:100px" class="back" id="back"></div>
						<div style="height:100px; width:100px" class="movestatus"></div>
						<div style="height:100px; width:100px" id="dimensions"></div>
				</form>
			</div>	
		</div>
	</body>
</html>