<!DOCTYPE html>
<html>
<head>
<title>漢語公鏈論壇</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<!-- Layout and CSS altered from https://codepen.io/ahmadajmi/pen/YwNrNG -->
<style>
*,
*: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='app-layout'>
<div class='teams box'>
<div id='current_login_name'></div>
<div id='current_login_account'></div>
</div>
<div class='channels box'>漢語公鏈論壇
<ul class='channles-list'>
<li><a class="channel" id="ARDOR-Y8VS-TQC2-JJMF-36CRK" data-channel-name="論壇概念區" href="#" >
# 論壇概念區</a></li>
<li><a class="channel" id="ARDOR-BJW7-EHPW-8WZH-G2YYJ" data-channel-name="塗鴉板" href="#" >
# 塗鴉板</a></li>
<li><a class="channel" id="ARDOR-XM2A-CZ6G-8UAH-CQR2S" data-channel-name="Hong Kong 香港連儂牆" href="#" >
# HK 香港連儂牆</a></li>
<li><a class="channel" id="ARDOR-YD4L-V4HA-AMAY-85BD3" data-channel-name="Taiwan 台灣自由地" href="#" >
# TW 台灣自由地</a></li>
</ul>
<div class="app_info">
運用瀏覽器（Chrome 或 Firefox）打開此 html 存檔，默認信息讀取節點是 ：<br/><br/>
https://ardor.blockfrikis.com:27876/nxt <br/><br/>
以上網址或許會中斷服務，建議用戶安裝 Ardor Client 軟件，本機節點 full node 在線同步下，可自行修改此 html 存檔，把第219行默認網址改成：<br/><br/>
http://localhost:27876/nxt<br/> <br/>
使用本機終端內的節點（localhost）就不必依賴外接網站，可上載信息，是一種信息自由體現。 <br/><br/>
2023年9月附加版：<br/><br/>
<a target="_top" style="color: #808000" href="/hanboard">/hanboard</a> 信息讀取節點是 https://ardor.jelurida.com/nxt 不能上載信息<br/> <br/>
<a target="_top" style="color: #808000" href="/hanboard2">/hanboard2</a> 信息讀取節點是 http://localhost:27876/nxt <br/> <br/>
</div>
<div class="app_info">
周公吐哺通告<br/><br/>
原版出處是 : <a target="_tab" style="color: #808000" href="https://ardor.jelurida.com/nxt?requestType=downloadTaggedData&transactionFullHash=2a7e3b5d70c455f338ab88dd4418aa16aa965274763d9a4cfbf229f60c2e9b92&chain=2&retrieve=true">ardor-board-v001</a> ，
此 html 存檔有幾個外接網址，請自行評估網安。<br/><br/>
建議特別開個小存額 Ardor 戶口來運作此網頁，10 Ignis 足夠做多則信息上載。<br/><br/>
用 Ardor 錢包軟件發送 Message 可達到同樣效果，Encrypt Message 和 Message is Never Deleted
（<a target="_tab" style="color: #808000" href="https://ipfs.io/ipfs/QmTYEcGc3Vh1WYFs3ESxu1haWSYWnur2THdpT6HSG5UkD5/han_app_send_sample.jpg">見圖</a>）不打勾。<br/><br/>
<br/>
</div>
</div>
<div class='login box'>
<input type="password" style="text-align:left;margin-top:8px;height:1em;" id="text_passphrase" placeholder='在此輸入密碼'></input>
</div>
<div class='header box'><span id='channel_name'># test</span> <span id='channel_address'></span><div class='channel_info'>
取用任何 Ardor 錢包軟件發送 <strong>無加密</strong>信息到以上 Ignis 地址會顯現同樣效果。 :)</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='input box'>
<input type='text' placeholder='< - 持有 Ignis 者登入後可上載信息 ' id='_message' disabled='disabled' maxlength="500" >
</div>
</div>
</body>
<script>
var MAX_MESSAGES = 100;
var FEE_IGNIS = 0.16;
var REFRESH_TIMS = 30;
var _node_url = "https://ardor.blockfrikis.com:27876/nxt";
var _current_login_account;
var _passphrase;
var _current_channel_address = "ARDOR-Y8VS-TQC2-JJMF-36CRK";
var _current_channel_name = "論壇概念區";
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", "上載信息的地址是 " + _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", "上載信息的地址是 " + 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", "信息成功上載 " + (new Date(rtn_msg["transactionJSON"]['timestamp']*1000 + Date.UTC(2018))).toTimeString().split(' ')[0] + ". 信息將會在約60秒內顯示(1區塊時段)");
}
}
},
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>