├── script.js ├── styles.css └── index.html /script.js: -------------------------------------------------------------------------------- 1 | // Expand/Collapse Rectangle Layers 2 | document.querySelectorAll('.layer').forEach(layer => { 3 | layer.addEventListener('click', e => { 4 | e.stopPropagation(); 5 | layer.classList.toggle('collapsed'); 6 | layer.classList.toggle('active'); 7 | }); 8 | }); 9 | 10 | // Accordion Interaction 11 | document.querySelectorAll('.acc-header').forEach(header => { 12 | header.addEventListener('click', () => { 13 | const item = header.parentElement; 14 | item.classList.toggle('active'); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Segoe UI', sans-serif; 3 | background: #f9fafc; 4 | margin: 0; 5 | padding: 20px; 6 | text-align: center; 7 | } 8 | 9 | .title { 10 | margin-bottom: 20px; 11 | font-size: 1.5rem; 12 | font-weight: 600; 13 | } 14 | 15 | /* Main container ensures all components align evenly */ 16 | .diagram { 17 | width: 90%; 18 | max-width: 1200px; 19 | margin: 0 auto; 20 | display: flex; 21 | flex-direction: column; 22 | align-items: center; 23 | } 24 | 25 | /* Layer (rectangle rings) */ 26 | .layer { 27 | position: relative; 28 | border-radius: 12px; 29 | margin: 10px auto; 30 | cursor: pointer; 31 | overflow: hidden; 32 | box-shadow: 0 3px 6px rgba(0,0,0,0.15); 33 | transition: transform 0.35s ease, box-shadow 0.35s ease; 34 | } 35 | 36 | .layer .header { 37 | padding: 10px; 38 | font-weight: bold; 39 | text-transform: uppercase; 40 | } 41 | 42 | .layer .content { 43 | display: flex; 44 | flex-wrap: wrap; 45 | justify-content: center; 46 | gap: 8px; 47 | padding: 10px; 48 | max-height: 800px; 49 | overflow: hidden; 50 | transition: max-height 0.45s ease; 51 | } 52 | 53 | /* Collapsed layers */ 54 | .layer.collapsed .content { 55 | max-height: 0; 56 | padding-top: 0; 57 | padding-bottom: 0; 58 | } 59 | 60 | .layer.collapsed { 61 | opacity: 0.85; 62 | } 63 | 64 | /* Highlight layer on click */ 65 | .layer.active { 66 | box-shadow: 0 0 20px 4px rgba(0, 150, 255, 0.5); 67 | transform: scale(1.02); 68 | } 69 | 70 | /* Control labels */ 71 | .layer .content span { 72 | background: rgba(255,255,255,0.6); 73 | border: 1px solid rgba(0,0,0,0.1); 74 | padding: 6px 10px; 75 | border-radius: 8px; 76 | font-size: 0.9rem; 77 | transition: all 0.3s ease; 78 | } 79 | 80 | .layer .content span:hover { 81 | background: #fff8dc; 82 | transform: scale(1.05); 83 | } 84 | 85 | /* Layer Colors + Width Scaling */ 86 | .physical { background: #f4c69d; width: 100%; } 87 | .administrative { background: #f5b5b0; width: 85%; } 88 | .technical { background: #cfe7c7; width: 75%; } 89 | .minimum { background: #f1e4b3; width: 65%; } 90 | .crown { background: #dcd0f3; width: 50%; } 91 | 92 | /* Cyber Hygiene Section */ 93 | .cyber-hygiene { 94 | margin-top: 25px; 95 | width: 98%; 96 | background: #b4d5f9; 97 | border-radius: 12px; 98 | box-shadow: 0 3px 6px rgba(0,0,0,0.15); 99 | padding: 15px; 100 | } 101 | 102 | .cyber-hygiene .header { 103 | font-weight: bold; 104 | text-transform: uppercase; 105 | margin-bottom: 8px; 106 | color: #03396c; 107 | } 108 | 109 | .cyber-hygiene .content { 110 | font-size: 0.95rem; 111 | line-height: 1.45; 112 | } 113 | 114 | /* Accordion */ 115 | .accordion { 116 | margin-top: 15px; 117 | width: 100%; 118 | text-align: left; 119 | } 120 | 121 | .acc-item { 122 | margin-bottom: 8px; 123 | } 124 | 125 | .acc-header { 126 | width: 100%; 127 | background: #5b8fc9; 128 | color: white; 129 | border: none; 130 | padding: 10px; 131 | text-align: left; 132 | font-size: 0.95rem; 133 | cursor: pointer; 134 | border-radius: 6px; 135 | transition: background 0.3s; 136 | } 137 | 138 | .acc-header:hover { 139 | background: #4076ac; 140 | } 141 | 142 | .acc-body { 143 | max-height: 0; 144 | overflow: hidden; 145 | background: #ffffffd9; 146 | border-radius: 6px; 147 | padding: 0 12px; 148 | transition: max-height 0.45s ease, padding 0.35s ease; 149 | } 150 | 151 | .acc-item.active .acc-body { 152 | max-height: 450px; 153 | padding: 10px 12px; 154 | } 155 | 156 | .acc-body ul { 157 | margin: 5px 0 10px 18px; 158 | padding: 0; 159 | font-size: 0.92rem; 160 | line-height: 1.45; 161 | } 162 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cyber security controls (at bare minimum) - based on business revenue 7 | 8 | 9 | 10 |

