Updated Bulma CSS. Remastered whole GUI.
This commit is contained in:
Revertron
+88
-221
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html class="is-clipped">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
@@ -10,6 +10,91 @@
|
||||
</head>
|
||||
<body onload="onLoad();">
|
||||
|
||||
<div class="container">
|
||||
<!-- Credentials (Key management) -->
|
||||
<div class="content">
|
||||
<label class="label">Credentials</label>
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded has-icons-left">
|
||||
<input class="input is-expanded" type="text" id="public_key_hash" placeholder="No key loaded" readonly>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-lock"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="buttons has-addons">
|
||||
<button class="button is-info is-light" onclick="loadKey();">Load key</button>
|
||||
<button class="button is-info is-light" id="save_key" onclick="saveKey();" disabled>Save key</button>
|
||||
<button class="button is-info" onclick="createKey();">Mine new key</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help">To mine domains (or zones) you need to mine a strong pair of keys.</p>
|
||||
</div>
|
||||
|
||||
<!-- Domain mining -->
|
||||
<div class="content">
|
||||
<label class="label">Mine domain name</label>
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded has-icons-left">
|
||||
<input class="input is-expanded" type="text" placeholder="example.tld" id="new_domain" oninput="onDomainChange(this)">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-globe"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="buttons has-addons">
|
||||
<button id="add_record_button" class="button is-info is-light" onclick="showNewRecordDialog();">Add record</button>
|
||||
<button id="new_domain_button" class="button is-info" onclick="createDomain();">Mine domain</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help">Enter domain name, add some DNS-records, then hit the "Mine domain" button!</p>
|
||||
|
||||
<div id="domain_records">
|
||||
<!-- Here will be our domain records, added by dialog -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zone mining -->
|
||||
<div class="content">
|
||||
<label class="label">Mine new zone</label>
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded has-icons-left">
|
||||
<input class="input" type="text" placeholder="ygg" id="new_zone" oninput="onZoneChange()">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-map"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" type="number" placeholder="Difficulty: 20-28" id="new_zone_difficulty" name="Just a name" oninput="onZoneChange()">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-fire"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="buttons has-addons">
|
||||
<button class="button is-info" id="new_zone_button" onclick="createZone();">Mine zone</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help">If you feel that we need another zone you can mine that too. Just select a name, a difficulty for domains in that zone, and hit "Mine zone".</p>
|
||||
</div>
|
||||
|
||||
<!-- Help -->
|
||||
<div class="content center is-hidden" id="main">
|
||||
<h1>Welcome to ALFIS!</h1>
|
||||
<p>ALFIS stands for Alternative Free Identity System.</p>
|
||||
<p>It gives you an opportunity to create your own domains and use them in decentralized networks, store security certificates for browsers to trust without any centralized CA.</p>
|
||||
<h2>How this system works?</h2>
|
||||
<h3>If you just want to be able to resolve our domains</h3>
|
||||
<p>Carefully configure DNS section in <strong>alfis.toml</strong> and start ALFIS with <code>-n</code> command line switch.
|
||||
It will start without GUI, but will work as local DNS-resolver.</p>
|
||||
<h3>If you want to get your own domain</h3>
|
||||
<ul>
|
||||
<li>Generate a keypair in "Manage keys" part (you need just one for any number of domains)</li>
|
||||
<li>Check available zones (for now we have a test zone <code>.yy</code>). In future version a list of available zones will be somewhere here</li>
|
||||
<li>Go to "Mine domain" part and enter desired domain in first field, if it is not red - you can create it</li>
|
||||
<li>Carefully add needed DNS-records (you can add them later, but you will need to mine it again)</li>
|
||||
<li>Just click on "Mine domain" and wait for it, your domain (when properly cooked) will propagate to all blockchain nodes automatically</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="modal_dialog" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
@@ -38,7 +123,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="label">Type</label>
|
||||
<div class="select">
|
||||
<select id="record_type">
|
||||
@@ -98,7 +183,7 @@
|
||||
</div>
|
||||
<br/>
|
||||
<div class="buttons is-grouped is-centered">
|
||||
<button class="button is-primary" id="new_record_positive_button">Ok</button>
|
||||
<button class="button is-info" id="new_record_positive_button">Add</button>
|
||||
<button class="button is-link is-light" id="new_record_negative_button">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,224 +195,6 @@
|
||||
<p id="warning_text"></p>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-one-fifth">
|
||||
<div class="menu">
|
||||
<ul class="menu-list">
|
||||
<li><a class="is-active" onclick="openTab(this, 'main')">Main</a></li>
|
||||
</ul>
|
||||
<p class="menu-label">Key management</p>
|
||||
<ul class="menu-list">
|
||||
<li><a onclick="openTab(this, 'key_load')">Manage keys</a></li>
|
||||
</ul>
|
||||
<p class="menu-label">Domain management</p>
|
||||
<ul class="menu-list">
|
||||
<li><a onclick="openTab(this, 'dom_new')">Mine domain</a></li>
|
||||
<li><a onclick="openTab(this, 'zone_new')">Mine zone</a></li>
|
||||
<!--<li><a onclick="openTab(this, 'dom_edit')">Manage domain</a></li>
|
||||
<li><a onclick="openTab(this, 'dom_renew')">Renew domain</a></li>
|
||||
<li><a onclick="openTab(this, 'dom_transfer')">Transfer domain</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
</div><!--column-->
|
||||
|
||||
<div class="column auto">
|
||||
<div class="content center" id="main">
|
||||
<h1>Welcome to ALFIS!</h1>
|
||||
<p>ALFIS stands for Alternative Free Identity System.</p>
|
||||
<p>It gives you an opportunity to create your own domains and use them in decentralized networks, store security certificates for browsers to trust without any centralized CA.</p>
|
||||
<h2>How this system works?</h2>
|
||||
<h3>If you just want to be able to resolve our domains</h3>
|
||||
<p>Carefully configure DNS section in <strong>alfis.toml</strong> and start ALFIS with <code>-n</code> command line switch.
|
||||
It will start without GUI, but will work as local DNS-resolver.</p>
|
||||
<h3>If you want to get your own domain</h3>
|
||||
<ul>
|
||||
<li>Generate a keypair in "Manage keys" part (you need just one for any number of domains)</li>
|
||||
<li>Check available zones (for now we have a test zone <code>.yy</code>). In future version a list of available zones will be somewhere here</li>
|
||||
<li>Go to "Mine domain" part and enter desired domain in first field, if it is not red - you can create it</li>
|
||||
<li>Carefully add needed DNS-records (you can add them later, but you will need to mine it again)</li>
|
||||
<li>Just click on "Mine domain" and wait for it, your domain (when properly cooked) will propagate to all blockchain nodes automatically</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="content is-hidden" id="key_load">
|
||||
<div class="field">
|
||||
<label class="label">Key path</label>
|
||||
<p id="key_file_name">Not loaded</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Public key</label>
|
||||
<p id="key_public_key">Not loaded</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Public key hash</label>
|
||||
<p id="key_public_hash">Not loaded</p>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button class="button is-warning" onclick="createKey();">Mine new key</button>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<button class="button is-light" onclick="loadKey();">Load key</button>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<button id="save_key" class="button is-light" onclick="saveKey();" disabled>Save key</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content is-hidden" id="dom_new">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="field">
|
||||
<label class="label">Domain name</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="example.ygg" id="new_domain" oninput="onDomainChange(this)" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="field">
|
||||
<label class="label">Domain tags (will be used for search)</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="blog, community, friendship" id="new_domain_tags" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block" id="domain_records">
|
||||
<!-- Here will be our domain records, added by dialog -->
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button id="new_domain_button" class="button is-warning" onclick="createDomain();" disabled>Mine domain</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button id="add_record_button" class="button is-light" onclick="showNewRecordDialog();" disabled>Add record</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content is-hidden" id="zone_new">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="field">
|
||||
<label class="label">Zone name</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="ygg" id="new_zone" oninput="onZoneChange()" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="field">
|
||||
<label class="label">Difficulty (for all domains in zone)</label>
|
||||
<div class="control">
|
||||
<input class="input" type="number" placeholder="20" id="new_zone_difficulty" oninput="onZoneChange()" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button class="button is-warning" id="new_zone_button" onclick="createZone();" disabled>Mine zone</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content is-hidden" id="dom_edit">
|
||||
<div class="field">
|
||||
<label class="label">Your existing domain name</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="example.ygg" id="change_domain">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">All new domain records</label>
|
||||
<div class="control">
|
||||
<textarea class="textarea" placeholder="@ IN AAAA 200:1111:2222:3333:4444:5555:6666:7777" id="change_domain_records"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Domain tags (will be used for search)</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="blog, community, friendship" id="change_domain_tags">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button class="button is-link" onclick="changeDomain();">Replace records</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content is-hidden" id="dom_renew">
|
||||
<div class="field">
|
||||
<label class="label">Your existing domain name</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="example.ygg" id="renew_domain">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Days to add</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="365" value="365" id="renew_domain_extend_days" disabled>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button class="button is-link" onclick="renewDomain();">Renew domain</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content is-hidden" id="dom_transfer">
|
||||
<div class="field">
|
||||
<label class="label">Your existing domain name</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="example.ygg" id="transfer_domain">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Public key of new owner</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="3764ef954577a1815db3cc65aa3e2b18a52f12a3f6fcbd6a10d9ce8d06741ddd" id="transfer_domain_transfer_owner">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button class="button is-link" onclick="transferDomain();">Transfer domain</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div> <!-- columns -->
|
||||
</div>
|
||||
|
||||
<div class="footer is-family-code">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
|
||||
Reference in New Issue
Block a user