Hugging Face's logo

Spaces:
CommanderLazarus
/
naval-intel-navigator
Running

App Files Community
CommanderLazarus commited on
Commit
f59e1ef
·
verified ·
1 Parent(s): d480a29

How do I join CSIS? Add to the bottom of the page.

Browse files
Files changed (7) hide show
  1. README.md +7 -4
  2. components/footer.js +192 -0
  3. components/hero.js +51 -0
  4. components/navbar.js +76 -0
  5. index.html +275 -19
  6. script.js +88 -0
  7. style.css +62 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Naval Intel Navigator
3
- emoji: 📈
4
- colorFrom: pink
5
  colorTo: green
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Naval Intel Navigator ⚓️🔍
3
+ colorFrom: green
 
4
  colorTo: green
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,192 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Navy Dreams: Intel & Beyond</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="components/navbar.js"></script>
12
+ <script src="components/hero.js"></script>
13
+ <script src="components/features.js"></script>
14
+ <script src="components/testimonial.js"></script>
15
+ <script src="components/footer.js"></script>
16
+ </head>
17
+ <body class="bg-gray-100">
18
+ <custom-navbar></custom-navbar>
19
+ <custom-hero></custom-hero>
20
+
21
+ <div class="container mx-auto px-4 py-16">
22
+ <div class="max-w-4xl mx-auto">
23
+ <!-- Path to Joining Section -->
24
+ <section class="mb-20">
25
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Navigating Your Path to Naval Intelligence</h2>
26
+
27
+ <div class="grid md:grid-cols-2 gap-8">
28
+ <!-- Age Waiver Info -->
29
+ <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-blue-500">
30
+ <div class="flex items-center mb-4">
31
+ <i data-feather="alert-circle" class="text-blue-500 mr-3"></i>
32
+ <h3 class="text-xl font-semibold text-gray-800">Age Waiver Possibilities</h3>
33
+ </div>
34
+ <p class="text-gray-600 mb-4">While the standard cutoff is 42, the Canadian Armed Forces may consider age waiver requests for exceptional candidates.</p>
35
+ <ul class="space-y-2 text-gray-600">
36
+ <li class="flex items-start">
37
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
38
+ <span>Demonstrate exceptional skills or experience</span>
39
+ </li>
40
+ <li class="flex items-start">
41
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
42
+ <span>Show outstanding physical fitness</span>
43
+ </li>
44
+ <li class="flex items-start">
45
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
46
+ <span>Highlight unique language or technical skills</span>
47
+ </li>
48
+ </ul>
49
+ </div>
50
+
51
+ <!-- Alternative Paths -->
52
+ <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-indigo-500">
53
+ <div class="flex items-center mb-4">
54
+ <i data-feather="compass" class="text-indigo-500 mr-3"></i>
55
+ <h3 class="text-xl font-semibold text-gray-800">Alternative Paths</h3>
56
+ </div>
57
+ <p class="text-gray-600 mb-4">If direct entry isn't possible, consider these alternative routes:</p>
58
+ <div class="space-y-4">
59
+ <div class="flex items-start">
60
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
61
+ <i data-feather="briefcase" class="text-indigo-600"></i>
62
+ </div>
63
+ <div>
64
+ <h4 class="font-medium text-gray-800">Civilian Intelligence Roles</h4>
65
+ <p class="text-sm text-gray-600">Apply your skills in related government agencies</p>
66
+ </div>
67
+ </div>
68
+ <div class="flex items-start">
69
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
70
+ <i data-feather="book" class="text-indigo-600"></i>
71
+ </div>
72
+ <div>
73
+ <h4 class="font-medium text-gray-800">Specialized Education</h4>
74
+ <p class="text-sm text-gray-600">Pursue relevant degrees/certifications to strengthen your case</p>
75
+ </div>
76
+ </div>
77
+ <div class="flex items-start">
78
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
79
+ <i data-feather="users" class="text-indigo-600"></i>
80
+ </div>
81
+ <div>
82
+ <h4 class="font-medium text-gray-800">Reserve Forces</h4>
83
+ <p class="text-sm text-gray-600">Consider joining the Naval Reserve as an alternative</p>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </section>
90
+
91
+ <!-- Step-by-Step Guide -->
92
+ <section class="mb-20">
93
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Your Action Plan</h2>
94
+
95
+ <div class="relative">
96
+ <!-- Vertical line -->
97
+ <div class="absolute h-full w-0.5 bg-blue-200 left-4 top-0"></div>
98
+
99
+ <!-- Steps -->
100
+ <div class="space-y-8">
101
+ <!-- Step 1 -->
102
+ <div class="relative flex items-start group">
103
+ <div class="absolute -left-1.5 mt-6 w-3 h-3 rounded-full bg-blue-500 group-hover:bg-blue-600 transition-colors"></div>
104
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-500 text-white flex items-center justify-center z-10">
105
+ 1
106
+ </div>
107
+ <div class="ml-6">
108
+ <h3 class="text-xl font-semibold text-gray-800">Initial Research</h3>
109
+ <p class="mt-1 text-gray-600">Contact a Canadian Forces Recruiting Centre to discuss waiver possibilities and understand current needs in Naval Intelligence.</p>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Step 2 -->
114
+ <div class="relative flex items-start group">
115
+ <div class="absolute -left-1.5 mt-6 w-3 h-3 rounded-full bg-blue-500 group-hover:bg-blue-600 transition-colors"></div>
116
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-500 text-white flex items-center justify-center z-10">
117
+ 2
118
+ </div>
119
+ <div class="ml-6">
120
+ <h3 class="text-xl font-semibold text-gray-800">Build Your Case</h3>
121
+ <p class="mt-1 text-gray-600">Document your relevant experience, skills, and achievements that would make you valuable despite your age.</p>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Step 3 -->
126
+ <div class="relative flex items-start group">
127
+ <div class="absolute -left-1.5 mt-6 w-3 h-3 rounded-full bg-blue-500 group-hover:bg-blue-600 transition-colors"></div>
128
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-500 text-white flex items-center justify-center z-10">
129
+ 3
130
+ </div>
131
+ <div class="ml-6">
132
+ <h3 class="text-xl font-semibold text-gray-800">Physical Preparation</h3>
133
+ <p class="mt-1 text-gray-600">Begin rigorous physical training to exceed the basic fitness requirements and demonstrate your capability.</p>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Step 4 -->
138
+ <div class="relative flex items-start group">
139
+ <div class="absolute -left-1.5 mt-6 w-3 h-3 rounded-full bg-blue-500 group-hover:bg-blue-600 transition-colors"></div>
140
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-500 text-white flex items-center justify-center z-10">
141
+ 4
142
+ </div>
143
+ <div class="ml-6">
144
+ <h3 class="text-xl font-semibold text-gray-800">Formal Application</h3>
145
+ <p class="mt-1 text-gray-600">Submit your application with a compelling waiver request, supported by documentation of your qualifications.</p>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Resources Section -->
153
+ <section class="mb-20">
154
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Essential Resources</h2>
155
+
156
+ <div class="grid md:grid-cols-3 gap-6">
157
+ <a href="https://www.canada.ca/en/department-national-defence/services/caf-jobs.html" target="_blank" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
158
+ <div class="text-blue-500 mb-4">
159
+ <i data-feather="external-link"></i>
160
+ </div>
161
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Official CAF Recruitment</h3>
162
+ <p class="text-gray-600">Canadian Armed Forces careers website with official requirements</p>
163
+ </a>
164
+
165
+ <a href="https://www.forces.ca/en/" target="_blank" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
166
+ <div class="text-blue-500 mb-4">
167
+ <i data-feather="anchor"></i>
168
+ </div>
169
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Forces.ca</h3>
170
+ <p class="text-gray-600">Comprehensive resource for joining the Canadian military</p>
171
+ </a>
172
+
173
+ <a href="https://www.canada.ca/en/security-intelligence-service.html" target="_blank" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
174
+ <div class="text-blue-500 mb-4">
175
+ <i data-feather="eye"></i>
176
+ </div>
177
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">CSIS Careers</h3>
178
+ <p class="text-gray-600">Civilian intelligence agency alternative career paths</p>
179
+ </a>
180
+ </div>
181
+ </section>
182
+ </div>
183
+ </div>
184
+
185
+ <custom-footer></custom-footer>
186
+
187
+ <script>
188
+ feather.replace();
189
+ </script>
190
+ <script src="script.js"></script>
191
+ </body>
192
+ </html>
components/hero.js ADDED
@@ -0,0 +1,51 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomHero extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .hero-image {
7
+ background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('http://static.photos/nature/1200x630/42');
8
+ background-size: cover;
9
+ background-position: center;
10
+ }
11
+ </style>
12
+ <section class="hero-image pt-32 pb-24 text-white">
13
+ <div class="container mx-auto px-4">
14
+ <div class="max-w-2xl mx-auto text-center">
15
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Navigating Age Barriers to Naval Intelligence</h1>
16
+ <p class="text-xl mb-8">Discover how to pursue your dream of becoming a Canadian Naval Intelligence Officer, even beyond the standard age cutoff.</p>
17
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
18
+ <a href="#path" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition-colors">
19
+ Explore Your Path
20
+ </a>
21
+ <a href="#calculator" class="bg-white hover:bg-gray-100 text-blue-600 px-6 py-3 rounded-md font-medium transition-colors">
22
+ Age Calculator
23
+ </a>
24
+ </div>
25
+ </div>
26
+ </div>
27
+ </section>
28
+
29
+ <!-- Age Calculator Section -->
30
+ <section id="calculator" class="bg-gray-50 py-16">
31
+ <div class="container mx-auto px-4">
32
+ <div class="max-w-md mx-auto bg-white p-8 rounded-lg shadow-md">
33
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Age Eligibility Check</h2>
34
+ <form id="age-calculator">
35
+ <div class="mb-4">
36
+ <label for="birth-year" class="block text-gray-700 mb-2">Your Birth Year</label>
37
+ <input type="number" id="birth-year" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
38
+ </div>
39
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">
40
+ Calculate Age in 2025
41
+ </button>
42
+ </form>
43
+ <div id="age-result" class="mt-4"></div>
44
+ </div>
45
+ </div>
46
+ </section>
47
+ `;
48
+ }
49
+ }
50
+
51
+ customElements.define('custom-hero', CustomHero);
components/navbar.js ADDED
@@ -0,0 +1,76 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .nav-link {
7
+ position: relative;
8
+ }
9
+ .nav-link::after {
10
+ content: '';
11
+ position: absolute;
12
+ width: 0;
13
+ height: 2px;
14
+ bottom: -2px;
15
+ left: 0;
16
+ background-color: #3b82f6;
17
+ transition: width 0.3s ease;
18
+ }
19
+ .nav-link:hover::after {
20
+ width: 100%;
21
+ }
22
+ </style>
23
+ <nav class="bg-white shadow-lg fixed w-full z-10">
24
+ <div class="container mx-auto px-4">
25
+ <div class="flex justify-between items-center py-4">
26
+ <a href="#" class="flex items-center space-x-2">
27
+ <i data-feather="anchor" class="text-blue-600"></i>
28
+ <span class="text-xl font-bold text-gray-800">NavyDreams</span>
29
+ </a>
30
+
31
+ <!-- Mobile menu button -->
32
+ <div class="md:hidden">
33
+ <button id="mobile-menu-button" class="text-gray-800 focus:outline-none">
34
+ <i data-feather="menu"></i>
35
+ </button>
36
+ </div>
37
+
38
+ <!-- Desktop Menu -->
39
+ <div class="hidden md:flex space-x-8">
40
+ <a href="#" class="nav-link text-gray-800 font-medium">Home</a>
41
+ <a href="#path" class="nav-link text-gray-600 hover:text-gray-800">Path</a>
42
+ <a href="#resources" class="nav-link text-gray-600 hover:text-gray-800">Resources</a>
43
+ <a href="#contact" class="nav-link text-gray-600 hover:text-gray-800">Contact</a>
44
+ <a href="#calculator" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors">Age Calculator</a>
45
+ <a href="#csis" class="nav-link text-gray-600 hover:text-gray-800">CSIS Info</a>
46
+ </div>
47
+ </div>
48
+
49
+ <!-- Mobile Menu -->
50
+ <div id="mobile-menu" class="hidden md:hidden pb-4">
51
+ <a href="#" class="block py-2 text-gray-800 font-medium">Home</a>
52
+ <a href="#path" class="block py-2 text-gray-600 hover:text-gray-800">Path</a>
53
+ <a href="#resources" class="block py-2 text-gray-600 hover:text-gray-800">Resources</a>
54
+ <a href="#contact" class="block py-2 text-gray-600 hover:text-gray-800">Contact</a>
55
+ <a href="#calculator" class="block mt-2 bg-blue-600 text-white px-4 py-2 rounded-md text-center hover:bg-blue-700 transition-colors">Age Calculator</a>
56
+ <a href="#csis" class="block py-2 text-gray-600 hover:text-gray-800">CSIS Info</a>
57
+ </div>
58
+ </div>
59
+ </nav>
60
+ `;
61
+
62
+ // Add mobile menu toggle functionality
63
+ const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
64
+ const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
65
+
66
+ mobileMenuButton.addEventListener('click', () => {
67
+ mobileMenu.classList.toggle('hidden');
68
+ feather.replace();
69
+ });
70
+
71
+ // Initialize feather icons
72
+ feather.replace();
73
+ }
74
+ }
75
+
76
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,275 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Navy Dreams: Intel & Beyond</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="components/navbar.js"></script>
12
+ <script src="components/hero.js"></script>
13
+ <script src="components/features.js"></script>
14
+ <script src="components/testimonial.js"></script>
15
+ <script src="components/footer.js"></script>
16
+ </head>
17
+ <body class="bg-gray-100">
18
+ <custom-navbar></custom-navbar>
19
+ <custom-hero></custom-hero>
20
+
21
+ <div class="container mx-auto px-4 py-16">
22
+ <div class="max-w-4xl mx-auto">
23
+ <!-- Path to Joining Section -->
24
+ <section class="mb-20">
25
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Navigating Your Path to Naval Intelligence</h2>
26
+
27
+ <div class="grid md:grid-cols-2 gap-8">
28
+ <!-- Age Waiver Info -->
29
+ <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-blue-500">
30
+ <div class="flex items-center mb-4">
31
+ <i data-feather="alert-circle" class="text-blue-500 mr-3"></i>
32
+ <h3 class="text-xl font-semibold text-gray-800">Age Waiver Possibilities</h3>
33
+ </div>
34
+ <p class="text-gray-600 mb-4">While the standard cutoff is 42, the Canadian Armed Forces may consider age waiver requests for exceptional candidates.</p>
35
+ <ul class="space-y-2 text-gray-600">
36
+ <li class="flex items-start">
37
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
38
+ <span>Demonstrate exceptional skills or experience</span>
39
+ </li>
40
+ <li class="flex items-start">
41
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
42
+ <span>Show outstanding physical fitness</span>
43
+ </li>
44
+ <li class="flex items-start">
45
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
46
+ <span>Highlight unique language or technical skills</span>
47
+ </li>
48
+ </ul>
49
+ </div>
50
+
51
+ <!-- Alternative Paths -->
52
+ <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-indigo-500">
53
+ <div class="flex items-center mb-4">
54
+ <i data-feather="compass" class="text-indigo-500 mr-3"></i>
55
+ <h3 class="text-xl font-semibold text-gray-800">Alternative Paths</h3>
56
+ </div>
57
+ <p class="text-gray-600 mb-4">If direct entry isn't possible, consider these alternative routes:</p>
58
+ <div class="space-y-4">
59
+ <div class="flex items-start">
60
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
61
+ <i data-feather="briefcase" class="text-indigo-600"></i>
62
+ </div>
63
+ <div>
64
+ <h4 class="font-medium text-gray-800">Civilian Intelligence Roles</h4>
65
+ <p class="text-sm text-gray-600">Apply your skills in related government agencies</p>
66
+ </div>
67
+ </div>
68
+ <div class="flex items-start">
69
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
70
+ <i data-feather="book" class="text-indigo-600"></i>
71
+ </div>
72
+ <div>
73
+ <h4 class="font-medium text-gray-800">Specialized Education</h4>
74
+ <p class="text-sm text-gray-600">Pursue relevant degrees/certifications to strengthen your case</p>
75
+ </div>
76
+ </div>
77
+ <div class="flex items-start">
78
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
79
+ <i data-feather="users" class="text-indigo-600"></i>
80
+ </div>
81
+ <div>
82
+ <h4 class="font-medium text-gray-800">Reserve Forces</h4>
83
+ <p class="text-sm text-gray-600">Consider joining the Naval Reserve as an alternative</p>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </section>
90
+
91
+ <!-- Step-by-Step Guide -->
92
+ <section class="mb-20">
93
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Your Action Plan</h2>
94
+
95
+ <div class="relative">
96
+ <!-- Vertical line -->
97
+ <div class="absolute h-full w-0.5 bg-blue-200 left-4 top-0"></div>
98
+
99
+ <!-- Steps -->
100
+ <div class="space-y-8">
101
+ <!-- Step 1 -->
102
+ <div class="relative flex items-start group">
103
+ <div class="absolute -left-1.5 mt-6 w-3 h-3 rounded-full bg-blue-500 group-hover:bg-blue-600 transition-colors"></div>
104
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-500 text-white flex items-center justify-center z-10">
105
+ 1
106
+ </div>
107
+ <div class="ml-6">
108
+ <h3 class="text-xl font-semibold text-gray-800">Initial Research</h3>
109
+ <p class="mt-1 text-gray-600">Contact a Canadian Forces Recruiting Centre to discuss waiver possibilities and understand current needs in Naval Intelligence.</p>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Step 2 -->
114
+ <div class="relative flex items-start group">
115
+ <div class="absolute -left-1.5 mt-6 w-3 h-3 rounded-full bg-blue-500 group-hover:bg-blue-600 transition-colors"></div>
116
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-500 text-white flex items-center justify-center z-10">
117
+ 2
118
+ </div>
119
+ <div class="ml-6">
120
+ <h3 class="text-xl font-semibold text-gray-800">Build Your Case</h3>
121
+ <p class="mt-1 text-gray-600">Document your relevant experience, skills, and achievements that would make you valuable despite your age.</p>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Step 3 -->
126
+ <div class="relative flex items-start group">
127
+ <div class="absolute -left-1.5 mt-6 w-3 h-3 rounded-full bg-blue-500 group-hover:bg-blue-600 transition-colors"></div>
128
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-500 text-white flex items-center justify-center z-10">
129
+ 3
130
+ </div>
131
+ <div class="ml-6">
132
+ <h3 class="text-xl font-semibold text-gray-800">Physical Preparation</h3>
133
+ <p class="mt-1 text-gray-600">Begin rigorous physical training to exceed the basic fitness requirements and demonstrate your capability.</p>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Step 4 -->
138
+ <div class="relative flex items-start group">
139
+ <div class="absolute -left-1.5 mt-6 w-3 h-3 rounded-full bg-blue-500 group-hover:bg-blue-600 transition-colors"></div>
140
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-500 text-white flex items-center justify-center z-10">
141
+ 4
142
+ </div>
143
+ <div class="ml-6">
144
+ <h3 class="text-xl font-semibold text-gray-800">Formal Application</h3>
145
+ <p class="mt-1 text-gray-600">Submit your application with a compelling waiver request, supported by documentation of your qualifications.</p>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Resources Section -->
153
+ <section class="mb-20">
154
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Essential Resources</h2>
155
+
156
+ <div class="grid md:grid-cols-3 gap-6">
157
+ <a href="https://www.canada.ca/en/department-national-defence/services/caf-jobs.html" target="_blank" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
158
+ <div class="text-blue-500 mb-4">
159
+ <i data-feather="external-link"></i>
160
+ </div>
161
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Official CAF Recruitment</h3>
162
+ <p class="text-gray-600">Canadian Armed Forces careers website with official requirements</p>
163
+ </a>
164
+
165
+ <a href="https://www.forces.ca/en/" target="_blank" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
166
+ <div class="text-blue-500 mb-4">
167
+ <i data-feather="anchor"></i>
168
+ </div>
169
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Forces.ca</h3>
170
+ <p class="text-gray-600">Comprehensive resource for joining the Canadian military</p>
171
+ </a>
172
+
173
+ <a href="https://www.canada.ca/en/security-intelligence-service.html" target="_blank" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
174
+ <div class="text-blue-500 mb-4">
175
+ <i data-feather="eye"></i>
176
+ </div>
177
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">CSIS Careers</h3>
178
+ <p class="text-gray-600">Civilian intelligence agency alternative career paths</p>
179
+ </a>
180
+ </div>
181
+ </section>
182
+
183
+ <!-- CSIS Joining Section -->
184
+ <section class="mb-20">
185
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Joining CSIS (Canadian Security Intelligence Service)</h2>
186
+
187
+ <div class="bg-white rounded-lg shadow-md p-8 max-w-4xl mx-auto">
188
+ <div class="grid md:grid-cols-2 gap-8">
189
+ <div>
190
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Requirements</h3>
191
+ <ul class="space-y-3 text-gray-600">
192
+ <li class="flex items-start">
193
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
194
+ <span>Canadian citizenship</span>
195
+ </li>
196
+ <li class="flex items-start">
197
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
198
+ <span>Security clearance (Top Secret)</span>
199
+ </li>
200
+ <li class="flex items-start">
201
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
202
+ <span>University degree or equivalent experience</span>
203
+ </li>
204
+ <li class="flex items-start">
205
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
206
+ <span>Strong analytical and communication skills</span>
207
+ </li>
208
+ <li class="flex items-start">
209
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
210
+ <span>Willingness to relocate as needed</span>
211
+ </li>
212
+ </ul>
213
+ </div>
214
+
215
+ <div>
216
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Application Process</h3>
217
+ <div class="space-y-4">
218
+ <div class="flex items-start">
219
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
220
+ <i data-feather="file-text" class="text-blue-600"></i>
221
+ </div>
222
+ <div>
223
+ <h4 class="font-medium text-gray-800">1. Online Application</h4>
224
+ <p class="text-sm text-gray-600">Submit through CSIS careers portal</p>
225
+ </div>
226
+ </div>
227
+ <div class="flex items-start">
228
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
229
+ <i data-feather="clipboard" class="text-blue-600"></i>
230
+ </div>
231
+ <div>
232
+ <h4 class="font-medium text-gray-800">2. Screening & Testing</h4>
233
+ <p class="text-sm text-gray-600">Written tests and interviews</p>
234
+ </div>
235
+ </div>
236
+ <div class="flex items-start">
237
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
238
+ <i data-feather="shield" class="text-blue-600"></i>
239
+ </div>
240
+ <div>
241
+ <h4 class="font-medium text-gray-800">3. Security Clearance</h4>
242
+ <p class="text-sm text-gray-600">Extensive background check</p>
243
+ </div>
244
+ </div>
245
+ <div class="flex items-start">
246
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
247
+ <i data-feather="award" class="text-blue-600"></i>
248
+ </div>
249
+ <div>
250
+ <h4 class="font-medium text-gray-800">4. Training Program</h4>
251
+ <p class="text-sm text-gray-600">Intensive preparation for intelligence work</p>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <div class="mt-8 text-center">
259
+ <a href="https://www.canada.ca/en/security-intelligence-service/corporate/csis-jobs.html" target="_blank" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition-colors">
260
+ Explore CSIS Careers
261
+ </a>
262
+ </div>
263
+ </div>
264
+ </section>
265
+ </div>
266
+ </div>
267
+
268
+ <custom-footer></custom-footer>
269
+ <script>
270
+ feather.replace();
271
+ </script>
272
+ <script src="script.js"></script>
273
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
274
+ </body>
275
+ </html>
script.js ADDED
@@ -0,0 +1,88 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Main JavaScript functionality
2
+
3
+ document.addEventListener('DOMContentLoaded', function() {
4
+ // Initialize tooltips
5
+ const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
6
+
7
+ if (tooltipTriggerList.length > 0) {
8
+ tooltipTriggerList.map(function (tooltipTriggerEl) {
9
+ return new bootstrap.Tooltip(tooltipTriggerEl);
10
+ });
11
+ }
12
+
13
+ // Smooth scroll for anchor links
14
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
15
+ anchor.addEventListener('click', function (e) {
16
+ e.preventDefault();
17
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
18
+ behavior: 'smooth'
19
+ });
20
+ });
21
+ });
22
+
23
+ // Age calculator for demonstration purposes
24
+ const currentYear = new Date().getFullYear();
25
+ const targetYear = 2025;
26
+ const cutoffAge = 42;
27
+
28
+ const ageCalcForm = document.getElementById('age-calculator');
29
+ if (ageCalcForm) {
30
+ ageCalcForm.addEventListener('submit', function(e) {
31
+ e.preventDefault();
32
+ const birthYear = parseInt(document.getElementById('birth-year').value);
33
+ const ageIn2025 = targetYear - birthYear;
34
+
35
+ const resultElement = document.getElementById('age-result');
36
+ resultElement.innerHTML = `
37
+ <div class="mt-4 p-4 rounded-lg ${ageIn2025 > cutoffAge ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'}">
38
+ <p>In 2025, you will be <strong>${ageIn2025} years old</strong>.</p>
39
+ <p class="mt-2">${ageIn2025 > cutoffAge ?
40
+ 'This exceeds the standard cutoff age, but waiver options may be available.' :
41
+ 'You meet the standard age requirements!'}</p>
42
+ </div>
43
+ `;
44
+ });
45
+ }
46
+ });
47
+
48
+ // Back to top button functionality
49
+ window.addEventListener('scroll', function() {
50
+ const backToTopButton = document.getElementById('back-to-top');
51
+ if (backToTopButton) {
52
+ if (window.pageYOffset > 300) {
53
+ backToTopButton.classList.remove('opacity-0', 'invisible');
54
+ backToTopButton.classList.add('opacity-100', 'visible');
55
+ } else {
56
+ backToTopButton.classList.remove('opacity-100', 'visible');
57
+ backToTopButton.classList.add('opacity-0', 'invisible');
58
+ }
59
+ }
60
+ });
61
+
62
+ // Initialize any modals or popups
63
+ function initModal(modalId) {
64
+ const modal = document.getElementById(modalId);
65
+ if (modal) {
66
+ const openButtons = document.querySelectorAll(`[data-modal-target="${modalId}"]`);
67
+ const closeButton = modal.querySelector('.modal-close');
68
+
69
+ openButtons.forEach(btn => {
70
+ btn.addEventListener('click', () => {
71
+ modal.classList.remove('hidden');
72
+ document.body.style.overflow = 'hidden';
73
+ });
74
+ });
75
+
76
+ closeButton.addEventListener('click', () => {
77
+ modal.classList.add('hidden');
78
+ document.body.style.overflow = 'auto';
79
+ });
80
+
81
+ window.addEventListener('click', (e) => {
82
+ if (e.target === modal) {
83
+ modal.classList.add('hidden');
84
+ document.body.style.overflow = 'auto';
85
+ }
86
+ });
87
+ }
88
+ }
style.css CHANGED
@@ -1,28 +1,71 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Custom styles that complement Tailwind */
2
+
3
+ /* Smooth scrolling */
4
+ html {
5
+ scroll-behavior: smooth;
6
+ }
7
+
8
+ /* Custom underline animation */
9
+ .link-underline {
10
+ position: relative;
11
+ display: inline-block;
12
+ }
13
+
14
+ .link-underline::after {
15
+ content: '';
16
+ position: absolute;
17
+ width: 0;
18
+ height: 2px;
19
+ bottom: -2px;
20
+ left: 0;
21
+ background-color: #3b82f6; /* blue-500 */
22
+ transition: width 0.3s ease;
23
+ }
24
+
25
+ .link-underline:hover::after {
26
+ width: 100%;
27
  }
