Newer
Older
wwwcats / public_html / index.html
  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>Detonating Cats</title>
  7. <link rel="icon" type="image/png" href="/assets/favicon.png">
  8. <link rel="stylesheet" type="text/css" href="style.css?incr=3" />
  9. </head>
  10. <body>
  11. <!-- This is needed for some reason, because in some cases the browser loads
  12. a fresh copy of the JS but not the HTML (?!) -->
  13. <input type="hidden" id="REVISION" value="9" />
  14.  
  15. <noscript><h1>You need to enable Javascript</h1></noscript>
  16.  
  17. <div id="loading" class="container">
  18. <p>Loading assets, please wait.</p>
  19. <p><span id="loading-assets">0</span> assets loaded.</p>
  20. <p>(If this takes too long, try force-reloading with Ctrl+F5...)</p>
  21. </div>
  22.  
  23. <div id="welcome" class="container reveal">
  24. <div class="row">
  25. <div class="col-md-8">
  26. <div class="welcome-pane">
  27. <h1>Welcome to DETONATING CATS <small>(beta)</small></h1>
  28. <div class="login-form">
  29. <div class="form-group">
  30. <label class="col-form-label col-form-label-lg mt-4" for="welcome-username">Input nickname</label>
  31. <input class="form-control form-control-lg" type="text" placeholder="Nickname" id="welcome-username">
  32. </div>
  33. <div class="form-group">
  34. <label class="col-form-label col-form-label-lg mt-4" for="welcome-lobby">Lobby name</label>
  35. <input class="form-control form-control-lg" type="text" placeholder="Lobby" id="welcome-lobby">
  36. </div>
  37. </div>
  38. <button class="btn btn-primary" id="welcome-join">Join!</button>
  39. </div>
  40.  
  41. <div id="privacy">
  42. <p>Privacy notice: game and chat messages may be logged to help with debugging.
  43. These logs will not be shared. Your IP address and browser fingerprint are never logged.</p>
  44. </div>
  45. </div>
  46.  
  47. <div class="col-md-4">
  48. <div class="welcome-pane changelog-wrap">
  49. <h3>Changelog</h3>
  50. <div id="changelog-container"></div>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55.  
  56. <div id="game-view" class="reveal">
  57. <div class="game-log-wrap show">
  58. <button class="btn-close"></button>
  59. <div id="game-log-container">
  60. <h3>Game log</h3>
  61. <div id="game-log"></div>
  62. </div>
  63. <div id="chat-container">
  64. <textarea class="form-control" id="chat-message" rows="2" placeholder="Chat message..."></textarea>
  65. </div>
  66. </div>
  67.  
  68. <div class="float-btns">
  69. <button class="btn btn-light toggle-gamebar">
  70. <span class="iconify" data-icon="mdi-menu-open"></span>
  71. </button>
  72. <button class="btn btn-light toggle-gamelog">
  73. <span class="iconify" data-icon="mdi-message-reply-text-outline"></span>
  74. </button>
  75. </div>
  76.  
  77. <div id="board">
  78. <div id="top-bar">
  79. <span class="left-text shade">
  80. DETONATING CATS (<a href="about.html" target="_BLANK">info</a>)
  81. </span>
  82. <span class="right-text shade">
  83. <span id="player-name"></span>@<span id="lobby-name"></span>
  84. </span>
  85. </div>
  86.  
  87. <div id="discard-pile"></div>
  88. <div class="draw-pile-container">
  89. <div id="draw-pile"></div>
  90. <span id="draw-pile-counter" class="reveal">
  91. Left:
  92. <span id="remaining-card-count"></span>
  93. </span>
  94. </div>
  95.  
  96. <div id="draw-pile-animation" class="reveal">
  97. <img src="assets/card_back.png" class="card" />
  98. </div>
  99.  
  100. <div id="message-container" class="reveal">
  101. <span id="message"></span>
  102. </div>
  103.  
  104. <div id="card-deck">
  105. </div>
  106.  
  107. <div id="card-hud" class="card-hud reveal"></div>
  108. <div id="card-hud-3-wrapper" class="card-hud reveal">
  109. <div id="card-hud-3"></div>
  110. </div>
  111.  
  112. <div id="modal-container"></div>
  113. </div> <!-- /board -->
  114.  
  115. <div class="buttons-container">
  116. <button id="sort-button" class="btn btn-primary" title="Sort Cards">
  117. <span class="iconify" data-icon="mdi-sort"></span>
  118. </button>
  119. <button id="2x-button" class="btn btn-primary combo-btn">2x</button>
  120. <button id="3x-button" class="btn btn-primary combo-btn">3x</button>
  121.  
  122. <button id="mute-button" style="display: none !important">Mute sound</button>
  123.  
  124. <div class="bottom-notify-container"></div>
  125. </div>
  126.  
  127. <div id="sidebar" class="show">
  128. <button class="btn-close"></button>
  129. <div class="sidebar-box">
  130. <ul id="player-list"></ul>
  131. </div>
  132. <div class="sidebar-box">
  133. <ul id="spectator-list"></ul>
  134. </div>
  135. </div> <!-- /sidebar -->
  136. </div> <!-- /game-view -->
  137.  
  138. <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" type="text/javascript"></script>
  139. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js" type="text/javascript"></script>
  140. <script src="//code.iconify.design/1/1.0.6/iconify.min.js"></script>
  141.  
  142. <script src="util.js" type="text/javascript"></script>
  143. <script src="ServerEventsHandlers.js" type="text/javascript"></script>
  144. <script src="game.js" type="text/javascript"></script>
  145. <script src="strings.js?incr=1" type="text/javascript"></script>
  146. <script src="init.js" type="text/javascript"></script>
  147. </body>
  148. </html>