Qora Web

blogenable

yes

home.htm

<!DOCTYPE html>
<html lang="en">
<head>
<title>mbee</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<style>
* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

/* Header/logo Title */
.header1 {
  padding: 38px;
  text-align: center;
  background: #110022;
  color: white;
}

/* Increase the font size of the heading */
.header1 h1 {
  font-size: 40px;
}

/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

/* Style the navigation bar links */
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}


/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Active/current link */
.navbar a.active {
  background-color: #666;
  color: white;
}

/* Column container */
.row {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  -ms-flex: 30%; /* IE10 */
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {   
  -ms-flex: 70%; /* IE10 */
  flex: 70%;
  background-color: white;
  padding: 20px;
}


/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}



*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  background-color: #f2f2f2;
}

.box { 
  padding: 1em;
}

input {
  width: 100%;
  padding: 1em;
  outline: none;
  border: 1px solid #f2f2f2;
}

.message-list {
  margin: 0;
  padding: 0;
}

.message-list li {
  padding: .2em;
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #f2f2f2;
}

.app-layout {
  display: grid;
  height: 100vh;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
}

.header     { background-color: #ffffff; } 
.teams      { background-color: #362233; text-align: center; color: #fff;}
.channels   { background-color: #52364E; color: #ccc;}
.messages   { background-color: #ffffff; color: #333;}
.write      { background-color: #f2f2f2; }
.login		{ background-color: #362233; }

.teams {
  font-size: 80%;
  grid-column: 1;
  grid-row: 1;
}

.channels {
  grid-column: 1;
  grid-row: 2 / 3;
}


 .header { 
  grid-column: 2; 
  grid-row: 1; 
  border-bottom: 1px solid #999; 
  color: #999; 
 } 



#channel_name {
  font-weight: bold;
  font-size:120%;
  color:#000;
}
#channel_address {
	font-size: 100%;
	margin-left: 0.3em;
	color: #aaa;
}
.channel_info {
	font-size: 90%;
	padding-left: 1em;
	padding-top:0.2em;
}

.messages {
  grid-column: 2;
  grid-row: 2;
  padding: 0 1em;
  overflow-y: scroll;
}

.input {
  grid-column: 2;
  grid-row: 3;
}

a.channel {
	color: #aaa;
	text-decoration: none;
	text-align: left;
}
.channles-list {
	list-style-type: none;
}
.channles-list li {
	margin: 0.2em;
	list-style-type: none;
}
div.message {
	padding: 1em 0.2em;
	
}
div.message_body {
	padding-top: 0.3em;
	padding-left: 0.4em ;
}
span.sender {
	font-weight: bold;
}
span.datatime {
	font-size: 80%;
	color: #aaa;
}
.account_note {
	font-weight: normal;
	font-size: 90%;
	color: #999;
}
a.selected_channel {
	font-weight: bold;
	color: #FFF;
}
#current_login_account {
	margin:0.3em 0.3em;
	margin-bottom: 0.5em;
	color: #ccc;
}
#current_login_name {
	font-size: 120%;
}
#select_node {
	width: 90%;
}
.app_info {
	font-size: 75%;
	border: 1px solid #aaa;
	padding: 0.5em;
	margin-top: 1.5em;
}





</style>
</head>
<body>

<div class="header1">
   <h1><font face="Bernard MT Condensed">mbee</font></h1> 
  <p>A decentralized web page</p>
 
</div>

<div class="navbar">
  <a href="/mbee/home.htm" class="active">mbee</a>
  <a href="/mbee/about.htm">about</a>
  <a target="_tab" href="http://75.119.151.97/index/blog.html?blogname=mbee" class="right">mbee blog</a>
</div>

<div class="row">
  <div class="side">
    <h2>mbee</h2>
    <p>
	Qora address :<br>
  	<font size="1">QM7SbiGEgof8zDKpd4x7kpQiyD32xuNbk9</font> <br><br>
  	
  	Ardor address :<br>
  	<font size="1">-</font> <br>

  	
  	
     </p>
   
  </div>
  <div class="main">
    <h2>mbee</h2>
    <h5>A test page by mbee.</h5>    
    <p>
   Get some Ignis to upload comment.
   </p>
 
  </div>
</div>

<div class="row">
  <div class="side"> Comment code's source :
	  	<a target="_top" href="http://75.119.151.97:27876/nxt?requestType=downloadTaggedData&transactionFullHash=2a7e3b5d70c455f338ab88dd4418aa16aa965274763d9a4cfbf229f60c2e9b92&chain=2&retrieve=true">ardor-board-v001.html</a>
	  	Thanks! 
	  	<br/>  
  
  </div>
  <div class="main">


 <!--   <div class='app-layout'> -->

    <div class='teams box'>
		     <div id='current_login_name'></div>This is localhost version, no need https. For security reasons, use Ardor wallet with only 1 Ignis or below to upload comment.<br>
			No localhost? Back to remote http  <a href="/mbee"><font color="#FF0000">Ardor gateway version</font></a> (NOT secure !!)
				
		     <br> Your Ignis account is :<div id='current_login_account'></div>
	</div>


    <div class='header box'><span id='channel_name'># test</span> <span id='channel_address'></span>
        <div class='channel_info'>
		 Using Ardor client sending an <strong>unencrypted</strong> message to the address 
		above on IGNIS chain will do the same trick. :)
		</div>
	</div>

    <div class='messages box' style=''>
		<div class='message'>
			<div class='message_header'><span class='sender'></span><span class='datatime'></span></div>
			<div class='message_body'>No messages.</div>
		</div>
    </div>
 


 	<div class='login box'>
		<input type="password" style="text-align:left;margin-top:8px;height:1em;" id="text_passphrase" placeholder='Input Passphrase here'></input>
	</div>


   
    <div class='input box'>

      
      <input type='text' placeholder='< - Login to send message.' id='_message' disabled='disabled' maxlength="500" >
    </div>



  <!--   </div> -->
  
   
   
  </div>


