diff --git a/assets/css/style.css b/assets/css/style.css index d2033b5..fdd2c4f 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,935 +1,1082 @@ -/* ***** Common Css **** */ +/* ======================================================== + Base: Variables + ======================================================== */ :root { - scroll-behavior: initial; + /* Blue */ + --blue-100: #dbe6fe; + --blue-800: #1e4baf; + + /* Green */ + --green-100: #dcfce7; + --green-600: #16a34a; + --green-700: #047854; + + /* Neutral */ + --neutral-50: #f9fbfb; + --neutral-100: #f3f6f6; + --neutral-200: #e5ebeb; + --neutral-300: #d1dbdb; + --neutral-400: #9cafae; + --neutral-600: #4b6361; + --neutral-800: #1f3735; + --neutral-900: #112726; + + /* Primary */ + --primary-600: #0d948b; + --primary-800: #115e59; + --primary-950: #042f2c; + + /* Red */ + --red-50: #fef2f2; + --red-100: #fee2e2; + --red-700: #b91c1c; + --red-800: #991b1b; + + /* Yellow */ + --yellow-100: #fee4c7; + --yellow-850: #92400e; + /* Color Palette */ + --white: #fff; + /* Transition Defaults */ + --transition-speed: 0.3s; + + /* Font Sizes */ + --text-heading-2: 24px; + --text-heading-3: 20px; + --text-body: 16px; + --text-label: 14px; + --text-label-small: 12px; + /* Radius */ + --rounded-md: 12px; + --rounded-sm: 8px; + --rounded-xs: 4px; + /* Sidebar */ } +/* ======================================================== + Base: Reset + ======================================================== */ * { - margin: 0; - padding: 0; - text-decoration: none; - list-style: none; + margin: 0; + padding: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +body { + font-family: + -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + line-height: 1.375; + font-weight: 400; + color: var(--neutral-900); + background: var(--neutral-100); + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; } -a:hover, -a:focus, -a:active { - text-decoration: none; + +img { + max-width: 100%; + height: auto; } -ol, + ul { - margin: 0; - padding: 0; + list-style: none; + padding: 0; + margin: 0; } -img { - display: block; + +.divider-border { + height: 1px; + background: var(--neutral-200); } + +.container { +} + +/* ======================================================== + Base: Typography + ======================================================== */ a { - transition: 0.4s linear; - -webkit-transition: 0.4s linear; - text-decoration: none; + text-decoration: none; + -webkit-transition: all var(--transition-speed) ease; + -o-transition: all var(--transition-speed) ease; + transition: all var(--transition-speed) ease; } -body { - font-size: 14px; - font-weight: 400; - color: #212529; - text-decoration: none; - background: #f7f7f7; +a:hover { + text-decoration: none !important; } -.main-wrpper { - height: 100%; - width: 100%; - overflow: hidden; - padding: 40px 60px 60px 60px; - transition: all 0.3s linear; - -webkit-transition: all 0.3s linear; -} -/* ***** End Common Css **** */ - -/* **** toggler **** */ -.navbar-toggler {background-color: transparent;border-radius: 0;outline: none;box-shadow: none;border: none;padding: 0;margin-right: 16px;} -.navbar-toggler:focus {box-shadow: none;outline: none; } -.navbar-toggler .navbar-toggler-icon {background-image: unset;} -.navbar-toggler:active, -.navbar-toggler:focus { outline: none; } -.navbar-toggler-icon {width: 17px;height: 12px;background-image: none;position: relative;border-bottom: 2px solid #212529;transition: all 300ms linear;} -.navbar-toggler-icon:after, -.navbar-toggler-icon:before {width: 17px;position: absolute;height: 2px;background-color: #212529;top: 0;left: 0;content: "";z-index: 2;transition: all 300ms linear;} -.navbar-toggler-icon:after {top: 5px;} -/*header.show .navbar-toggler .navbar-toggler-icon:after {transform: rotate(45deg);} -header.show .navbar-toggler .navbar-toggler-icon:before {transform: translateY(5px) rotate(-45deg);} -header.show .navbar-toggler .navbar-toggler-icon {border-color: transparent;}*/ -/* **** End toggler **** */ - - - -.top-head{ - border-bottom: 1px solid #E9ECEF; - background: #FFF; - padding: 24px; - display: flex; - align-items: center; - justify-content: space-between; + +h2, +h3 { + color: var(--neutral-900); + font-weight: 500; } -.top-head h4{ - display: flex; - align-items: center; - margin: 0; - color: #212529; - font-size: 24px; - font-weight: 500; - line-height: 32px; - margin-left: 50px; + + +h2, +h3, +li, +p { + margin: 0; } -.top-head h4 img{ - max-width: 100%; - margin-right: 16px; + + +h2 { + font-size: var(--text-heading-2); + line-height: 1.33; } -.top-head ul.main-row{ - display: flex; - align-items: center; - justify-content: flex-end; + + +h3 { + font-size: var(--text-heading-3); + line-height: 1.4; } -.top-head ul.main-row li.main-col{ - margin-right: 16px; + + +body, +p { + font-size: var(--text-body); + line-height: 1.375; } -.top-head ul.main-row li.main-col:last-child{ - margin: 0; + +.label, +label { + font-size: var(--text-label); + line-height: 1.43; } -.top-head ul.main-row li.main-col .btn1{ - color:#FFF; - font-size: 16px; - font-weight: 500; - line-height: 18px; - border-radius: 6px; - background: #055160; - padding: 11px 16px; - display: table; - margin-right: 50px; -} -.top-head ul.main-row li.main-col .btn1:hover{ - background: #000; - color: #fff; -} - -/* **** Content **** */ -.chart-info-box{ - height: 350px; - padding: 24px; - border-radius: 16px; - background:#FFF; - box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10); - margin: 0 0 30px; -} -.chart-info-box ul li{ - display: flex; - align-items: center; - margin: 0 0 30px; + +.small, +label.small { + font-size: var(--text-label-small); + line-height: 1.33; } -.chart-info-box ul li:last-child{ - margin: 0; + +.bg-white { + background: var(--white); } -.chart-info-box ul li span{ - border-radius: 8px; - background:rgba(5, 81, 96, 0.10); - height: 32px; - width: 32px; - display: flex; - align-items: center; - justify-content: center; - margin-right: 16px; -} -.chart-info-box ul li span img{ - max-width: 60%; -} -.chart-info-box ul li h4{ - color: #49535C; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 20px; - margin: 0 0 4px; -} -.chart-info-box ul li h3{ - color: #212529; - font-size: 16px; - font-weight: 500; - line-height: 24px; - margin: 0; - display: flex; - align-items: center; + +a*:active, +a*:focus { + outline: 0; + border: 0; } -.chart-info-box ul li h3 img{ - margin-left: 8px; + +main { + padding-bottom: 32px; + padding-top: 88px; } -.chart-box-small { - height: 350px; /* Example fixed height; adjust as needed */ - padding: 24px; - border-radius: 16px; - background: #FFF; - box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10); - margin: 0 0 30px; - display: flex; - flex-direction: column; - justify-content: space-between; /* This helps distribute the space inside the container */ -} -.chart-box-small .box-title h4{ - color: #49535C; - font-size: 14px; - font-weight: 400; - line-height: 20px; - margin: 0; -} -.chart-box-small .box-title h3{ - color: #212529; - font-size: 20px; - font-weight: 500; - line-height: 28px; - margin: 0; + +/* Scrollbars */ +::-webkit-scrollbar { + width: 5px; + border-radius: var(--rounded-sm); } -.chart-box-small .box-body{ - margin: 0 auto; - display: inline-block; - position: relative; - width: 100%; +::-webkit-scrollbar-track { + background: var(--neutral-100); + border-radius: var(--rounded-sm); } -.chart-box-small .box-body-empty{ - min-height: 250px; - display: flex; - flex-flow: column; - justify-content: center; - align-items: center; +::-webkit-scrollbar-thumb { + background: var(--primary-600); + border-radius: var(--rounded-sm); } -.chart-box-small .box-body canvas { - max-width: 300px; /* Adjust as needed to control the size */ - margin: auto; /* This centers the canvas in the .box-body */ - display: block; /* Ensures the canvas respects the max-width */ +::-webkit-scrollbar-thumb:hover { + background: var(--primary-800); + border-radius: var(--rounded-sm); } -.chart-box-small .box-body.exitchart { - display: flex; - flex-direction: column; - justify-content: flex-end; - align-items: center; - width: 100%; - height: 100%; - max-width: 300px; - max-height: 350px; - margin: auto; - padding: 0; - overflow: hidden; + +.dropdown-item span { + font-size: var(--text-label); + font-weight: 400; + color: var(--neutral-900); } -.chart-box-big{ - border-radius: 16px; - background: #FFF; - box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10); - margin: 0 0 30px; + +.dropdown-item { + padding-top: 8px; + padding-bottom: 8px; } -.chart-box-big .box-title{ - border-bottom: 1px solid #E9ECEF; - padding: 16px 24px; + +.dropdown-menu { + padding: 0; } -.chart-box-big .box-title h4{ - color: #212529; - font-size: 20px; - font-weight: 500; - line-height: 28px; - display: flex; - align-items: center; - justify-content: space-between; - margin: 0; + +.dropdown-menu li a { + line-height: 1.5; } -.chart-box-big .box-title h4 span{ - display: block; - color: #4B6361; - font-size: 12px; - font-weight: 400; + +/* ======================================================== + Layout: Shared Cards And Charts + ======================================================== */ + +.chart-card-head { + padding: 16px 24px; } -.chart-box-big .box-title h4 .info-hintbx{ - margin-left: auto; - position: relative; + +.chart-card-head h3 { + margin-bottom: 5px; + color: var(--neutral-900); +} +.chart-card-head h6 { + color: var(--neutral-600); + font-size: var(--text-label); + font-weight: 400; +} +.chart-card-head h6 span { + display: inline-block; + font-weight: 500; +} + +.risk-header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + /* padding: 16px 24px; */ +} + +.risk-dashboard { + display: flex; + flex-direction: column; + height: 100%; +} + +.risk-count h2 { + color: var(--neutral-600); + font-size: var(--text-label); + font-weight: 400; +} + +.risk-count .count { + font-size: var(--text-heading-3); + font-weight: 500; + color: var(--neutral-900); + margin: 0; +} + +.chart-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + flex: 1; +} + +.chart-box { + height: 350px; +} + +.chart-empty-state { + flex: 1; + min-height: 220px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.chart-empty-state-inner { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} + +.chart-empty-state i { + font-size: 28px; + line-height: 1; + color: var(--neutral-900); +} + +.chart-empty-state p { + margin: 0; + color: var(--neutral-700); +} + +.alt-tech-empty-state { + min-height: 260px; +} + +.scoring-empty-state { + min-height: 300px; +} + +.scoring-card { + overflow: hidden; +} + +.scoring-inner { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + min-height: 300px; +} + +.chart-wrapper { + max-width: 350px; + overflow: hidden; + position: relative; + border-radius: 12px; + mask-image: linear-gradient(to bottom, black 85%, transparent 100%); + -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%); +} + +.scoring { + width: 100%; + max-width: 420px; + height: 320px !important; + margin: 0 auto; +} + +.form-title { + font-size: var(--text-heading-3); + font-weight: 500; + line-height: 1.33; + color: var(--neutral-900); } -.chart-box-big .box-title h4 .info-hintbx img{ - cursor: pointer; + +.shadow-s { + -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); } -.info-hintbx{ - margin-left: auto; - position: relative; + +.input { + border: 1px solid var(--neutral-300); } -.info-hintbx img{ - cursor: pointer; + +/* ======================================================== + Components: Buttons + ======================================================== */ + +.dropdown-toggle::after { + float: right; + margin-top: 8px; } -.chart-box-big .box-body{ - margin: 0 auto; - display: inline-block; - position: relative; - width: 100%; + +/* ======================================================== + Components: Summary, Scoring, Resources, Alt Tech Cards + ======================================================== */ +::-webkit-input-placeholder { + color: var(--neutral-600); + font-size: var(--text-body); + font-style: normal; + font-weight: 400; + line-height: 38px; } -.chart-box-big .box-body.exitchart { - display: flex; - flex-direction: column; - justify-content: flex-end; - align-items: center; - min-height: 400px; - margin: auto; - padding: 0; - overflow: hidden; + +::-moz-placeholder { + color: var(--neutral-600); + font-size: var(--text-body); + font-style: normal; + font-weight: 400; + line-height: 38px; } -.chart-box-big .box-body-empty{ - min-height: 350px; - display: flex; - flex-flow: column; - justify-content: center; - align-items: center; + +.resource-card { + border: 1px solid var(--neutral-200); } -.chart-box-big .box-body canvas { - max-width: 450px; /* Adjust as needed to control the size */ - margin: auto; /* This centers the canvas in the .box-body */ - display: block; /* Ensures the canvas respects the max-width */ -} -.chart-box-big .box-body .scoring canvas { - max-width: none; - margin: auto; - display: block; -} -.hint-hoverbox{ - position: absolute; - right: -15px; - max-width: 310px; - min-width: 310px; - width: 100%; - border: 1px solid rgba(75, 75, 75, 0.20); - border-radius: 8px; - background: #fff; - z-index:99; - opacity: 0; - visibility: hidden; - transition: .4s linear; - -webkit-transition: .4s linear; -} -.hint-hoverbox:after{ - position: absolute; - content: ''; - width: 16px; - height: 9px; - background-size: 100% 100%; - bottom: -8px; - right: 15px; -} -.chart-box-big .box-title h4 .info-hintbx:hover .hint-hoverbox{ - opacity: 1; - visibility: visible; -} -.info-hintbx:hover .hint-hoverbox{ - opacity: 1; - visibility: visible; -} -.hint-hoverbox h5{ - font-size: 16px; - font-weight: 500; - color: #212529; - background: #F5F5F5; - border-radius: 8px 8px 0 0; - padding: 8px 15px; - display: block; - border-bottom: 1px solid #E9ECEF; - margin: 0; -} -.hint-dt{ - padding: 15px; -} -.hint-dt p{ - font-size: 14px; - font-weight: normal; - color: #49535C; - line-height: 22px; - margin: 0 0 10px; - text-align: justify; -} -.hint-dt a{ - font-size: 14px; - font-weight: 500; - color: #055160; - display: table; - margin: 0; + +.resource-card h3 { + font-weight: 500; + min-height: 44px; + font-size: var(--text-label); + font-size: 16px; + font-weight: 500; + font-stretch: normal; + line-height: 1.38; + color: var(--neutral-900); } -.hint-dt a:hover{ - color: #111; + +.resource-card h6 { + font-size: var(--text-label); + font-weight: 400; + margin: 0; +} + +.resource-card { + height: 100%; } -.chart-box-big .box-body{ - padding: 24px; +.resource-card p { + margin-top: 16px; + margin-bottom: 16px; } -.chart-box-big .box-body img{ + +.resource-card img { max-width: 100%; - margin: 0 auto; + margin: 0 0 16px; + height: 32px; } -/* **** End Content **** */ +.gapy-3 { + gap: 16px 0; +} -.titlebar{ - padding: 18px 24px; - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid #E9ECEF; +.alttech-card { + border: 1px solid var(--neutral-200); + height: 100%; } -.titlebar h2{ - color: #212529; - font-size: 20px; - font-weight: 500; - line-height: 28px; - margin: 0; + +.alttech-title { } -.titlebar .dropdown-toggle{ - color: #055160; - font-size: 16px; - font-weight: 500; - line-height: 18px; - display: table; - border-radius: 6px; - border: 1px solid #055160; - background: #FFF; - padding: 10px 16px; - -webkit-transition: all 0.3s linear; - transition: all 0.3s linear; + +.alttech-title h5 { + font-size: var(--text-body); + margin: 0; + color: var(--neutral-900); } -.titlebar .dropdown-toggle:after{ - display: none; + +.alttech-title h6 { + font-size: var(--text-label-small); + font-weight: 400; } -.titlebar .dropdown-toggle i{ - margin-left: 10px; + +.green-700 { + color: var(--green-700); } -.titlebar .dropdown-menu{ - border-radius: 8px; - border: 1px solid rgba(0, 0, 0, 0.15); - background: #FFF; - padding: 4px 0; + +.alttech-text p { + /*overflow: hidden;*/ + /*display: -webkit-box;*/ + font-size: 14px; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; } -.titlebar .dropdown-menu li .dropdown-item{ - padding: 10px 16px; + +.sync-status { + gap: 28px 0; +} + +.sync-status-text { +} + +.sync-status-text h5 { + margin: 0; + font-size: var(--text-body); + color: var(--neutral-900); +} + +.sync-status-text h6 { + color: var(--neutral-600); + font-size: var(--text-label); + margin-bottom: 5px; + font-weight: 400; +} + +.sync-status-icon span{ + border-radius: 8px; + background:rgba(5, 81, 96, 0.10); + height: 32px; + width: 32px; display: flex; align-items: center; - color: #212529; - font-size: 14px; - font-weight: 400; - line-height: 20px; - -webkit-transition: all 0.3s linear; - transition: all 0.3s linear; -} -.titlebar .dropdown-menu li .dropdown-item img{ - max-width: 100%; - margin-right: 8px; + justify-content: center; } -.titlebar .dropdown-menu li .dropdown-item:hover{ - background: rgba(5, 81, 96, 0.20); + +.view-more button { + background: transparent; + border: 0; } -.titlebar button:hover{ - background: rgba(5, 81, 96, 0.20); + +/* ======================================================== + Components: Risk Table + ======================================================== */ +.risk-title-cell { + position: relative; + padding-left: 40px !important; + cursor: pointer; } -/* **** evaluation **** */ -.evaluation-wrp{ - border-radius: 16px; - background: #FFF; - box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10); - margin: 0 0 24px; +.chevron-icon { + position: absolute; + left: 16px; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + font-size: var(--text-label-small); + color: var(--neutral-600); + -webkit-transition: -webkit-transform 0.2s ease; + transition: -webkit-transform 0.2s ease; + -o-transition: transform 0.2s ease; + transition: transform 0.2s ease; + transition: + transform 0.2s ease, + -webkit-transform 0.2s ease; } -.evaluation-block{ - padding: 24px; + +.risk-row.expanded .chevron-icon { + -webkit-transform: translateY(-50%) rotate(90deg); + -ms-transform: translateY(-50%) rotate(90deg); + transform: translateY(-50%) rotate(90deg); } -.evaluation-block .thead-txt{ - padding: 12px 0; + +.expandable-content { + display: none; + background-color: #f5f5f5; } -.evaluation-block .thead-txt ul{ - display: flex; - align-items: center; + +.expandable-content.show { + display: table-row; } -.evaluation-block .thead-txt ul li{ - color: #212529; - font-size: 14px; - font-weight: 500; - line-height: 20px; -} -.evaluation-block .thead-txt ul li:first-child{ - margin-right: 43px; -} -.evaluation-block .thead-txt ul li:nth-child(3){ - margin-left: auto; - margin-right: 16px; - min-width: 135px; - text-align: center; -} -.evaluation-block .thead-txt ul li:last-child{ - min-width: 80px; - text-align: center; -} -.evaluation-block .accordion{ - padding: 0; - margin: 0; - border-radius: 0; - border: none; -} -.evaluation-block .accordion .accordion-item{ - border: none; - border-bottom: 1px solid #E9ECEF; - box-shadow: none; - outline: none; - border-radius: 0; - padding: 12px 0; -} -.evaluation-block .accordion .accordion-item:last-child{ - border: none; -} -.evaluation-block .accordion .accordion-item .accordion-button{ - padding: 0; - border: none; - box-shadow: none; - outline: none; - display: flex; - align-items: center; - background: transparent; - color: #212529; - font-size: 16px; - font-weight: 400; - line-height: 24px; + +.expandable-content td { + padding-left: 20px; } -.evaluation-block .accordion .accordion-item .accordion-button li:nth-child(4){ - min-width: 135px; - margin-left: auto; - margin-right: 16px; - text-align: center; + +.risk-table-container .table tr th { + font-weight: 500; + font-size: var(--text-label); } -.evaluation-block .accordion .accordion-item .accordion-button li:last-child{ - min-width: 80px; + +.risk-table-container .table th:first-child, +.risk-table-container .table td:first-child { + width: auto !important; } -.evaluation-block .accordion .accordion-item .accordion-button:after{ - display: none; + +.risk-table-container .table tr th:nth-child(3), +.risk-table-container .table tr th:nth-child(4) { + text-align: center; } -.evaluation-block .accordion .accordion-item .accordion-button b{ - font-weight: 500; + +.impacted-count { + text-align: center; } -.evaluation-block .accordion .accordion-item .accordion-button:focus{ - box-shadow: none; - outline: none; + +.description { + background: var(--neutral-200); + padding-top: 12px; + padding-bottom: 12px; } -.evaluation-block .accordion .accordion-item .accordion-button .arrow-box{ - margin: 0 16px; - display: flex; - align-items: center; - justify-content: center; - height: 16px; - width: 16px; + +.description-section { + margin-bottom: 10px; } -.evaluation-block .accordion .accordion-item .accordion-button.collapsed .arrow-box i:before{ - content: "\f285"; + +.risk-title { + color: var(--neutral-900); } -.evaluation-block .accordion .accordion-item .accordion-button .severity-label{ - color: #991B1B; - font-size: 14px; - font-weight: 500; - line-height: 20px; - border-radius: 12px; - background: #FEE2E2; - padding: 2px 12px; - display: table; - margin: 0 auto; -} -.evaluation-block .accordion .accordion-item .accordion-button .severity-label.label-medium{ - background: #FEF3C7; - color: #92400E; -} -.evaluation-block .accordion .accordion-item .accordion-button .severity-label.label-low{ - background: #DBEAFE; - color: #1E40AF; -} -.evaluation-block .accordion .accordion-item .accordion-body{ - border-radius: 8px; - border-bottom: 1px solid #E9ECEF; - background: rgba(5, 81, 96, 0.10); - padding: 12px 16px; - margin: 16px 0 0; -} -.evaluation-block .accordion .accordion-item .accordion-body p{ - color: #212529; - font-size: 14px; - font-weight: 400; - line-height: 20px; - margin: 0 0 8px; -} -.evaluation-block .accordion .accordion-item .accordion-body p span{ - display: block; - margin: 0 0 4px; - color: #49535C; - font-size: 12px; - font-weight: 400; - line-height: 16px; -} -.evaluation-btn{ - padding: 16px 24px; - display: flex; - align-items: center; - justify-content: flex-end; - border-top: 1px solid #E9ECEF; + +.section-label { + font-size: var(--text-label-small); + font-weight: 400; + color: var(--neutral-600); } -.evaluation-btn a{ - color: #055160; - font-size: 14px; - font-weight: 500; - line-height: 16px; - display: table; - padding: 8px 12px; - border-radius: 4px; + +.section-content { + font-size: var(--text-label); } -.evaluation-btn a:hover{ - background: #055160; - color: #fff; + +.impacted-resources-content { + font-size: var(--text-label); } -/* **** End evaluation **** */ +.severity-badge { + color: var(--colors-red-800); + font-size: var(--text-label); + font-weight: 500; + padding: 3px 12px; + border-radius: var(--rounded-md); +} -.resource-wrp{ - border-radius: 16px; - background: #FFF; - box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10); - margin: 0 0 24px; +.severity-high { + background-color: var(--red-100); + color: var(--red-800); } -.resource-wrp .resource-block{ - padding: 24px; + +.severity-medium { + background: var(--yellow-100); + color: var(--yellow-850); } -.resource-wrp .resource-block .resource-box{ - border-radius: 16px; - border: 1px solid #E9ECEF; - background: #FFF; - padding: 24px; + +.severity-low { + background: var(--blue-100); + color: var(--blue-800); } -.resource-wrp .resource-block .resource-box img{ - max-width: 100%; - margin: 0 0 16px; - height: 32px; + +.btn { + border-radius: 6px; + line-height: 40px; + padding: 0 16px; + font-weight: 500; + -webkit-transition: 0.4s; + -o-transition: 0.4s; + transition: 0.4s; } -.resource-wrp .resource-block .resource-box h3{ - color: #212529; - font-size: 16px; - font-weight: 500; - line-height: 24px; - margin: 0 0 4px; + +.btn-primary { + background: var(--primary-800); + color: var(--white); } -.resource-wrp .resource-block .resource-box h5{ - color: #49535C; - font-size: 14px; - font-weight: 400; - line-height: 20px; - margin: 0; + +.btn-outline-primary { + color: var(--primary-800); } -.resource-wrp .resource-collapse .resource-box{ - margin: 30px 0 0; + +.btn-light { + background: var(--neutral-100); + border: 1px solid var(--neutral-100); + color: var(--neutral-600); } +.btn-outline-primary, +.btn-primary { + border: 1px solid var(--primary-800); +} +.btn-sm { + font-size: var(--text-label); + font-weight: 500; + line-height: 34px; +} -.technologies-wrp{ - border-radius: 16px; - background: #FFF; - box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10); +.btn-primary:hover { + background: var(--primary-950); + border-color: var(--primary-950); } -.technologies-wrp .technologies-block{ - padding: 24px 24px 0; + +.btn-primary:hover svg:not(.filter-icon) path { + fill: var(--white); } -.technologies-wrp .technologies-block .technologies-box{ - border-radius: 16px; - border: 1px solid #E9ECEF; - background: #FFF; - margin: 0 0 24px; - padding: 24px; + +.btn-outline-primary:focus svg:not path, +.btn-outline-primary:active svg:not path, +.btn-outline-primary:hover svg:not path { + fill: var(--white); } -.technologies-wrp .technologies-block .technologies-box .box-icon{ - margin: 0 0 16px; + +.btn-outline-primary:hover svg.filter-icon path { + stroke: var(--white); } -.technologies-wrp .technologies-block .technologies-box .box-icon img{ - max-width: 100%; + +.btn-outline-primary:active, +.btn-outline-primary:hover { + background: var(--primary-800) !important; + border-color: var(--primary-800) !important; + color: var(--white) !important; } -.technologies-wrp .technologies-block .technologies-box h6{ - color: #49535C; - font-size: 12px; - font-weight: 400; - line-height: 16px; - margin: 0 0 2px; +.btn-outline-primary:active svg path, +.btn-outline-primary:hover svg path { + fill: white; } -.technologies-wrp .technologies-block .technologies-box h4{ - color: #212529; - font-size: 16px; - font-weight: 500; - line-height: 24px; - margin: 0 0 16px; + +.btn-light:hover { + background: var(--neutral-200); + border-color: var(--neutral-200); } -.technologies-wrp .technologies-block .technologies-box p{ - color: #49535C; - font-size: 14px; - font-weight: 400; - line-height: 20px; - margin: 0 0 16px; + +.dropdown-toggle::after { + border: 0; + display: none; } -.technologies-wrp .technologies-block .technologies-box ul li{ - color: #212529; - font-size: 14px; - font-weight: 400; - line-height: 20px; - margin: 0 0 8px; - display: flex; - align-items: center; + +.dropdown-toggle { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + gap: 8px; + padding-left: 16px; + padding-right: 16px; } -.technologies-wrp .technologies-block .technologies-box ul li:last-child{ - margin: 0; + +.btn-sm.dropdown-toggle { + padding-left: 12px; + padding-right: 12px; } -.technologies-wrp .technologies-block .technologies-box ul li i{ - max-width: 100%; - margin-right: 10px; + +.btn:focus-visible, +.btn.show:focus-visible, +.btn:first-child:active:focus-visible, +:not(.btn-check) + .btn:active:focus-visible { + -webkit-box-shadow: none !important; + box-shadow: none !important; } -.technologies-wrp .technologies-block .technologies-box ul li a{ - color: #212529; - font-size: 14px; - font-weight: 500; - line-height: 20px; - text-decoration: underline; - margin: 0; + +.btn-primary, +.btn-outline-primary { + /* --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + --bs-btn-focus-shadow-rgb: 13, 110, 253; + --bs-btn-disabled-bg: transparent; + --bs-btn-active-color: var(--neutral-white); + --bs-btn-hover-color: var(--neutral-white); + --bs-gradient: none; */ +} + +.btn-outline-primary { + --bs-btn-color: var(--primary-800); + --bs-btn-border-color: var(--primary-800); + --bs-btn-hover-color: var(--white); + --bs-btn-hover-bg: var(--primary-800); + --bs-btn-hover-border-color: var(--primary-800); + --bs-btn-active-color: var(--white); + --bs-btn-active-bg: var(--primary-800); + --bs-btn-active-border-color: var(--primary-800); + --bs-btn-disabled-color: var(--neutral-400); + --bs-btn-disabled-border-color: var(--neutral-300); + --bs-btn-focus-shadow-rgb: 17, 94, 89; +} + +.btn-outline-primary.show, +.btn-check:checked + .btn-outline-primary, +.btn-check:active + .btn-outline-primary, +.btn-outline-primary:focus, +.btn-outline-primary:focus-visible { + background: var(--primary-800) !important; + border-color: var(--primary-800) !important; + color: var(--white) !important; +} + +.btn-outline-primary.show svg.filter-icon path, +.btn-check:checked + .btn-outline-primary svg.filter-icon path, +.btn-check:active + .btn-outline-primary svg.filter-icon path, +.btn-outline-primary:focus svg.filter-icon path, +.btn-outline-primary:focus-visible svg.filter-icon path { + stroke: var(--white); +} + +.btn-primary.disabled, +.btn-primary:disabled { + border-color: var(--neutral-400); + background: var(--neutral-400); + color: var(--white); } +.btn-outline-primary.disabled, +.btn-outline-primary:disabled { + border-color: var(--neutral-300); + color: var(--neutral-400); +} -.technologies-wrp .titlebar .dropdown-menu{ - border-radius: 8px; - border: 1px solid rgba(75, 75, 75, 0.20); - background: #FFF; - width: 311px; - padding: 0; - box-shadow: none; - outline: none; - overflow: hidden; -} -.technologies-wrp .titlebar .dropdown-menu .drop-header{ - border-radius: 4px 4px 0px 0px; - border-bottom: 1px solid #E9ECEF; - background: #FFF; - padding: 8px 16px; -} -.technologies-wrp .titlebar .dropdown-menu .drop-header h3{ - color: #212529; - font-size: 16px; - font-weight: 500; - line-height: 24px; - margin: 0; +/* ======================================================== + Components: Filter Toggles + ======================================================== */ +.toggle-switch { + position: relative; + width: 44px; + height: 24px; } -.technologies-wrp .titlebar .dropdown-menu .drop-body{ - padding: 16px; + +.toggle-switch input[type="checkbox"] { + opacity: 0; + width: 0; + height: 0; } -.technologies-wrp .titlebar .dropdown-menu .drop-body .form-group{ - margin: 0 0 18px; + +.toggle-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--neutral-200); + -webkit-transition: 0.3s ease; + -o-transition: 0.3s ease; + transition: 0.3s ease; + border-radius: var(--rounded-md); } -.technologies-wrp .titlebar .dropdown-menu .drop-body .form-group .form-control{ - color: #49535C; - font-size: 14px; - font-weight: 500; - line-height: 16px; - padding: 8px 12px; - border-radius: 6px; - border: 1px solid #E9ECEF; - box-shadow: none; - outline: none; -} -.technologies-wrp .titlebar .dropdown-menu .drop-footer{ - border-radius: 0 0 4px 4px; - border-top: 1px solid #E9ECEF; - background: #FFF; - padding: 8px 16px; - display: flex; - align-items: center; - justify-content: flex-end; + +.toggle-slider:before { + position: absolute; + content: ""; + height: 20px; + width: 20px; + left: 2px; + bottom: 2px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23E5EBEB'/%3E%3Cpath d='M6.5 6.5L13.5 13.5M13.5 6.5L6.5 13.5' stroke='%234B6361' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); +} + +.toggle-slider:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23E5EBEB'/%3E%3Cpath d='M6.5 6.5L13.5 13.5M13.5 6.5L6.5 13.5' stroke='%234B6361' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; + background-size: 20px 20px; +} + +input:checked + .toggle-slider { + background-color: var(--primary-800); } -.technologies-wrp .titlebar .dropdown-menu .drop-footer .btn-secondary{ - color: #055160; - font-size: 14px; - font-weight: 500; - line-height: 16px; - margin: 0; - display: table; - padding: 8px 12px; - margin-right: 16px; - border-radius: 8px; + +input:checked + .toggle-slider:before { + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='10' fill='%230D948B'/%3E%3Cpath d='M5.5 10.5L8.5 13.5L14.5 7.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; + background-size: 20px 20px; +} + +/* ======================================================== + Components: Tables + ======================================================== */ +table:not("#assessmentsTable") { + table-layout: fixed; + width: 100%; } -.technologies-wrp .titlebar .dropdown-menu .drop-footer .btn-secondary:hover{ - background: #055160; - color: #fff; + +.table > :not(caption) > * > * { + color: var(--neutral-900); + font-size: var(--text-body); + padding-top: 16px; + padding-bottom: 16px; + border-color: var(--neutral-200); } -.technologies-wrp .titlebar .dropdown-menu .drop-footer .btn-primary{ - color: #FFF; - font-size: 14px; - font-weight: 500; - line-height: 16px; - display: table; - padding:8px 12px; - border-radius: 6px; - background:#055160; + +tr:last-child td { + border-bottom: 0; } -.technologies-wrp .titlebar .dropdown-menu .drop-footer .btn-primary:hover{ - background: #000; - color: #fff; + +.risk-table-container { + overflow-x: auto; + -webkit-overflow-scrolling: touch; } -select.form-control { - width: 100%; - display: inline-block; - margin: 0 0; - -webkit-appearance: none; - background-image: url(../images/down-arrow.svg); - background-repeat: no-repeat; - background-size: 16px; - background-position: center right 12px; -} -.technologies-wrp .titlebar .dropdown-menu li{ - margin: 0 0 16px; + +.risk-table-container table { + min-width: 420px; } -.technologies-wrp .titlebar .dropdown-menu li:last-child{ - margin: 0; + +.risk-table-container::-webkit-scrollbar { + height: 20px; +} + +.risk-table-container::-webkit-scrollbar-track { + background: var(--white); } -.form-toggle-switch{ - display: flex; - align-items: center; - justify-content: space-between; +.risk-table-container::-webkit-scrollbar-thumb { + background: var(--neutral-300); + border-radius: 20px; +} + +.risk-table-container::-webkit-scrollbar-thumb:hover { + background: var(--neutral-600); +} + +th:first-child, +td:first-child { + width: 50px !important; + font-weight: 500; +} + +td .number, +td button { + margin-left: auto; + margin-right: auto; +} + +/* ======================================================== + Layout: Main Content And Forms + ======================================================== */ + +#main-content { + height: 100%; + width: 100%; + overflow: hidden; + padding: 20px 60px 20px 60px; + transition: all 0.3s linear; + -webkit-transition: all 0.3s linear; +} + +.visit span { + font-size: 14px; + word-break: break-all; +} + +.form-control, +.form-select { + color: var(--neutral-600); + font-size: var(--text-body); + font-style: normal; + font-weight: 400; + border-radius: 16px; + border: 1px solid var(--neutral-300); + background: var(--white); + -webkit-transition: border-color 0.3s ease, box-shadow 0.3s ease; + -o-transition: border-color 0.3s ease, box-shadow 0.3s ease; + transition: border-color 0.3s ease, box-shadow 0.3s ease; + -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); +} + +.form-control:focus, +.form-select:focus { + border-color: var(--primary-800); + box-shadow: 0 0 0 0.2rem rgba(17, 94, 89, 0.12); +} + +.custom-search { + min-width: 240px; + height: 36px; + border-radius: 8px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3.5C5.96243 3.5 3.5 5.96243 3.5 9C3.5 12.0376 5.96243 14.5 9 14.5C10.519 14.5 11.893 13.8852 12.8891 12.8891C13.8852 11.893 14.5 10.519 14.5 9C14.5 5.96243 12.0376 3.5 9 3.5ZM2 9C2 5.13401 5.13401 2 9 2C12.866 2 16 5.13401 16 9C16 10.6625 15.4197 12.1906 14.4517 13.3911L17.7803 16.7197C18.0732 17.0126 18.0732 17.4874 17.7803 17.7803C17.4874 18.0732 17.0126 18.0732 16.7197 17.7803L13.3911 14.4517C12.1906 15.4197 10.6625 16 9 16C5.13401 16 2 12.866 2 9Z' fill='%236B807F'/%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: 16px center !important; + padding: 0 16px 0 48px !important; + width: 400px; +} + +.btn-clear:hover { + text-decoration: underline; } -.form-toggle-switch h6{ - margin: 0; - color: #212529; - font-size: 14px; + +.alt-tech-card { + background: #f5f5f5; + border-radius: 10px; +} + +.alt-tech-card h3 { + font-size: 18px; + margin: 0; +} + +/* ======================================================== + Components: Alternative Technology Status And Hints + ======================================================== */ + +.verified { + background: var(--green-600); + color: var(--white); +} +.green-100 { + background: var(--green-100); +} +.green-700 { + color: var(--green-700); +} +.tags span { + background: var(--neutral-100); + padding: 4px 8px; + border-radius: 6px; + font-size: var(--text-label); + color: var(--neutral-700); font-weight: 500; - line-height: 20px; - margin: 0; -} -.form-toggle-switch input[type=checkbox]{ - height: 0; - width: 0; - visibility: hidden; -} -.form-toggle-switch label { - cursor: pointer; - text-indent: -9999px; - border-radius: 12px; - background: #E9ECEF; - display: block; - width: 44px; - height: 24px; - border-radius: 100px; - position: relative; -} -.form-toggle-switch label:after { - content: ''; - position: absolute; - top: 2px; - left: 2px; - width: 20px; - height: 20px; - background: #fff; - filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.06)) drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.10)); - border-radius: 90px; - transition: 0.3s; -} -.form-toggle-switch input:checked + label { - background: #055160; -} -.form-toggle-switch input:checked + label:after { - left: calc(100% - 22px); -} - -/* **** Add Class Css **** */ -.main-wrpper.show-sidebar{padding: 40px 60px 60px 60px;} -/* **** End Add Class Css **** */ - -@media(min-width:1201px) and (max-width:1600px){ - .chart-wrp .col-md-4.col-sm-12{width: 33%;} - .chart-wrp .col-md-6.col-sm-12{width: 50%;} - .chart-wrp .col-md-6.col-sm-12:last-child{width: 100%} - .evaluation-block .accordion .accordion-item .accordion-button{font-size: 15px;} - .resource-wrp .resource-block .col-md-3.col-sm-12{width: 25%;} - .resource-wrp .resource-block .resource-box{height: calc(100% - 30px) ;margin: 0 0 30px;} -/* .technologies-block .col-md-6.col-sm-12{width: 100%;}*/ -} - -@media(min-width:1025px) and (max-width:1200px){ - .chart-wrp .col-md-4.col-sm-12{width: 33%;} - .chart-wrp .col-md-6.col-sm-12{width: 50%;} - .chart-wrp .col-md-6.col-sm-12:last-child{width: 100%} - .evaluation-block .accordion .accordion-item .accordion-button{font-size: 15px;} - .resource-wrp .resource-block .col-md-3.col-sm-12{width: 25%;} - .resource-wrp .resource-block .resource-box{height: calc(100% - 30px) ;margin: 0 0 30px;} - .technologies-block .col-md-6.col-sm-12{width: 100%;} -} - -@media(min-width:992px) and (max-width:1024px){ - .chart-wrp .col-md-4.col-sm-12{width: 33%;} - .chart-wrp .col-md-6.col-sm-12{width: 50%;} - .chart-wrp .col-md-6.col-sm-12:last-child{width: 100%} - .evaluation-block .accordion .accordion-item .accordion-button{font-size: 15px;} - .resource-wrp .resource-block .col-md-3.col-sm-12{width: 25%;} - .resource-wrp .resource-block .resource-box{height: calc(100% - 30px) ;margin: 0 0 30px;} - .technologies-block .col-md-6.col-sm-12{width: 100%;} -} - -@media(min-width:768px) and (max-width:991px){ - .top-head h4{font-size: 18px;line-height: 24px;} - .top-head ul.main-row li.main-col{margin-right: 8px;} - .top-head ul.main-row li.main-col .btn1{font-size: 12px;padding: 8px 10px;} - .top-head ul.main-row li.main-col .btn2{font-size: 12px;padding: 8px 10px;} - .top-head ul.main-row li.main-col .dropdown-toggle{font-size: 12px;padding: 8px 10px;} - - .chart-wrp .col-md-4.col-sm-12{width: 100%;} - .chart-wrp .col-md-6.col-sm-12{width: 100%;} - .evaluation-block .accordion .accordion-item .accordion-button{font-size: 15px;} - .resource-wrp .resource-block .col-md-3.col-sm-12{width: 50%;} - .resource-wrp .resource-block .resource-box{height: calc(100% - 30px) ;margin: 0 0 30px;} - .technologies-block .col-md-6.col-sm-12{width: 100%;} -} - -@media(max-width:767px){ - .main-wrpper{padding:16px;} - - .top-head{display: block;padding: 16px;} - .top-head h4{margin: 0 0 20px;justify-content: center;} - .top-head ul.main-row{display: block;} - .top-head ul.main-row li.main-col{margin: 0 0 10px;} - .top-head ul.main-row li.main-col .btn1{display: block;width: 100%;text-align: center;} - .top-head ul.main-row li.main-col .btn2{display: block;width: 100%;text-align: center;} - .top-head ul.main-row li.main-col .dropdown-toggle{display: block;width: 100%;} - .top-head ul.main-row li.dropdown .dropdown-menu{width: 100%;} - - .chart-info-box{padding: 20px;} - .chart-info-box ul li{margin: 0 0 15px;} - .chart-box-small{padding: 20px;} - .chart-box-big .box-body{padding: 20px;} - .chart-box-big .box-title{padding: 16px 20px;} - .titlebar{padding: 16px 20px;display: block;} - .titlebar h2{margin: 0 0 10px;font-size: 18px;} - .resource-wrp .resource-block .resource-box{margin: 0 0 10px;} - - .evaluation-block{padding: 20px;} - .resource-wrp .resource-block{padding: 20px;} - - .technologies-wrp .technologies-block{padding: 20px;} - .technologies-wrp .technologies-block .technologies-box{padding: 16px;} - .technologies-wrp .technologies-block .technologies-box ul li{word-break: break-all;align-items: flex-start;} - .evaluation-block .thead-txt{display: none;} - .evaluation-block .thead-txt ul li{font-size: 12px;} - .evaluation-block .accordion .accordion-item .accordion-button{font-size: 12px;line-height: 16px;} - .evaluation-block .accordion .accordion-item .accordion-button .arrow-box{margin: 0 4px;} - .evaluation-block .accordion .accordion-item .accordion-button li:nth-child(4){min-width: unset;margin: 0 6px;} - .evaluation-block .accordion .accordion-item .accordion-button li:last-child{min-width: unset;} - .evaluation-block .accordion .accordion-item .accordion-button .severity-label{font-size: 12px;line-height: 16px;padding: 4px 8px;} -} - -@media(min-width:576px) and (max-width:767px){ - -} - -@media(min-width:448px) and (max-width:575px){ +} +.verified span { + font-size: var(--text-label); +} +.red-700 { + color: var(--red-700); +} +.red-50 { + background: var(--red-50); +} + +.info-hint-box { + position: relative; + display: inline-block; + margin-left: 6px; + cursor: pointer; +} +.info-hint-box i { + font-size: 16px; + color: var(--primary-600, #007bff); + transition: color 0.2s; +} +.info-hint-box:hover i { + color: var(--primary-800, #0056b3); +} +.hint-hoverbox { + display: none; + position: absolute; + top: 28px; + right: 0; + z-index: 1000; + background: #fff; + border: 1px solid var(--neutral-200, #e5e7eb); + border-radius: 8px; + padding: 12px 14px; + width: 280px; + box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); +} +.info-hint-box:hover .hint-hoverbox { + display: block; +} +.hint-hoverbox { + opacity: 0; + visibility: hidden; + transition: all 0.2s ease-in-out; +} +.info-hint-box:hover .hint-hoverbox { + opacity: 1; + visibility: visible; +} +.hint-hoverbox h5 { + font-size: 14px; + font-weight: 600; + margin-bottom: 6px; +} +.hint-hoverbox p { + font-size: 13px; + color: #555; + margin: 0; + line-height: 1.4; +} + +/* ======================================================== + Responsive + ======================================================== */ + +@media (max-width: 991px) { + + .alt-tech-card div { + width: 100%; + /* justify-content: flex-end; */ + } + + .alt-tech-card { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 16px; + } + + .chart-card-head { + padding-left: 16px; + padding-right: 16px; + } + + #main-content { + margin-left: 0; + } +} + +@media (max-width: 767px) { + main { + padding-top: 24px; + } + + .btn { + padding-left: 12px; + padding-right: 12px; + } + + main { + padding-top: 88px; + } + +} + +@media (max-width: 575px) { } diff --git a/assets/img/csp/alibaba.png b/assets/img/csp/alibaba.png deleted file mode 100644 index e8b3a9b..0000000 Binary files a/assets/img/csp/alibaba.png and /dev/null differ diff --git a/assets/img/csp/alibaba.svg b/assets/img/csp/alibaba.svg deleted file mode 100644 index f352ee9..0000000 --- a/assets/img/csp/alibaba.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/assets/img/csp/aws.png b/assets/img/csp/aws.png deleted file mode 100644 index a26f97e..0000000 Binary files a/assets/img/csp/aws.png and /dev/null differ diff --git a/assets/img/csp/aws.svg b/assets/img/csp/aws.svg deleted file mode 100644 index 08b8262..0000000 --- a/assets/img/csp/aws.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/assets/img/csp/azure.png b/assets/img/csp/azure.png deleted file mode 100644 index 8bb218d..0000000 Binary files a/assets/img/csp/azure.png and /dev/null differ diff --git a/assets/img/csp/azure.svg b/assets/img/csp/azure.svg deleted file mode 100644 index 61cb535..0000000 --- a/assets/img/csp/azure.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/img/csp/gcp.svg b/assets/img/csp/gcp.svg deleted file mode 100644 index bc3b271..0000000 --- a/assets/img/csp/gcp.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/assets/img/csp/google_cloud.png b/assets/img/csp/google_cloud.png deleted file mode 100644 index ed3785b..0000000 Binary files a/assets/img/csp/google_cloud.png and /dev/null differ diff --git a/assets/template/index.html b/assets/template/index.html index 361b381..95ea1fa 100644 --- a/assets/template/index.html +++ b/assets/template/index.html @@ -1,859 +1,1296 @@ - - - - - - - EscapeCloud Community Edition - Cloud Exit Assessment Report - - - - - - - - - - - - - -
-
-

- EscapeCloud - {{ name }} -

- + + + + + EscapeCloud Community Edition - Cloud Exit Assessment Report + + + + + + + + + {% set provider_name = "Microsoft Azure" if cloud_service_provider == 1 else "Amazon Web Services" if cloud_service_provider == 2 else "Unknown Provider" %} + {% set strategy_name = "Repatriation to On-Premises" if exit_strategy == 1 else "Migration to Alternate Cloud" if exit_strategy == 3 else "Unknown Strategy" %} + {% set assessment_name = "Basic" if assessment_type == 1 else "Standard" if assessment_type == 2 else "Unknown" %} + {% set total_risks = high_risk_count + medium_risk_count + low_risk_count %} + +
+
+

+ EscapeCloud + {{ name }} +

+ +
+
+
+ +
+
+
+
+
+
+
+
+ + {% if cloud_service_provider == 1 %} + + + + + + + + + + + + + + + + + + + + + + + + {% elif cloud_service_provider == 2 %} + + + + + + + + + + + + + {% else %} + {{ provider_name }} + {% endif %} + +
+
+
Cloud Service Provider
+
{{ provider_name }}
+
+
+
+
+ +
+
+
Exit Strategy
+
{{ strategy_name }}
+
+
+
+
+ +
+
+
Assessment Type
+
{{ assessment_name }}
+
+
+
+
+ +
+
+
Timestamp
+
{{ timestamp }}
+
+
+
-
-
-
-
-
-
-
    -
  • - - {% if cloud_service_provider == 1 %} - Microsoft Azure - {% elif cloud_service_provider == 2 %} - AWS - {% endif %} - -
    -

    Cloud Service Provider

    -

    - {% if cloud_service_provider == 1 %} - Microsoft Azure - {% elif cloud_service_provider == 2 %} - Amazon Web Services - {% endif %} -

    -
    -
  • -
  • - -
    -

    Exit Strategy

    -

    - {% if exit_strategy == 1 %} - Repatriation to On-Premises - {% elif exit_strategy == 3 %} - Migration to Alternate Cloud - {% endif %} -

    -
    -
  • -
  • - -
    -

    Assessment Type

    -

    - {% if assessment_type == 1 %} - Basic - {% elif assessment_type == 2 %} - Standard - {% endif %} -

    -
    -
  • -
  • - -
    -

    TimeStamp

    -

    - {{ timestamp }} -

    -
    -
  • -
-
-
-
-
-
-

Risks

- {% set total_risks = high_risk_count + medium_risk_count + low_risk_count %} - {% if total_risks > 0 %} -

{{ total_risks }}

- {% endif %} -
+
- {% if total_risks == 0 %} -
-
- -

No data available.

-
-
- {% else %} -
- -
- {% endif %} -
-
-
-
-
-

Costs (last 6 months)

- {% if total_cost > 0 %} -

{{ currency_symbol }}{{ total_cost }}

- {% endif %} -
- {% if total_cost == 0 %} -
-
- -

No data available.

-
-
- {% else %} -
- -
- {% endif %} -
-
+
+
+
+
+
+

Risks

+
{{ total_risks }}
+
+ {% if total_risks > 0 %} +
+ +
+ {% else %} +
+
+ +

No risk data available.

+
+
+ {% endif %} +
+
- {% if scoring_data %} -
-
-
-
-

Scoring #1 - Exit Score
- - -
-
Exit Score
- -
-

This gauge chart represents the EscapeCloud Platforms exit score methodology, based on risk assessment results and the alternative technology landscape.

It uses a benchmark developed by our experts to quantify the challenges and limitations of exiting the cloud:
- Complex (0 - 20)
- Challenging (20 - 40)
- Manageable (40 - 60)
- Smooth Transition (60 - 80)
- Seamless (80 - 100)

-
-
-

-
-
-
-
+
+
+
+
+
+

Costs (last 6 months)

+
+ {% if total_cost > 0 %}{{ currency_symbol }}{{ total_cost }}{% else + %}-{% endif %}
+
-
-
-
-

Scoring #2 - Vendor Lock-In Score
- - -
-
Vendor Lock-In Score
- -
-

This chart represents the EscapeCloud Platforms Vendor Lock-In Score methodology.

-
-
-

-
-
-
-
-
+ {% if total_cost > 0 %} +
+
+ {% else %} +
+
+ +

No cost data available.

+
+
+ {% endif %} +
- {% endif %} +
+
-
-
-

Risks

-