index.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>SimonDoom</title>
  5. <link rel="stylesheet" type="text/css" href="base.css">
  6. <link rel="shortcut icon" href="#">
  7. </head>
  8. <body>
  9. <script src="https://cdn.jsdelivr.net/gh/kripken/ammo.js@HEAD/builds/ammo.js"></script>
  10. <script src="src/main.js" type="module">
  11. </script>
  12. <div class="container" id="container">
  13. <div class="ui" id="game-ui">
  14. <div class="left-ui">
  15. <div class="ui-area ui-glow left-ui-area" id="left-ui-area">
  16. <div class="row">
  17. <div class="column">
  18. <div class="charge-text" id="charge-text">100%</div>
  19. <div class="health-text" id="health-text">100</div>
  20. </div>
  21. <div class="column">
  22. <div class="charge-icon charge-icon-main"></div>
  23. <div class="health-icon health-icon-main"></div>
  24. </div>
  25. <div class="column">
  26. <div class="charge-bar">
  27. <div class="charge-bar-active" id="charge-bar"></div>
  28. </div>
  29. <div class="health-bar">
  30. <div class="health-bar-active"></div>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. <div class="right-ui">
  37. <div class="ui-area ui-glow right-ui-area" id="right-ui-area">
  38. <div class="row">
  39. <div class="column weapon-area">
  40. <div class="weapon-text weapon-top-row"></div>
  41. <div class="weapon-pic-text">25</div>
  42. </div>
  43. <div class="column weapon-area">
  44. <div class="weapon-text-icon weapon-top-row"></div>
  45. <div class="weapon-pic-icon"></div>
  46. </div>
  47. <div class="column weapon-area">
  48. <div class="weapon-text weapon-top-row">SimonDev Paintball Rifle</div>
  49. <div class="weapon-icon">
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. <div class="top-right-ui">
  56. <div class="ui-area ui-glow top-right-ui-area" id="top-right-ui-area">
  57. <div class="ammo-area row">
  58. <img class="ammo-icon" src="resources/ui/ev_shadow_FILL0_wght700_GRAD0_opsz48.svg"></img>
  59. <img class="ammo-icon" src="resources/ui/tenancy_FILL0_wght700_GRAD0_opsz48.svg"></img>
  60. <img class="ammo-icon" src="resources/ui/fluorescent_FILL0_wght700_GRAD0_opsz48.svg"></img>
  61. <img class="ammo-icon" src="resources/ui/database_FILL0_wght700_GRAD0_opsz48.svg"></img>
  62. <img class="ammo-icon" src="resources/ui/barcode_scanner_FILL0_wght700_GRAD0_opsz48.svg"></img>
  63. </div>
  64. </div>
  65. </div>
  66. <div class="top-left-ui">
  67. <div class="top-left-ui-area" id="top-left-ui-area">
  68. <div class="row">
  69. <img class="objective-title-icon" src="resources/ui/double_arrow_FILL0_wght700_GRAD0_opsz48.svg"></img>
  70. <div class="objective-title">Kill'm all</div>
  71. </div>
  72. <div class="row objective-text-background">
  73. <img class="objective-text-icon" src="resources/ui/token_FILL0_wght700_GRAD0_opsz48.svg"></img>
  74. <div class="objective-text">Jump around and stuff</div>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. </div>
  80. </body>
  81. </html>