From 2cb5ecb0b3ae6e5eac4087e5a5fddf977ef28b58 Mon Sep 17 00:00:00 2001
From: Otto Zaiser <zaisero@nic.ar>
Date: Thu, 6 Sep 2018 18:05:13 -0300
Subject: [PATCH] =?UTF-8?q?Nuevo=20dise=C3=B1o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
GUI/index.html | 48 +++++++++++++++++++++++++++----------------
GUI/lib/css/style.css | 2 +-
GUI/lib/js/index.js | 30 ++++++++++++++++-----------
3 files changed, 49 insertions(+), 31 deletions(-)
diff --git a/GUI/index.html b/GUI/index.html
index ed0e7a7..101b8b6 100644
--- a/GUI/index.html
+++ b/GUI/index.html
@@ -2,37 +2,49 @@
<html ng-app>
<head>
<meta charset="utf-8">
- <link rel="stylesheet" type="text/css" href="lib/css/index.css">
<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="lib/css/style.css">
<script src="lib/js/angular.min.js"></script>
<script src="lib/js/bower_components/js-sha256/src/sha256.js"></script>
<script src="lib/js/jquery.min.js"></script>
<script src="lib/js/index.js"></script>
<script src="lib/js/bootstrap.min.js"></script>
- <title>BFA</title>
+ <title>TSA - Blockchain Federal Argentina</title>
</head>
<body>
- <div class="row">
- <h1>BFA</h1>
- </div>
- <div>
+ <nav class="navbar navbar-default">
+ <div class="container">
+ <div class="navbar-header">
+ <a class="navbar-brand" href="#">
+ <img alt="Blockchain Federal Argentina" src="lib/images/logo.svg" width="140" height="100">
+ </a>
+ </div>
+ </div>
+ </nav>
+ <main>
+ <div class="container">
+ <h1>Time Stamp Authority</h1>
<form class="box" method="post" action="" enctype="multipart/form-data">
- <div class="title">Stamp</div>
- <div class="center_div" id="stamp" ondrop="drop(event)" ondragover="allowDrop(event)">
- <div style="width: 100%; text-align: center; margin-top: 10px" id="stamp_info">Drop file <i class="fa fa-arrow-alt-circle-down"></i></div>
+ <h2>Stamp</h2>
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+ <div id="stamp" class="dropArea" ondrop="drop(event)" ondragover="allowDrop(event)">
+ <div><span class=" glyphicon glyphicon-cloud-upload" aria-hidden="true"></span></div>
+ <div class="droptxt">Soltá un archivo aquÃ<br>ó</div>
+ <div><button type="button" class="btn btn-primary">Seleccioná un archivo</button></div>
</div>
- <div id="ots_div" class="center_div">
- </div>
+ <div id="ots_div" class="loading"></div>
<hr>
- <div class="title">Verify</div>
- <div class="center_div" id="verify">
- <textarea id="verify_ots"></textarea>
+ <h2>Verify</h2>
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+ <div class="form-group">
+ <textarea id="verify_ots" class="form-control" rows="3"></textarea>
</div>
- <div class="center_div" style="width: 50%">
- <div id="response"></div>
- <button type="button" id="btn_verify">Verify</button>
+ <div id="response" role="alert"></div>
+ <div class="form-group">
+ <button type="button" id="btn_verify" class="btn btn-primary btn-lg">Verify</button>
</div>
</form>
- </div>
+ </div>
+ </main>
</body>
</html>
\ No newline at end of file
diff --git a/GUI/lib/css/style.css b/GUI/lib/css/style.css
index fdd2721..9e9eed1 100644
--- a/GUI/lib/css/style.css
+++ b/GUI/lib/css/style.css
@@ -28,7 +28,7 @@ body{
margin-bottom: 40px;
color: #ccc;
}
-.cargando{
+.loading{
background-color: #0094D4;
margin-top: 5px;
display: none;
diff --git a/GUI/lib/js/index.js b/GUI/lib/js/index.js
index 646c169..76ffc16 100644
--- a/GUI/lib/js/index.js
+++ b/GUI/lib/js/index.js
@@ -2,7 +2,8 @@ $(document).ready(function(){
$('#btn_verify').click(function(){
if($('#verify_ots').val() == ''){
- $('#response').html('<span class="glyphicon glyphicon-remove text-danger"></span> Debe ingresar el comprobante');
+ $('#response').html('<span class="glyphicon glyphicon-remove text-danger" aria-hidden="true"></span> Debe ingresar el comprobante');
+ $('#response').addClass('alert alert-danger');
}
verify($('#verify_ots').val());
@@ -10,7 +11,7 @@ $(document).ready(function(){
});
var tsa_api = 'http://tsaapi.pp.bfa.local/api/tsa/';
-var loader_gif = 'lib/images/ajax-loader.gif';
+var loader_gif = 'lib/images/loader.svg';
var ots_api = '';
var deadline_date = new Date('2018-09-03 00:00:00');
var current_date = new Date();
@@ -47,7 +48,7 @@ function drop(e){
hash.update(file_contents);
var file_hash = hash.hex();
- $('#stamp_info').html(file.name + ' <i class="far fa-file"></i>');
+ $('#stamp_info').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> '+file.name );
$.ajax({
url: tsa_api + "stamp/",
@@ -70,17 +71,18 @@ function drop(e){
function verify(json_ots){
-
+ $('#response').removeClass();
try{
var ots = JSON.parse(json_ots);
}
catch(err){
- $('#response').html('<span class="glyphicon glyphicon-remove text-danger"></span> Parámetros inválidos');
+ $('#response').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Parámetros inválidos');
+ $('#response').addClass('alert alert-danger');
return;
}
$('#response').html('<img src="' + loader_gif + '">');
-
+ $('#response').addClass('loading');
if(deadline_date<current_date){
verify_bfa(ots);
}
@@ -105,20 +107,24 @@ function verify_bfa(ots){
success: function(response){
if(response.status == 'success'){
- icon = 'glyphicon-ok text-success';
+ icon = 'glyphicon-ok';
+ st = 'alert alert-success';
}else if(response.status == 'pending'){
pending = true;
- icon = 'glyphicon-time text-warning';
+ icon = 'glyphicon-time';
+ st = 'alert alert-warning';
}else{
- icon = 'glyphicon-remove text-danger';
+ icon = 'glyphicon-remove';
+ st = 'alert alert-danger';
}
- message = '<span class="glyphicon ' + icon + '"></span> ' + response.messages;
+ message = '<span class="glyphicon ' + icon + '" aria-hidden="true"></span> ' + response.messages;
if(!pending){
message += ' - ots definitivo:' + response.permanent_ots;
}
$('#response').html(message);
+ $('#response').addClass(st);
},
error:function(jqXHR, textStatus, errorThrown){
@@ -128,8 +134,8 @@ function verify_bfa(ots){
responseText = 'No se pudo conectar a la Blockchain';
}
- $('#response').html('<span class="glyphicon glyphicon-remove text-danger"></span> ' + responseText);
-
+ $('#response').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> ' + responseText);
+ $('#response').addClass('alert alert-danger');
},
timeout:5000
--
GitLab