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.

224 lines
7.5 KiB

5 months ago
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Internship</title>
  7. <link
  8. rel="stylesheet"
  9. href="node_modules/bootstrap/dist/css/bootstrap.min.css"
  10. />
  11. <link
  12. rel="stylesheet"
  13. href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
  14. />
  15. <link
  16. rel="stylesheet"
  17. type="text/css"
  18. href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
  19. />
  20. </head>
  21. <body>
  22. <div class="container-fluid">
  23. <div class="row gx-0">
  24. <div class="col-6">
  25. <nav class="navbar navbar-expand-lg text-bg-secondary">
  26. <div class="container-fluid">
  27. <a
  28. class="navbar-brand active text-light"
  29. style="padding-bottom: 0.8%"
  30. >Text editor</a
  31. >
  32. <button
  33. type="button"
  34. class="btn btn-primary"
  35. id="runBtn"
  36. onclick="run()"
  37. >
  38. <i class="fa fa-play pb-1" style="font-size: 15px"></i>
  39. </button>
  40. </div>
  41. </nav>
  42. <div class="form-group">
  43. <textarea
  44. id="firstInput"
  45. class="form-control rounded-0"
  46. rows="19"
  47. placeholder="Enter your text"
  48. data-mdb-perfect-scrollbar-init
  49. ></textarea>
  50. </div>
  51. <div class="form-group mb-2 mt-2">
  52. <h4 class="">Input 2</h4>
  53. <textarea
  54. type="text"
  55. class="form-control rounded-0"
  56. rows="3"
  57. style="height: 100%"
  58. id="secondInput"
  59. placeholder="Enter your text"
  60. ></textarea>
  61. </div>
  62. <div class="form-group">
  63. <button
  64. class="btn btn-secondary btn-sm dropdown-toggle"
  65. type="button"
  66. data-bs-toggle="collapse"
  67. data-bs-target="#collapseExample"
  68. aria-expanded="false"
  69. aria-controls="collapseExample"
  70. >
  71. Options
  72. </button>
  73. <div class="collapse" id="collapseExample">
  74. <div class="card card-body mt-2 rounded-0">
  75. <div class="row">
  76. <div class="col-sm-2">
  77. <div class="form-group">
  78. <div class="form-check">
  79. <input
  80. class="form-check-input"
  81. type="checkbox"
  82. value="1"
  83. id="checkbox1"
  84. />
  85. <label class="form-check-label" for="checkbox1">
  86. 1
  87. </label>
  88. </div>
  89. <div class="form-check">
  90. <input
  91. class="form-check-input"
  92. type="checkbox"
  93. value="2"
  94. id="checkbox2"
  95. />
  96. <label class="form-check-label" for="checkbox2">
  97. 2
  98. </label>
  99. </div>
  100. <div class="form-check">
  101. <input
  102. class="form-check-input"
  103. type="checkbox"
  104. value="3"
  105. id="checkbox3"
  106. />
  107. <label class="form-check-label" for="checkbox3">
  108. 3
  109. </label>
  110. </div>
  111. </div>
  112. </div>
  113. <div class="col-sm-4">
  114. <div class="form-group">
  115. <div class="form-check">
  116. <input
  117. class="form-check-input"
  118. type="checkbox"
  119. value="4"
  120. id="checkbox4"
  121. />
  122. <label class="form-check-label" for="checkbox4">
  123. 4
  124. </label>
  125. </div>
  126. <div class="form-check">
  127. <input
  128. class="form-check-input"
  129. type="checkbox"
  130. value="5"
  131. id="checkbox5"
  132. />
  133. <label class="form-check-label" for="checkbox5">
  134. 5
  135. </label>
  136. </div>
  137. <div class="form-check">
  138. <input
  139. class="form-check-input"
  140. type="checkbox"
  141. value="6"
  142. id="checkbox6"
  143. />
  144. <label class="form-check-label" for="checkbox6">
  145. 6
  146. </label>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. <div class="col-6">
  156. <nav class="navbar navbar-expand-lg text-bg-secondary">
  157. <div class="container-fluid">
  158. <button
  159. class="navbar-toggler"
  160. type="button"
  161. data-bs-toggle="collapse"
  162. data-bs-target="#navbarNav"
  163. aria-controls="navbarNav"
  164. aria-expanded="false"
  165. aria-label="Toggle navigation"
  166. >
  167. <span class="navbar-toggler-icon"></span>
  168. </button>
  169. <div class="collapse navbar-collapse" id="navbarNav">
  170. <ul class="navbar-nav nav-underline">
  171. <li class="nav-item">
  172. <a
  173. class="nav-link text-light active rightNav"
  174. aria-current="page"
  175. href="#"
  176. id="output"
  177. >Output</a
  178. >
  179. </li>
  180. <li class="nav-item">
  181. <a
  182. class="nav-link text-light rightNav"
  183. href="#"
  184. id="simulator"
  185. >Simulator</a
  186. >
  187. </li>
  188. <li class="nav-item">
  189. <a class="nav-link text-light rightNav" href="#" id="graph"
  190. >Graph</a
  191. >
  192. </li>
  193. </ul>
  194. </div>
  195. </div>
  196. </nav>
  197. <div class="form-group">
  198. <textarea
  199. id="scrollableOutput"
  200. class="form-control scrollable-textarea vh-100 rounded-0"
  201. style="max-height: calc(100vh - 58px)"
  202. placeholder="Output"
  203. readonly
  204. ></textarea>
  205. </div>
  206. </div>
  207. </div>
  208. </div>
  209. <script
  210. src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"
  211. integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/"
  212. crossorigin="anonymous"
  213. ></script>
  214. <script
  215. type="text/javascript"
  216. src="https://cdn.jsdelivr.net/npm/toastify-js"
  217. ></script>
  218. <script src="index.js"></script>
  219. </body>
  220. </html>