134 lines
3.8 KiB
HTML
134 lines
3.8 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<style>
|
|
/* Global Background & Layout */
|
|
body {
|
|
width: 100%;
|
|
background-size: 300% 300%;
|
|
background-image: linear-gradient(
|
|
-45deg,
|
|
rgba(59, 173, 227, 1) 0%,
|
|
rgba(87, 111, 230, 1) 25%,
|
|
rgba(152, 68, 183, 1) 51%,
|
|
rgba(255, 53, 127, 1) 100%
|
|
);
|
|
animation: AnimateBG 20s ease infinite;
|
|
color: white;
|
|
}
|
|
|
|
@keyframes AnimateBG {
|
|
0% { background-position: 0% 50% }
|
|
50% { background-position: 100% 50% }
|
|
100% { background-position: 0% 50% }
|
|
}
|
|
|
|
/* Glassmorphism Container for Manual */
|
|
#manual_container {
|
|
background: rgba(30, 41, 59, 0.5); /* Semi-transparent dark blue */
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle border */
|
|
padding: 40px;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
|
color: #f1f5f9; /* Slate 100 text */
|
|
margin-top: 20px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
/* Markdown Styling Override */
|
|
#text_div h1, #text_div h2, #text_div h3 {
|
|
color: #fff;
|
|
margin-top: 1.5em;
|
|
margin-bottom: 0.8em;
|
|
font-weight: 700;
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
#text_div h1 { font-size: 2.2em; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 0.3em; }
|
|
#text_div h2 { font-size: 1.8em; }
|
|
|
|
#text_div p, #text_div li {
|
|
font-size: 1.1em;
|
|
line-height: 1.7;
|
|
color: #cbd5e1; /* Slate 300 */
|
|
}
|
|
|
|
#text_div a {
|
|
color: #60a5fa;
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
#text_div a:hover {
|
|
color: #93c5fd;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Code Blocks */
|
|
#text_div pre {
|
|
background: rgba(15, 23, 42, 0.6) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
#text_div code {
|
|
font-family: 'Consolas', 'Monaco', monospace;
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
/* Tables */
|
|
#text_div table {
|
|
color: #e2e8f0;
|
|
border-color: rgba(255,255,255,0.1);
|
|
width: 100%;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
#text_div table th, #text_div table td {
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
#text_div table thead th {
|
|
border-bottom: 2px solid rgba(255,255,255,0.2);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="container-fluid">
|
|
<div id="manual_container">
|
|
<meta id="text" data-text="{{data}}">
|
|
<div id="text_div"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autorun=true&lang=css&lang=python&skin=sunburst"></script>
|
|
<script src="{{ url_for('static', filename='js/showdown_2.1.0.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/showdown-prettify.js') }}"></script>
|
|
<link href="{{ url_for('static', filename='css/showdown.css') }}" rel="stylesheet">
|
|
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
// Force fluid layout
|
|
$("#main_container").removeClass("container").addClass("container-fluid");
|
|
|
|
var converter = new showdown.Converter({extensions: ['prettify']});
|
|
converter.setOption('tables', true);
|
|
converter.setOption('strikethrough', true);
|
|
converter.setOption('ghCodeBlocks',true);
|
|
|
|
text = $('#text').data('text');
|
|
if (window.location.href.endsWith('.yaml')) {
|
|
text = "```" + text + "```";
|
|
}
|
|
html = converter.makeHtml(text);
|
|
$('#text_div').html(html);
|
|
});
|
|
</script>
|
|
{% endblock %}
|