</div>





<div class="footer">
  <h2>mbee</h2>
</div>

</body>


  <script>
		var MAX_MESSAGES = 100;
		var FEE_IGNIS = 0.03;
		var REFRESH_TIMS = 30;
		
		var _node_url = "http://75.119.151.97:27876/nxt";

		var _current_login_account;
		var _passphrase;
		
		var _current_channel_address = "ARDOR-7WH9-FE8P-CHZC-GPRKV";
		var _current_channel_name = "Comment address : ";
	
		function _login() {
			  $.ajax({url: _node_url, data: {'requestType': 'getAccountId', 'secretPhrase': _passphrase }, 
				success: function(data) {
					_current_login_account = $.parseJSON(data)["accountRS"];
					$("#current_login_account").text(_current_login_account);
					$("#_message").attr("placeholder", "Send message as " + _current_login_account);
					$("#_message").prop('disabled', false);
					
					$.ajax({url: _node_url, data: {'requestType': 'getAccount', 'account': _current_login_account }, 
							success: function(data) {
								var name = $.parseJSON(data)["name"];	
								if (name && name.length > 0) {
									$('#current_login_name').text(name);
									$("#_message").attr("placeholder", "Send message as " + name + ' (' + _current_login_account + ')');
								}
						}
					});	
					//if(localStorage){ localStorage.setItem("_passphrase", _passphrase); }
				},
				error: function() {
					alert('error login');
				}
			});
		}
		
		$("#text_passphrase").change(function() {
			_passphrase = this.value;
			if(_passphrase)
				_login();
		});
			
		function _show_sender_name(account, id) {				
				$.ajax({url: _node_url, data: {'requestType': 'getAccount', 'account': account }, 
					success: function(data) {
						var name = $.parseJSON(data)["name"];	
						if (name && name.length > 0) {
							$('#'+id+" span.sender").text(name).append("<span class='account_note'> (" + account + ") </span>");
						}
				}
				});				
		}

		function show_messages() {
			  $.ajax({url: _node_url, data: {'requestType': 'getPrunableMessages', 'chain': 2, 'account': _current_channel_address, 'lastIndex': MAX_MESSAGES }, 
				success: function(data) {
					var mgs = $.parseJSON(data)["prunableMessages"];
					$("div.messages").empty();
					for(var i=mgs.length-1;i>=0;i--){
						if(mgs[i]['isText'] && mgs[i]['message']) {
							var date = new Date(mgs[i]['transactionTimestamp']*1000 + Date.UTC(2018));
							var _message = "<div class='message' id='" + mgs[i]['transactionTimestamp'] + "'><div class='message_header'><span class='sender'>" + 
											mgs[i]['senderRS'] + "</span><span class='datatime'> " + date.toLocaleString() + "</span></div><div class='message_body'>" + "</div></div>";
							$("div.messages").append(_message);
							$("#"+ mgs[i]['transactionTimestamp'] +' .message_body').text(mgs[i]['message']);
							
							_show_sender_name(mgs[i]['senderRS'], mgs[i]['transactionTimestamp']);
						}
					}
					$("#channel_name").text('# ' + _current_channel_name);
					$("#channel_address").text('' + _current_channel_address + '');
					
					$("a.channel").removeClass('selected_channel');
					$("#"+_current_channel_address).addClass('selected_channel');
					$("div.messages").animate({scrollTop: $("div.messages").prop("scrollHeight") }, 10);
				},
				error: function() {
					alert('error fecthing messages');
				}
			});
		
		}
		
		function _send_message(msg) {
			  $.ajax({url: _node_url, data: {'requestType': 'sendMessage', 'chain': 2, 'recipient': _current_channel_address, 
											 'secretPhrase': _passphrase, 'feeNQT': FEE_IGNIS*100000000,
											 'message': msg, 'messageIsText': true, 'messageIsPrunable': true
											 }, type: 'POST',
				success: function(data) {
						var rtn_msg = $.parseJSON(data);
						if(rtn_msg['errorDescription']) {
							alert('Error sending message: ' + rtn_msg['errorDescription']);
						} else {
							if(rtn_msg["transactionJSON"]) {
								$('#_message').val("");
								$("#_message").attr("placeholder", "Message Sent at " + (new Date(rtn_msg["transactionJSON"]['timestamp']*1000 + Date.UTC(2018))).toTimeString().split(' ')[0] + ". Message will be shown after around 60 senconds (block time).");
							}
						}						
				},
				error: function() {
					alert('error sending messages');
				}
			});		
		}
		
		$("a.channel").click(function() {
			$("a.channel").removeClass('selected_channel');
			_current_channel_address = this.getAttribute("id");
			_current_channel_name = this.getAttribute("data-channel-name");
			show_messages();	
			$(this).addClass('selected_channel');
		});
		
		$("#_message").keypress(function(e) {
			if(e.which == 13) {
				var msg = $(this).val();
				if( msg.length > 0 && _passphrase) {
					_send_message(msg);
				}
			}
		});
		
		$( document ).ready(function() {
				//if(localStorage) {
					//_passphrase = localStorage.getItem("_passphrase");
					//$("#text_passphrase").val(_passphrase);
					//_login();
				//}
				
				show_messages();
				setInterval(show_messages, REFRESH_TIMS*1000);				
		});		
  </script>





