123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Home</title>
- </head>
- <body style="background-color: #cccccc;">
- <div id="formBody" style="display: flex;justify-content: center;align-items: center;height: 90vh;">
- <form method="POST" id="inputForm">
- <label for="message">Message</label>
- <input id="message" name="message" value="hello!!!" type="text">
- <button type="submit" style="width:100px;">Go ...</button>
- </form>
- </div>
- <div id="serverMessageBox" style="text-align: center;">
- </div>
-
- <div class="container">
- <div class="toppane">
- <form>
- <h1 style="font-size: large">Anonymous Topic Based PubSub Communication for Microblogging</h1>
- <input type="text" ref="my_input" id="tweetInput">
- <button @click.prevent="submitTweet()">Submit</button>
- <br>
- <h1 style="font-size: medium;">Input like: "text#topic1#topic2"</h1>
-
- </form>
- </div>
- <div class="leftpane">
- <h1 style="font-size: large;text-align: center;">Topic list</h1>
- <ol>
- <li v-for="topic in topicList">
- <input type="checkbox" :value="topic.topic" v-model="selectedTopics">
- <label :for="topic.topic">{{topic.topic}}</label>
- </li>
- </ol>
- <div class="impressum">
- <h1 style="font-size: medium;"><br>This is the gui accompanying the thesis Anonymous Topic Based PubSub Communication for Microblogging.
- <br><br>
- <a href="https://arxiv.org/pdf/2108.08624.pdf" target="_blank"> You can find the paper the thesis is based upon here</a>
- </h1>
- </div>
- </div>
-
- <div class="middlepane">
- <h1 style="font-size: large;text-align: center;">Tweets</h1>
- <ul>
- <Tweet
- v-for="(tweet, index) in tweets"
- :key=index
- :topics="tweet.topics"
- :text="tweet.text"
- ></Tweet>
- </ul>
- </div>
-
- <div class="rightpane">
- <h1 style="font-size: large;text-align: center;">Topic list for archived tweets</h1>
- <ol>
- <li v-for="topic in topicListArchive">
- <input type="checkbox" :value="topic.topic" v-model="selectedTopicsArchive">
- <label :for="topic.topic">{{topic.topic}}</label>
- </li>
- </ol>
- <br>
- <ul>
- <Tweet
- v-for="(tweet, index) in tweetsArchive"
- :key=index
- :topics="tweet.topics"
- :text="tweet.text"
- ></Tweet>
- </ul>
- </div>
- </div>
- </body>
- <script src="main.js"></script>
- </html>
- <style>
- @import './assets/base.css';
-
- body, html {
- width: 100%;
- height: 100%;
- margin: 0;
- }
-
- .container {
- width: 100%;
- height: 100%;
- }
-
- .leftpane {
- width: 25%;
- height: 100%;
- float: left;
- background-color: #0058b759;
- border-collapse: collapse;
- }
-
- .middlepane {
- width: 50%;
- height: 100%;
- float: left;
- border-collapse: collapse;
- }
-
- .rightpane {
- width: 25%;
- height: 100%;
- position: relative;
- float: right;
- background-color: #ffd700;
- border-collapse: collapse;
- }
-
- .toppane {
- margin-top: 10px;
- width: 100%;
- height: 100px;
- border-collapse: collapse;
- }
-
- form {
- text-align: center;
- }
- </style>
|