index.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  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>Home</title>
  7. </head>
  8. <body style="background-color: #ffffff;">
  9. <div class="container">
  10. <div class="toppane">
  11. <form method="POST" id="inputTweet">
  12. <h1 style="font-size: large"; >Anonymous Topic Based PubSub Communication for Microblogging</h1>
  13. <br>
  14. <label for="tweet">Your Tweet here</label>
  15. <input name="message" value="" type="text" id="tweetToPost"/>
  16. <button id="inputBTN" type="submit" style="width:100px;">Post Tweet</button>
  17. <h1 style="font-size: medium;">Input like: "text#topic1#topic2"</h1>
  18. </form>
  19. </div>
  20. <br>
  21. <br>
  22. <br>
  23. <div class="pane">
  24. <div class="leftpane">
  25. <h1 style="font-size: large;text-align: center;">Topic list</h1>
  26. <form method="updateMainTopicList" id="mainUpdateTopicList">
  27. <button method="updateMainTopicList" type="submit" style="width:100px;">Update Main Topic List</button>
  28. </form>
  29. <div id="mainTopicList" style="text-align: center;">
  30. </div>
  31. <form method="updateMainInterests" id="mainInterests">
  32. <button type="submit" style="width:100px;">Submit Interests</button>
  33. </form>
  34. <div class="impressum">
  35. <h1 style="font-size: medium;"><br>This is the gui accompanying the thesis Anonymous Topic Based PubSub Communication for Microblogging.
  36. </h1>
  37. </div>
  38. </div>
  39. <div class="middlepane">
  40. <h1 style="font-size: large;text-align: center;">Tweets</h1>
  41. <form method="getTweets" id="mainTweets">
  42. <button type="submit" style="width:100px;">Get Tweets</button>
  43. </form>
  44. <ul id="displayMainTweets">
  45. </ul>
  46. </div>
  47. <div class="rightpane">
  48. <h1 style="font-size: large;text-align: center;">Topic list for archived tweets</h1>
  49. <form method="updateArchiveTopicList" id="archiveUpdateTopicList">
  50. <button method="updateArchiveTopicList" type="submit" style="width:100px;">Update Archive Topic List</button>
  51. </form>
  52. <div id="archiveTopicList" style="text-align: center;">
  53. </div>
  54. <form method="updateArchiveInterests" id="archiveInterests">
  55. <button type="submit" style="width:100px;">Submit Interests</button>
  56. </form>
  57. <br>
  58. <form method="getArchiveTweets" id="archiveTweets">
  59. <button type="submit" style="width:100px;">Get Archive Tweets</button>
  60. </form>
  61. <ul id="displayArchiveTweets">
  62. </ul>
  63. </div>
  64. </div>
  65. </div>
  66. </body>
  67. <script src="main.js"> </script>
  68. </html>
  69. <style>
  70. body, html {
  71. width: 100%;
  72. height: 100%;
  73. margin: 0;
  74. }
  75. .container {
  76. width: 100%;
  77. height: 100%;
  78. }
  79. .pane {
  80. border: rgb(0, 119, 255);
  81. border-top-style: solid;
  82. border-radius: 20px;
  83. }
  84. .leftpane {
  85. width: 24%;
  86. height: 100%;
  87. float: left;
  88. border-collapse: collapse;
  89. border: rgb(0, 119, 255);
  90. border-left-style: solid;
  91. border-right-style: solid;
  92. border-bottom-style: solid;
  93. }
  94. .middlepane {
  95. width: 50%;
  96. height: 100%;
  97. float: left;
  98. border-collapse: collapse;
  99. }
  100. .rightpane {
  101. width: 24%;
  102. height: 100%;
  103. position: relative;
  104. float: right;
  105. border-collapse: collapse;
  106. border: rgb(0, 119, 255);
  107. border-left-style: solid;
  108. border-right-style: solid;
  109. border-bottom-style: solid;;
  110. }
  111. .toppane {
  112. margin-top: 10px;
  113. width: 100%;
  114. height: 100px;
  115. border-collapse: collapse;
  116. }
  117. button, input[type="button"], input[type="submit"] {
  118. background-color: #04AA6D;
  119. border: none;
  120. color: white;
  121. padding: 10px;
  122. text-align: center;
  123. text-decoration: none;
  124. display: inline-block;
  125. font-size: 16px;
  126. margin: 4px 2px;
  127. border-radius: 20px;
  128. }
  129. ul li {
  130. border: rgb(0, 119, 255);
  131. border-top-style: solid;
  132. list-style-type: none;
  133. border-left-style: solid;
  134. margin: 15px;
  135. padding-left: 5px;
  136. }
  137. .impressum {
  138. padding-left: 10px;
  139. }
  140. form {
  141. text-align: center;
  142. }
  143. </style>