diff --git a/src/mappings_explorer/templates/_navigation.html.j2 b/src/mappings_explorer/templates/_navigation.html.j2 index c46e07e4..786a21f5 100644 --- a/src/mappings_explorer/templates/_navigation.html.j2 +++ b/src/mappings_explorer/templates/_navigation.html.j2 @@ -6,9 +6,14 @@ - - - +
+ + + {#
+ +
#} +
+
+ {#
  • +
    + +
    +
    • #} +
    + +
    + + + + + diff --git a/src/mappings_explorer/templates/base.html.j2 b/src/mappings_explorer/templates/base.html.j2 index 01008965..770467a8 100644 --- a/src/mappings_explorer/templates/base.html.j2 +++ b/src/mappings_explorer/templates/base.html.j2 @@ -44,6 +44,7 @@
    {% include "_navigation.html.j2"%}
    + {% include "_related_switcher_content.html.j2" %} {% block content %}

    Welcome to Mappings Explorer

    {% endblock content %} diff --git a/src/mappings_explorer/templates/static/img/project-logos/bell.svg b/src/mappings_explorer/templates/static/img/project-logos/bell.svg new file mode 100644 index 00000000..4690c0ad --- /dev/null +++ b/src/mappings_explorer/templates/static/img/project-logos/bell.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/mappings_explorer/templates/static/img/project-logos/ctid-purple.png b/src/mappings_explorer/templates/static/img/project-logos/ctid-purple.png new file mode 100644 index 00000000..64909ce4 Binary files /dev/null and b/src/mappings_explorer/templates/static/img/project-logos/ctid-purple.png differ diff --git a/src/mappings_explorer/templates/static/img/project-logos/mappings-explorer.png b/src/mappings_explorer/templates/static/img/project-logos/mappings-explorer.png new file mode 100644 index 00000000..023bdc58 Binary files /dev/null and b/src/mappings_explorer/templates/static/img/project-logos/mappings-explorer.png differ diff --git a/src/mappings_explorer/templates/static/img/project-logos/project.svg b/src/mappings_explorer/templates/static/img/project-logos/project.svg new file mode 100644 index 00000000..5a5ce0fd --- /dev/null +++ b/src/mappings_explorer/templates/static/img/project-logos/project.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/mappings_explorer/templates/static/img/project-logos/related.svg b/src/mappings_explorer/templates/static/img/project-logos/related.svg new file mode 100644 index 00000000..32885351 --- /dev/null +++ b/src/mappings_explorer/templates/static/img/project-logos/related.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/mappings_explorer/templates/static/img/project-logos/top-attack-techniques.svg b/src/mappings_explorer/templates/static/img/project-logos/top-attack-techniques.svg new file mode 100644 index 00000000..3bfb46e9 --- /dev/null +++ b/src/mappings_explorer/templates/static/img/project-logos/top-attack-techniques.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/mappings_explorer/templates/static/main.css b/src/mappings_explorer/templates/static/main.css index ca0558ad..3bc6ad88 100644 --- a/src/mappings_explorer/templates/static/main.css +++ b/src/mappings_explorer/templates/static/main.css @@ -474,11 +474,14 @@ div.banner { } @media (min-width: 1280px) { - .mobile-nav-show, - .mobile-nav-hide { + .mobile-nav-hide, + .mobile-nav-div { display: none; } + .project-switcher-lg { + display: inline; + } } /*-------------------------------------------------------------- @@ -585,6 +588,18 @@ div.banner { background: #212c5e81; z-index: 9996 !important; } + .mobile-nav-div { + margin-top: auto; + margin-bottom: auto; + display: flex; + } + .mobile-nav-div i { + margin-top: auto; + margin-bottom: auto; + } + .project-switcher-lg { + display: none; + } } /*-------------------------------------------------------------- diff --git a/src/mappings_explorer/templates/static/project-switcher.css b/src/mappings_explorer/templates/static/project-switcher.css new file mode 100644 index 00000000..ae5b12f7 --- /dev/null +++ b/src/mappings_explorer/templates/static/project-switcher.css @@ -0,0 +1,146 @@ + + .project-switcher { + cursor: pointer; + } + .project-switcher-expanded { + position: fixed; + top: 60px; + right: 12px; + background-color: white; + z-index: 100; + padding: 40px 20px; + width: 400px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + overflow: hidden; + } + @media (min-width: 1280px) { + .project-switcher-expanded { + + right: calc((100vw - 1140px)/2); + } + } + @media (min-width: 1400px) { + .project-switcher-expanded { + + right: calc((100vw - 1320px)/2); + } + } + .project-switcher-expanded .project-content { + margin-top: 8px; + height: 472px; + overflow-y: scroll; + } + .project-switcher-expanded .project-content::-webkit-scrollbar { + background-color: #EFF1F4; + width: 7px; + } + .project-switcher-expanded .project-content::-webkit-scrollbar-thumb { + background-color: #ADAEB1; + -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); + } + .project-switcher-expanded .heading-div { + display: flex; + gap: 10px; + padding-bottom: 8px; + margin-top: 10px; + } + .project-switcher-expanded .heading-div img { + height: 20px; + margin: auto 0px; + } + .project-switcher-expanded h1 { + font-size: 24px; + font-weight: bold; + margin: auto 0px; + } + .project-switcher-expanded h2 { + font-size: 18px; + font-weight: bold; + text-transform: uppercase; + padding-top: 10px; + margin-bottom: 0px; + } + .project-switcher-expanded .project-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 0px; + margin: 15px 0px; + margin-top: 5px; + } + .project-switcher-expanded .project-container { + text-align: center; + padding: 10px 8px; + border: none; + background-color: inherit; + display: inline-block; + width: 100%; + } + + .project-switcher-expanded .project-container:hover { + background-color: #EFF1F4; + border-radius: 5px; + transition: 0.5s; + } + + .project-switcher-expanded .project-container img { + text-align: center !important; + max-height: 30px; + } + .project-switcher-expanded .project-container h3 { + font-size: 14px; + text-align: center; + margin-top: 8px; + margin-bottom: 0px; + color: #0B2338; + } + + .project-switcher-expanded .notification img { + height: 14px; + margin: auto 0px; + } + .project-switcher-expanded .notification h3 { + margin-bottom: 0; + margin: auto 0; + font-size: 14px; + color: #0B2338 !important; + } + + .project-switcher-expanded .notification { + display: flex; + background-color: #C2EAF6; + border-radius: 100px; + padding: 6px 16px; + margin: 3px 0px; + gap: 8px; + width: max-content; + transition: .5s; + } + .project-switcher-expanded .notification svg { + visibility: hidden; + opacity: 0; + height: 14px; + display: inline; + margin: auto 0px; + margin-left: -10px; + width: 0px; + transition: .5s; + } + .project-switcher-expanded .notification:hover { + background-color: #62BEE2; + } + .project-switcher-expanded .notification:hover svg { + display: inline; + visibility: visible; + opacity: 1; + margin-left: 10px; + width: auto; + } + .project-switcher-expanded .error-text { + font-style: italic; + text-align: center; + } + + .project-switcher-expanded input { + color: #0B2338; + border: #0B2338 solid 1px; + } diff --git a/src/mappings_explorer/templates/static/related_projects_src.json b/src/mappings_explorer/templates/static/related_projects_src.json new file mode 100644 index 00000000..a33e6dc9 --- /dev/null +++ b/src/mappings_explorer/templates/static/related_projects_src.json @@ -0,0 +1,126 @@ +{ + "notifications": [ + { + "text": "ATT&CK Version 15.0 Released", + "url": "https://center-for-threat-informed-defense.github.io/attack-sync/v14.1-v15.0/enterprise-attack/" + }, + { + "text": "M365 added to Mappings Explorer", + "url": "https://center-for-threat-informed-defense.github.io/mappings-explorer/external/m365/" + } + ], + "projects": [ + { + "id": "top_attack_techniques", + "label": "Top ATT&CK Techniques", + "url": "https://top-attack-techniques.mitre-engenuity.org/#/", + "imgsrc": "top-attack-techniques.svg", + "featured" : true + }, + { + "id": "mappings_explorer", + "label": "Mappings Explorer", + "url": "https://center-for-threat-informed-defense.github.io/mappings-explorer/", + "imgsrc": "mappings-explorer.png", + "featured" : true + }, + { + "id": "attack_sync", + "label": "ATT&CK Sync", + "url": "https://center-for-threat-informed-defense.github.io/attack-sync/", + "imgsrc": "project.svg", + "featured" : true + }, + { + "id": "m3tid", + "label": "M3TID", + "url": "https://center-for-threat-informed-defense.github.io/m3tid/", + "imgsrc": "project.svg", + "featured" : true + }, + { + "id": "summiting_the_pyramid", + "label": "Summiting the Pyramid", + "url": "https://center-for-threat-informed-defense.github.io/summiting-the-pyramid/", + "imgsrc": "project.svg", + "featured" : false + }, + { + "id": "attack_flow", + "label": "Attack Flow", + "url": "https://center-for-threat-informed-defense.github.io/attack-flow/", + "imgsrc": "project.svg", + "featured" : false + }, + { + "id": "cti_blueprints", + "label": "CTI Blueprints", + "url": "https://github.com/center-for-threat-informed-defense/cti-blueprints", + "imgsrc": "project.svg", + "featured" : false + }, + { + "id": "sightings", + "label": "Sightings Ecosystem", + "url": "https://center-for-threat-informed-defense.github.io/sightings_ecosystem/", + "imgsrc": "project.svg", + "featured" : false + }, + { + "id": "threat_modeling", + "label": "Threat Modeling with ATT&CK", + "url": "https://center-for-threat-informed-defense.github.io/threat-modeling-with-attack/", + "imgsrc": "project.svg", + "featured" : false + }, + { + "id": "cwe_calculator", + "label": "CWE with Environmental CVSS Calculator", + "url": "https://github.com/center-for-threat-informed-defense/cwe-calculator/", + "imgsrc": "project.svg", + "featured" : false + }, + { + "id": "adversary_emulation", + "label": "Adversary Emulation Library", + "url": "https://github.com/center-for-threat-informed-defense/adversary_emulation_library/tree/master", + "imgsrc": "project.svg", + "featured" : false + }, + { + "id": "tram", + "label": "Threat Report ATT&CK Mapper (TRAM)", + "url": "https://github.com/center-for-threat-informed-defense/tram", + "imgsrc": "project.svg", + "featured" : false + }, + { + "id": "workbench", + "label": "ATT&CK Workbench", + "url": "https://github.com/center-for-threat-informed-defense/attack-workbench-frontend", + "imgsrc": "project.svg", + "featured" : false + }, + { + "id": "attack_flow_builder", + "label": "Attack Flow Builder", + "url": "https://center-for-threat-informed-defense.github.io/attack-flow/ui/", + "imgsrc": "project.svg", + "featured" : false + }, + { + "id": "caldera", + "label": "Caldera Pathfinder", + "url": "https://github.com/center-for-threat-informed-defense/caldera_pathfinder", + "imgsrc": "project.svg", + "featured" : false + }, + { + "id": "technique_interence_engine", + "label": "Technique Inference Engine", + "url": "https://github.com/center-for-threat-informed-defense/technique-inference-engine", + "imgsrc": "project.svg", + "featured" : false + } + ] +}