index.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="icon" href="favicon.ico" type="image/x-icon">
  5. <title>AI on the edge</title>
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <!-- <link rel="stylesheet" href="style.css" type="text/css" > -->
  9. <style>
  10. /* Older Firmware versions (11.2.0 and older) do not support css files, therefore we need to keep it integrated for now! */
  11. body, html {
  12. width: 100%;
  13. height: 100%;
  14. min-height: 800px;
  15. margin: 0px 0px 0px 2px;
  16. padding: 0;
  17. font-family: arial;
  18. width: fit-content;
  19. }
  20. .main {
  21. display: flex;
  22. width: 100%;
  23. height: 100%;
  24. flex-direction: column;
  25. overflow: hidden;
  26. }
  27. .iframe {
  28. flex-grow: 1;
  29. margin: 5px 7px 4px 0px;
  30. padding: 0;
  31. border: 2px solid black;
  32. }
  33. h1 {
  34. font-size: 2em;
  35. margin-block-end: 0.3em;
  36. }
  37. h2 {
  38. font-size: 1.5em;
  39. margin-block-start: 0.3em;
  40. }
  41. h3 {
  42. font-size: 1.2em;
  43. }
  44. p {
  45. font-size: 1em;
  46. }
  47. ul {
  48. list-style-type: none;
  49. margin: 0;
  50. padding: 0;
  51. overflow: hidden;
  52. background-color: #333;
  53. width:1000px;
  54. }
  55. li {
  56. float: left;
  57. font-family: arial;
  58. font-size: 18px;
  59. }
  60. li a, .dropbtn {
  61. display: inline-block;
  62. color: white;
  63. text-align: center;
  64. padding: 14px 16px;
  65. text-decoration: none;
  66. }
  67. li a:hover, .dropdown:hover .dropbtn {
  68. background-color: red;
  69. }
  70. li.dropdown {
  71. display: inline-block;
  72. }
  73. .dropdown-content {
  74. display: none;
  75. position: absolute;
  76. background-color: #f9f9f9;
  77. min-width: 160px;
  78. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  79. z-index: 1;
  80. font-family: arial;
  81. }
  82. .dropdown-content a {
  83. color: black;
  84. padding: 12px 16px;
  85. text-decoration: none;
  86. display: block;
  87. text-align: left;
  88. }
  89. .dropdown-content a:hover {
  90. color: white;
  91. background-color: red;
  92. }
  93. .dropdown:hover .dropdown-content {
  94. display: block;
  95. }
  96. </style>
  97. <script type="text/javascript" src="common.js"></script>
  98. <script type="text/javascript" src="gethost.js"></script>
  99. <script type="text/javascript" src="readconfigcommon.js"></script>
  100. <script type="text/javascript" src="readconfigparam.js"></script>
  101. </head>
  102. <body>
  103. <div class="main">
  104. <table style="border: none">
  105. <tr><td style="padding-right: 10px;"><img src="favicon.ico"></td>
  106. <td><h1 id="id_title"> Digitizer - AI on the edge</h1>
  107. <h2>An ESP32 all inclusive neural network recognition system for meter digitalization</h2>
  108. </td></tr>
  109. </table>
  110. <ul>
  111. <li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler_roi.html';">Overview</a></li>
  112. <li class="dropdown">
  113. <a href="javascript:void(0)" class="dropbtn">Configuration</a>
  114. <div class="dropdown-content">
  115. <a href="#"onclick="document.getElementById('maincontent').src = '/prevalue_set.html';">Set Previous Value</a>
  116. <a href="index_configure.html">Edit Configuration</a>
  117. </div>
  118. </li>
  119. <li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler.html?full';">Recognition</a></li>
  120. <li><a href="#"onclick="document.getElementById('maincontent').src = '/fileserver/';">File Server</a></li>
  121. <li class="dropdown">
  122. <a href="javascript:void(0)" class="dropbtn">System</a>
  123. <div class="dropdown-content">
  124. <a href="#"onclick="document.getElementById('maincontent').src = '/backup.html';">Backup/Restore</a>
  125. <a href="#"onclick="document.getElementById('maincontent').src = '/ota_page.html';">OTA Update</a>
  126. <a href="#"onclick="document.getElementById('maincontent').src = '/fileserver/log/message/?readonly=true';">Log Viewer</a>
  127. <a href="#"onclick="document.getElementById('maincontent').src = '/reboot_page.html';">Reboot</a>
  128. <a href="#"onclick="document.getElementById('maincontent').src = '/info.html';">Info</a>
  129. </div>
  130. </li>
  131. </ul>
  132. <iframe name="maincontent" class="iframe" id="maincontent" src="wasserzaehler_roi.html"></iframe>
  133. <script type="text/javascript">
  134. LoadHostname();
  135. </script>
  136. </div>
  137. </body>
  138. </html>