</html>

website

<!DOCTYPE html>
<html lang="en">
<head>
<title>mbee</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<style>
* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

/* Header/logo Title */
.header1 {
  padding: 38px;
  text-align: center;
  background: #110022;
  color: white;
}

/* Increase the font size of the heading */
.header1 h1 {
  font-size: 40px;
}

/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

/* Style the navigation bar links */
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}


/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Active/current link */
.navbar a.active {
  background-color: #666;
  color: white;
}

/* Column container */
.row {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  -ms-flex: 30%; /* IE10 */
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {   
  -ms-flex: 70%; /* IE10 */
  flex: 70%;
  background-color: white;
  padding: 20px;
}


/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}



*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  background-color: #f2f2f2;
}

.box { 
  padding: 1em;
}

input {
  width: 100%;
  padding: 1em;
  outline: none;
  border: 1px solid #f2f2f2;
}

.message-list {
  margin: 0;
  padding: 0;
}

.message-list li {
  padding: .2em;
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #f2f2f2;
}

.app-layout {
  display: grid;
  height: 100vh;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
}

.header     { background-color: #ffffff; } 
.teams      { background-color: #362233; text-align: center; color: #fff;}
.channels   { background-color: #52364E; color: #ccc;}
.messages   { background-color: #ffffff; color: #333;}
.write      { background-color: #f2f2f2; }
.login		{ background-color: #362233; }

.teams {
  font-size: 80%;
  grid-column: 1;
  grid-row: 1;
}

.channels {
  grid-column: 1;
  grid-row: 2 / 3;
}


 .header { 
  grid-column: 2; 
  grid-row: 1; 
  border-bottom: 1px solid #999; 
  color: #999; 
 } 



#channel_name {
  font-weight: bold;
  font-size:120%;
  color:#000;
}
#channel_address {
	font-size: 100%;
	margin-left: 0.3em;
	color: #aaa;
}
.channel_info {
	font-size: 90%;
	padding-left: 1em;
	padding-top:0.2em;
}

.messages {
  grid-column: 2;
  grid-row: 2;
  padding: 0 1em;
  overflow-y: scroll;
}

.input {
  grid-column: 2;
  grid-row: 3;
}

a.channel {
	color: #aaa;
	text-decoration: none;
	text-align: left;
}
.channles-list {
	list-style-type: none;
}
.channles-list li {
	margin: 0.2em;
	list-style-type: none;
}
div.message {
	padding: 1em 0.2em;
	
}
div.message_body {
	padding-top: 0.3em;
	padding-left: 0.4em ;
}
span.sender {
	font-weight: bold;
}
span.datatime {
	font-size: 80%;
	color: #aaa;
}
.account_note {
	font-weight: normal;
	font-size: 90%;
	color: #999;
}
a.selected_channel {
	font-weight: bold;
	color: #FFF;
}
#current_login_account {
	margin:0.3em 0.3em;
	margin-bottom: 0.5em;
	color: #ccc;
}
#current_login_name {
	font-size: 120%;
}
#select_node {
	width: 90%;
}
.app_info {
	font-size: 75%;
	border: 1px solid #aaa;
	padding: 0.5em;
	margin-top: 1.5em;
}





</style>
</head>
<body>

<div class="header1">
   <h1><font face="Bernard MT Condensed">mbee</font></h1> 
  <p>A decentralized web page</p>
 
</div>

<div class="navbar">
  <a href="/mbee" class="active">mbee</a>
  <a href="/mbee/about.htm">about</a>
  <a target="_tab" href="http://75.119.151.97/index/blog.html?blogname=mbee" class="right">mbee blog</a>
</div>

<div class="row">
  <div class="side">
    <h2>mbee</h2>
    <p>
	Qora address :<br>
  	<font size="1">QM7SbiGEgof8zDKpd4x7kpQiyD32xuNbk9</font> <br><br>
  	
  	Ardor address :<br>
  	<font size="1">-</font> <br>

  	
  	
     </p>
   
  </div>
  <div class="main">
    <h2>mbee</h2>
    <h5>A test page by mbee.</h5>    
    <p>
   Get some Ignis to upload comment.
   </p>
 
  </div>
</div>

<div class="row">
  <div class="side"> Comment code's source :
	  	<a target="_top" href="http://75.119.151.97:27876/nxt?requestType=downloadTaggedData&transactionFullHash=2a7e3b5d70c455f338ab88dd4418aa16aa965274763d9a4cfbf229f60c2e9b92&chain=2&retrieve=true">ardor-board-v001.html</a>
	  	Thanks! 
	  	<br/>  
  
  </div>
  <div class="main">


 <!--   <div class='app-layout'> -->

    <div class='teams box'>
		     <div id='current_login_name'></div>This is NOT https (secure web) !!! For security reasons, use Ardor wallet with only 1 Ignis or below to upload comment.
		     Or, install Ardor software then use <a href="/mbee/home.htm">localhost version</a> (no need https, for geek.)
		     <br> Your Ignis account is :<div id='current_login_account'></div>
	</div>


    <div class='header box'><span id='channel_name'># test</span> <span id='channel_address'></span>
        <div class='channel_info'>
		 Using Ardor client sending an <strong>unencrypted</strong> message to the address 
		above on IGNIS chain will do the same trick. :)
		</div>
	</div>

    <div class='messages box' style=''>
		<div class='message'>
			<div class='message_header'><span class='sender'></span><span class='datatime'></span></div>
			<div class='message_body'>No messages.</div>
		</div>
    </div>
 


 	<div class='login box'>
		<input type="password" style="text-align:left;margin-top:8px;height:1em;" id="text_passphrase" placeholder='Input Passphrase here'></input>
	</div>


   
    <div class='input box'>

      
      <input type='text' placeholder='< - Login to send message.' id='_message' disabled='disabled' maxlength="500" >
    </div>



  <!--   </div> -->
  
   
   
  </div>


