index.html 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .h_iframe iframe {width:995px;height:700px;}
  6. .h_iframe {width:995px;height:700px;}
  7. h1 {font-size: 2em;}
  8. h2 {font-size: 1.5em;}
  9. p {font-size: 1em;}
  10. ul {
  11. list-style-type: none;
  12. margin: 0;
  13. padding: 0;
  14. overflow: hidden;
  15. background-color: #333;
  16. width:1000px;
  17. }
  18. li {
  19. float: left;
  20. font-family: arial;
  21. font-size: 18px;
  22. }
  23. li a, .dropbtn {
  24. display: inline-block;
  25. color: white;
  26. text-align: center;
  27. padding: 14px 16px;
  28. text-decoration: none;
  29. }
  30. li a:hover, .dropdown:hover .dropbtn {
  31. background-color: red;
  32. }
  33. li.dropdown {
  34. display: inline-block;
  35. }
  36. .dropdown-content {
  37. display: none;
  38. position: absolute;
  39. background-color: #f9f9f9;
  40. min-width: 160px;
  41. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  42. z-index: 1;
  43. font-family: arial;
  44. }
  45. .dropdown-content a {
  46. color: black;
  47. padding: 12px 16px;
  48. text-decoration: none;
  49. display: block;
  50. text-align: left;
  51. }
  52. .dropdown-content a:hover {background-color: #f1f1f1;}
  53. .dropdown:hover .dropdown-content {
  54. display: block;
  55. }
  56. </style>
  57. </head>
  58. <body style="font-family: arial">
  59. <h1>Watermeter - AI on the edge</h1>
  60. <h2>An ESP32 all in neural network recognition system</h2>
  61. <ul>
  62. <li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler_roi.html';">Overview</a></li>
  63. <li class="dropdown">
  64. <a href="javascript:void(0)" class="dropbtn">Configuration</a>
  65. <div class="dropdown-content">
  66. <a href="#"onclick="document.getElementById('maincontent').src = '/prevalue_set.html';">Set preValue</a>
  67. <a href="index_configure.html">Edit Configuration</a>
  68. </div>
  69. </li>
  70. <li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler.html?full';">Watermeter</a></li>
  71. <li><a href="#"onclick="document.getElementById('maincontent').src = '/fileserver/';">File Server</a></li>
  72. <li class="dropdown">
  73. <a href="javascript:void(0)" class="dropbtn">System</a>
  74. <div class="dropdown-content">
  75. <a href="#"onclick="document.getElementById('maincontent').src = '/ota_page.html';">OTA Update</a>
  76. <a href="#"onclick="document.getElementById('maincontent').src = '/reboot_page.html';">Reboot</a>
  77. </div>
  78. </ul>
  79. <p>
  80. <div class="h_iframe">
  81. <iframe width="1020px" height="650px" name="maincontent" id ="maincontent" src="/wasserzaehler_roi.html" title="fileserver" allowfullscreen></iframe>
  82. </div>
  83. </body>
  84. </html>