-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrisk-matrix-original.html
157 lines (148 loc) · 5.78 KB
/
risk-matrix-original.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE HTML>
<html>
<head>
<title>Simeon Atanasov | Interactive Risk Matrix for Privacy, Data Protection, and Risk Management</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="Explore Simeon Atanasov's Interactive Risk Matrix, a dynamic tool for assessing, prioritizing, and managing risks. Add risks, assign mitigations, and track real-time progress with exportable insights for better decision-making.">
<link rel="stylesheet" href="pages/risk-matrix-front-end/risk-matrix-original.css">
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="is-preload">
<!-- Header -->
<header id="header">
<a href="index.html" class="title">Simeon Atanasov</a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="power-bi.html">Power BI</a></li>
<li><a href="my-asteroids-game.html">My Asteroids Game</a></li>
<li><a href="risk-matrix-original.html" class="active">Risk Matrix</a></li>
</ul>
</nav>
</header>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<section id="main" class="wrapper">
<div class="inner">
<header>
<!-- Other generic page content -->
<h1 class="major">Welcome to the Interactive Risk Matrix! 🚀
</h1>
</header>
<section>
<p>Risks are inevitable. The Interactive Risk Matrix helps you assess, prioritize, and manage them instantly. Add risks, assign mitigations, and track your progress in real time. Turn uncertainty into opportunity.</p>
</section>
<!-- Risk Matrix -->
<div class="container">
<h1>Interactive Risk Matrix</h1>
<table id="risk-matrix">
<!-- Header row -->
<thead>
<tr>
<th></th>
<th>Low</th>
<th>Medium</th>
<th>High</th>
<th>Critical</th>
</tr>
</thead>
<tbody>
<tr>
<th>Likely</th>
<td class="high"></td>
<td class="critical"></td>
<td class="critical"></td>
<td class="critical"></td>
</tr>
<tr>
<th>Possible</th>
<td class="medium"></td>
<td class="high"></td>
<td class="critical"></td>
<td class="critical"></td>
</tr>
<tr>
<th>Unlikely</th>
<td class="low"></td>
<td class="medium"></td>
<td class="high"></td>
<td class="critical"></td>
</tr>
<tr>
<th>Rare</th>
<td class="low"></td>
<td class="low"></td>
<td class="medium"></td>
<td class="high"></td>
</tr>
</tbody>
</table>
<div class="add-risk-form">
<h2>Add Risk to Matrix</h2>
<input type="text" id="new-risk" placeholder="Enter risk...">
<input type="text" id="new-mitigation" placeholder="Enter mitigation..." /> <!-- New Mitigation Input -->
<!-- Add this container for Likelihood and Impact selects -->
<div class="selects-container">
<select id="new-likelihood">
<option value="Likely" class="option-likely">Likely</option>
<option value="Possible" class="option-possible">Possible</option>
<option value="Unlikely" class="option-unlikely">Unlikely</option>
<option value="Rare" class="option-rare">Rare</option>
</select>
<select id="new-impact">
<option value="Low" class="option-low">Low Impact</option>
<option value="Medium" class="option-medium">Medium Impact</option>
<option value="High" class="option-high">High Impact</option>
<option value="Critical" class="option-critical">Critical Impact</option>
</select>
</div>
<button id="add-risk">Add to Matrix</button>
</div>
<div class="actions">
<button id="save-data">Save Risks</button>
<button id="load-data">Load Risks</button>
<button id="clear-data">Clear Risks</button>
<button id="export-excel">Export to Excel</button>
</div>
<div class="notes">
<h2>Risk Notes</h2>
<ul class="labels-notes">
<li><strong>Risk</strong></li>
<li><strong>Mitigation</strong></li>
<li><strong>Likelihood</strong></li>
<li><strong>Impact</strong></li>
<li><strong>Delete</strong></li>
</ul>
<ul id="risk-notes">
<!-- Risk Notes will appear here -->
</ul>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="wrapper style1-alt">
<div class="inner">
<ul class="menu">
<li>© Simeon. All rights reserved.</li>
<li><a href="">Terms of use</a></li>
<li><a href="privacy-notice.html">Privacy notice</a></li>
<li><a href="cookie-notice.html">Cookie notice</a></li>
</ul>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="pages/risk-matrix-front-end/risk-matrix-original.js"></script>
</body>
</html>