</div>





<div class="footer">
  <h2>mbee</h2>
</div>

</body>


  <script>
		var MAX_MESSAGES = 100;
		var FEE_IGNIS = 0.03;
		var REFRESH_TIMS = 30;
		
		var _node_url = "http://75.119.151.97:27876/nxt";

		var _current_login_account;
		var _passphrase;
		
		var _current_channel_address = "ARDOR-7WH9-FE8P-CHZC-GPRKV";
		var _current_channel_name = "Comment address : ";
	
		function _login() {
			  $.ajax({url: _node_url, data: {'requestType': 'getAccountId', 'secretPhrase': _passphrase }, 
				success: function(data) {
					_current_login_account = $.parseJSON(data)["accountRS"];
					$("#current_login_account").text(_current_login_account);
					$("#_message").attr("placeholder", "Send message as " + _current_login_account);
					$("#_message").prop('disabled', false);
					
					$.ajax({url: _node_url, data: {'requestType': 'getAccount', 'account': _current_login_account }, 
							success: function(data) {
								var name = $.parseJSON(data)["name"];	
								if (name && name.length > 0) {
									$('#current_login_name').text(name);
									$("#_message").attr("placeholder", "Send message as " + name + ' (' + _current_login_account + ')');
								}
						}
					});	
					//if(localStorage){ localStorage.setItem("_passphrase", _passphrase); }
				},
				error: function() {
					alert('error login');
				}
			});
		}
		
		$("#text_passphrase").change(function() {
			_passphrase = this.value;
			if(_passphrase)
				_login();
		});
			
		function _show_sender_name(account, id) {				
				$.ajax({url: _node_url, data: {'requestType': 'getAccount', 'account': account }, 
					success: function(data) {
						var name = $.parseJSON(data)["name"];	
						if (name && name.length > 0) {
							$('#'+id+" span.sender").text(name).append("<span class='account_note'> (" + account + ") </span>");
						}
				}
				});				
		}

		function show_messages() {
			  $.ajax({url: _node_url, data: {'requestType': 'getPrunableMessages', 'chain': 2, 'account': _current_channel_address, 'lastIndex': MAX_MESSAGES }, 
				success: function(data) {
					var mgs = $.parseJSON(data)["prunableMessages"];
					$("div.messages").empty();
					for(var i=mgs.length-1;i>=0;i--){
						if(mgs[i]['isText'] && mgs[i]['message']) {
							var date = new Date(mgs[i]['transactionTimestamp']*1000 + Date.UTC(2018));
							var _message = "<div class='message' id='" + mgs[i]['transactionTimestamp'] + "'><div class='message_header'><span class='sender'>" + 
											mgs[i]['senderRS'] + "</span><span class='datatime'> " + date.toLocaleString() + "</span></div><div class='message_body'>" + "</div></div>";
							$("div.messages").append(_message);
							$("#"+ mgs[i]['transactionTimestamp'] +' .message_body').text(mgs[i]['message']);
							
							_show_sender_name(mgs[i]['senderRS'], mgs[i]['transactionTimestamp']);
						}
					}
					$("#channel_name").text('# ' + _current_channel_name);
					$("#channel_address").text('' + _current_channel_address + '');
					
					$("a.channel").removeClass('selected_channel');
					$("#"+_current_channel_address).addClass('selected_channel');
					$("div.messages").animate({scrollTop: $("div.messages").prop("scrollHeight") }, 10);
				},
				error: function() {
					alert('error fecthing messages');
				}
			});
		
		}
		
		function _send_message(msg) {
			  $.ajax({url: _node_url, data: {'requestType': 'sendMessage', 'chain': 2, 'recipient': _current_channel_address, 
											 'secretPhrase': _passphrase, 'feeNQT': FEE_IGNIS*100000000,
											 'message': msg, 'messageIsText': true, 'messageIsPrunable': true
											 }, type: 'POST',
				success: function(data) {
						var rtn_msg = $.parseJSON(data);
						if(rtn_msg['errorDescription']) {
							alert('Error sending message: ' + rtn_msg['errorDescription']);
						} else {
							if(rtn_msg["transactionJSON"]) {
								$('#_message').val("");
								$("#_message").attr("placeholder", "Message Sent at " + (new Date(rtn_msg["transactionJSON"]['timestamp']*1000 + Date.UTC(2018))).toTimeString().split(' ')[0] + ". Message will be shown after around 60 senconds (block time).");
							}
						}						
				},
				error: function() {
					alert('error sending messages');
				}
			});		
		}
		
		$("a.channel").click(function() {
			$("a.channel").removeClass('selected_channel');
			_current_channel_address = this.getAttribute("id");
			_current_channel_name = this.getAttribute("data-channel-name");
			show_messages();	
			$(this).addClass('selected_channel');
		});
		
		$("#_message").keypress(function(e) {
			if(e.which == 13) {
				var msg = $(this).val();
				if( msg.length > 0 && _passphrase) {
					_send_message(msg);
				}
			}
		});
		
		$( document ).ready(function() {
				//if(localStorage) {
					//_passphrase = localStorage.getItem("_passphrase");
					//$("#text_passphrase").val(_passphrase);
					//_login();
				//}
				
				show_messages();
				setInterval(show_messages, REFRESH_TIMS*1000);				
		});		
  </script>





