236 lines
8.3 KiB
HTML
236 lines
8.3 KiB
HTML
<html>
|
|
<head>
|
|
<title>Moonraker {{ version }}</title>
|
|
<style>
|
|
body {
|
|
background-color: rgb(48, 48, 48);
|
|
color: rgb(230, 230, 230);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
margin: 0px;
|
|
}
|
|
.nav-bar {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.nav-bar a {
|
|
float: right;
|
|
text-align: center;
|
|
padding: .5em .75em;
|
|
font-size: 1.2em;
|
|
text-decoration: none;
|
|
color: rgb(230, 230, 230);
|
|
}
|
|
.intro {
|
|
font-size: 1.1em;
|
|
margin-top: 7rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 60%;
|
|
}
|
|
.intro h1 {
|
|
font-size: 2.2rem;
|
|
text-align: center;
|
|
}
|
|
.status {
|
|
display: flex;
|
|
margin-top: 2rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 80%;
|
|
align-items: baseline;
|
|
justify-content: center;
|
|
column-gap: 1.5rem;
|
|
row-gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.card {
|
|
background:none;
|
|
border: 0px;
|
|
border-radius: .75rem;
|
|
width: 25rem;
|
|
}
|
|
.card h1 {
|
|
background-color: #225353;
|
|
text-align: center;
|
|
line-height: 2.2rem;
|
|
font-size: 1.1rem;
|
|
height: 2.2rem;
|
|
margin: 0;
|
|
border-top-left-radius: .75rem;
|
|
border-top-right-radius: .75rem;
|
|
}
|
|
.card .content{
|
|
background-color: #1a1a1a;
|
|
border-bottom-left-radius: .75rem;
|
|
border-bottom-right-radius: .75rem;
|
|
padding: .5rem;
|
|
}
|
|
.card .entry {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
.card .entry:not(:last-child) {
|
|
margin-bottom: .4rem;
|
|
}
|
|
.card .value {
|
|
float: right;
|
|
display: inline;
|
|
}
|
|
.messages {
|
|
margin-top: 2rem;
|
|
width: 51.5rem;
|
|
padding: .5rem;
|
|
}
|
|
.messages .item {
|
|
padding: .5rem;
|
|
background: #242424;
|
|
border-radius: .4rem;
|
|
}
|
|
.messages .announcement {
|
|
cursor: pointer;
|
|
}
|
|
.messages .item:not(:last-child) {
|
|
margin-bottom: .5rem;
|
|
}
|
|
.messages .item a {
|
|
font-size: 1.2rem;
|
|
margin: 0;
|
|
font-weight: 600;
|
|
padding: 0rem;
|
|
margin-bottom: .1rem;
|
|
text-decoration: None;
|
|
color: rgb(230, 230, 230);
|
|
}
|
|
.messages .item:hover {
|
|
background-color: #3f3f3f;
|
|
}
|
|
.messages .item:hover a,
|
|
.messages .item a:hover {
|
|
color: rgb(235, 199, 0);
|
|
}
|
|
.messages .item p {
|
|
font-size: 1rem;
|
|
}
|
|
.warning h1 {
|
|
animation: glow 1s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes glow {
|
|
from {
|
|
background-color: #225353;
|
|
}
|
|
to {
|
|
background-color: rgb(160, 64, 8);
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
function setClickable(id) {
|
|
const item = document.querySelector(`#${id}`);
|
|
const primary_link = item.querySelector("a");
|
|
const clickable = Array.from(item.querySelectorAll(".clickable"));
|
|
clickable.forEach((element) => {
|
|
element.addEventListener("click", (evt) => {
|
|
evt.stopPropagation();
|
|
})
|
|
});
|
|
function onItemClicked(evt) {
|
|
const noTextSelected = !window.getSelection().toString();
|
|
if (noTextSelected)
|
|
primary_link.click();
|
|
}
|
|
item.addEventListener("click", onItemClicked);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div class="nav-bar">
|
|
<a href="https://github.com/Arksine/moonraker">GitHub</a>
|
|
<a href="https://moonraker.readthedocs.io">Documentation</a>
|
|
</div>
|
|
<div class="intro">
|
|
<h1>Welcome to Moonraker</h1>
|
|
<p>You may have intended
|
|
to navigate to one of Moonraker's front ends, if so check
|
|
that you entered the correct port in the address bar.
|
|
</p>
|
|
</div>
|
|
<div class="status">
|
|
<article class="card">
|
|
<h1>Authorization</h1>
|
|
<div class="content">
|
|
<div class="entry">
|
|
Request IP:
|
|
<div class="value">{{ ip_address }}</div>
|
|
</div>
|
|
<div class="entry">
|
|
Trusted:
|
|
<div class="value">{{ authorized}}</div>
|
|
</div>
|
|
<div class="entry">
|
|
CORS Enabled:
|
|
<div class="value">{{ cors_enabled }}</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="card">
|
|
<h1>Status</h1>
|
|
<div class="content">
|
|
<div class="entry">
|
|
Version:
|
|
<div class="value">{{ version }}</div>
|
|
</div>
|
|
<div class="entry">
|
|
Websocket Count:
|
|
<div class="value">{{ ws_count }}</div>
|
|
</div>
|
|
<div class="entry">
|
|
Klipper State:
|
|
<div class="value">{{ klippy_state }}</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{% if summary %}
|
|
<article class="card messages">
|
|
<h1>Summary</h1>
|
|
<div class="content">
|
|
{% for item in summary %}
|
|
<article class="item">{{ item }}</article>
|
|
{% end %}
|
|
</div>
|
|
</article>
|
|
{% end %}
|
|
{% if announcements %}
|
|
<article class="card messages">
|
|
<h1>Announcements</h1>
|
|
<div class="content">
|
|
{% for item in announcements %}
|
|
{% set id = "announcement-" + item["entry_id"].replace("/", "-") %}
|
|
<article class="item announcement" id="{{ id }}">
|
|
{% set url = item["url"] %}
|
|
<a href="{{ url }}" class="clickable">{{ item["title"] }}</a>
|
|
<p>{{ item["description"] }}</p>
|
|
</article>
|
|
<script>
|
|
setClickable("{{ id }}");
|
|
</script>
|
|
{% end %}
|
|
</div>
|
|
</article>
|
|
{% end %}
|
|
{% if warnings %}
|
|
<article class="card messages warning">
|
|
<h1>Warnings</h1>
|
|
<div class="content">
|
|
{% for warn in warnings %}
|
|
<article class="item">{{ warn }}</article>
|
|
{% end %}
|
|
</div>
|
|
</article>
|
|
{% end %}
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|