TBD

msi.html 6.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <!-- Required meta tags -->
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <!-- Link to CSS -->
  8. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  9. <link rel="stylesheet" type="text/css" href="css/style.css">
  10. <title>MSI</title>
  11. <!-- Collapse Navbar (needs some work) -->
  12. <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  13. <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>
  14. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  15. <span class="navbar-toggler-icon"></span>
  16. </button>
  17. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  18. <ul class="navbar-nav mr-auto">
  19. <li class="nav-item active">
  20. <a class="nav-link" href="#">Home</a>
  21. </li>
  22. <li class="nav-item">
  23. <a class="nav-link" href="#">Link</a>
  24. </li>
  25. <li class="nav-item dropdown">
  26. <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  27. Dropdown
  28. </a>
  29. <div class="dropdown-menu" aria-labelledby="navbarDropdown">
  30. <a class="dropdown-item" href="#">Action</a>
  31. <a class="dropdown-item" href="#">Another action</a>
  32. <div class="dropdown-divider"></div>
  33. <a class="dropdown-item" href="#">Something else here</a>
  34. </div>
  35. </li>
  36. <li class="nav-item">
  37. <a class="nav-link disabled" href="#">Disabled</a>
  38. </li>
  39. </ul>
  40. <form class="form-inline my-2 my-lg-0">
  41. <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  42. <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  43. </form>
  44. </div>
  45. </nav>
  46. </head>
  47. <body>
  48. <!-- Optional JavaScript (No se para que es esto.) -->
  49. <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  50. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  51. <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>
  52. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  53. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  54. <script type="text/javascript" src="scripts/getImages.js"></script>
  55. <!-- Image Selector -->
  56. <div class="row" id="row">
  57. <nav class="col-md-1 d-none d-md-block bg-light sidebar" style="height: 100%;">
  58. <div class="sidebar-sticky">
  59. <ul class="nav flex-column">
  60. <li class="nav-item">
  61. <a class="nav-link" href="#">
  62. <span data-feather="shopping-cart"></span>
  63. Home
  64. </a>
  65. </li>
  66. <li class="nav-item">
  67. <a class="nav-link" href="#">
  68. <span data-feather="file"></span>
  69. XRF
  70. </a>
  71. </li>
  72. <li class="nav-item">
  73. <a class="nav-link" href="#">
  74. <span data-feather="file"></span>
  75. FSR
  76. </a>
  77. </li>
  78. <li class="nav-item">
  79. <a class="nav-link active" href="msi.html">
  80. <span data-feather="home"></span>
  81. MSI <span class="sr-only">(current)</span>
  82. </a>
  83. </li>
  84. </ul>
  85. </div>
  86. </nav>
  87. <div class="col-md-9">
  88. <div class="msi">
  89. <div class="msi-foreground" id="1">
  90. <img onclick="edit()" src="images/front.jpg" class="foreground" id="msi-fore"/>
  91. <p id="fore"></p>
  92. <canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
  93. Your browser does not support the HTML5 canvas tag.</canvas>
  94. </div>
  95. <div class="msi-background">
  96. <img class="background" id="msi-back"/>
  97. </div>​
  98. </div>
  99. </div>
  100. <div class="col-md-2">
  101. <form>
  102. <div class="form-group">
  103. <label for="foreground">Front Image</label>
  104. <select class="form-control" id="foreground" onchange="getFore(this)">
  105. <option></option>
  106. <option>front.png</option>
  107. <option>back.png</option>
  108. </select>
  109. </div>
  110. <div class="form-group">
  111. <label for="background">Background Image</label>
  112. <select class="form-control" id="background" onchange="getBack(this)">
  113. <option></option>
  114. <option>back.png</option>
  115. <option>front.png</option>
  116. </select>
  117. </div>
  118. <div style="height:100px; width:100px" class="back" id="back"></div>
  119. <div style="height:100px; width:100px" class="movestatus"></div>
  120. <div style="height:100px; width:100px" id="dimensions"></div>
  121. </form>
  122. </div>
  123. </div>
  124. </body>
  125. </html>