</html>

about.htm

<html lang="en">
<head>
<title>Michael Bee</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 38px;
  text-align: center;
  background: #110022;
  color: white;
}

/* Increase the font size of the heading */
.header h1 {
  font-size: 40px;
}

/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

/* Style the navigation bar links */
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}


/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Active/current link */
.navbar a.active {
  background-color: #666;
  color: white;
}

/* Column container */
.row {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  -ms-flex: 30%; /* IE10 */
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {   
  -ms-flex: 70%; /* IE10 */
  flex: 70%;
  background-color: white;
  padding: 20px;
}


/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1><font face="Bernard MT Condensed">mbee decentralized web</font></h1>
  <p>&#22312;<b>&#20998;&#25955;&#24335;</b>&#27231;&#21046;&#19978;&#24314;&#31435;&#32178;&#31449; </p>

</div>

<div class="navbar">
  <a href="/mbee">mbee</a>
  <a href="/mbee/about.htm"  class="active">about</a>
  <a target="_tab" href="http://75.119.151.97/index/blog.html?blogname=mbee" class="right">mbee blog</a>
</div>

<div class="row">
  <div class="side">
    <h2>mbee</h2>
    <p>
	Qora address :<br>
  	<font size="1">QM7SbiGEgof8zDKpd4x7kpQiyD32xuNbk9 </font> <br>
     </p>

   	
  </div>
  <div class="main">
    <h2>About mbee  Decentralized web </h2>
    <h5>Power by Qora blockchain</h5>    
    <p>
   mbee, Michael Bee.
   </p>
 
  </div>
</div>

<div class="footer">
  <h2>mbee</h2>
</div>

</body>
</html>

blogtitle

mbee blog

profileenable

yes

blogenable

home.htm

website

about.htm

blogtitle

profileenable