UI updated.

developer27 · 014b44df
Commit<跨class="commit-sha">959c3f38 撰写 Sep 17, 2018 by developer27
Hide whitespace changes
Inline Side-by-side

Showing with82 additionsand34 deletions

index.htmlindex.html+17-16

script.jsscript.js+15-7

style.cssstyle.css+ 50-11

No files found.
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@


 name="viewport"content="width=device-width, initial-scale=1.0">
+
 rel="stylesheet"type="text/css"href="https://fonts.googleapis.com/css?family=Open+Sans"/>
 rel="stylesheet"href="style.css">
 src="script.js">
@@ -10,35 +11,35 @@

 onload="load()">
 id="top">
-id="title">BrowserExtension
+id="title"><跨class="idiff left"><跨id="orangeTitle">NFCReaderBrowserExtension

 id="line">

 id="mid">
 id="logo"src=“罗go.png"alt="">
 class="inputFields">
-id="in">
-list="functions"name="func"id="lista"placeholder="Function"oninput="change(event)">
-
-id="functions">
-
-
-
-
-id="send"onclick="onclickbutton()">SEND<跨class="nt">
-
-
-
-
+id="in">
+list="functions"name="func"id="lista"placeholder="Function"oninput="change(event)">
+
+id="functions">
+
+
+
+
+id="send"onclick="onclickbutton()">SEND<跨class="nt">
+
+
+
+

 id="bottom">
 class="result">
 id="out">
-

-
+




--- a/script.js
+++ b/script.js
@@ -242,14 +242,19 @@ function change(event) {

 if(result==undefined){
 document.querySelectorAll('.params').forEach(function(a){
-a.remove()
+//
+
+a.remove();
 })
 document.getElementById("in").style.width="30vw";
 //document.getElementById("arguments").innerHTML = "Unknown command";
 }
 elseif(result==""){
 document.querySelectorAll('.params').forEach(function(a){
-a.remove()
+//
+
+a.remove();
+
 })
 document.getElementById("in").style.width="30vw";
 }
@@ -259,7 +264,10 @@ function change(event) {
 vari;
 varsp=input.split(" ");
 document.querySelectorAll('.params').forEach(function(a){
-a.remove()
+//
+a.remove();
+
+
 })

 varsum=0;
@@ -280,11 +288,11 @@ function change(event) {
 }
 elseif(r.length>7){
 sum+=size/1.8+0.5;
-el.style.width=size/1.<跨class="idiff left right">8+"vw";
+el.style.width=size/1.<跨class="idiff left right">7+"vw";
 }
 else{
 sum+=size/1.2+1;
-el.style.width=size/1.<跨class="idiff left right">2+"vw";
+el.style.width=size/1.<跨class="idiff left right">1+"vw";
 }
 el.style.marginLeft="0.5vw";
 el.placeholder=r[i];
@@ -292,7 +300,7 @@ function change(event) {

 }

-varnewWidth=sum+3<跨class="idiff left right">1;
+varnewWidth=sum+3<跨class="idiff left right">3;
 document.getElementById("in").style.width=newWidth+1+"vw";


@@ -323,7 +331,7 @@ function onclickbutton() {
 varwidthI=o.length/1.3;
 if(key.startsWith("Status"))
 {
-widthI=o.length/1.
+widthI=o.length/1.<跨class="idiff left">2;
 }



--- a/style.css
+++ b/style.css
@@ -46,27 +46,55 @@

 #in{
 width:30vw;
-margin:autoauto;
+margin:autoauto;
 }

-
-#ininput{
+.params,#lista{
 display:inline-block;
 color:#47434C;
 height:4.8vh;
-font-size:3vh;
+font-size:2vh;
+font-weight:550;
 border-radius:0.9vh;
 border-color:#47434C;
 border-style:solid;
 border-width:0.16vh;
 padding:1vh1vh1vh1vh;
 text-align:center;
+animation-duration:0.5s;
+animation-name:slidein;
+
 }

-#ininput::placeholder{
-font-size:1.6vh;
+.params:focus,#lista:focus{
+box-shadow:000.2vw#FF5400;
+
+
+border:0.11vwsolid#FF5400;;
+}
+
+#lista{
+width:19vw;
+}
+
+@keyframesslidein{
+from{
+max-height:0px;
+transform:scale(0);
+opacity:0;
+}
+to{
+max-height:1000px;
+transform:scale(1);
+opacity:1;
+}
 }

+#ininput::placeholder{
+font-size:1.8vh;
+font-weight:normal;
+color:#47434C;
+}

 #send{
 margin-left:1vh;
@@ -77,9 +105,15 @@
 border-radius:0.8vh;
 border-color:none;
 border-style:solid;
-border-color:#FF5400;
+border-color:#FF5400;
 width:10vw;
 padding:1vh1vh1vh1vh;
+animation-duration:0.5s;
+animation-name:slidein;
+}
+
+#orangeTitle{
+color:#FF5400;
 }

 #bottom{
@@ -96,7 +130,7 @@
 display:block;
 padding-top:3vh;
 padding-bottom:3vh;
-width:4<跨class="idiff left right">0vw;
+width:4<跨class="idiff left right">5vw;
 margin:auto;
 }

@@ -106,7 +140,6 @@
 top:20vh;
 width:100vw;
 margin:auto;
-
 }

 fieldset{
@@ -117,22 +150,27 @@ fieldset {
 #outlabel{
 display:inline-block;
 height:5vh;
-width:7vw;
+width:10vw;
 text-align:left;
 color:#47434C;
 font-weight:bold;
 font-family:"Open Sans";
 padding-top:2vh;
 vertical-align:middle;
+animation-duration:0.5s;
+animation-name:slidein;
 }

-#outinput{
+#outinput{
 display:inline-block;
 color:#47434C;
 width:10vw;
 height:4vh;
 font-size:2vh;
 border-radius:0.9vh;
+font-family:"Open Sans";
 border:none;
 padding:1vh1vh1vh1vh;
+animation-duration:0.5s;
+animation-name:slidein;
 }
\ No newline at end of file