The esp8266 portion of the project
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

108 lines
5.1 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Home</title>
  5. <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
  6. <link rel="icon" type="image/png" sizes="144x144" href="/favicon-144x144.png">
  7. <link rel="icon" type="image/png" sizes="48x48" href="/favicon.ico">
  8. <link rel="manifest" href="manifest.json">
  9. <meta name="theme-color" content="#00878f">
  10. <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
  11. <meta charset="utf-8">
  12. <script src="loadMenu.js" defer></script>
  13. <script src="main.js" defer></script>
  14. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  15. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  16. <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  17. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
  18. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/esm/popper.js" type="module"></script>
  19. <script src="https://cdnjs.cloudflare.com/ajax/libs/sprintf/1.1.2/sprintf.min.js"></script>
  20. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">
  21. <link href='main.css' rel='stylesheet' type='text/css'>
  22. <link rel="stylesheet" href="colors.css">
  23. </head>
  24. <body>
  25. <!-- <iframe src="menu.html" width="90%"></iframe> -->
  26. <div id="navigation"></div>
  27. <div class="container">
  28. <div class="shadow-lg p-3 mb-5 bg-white rounded">
  29. <header>
  30. <div class="container">
  31. <div class="row">
  32. <div class="col">
  33. <div class="pt-5 mt-3">
  34. <h2 class="display-4 text-ternary text-center"> Welcome </h2>
  35. <p class="text-center">Welcome to the planted aquarium controller.</p>
  36. </div>
  37. </div>
  38. </div>
  39. </div>
  40. </header>
  41. <section>
  42. <div class="container bg-ternary shadow-sm p-3 mb-2 rounded">
  43. <div class="row mb-3">
  44. <div class="col">
  45. <h2 class="text-white text-center display-4">Settings at a glance</h2>
  46. </div>
  47. </div>
  48. <div class="row" id="content-row">
  49. <div class="col-md">
  50. <section id="mySection "></section>
  51. <div class="card mb-3 text-center card-form rounded mx-auto shadow-sm ">
  52. <h2 class="card-header text-center text-ternary">Ballast #1</h2>
  53. <div class="card-body rounded">
  54. <div class="card-text" id="ballast1">
  55. </div>
  56. </div>
  57. </div>
  58. </div>
  59. <div class="col-md">
  60. <div class="card mb-3 text-center card-form rounded mx-auto shadow-sm">
  61. <h2 class="card-header text-center text-ternary">Ballast #2</h2>
  62. <div class="card-body rounded">
  63. <div class="card-text" id="ballast2">
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. <div class="col-md">
  69. <div class="card mb-3 text-center card-form rounded mx-auto shadow-sm">
  70. <h2 class="card-header text-center text-ternary">Ballast #3</h2>
  71. <div class="card-body rounded">
  72. <div class="card-text" id="ballast3">
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. </section>
  80. <section>
  81. <div class="container">
  82. <div class="row">
  83. <div class="col">
  84. <div class="pretty p-switch ">
  85. <input type="checkbox" id="temperatures-switch" />
  86. <div class="state p-primary">
  87. <label>Show temperature readings</label>
  88. </div>
  89. </div>
  90. <p id="temperature"></p>
  91. <noscript>No javascript</noscript>
  92. </div>
  93. </div>
  94. </div>
  95. </section>
  96. </div>
  97. </div>
  98. </body>
  99. </html>