simon.muchau
/
AnonymousTopicBasedPubSubCommunicationforMicroblogging


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
							<!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: #ffffff;">
    <div class="container">
      <div class="toppane">
        
        <form method="POST" id="inputTweet">
            <h1 style="font-size: large"; >Anonymous Topic Based PubSub Communication for Microblogging</h1>
            <br>
            <label for="tweet">Your Tweet here</label>
            <input name="message" value="" type="text" id="tweetToPost"/>
          <button id="inputBTN" type="submit" style="width:100px;">Post Tweet</button>
            
          <h1 style="font-size: medium;">Input like: "text#topic1#topic2"</h1>
        </form>
      </div>

      <br>
      <br>
      <br>


      <div class="pane">
      <div class="leftpane">
        <h1 style="font-size: large;text-align: center;">Topic list</h1>

        <form method="updateMainTopicList" id="mainUpdateTopicList">
          <button method="updateMainTopicList" type="submit" style="width:100px;">Update Main Topic List</button>
        </form> 

        <div id="mainTopicList" style="text-align: center;">
        </div>

        <form method="updateMainInterests" id="mainInterests">
          <button type="submit" style="width:100px;">Submit Interests</button>

        </form>  

        <div class="impressum">
          <h1 style="font-size: medium;"><br>This is the gui accompanying the thesis Anonymous Topic Based PubSub Communication for Microblogging.
          </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 method="updateArchiveTopicList" id="archiveUpdateTopicList">
          <button method="updateArchiveTopicList" type="submit" style="width:100px;">Update Archive Topic List</button>
        </form> 

        
          <div id="archiveTopicList" style="text-align: center;">
          </div>

          <form method="updateArchiveInterests" id="archiveInterests">
            <button type="submit" style="width:100px;">Submit Interests</button>
  
        </form>  

        <br>

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

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


<style>
    
    body, html {
      width: 100%;
      height: 100%;
      margin: 0;
    }
    
    .container {
      width: 100%;
      height: 100%;
    }

    .pane {
      border: rgb(0, 119, 255);
      border-top-style: solid;
      border-radius: 20px;
    }
    
    .leftpane {
        width: 24%;
        height: 100%;
        float: left;
        border-collapse: collapse;
        border: rgb(0, 119, 255);
        border-left-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;

    }
    
    .middlepane {
        width: 50%;
        height: 100%;
        float: left;
        border-collapse: collapse;
    }
    
    .rightpane {
      width: 24%;
      height: 100%;
      position: relative;
      float: right;
      border-collapse: collapse;
      border: rgb(0, 119, 255);
      border-left-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;;
    }
    
    .toppane {
      margin-top: 10px;
      width: 100%;
      height: 100px;
      border-collapse: collapse;
    }

    button, input[type="button"], input[type="submit"] {
      background-color: #04AA6D;
      border: none;
      color: white;
      padding: 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      border-radius: 20px;
    }

    ul li {
      border: rgb(0, 119, 255);
      border-top-style: solid;
      list-style-type: none;
      border-left-style: solid;
      margin: 15px;
      padding-left: 5px;
}

  .impressum {
    padding-left: 10px;
  }
    
    form {
      text-align: center;
    }
    </style>