diff --git a/scan.html b/scan.html index db55394..51c4daf 100644 --- a/scan.html +++ b/scan.html @@ -1,51 +1,116 @@ - + - - - -INSTALLER TOOL - - - - + + + Safebox - INSTALLER TOOL + + + -
-
-

Scanning your device for any previous installed versions

-
-
- - - - - - -
-
+
+
+ - -
-
-
- -
-
+
+
Scanning your device
+
Looking for any previously installed version
+
+
+
+
+
0%
+
+
+ +
+ +
+ +
+
+ diff --git a/style.css b/style.css index 9964017..243f713 100644 --- a/style.css +++ b/style.css @@ -21,6 +21,76 @@ table th {padding-left: 20px; text-align: left; color: var(--highlight-color); width: 25%;} table td {padding-left: 20px; text-align:left; width: 25%;} +.progress-box { + max-width: 300px; + margin: auto; + text-align: center; + align-items: center; + border: 2px solid #41464f; + padding: 30px 30px 0px 30px; + border-radius: 20px; +} +.progress-container-shadow { + width: 300px; + height: 40px; + background-color: var(--highlight-color); + border-radius: 5px; + overflow: hidden; + position: relative; + margin: 40px auto 0px auto; +} +.progress-container-shadow::after { + content: ""; + position: absolute; + inset: 0; + background-color: rgba(0, 0, 0, 0.5); + pointer-events: none; +} +.progress-container { + width: 280px; + height: 40px; + border-radius: 5px; + overflow: hidden; + position: relative; + margin: 0px; + top:-45px; + left:5px; +} +.progress-bar { + height: 100%; + background-color: var(--highlight-color); + width: 0%; + border-radius: 5px; + transition: width 0.3s ease; + position: relative; +} +.progress-text { + font-size: 20px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-weight: bold; + color: #000000; + z-index: 10; +} +.progress-title { + text-align: left; + font-size: 18px; + font-weight: bold; + margin-bottom: 10px; +} +.progress-description { + text-align: left; + font-size: 16px; + margin-bottom: 10px; + color: #999; + min-height: 40px; +} +.controls { + text-align: center; +} + .sidebar { width: 250px; background-color: #101214;