229 lines
7.1 KiB
HTML
229 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Emergency Information - Nathan.Woodburn/</title>
|
|
<link rel="icon" href="/assets/img/favicon.png" type="image/png">
|
|
<link rel="stylesheet" href="/assets/css/index.css">
|
|
<!-- Remove highlight.js as it's not needed with Pygments -->
|
|
<style>
|
|
.emergency-content {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
text-align: left;
|
|
padding: 20px;
|
|
background-color: #111;
|
|
border-radius: 8px;
|
|
}
|
|
.controls {
|
|
margin-top: 20px;
|
|
}
|
|
/* Additional styling for code blocks */
|
|
.codehilite {
|
|
padding: 0;
|
|
margin: 1em 0;
|
|
border-radius: 5px;
|
|
overflow: auto;
|
|
}
|
|
.codehilite pre {
|
|
padding: 10px;
|
|
margin: 0;
|
|
background-color: #1e1e1e;
|
|
border-radius: 5px;
|
|
overflow-x: auto;
|
|
}
|
|
/* Fix code display in dark theme */
|
|
.codehilite .k { color: #569cd6; } /* Keyword */
|
|
.codehilite .s, .codehilite .s1, .codehilite .s2 { color: #ce9178; } /* String */
|
|
.codehilite .c, .codehilite .c1 { color: #6a9955; } /* Comment */
|
|
.codehilite .n { color: #dcdcdc; } /* Name */
|
|
.codehilite .o { color: #d4d4d4; } /* Operator */
|
|
.codehilite .p { color: #d4d4d4; } /* Punctuation */
|
|
|
|
/* YAML-specific styles */
|
|
.codehilite .l { color: #b5cea8; } /* Literals */
|
|
.codehilite .kn { color: #569cd6; } /* Key Name (YAML keys) */
|
|
|
|
/* Styling for lists */
|
|
.emergency-content ol {
|
|
list-style-type: decimal;
|
|
padding-left: 30px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.emergency-content ol ol {
|
|
list-style-type: lower-alpha;
|
|
}
|
|
|
|
.emergency-content ol ol ol {
|
|
list-style-type: lower-roman;
|
|
}
|
|
|
|
.emergency-content li {
|
|
margin: 5px 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Adding some spacing between list items for better readability */
|
|
.emergency-content li + li {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Styling for unordered lists as well */
|
|
.emergency-content ul {
|
|
list-style-type: disc;
|
|
padding-left: 30px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.emergency-content ul ul {
|
|
list-style-type: circle;
|
|
}
|
|
|
|
.emergency-content ul ul ul {
|
|
list-style-type: square;
|
|
}
|
|
|
|
/* Password hiding feature */
|
|
.password-hidden {
|
|
display: inline-block;
|
|
background-color: #333;
|
|
color: transparent;
|
|
border-radius: 4px;
|
|
padding: 2px 8px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
text-shadow: 0 0 8px rgba(255,255,255,0.5);
|
|
position: relative;
|
|
}
|
|
|
|
.password-hidden::after {
|
|
content: "Click to reveal";
|
|
position: absolute;
|
|
color: #aaa;
|
|
font-size: 0.8em;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.password-hidden.revealed {
|
|
color: #e9e9e9;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.password-hidden.revealed::after {
|
|
content: "";
|
|
}
|
|
|
|
/* Hide code class for inline code */
|
|
code.hide-password {
|
|
background-color: #333;
|
|
color: transparent;
|
|
text-shadow: 0 0 8px rgba(255,255,255,0.5);
|
|
cursor: pointer;
|
|
position: relative;
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
code.hide-password::after {
|
|
content: "🔒";
|
|
position: absolute;
|
|
color: #aaa;
|
|
font-size: 1em;
|
|
right: 5px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
code.hide-password.revealed {
|
|
color: #e9e9e9;
|
|
text-shadow: none;
|
|
}
|
|
|
|
code.hide-password.revealed::after {
|
|
content: "";
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="spacer"></div>
|
|
<div class="centre">
|
|
<h1>Emergency Information</h1>
|
|
|
|
<div class="emergency-content">
|
|
{{ content|safe }}
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<p><a href="/">Back to Home</a> | <a href="/logout">Logout</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Script to make all content links open in a new tab -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Select all links in the emergency content
|
|
const contentLinks = document.querySelectorAll('.emergency-content a');
|
|
|
|
// Add target="_blank" and rel="noopener" (for security) to each link
|
|
contentLinks.forEach(link => {
|
|
link.setAttribute('target', '_blank');
|
|
link.setAttribute('rel', 'noopener');
|
|
});
|
|
|
|
// Process special password blocks
|
|
processPasswordBlocks();
|
|
|
|
// Process inline code with hide-password class
|
|
processPasswordCodeElements();
|
|
});
|
|
|
|
function processPasswordBlocks() {
|
|
// Look for div or pre elements with data-type="password"
|
|
const passwordElements = document.querySelectorAll('[data-type="password"]');
|
|
|
|
passwordElements.forEach(element => {
|
|
element.classList.add('password-hidden');
|
|
|
|
element.addEventListener('click', function() {
|
|
this.classList.toggle('revealed');
|
|
});
|
|
});
|
|
}
|
|
|
|
function processPasswordCodeElements() {
|
|
// Find all code blocks with class "hide-password"
|
|
const passwordCodes = document.querySelectorAll('code.hide-password, .hide-password code');
|
|
|
|
passwordCodes.forEach(code => {
|
|
// If the parent is not already a password-hidden element
|
|
if (!code.parentElement.classList.contains('password-hidden')) {
|
|
code.addEventListener('click', function() {
|
|
this.classList.toggle('revealed');
|
|
});
|
|
}
|
|
});
|
|
|
|
// Convert all `password:` prefixed code elements
|
|
const allCodeElements = document.querySelectorAll('code');
|
|
allCodeElements.forEach(code => {
|
|
if (code.textContent.startsWith('password:')) {
|
|
code.textContent = code.textContent.replace('password:', '');
|
|
code.classList.add('hide-password');
|
|
code.addEventListener('click', function() {
|
|
this.classList.toggle('revealed');
|
|
});
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|