Implemented Bulma for the new UI.
Tried to use the template element and JavaScript for some elements.
This commit is contained in:
Travis
parent
cb2e803ae8
commit
33340746dd
@ -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}
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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(){
|
||||
|
||||
@ -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>
|
||||
@ -1,3 +1,4 @@
|
||||
/*
|
||||
h2, h3{
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
@ -38,4 +39,5 @@ form label{
|
||||
#defriend{
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
*/
|
||||
@ -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>
|
||||
@ -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>
|
||||
BIN
onionr/static-data/www/shared/images/onionr-text.png
Normal file
BIN
onionr/static-data/www/shared/images/onionr-text.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
1
onionr/static-data/www/shared/main/bulma.min.css
vendored
Normal file
1
onionr/static-data/www/shared/main/bulma.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
53
onionr/static-data/www/shared/main/styles-new.css
Normal file
53
onionr/static-data/www/shared/main/styles-new.css
Normal 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;
|
||||
}
|
||||
@ -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");
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user