mirror of
https://github.com/checktheroads/hyperglass
synced 2024-05-11 05:55:08 +00:00
:zap::rocket::art:💄
This commit is contained in:
Matt Love
@@ -1,11 +1,5 @@
|
||||
{% extends "templates/base.html.j2" %}
|
||||
|
||||
<head>
|
||||
{% block head %}
|
||||
{% include "templates/inlinestyle.html.j2" %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
{% block content %}
|
||||
<div class="ui vertical center aligned segment" id="lg-maincontainer">
|
||||
{% import "templates/errortext.html.j2" as errortext %}
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
{% extends "templates/base.html.j2" %}
|
||||
|
||||
<head>
|
||||
{% block head %}
|
||||
{% include "templates/inlinestyle.html.j2" %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
{% block content %}
|
||||
<div class="ui vertical center aligned segment" id="lg-maincontainer">
|
||||
{% import "templates/errortext.html.j2" as errortext %}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html class="h-100">
|
||||
|
||||
<head>
|
||||
<title>{{ branding.site_name }}</title>
|
||||
@@ -16,24 +16,32 @@
|
||||
<meta name="msapplication-TileColor" content="{{ branding.colors.tag.location_title }}" />
|
||||
<meta name="msapplication-config" content="{{ branding.logo.favicons }}browserconfig.xml" />
|
||||
<meta name="theme-color" content="{{ branding.colors.button_submit }}" />
|
||||
<link href="static/css/icofont/icofont.min.css" rel="stylesheet" />
|
||||
<link href="static/semantic/dist/semantic.min.css" rel="stylesheet" type="text/css" />
|
||||
<link href="static/css/animsition.min.css" rel="stylesheet" />
|
||||
<!-- <link href="static/css/hyperglass.css" rel="stylesheet" /> -->
|
||||
<link href="ui/hyperglass.css" rel="stylesheet" type="text/css" />
|
||||
{% block head %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
<body id="root">
|
||||
<body class="d-flex flex-column h-100">
|
||||
<div class="container-fluid d-flex w-100 h-100 p-3 mx-auto flex-column">
|
||||
<header>
|
||||
<div>
|
||||
{% if branding.peering_db.enable %}
|
||||
<nav class="nav nav-masthead justify-content-center float-md-right">
|
||||
<a class="nav-link active" href="https://as{{ general.primary_asn }}.peeringdb.com/"
|
||||
target="_blank">PeeringDB <i class="remixicon-share-circle-line"></i>
|
||||
</a>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main role="main" class="flex-shrink-0">
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
{% block footer %}
|
||||
{% endblock %}
|
||||
<script src="static/js/jquery-3.4.0.min.js"></script>
|
||||
<script src="static/semantic/dist/semantic.min.js"></script>
|
||||
<script src="static/js/clipboard.min.js"></script>
|
||||
<script src="static/js/animsition.min.js"></script>
|
||||
<script src="static/js/hyperglass.js"></script>
|
||||
</main>
|
||||
{% include "templates/footer.html.j2" %}
|
||||
</div>
|
||||
<script src="ui/hyperglass.js"></script>
|
||||
{% if general.google_analytics %}
|
||||
<!--Google Analytics-->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id={{general.google_analytics}}">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<p class="ui ">Powered by <a href="https://github.com/checktheroads/hyperglass" target="_blank">hyperglass</a>.
|
||||
<p><small>Powered by <a href="https://github.com/checktheroads/hyperglass" target="_blank">hyperglass</a>.
|
||||
Source code
|
||||
licensed <a href="https://github.com/checktheroads/hyperglass/blob/master/LICENSE" target="_blank">BSD
|
||||
3-Clause
|
||||
Clear.</a></p>
|
||||
Clear.</a></small></p>
|
||||
@@ -1,39 +1,20 @@
|
||||
{% if branding.footer.enable and branding.credit.enable %}
|
||||
<div class="ui vertical footer segment">
|
||||
<div class="ui center aligned fluid container">
|
||||
<div class="ui vertical basic segments">
|
||||
<div class="ui padded segment" id="lg-footer-text">
|
||||
{{ details.footer.content | safe }}
|
||||
</div>
|
||||
<div class="ui padded segment" id="lg-credit-text">
|
||||
{% include "templates/credit.html.j2" %}
|
||||
</div>
|
||||
<footer class="footer mt-auto py-3">
|
||||
<div class="container text-center">
|
||||
{% if branding.footer.enable and branding.credit.enable %}
|
||||
<div class="col">
|
||||
<small>{{ details.footer.content | safe }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% elif branding.footer.enable and not branding.credit.enable %}
|
||||
<div class="ui vertical footer segment">
|
||||
<div class="ui center aligned fluid container">
|
||||
<div class="ui vertical basic segments">
|
||||
<div class="ui padded segment" id="lg-footer-text">
|
||||
{{ details.footer.content | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% elif branding.credit.enable and not branding.footer.enable %}
|
||||
<div class="ui vertical footer segment">
|
||||
<div class="ui center aligned fluid container">
|
||||
<div class="ui vertical basic segments">
|
||||
<div class="ui padded segment" id="lg-credit-text">
|
||||
<div class="col">
|
||||
{% include "templates/credit.html.j2" %}
|
||||
</div>
|
||||
</div>
|
||||
{% elif not branding.credit.enable and branding.footer.enable %}
|
||||
<div class="col">
|
||||
<small>{{ details.footer.content | safe }}</small>
|
||||
</div>
|
||||
{% elif not branding.footer.enable and branding.credit.enable %}
|
||||
<div class="col">
|
||||
{% include "templates/credit.html.j2" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% elif not branding.footer.enable and not branding.footer.enable %}
|
||||
<div class="ui vertical footer segment">
|
||||
<div class="ui center aligned fluid container">
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</footer>
|
||||
@@ -1,35 +0,0 @@
|
||||
@charset "utf-8";
|
||||
|
||||
/* Fonts */
|
||||
@import url('{{ branding.font.primary.url }}');
|
||||
@import url('{{ branding.font.mono.url }}');
|
||||
|
||||
$family-sans-serif: "{{ branding.font.primary.name }}", sans-serif;
|
||||
$family-monospace: "{{ branding.font.mono.name }}", monospace;
|
||||
|
||||
/* Color Changes */
|
||||
$body-background-color: {{ branding.colors.background }};
|
||||
$footer-background-color: transparent;
|
||||
$danger: {{ branding.colors.danger }};
|
||||
|
||||
/* Custom Colors */
|
||||
$lg-btn-submit: {{ branding.colors.button_submit }};
|
||||
$lg-tag-loc_title: {{ branding.colors.tag.location_title }};
|
||||
$lg-tag-type_title: {{ branding.colors.tag.query_type_title }};
|
||||
$lg-tag-type: {{ branding.colors.tag.query_type }};
|
||||
$lg-progressbar: {{ branding.colors.progress_bar }};
|
||||
$lg-tag-loc: {{ branding.colors.tag.location }};
|
||||
|
||||
/* Element Changes */
|
||||
$footer-padding: 3rem 1.5rem 3rem ;
|
||||
|
||||
/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
|
||||
@import "utilities/_all";
|
||||
@import "base/_all";
|
||||
@import "elements/_all";
|
||||
@import "components/_all";
|
||||
@import "grid/_all";
|
||||
@import "layout/_all";
|
||||
|
||||
/* Hyperglass Imports */
|
||||
@import "custom/custom_elements";
|
||||
@@ -1,106 +1,72 @@
|
||||
{% extends "templates/base.html.j2" %}
|
||||
|
||||
<head>
|
||||
{% block head %}
|
||||
{% include "templates/inlinestyle.html.j2" %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
{# {% include "templates/ratelimit-query.html.j2" %} #}
|
||||
|
||||
{% block content %}
|
||||
{% include "templates/ratelimit-query.html.j2" %}
|
||||
{% if branding.peering_db.enable %}
|
||||
<div class="ui secondary menu">
|
||||
<div class="right menu">
|
||||
<a href="https://as{{ general.primary_asn }}.peeringdb.com/" target="_blank" class="item">
|
||||
PeeringDB
|
||||
<i class="sign out alternate icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="ui vertical center aligned segment" id="lg-maincontainer">
|
||||
<div class="ui content container animsition" data-animsition-out-class="fade-out-right"
|
||||
data-animsition-in-class="fade-in-left" id="lg-form">
|
||||
<div id="hg-parent" class="mx-auto">
|
||||
<div class="container animsition" data-animsition-out-class="fade-out-right" data-animsition-in-class="fade-in-left"
|
||||
id="hg-form">
|
||||
{% import "templates/title.html.j2" as title %}
|
||||
{{ title.title(branding, primary_asn, size_title="h1", size_subtitle="h3") }}
|
||||
<form class="ui huge form" onsubmit="return false" name="queryform" id="lgForm" action="?" method="POST">
|
||||
<div class="two fields">
|
||||
<div class="field">
|
||||
<div class="ui fluid search selection dropdown" id="location">
|
||||
<input type="hidden" name="location">
|
||||
<div class="default text">{{ branding.text.location }}</div>
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="menu">
|
||||
{% for (netname, loc_params) in networks.items() %}
|
||||
<div class="divider"></div>
|
||||
<div class="header">
|
||||
<i class="globe icon"></i>
|
||||
{{ netname }}
|
||||
</div>
|
||||
{{ title.title(branding, primary_asn, size_title="h1", size_subtitle="h4", align="center") }}
|
||||
<form onsubmit="return false" name="queryform" id="lgForm" action="?" method="POST">
|
||||
<div class="form-row mb-3">
|
||||
<div class="col">
|
||||
<select multiple class="form-control form-control-lg hg-select" id="location" data-live-search="true"
|
||||
title="{{ branding.text.location }}">
|
||||
{% for (netname, loc_params) in networks.items() %}
|
||||
<optgroup label="{{ netname }}">
|
||||
{% for param in loc_params %}
|
||||
<div class="item" data-value='{{param["hostname"]}}'>
|
||||
{{param["display_name"]}}
|
||||
</div>
|
||||
<input type="hidden" id='{{param["hostname"]}}' name='{{param["display_name"]}}' value="{{ netname }}">
|
||||
<option data-tokens='{{ netname }} {{param["hostname"]}}' value='{{param["hostname"]}}'
|
||||
data-display-name='{{param["display_name"]}}' data-netname="{{ netname }}" id='{{param["hostname"]}}'>
|
||||
{{ param["display_name"] }}</option>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</optgroup>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui selection dropdown left icon" id="query_type">
|
||||
<input type="hidden" name="query_type">
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">{{ branding.text.query_type }}</div>
|
||||
<div class="ui menu">
|
||||
{% if features.bgp_route.enable %}
|
||||
<div class="item feature-selection" id="type_bgp_route" data-value="bgp_route">
|
||||
{{ branding.text.bgp_route }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if features.bgp_community.enable == true %}
|
||||
<div class="item feature-selection" id="type_bgp_community" data-value="bgp_community">
|
||||
{{ branding.text.bgp_community }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if features.bgp_aspath.enable == true %}
|
||||
<div class="item feature-selection" id="type_bgp_aspath" data-value="bgp_aspath">
|
||||
{{ branding.text.bgp_aspath }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if features.ping.enable == true %}
|
||||
<div class="item feature-selection" id="type_ping" data-value="ping">
|
||||
{{ branding.text.ping }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if features.traceroute.enable == true %}
|
||||
<div class="item feature-selection" id="type_traceroute" data-value="traceroute">
|
||||
{{ branding.text.traceroute }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="col">
|
||||
<select class="form-control form-control-lg hg-select" id="query_type"
|
||||
title="{{ branding.text.query_type }}" data-live-search="true">
|
||||
{% if features.bgp_route.enable %}
|
||||
<option id="bgp_route" value="bgp_route" data-display-name="{{ branding.text.bgp_route }}">
|
||||
{{ branding.text.bgp_route }}</option>
|
||||
{% endif %}
|
||||
{% if features.bgp_community.enable %}
|
||||
<option id="bgp_community" value="bgp_community" data-display-name="{{ branding.text.bgp_community }}">
|
||||
{{ branding.text.bgp_community }}</option>
|
||||
{% endif %}
|
||||
{% if features.bgp_aspath.enable %}
|
||||
<option id="bgp_aspath" value="bgp_aspath" data-display-name="{{ branding.text.bgp_aspath }}">
|
||||
{{ branding.text.bgp_aspath }}</option>
|
||||
{% endif %}
|
||||
{% if features.ping.enable %}
|
||||
<option id="ping" value="ping" data-display-name="{{ branding.text.ping }}">{{ branding.text.ping }}
|
||||
</option>
|
||||
{% endif %}
|
||||
{% if features.traceroute.enable %}
|
||||
<option id="type_traceroute" value="traceroute" data-display-name="{{ branding.text.traceroute }}">
|
||||
{{ branding.text.traceroute }}</option>
|
||||
{% endif %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row mb-3">
|
||||
<div class="col">
|
||||
<div class="input-group input-group-lg">
|
||||
<input class="form-control" type="text" placeholder="{{ branding.text.query_placeholder }}"
|
||||
aria-label="{{ branding.text.query_placeholder }}" aria-describedby="target" id="target">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-primary" id="hg-submit-button" type="submit">
|
||||
<div id="hg-submit-icon">
|
||||
<i class="remixicon-search-line"></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" id="field-target">
|
||||
<div class="ui fluid icon input">
|
||||
<input type="text" placeholder="{{ branding.text.query_placeholder }}" id="target">
|
||||
<i class="search link icon" id="submit_button"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui hidden message"></div>
|
||||
</form>
|
||||
<div class="ui popup" id="bgpr_help_content">{{ info["bgp_route"]["content"] | safe }}</div>
|
||||
<div class="ui popup" id="bgpc_help_content">{{ info["bgp_community"]["content"] | safe }}<div class="ui divider">
|
||||
</div>{{ details["bgp_community"]["content"] | safe }}</div>
|
||||
<div class="ui popup" id="bgpa_help_content">{{ info["bgp_aspath"]["content"] | safe }}<div class="ui divider">
|
||||
</div>{{ details["bgp_aspath"]["content"] | safe }}</div>
|
||||
<div class="ui popup" id="ping_help_content">{{ info["ping"]["content"] | safe }}</div>
|
||||
<div class="ui popup" id="traceroute_help_content">{{ info["traceroute"]["content"] | safe }}</div>
|
||||
</div>
|
||||
{% include "templates/results.html.j2" %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block footer %}
|
||||
{% include "templates/footer.html.j2" %}
|
||||
{% endblock %}
|
||||
@@ -1,74 +0,0 @@
|
||||
<style type="text/css">
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.container {
|
||||
width: 700px;
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
#lg-results a {
|
||||
color: rgba(0, 0, 0, .87);
|
||||
}
|
||||
|
||||
#lg-maincontainer {
|
||||
padding-top: 36px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#lg-results-output {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.ui.content.container {
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.ui.vertical.segment footer.ui.segment {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
.ui.huge.header {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.ui.fluid.container {
|
||||
height: 75%;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
#lg-footer-text,
|
||||
#lg-credit-text {
|
||||
font-size: 75%;
|
||||
margin-left: 12.5%;
|
||||
margin-right: 12.5%;
|
||||
}
|
||||
|
||||
#lg-credit-text a,
|
||||
#lg-footer-text a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#clip-button {
|
||||
float: right;
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
-o-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
</style>
|
||||
@@ -1,29 +1,20 @@
|
||||
<div class="ui content fluid left aligned container animsition" data-animsition-out-class="fade-out-left"
|
||||
data-animsition-in-class="fade-in-right" id="lg-results">
|
||||
{% import "templates/title.html.j2" as title %}
|
||||
{{ title.title(branding, primary_asn, size_title="h1", size_subtitle="h3") }}
|
||||
<div class="ui segments">
|
||||
<div class="ui padded fluid segment">
|
||||
<h2 class="ui header">
|
||||
<a href="#" id="results_back"><i class="icon angle left"></i></a>
|
||||
<div class="content">
|
||||
{{ branding.text.results }}
|
||||
<div class="container animsition" data-animsition-out-class="fade-out-left" data-animsition-in-class="fade-in-right"
|
||||
id="hg-results">
|
||||
{% import "templates/title.html.j2" as title %}
|
||||
{{ title.title(branding, primary_asn, size_title="h1", size_subtitle="h4", align="left") }}
|
||||
<div class="container mb-lg-1 mt-lg-1">
|
||||
<div class="row mb-lg-1">
|
||||
<div class="col align-self-center">
|
||||
<button type="button" id="hg-back" class="float-left btn btn-light btn-lg">
|
||||
<i class="remixicon-arrow-left-s-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-lg-1">
|
||||
<div class="col align-self-center">
|
||||
<div class="accordion" id="hg-accordion">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
<div id="results_detail">
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui padded fluid segment">
|
||||
<!-- <button class="ui basic right floated icon button" id="clip-button" data-clipboard-target="#lg-results-segment"><i
|
||||
class="copy outline icon" id="clip-icon"></i></button> -->
|
||||
<i id="clip-button" data-clipboard-target="#lg-results-segment" data-content="Copy Output"
|
||||
class="copy link icon"></i>
|
||||
<div id="lg-results-segment"></div>
|
||||
</div>
|
||||
{% if features.cache.show_text %}
|
||||
<div class="ui padded fluid segment">
|
||||
<span class="ui small text">{{ features.cache.text }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,19 +1,21 @@
|
||||
{% macro title(branding, primary_asn, size_title="h1", size_subtitle="h3") -%}
|
||||
{% macro title(branding, primary_asn, size_title="h1", size_subtitle="h4", align="center") -%}
|
||||
<div class="container-fluid text-{{ align }}">
|
||||
{% if branding.text.title_mode == 'text_only' %}
|
||||
<{{ size_title }} class="ui header">{{ branding.text.title }}</{{ size_title }}>
|
||||
<{{ size_subtitle }} class="ui header">{{ branding.text.subtitle.format(primary_asn=primary_asn) }}</{{ size_subtitle }}>
|
||||
<{{ size_title }}>{{ branding.text.title }}</{{ size_title }}>
|
||||
<{{ size_subtitle }}>{{ branding.text.subtitle.format(primary_asn=primary_asn) }}</{{ size_subtitle }}>
|
||||
<br>
|
||||
{% elif branding.text.title_mode == 'all' %}
|
||||
<img src="{{ branding.logo.path }}" style="width: {{ branding.logo.width }}px;">
|
||||
<{{ size_title }} class="ui header">{{ branding.text.title }}</{{ size_title }}>
|
||||
<{{ size_subtitle }} class="ui header">{{ branding.text.subtitle.format(primary_asn=primary_asn) }}</{{ size_subtitle }}>
|
||||
<{{ size_title }}>{{ branding.text.title }}</{{ size_title }}>
|
||||
<{{ size_subtitle }}>{{ branding.text.subtitle.format(primary_asn=primary_asn) }}</{{ size_subtitle }}>
|
||||
<br>
|
||||
{% elif branding.text.title_mode == 'logo_title' %}
|
||||
<img src="{{ branding.logo.path }}" style="width: {{ branding.logo.width }}px;">
|
||||
<{{ size_title }} class="ui header">{{ branding.text.title }}</{{ size_title }}>
|
||||
<{{ size_title }}>{{ branding.text.title }}</{{ size_title }}>
|
||||
<br>
|
||||
{% elif branding.text.title_mode == 'logo_only' %}
|
||||
<img src="{{ branding.logo.path }}" style="width: {{ branding.logo.width }}px;">
|
||||
<br>
|
||||
{% endif %}
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
Reference in New Issue
Block a user