index.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
  6. <title>NodeMCU WebIDE</title>
  7. <style>
  8. body {
  9. overflow: hidden;
  10. color: #EEE;
  11. background-color: #6B89C8;
  12. }
  13. #statusbar {
  14. position: absolute;
  15. top: 0;
  16. left: 0;
  17. right: 0;
  18. height: 24px;
  19. padding: 0;
  20. background-color: #2B4988;
  21. }
  22. #localStatus {
  23. display: inline;
  24. margin: 0;
  25. height: 24px;
  26. background-color: #7B7;
  27. }
  28. #remoteStatus {
  29. display: inline;
  30. margin: 0;
  31. height: 24px;
  32. background-color: #B7B;
  33. }
  34. #toolbar {
  35. position: absolute;
  36. top: 24px;
  37. left: 0;
  38. right: 0;
  39. height: 30px;
  40. background-color: #2B4988;
  41. }
  42. #filetoolbar {
  43. position: absolute;
  44. top: 54px;
  45. left: 0;
  46. width: 120px;
  47. height: 24px;
  48. text-align: right;
  49. background-color: #4B69A8;
  50. }
  51. #filelist {
  52. position: absolute;
  53. top: 78px;
  54. bottom: 0;
  55. left: 0;
  56. width: 120px;
  57. }
  58. #editor {
  59. position: absolute;
  60. top: 54px;
  61. bottom: 0;
  62. left: 120px;
  63. right: 0;
  64. background-color: #FFF;
  65. }
  66. .header {
  67. display: inline;
  68. padding: 4px;
  69. font-family: sans-serif;
  70. font-size: 20px;
  71. font-weight: 900;
  72. }
  73. button {
  74. background-color: Transparent;
  75. border: none;
  76. padding: 2px;
  77. width: 20px;
  78. height: 20px;
  79. }
  80. button:hover {
  81. background-color: #1B3978;
  82. }
  83. .fileItem {
  84. display: block;
  85. padding: 4px;
  86. width: 112px;
  87. font-family: sans-serif;
  88. font-size: 12px;
  89. font-weight: 500;
  90. }
  91. .fileItem:hover {
  92. background-color: #BBB;
  93. }
  94. .selected {
  95. background-color: #888;
  96. }
  97. .selected:hover {
  98. background-color: #AAA;
  99. }
  100. .ace_editor {
  101. top: 0;
  102. bottom: 0;
  103. left: 0;
  104. right: 0;
  105. }
  106. /* Generated by IcoMoon.io */
  107. /* https://icomoon.io/app/#/select */
  108. /* Library: IcoMoon - Free, size: 16px, color: #FFFFFF */
  109. /* file:file-text2, save: floppy-disk, undo: undo2, loading: hour-glass, */
  110. /* preview: eye, new:file-empty, rename: terminal, delete: cross */
  111. .icon {
  112. display: inline-block;
  113. vertical-align: text-bottom;
  114. height: 16px;
  115. width: 16px;
  116. }
  117. .icon-file {
  118. background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjM0MSAzLjU3OWMtMC4zNDctMC40NzMtMC44MzEtMS4wMjctMS4zNjItMS41NThzLTEuMDg1LTEuMDE1LTEuNTU4LTEuMzYyYy0wLjgwNi0wLjU5MS0xLjE5Ny0wLjY1OS0xLjQyMS0wLjY1OWgtNy43NWMtMC42ODkgMC0xLjI1IDAuNTYxLTEuMjUgMS4yNXYxMy41YzAgMC42ODkgMC41NjEgMS4yNSAxLjI1IDEuMjVoMTEuNWMwLjY4OSAwIDEuMjUtMC41NjEgMS4yNS0xLjI1di05Ljc1YzAtMC4yMjQtMC4wNjgtMC42MTUtMC42NTktMS40MjF6TTEyLjI3MSAyLjcyOWMwLjQ4IDAuNDggMC44NTYgMC45MTIgMS4xMzQgMS4yNzFoLTIuNDA2di0yLjQwNWMwLjM1OSAwLjI3OCAwLjc5MiAwLjY1NCAxLjI3MSAxLjEzNHpNMTQgMTQuNzVjMCAwLjEzNi0wLjExNCAwLjI1LTAuMjUgMC4yNWgtMTEuNWMtMC4xMzUgMC0wLjI1LTAuMTE0LTAuMjUtMC4yNXYtMTMuNWMwLTAuMTM1IDAuMTE1LTAuMjUgMC4yNS0wLjI1IDAgMCA3Ljc0OS0wIDcuNzUgMHYzLjVjMCAwLjI3NiAwLjIyNCAwLjUgMC41IDAuNWgzLjV2OS43NXoiPjwvcGF0aD4KPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTExLjUgMTNoLTdjLTAuMjc2IDAtMC41LTAuMjI0LTAuNS0wLjVzMC4yMjQtMC41IDAuNS0wLjVoN2MwLjI3NiAwIDAuNSAwLjIyNCAwLjUgMC41cy0wLjIyNCAwLjUtMC41IDAuNXoiPjwvcGF0aD4KPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTExLjUgMTFoLTdjLTAuMjc2IDAtMC41LTAuMjI0LTAuNS0wLjVzMC4yMjQtMC41IDAuNS0wLjVoN2MwLjI3NiAwIDAuNSAwLjIyNCAwLjUgMC41cy0wLjIyNCAwLjUtMC41IDAuNXoiPjwvcGF0aD4KPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTExLjUgOWgtN2MtMC4yNzYgMC0wLjUtMC4yMjQtMC41LTAuNXMwLjIyNC0wLjUgMC41LTAuNWg3YzAuMjc2IDAgMC41IDAuMjI0IDAuNSAwLjVzLTAuMjI0IDAuNS0wLjUgMC41eiI+PC9wYXRoPgo8L3N2Zz4=");
  119. }
  120. .icon-save {
  121. background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0IDBoLTE0djE2aDE2di0xNGwtMi0yek04IDJoMnY0aC0ydi00ek0xNCAxNGgtMTJ2LTEyaDF2NWg5di01aDEuMTcybDAuODI4IDAuODI4djExLjE3MnoiPjwvcGF0aD4KPC9zdmc+");
  122. }
  123. .icon-undo {
  124. background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTExLjkwNCAxNmMxLjc3Ny0zLjIxOSAyLjA3Ni04LjEzLTQuOTA0LTcuOTY2djMuOTY2bC02LTYgNi02djMuODgxYzguMzU5LTAuMjE4IDkuMjkgNy4zNzggNC45MDQgMTIuMTE5eiI+PC9wYXRoPgo8L3N2Zz4=");
  125. }
  126. .icon-loading {
  127. background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTExLjM5IDhjMi4xNTItMS4zNjUgMy42MS0zLjk4OCAzLjYxLTcgMC0wLjMzOS0wLjAxOS0wLjY3Mi0wLjA1NC0xaC0xMy44OTFjLTAuMDM2IDAuMzI4LTAuMDU0IDAuNjYxLTAuMDU0IDEgMCAzLjAxMiAxLjQ1NyA1LjYzNSAzLjYwOSA3LTIuMTUyIDEuMzY1LTMuNjA5IDMuOTg4LTMuNjA5IDcgMCAwLjMzOSAwLjAxOSAwLjY3MiAwLjA1NCAxaDEzLjg5MWMwLjAzNi0wLjMyOCAwLjA1NC0wLjY2MSAwLjA1NC0xIDAtMy4wMTItMS40NTctNS42MzUtMy42MDktN3pNMi41IDE1YzAtMi45MjEgMS4yNTMtNS4zOTcgMy41LTYuMjE0di0xLjU3MmMtMi4yNDctMC44MTctMy41LTMuMjk0LTMuNS02LjIxNHYwaDExYzAgMi45MjEtMS4yNTMgNS4zOTctMy41IDYuMjE0djEuNTcyYzIuMjQ3IDAuODE3IDMuNSAzLjI5NCAzLjUgNi4yMTRoLTExek05LjY4MiAxMC40NjJjLTEuMTItMC42MzUtMS4xODEtMS40NTktMS4xODItMS45NTl2LTEuMDA0YzAtMC41IDAuMDU5LTEuMzI3IDEuMTg0LTEuOTYzIDAuNjAyLTAuMzQ5IDEuMTIyLTAuODggMS41MTYtMS41MzdoLTYuNGMwLjM5NSAwLjY1NyAwLjkxNiAxLjE4OCAxLjUxOCAxLjUzOCAxLjEyIDAuNjM1IDEuMTgxIDEuNDU5IDEuMTgyIDEuOTU5djEuMDA0YzAgMC41LTAuMDU5IDEuMzI3LTEuMTg0IDEuOTYzLTEuMTM1IDAuNjU5LTEuOTggMS45NjQtMi4yMzYgMy41MzdoNy44MzljLTAuMjU2LTEuNTc0LTEuMTAyLTIuODc5LTIuMjM4LTMuNTM4eiI+PC9wYXRoPgo8L3N2Zz4=");
  128. }
  129. .icon-preview {
  130. background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTggM2MtMy40ODkgMC02LjUxNCAyLjAzMi04IDUgMS40ODYgMi45NjggNC41MTEgNSA4IDVzNi41MTQtMi4wMzIgOC01Yy0xLjQ4Ni0yLjk2OC00LjUxMS01LTgtNXpNMTEuOTQ1IDUuNjUyYzAuOTQgMC42IDEuNzM3IDEuNDAzIDIuMzM1IDIuMzQ4LTAuNTk4IDAuOTQ2LTEuMzk1IDEuNzQ5LTIuMzM1IDIuMzQ4LTEuMTgxIDAuNzUzLTIuNTQ1IDEuMTUyLTMuOTQ0IDEuMTUycy0yLjc2My0wLjM5OC0zLjk0NS0xLjE1MmMtMC45NC0wLjYtMS43MzctMS40MDMtMi4zMzUtMi4zNDggMC41OTgtMC45NDYgMS4zOTUtMS43NDkgMi4zMzUtMi4zNDggMC4wNjEtMC4wMzkgMC4xMjMtMC4wNzcgMC4xODUtMC4xMTQtMC4xNTYgMC40MjctMC4yNDEgMC44ODgtMC4yNDEgMS4zNjkgMCAyLjIwOSAxLjc5MSA0IDQgNHM0LTEuNzkxIDQtNGMwLTAuNDgxLTAuMDg1LTAuOTQyLTAuMjQxLTEuMzY5IDAuMDYyIDAuMDM3IDAuMTI0IDAuMDc1IDAuMTg1IDAuMTE0djB6TTggNi41YzAgMC44MjgtMC42NzIgMS41LTEuNSAxLjVzLTEuNS0wLjY3Mi0xLjUtMS41IDAuNjcyLTEuNSAxLjUtMS41IDEuNSAwLjY3MiAxLjUgMS41eiI+PC9wYXRoPgo8L3N2Zz4=");
  131. }
  132. .icon-new {
  133. background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjM0MSAzLjU3OWMtMC4zNDctMC40NzMtMC44MzEtMS4wMjctMS4zNjItMS41NThzLTEuMDg1LTEuMDE1LTEuNTU4LTEuMzYyYy0wLjgwNi0wLjU5MS0xLjE5Ny0wLjY1OS0xLjQyMS0wLjY1OWgtNy43NWMtMC42ODkgMC0xLjI1IDAuNTYxLTEuMjUgMS4yNXYxMy41YzAgMC42ODkgMC41NjEgMS4yNSAxLjI1IDEuMjVoMTEuNWMwLjY4OSAwIDEuMjUtMC41NjEgMS4yNS0xLjI1di05Ljc1YzAtMC4yMjQtMC4wNjgtMC42MTUtMC42NTktMS40MjF6TTEyLjI3MSAyLjcyOWMwLjQ4IDAuNDggMC44NTYgMC45MTIgMS4xMzQgMS4yNzFoLTIuNDA2di0yLjQwNWMwLjM1OSAwLjI3OCAwLjc5MiAwLjY1NCAxLjI3MSAxLjEzNHpNMTQgMTQuNzVjMCAwLjEzNi0wLjExNCAwLjI1LTAuMjUgMC4yNWgtMTEuNWMtMC4xMzUgMC0wLjI1LTAuMTE0LTAuMjUtMC4yNXYtMTMuNWMwLTAuMTM1IDAuMTE1LTAuMjUgMC4yNS0wLjI1IDAgMCA3Ljc0OS0wIDcuNzUgMHYzLjVjMCAwLjI3NiAwLjIyNCAwLjUgMC41IDAuNWgzLjV2OS43NXoiPjwvcGF0aD4KPC9zdmc+");
  134. }
  135. .icon-rename {
  136. background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMXYxNGgxNnYtMTRoLTE2ek0xNSAxNGgtMTR2LTEyaDE0djEyek0xNCAzaC0xMnYxMGgxMnYtMTB6TTcgOGgtMXYxaC0xdjFoLTF2LTFoMXYtMWgxdi0xaC0xdi0xaC0xdi0xaDF2MWgxdjFoMXYxek0xMSAxMGgtM3YtMWgzdjF6Ij48L3BhdGg+Cjwvc3ZnPg==");
  137. }
  138. .icon-delete {
  139. background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE1Ljg1NCAxMi44NTRjLTAtMC0wLTAtMC0wbC00Ljg1NC00Ljg1NCA0Ljg1NC00Ljg1NGMwLTAgMC0wIDAtMCAwLjA1Mi0wLjA1MiAwLjA5MC0wLjExMyAwLjExNC0wLjE3OCAwLjA2Ni0wLjE3OCAwLjAyOC0wLjM4Ni0wLjExNC0wLjUyOWwtMi4yOTMtMi4yOTNjLTAuMTQzLTAuMTQzLTAuMzUxLTAuMTgxLTAuNTI5LTAuMTE0LTAuMDY1IDAuMDI0LTAuMTI2IDAuMDYyLTAuMTc4IDAuMTE0IDAgMC0wIDAtMCAwbC00Ljg1NCA0Ljg1NC00Ljg1NC00Ljg1NGMtMC0wLTAtMC0wLTAtMC4wNTItMC4wNTItMC4xMTMtMC4wOTAtMC4xNzgtMC4xMTQtMC4xNzgtMC4wNjYtMC4zODYtMC4wMjktMC41MjkgMC4xMTRsLTIuMjkzIDIuMjkzYy0wLjE0MyAwLjE0My0wLjE4MSAwLjM1MS0wLjExNCAwLjUyOSAwLjAyNCAwLjA2NSAwLjA2MiAwLjEyNiAwLjExNCAwLjE3OCAwIDAgMCAwIDAgMGw0Ljg1NCA0Ljg1NC00Ljg1NCA0Ljg1NGMtMCAwLTAgMC0wIDAtMC4wNTIgMC4wNTItMC4wOTAgMC4xMTMtMC4xMTQgMC4xNzgtMC4wNjYgMC4xNzgtMC4wMjkgMC4zODYgMC4xMTQgMC41MjlsMi4yOTMgMi4yOTNjMC4xNDMgMC4xNDMgMC4zNTEgMC4xODEgMC41MjkgMC4xMTQgMC4wNjUtMC4wMjQgMC4xMjYtMC4wNjIgMC4xNzgtMC4xMTQgMC0wIDAtMCAwLTBsNC44NTQtNC44NTQgNC44NTQgNC44NTRjMCAwIDAgMCAwIDAgMC4wNTIgMC4wNTIgMC4xMTMgMC4wOTAgMC4xNzggMC4xMTQgMC4xNzggMC4wNjYgMC4zODYgMC4wMjkgMC41MjktMC4xMTRsMi4yOTMtMi4yOTNjMC4xNDMtMC4xNDMgMC4xODEtMC4zNTEgMC4xMTQtMC41MjktMC4wMjQtMC4wNjUtMC4wNjItMC4xMjYtMC4xMTQtMC4xNzh6Ij48L3BhdGg+Cjwvc3ZnPg==");
  140. }
  141. /* CodeMirror */
  142. .CodeMirror{font-family:monospace;height:100%;color:#000}.CodeMirror-lines{padding:4px 0}.CodeMirror pre{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-animate-fat-cursor{width:auto;border:0;-webkit-animation:blink 1.06s steps(1) infinite;-moz-animation:blink 1.06s steps(1) infinite;animation:blink 1.06s steps(1) infinite;background-color:#7e7}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:-20px;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-invalidchar,.cm-s-default .cm-error{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0f0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#f22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:#fff}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-30px;margin-right:-30px;padding-bottom:30px;height:100%;outline:0;position:relative}.CodeMirror-sizer{position:relative;border-right:30px solid transparent}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{position:absolute;z-index:6;display:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-30px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important;-webkit-user-select:none;-moz-user-select:none;user-select:none}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:none;font-variant-ligatures:none}.CodeMirror-wrap pre{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;overflow:auto}.CodeMirror-code{outline:0}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}.CodeMirror-focused div.CodeMirror-cursors,div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected,.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background:#ffa;background:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:''}span.CodeMirror-selectedtext{background:0 0}
  143. /* lint.css */
  144. .CodeMirror-lint-markers{width:16px}.CodeMirror-lint-tooltip{background-color:#ffd;border:1px solid #000;border-radius:4px;color:#000;font-family:monospace;font-size:10pt;overflow:hidden;padding:2px 5px;position:fixed;white-space:pre;white-space:pre-wrap;z-index:100;max-width:600px;opacity:0;transition:opacity .4s;-moz-transition:opacity .4s;-webkit-transition:opacity .4s;-o-transition:opacity .4s;-ms-transition:opacity .4s}.CodeMirror-lint-mark-error,.CodeMirror-lint-mark-warning{background-position:left bottom;background-repeat:repeat-x}.CodeMirror-lint-mark-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==)}.CodeMirror-lint-mark-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=)}.CodeMirror-lint-marker-error,.CodeMirror-lint-marker-warning{background-position:center center;background-repeat:no-repeat;cursor:pointer;display:inline-block;height:16px;width:16px;vertical-align:middle;position:relative}.CodeMirror-lint-message-error,.CodeMirror-lint-message-warning{padding-left:18px;background-position:top left;background-repeat:no-repeat}.CodeMirror-lint-marker-error,.CodeMirror-lint-message-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=)}.CodeMirror-lint-marker-warning,.CodeMirror-lint-message-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=)}.CodeMirror-lint-marker-multiple{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:right bottom;width:100%;height:100%}
  145. /* codemirror extra */
  146. .CodeMirror-focused .cm-matchhighlight {
  147. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
  148. background-position: bottom;
  149. background-repeat: repeat-x;
  150. }
  151. .cm-matchhighlight {background-color: lightgreen}
  152. .CodeMirror-selection-highlight-scrollbar {background-color: green}
  153. .cm-trailingspace {
  154. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==);
  155. background-position: bottom left;
  156. background-repeat: repeat-x;
  157. }
  158. </style>
  159. </head>
  160. <body ng-app="webIDEApp">
  161. <div id="statusbar">
  162. <div id="localStatus"></div>
  163. <div id="remoteStatus"></div>
  164. </div>
  165. <div id="toolbar">
  166. <div class="header">NodeMCU WebIDE</div>
  167. <button id="undo" alt="Undo"><span class="icon icon-undo"></span></button>
  168. <button id="save" alt="Save"><span class="icon icon-save"></span></button>
  169. <button id="preview" alt="Preview"><span class="icon icon-preview"></span></button>
  170. </div>
  171. <div id="filetoolbar">
  172. <button id="new" alt="New file"><span class="icon icon-new"></span></button>
  173. <button id="rename" alt="Rename selected file"><span class="icon icon-rename"></span></button>
  174. <button id="delete" alt="Delete selected file"><span class="icon icon-delete"></span></button>
  175. </div>
  176. <div id="filelist"></div>
  177. <div id="editor"></div>
  178. <script type="text/javascript" src="index.js"></script>
  179. </body>
  180. </html>