<!DOCTYPE html>
<html lang="en">
<head>
<title>Ants Nation Contract</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script>
const apxinfo={headers:{xalias:"",xhash:"",xtribe:"smatchit", xapp:"smatchapp", xlang:"en" }};
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="static/js/openpgp.min.js"></script>
<script src="static/js/apxtribcli.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
.primary-color:black;
.secondary-color:red;
</style>
</head>
<body>
<div class="p-5 bg-primary text-white text-center">
<h1>apXtrib setup test</h1>
<p>To test quickly api interaction</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg">Fake Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3 class="mt-4">Some Links</h3>
<p>Lorem ipsum dolor sit ame.</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>Create an account</h2>
<div class="row g-3">
<div class="col-md-6">
<label for="inputalias" class="form-label">Your alias</label>
<input type="text" class="form-control" id="inputalias" placeholder="A public alias that any one see">
</div>
<div class="col-md-6">
<label for="inputemailrecovery" class="form-label">Email Recovery</label>
<input type="email" class="form-control" id="inputemailrecovery" placeholder="optional">
</div>
<div class="col-12">
<label for="inputpassphrase" class="form-label">A passphrase</label>
<input type="text" class="form-control" id="inputpassphrase" placeholder="optional, a passphrase to remember, each time something try to use your privateKey this passphrase will be requested">
</div>
<div class="col-12">
<button type="button" onclick="apx.generateKey(document.getElementById('inputpseudo').value,document.getElementById('inputpassphrase').value)" class="btn btn-primary">Generate keys</button>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label small" for="gridCheck">
<b>I trust smatchit to keep my private key and email </b><br>
<b>If i don't trust</b> please download your keys (be aware, none than you can have access to your cipher data).<br>
If you set a correct email then you will receive your keys on your mailbox (Carefull by sending email, smatchit and anyone that access to your email can see your keys).<br>
The safer to be sure no one else than your local browser can see it, just download localy and save it on a personnal cold support (usb key).<br>
If you use a browser that <b>can be accessible by someone else, don't forget to "logout"</b> to clean up any trace.<br>
If you have any suspicious please
</label>
</div>
</div>
<div class="btn-group">
<button class="btn btn-outline-primary" onclick="apx.downloadlink('pagans.privateKey');" >Download PrivateKey</button>
<button class="btn btn-outline-primary" onclick="apx.downloadlink('pagans.publicKey');">Download PublicKey</button>
</div>
<div class="col-12">
<label for="inputAddress2" class="form-label">My private Key:</label>
<p id="privatekey" class="small"></p>
</div>
<div class="col-12">
<label for="inputAddress2" class="form-label">My public Key:</label>
<p id="publickey" class="small"></p>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Create this identity</button>
</div>
</div>
</div>
</div>
</div>
<div class="mt-5 p-4 bg-dark text-white text-center">
<p>Footer</p>
</div>
</body>
</html>