index.html 3.6 KB

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