Skip to content

Commit 979587a

Browse files
akfave99akfave99
committed
Create multi-page HTML dashboard with all charts
1 parent 98184ec commit 979587a

15 files changed

+24679
-3885
lines changed

‎docs/chart0.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Threat Perception - Geopolitical Dashboard</title>
7+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<style>
9+
body {
10+
background-color: #1a1a1a;
11+
color: #fff;
12+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13+
}
14+
.navbar {
15+
background-color: #0d1b2a;
16+
border-bottom: 2px solid #1e90ff;
17+
}
18+
.navbar-brand {
19+
font-weight: bold;
20+
font-size: 1.5rem;
21+
color: #1e90ff !important;
22+
}
23+
.nav-link {
24+
color: #aaa !important;
25+
transition: color 0.3s;
26+
margin: 0 5px;
27+
}
28+
.nav-link:hover {
29+
color: #1e90ff !important;
30+
}
31+
.nav-link.active {
32+
color: #1e90ff !important;
33+
border-bottom: 2px solid #1e90ff;
34+
}
35+
.container-fluid {
36+
padding: 20px;
37+
}
38+
.chart-title {
39+
color: #1e90ff;
40+
margin-bottom: 20px;
41+
font-size: 2rem;
42+
font-weight: bold;
43+
}
44+
.chart-description {
45+
color: #aaa;
46+
margin-bottom: 20px;
47+
font-size: 1.1rem;
48+
}
49+
.chart-container {
50+
background-color: #0d1b2a;
51+
border-radius: 8px;
52+
padding: 20px;
53+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
54+
}
55+
iframe {
56+
width: 100%;
57+
height: 800px;
58+
border: none;
59+
border-radius: 8px;
60+
}
61+
.footer {
62+
background-color: #0d1b2a;
63+
border-top: 2px solid #1e90ff;
64+
padding: 20px;
65+
margin-top: 40px;
66+
text-align: center;
67+
color: #aaa;
68+
}
69+
.nav-pills {
70+
flex-wrap: wrap;
71+
}
72+
</style>
73+
</head>
74+
<body>
75+
<nav class="navbar navbar-expand-lg navbar-dark">
76+
<div class="container-fluid">
77+
<a class="navbar-brand" href="index.html">🌍 Geopolitical Dashboard</a>
78+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
79+
<span class="navbar-toggler-icon"></span>
80+
</button>
81+
<div class="collapse navbar-collapse" id="navbarNav">
82+
<ul class="navbar-nav ms-auto">
83+
<li class="nav-item"><a class="nav-link" href="chart0.html">Threat Perception</a></li>
84+
<li class="nav-item"><a class="nav-link" href="chart1.html">Supplier Influence</a></li>
85+
<li class="nav-item"><a class="nav-link" href="chart2.html">Defense Systems</a></li>
86+
<li class="nav-item"><a class="nav-link" href="chart3.html">Multi-Country Radar</a></li>
87+
<li class="nav-item"><a class="nav-link" href="chart4.html">Priorities Heatmap</a></li>
88+
<li class="nav-item"><a class="nav-link" href="chart5.html">Supplier Connections</a></li>
89+
</ul>
90+
</div>
91+
</div>
92+
</nav>
93+
94+
<div class="container-fluid">
95+
<h1 class="chart-title">Threat Perception</h1>
96+
<p class="chart-description">Central Asian Regional Threat Perception Analysis</p>
97+
98+
<div class="chart-container">
99+
<iframe src="threat-perception-analysis.html" title="Threat Perception"></iframe>
100+
</div>
101+
</div>
102+
103+
<div class="footer">
104+
<p>© 2025 Geopolitical Analysis Dashboard | Built with Plotly & Bootstrap</p>
105+
<p>Created by: A.K. Faver</p>
106+
</div>
107+
108+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
109+
<script>
110+
// Highlight active nav item
111+
const currentPage = window.location.pathname.split('/').pop() || 'index.html';
112+
document.querySelectorAll('.nav-link').forEach(link => {
113+
if (link.getAttribute('href') === currentPage) {
114+
link.classList.add('active');
115+
}
116+
});
117+
</script>
118+
</body>
119+
</html>

