index.html 2.7 KB

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