index_configure.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="icon" href="data:,">
  5. <title>jomjol - AI on the edge</title>
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <style>
  9. .h_iframe iframe {width:995px;height:765px;}
  10. .h_iframe {width:995px;height:765px;}
  11. h1 {font-size: 2em; margin-block-end: 0.3em;}
  12. h2 {font-size: 1.5em;margin-block-start: 0.3em;}
  13. h3 {font-size: 1.2em;}
  14. p {font-size: 1em;}
  15. ul {
  16. list-style-type: none;
  17. margin: 0;
  18. padding: 0;
  19. overflow: hidden;
  20. background-color: #333;
  21. width:1000px;
  22. }
  23. li {
  24. float: left;
  25. font-family: arial;
  26. font-size: 18px;
  27. }
  28. li a, .dropbtn {
  29. display: inline-block;
  30. color: white;
  31. text-align: center;
  32. padding: 14px 16px;
  33. text-decoration: none;
  34. }
  35. li a:hover, .dropdown:hover .dropbtn {
  36. background-color: red;
  37. }
  38. li.dropdown {
  39. display: inline-block;
  40. }
  41. .dropdown-content {
  42. display: none;
  43. position: absolute;
  44. background-color: #f9f9f9;
  45. min-width: 160px;
  46. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  47. z-index: 1;
  48. font-family: arial;
  49. }
  50. .dropdown-content a {
  51. color: black;
  52. padding: 12px 16px;
  53. text-decoration: none;
  54. display: block;
  55. text-align: left;
  56. }
  57. .dropdown-content a:hover {background-color: #f1f1f1;}
  58. .dropdown:hover .dropdown-content {
  59. display: block;
  60. }
  61. </style>
  62. <body style="font-family: arial">
  63. <h1>Configure Watermeter</h1>
  64. <ul>
  65. <li aria-current="page"><a href="index.html">Main Page</a>
  66. <li><a href="#"onclick="document.getElementById('maincontent').src = 'edit_config_param.html';">Configuration</a></li>
  67. <li class="dropdown">
  68. <a href="javascript:void(0)" class="dropbtn">Alignment</a>
  69. <div class="dropdown-content">
  70. <a href="#"onclick="document.getElementById('maincontent').src = 'edit_reference.html';">Reference Image</a>
  71. <a href="#"onclick="document.getElementById('maincontent').src = 'edit_alignment.html';">Alignment Marks</a>
  72. </div>
  73. </li>
  74. <li class="dropdown">
  75. <a href="javascript:void(0)" class="dropbtn">Regions Of Interest (ROI)</a>
  76. <div class="dropdown-content">
  77. <a href="#"onclick="document.getElementById('maincontent').src = 'edit_digits.html';">Digital ROIs</a>
  78. <a href="#"onclick="document.getElementById('maincontent').src = 'edit_analog.html';">Analog ROIs</a>
  79. </div>
  80. </li>
  81. </ul>
  82. <p>
  83. <div class="h_iframe">
  84. <iframe width="1020px" height="650px" name="maincontent" id ="maincontent" src="edit_config_param.html" title="fileserver"></iframe>
  85. </div>
  86. </body>
  87. </html>