Added horizontal tabs to the new interface.
This commit is contained in:
Revertron
+58
-11
@@ -5,20 +5,64 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>ALFIS</title>
|
||||
{styles}
|
||||
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">
|
||||
{scripts}
|
||||
</head>
|
||||
<body onload="onLoad();">
|
||||
|
||||
<div class="container">
|
||||
<!-- Tabs -->
|
||||
<div class="tabs is-centered is-boxed">
|
||||
<ul>
|
||||
<li class="tab is-active">
|
||||
<a onclick="openTab(this, 'tab_credentials')">
|
||||
<span class="icon">
|
||||
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,3.18L19,6.3V11.22C19,12.92 18.5,14.65 17.65,16.17C16,14.94 13.26,14.5 12,14.5C10.74,14.5 8,14.94 6.35,16.17C5.5,14.65 5,12.92 5,11.22V6.3L12,3.18M12,6A3.5,3.5 0 0,0 8.5,9.5A3.5,3.5 0 0,0 12,13A3.5,3.5 0 0,0 15.5,9.5A3.5,3.5 0 0,0 12,6M12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8M12,16.5C13.57,16.5 15.64,17.11 16.53,17.84C15.29,19.38 13.7,20.55 12,21C10.3,20.55 8.71,19.38 7.47,17.84C8.37,17.11 10.43,16.5 12,16.5Z"></path></svg>
|
||||
</span>
|
||||
<span>Credentials</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="tab">
|
||||
<a onclick="openTab(this, 'tab_domains')">
|
||||
<span class="icon">
|
||||
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>
|
||||
</span>
|
||||
<span>Domains</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="tab">
|
||||
<a onclick="openTab(this, 'tab_zones')">
|
||||
<span class="icon">
|
||||
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M18.25,22L15.5,19L16.66,17.82L18.25,19.41L21.84,15.82L23,17.23M20.5,3A0.5,0.5 0 0,1 21,3.5V13.36C20.36,13.13 19.69,13 19,13C17.46,13 16.06,13.6 15,14.56V7.1L9,5V16.9L13.04,18.3C13,18.54 13,18.77 13,19C13,19.46 13.06,19.92 13.16,20.36L9,18.9L3.66,20.97C3.59,21 3.55,21 3.5,21A0.5,0.5 0 0,1 3,20.5V5.38C3,5.15 3.16,4.97 3.35,4.9L9,3L15,5.1L20.33,3"></path></svg>
|
||||
</span>
|
||||
<span>Zones</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="tab">
|
||||
<a onclick="openTab(this, 'tab_events')">
|
||||
<span class="icon">
|
||||
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16L12,22L8,18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M4,4V16H8.83L12,19.17L15.17,16H20V4H4M6,7H18V9H6V7M6,11H16V13H6V11Z"></path></svg>
|
||||
</span>
|
||||
<span>Events</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="tab">
|
||||
<a onclick="openTab(this, 'tab_help')">
|
||||
<span class="icon">
|
||||
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"></path></svg>
|
||||
</span>
|
||||
<span>Help</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Credentials (Key management) -->
|
||||
<div class="content">
|
||||
<label class="label">Credentials</label>
|
||||
<div class="tab content" id="tab_credentials">
|
||||
<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>
|
||||
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"></path></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="buttons has-addons">
|
||||
@@ -31,13 +75,12 @@
|
||||
</div>
|
||||
|
||||
<!-- Domain mining -->
|
||||
<div class="content">
|
||||
<label class="label">Mine domain name</label>
|
||||
<div class="tab content is-hidden" id="tab_domains">
|
||||
<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>
|
||||
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="buttons has-addons">
|
||||
@@ -53,13 +96,12 @@
|
||||
</div>
|
||||
|
||||
<!-- Zone mining -->
|
||||
<div class="content">
|
||||
<label class="label">Mine new zone</label>
|
||||
<div class="tab content is-hidden" id="tab_zones">
|
||||
<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>
|
||||
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M18.25,22L15.5,19L16.66,17.82L18.25,19.41L21.84,15.82L23,17.23M20.5,3A0.5,0.5 0 0,1 21,3.5V13.36C20.36,13.13 19.69,13 19,13C17.46,13 16.06,13.6 15,14.56V7.1L9,5V16.9L13.04,18.3C13,18.54 13,18.77 13,19C13,19.46 13.06,19.92 13.16,20.36L9,18.9L3.66,20.97C3.59,21 3.55,21 3.5,21A0.5,0.5 0 0,1 3,20.5V5.38C3,5.15 3.16,4.97 3.35,4.9L9,3L15,5.1L20.33,3"></path></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="control has-icons-left">
|
||||
@@ -75,8 +117,13 @@
|
||||
<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>
|
||||
|
||||
<!-- Events and notifications -->
|
||||
<div class="tab content is-hidden" id="tab_events">
|
||||
<!-- TODO -->
|
||||
</div>
|
||||
|
||||
<!-- Help -->
|
||||
<div class="content center is-hidden" id="help">
|
||||
<div class="tab content is-hidden" id="tab_help">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user