mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-08 19:26:48 +00:00
abc6f2063d
console-base.html had no doctype, so the noVNC and serial console pages rendered in quirks mode, where body and #main_container got their height from the viewport. The console area overflowed the window: the full noVNC page scrolled by the navbar height, the lite page's canvas and the serial terminal ran below the bottom edge, hiding the last rows. With the doctype, #main_container is a viewport-high flex column and the console area (the noVNC container or the terminal) takes the space below the navbar. Without that, the lite page's canvas collapsed to 0x0.
143 lines
No EOL
7.4 KiB
HTML
143 lines
No EOL
7.4 KiB
HTML
{% load static %}
|
|
{% load i18n %}
|
|
{% get_current_language as LANGUAGE_CODE %}<!DOCTYPE html>
|
|
<html lang="{{ LANGUAGE_CODE }}">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="shortcut icon" href="{% static "favicon.ico" %}">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
{# error pages render without app_settings: they get zephyr #}
|
|
{% with theme=app_settings.BOOTSTRAP_THEME|default:"zephyr" %}<link rel="stylesheet" href="{% static "css/themes/"|add:theme|add:".min.css" %}" id="wvc_css">{% endwith %}
|
|
<link href="{% static "css/webvirtcloud.css" %}" rel="stylesheet">
|
|
|
|
<style>
|
|
body {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
#main_container {
|
|
padding: 0;
|
|
width: 100%;
|
|
max-width: none;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #494949;
|
|
border-bottom-right-radius: 850px 600px;
|
|
|
|
}
|
|
|
|
#main_container canvas {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
}
|
|
</style>
|
|
|
|
{% block head %}{% endblock %}
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id='main_container' class="container">
|
|
<nav class="navbar sticky-top navbar-expand-md navbar-dark bg-primary" aria-label="console navbar">
|
|
<div class="container">
|
|
<a class="navbar-brand">{{ instance.name }}</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse"
|
|
aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse">
|
|
<ul class="navbar-nav me-auto my-2 my-lg-0">
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" role="button"
|
|
id="dropdownMenuLink" aria-haspopup="true" aria-expanded="false">
|
|
{% trans "Send key(s)" %}
|
|
</a>
|
|
<div class="dropdown-menu shadow" aria-labelledby="dropdownMenuLink" style="min-width: 250px;">
|
|
<h6 class="dropdown-header">{% trans "System" %}</h6>
|
|
<a class="dropdown-item" id="ctrlaltdel" href="#">Ctrl+Alt+Del</a>
|
|
<a class="dropdown-item" id="ctrlaltbackspace" href="#">Ctrl+Alt+Backspace</a>
|
|
<div class="dropdown-divider"></div>
|
|
<h6 class="dropdown-header">{% trans "Navigation & Desktop" %}</h6>
|
|
<a class="dropdown-item" id="alttab" href="#">Alt+Tab</a>
|
|
<a class="dropdown-item" id="superkey" href="#">Windows / Super Key</a>
|
|
<a class="dropdown-item" id="sendesc" href="#">Escape</a>
|
|
<a class="dropdown-item" id="sendtab" href="#">Tab</a>
|
|
<div class="dropdown-divider"></div>
|
|
<h6 class="dropdown-header">{% trans "Terminal Control" %}</h6>
|
|
<a class="dropdown-item" id="ctrlc" href="#">Ctrl+C</a>
|
|
<a class="dropdown-item" id="ctrlz" href="#">Ctrl+Z</a>
|
|
<a class="dropdown-item" id="ctrld" href="#">Ctrl+D</a>
|
|
<a class="dropdown-item" id="ctrlbackslash" href="#">Ctrl+\</a>
|
|
<div class="dropdown-divider"></div>
|
|
<h6 class="dropdown-header">{% trans "Virtual Consoles (Ctrl+Alt+F#)" %}</h6>
|
|
<div class="px-3 py-1">
|
|
<div class="row g-1 text-center">
|
|
<div class="col-3"><a class="btn btn-sm btn-outline-secondary w-100 py-1" id="ctrlaltf1" href="#">F1</a></div>
|
|
<div class="col-3"><a class="btn btn-sm btn-outline-secondary w-100 py-1" id="ctrlaltf2" href="#">F2</a></div>
|
|
<div class="col-3"><a class="btn btn-sm btn-outline-secondary w-100 py-1" id="ctrlaltf3" href="#">F3</a></div>
|
|
<div class="col-3"><a class="btn btn-sm btn-outline-secondary w-100 py-1" id="ctrlaltf4" href="#">F4</a></div>
|
|
<div class="col-3"><a class="btn btn-sm btn-outline-secondary w-100 py-1" id="ctrlaltf5" href="#">F5</a></div>
|
|
<div class="col-3"><a class="btn btn-sm btn-outline-secondary w-100 py-1" id="ctrlaltf6" href="#">F6</a></div>
|
|
<div class="col-3"><a class="btn btn-sm btn-outline-secondary w-100 py-1" id="ctrlaltf7" href="#">F7</a></div>
|
|
<div class="col-3"><a class="btn btn-sm btn-outline-secondary w-100 py-1" id="ctrlaltf8" href="#">F8</a></div>
|
|
<div class="col-3"><a class="btn btn-sm btn-outline-secondary w-100 py-1" id="ctrlaltf9" href="#">F9</a></div>
|
|
<div class="col-3"><a class="btn btn-sm btn-outline-secondary w-100 py-1" id="ctrlaltf10" href="#">F10</a></div>
|
|
<div class="col-3"><a class="btn btn-sm btn-outline-secondary w-100 py-1" id="ctrlaltf11" href="#">F11</a></div>
|
|
<div class="col-3"><a class="btn btn-sm btn-outline-secondary w-100 py-1" id="ctrlaltf12" href="#">F12</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item" id="fullscreen_button">
|
|
<a class="nav-link" href="#">{% trans "Fullscreen" %}</a>
|
|
</li>
|
|
{% block navbarmenu %}{% endblock %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
<script src="{% static "js/jquery.js" %}"></script>
|
|
<script src="{% static "js/bootstrap.bundle.min.js" %}"></script>
|
|
|
|
<script>
|
|
function log_message(msg, type) {
|
|
var exist = $('#status').is('div');
|
|
status_div = $('<div id="status" class="alert alert-' + type + ' role="alert"><button type="button" class="btn-close" aria-label="Close"></button>' + msg + '</div>');
|
|
if (exist) {
|
|
$('#status').remove();
|
|
$('body').prepend(status_div);
|
|
}
|
|
else {
|
|
status_div.hide();
|
|
$('body').prepend(status_div);
|
|
status_div.fadeIn(200);
|
|
}
|
|
if (type != 'danger') {
|
|
status_div.delay(3000).fadeOut(200);
|
|
}
|
|
}
|
|
|
|
function log_error(msg) {
|
|
log_message(msg, 'danger');
|
|
}
|
|
|
|
function log_info(msg) {
|
|
log_message(msg, 'info');
|
|
}
|
|
{% if console_error %}
|
|
log_error('{{ console_error|escapejs }}');
|
|
{% endif %}
|
|
</script>
|
|
|
|
{% block foot %}{% endblock %}
|
|
</body>
|
|
|
|
</html> |