index.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  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">
  6. <title>Fooplot</title>
  7. <style>
  8. #plot{
  9. width: 100%;
  10. height: 240px;
  11. top: 0;
  12. left: 0;
  13. right: 0;
  14. }
  15. .softkey {
  16. height: 1.5rem;
  17. width: 100%;
  18. background-color: grey;
  19. display: flex;
  20. justify-content: center;
  21. align-items: flex-end;
  22. position: fixed;
  23. left: 0;
  24. right: 0;
  25. bottom: 0;
  26. }
  27. .softkey-right {
  28. width: 33% ;
  29. float: right;
  30. justify-content: space-between;
  31. text-align: right;
  32. }
  33. .softkey-center {
  34. width: 34% ;
  35. float: center;
  36. justify-content: space-between;
  37. text-align: center;
  38. }
  39. .softkey-left {
  40. width: 33% ;
  41. float: left;
  42. justify-content: space-between;
  43. text-align: left;
  44. }
  45. </style>
  46. <!-- Inline scripts are forbidden in Firefox OS apps (CSP restrictions),
  47. so we use a script file. -->
  48. <script src="app.js" defer></script>
  49. <script src="fooplot.js"></script>
  50. </head>
  51. <body onload="draw_x2();">
  52. <div name="plot" id="plot" ></div>
  53. <input name="func_expr" style="width: 100%;font-size:1em;" value="x^2" autofocus>
  54. <footer class="softkey">
  55. <div class="softkey-left">Zoom in</div>
  56. <div class="softkey-center">Draw</div>
  57. <div class="softkey-right">Zoom out</div>
  58. </footer>
  59. </body>
  60. </html>