index.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  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: #cccccc;">
  9. <div id="serverMessageBox" style="text-align: center;"></div>
  10. <div class="container">
  11. <div class="toppane">
  12. <div id="formBody">
  13. <form method="POST" id="inputForm">
  14. <h1 style="font-size: large"; >Anonymous Topic Based PubSub Communication for Microblogging</h1>
  15. <br>
  16. <label for="message">Your Tweet here</label>
  17. <input id="message" name="message" value="house#tpc1#tpc2" type="text">
  18. <button type="submit" style="width:100px;">Go ...</button>
  19. <h1 style="font-size: medium;">Input like: "text#topic1#topic2"</h1>
  20. </form>
  21. </div>
  22. </div>
  23. <div class="leftpane">
  24. <h1 style="font-size: large;text-align: center;">Topic list</h1>
  25. <ol>
  26. <li v-for="topic in topicList">
  27. <input type="checkbox" :value="topic.topic" v-model="selectedTopics">
  28. <label :for="topic.topic">{{topic.topic}}</label>
  29. </li>
  30. </ol>
  31. <div class="impressum">
  32. <h1 style="font-size: medium;"><br>This is the gui accompanying the thesis Anonymous Topic Based PubSub Communication for Microblogging.
  33. <br><br>
  34. <a href="https://arxiv.org/pdf/2108.08624.pdf" target="_blank"> You can find the paper the thesis is based upon here</a>
  35. </h1>
  36. </div>
  37. </div>
  38. <div class="middlepane">
  39. <h1 style="font-size: large;text-align: center;">Tweets</h1>
  40. <ul>
  41. <Tweet
  42. v-for="(tweet, index) in tweets"
  43. :key=index
  44. :topics="tweet.topics"
  45. :text="tweet.text"
  46. ></Tweet>
  47. </ul>
  48. </div>
  49. <div class="rightpane">
  50. <h1 style="font-size: large;text-align: center;">Topic list for archived tweets</h1>
  51. <ol>
  52. <li v-for="topic in topicListArchive">
  53. <input type="checkbox" :value="topic.topic" v-model="selectedTopicsArchive">
  54. <label :for="topic.topic">{{topic.topic}}</label>
  55. </li>
  56. </ol>
  57. <br>
  58. <ul>
  59. <Tweet
  60. v-for="(tweet, index) in tweetsArchive"
  61. :key=index
  62. :topics="tweet.topics"
  63. :text="tweet.text"
  64. ></Tweet>
  65. </ul>
  66. </div>
  67. </div>
  68. </body>
  69. <script src="main.js"> </script>
  70. </html>
  71. <style>
  72. body, html {
  73. width: 100%;
  74. height: 100%;
  75. margin: 0;
  76. }
  77. .container {
  78. width: 100%;
  79. height: 100%;
  80. }
  81. .leftpane {
  82. width: 25%;
  83. height: 100%;
  84. float: left;
  85. background-color: #0058b759;
  86. border-collapse: collapse;
  87. }
  88. .middlepane {
  89. width: 50%;
  90. height: 100%;
  91. float: left;
  92. border-collapse: collapse;
  93. }
  94. .rightpane {
  95. width: 25%;
  96. height: 100%;
  97. position: relative;
  98. float: right;
  99. background-color: #ffd700;
  100. border-collapse: collapse;
  101. }
  102. .toppane {
  103. margin-top: 10px;
  104. width: 100%;
  105. height: 100px;
  106. border-collapse: collapse;
  107. }
  108. form {
  109. text-align: center;
  110. }
  111. </style>