Implemented Bulma for the new UI.

Tried to use the template element and JavaScript for some elements.
This commit is contained in:
Travis 2019-06-28 16:24:34 -05:00
parent cb2e803ae8
commit 33340746dd
12 changed files with 860 additions and 202 deletions

View File

@ -10,7 +10,7 @@ function appendMessages(msg){
return
}
var msg = JSON.parse(msg)
var dateEl = document.createElement('span')
var dateEl = document.createElement('div')
var el = document.createElement('div')
var msgDate = msg['meta']['time']
if (msgDate === undefined){
@ -23,9 +23,29 @@ function appendMessages(msg){
dateEl.textContent = msgDate
el.className = 'entry'
el.innerText = msg['content']
document.getElementById('feed').appendChild(dateEl)
document.getElementById('feed').appendChild(el)
document.getElementById('feed').appendChild(document.createElement('br'))
/* Template Test */
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
// Instantiate the table with the existing HTML tbody
// and the row with the template
var template = document.getElementById('cMsgTemplate');
// Clone the new row and insert it into the table
var feed = document.getElementById("feed");
var clone = document.importNode(template.content, true);
var div = clone.querySelectorAll("div");
div[2].textContent = msg['content'];
div[3].textContent = msgDate;
feed.appendChild(clone);
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
}
function getBlocks(){
@ -48,6 +68,10 @@ document.getElementById('refreshFeed').onclick = function(){
getBlocks()
}
window.onload = function() {
getBlocks();
}
newPostForm.onsubmit = function(){
var message = document.getElementById('newMsgText').value
var postData = {'message': message, 'type': 'txt', 'encrypt': false}

View File

@ -1,31 +1,151 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>
Circle
</title>
<link rel='stylesheet' href='/shared/style/modal.css'>
<link rel='stylesheet' href='/shared/main/style.css'>
<link rel='stylesheet' href='theme.css'>
</head>
<body>
<h1>Circle</h1>
<p>
Anonymous message board
</p>
<form method='POST' action='/' id='addMsg'>
<textarea id='newMsgText' name='newMsgText' rows=10 cols=50 required minlength="2"></textarea>
<br><br>
<input class='btn successBtn' value='Post' type='submit'>
</form>
<br><br>
<div id='feed'>
<input class='primaryBtn' type='button' id='refreshFeed' value='Refresh Feed'>
<br><br>
<span id='none'>None Yet :)</span></div>
<script src='/shared/misc.js'></script>
<script src='board.js'></script>
</body>
<head>
<meta charset='utf-8'>
<!--Mobile responsive-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Circles
</title>
<link rel='shortcut icon' type='image/ico' href='/shared/images/favicon.ico'>
<link rel='stylesheet' href='/shared/main/bulma.min.css'>
<link rel="stylesheet" href="/shared/main/styles-new.css">
</head>
<body>
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item idLink" href="/">
<img src="/shared/images/favicon.ico"> Onionr
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item idLink" href="/">Home</a>
<a class="navbar-item idLink" href="/mail/">Mail</a>
<a class="navbar-item idLink" href="/friends/">Friends</a>
<a class="navbar-item idLink" href="/board/">Circles</a>
<a class="navbar-item idLink" href="/clandestine/">Clandestine</a>
</div>
</div>
</nav>
<!--Hero (Dark Section)-->
<section class="hero is-small is-dark">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column">
<h1 class="title">
Circles
</h1>
<h2 class="subtitle">
Anonymous message board
</h2>
</div>
<div class="column is-7">
<div class="field">
<label class="label">Open Site</label>
<div class="field has-addons">
<p class="control">
<a class="button is-static">Identity</a>
</p>
<p class="control is-expanded">
<input id="myPub" class="input myPub" type="text" readonly>
</p>
<p class="control">
<a id="myPubCopy" class="button is-primary">Copy</a>
</p>
</div>
</div>
<div class="field is-grouped is-grouped-centered">
<p class="control">
<a class="button is-link" id='refreshFeed'>Refresh Feed</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<br>
<!--Start Content-->
<div class="container">
<div class="columns">
<!--Add Friend-->
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Post message
</p>
</header>
<div class="card-content">
<div class="content">
<form method='POST' action='/' id='addMsg'>
<textarea id='newMsgText' class="textarea" name='newMsgText' rows=10 cols=50 required
minlength="2"></textarea>
<input class='btn successBtn' value='Post' type='submit'>
</form>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item">
<button class='button' type='submit'>Post</button>
</a>
</footer>
</div>
</div>
<!--Feed-->
<div class="column">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Feed
</p>
</header>
<div class="card-content">
<div class="content">
<div id='feed'>
<span id='none'>None Yet :)</span>
<!--Message Items are appended here based on template-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Template markup for Circle message-->
<template id="cMsgTemplate">
<div class="box" id="cMsgBox">
<div class="columns">
<div class="column" id="cMsg">
Message
</div>
<div class="column is-narrow" id="cMsgDate">
Date
</div>
</div>
</div>
</template>
<script src='/shared/misc.js'></script>
<script src='board.js'></script>
</body>
</html>

View File

@ -1,22 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>
Clandestine
</title>
<link rel='shortcut icon' type='image/ico' href='/shared/images/favicon.ico'>
<link rel='stylesheet' href='/shared/main/style.css'>
<link rel='stylesheet' href='/clandestine/clandestine.css'>
</head>
<body>
<div class='content'>
<img class='logo' src='/shared/images/onionr-icon.png' alt='onionr logo'>
<span class='logoText'>Clandestine</span>
<ul class='conversationList'></ul>
<head>
<meta charset='utf-8'>
<!--Mobile responsive-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Clandestine
</title>
<link rel='shortcut icon' type='image/ico' href='/shared/images/favicon.ico'>
<link rel='stylesheet' href='/shared/main/bulma.min.css'>
<link rel="stylesheet" href="/shared/main/styles-new.css">
</head>
<body>
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item idLink" href="/">
<img src="/shared/images/favicon.ico"> Onionr
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<script src='/shared/misc.js'></script>
<script src='/clandestine/js/main.js'></script>
</body>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item idLink" href="/">Home</a>
<a class="navbar-item idLink" href="/mail/">Mail</a>
<a class="navbar-item idLink" href="/friends/">Friends</a>
<a class="navbar-item idLink" href="/board/">Circles</a>
<a class="navbar-item idLink" href="/clandestine/">Clandestine</a>
</div>
</div>
</nav>
<!--Hero (Dark Section)-->
<section class="hero is-small is-dark">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column">
<h1 class="title">
Clandestine
</h1>
<h2 class="subtitle">
Instant messaging
</h2>
</div>
<div class="column is-7">
<div class="field">
<label class="label">Open Site</label>
<div class="field has-addons">
<p class="control">
<a class="button is-static">Identity</a>
</p>
<p class="control is-expanded">
<input id="myPub" class="input myPub" type="text" readonly>
</p>
<p class="control">
<a id="myPubCopy" class="button is-primary">Copy</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<br>
<div class='content'>
<ul class='conversationList'></ul>
</div>
<script src='/shared/misc.js'></script>
<script src='/clandestine/js/main.js'></script>
</body>
</html>

View File

@ -78,6 +78,7 @@ fetch('/friends/list', {
entry.appendChild(removeButton)
entry.appendChild(nameText)
friendListDisplay.appendChild(entry)
//I put the Template code here but it made things slightly worse
entry.onclick = (function(entry, nameText, peer) {return function() {
if (nameText.length == 0){
nameText = 'Anonymous'
@ -97,6 +98,30 @@ fetch('/friends/list', {
removeFriend(friendKey)
}
}
/* Template to add Friends to page */
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
// Instantiate the table with the existing HTML tbody
// and the row with the template
var template = document.getElementById('friendTemplate');
// Clone the new row and insert it into the table
var list = document.getElementById("friendList");
var clone = document.importNode(template.content, true);
var div = clone.querySelectorAll("div");
div[2].textContent = nameText.value;
div[3].textContent = peer;
div[3].setAttribute('data-pubkey', peer)
list.appendChild(clone);
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
})
document.getElementById('defriend').onclick = function(){

View File

@ -1,41 +1,168 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>
Onionr
</title>
<link rel='shortcut icon' type='image/ico' href='/shared/images/favicon.ico'>
<link rel='stylesheet' href='/shared/style/modal.css'>
<link rel='stylesheet' href='/shared/main/style.css'>
<link rel='stylesheet' href='/friends/style.css'>
</head>
<body>
<div id="friendInfo" class='overlay'>
<div class='overlayContent'>
<span class='closeOverlay' overlay='friendInfo'></span>
<div>Name: <span id='friendName'></span></div>
<label>Public Key: <input id='friendPubkey' type='text' readonly></label>
<button id='defriend' class='warnBtn'>Unfriend</button>
<head>
<meta charset='utf-8'>
<!--Mobile responsive-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Friends
</title>
<link rel='shortcut icon' type='image/ico' href='/shared/images/favicon.ico'>
<link rel='stylesheet' href='/shared/main/bulma.min.css'>
<link rel='stylesheet' href='/shared/main/styles-new.css'>
<link rel='stylesheet' href='/friends/style.css'>
</head>
<body>
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item idLink" href="/">
<img src="/shared/images/favicon.ico"> Onionr
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item idLink" href="/">Home</a>
<a class="navbar-item idLink" href="/mail/">Mail</a>
<a class="navbar-item idLink" href="/friends/">Friends</a>
<a class="navbar-item idLink" href="/board/">Circles</a>
<a class="navbar-item idLink" href="/clandestine/">Clandestine</a>
</div>
</div>
<div class='content'>
<img class='logo' src='/shared/images/onionr-icon.png' alt='onionr logo'>
<span class='logoText'>Onionr Friends</span>
<br><br>
<a href='/' class='idLink'>Home</a>
<h2>Friend Manager</h2>
<form id='addFriend' action='/' method='POST'>
<label>Friend ID: <input type='text' name='addKey' placeholder='public key/ID' minlength="56" maxlength="56" required></label>
<label>Set Alias: <input type='text' name='data' placeholder='what to call them'></label>
<input type='submit' value='Add Friend' class='successBtn'>
</form>
<h2>Friend List:</h2>
Click name to view info<br><br>
<div id='friendList'>
</nav>
<!--Hero (Dark Section)-->
<section class="hero is-small is-dark">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column">
<h1 class="title">
Friends
</h1>
<h2 class="subtitle">
Manage your friend list
</h2>
</div>
<div class="column is-7">
<div class="field">
<label class="label">Open Site</label>
<div class="field has-addons">
<p class="control">
<a class="button is-static">Identity</a>
</p>
<p class="control is-expanded">
<input id="myPub" class="input myPub" type="text" readonly>
</p>
<p class="control">
<a id="myPubCopy" class="button is-primary">Copy</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='/shared/misc.js'></script>
<script src='/friends/friends.js'></script>
</body>
</div>
</section>
<br>
<!--Start Content-->
<div class="container">
<div class="columns">
<!--Add Friend-->
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Add Friend
</p>
</header>
<div class="card-content">
<div class="content">
<form id='addFriend' action='/' method='POST'>
<div class="field">
<label class="label">Friend ID</label>
<p class="control is-expanded">
<input id="" class="input" type="text" name='addKey' placeholder='Public Key/ID'
minlength="56" maxlength="56" required>
</p>
</div>
<div class="field">
<label class="label">Alias</label>
<p class="control is-expanded">
<input id="" class="input" type="text" name='data' placeholder='Name'>
</p>
</div>
<form>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item">
<button class="button" type='submit'>Add to list</button>
</a>
</footer>
</div>
</div>
<!--Friend List-->
<div class="column">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Friend List
</p>
</header>
<div class="card-content">
<div class="content">
<div id='friendList'>
<!--Friend list is appended here-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="friendInfo" class='overlay'>
<div class='overlayContent'>
<span class='closeOverlay' overlay='friendInfo'></span>
<div>Name: <span id='friendName'></span></div>
<label>Public Key: <input id='friendPubkey' type='text' readonly></label>
<button id='defriend' class='warnBtn'>Unfriend</button>
</div>
</div>
<!--Template markup for friend list-->
<template id="friendTemplate">
<div class="box">
<div class="columns">
<div class="column is-narrow" id='friendName'>
Name
</div>
<div class="column" id='friendPubkey'>
Public Key
</div>
<div class="column is-narrow friendRemove" id='defriend'>
<a class="">Delete</a>
</div>
</div>
</div>
</template>
<script src='/shared/misc.js'></script>
<script src='/friends/friends.js'></script>
</body>
</html>

View File

@ -1,3 +1,4 @@
/*
h2, h3{
font-family: Arial, Helvetica, sans-serif;
}
@ -38,4 +39,5 @@ form label{
#defriend{
display: block;
margin-top: 1em;
}
}
*/

View File

@ -1,75 +1,167 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>
Onionr Mail
</title>
<link rel='shortcut icon' type='image/ico' href='/shared/images/favicon.ico'>
<link rel='stylesheet' href='/shared/style/modal.css'>
<link rel='stylesheet' href='/shared/main/style.css'>
<link rel='stylesheet' href='/mail/mail.css'>
</head>
<body>
<div id="infoOverlay" class='overlay'>
<head>
<meta charset='utf-8'>
<!--Mobile responsive-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Onionr Mail
</title>
<link rel='shortcut icon' type='image/ico' href='/shared/images/favicon.ico'>
<link rel='stylesheet' href='/shared/main/bulma.min.css'>
<link rel="stylesheet" href="/shared/main/styles-new.css">
</head>
<body>
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item idLink" href="/">
<img src="/shared/images/favicon.ico"> Onionr
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class='content'>
<img class='logo' src='/shared/images/onionr-icon.png' alt='onionr logo'>
<span class='logoText'>Onionr Mail ✉️</span>
<br><br>
<div><a href='/' class='idLink'>Home</a> <button class='refresh'>Refresh Page</button></div>
<div class='mailPing'>
API server either shutdown, has disabled mail, or has experienced a bug.
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item idLink" href="/">Home</a>
<a class="navbar-item idLink" href="/mail/">Mail</a>
<a class="navbar-item idLink" href="/friends/">Friends</a>
<a class="navbar-item idLink" href="/board/">Circles</a>
<a class="navbar-item idLink" href="/clandestine/">Clandestine</a>
</div>
<br>
<div>🕵️‍♂️ Current Used Identity: <input class='myPub' type='text' readonly></div>
<br><br>
<div class="btn-group" id='tabBtns'>
<button class='activeTab'>Inbox</button><button>Sentbox</button><button>Send Message</button>
</div>
<div id='threads' class='threads'>
<div id='threadPlaceholder'>Nothing here yet 😞</div>
</div>
<div id='messageDisplay' class='overlay'>
<div class='overlayContent'>
<span class='closeOverlay' overlay='messageDisplay'></span>
<div>
From: <input type='text' id='fromUser' readonly> Signature: <span id='sigValid'></span> <span id='addUnknownContact'><button>Add to Contacts</button></span>
</div>
</nav>
<!--Hero (Dark Section)-->
<section class="hero is-small is-dark">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column">
<h1 class="title">
Mail
</h1>
<h2 class="subtitle">
Send email style messages to persons
</h2>
</div>
<div class='break-up'>
Subject: <span id='subjectView'></span>
<div class="column is-7">
<div class="field">
<label class="label">Open Site</label>
<div class="field has-addons">
<p class="control">
<a class="button is-static">Identity</a>
</p>
<p class="control is-expanded">
<input id="myPub" class="input myPub" type="text" readonly>
</p>
<p class="control">
<a id="myPubCopy" class="button is-primary">Copy</a>
</p>
</div>
</div>
<div class="field is-grouped is-grouped-centered">
<p class="control">
<a class="button is-link refresh">Refresh Page</a>
</p>
</div>
</div>
<div>
<button id='replyBtn' class='primaryBtn break-up'>Reply</button>
</div>
<div id='signatureValidity'></div>
<div id='threadDisplay' class='pre messageContent'>
</div>
</div>
</div>
<div id='sentboxDisplay' class='overlay'>
<div class='overlayContent'>
<span class='closeOverlay' overlay='sentboxDisplay'></span>
To: <input id='toID' readonly type='text'>
<div id='sentboxDisplayText' class='pre messageContent'>
</div>
</div>
</div>
<div id='sendMessage' class='overlay'>
<div class='overlayContent'>
<label>Select friend: <select id='friendSelect'></select></label>
<form method='post' action='' id='sendForm' enctype="application/x-www-form-urlencoded">
<span class='closeOverlay' overlay='sendMessage'></span>
To: <input id='draftID' type='text' name='to' placeholder='pubkey' required>
Subject: <input name='subject' id='draftSubject' maxlength=25 type='text' placeholder='message subject'>
<textarea name='message' placeholder='type your message...' id='draftText' required></textarea>
<input type='submit' value='Send' class='successBtn'>
</form>
</div>
</div>
</div>
<script src='/shared/misc.js'></script>
<script src='/mail/mail.js'></script>
<script src='/mail/sendmail.js'></script>
</body>
</div>
</section>
<br>
<!--Start of content-->
<div class="container">
<div class="tabs">
<ul>
<li class="is-active">
<a>
<span>Inbox</span>
</a>
</li>
<li>
<a>
<span>Sent</span>
</a>
</li>
<li>
<a>
<span>Compose</span>
</a>
</li>
</ul>
</div>
</div>
<div id="infoOverlay" class='overlay'>
</div>
<div class='content'>
<div class='mailPing'>
API server either shutdown, has disabled mail, or has experienced a bug.
</div>
<div class="btn-group" id='tabBtns'>
<button class='activeTab'>Inbox</button><button>Sentbox</button><button>Send Message</button>
</div>
<div id='threads' class='threads'>
<div id='threadPlaceholder'>Nothing here yet 😞</div>
</div>
<div id='messageDisplay' class='overlay'>
<div class='overlayContent'>
<span class='closeOverlay' overlay='messageDisplay'></span>
<div>
From: <input type='text' id='fromUser' readonly> Signature: <span id='sigValid'></span> <span
id='addUnknownContact'><button>Add to Contacts</button></span>
</div>
<div class='break-up'>
Subject: <span id='subjectView'></span>
</div>
<div>
<button id='replyBtn' class='primaryBtn break-up'>Reply</button>
</div>
<div id='signatureValidity'></div>
<div id='threadDisplay' class='pre messageContent'>
</div>
</div>
</div>
<div id='sentboxDisplay' class='overlay'>
<div class='overlayContent'>
<span class='closeOverlay' overlay='sentboxDisplay'></span>
To: <input id='toID' readonly type='text'>
<div id='sentboxDisplayText' class='pre messageContent'>
</div>
</div>
</div>
<div id='sendMessage' class='overlay'>
<div class='overlayContent'>
<label>Select friend: <select id='friendSelect'></select></label>
<form method='post' action='' id='sendForm' enctype="application/x-www-form-urlencoded">
<span class='closeOverlay' overlay='sendMessage'></span>
To: <input id='draftID' type='text' name='to' placeholder='pubkey' required>
Subject: <input name='subject' id='draftSubject' maxlength=25 type='text'
placeholder='message subject'>
<textarea name='message' placeholder='type your message...' id='draftText' required></textarea>
<input type='submit' value='Send' class='successBtn'>
</form>
</div>
</div>
</div>
<script src='/shared/misc.js'></script>
<script src='/shared/tabs.js'></script>
<script src='/mail/mail.js'></script>
<script src='/mail/sendmail.js'></script>
</body>
</html>

View File

@ -1,58 +1,192 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>
Onionr
</title>
<link rel='shortcut icon' type='image/ico' href='/shared/images/favicon.ico'>
<link rel='stylesheet' href='/shared/main/style.css'>
<link rel='stylesheet' href='/private/main.css'>
</head>
<body>
<div id="shutdownNotice" class='overlay'>
<div>
<p>Your node will shutdown. Thank you for using Onionr.</p>
<head>
<meta charset='utf-8'>
<!--Mobile responsive-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Onionr
</title>
<link rel='shortcut icon' type='image/ico' href='/shared/images/favicon.ico'>
<link rel='stylesheet' href='/shared/main/bulma.min.css'>
<link rel="stylesheet" href="/shared/main/styles-new.css">
</head>
<body>
<div id="shutdownNotice" class='overlay'>
<div>
<p>Your node will shutdown. Thank you for using Onionr.</p>
</div>
</div>
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item idLink" href="/">
<img src="/shared/images/favicon.ico"> Onionr
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item idLink" href="/">Home</a>
<a class="navbar-item idLink" href="/mail/">Mail</a>
<a class="navbar-item idLink" href="/friends/">Friends</a>
<a class="navbar-item idLink" href="/board/">Circles</a>
<a class="navbar-item idLink" href="/clandestine/">Clandestine</a>
</div>
</div>
<div class='content'>
<img class='logo' src='/shared/images/onionr-icon.png' alt='onionr logo'>
<span class='logoText'>Onionr</span>
<br><br>
<div>🕵️‍♂️ Current Used Identity: <input class='myPub' type='text' readonly></div>
<br>
<button id='shutdownNode' class='warnBtn'>Shutdown Node</button> <button id='refreshStats' class='primaryBtn'>Refresh Stats</button>
<br><br>
<h1>Onionr Services</h1>
<label>Open Site: <input type='text' id='siteViewer' placeholder='Site Hash'> <button id='openSite' class='primaryBtn openSiteBtn'>Open Onionr Site</button></label>
<br>
<br><br><a class='idLink' href='/mail/'>Mail</a> - <a class='idLink' href='/friends/'>Friend Manager</a> - <a class='idLink' href='/board/'>Boards</a> -
<a class='idLink' href='/clandestine/'>Clandestine</a>
<br><br><hr>
<details class='configArea'>
<summary><b>Edit Configuration</b></summary>
<br>
<p><em>Warning: </em><b>Some values can be dangerous to change. Use caution.</b></p>
<br>
<textarea class='configEditor'></textarea>
<button class='saveConfig successBtn'>Save Config</button>
</details>
<hr>
<h1>Statistics</h1>
<p>🕰️ Uptime: <span id='uptime'></span></p>
<h2>Connections</h2>
<p>🖇️ Last Received Request: <span id='lastIncoming'>None since start</span></p>
<p>⬇️ Total Requests Received: <span id='totalRec'>None since start</span></p>
<p>🔗 Outgoing Connections:</p>
<pre id='connectedNodes'></pre>
<h2>Blocks</h2>
<p>💾 Stored Blocks: <span id='storedBlocks'></span></p>
<p>📨 Blocks in queue: <span id='blockQueue'></span></p>
</nav>
<!--Hero (Dark Bar)-->
<section class="hero is-small is-dark">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column">
<h1 class="title">
Onionr
</h1>
<h2 class="subtitle">
Private Decentralized Communication
</h2>
</div>
<div class="column is-7">
<div class="field">
<label class="label">Open Site</label>
<div class="field has-addons">
<p class="control">
<a class="button is-static">Identity</a>
</p>
<p class="control is-expanded">
<input id="myPub" class="input myPub" type="text" readonly>
</p>
<p class="control">
<a id="myPubCopy" class="button is-primary">Copy</a>
</p>
</div>
</div>
<div class="field is-grouped is-grouped-centered">
<p class="control">
<a class="button is-danger is-outlined" id='shutdownNode'>Shutdown Node</a>
</p>
<p class="control">
<a class="button is-link" id='refreshStats'>Refresh Stats</a>
</p>
</div>
</div>
</div>
</div>
</div>
<script src='/shared/misc.js'></script>
<script src='/shared/main/stats.js'></script>
<script src='/shared/panel.js'></script>
<script src='/shared/configeditor.js'></script>
<script src='/shared/sites.js'></script>
</body>
</div>
</section>
<br>
<!--Start of content-->
<div class="container">
<div class="columns">
<div class="column">
<!--Onionr Card-->
<div class="card">
<header class="card-header">
<p class="card-header-title">
Onionr
</p>
</header>
<div class="card-content">
<div class="content">
<div class="field">
<label class="label">Open Site</label>
<div class="field has-addons">
<p class="control is-expanded">
<input class="input" type="text" id='siteViewer' placeholder="Site Hash">
</p>
<p class="control">
<a id='openSite' class="button is-info">Open Onionr Site</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="column">
<!--Statistics Card-->
<div class="card">
<header class="card-header">
<p class="card-header-title">
Statistics
</p>
</header>
<div class="card-content">
<div class="content">
<div class="columns">
<div class="column">
Security level here
</div>
<div class="column">
🕰️ Uptime: <span id='uptime'></span>
</div>
</div>
<h6>Connections</h6>
<div class="columns">
<div class="column">
Last Received: <span id='lastIncoming'>None since start</span>
</div>
<div class="column">
⬇️ Total Requests: <span id='totalRec'>None since start</span>
</div>
</div>
🔗 Outgoing Connections:
<div class="control">
<pre id='connectedNodes' class="textarea" rows="5" readonly>Unable to get nodes</pre>
</div>
<br>
<h6>Blocks</h6>
<div class="columns">
<div class="column">
💾 Stored Blocks: <span id='storedBlocks'></span>
</div>
<div class="column">
📨 Blocks in queue: <span id='blockQueue'></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Configuration Card-->
<div class="card">
<header class="card-header" id="configToggle">
<p class="card-header-title">
<a class="button is-white is-fullwidth">Edit Configuration</a>
</p>
</header>
<div class="card-content" id="configContent">
<div class="content">
<p><em>Warning: </em><b>Some values can be dangerous to change. Use caution.</b></p>
<textarea class='textarea configEditor' rows="20"></textarea>
<a class="button is-primary saveConfig">Save Config</a>
</div>
</div>
</div>
</div>
<br>
<script src='/shared/misc.js'></script>
<script src='/shared/main/stats.js'></script>
<script src='/shared/panel.js'></script>
<script src='/shared/configeditor.js'></script>
<script src='/shared/sites.js'></script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,53 @@
html {
background-color: #f5f5f5;
}
/* Config on homepage */
#configContent{
display:none;
}
#configContent.show{
display:block; /* P.S: Use `!important` if missing `#content` (selector specificity). */
}
.hiddenOverlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
}
/* https://stackoverflow.com/a/16778646/
* Kept due to shutdown message on homepage
*/
.overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:left;
z-index: 1000;
background-color: #2c2b3f;
color: white;
}
.closeOverlay{
background-color: white;
color: black;
border: 1px solid red;
border-radius: 5px;
float: right;
font-family: sans-serif;
}
.closeOverlay:after{
content: '❌';
padding: 5px;
}

View File

@ -103,4 +103,19 @@ for (var i = 0; i < idStrings.length; i++){
else{
idStrings[i].innerText = myPub
}
}
}
/* Copy public ID on homepage */
myPubCopy.onclick = function() {
var copyText = document.getElementById("myPub");
copyText.select();
document.execCommand("copy");
}
/* For Config toggle on homepage */
var toggle = document.getElementById("configToggle");
var content = document.getElementById("configContent");
toggle.addEventListener("click", function() {
content.classList.toggle("show");
});