f.strw
daf5ab6549
- PoW checks implemented - Networking implemented, two instances of Memechain can now be connected to each other and share one blockchain. - Minor front-end changes
106 lines
4.3 KiB
HTML
106 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Memechain</title>
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
|
|
<style>
|
|
.loading {
|
|
display: none;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
.loading .spinner-border {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Memechain</h1>
|
|
<em>your glorified nfts or something</em>
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div style="margin-top: 16px;" class="alert alert-{{ category }}" role="alert">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<div style="margin-top: 40px;" class="row">
|
|
<div class="col-md-6">
|
|
<h2>New Block</h2>
|
|
<form id="upload-form" action="/upload" method="post" enctype="multipart/form-data">
|
|
<div class="form-group">
|
|
<label for="image">Select Image:</label>
|
|
<input type="file" class="form-control-file" id="image" name="image" accept="image/*" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" id="upload-btn">Upload</button>
|
|
<div class="loading">
|
|
<div class="spinner-border" role="status">
|
|
<img style="height: 64px; width: 64px;" src="https://media.tenor.com/I6kN-6X7nhAAAAAi/loading-buffering.gif">
|
|
</div>
|
|
<p>Mining block...</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h2>Connected Nodes</h2>
|
|
<form action="/register_node" method="post">
|
|
<div class="form-group">
|
|
<label for="node_url">Node URL:</label>
|
|
<input type="text" class="form-control" id="node_url" name="node_url" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Connect Node</button>
|
|
</form>
|
|
<ul id="node-list" class="list-group mt-3"></ul>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<a href="/sync_chain" class="btn btn-primary">Sync Blockchain</a>
|
|
<hr>
|
|
<h2>Blockchain</h2>
|
|
<div id="blockchain"></div>
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
|
|
<script>
|
|
fetch('/chain')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const blockchainDiv = document.getElementById('blockchain');
|
|
data.forEach(block => {
|
|
const blockDiv = document.createElement('div');
|
|
blockDiv.innerHTML = `
|
|
<p>Index: ${block.index}</p>
|
|
<p>Timestamp: ${block.timestamp}</p>
|
|
<p>Image: <img style="height: 50%; width: 50%;" src="data:image/png;base64,${block.data}" alt="Block Image"></p>
|
|
<p>Previous Hash: ${block.previous_hash}</p>
|
|
<p>Hash: ${block.hash}</p>
|
|
<hr>
|
|
`;
|
|
blockchainDiv.appendChild(blockDiv);
|
|
});
|
|
});
|
|
fetch('/nodes')
|
|
.then(response => response.json())
|
|
.then(nodes => {
|
|
const nodeList = document.getElementById('node-list');
|
|
nodes.forEach(node => {
|
|
const listItem = document.createElement('li');
|
|
listItem.textContent = node;
|
|
listItem.classList.add('list-group-item');
|
|
nodeList.appendChild(listItem);
|
|
});
|
|
});
|
|
$('form').on('submit', function() {
|
|
$('.loading').show();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |