feat: Implement parallel segment downloading, enhance UI/UX with smooth transitions and navigation styling, and add new log and manual templates.

templates/manual.html

@@ -0,0 +1,133 @@
+{% 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&amp;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 %}