index.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>CoreBall</title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link href='http://fonts.useso.com/css?family=Lato' rel='stylesheet' type='text/css'>
  8. <style type="text/css">
  9. body {
  10. background-color: #c8c8c8;
  11. overflow: hidden;
  12. padding: 0;
  13. margin: 0;
  14. /*font-family:Helvetica;*/
  15. /*font-family: 'Open Sans', sans-serif, Helvetica;*/
  16. font-family: Lato;
  17. }
  18. .center-box {
  19. text-align: center;
  20. position: absolute;
  21. width: 300px;
  22. height: 400px;
  23. margin: -200px 0 0 -150px;
  24. left: 50%;
  25. top: 50%;
  26. }
  27. .title {
  28. font-size: 50px;
  29. /*font-family: sans-serif;*/
  30. }
  31. .button {
  32. position: absolute;
  33. width: 100px;
  34. height: 100px;
  35. left: 50%;
  36. top: 50%;
  37. margin: -100px 0 0 -50px;
  38. border: 2px solid #666;
  39. color: #666;
  40. -moz-border-radius: 15px;
  41. -webkit-border-radius: 15px;
  42. border-radius: 15px;
  43. font-size: 55px;
  44. }
  45. .button .text {
  46. font-size: 10px;
  47. padding: 0 10px;
  48. width: 80px
  49. }
  50. .op {
  51. position: absolute;
  52. width: 200px;
  53. height: 100px;
  54. left: 50%;
  55. top: 70%;
  56. margin: -50px 0 0 -100px;
  57. }
  58. </style>
  59. </head>
  60. <body>
  61. <canvas style="display:none;" id="stage"></canvas>
  62. <div id="begin">
  63. <section class="center-box">
  64. <span class="title">Core Ball</span>
  65. <div class="button">
  66. <div id="txtAr" style="margin-top: 5px;"></div>
  67. <div class="text"></div>
  68. </div>
  69. <div class="op">
  70. <a id="btnFW" href="javascript:;"><img data-capture="1" src="image/btn_fw.png" />
  71. </a>
  72. <span id="btnReset" style="display:inline-block;margin-left: 30px;color:#666">RESET</span>
  73. <div id="tip" style="font-size:14px;color:#555;margin-top: 15px;display:none;">关卡重置完毕</div>
  74. </div>
  75. </section>
  76. <!--section style="position:absolute; ;right:5px; bottom:5px;color:#888">
  77. <img style="margin:0 -2px -2px 0;" src="image/github.png" />
  78. <span style="display:inline-block;font-size:12px;font-family: sans-serif;"><a href="https://github.com/randomyang/core-ball" target="_blank"></a></span>
  79. </section-->
  80. <section id="wxArrow" style="display: none;">
  81. <div style="position:absolute;width:100%;height:100%;opacity: 0.7;background-color:#000">
  82. </div>
  83. <img style="position: absolute;right:25px;" src="image/arrow.png" />
  84. </section>
  85. </div>
  86. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  87. <script type="text/javascript" src="js/index.js"></script>
  88. </body>
  89. </html>