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