Router-tools/templates/base.html

131 lines
No EOL
6.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}AS215085 - Network tools{% endblock %}</title>
<link rel="icon" type="image/png" href="/static/img/favicon.png">
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar fixed-top d-lg-none mobile-header">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="/static/img/as215085-logo.png" alt="AS215085 Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarNav" aria-controls="sidebarNav">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<nav class="sidebar offcanvas-lg offcanvas-start" tabindex="-1" id="sidebarNav">
<div class="offcanvas-header d-lg-none">
<h5 class="offcanvas-title" id="sidebarNavLabel">Menu</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarNav" aria-label="Close"></button>
</div>
<div class="offcanvas-body p-0 d-flex flex-column">
<div>
<div class="sidebar-header">
<div class="vyos-info">
<img src="/static/img/vyos-logo.svg" alt="VyOS Logo" class="vyos-logo">
</div>
<p class="sidebar-version">Version: {{ vyos_version }}</p>
<p class="sidebar-hostname">{{ hostname }}</p>
</div>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="/"><img src="/static/img/menu/home.png" class="nav-icon"><span>Home</span></a></li>
<li class="nav-item"><a class="nav-link" href="/bgp"><img src="/static/img/menu/wired.png" class="nav-icon"><span>BGP Summary</span></a></li>
<li class="nav-item"><a class="nav-link" href="/bgp/history"><img src="/static/img/graph.png" class="nav-icon"><span>BGP History</span></a></li>
<li class="nav-item"><a class="nav-link" href="/bgp/dampened"><img src="/static/img/menu/graph-down.png" class="nav-icon"><span>BGP Dampening</span></a></li>
<li class="nav-item"><a class="nav-link" href="/bgp-route"><img src="/static/img/menu/loupe.png" class="nav-icon"><span>BGP Route Lookup</span></a></li>
<li class="nav-item"><a class="nav-link" href="/dhcpv6-leases"><img src="/static/img/menu/dhcp.png" class="nav-icon"><span>DHCPV6 lease Lookup</span></a></li>
<li class="nav-item"><a class="nav-link" href="/visual-route"><img src="/static/img/menu/strategy.png" class="nav-icon"><span>BGP Visualizer</span></a></li>
<li class="nav-item"><a class="nav-link" href="/rpki"><img src="/static/img/menu/shield.png" class="nav-icon"><span>RPKI Lookup</span></a></li>
<li class="nav-item"><a class="nav-link" href="/arp"><img src="/static/img/menu/cable.png" class="nav-icon"><span>ARP Table</span></a></li>
<li class="nav-item"><a class="nav-link" href="/neighbors"><img src="/static/img/menu/cable.png" class="nav-icon"><span>Neighbor Table</span></a></li>
<li class="nav-item"><a class="nav-link" href="/interfaces"><img src="/static/img/menu/sitemap.png" class="nav-icon"><span>Interface Table</span></a></li>
<li class="nav-item"><a class="nav-link" href="/firewall"><img src="/static/img/menu/firewall.png" class="nav-icon"><span>Firewall</span></a></li>
<li class="nav-item"><a class="nav-link" href="/stats"><img src="/static/img/menu/pie-chart.png" class="nav-icon"><span>Stats</span></a></li>
</ul>
</div>
<div class="sidebar-footer">
<button id="sidebar-toggle" class="btn">
<img src="/static/img/menu/left-arrow.png" class="nav-icon">
</button>
</div>
</div>
</nav>
<div class="main-content-wrapper">
<header class="page-header">
<div class="page-header-content">
<a href="/"> <img src="/static/img/as215085-logo.png" alt="AS215085 Logo" style="height: 120px; opacity: 1;!important"> </a>
<p><b>Proudly delivering the backbone for PixelHostings services</b></p>
{% block page_header %}{% endblock %}
</div>
</header>
<main class="container-fluid py-4">
<div class="main-content-wrapper1">
{% block content %}
{% endblock %}
</div>
</main>
<footer>
<p>&copy; 2020 - <span id="year"></span> AS215085 (PixelHosting). All rights reserved.</p>
</footer>
</div>
<div id="notificationModal" class="modal-overlay" style="display: none;">
<div class="modal-content">
<h4 id="notificationTitle">Notification</h4>
<p id="notificationBody"></p>
<div class="modal-buttons">
<button id="notificationCloseBtn" class="btn btn-primary">OK</button>
</div>
</div>
</div>
<div id="confirmationModal" class="modal-overlay" style="display: none;">
<div class="modal-content">
<h4 id="modalTitle">Confirm Action</h4>
<p id="modalBody">Are you sure you want to proceed with this action?</p>
<div class="modal-buttons">
<button id="modalConfirmBtn" class="btn btn-danger">Confirm</button>
<button id="modalCancelBtn" class="btn btn-secondary">Cancel</button>
</div>
</div>
</div>
<script src="/static/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById("year").textContent = new Date().getFullYear();
const sidebarToggle = document.getElementById('sidebar-toggle');
const body = document.body;
const applySidebarState = () => {
if (localStorage.getItem('sidebar-collapsed') === 'true') {
body.classList.add('sidebar-collapsed');
} else {
body.classList.remove('sidebar-collapsed');
}
};
sidebarToggle.addEventListener('click', () => {
body.classList.toggle('sidebar-collapsed');
const isCollapsed = body.classList.contains('sidebar-collapsed');
localStorage.setItem('sidebar-collapsed', isCollapsed);
});
document.addEventListener('DOMContentLoaded', applySidebarState);
</script>
</body>
</html>