index.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>why I like trees</title>
  5. <script type="text/javascript" src="whyiliketrees.js"></script>
  6. <style>
  7. html {
  8. color: #eeeeee;
  9. font-family: "sans serif";
  10. background-color: #222222;
  11. }
  12. body {
  13. width: 600px;
  14. height: 100%;
  15. margin: auto;
  16. margin-top: 50px;
  17. }
  18. div#main {
  19. }
  20. canvas#canvas {
  21. border-width: 1px;
  22. border-style: solid;
  23. border-color: transparent;
  24. display: block;
  25. margin: auto;
  26. }
  27. textarea#console {
  28. overflow: hidden;
  29. background-color: inherit;
  30. font-family: inherit;
  31. font-size: 12px;
  32. color: #cccccc;
  33. border-width: 1px;
  34. border-style: solid;
  35. border-color: #333333;
  36. width: 100%;
  37. height: 54px;
  38. display: block;
  39. margin: auto;
  40. margin-top: 10px;
  41. }
  42. div.inf {
  43. width: 50%;
  44. height: 14px;
  45. background-color: inherit;
  46. font-family: inherit;
  47. font-size: 12px;
  48. color: #777777;
  49. margin: auto;
  50. margin-bottom: 2px;
  51. }
  52. div.controls {
  53. font-family: inherit;
  54. font-size: 11px;
  55. text-align: center;
  56. color: #777777;
  57. }
  58. div.inf1 {
  59. float: left;
  60. width: 60%;
  61. }
  62. div.inf2 {
  63. overflow: hidden;
  64. width: 40%;
  65. text-align: right;
  66. }
  67. </style>
  68. </head>
  69. <html>
  70. <body>
  71. <div id="main">
  72. <div class="inf inf1" id="info1"></div>
  73. <div class="inf inf2" id="info2"></div>
  74. <div class="inf inf1" id="info3"></div>
  75. <div class="inf inf2" id="info4"></div>
  76. <div class="inf inf1" id="info5"></div>
  77. <div class="inf inf2" id="info6"></div>
  78. <canvas id="canvas"></canvas>
  79. <textarea readonly id="console"></textarea>
  80. <div class="controls" style="margin-top: 3px">
  81. Controls: WASD, Space, Space+Shift, Arrow Keys<br>
  82. </div>
  83. <div class="controls" id="info7" style="font-size: 10px">
  84. Toggle Debug: P<br>
  85. Toggle Mouse Drag Controlled Camera Angle: I<br>
  86. </div>
  87. </div>
  88. </body>
  89. </html>