index.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width" />
  6. <title>Sapphire</title>
  7. <link rel="manifest" href="manifest.json"></link>
  8. <link rel="stylesheet" href="style/palette.css"></link>
  9. <link rel="stylesheet" href="style/style.css"></link>
  10. </head>
  11. <body>
  12. <div id="app" class="show-left">
  13. <div id="left-pane" class="pane">
  14. <div class="buttons">
  15. <button id="add-buddy">Add a Buddy!</button>
  16. </div>
  17. <div id="buddy-list">
  18. </div>
  19. <div id="chat-list">
  20. </div>
  21. </div>
  22. <div id="right-pane" class="pane">
  23. <div id="room-info">
  24. <a id="room-back" href="#"><img src="icons/menu.svg"></img></a>
  25. <div>
  26. <span id="room-name"></span>
  27. <br>
  28. <span id="room-topic"></span>
  29. </div>
  30. </div>
  31. <div id="message-list-container" tabindex="0">
  32. <div id="message-list">
  33. </div>
  34. </div>
  35. <div id="chat-input-area">
  36. <form id="chat-form">
  37. <!-- Don't set an id/name, such that autocompletion doesn't try to do history but you still get generic complete on phones -->
  38. <input data-id="input" type="text" placeholder="Message">
  39. <input type="submit" value="Send!">
  40. </form>
  41. <div id="typing-indicator">
  42. <b id="typing-indicator-name"></b>
  43. <span id="typing-indicator-status"></span>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. <div id="modal-screen">
  49. <div id="modal-content">
  50. </div>
  51. </div>
  52. <div id="login-screen">
  53. <div id="login-content">
  54. <h1>Sapphire</h1>
  55. <p id="login-status"></p>
  56. <form id="login-form">
  57. <label><span>Port:</span> <input id="port" type="number" value="7070" required></label>
  58. <label><span>Password:</span> <input id="password" type="password" required></label>
  59. <input type="submit" value="Login">
  60. </form>
  61. </div>
  62. </div>
  63. <script>window.BASE_HOST = window.location.protocol === "file:" ? "localhost" : window.location.hostname;</script>
  64. <script src="vendor/hogan-3.0.1.js"></script>
  65. <script src="vendor/emoji.js"></script>
  66. <script src="vendor/countries-rev.js"></script>
  67. <script src="src/emoji-emoticon-to-unicode.js"></script>
  68. <script src="src/emojify.js"></script>
  69. <script src="src/templates.js"></script>
  70. <script src="src/password.js"></script>
  71. <script src="src/backend.js"></script>
  72. <script src="src/avatar.js"></script>
  73. <script src="src/main.js"></script>
  74. </body>
  75. </html>