diff --git a/ui/public/index.html b/ui/public/index.html
index 536cbd04f9dacf58d9b020ff407d51e8c525b7cc..299ebcce3dcabedf338f98e1a1015de949d947df 100644
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -9,7 +9,7 @@
<link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="<%= BASE_URL %>static/css/bootstrap.min.css">
<link rel="stylesheet" href="<%= BASE_URL %>static/css/style.css">
- <link rel="stylesheet" href="<%= BASE_URL %>static/css/tsa.css">
+ <link rel="stylesheet" href="<%= BASE_URL %>static/css/tsa2.css">
<title>Sello de Tiempo - Blockchain Federal Argentina</title>
</head>
@@ -28,7 +28,7 @@
</nav>
<main>
<div class="container">
- <div class="tsa">
+ <div class="tsa2">
<h1>Sello de Tiempo</h1>
<p>El servicio de Sello de Tiempo de BFA permite demostrar que el contenido de cualquier documento digital existió en un momento y que desde entonces, no ha cambiado. Al sellar un archivo, cualquiera podrá verificar el dÃa y la hora en que su hash fue almacenado en Blockchain Federal Argentina. Tené en cuenta que el documento seleccionado nunca se sube a la red, garantizando su privacidad.</p>
<p class="font_small"><a href="https://bfa.ar/sello">Si tenés un archivo con Recibo Digital (.rd) verificalo aquÃ</a></p>
diff --git a/ui/public/static/css/tsa.css b/ui/public/static/css/tsa2.css
similarity index 68%
rename from ui/public/static/css/tsa.css
rename to ui/public/static/css/tsa2.css
index 936dc7bcdeee90116b179ba5c12906c0c8d9c46f..aff1cf23cd45d47fa1cace2eb8f2b3454705cdbd 100644
--- a/ui/public/static/css/tsa.css
+++ b/ui/public/static/css/tsa2.css
@@ -1,4 +1,7 @@
-.tsa .dropArea {
+#app{
+ margin-bottom: 20px;
+}
+.tsa2 .dropArea {
border: 1px dashed #0094D4;
background-color: #ffffff;
padding: 50px;
@@ -7,40 +10,52 @@
border-radius: 5px;
/* transition: 0.3s; */
position: relative;
- margin-bottom: 20px;
+}
+.tsa2 .btn-primary:active, .tsa2 .btn-primary:active:hover, .tsa2 .btn-primary:focus, .tsa2 .btn-primary:hover {
+ background-color: #fff;
+ color: #0094d4;
+ border-color: #0094d4;
+}
+
+.tsa2 .btn-success:active, .tsa2 .btn-success:active:hover, .tsa2 .btn-success:focus, .tsa2 .btn-success:hover {
+ background-color: #fff;
+ color: #4cae4c;
+ border-color: #4cae4c;
}
-.tsa .btn-pill {
+.tsa2 .btn-pill {
border-radius: 50px;
+ border-width: 2px;
+ font-weight: 400;
}
-.tsa .hash {
+.tsa2 .hash {
word-wrap: break-word;
}
-.tsa .dropArea p {
+.tsa2 .dropArea p {
margin-bottom: 5px;
}
-.tsa .dropArea:hover {
+.tsa2 .dropArea:hover {
border-style: solid;
background: rgba(0, 148, 212, 0.05);
}
-.tsa .dropArea .droptxt {
+.tsa2 .dropArea .droptxt {
font-size: 1.2em;
margin-bottom: 10px;
}
-.tsa .dropArea .glyphicon-cloud-upload {
+.tsa2 .dropArea .glyphicon-cloud-upload {
font-size: 8em;
margin-bottom: 40px;
color: #ccc;
}
-.tsa .overlay {
+.tsa2 .overlay {
position: absolute;
top: 0;
left: 0;
@@ -51,7 +66,7 @@
background: rgba(0, 148, 212, 0.10);
}
- .tsa .pulse{
+ .tsa2 .pulse{
-webkit-animation: pulse 1s infinite ease-in-out;
-o-animation: pulse 1s infinite ease-in-out;
-ms-animation: pulse 1s infinite ease-in-out;
@@ -59,7 +74,7 @@
animation: pulse 1s infinite ease-in-out;
}
-.tsa .loading {
+.tsa2 .loading {
background-color: rgba(0, 148, 212, 0.75);
text-align: center;
-webkit-border-radius: 5px;
@@ -78,31 +93,31 @@
}
}
@media screen and (max-width: 768px) {
- .tsa .dropArea .glyphicon-cloud-upload {
+ .tsa2 .dropArea .glyphicon-cloud-upload {
font-size: 4em;
margin-bottom: 20px;
}
- .tsa .dropArea {
+ .tsa2 .dropArea {
padding: 20px;
}
}
-.tsa [hidden]{
+.tsa2 [hidden]{
display: none !important;
}
-.tsa .btn-lg {
+.tsa2 .btn-lg {
min-width: 150px;
margin: 0 5px;
margin-top: 20px;
}
-.tsa .alert {
+.tsa2 .alert {
margin-top: 15px;
text-align: left;
}
-.tsa .alert p{
+.tsa2 .alert p{
margin-bottom: 0;
}
.drop-file {
@@ -111,23 +126,23 @@
}
-.tsa .center-v {
+.tsa2 .center-v {
position: relative;
top: 50%;
transform: translateY(-50%);
}
@media screen and (max-width: 992px) {
- .tsa h3 {
+ .tsa2 h3 {
margin-top: 30px;
}
- .tsa .nav-tabs {
+ .tsa2 .nav-tabs {
font-size: 1.3em;
}
}
@media screen and (max-width: 1200px) {
- .tsa .dropArea .droptxt {
+ .tsa2 .dropArea .droptxt {
font-size: 1em;
margin-bottom: 15px;
}
diff --git a/ui/src/components/DropFile.vue b/ui/src/components/DropFile.vue
index 3be621e8529f12fb6a2981734d76daaa6d1962db..c84966bbbf729363d6e3d03c19f97c659be6e78e 100644
--- a/ui/src/components/DropFile.vue
+++ b/ui/src/components/DropFile.vue
@@ -4,7 +4,23 @@
<div id="dropzone" class="overlay pulse" style="visibility: hidden;"></div>
<div class="loading overlay" v-if="loading">
- <img class="center-v" src="/static/images/loader.svg" width="100px" height="100px" alt="Cargando">
+ <svg aria-label="Cargando" class="center-v" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="100px" height="100px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+ <path opacity="0.4" fill="#fff" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
+ s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
+ c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
+ <path fill="#fff" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+ C22.32,8.481,24.301,9.057,26.013,10.047z">
+ <animateTransform attributeType="xml"
+ attributeName="transform"
+ type="rotate"
+ from="0 20 20"
+ to="360 20 20"
+ dur="0.5s"
+ repeatCount="indefinite"/>
+ </path>
+ </svg>
+ <!-- <img class="center-v" src="static/images/loader.svg" width="100px" height="100px" alt="Cargando"> -->
</div>
<div>
<div v-if="uploadedFiles.length == 0">