simon.muchau
/
AnonymousTopicBasedPubSubCommunicationforMicroblogging


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
							<!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="serverMessageBox" style="text-align: center;"></div>
   
    
    <div class="container">
      <div class="toppane">

      <div id="formBody">
        
        <form method="POST" id="inputTweet">
            <h1 style="font-size: large"; >Anonymous Topic Based PubSub Communication for Microblogging</h1>
            <br>
            <label for="message">Your Tweet here</label>
            <input id="message" name="message" value="house#tpc1#tpc2" type="text">
            <button type="submit" style="width:100px;">Post Tweet</button>
          <h1 style="font-size: medium;">Input like: "text#topic1#topic2"</h1>
        </form>   

      </div>

          
        </div>

        <div class="leftpane">
          <h1 style="font-size: large;text-align: center;">Topic list</h1>
          
          <button id="mainUpdateTopicList" method="updateMainTopicList" type="submit" style="width:100px;">Update Main Topic List</button>
          <button id="mainUpdateInterests" method="updateMainInterests" type="submit" style="width:100px;">Update Interests</button>

          <ol id="displayMainTopicList"></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>

          <form method="getTweets" id="mainTweets">
            <button type="submit" style="width:100px;">Get Tweets</button>
          </form>

          <ul id="displayMainTweets"></ul>
        </div>
      
        <div class="rightpane">
          <h1 style="font-size: large;text-align: center;">Topic list for archived tweets</h1>
          
          form muss drum um jedes einzeln
          <button id="archiveUpdateTopicList" method="updateMainTopicList" type="submit" style="width:100px;">Update Main Topic List</button>
          <button id="archiveUpdateInterests" method="updateMainInterests" type="submit" style="width:100px;">Update Interests</button>

          <ol id="displayArchiveTweets"></ol>

          <br>

          <form method="getArchiveTweets" id="archiveTweets">
            <button type="submit" style="width:100px;">Get Archive Tweets</button>
          </form>

          <ul id="displayArchiveTweets"></ul>
        </div>
      </div>
</body>
<script src="main.js"> </script>
</html>


<style>
    
    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>