diff --git a/public_html/admin/functions.js b/public_html/admin/functions.js index 17f6b4b30d94b7017868626312ef86b47c4b3568..7650f5d31ce6382ddfb9581ec680a12c795a0871 100644 --- a/public_html/admin/functions.js +++ b/public_html/admin/functions.js @@ -34,7 +34,10 @@ async function show(body){ * @param {object} oLink link object; in a tag use this to reference itself */ async function showInOverlay(oLink){ - show('<h2>Please wait ...</h2><p>Requesting data...</p>'); + show( + '<h2>Please wait ...</h2>' + +'<p>Requesting data...<div class="spin"></div></p>' + ); let response = await fetch(oLink.href); let body = await response.text(); // read response body as text diff --git a/public_html/admin/main.css b/public_html/admin/main.css index 8f52376cff7a6a791c868ea7cbdbecca7c0281b9..a09355ae30946e6cecc4543fe85d3e6fe99262db 100644 --- a/public_html/admin/main.css +++ b/public_html/admin/main.css @@ -2,7 +2,7 @@ a{color:royalblue;} body{background: #f8f8f8; color: #234; font-family: arial; margin: 0;} h1{background:rgba(0,0,0,0.05); margin: 0 0 1em;; padding: 0.5em;} h1 a{color:#234; text-decoration: none;} -h2{background: #d0e0e8; color:#458; margin: 1em 0 0.5em; border-top: 2px solid #fff; border-left: 5px solid #fff; border-top-left-radius: 0.5em; padding: 0.5em; } +h2{background: #d0e0e8; color:#458; margin: 1em 0 0.5em; border-top: 2px solid #fff; border-left: 5px solid #fff; border-top-left-radius: 0.5em; padding: 0.5em; margin: 0 0 1em;} pre{background: rgba(0,0,0,0.02);padding: 0.3em 1em; border: 1px solid rgba(0,0,0,0.1); margin: 2em 0 3em;; border-bottom: 2px solid rgba(0,0,0,0.2);} @@ -10,6 +10,7 @@ tr:hover{background: #f4f0f8 !important;} footer{background:rgba(0,0,0,0.03); margin-top: 4em; text-align: right;padding: 1em;} .content{margin: 0 1em;} +.legend{background: #fff; padding: 1em;} .error{background: #fcc;} .warning{color:#651; background:#fec;} @@ -24,6 +25,7 @@ footer{background:rgba(0,0,0,0.03); margin-top: 4em; text-align: right;padding: .status-ok{color:#080; background:#cec; } .status-redirect{color:#651; background:#fec;} .status-error{color:#800; background:#ecc;} +.statuscode{background: rgba(255,255,255,0.8); font-size: 150%;} .location{background:#cde; border: 1px solid rgba(0,0,0,0.2); font-size: 125%; color:#236;} .location::before{content:' > '; color:#800; background-color: #fff;} @@ -32,3 +34,23 @@ footer{background:rgba(0,0,0,0.03); margin-top: 4em; text-align: right;padding: .overlay{position: fixed; margin: 0; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.3);overflow: scroll; display: none;} .overlay>div{margin: 3% 10%; background: #f8f8f8; padding: 1em;box-shadow: 0 0 3em #000; } +.spin { + display: inline-block; + width: 50px; + height: 50px; + border: 3px solid #ccc; + border-radius: 50%; + border-top-color: #1c87c9; + animation: spin 1s ease-in-out infinite; + -webkit-animation: spin 1s ease-in-out infinite; + } + @keyframes spin { + to { + transform: rotate(720deg); + } + } + @-webkit-keyframes spin { + to { + transform: rotate(0deg); + } + } \ No newline at end of file