PixelHosting/LookingGlas
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update templates/looking_glass.html

Browse source
This commit is contained in:
Blackwhitebear8 2025-08-14 12:54:07 +02:00
parent f84260f45d
commit 5ecbe2e5b7
1 changed files with 28 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

64
templates/looking_glass.html
View file

@ -21,7 +21,6 @@
}
.copy-btn { cursor: pointer; }
.speedtest-links a { margin-right: 10px; margin-bottom: 10px; }
.dropdown .btn { border-radius: 0 .25rem .25rem 0; }
.header-content {
position: relative;
z-index: 2;
@ -59,6 +58,25 @@
padding: 10px 0;
margin-top: 20px;
}
#form-error {
min-height: 1.5rem; /* Reserve space to prevent layout shift */
}
/* Styles for BGP raw output highlighting */
.asn-highlight { color: #5DADE2; }
.asn215085-highlight { color: #F9E79F; font-weight: bold; }
.best-line { color: #58D68D; font-weight: bold; }
/* --- Custom Styling for Buttons and Dropdowns --- */
.btn-custom {
background-color: #07AAF9;
border-color: #07AAF9;
color: white;
}
.btn-custom:hover {
background-color: #0698e0; /* Slightly darker blue for hover */
border-color: #0698e0;
color: white;
}
</style>
</head>
<body>
@ -70,15 +88,11 @@
</div>
</header>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #07AAF9;">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav justify-content-center w-100">
<li class="nav-item"><select class="form-select w-auto" id="main-location-selector"></select></li>
</ul>
<nav class="navbar navbar-expand-lg navbar-light py-1" style="background-color: #07AAF9;">
<div class="container-fluid d-flex justify-content-center">
<div class="d-flex align-items-center">
<label for="main-location-selector" class="form-label mb-0 me-2 text-white"><b>Locatie:</b></label>
<select class="form-select form-select-sm w-auto" id="main-location-selector"></select>
</div>
</div>
</nav>
@ -93,13 +107,6 @@
<div class="input-group">
<input type="text" id="location-name-display" class="form-control" readonly>
<a id="map-link-btn" href="#" target="_blank" class="btn btn-outline-secondary">Map</a>
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Locations
</button>
<ul class="dropdown-menu dropdown-menu-end" id="locations-dropdown-menu">
</ul>
</div>
</div>
</div>
<div class="col-lg-6">
@ -155,17 +162,19 @@
</div>
<div class="col-md-4 mb-3">
<label for="method" class="form-label">Method</label>
<select class="form-select" id="method">
<select class="form-select form-select-custom" id="method">
<option value="ping">Ping</option>
<option value="mtr">MTR</option>
<option value="traceroute">Traceroute</option>
<option value="bgp_raw">BGP Raw Lookup</option>
<option value="visualize">BGP Route Visualizer</option>
</select>
</div>
<div class="col-md-2 mb-3">
<button type="submit" id="execute-btn" class="btn btn-primary w-100">Execute</button>
<button type="submit" id="execute-btn" class="btn btn-custom w-100">Execute</button>
</div>
</div>
<div id="form-error" class="text-danger fw-bold mt-2"></div>
</form>
</div>
</div>
@ -209,29 +218,12 @@
</div>
</div>
<div class="modal fade" id="alertModal" tabindex="-1" aria-labelledby="alertModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="alertModalLabel">Input Validation</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="alertModalBody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<footer>
<p>&copy; 2020 - <span id="year"></span> AS215085 (PixelHosting). All rights reserved.</p>
<script> document.getElementById("year").textContent = new Date().getFullYear(); </script>
</footer>
<script src="/static/js/materialize.min.js"></script>
<script src="/static/js/validation.js"></script>
<script src="/static/js/looking_glass.js"></script>
</body>
</html>