feat: full de-Angularization with Bootstrap 5 migration
- Removed AngularJS 1.4.8 completely — no more framework dependency - Extracted core RCON logic into pure vanilla JS (js/rcon.js) - Added lightweight hash-based SPA router (js/router.js) - Rewrote all 6 pages as vanilla JS modules in js/pages/ - Migrated Bootstrap 3 → Bootstrap 5 (cards instead of panels, bootstrap-icons instead of glyphicons) - Removed jQuery dependency (Bootstrap 5 is vanilla JS) - Purged all Angular templates from html/ - Removed npm artifacts (package.json, node_modules) - Added nginx.example.conf for static hosting - Updated rcon.css dark theme for BS5 variables - Static file only — no Node.js backend required Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Copilot
@@ -1,79 +1,63 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
|
||||
|
||||
body
|
||||
{
|
||||
:root {
|
||||
--rcon-bg: #252830;
|
||||
--rcon-text: #cfd2da;
|
||||
--rcon-accent: #1ca8dd;
|
||||
--rcon-card-bg: #434857;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
color: #cfd2da;
|
||||
background-color: #252830;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
color: #1ca8dd;
|
||||
a { color: var(--rcon-accent); }
|
||||
a:hover { color: #fff; text-decoration: none; }
|
||||
|
||||
/* Console output */
|
||||
#ConsoleController .Output {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
a:hover
|
||||
{
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
.scrollable { overflow: auto; }
|
||||
|
||||
/* Sidebar navigation */
|
||||
.nav-sidebar {
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
.center
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#ConsoleController .Output
|
||||
{
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.scrollable
|
||||
{
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
.nav-sidebar
|
||||
{
|
||||
margin-top: 64px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.nav-sidebar > li > a
|
||||
{
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
.nav-sidebar .nav-link {
|
||||
padding: 8px 20px;
|
||||
border-radius: 5px;
|
||||
color: var(--rcon-text);
|
||||
}
|
||||
|
||||
.nav-sidebar > .active > a,
|
||||
.nav-sidebar > .active > a:hover,
|
||||
.nav-sidebar > .active > a:focus
|
||||
{
|
||||
.nav-sidebar .nav-link:hover,
|
||||
.nav-sidebar .nav-link.active {
|
||||
color: #fff;
|
||||
background-color: #428bca;
|
||||
}
|
||||
|
||||
.fade
|
||||
{
|
||||
opacity: 0.5;
|
||||
/* Fade utility */
|
||||
.fade { opacity: 0.5; }
|
||||
|
||||
/* Table styles */
|
||||
.table > tbody > tr:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.table > tbody > tr:hover
|
||||
{
|
||||
background-color: rgba( 255, 255, 255, 0.3 );
|
||||
.table > thead > tr > th.sorting {
|
||||
color: #1bc98e;
|
||||
border-color: #1bc98e;
|
||||
}
|
||||
|
||||
.table > thead > tr > th.sorting
|
||||
{
|
||||
color: #1bc98e;
|
||||
border-color: #1bc98e;
|
||||
.table > thead > tr > th.sorting.descending {
|
||||
color: #e05d6f;
|
||||
border-color: #e05d6f;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
@@ -81,71 +65,60 @@ a:hover
|
||||
overflow-y: visible !important;
|
||||
}
|
||||
|
||||
.btn-default, .btn-default:active, .form-control
|
||||
{
|
||||
background: rgba( 255, 255, 255, 0.3 );
|
||||
border: none;
|
||||
color: #cfd2da;
|
||||
text-shadow: none;
|
||||
/* Form controls dark theme */
|
||||
.form-control {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: var(--rcon-text);
|
||||
}
|
||||
|
||||
.btn-default:hover
|
||||
{
|
||||
background: #1ca8dd;
|
||||
color: #fff;
|
||||
.form-control:focus {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
border-color: var(--rcon-accent);
|
||||
box-shadow: 0 0 0 0.2rem rgba(28, 168, 221, 0.25);
|
||||
}
|
||||
|
||||
.panel
|
||||
{
|
||||
background-color: #434857;
|
||||
/* Card dark theme */
|
||||
.card {
|
||||
background-color: var(--rcon-card-bg);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.chatname
|
||||
{
|
||||
display: block;
|
||||
width: 200px;
|
||||
float: left;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
/* Dropdown dark theme */
|
||||
.dropdown-menu {
|
||||
background-color: var(--rcon-card-bg);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.navbar-default
|
||||
{
|
||||
background-color: #428bca;
|
||||
background-image: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: white;
|
||||
.dropdown-menu .dropdown-item {
|
||||
color: var(--rcon-text);
|
||||
}
|
||||
|
||||
.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover
|
||||
{
|
||||
color: #fff;
|
||||
.dropdown-menu .dropdown-item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-text,
|
||||
.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus
|
||||
{
|
||||
color: #fff;
|
||||
.dropdown-menu .dropdown-divider {
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav > li > a:hover
|
||||
{
|
||||
background-color: rgba( 255, 255, 255, 0.25 );
|
||||
/* Navbar text color override for dark theme */
|
||||
.navbar-dark .navbar-text {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .active > a
|
||||
{
|
||||
background-color: white;
|
||||
background-image: none;
|
||||
border: none;
|
||||
color: #428bca;
|
||||
/* Page title */
|
||||
#page-title {
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.navbar-info
|
||||
{
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 15px;
|
||||
line-height: 20px;
|
||||
/* Chart panels */
|
||||
#chart-performance,
|
||||
#chart-network,
|
||||
#chart-players {
|
||||
min-height: 200px;
|
||||
}
|
||||
Reference in New Issue
Block a user