28
 
29
+ /* Custom pulse animation for important elements */
30
+ @keyframes pulse {
31
+ 0%, 100% {
32
+ opacity: 1;
33
+ }
34
+ 50% {
35
+ opacity: 0.7;
36
+ }
37
  }
38
 
39
+ .pulse-animation {
40
+ animation: pulse 2s infinite;
 
 
 
41
  }
42
 
43
+ /* Custom section spacing */
44
+ .section-spacing {
45
+ padding-top: 5rem;
46
+ padding-bottom: 5rem;
 
 
47
  }
48
 
49
+ /* Custom card hover effect */
50
+ .card-hover:hover {
51
+ transform: translateY(-5px);
52
+ transition: transform 0.3s ease;
53
  }
54
+
55
+ /* Custom scrollbar */
56
+ ::-webkit-scrollbar {
57
+ width: 8px;
58
+ }
59
+
60
+ ::-webkit-scrollbar-track {
61
+ background: #f1f1f1;
62
+ }
63
+
64
+ ::-webkit-scrollbar-thumb {
65
+ background: #3b82f6; /* blue-500 */
66
+ border-radius: 4px;
67
+ }
68
+
69
+ ::-webkit-scrollbar-thumb:hover {
70
+ background: #2563eb; /* blue-600 */
71
+ }