‎docs/chart1-supplier-influence.html‎

Lines changed: 3888 additions & 0 deletions
Large diffs are not rendered by default.

‎docs/chart1.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Supplier Influence - Geopolitical Dashboard</title>
7+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<style>
9+
body {
10+
background-color: #1a1a1a;
11+
color: #fff;
12+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13+
}
14+
.navbar {
15+
background-color: #0d1b2a;
16+
border-bottom: 2px solid #1e90ff;
17+
}
18+
.navbar-brand {
19+
font-weight: bold;
20+
font-size: 1.5rem;
21+
color: #1e90ff !important;
22+
}
23+
.nav-link {
24+
color: #aaa !important;
25+
transition: color 0.3s;
26+
margin: 0 5px;
27+
}
28+
.nav-link:hover {
29+
color: #1e90ff !important;
30+
}
31+
.nav-link.active {
32+
color: #1e90ff !important;
33+
border-bottom: 2px solid #1e90ff;
34+
}
35+
.container-fluid {
36+
padding: 20px;
37+
}
38+
.chart-title {
39+
color: #1e90ff;
40+
margin-bottom: 20px;
41+
font-size: 2rem;
42+
font-weight: bold;
43+
}
44+
.chart-description {
45+
color: #aaa;
46+
margin-bottom: 20px;
47+
font-size: 1.1rem;
48+
}
49+
.chart-container {
50+
background-color: #0d1b2a;
51+
border-radius: 8px;
52+
padding: 20px;
53+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
54+
}
55+
iframe {
56+
width: 100%;
57+
height: 800px;
58+
border: none;
59+
border-radius: 8px;
60+
}
61+
.footer {
62+
background-color: #0d1b2a;
63+
border-top: 2px solid #1e90ff;
64+
padding: 20px;
65+
margin-top: 40px;
66+
text-align: center;
67+
color: #aaa;
68+
}
69+
.nav-pills {
70+
flex-wrap: wrap;
71+
}
72+
</style>
73+
</head>
74+
<body>
75+
<nav class="navbar navbar-expand-lg navbar-dark">
76+
<div class="container-fluid">
77+
<a class="navbar-brand" href="index.html">🌍 Geopolitical Dashboard</a>
78+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
79+
<span class="navbar-toggler-icon"></span>
80+
</button>
81+
<div class="collapse navbar-collapse" id="navbarNav">
82+
<ul class="navbar-nav ms-auto">
83+
<li class="nav-item"><a class="nav-link" href="chart0.html">Threat Perception</a></li>
84+
<li class="nav-item"><a class="nav-link" href="chart1.html">Supplier Influence</a></li>
85+
<li class="nav-item"><a class="nav-link" href="chart2.html">Defense Systems</a></li>
86+
<li class="nav-item"><a class="nav-link" href="chart3.html">Multi-Country Radar</a></li>
87+
<li class="nav-item"><a class="nav-link" href="chart4.html">Priorities Heatmap</a></li>
88+
<li class="nav-item"><a class="nav-link" href="chart5.html">Supplier Connections</a></li>
89+
</ul>
90+
</div>
91+
</div>
92+
</nav>
93+
94+
<div class="container-fluid">
95+
<h1 class="chart-title">Supplier Influence</h1>
96+
<p class="chart-description">Defense Supplier Influence 3D Surface</p>
97+
98+
<div class="chart-container">
99+
<iframe src="chart1-supplier-influence.html" title="Supplier Influence"></iframe>
100+
</div>
101+
</div>
102+
103+
<div class="footer">
104+
<p>© 2025 Geopolitical Analysis Dashboard | Built with Plotly & Bootstrap</p>
105+
<p>Created by: A.K. Faver</p>
106+
</div>
107+
108+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
109+
<script>
110+
// Highlight active nav item
111+
const currentPage = window.location.pathname.split('/').pop() || 'index.html';
112+
document.querySelectorAll('.nav-link').forEach(link => {
113+
if (link.getAttribute('href') === currentPage) {
114+
link.classList.add('active');
115+
}
116+
});
117+
</script>
118+
</body>
119+
</html>

