From 8f684513fd211464f81408704f5a15731c0204df Mon Sep 17 00:00:00 2001 From: hael Date: Thu, 31 Jul 2025 11:30:09 +0000 Subject: [PATCH] install design --- install.html | 236 +++++++++--------- manage.html | 657 +-------------------------------------------------- style.css | 653 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 769 insertions(+), 777 deletions(-) create mode 100644 style.css diff --git a/install.html b/install.html index 86843fd..f4d7043 100644 --- a/install.html +++ b/install.html @@ -1,175 +1,167 @@ - - + + - - - -INSTALLER TOOL - - - - + + + Safebox - INSTALLER TOOL + + + - -
-
+ +
+
+ +

No any previous deployed environment has found

+
+

Base settings

+
+
- -

No any previous deployed environment found

- -
-Base settings -
-
- + +
+ +
-
+
- -
-Advanced settings + +
+
+
+

Advanced settings

+
+
-
- + +
-
-
-
-
+
+
+ diff --git a/manage.html b/manage.html index 80de069..e56cae6 100644 --- a/manage.html +++ b/manage.html @@ -4,662 +4,9 @@ Safebox - - + +
diff --git a/style.css b/style.css new file mode 100644 index 0000000..9964017 --- /dev/null +++ b/style.css @@ -0,0 +1,653 @@ + :root { + --highlight-color: #F9DB54; + } + + body { + margin: 0; + font-family: 'Switzer', sans-serif; + font-weight: 500; + font-size: 16px; + background-color: #000; + color: white; + display: flex; + height: 100vh; + } + + h4 { + font-size: 16px; + } + + table {border: 1px solid var(--highlight-color); width:100%;} + table th {padding-left: 20px; text-align: left; color: var(--highlight-color); width: 25%;} + table td {padding-left: 20px; text-align:left; width: 25%;} + + .sidebar { + width: 250px; + background-color: #101214; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 20px 0; + margin: 20px; + border-radius: 20px; + transition: width 0.3s; + } + + .logo { + text-align: center; + margin-bottom: 40px; + font-size: 24px; + font-weight: bold; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + } + + .logo img { + height: 30px; + } + + .menu { + display: flex; + flex-direction: column; + gap: 5px; + padding: 0 10px; + } + + .vpn-item { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 20px; + cursor: pointer; + color: white; + transition: color 0.3s; + } + + .menu-item { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 20px; + cursor: pointer; + color: white; + transition: color 0.3s; + } + + .menu-item:hover { + color: var(--highlight-color); + } + + .menu-item i { + font-size: 18px; + } + + .menu-item span { + display: inline; + } + + .menu-item img { + width: 24px; + } + + .menu-item.active { + background-color: var(--highlight-color); + color: black; + border-radius: 10px; + font-weight: bold; + } + + .menu-item.active:hover { + color: black; + } + +.menu-item span.arrow { + margin-left: auto; + color: gray; + font-size: 20px; + transition: transform 0.3s ease; +} + +.menu-item.open .arrow { + transform: rotate(180deg); +} + +.submenu { + display: none; + margin-left: 40px; + flex-direction: column; + margin-bottom: 10px; +} + +.submenu-item { + padding: 5px 14px; + font-size: 14px; + color: #ffffff; + cursor: pointer; + border-radius: 10px; +} + +.submenu-item:hover { + color: #000000; + background-color: var(--highlight-color); +} + + +/* Switch container */ +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 26px; +} + +/* Hide native checkbox */ +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* Slider background */ +.slider-text { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + border-radius: 26px; + transition: background-color 0.3s; + display: flex !important; + align-items: center; + justify-content: flex-end; /* default: OFF on the right */ + padding: 0 8px; + font-size: 12px; + font-weight: bold; + color: #fff; +} + +/* Circle */ +.slider-text::before { + content: ""; + position: absolute; + height: 22px; + width: 22px; + left: 2px; + top: 2px; + background-color: white; + border-radius: 50%; + transition: transform 0.3s; +} + +/* Checked: move dot, change background and text alignment */ +.switch input:checked + .slider-text { + background-color: #4CAF50; + justify-content: flex-start; +} + +/* Dot animation */ +.switch input:checked + .slider-text::before { + transform: translateX(34px); +} + + +/* Status label */ +.status-label { + font-size: 12px; + color: #888; + min-width: 28px; + text-align: left; +} + + .details { + color: white; + text-decoration: none; + } + + .yellow-row { + max-width:250px; + display: flex; + align-items: flex-start; + box-sizing: border-box; + margin: 0px; + width: 100%; + padding: 0 20px; + } + + .yellow-box { + background-color: var(--highlight-color); + color: black; + text-align: left; + margin: 0px; + padding: 10px 18px; + border-radius: 20px 20px 0px 20px; + font-weight: bold; + font-size: 12px; + } + + .yellow-corner { + padding:0px; + border: 0px; + display: flex; + margin: 0px; + margin-top: auto; + align-items: flex-end; + } + + .main { + flex: 1; + padding: 30px; + display: flex; + flex-direction: column; + overflow-y: auto; + } + + #appsContainer { + display: flex; + flex-wrap: wrap; + gap: 16px; + padding: 0px; + } + + .app { + border: 1px solid #41464f; + border-radius: 15px; + text-align: left; + padding: 20px; + width: 130px; + min-height: 200px; + text-align: left; + display: flex; + flex-direction: column; + align-items: left; + } + + .app-img { + padding: 0px; + } + + .app img { + border-radius: 15px; + background-color: #101214; + width: 70px; + height: 70px; + object-fit: contain; + margin-bottom: 20px; + padding: 30px; + } + + .app-label { + font-size: 10px; + color: #cccccc; + margin-bottom: 10px; + align-items: left; + text-align: left; + } + + .app-name { + font-size: 16px; + font-weight: bold; + margin-bottom: 30px; + } + + .more-btn { + background-color: inherit; + color: #cccccc; + border: 1px solid #cccccc; + border-radius: 15px; + padding: 18px; + font-size: 16px; + font-weight: 400; + cursor: pointer; + width: 100%; + font-weight: bold; + } + + .more-btn:hover { + color: var(--highlight-color); + border: 1px solid var(--highlight-color); + } + + .app-details { + padding: 0px 50px; + } + + .app-fields { + border: 1px solid #41464f; + border-radius: 15px; + text-align: left; + padding: 20px; + margin: 30px 0px 10px 0px; + display: flex; + flex-direction: column; + align-items: left; + } + + .app-fields .row { + display: block; + justify-content: space-between; + align-items: center; + padding: 5px 20px; + border-radius: 10px; + gap: 10px; + } + + #letsencrypt { + padding-top: 20px; + } + +.header-block { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 20px 0px; +} + +.logo-and-text { + display: flex; + align-items: flex-start; + gap: 16px; +} + +.applogo img { + border-radius: 15px; + background-color: #101214; + width: 70px; + height: 70px; + object-fit: contain; + padding: 40px; +} + +.text-content { + display: flex; + flex-direction: column; +} + +.title { + font-size: 28px; + font-weight: bold; + margin: 0; +} + +.subtitle { + font-size: 18px; + margin: 4px 0; + color: #999; +} + +.description { + font-size: 16px; + margin: 20px 0 0; + color: #999; + line-height: 1.5; +} + +.notification-btn { + background-color: var(--highlight-color); + color: black; + border: none; + padding: 10px 20px; + border-radius: 10px; + cursor: pointer; + font-weight: bold; + display: flex; + align-items: center; + gap: 10px; +} + + .main-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 30px; + } + + .main-header h1 { + margin: 0; + font-size: 28px; + } + + .main-header button { + background-color: var(--highlight-color); + color: black; + border: none; + padding: 10px 20px; + border-radius: 10px; + cursor: pointer; + font-weight: bold; + display: flex; + align-items: center; + gap: 10px; + } + + .input-row, .input-group { + display: flex; + justify-content: space-between; + align-items: center; + border: 1px solid #41464f; + padding: 15px 20px; + margin-bottom: 15px; + border-radius: 10px; + gap: 10px; + } + + .input-container { + display: flex; + align-items: center; + gap: 5px; + flex: 1; + justify-content: flex-end; + position: relative; + } + + .input-row input, + .input-row select, + .row input, + .row select { + background: transparent; + border: 1px solid #41464f; + padding: 8px 30px 8px 8px; + border-radius: 10px; + color: white; + transition: color 0.2s; + max-width: 40%; + box-sizing: border-box; + } + + .row input, + .row select { + padding: 12px 30px 12px 12px; + font-size: 16px; + } + + .input-row input:focus, + .input-row select:focus, + .row input, + .row select { + outline: none; + background-color: black; + color: var(--highlight-color); + } + + .input-row select, + .row select { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; + background-position: right 8px center; + background-size: 16px; + padding-right: 32px; + } + + .info-container { + position: relative; + left: -18px; + top: -22px; + display: inline-block; + font-family: Arial, sans-serif; + margin: 0px; + width: 0px; + } + + .info-icon { + background-color: var(--highlight-color); + color: black; + border-radius: 50%; + padding: 1px 4px; + cursor: pointer; + font-weight: bold; + font-size: 10px; + text-align: center; + line-height: 1; + display: inline-block; + } + + .tooltip { + visibility: hidden; + background-color: #333; + border-radius: 5px; + padding: 4px 8px; + position: absolute; + z-index: 1; + bottom: 100%; /* above the icon */ + left: 50%; + transform: translateX(-78%); + opacity: 0; + transition: opacity 0.3s; + /*white-space: nowrap;*/ + text-align: right; + width: 300px; + } + + .tooltip::after { + content: ""; + position: absolute; + top: 100%; /* bottom of tooltip */ + left: 80%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #333 transparent transparent transparent; + } + + .info-container:hover .tooltip { + visibility: visible; + opacity: 1; + } + + .clear-btn { + position: absolute; + right: 8px; + background: transparent; + border: none; + color: white; + cursor: pointer; + font-size: 16px; + padding: 0; + width: 20px; + height: 20px; + line-height: 20px; + text-align: center; + user-select: none; + } + + .save-button { + background-color: var(--highlight-color); + color: black; + border: none; + padding: 15px 30px; + font-size: 16px; + border-radius: 10px; + font-weight: bold; + cursor: pointer; + margin-top: 30px; + align-self: flex-start; + } + + .save-button:hover { + background-color: #f5c300; + } + + .buttons .btn { + background-color: black; + border: 1px solid #999; + color: #999; + padding: 10px 15px; + font-size: 14px; + border-radius: 5px; + font-weight: bold; + cursor: pointer; + margin-top: 10px; + align-self: flex-start; + } + + .buttons .btn:hover { + border: 1px solid #f5c300; + color: #f5c300; + } + + .hidden { + display: none; + } + + .popup { + width: 100%; + } + + .popup-content { + width: 100%; + text-align: left; + } + + #popup .row { + display: flex; + } + + @media (max-width: 768px) { + .sidebar { + width: 80px; + padding: 20px 5px; + } + + .logo { + font-size: 0; + } + + .logo span { + display: none; + } + + .menu-item { + justify-content: center; + gap: 0; + } + + .menu-item span { + display: none; + } + + .yellow-box { + font-size: 0; + padding: 10px; + } + + .input-row { + flex-direction: column; + align-items: flex-start; + } + + .input-container { + width: 100%; + justify-content: flex-start; + } + + .input-row input, + .input-row select { + max-width: 100%; + } + } +