Cyber security controls (at bare minimum) - based on business revenue

11 | 12 |
13 |
Physical Controls
14 |
15 | Restricted Server Room Access 16 | Biometric Entry 17 | Physical Isolation of Backup Media 18 | Locked Racks 19 | Secured Data Center 20 | Power Redundancy 21 | Fire Suppression Systems 22 | CCTV Footage 23 | Controlled Access to SOC Environment 24 | Access Log Review 25 | Physical Access Audits 26 | Alarm System 27 |
28 | 29 |
30 |
Administrative Controls
31 |
32 | Access Control Policy 33 | Privileged Access Review 34 | Security Awareness Training 35 | Phishing campaign 36 | Backup Policy 37 | Data Retention Policy 38 | DRP Testing 39 | Change Management 40 | Data Classification Policy 41 | Cryptographic Policy 42 | Incident Response Plan 43 | SOC Procedures 44 | Internal Audits 45 | Penetration Testing 46 | Risk registry 47 | Information system Audit 48 | Information security policy 49 |
50 | 51 |
52 |
Technical Controls
53 |
54 | PAM 55 | MFA 56 | Network Segmentation 57 | Secure Configuration Baselines 58 | Patch Management 59 | SIEM Monitoring 60 | EDR 61 | FIM 62 | UEBA 63 | Disk Encryption 64 | Restricted Admin Access 65 | Application Whitelisting 66 | Secure Coding 67 | Database Encryption 68 | IPS 69 | Role-Based Access Control 70 | Backup 71 | Disaster Recovery 72 | DLP 73 |
74 | 75 |
76 |
Minimum Crown Jewels
77 |
78 | AD 79 | AZ Load Balancer 80 | WAF 81 | Firewall 82 | links 83 | switches 84 | DNS 85 | PAM 86 | Network policy server 87 | ADFS - CA 88 | ADFP 89 | Azure AD 90 |
91 | 92 |
93 |
Crown Jewels
94 |
95 | SAP 96 | SFA 97 | Workflow 98 | Planvisage 99 |
100 |
101 | 102 | 103 | 104 |
105 |
106 |
107 |
108 | 109 |
110 |
Cyber Hygiene
111 | 112 | 113 | 114 |
115 | 116 |
117 | 118 |
119 |
    120 |
  • Databases must not be exposed to the public internet.
    • 121 |
  • Web servers and databases must be deployed on separate tiers with proper segmentation.
    • 122 |
  • All cloud infrastructure must reside behind perimeter firewalls.
    • 123 |
  • Critical ports (22, 3389, database ports, etc.) must not be open to the internet.
    • 124 |
  • Active Directory must never be exposed directly to the internet.
    • 125 |
  • Clipboard access to servers is strictly prohibited.
    • 126 |
  • Network-Level Authentication (NLA) must remain enabled on all systems.
    • 127 |
128 |
129 |
130 | 131 |
132 | 133 |
134 |
    135 |
  • EDR must be deployed on all servers and endpoints.
    • 136 |
  • Patch management and hardening must be completed before go-live.
    • 137 |
  • Obsolete or unsupported software is prohibited.
    • 138 |
  • All laptops must join Hemas Active Directory.
    • 139 |
140 |
141 |
142 | 143 |
144 | 145 |
146 |
    147 |
  • Critical applications handling sensitive data must reside in Hemas Azure.
    • 148 |
  • DNS administration must be managed by Group IT only.
    • 149 |
  • All domain names must be registered under Hemas Holdings PLC.
    • 150 |
151 |
152 |
153 | 154 |
155 | 156 |
157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | --------------------------------------------------------------------------------