‎docs/chart2.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Defense Systems - Geopolitical Dashboard</title>
7+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<style>
9+
body {
10+
background-color: #1a1a1a;
11+
color: #fff;
12+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13+
}
14+
.navbar {
15+
background-color: #0d1b2a;
16+
border-bottom: 2px solid #1e90ff;
17+
}
18+
.navbar-brand {
19+
font-weight: bold;
20+
font-size: 1.5rem;
21+
color: #1e90ff !important;
22+
}
23+
.nav-link {
24+
color: #aaa !important;
25+
transition: color 0.3s;
26+
margin: 0 5px;
27+
}
28+
.nav-link:hover {
29+
color: #1e90ff !important;
30+
}
31+
.nav-link.active {
32+
color: #1e90ff !important;
33+
border-bottom: 2px solid #1e90ff;
34+
}
35+
.container-fluid {
36+
padding: 20px;
37+
}
38+
.chart-title {
39+
color: #1e90ff;
40+
margin-bottom: 20px;
41+
font-size: 2rem;
42+
font-weight: bold;
43+
}
44+
.chart-description {
45+
color: #aaa;
46+
margin-bottom: 20px;
47+
font-size: 1.1rem;
48+
}
49+
.chart-container {
50+
background-color: #0d1b2a;
51+
border-radius: 8px;
52+
padding: 20px;
53+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
54+
}
55+
iframe {
56+
width: 100%;
57+
height: 800px;
58+
border: none;
59+
border-radius: 8px;
60+
}
61+
.footer {
62+
background-color: #0d1b2a;
63+
border-top: 2px solid #1e90ff;
64+
padding: 20px;
65+
margin-top: 40px;
66+
text-align: center;
67+
color: #aaa;
68+
}
69+
.nav-pills {
70+
flex-wrap: wrap;
71+
}
72+
</style>
73+
</head>
74+
<body>
75+
<nav class="navbar navbar-expand-lg navbar-dark">
76+
<div class="container-fluid">
77+
<a class="navbar-brand" href="index.html">🌍 Geopolitical Dashboard</a>
78+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
79+
<span class="navbar-toggler-icon"></span>
80+
</button>
81+
<div class="collapse navbar-collapse" id="navbarNav">
82+
<ul class="navbar-nav ms-auto">
83+
<li class="nav-item"><a class="nav-link" href="chart0.html">Threat Perception</a></li>
84+
<li class="nav-item"><a class="nav-link" href="chart1.html">Supplier Influence</a></li>
85+
<li class="nav-item"><a class="nav-link" href="chart2.html">Defense Systems</a></li>
86+
<li class="nav-item"><a class="nav-link" href="chart3.html">Multi-Country Radar</a></li>
87+
<li class="nav-item"><a class="nav-link" href="chart4.html">Priorities Heatmap</a></li>
88+
<li class="nav-item"><a class="nav-link" href="chart5.html">Supplier Connections</a></li>
89+
</ul>
90+
</div>
91+
</div>
92+
</nav>
93+
94+
<div class="container-fluid">
95+
<h1 class="chart-title">Defense Systems</h1>
96+
<p class="chart-description">Defense Systems Analysis</p>
97+
98+
<div class="chart-container">
99+
<iframe src="chart3-defense-systems.html" title="Defense Systems"></iframe>
100+
</div>
101+
</div>
102+
103+
<div class="footer">
104+
<p>© 2025 Geopolitical Analysis Dashboard | Built with Plotly & Bootstrap</p>
105+
<p>Created by: A.K. Faver</p>
106+
</div>
107+
108+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
109+
<script>
110+
// Highlight active nav item
111+
const currentPage = window.location.pathname.split('/').pop() || 'index.html';
112+
document.querySelectorAll('.nav-link').forEach(link => {
113+
if (link.getAttribute('href') === currentPage) {
114+
link.classList.add('active');
115+
}
116+
});
117+
</script>
118+
</body>
119+
</html>

‎docs/chart3-defense-systems.html‎

Lines changed: 3888 additions & 0 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)