fluzzi32/traefik-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
fluzzi32
2024-07-23 17:32:12 -03:00
parent e75b21a17d
commit 7a3266d666
8 changed files with 423 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
static/css/colors.css Normal file
View File

@ -0,0 +1,115 @@
:root {
--light-background: #f9f9f9;
--dark-background: #121212;
--light-title-text: #e0e0e0;
--light-icons: #333;
--dark-title-text: #e0e0e0;
--dark-icons: #e0e0e0;
--light-header: #3f51b5;
--light-group-text: #3f51b5;
--light-router-title: #3f51b5;
--dark-header: #1e1e1e;
--light-border: #3f51b5;
--dark-border: #bb86fc;
--dark-group-text: #bb86fc;
--dark-router-title: #bb86fc;
--light-icon-bg: rgba(240, 240, 240, 0.2);
--dark-icon-bg: rgba(224, 224, 224, 0.2);
--light-icon-hover-bg: rgba(240, 240, 240, 0.4);
--dark-icon-hover-bg: rgba(224, 224, 224, 0.4);
--light-router-bg: white;
--dark-router-bg: #1e1e1e;
--light-router-hover-shadow: rgba(0, 0, 0, 0.2);
--light-router-text: #666;
--dark-router-text: #e0e0e0;
--dark-router-hover-shadow: rgba(255, 255, 255, 0.2);
}
body {
background-color: var(--light-background);
color: var(--light-title-text);
}
.dark-mode {
background-color: var(--dark-background);
color: var(--dark-title-text);
}
.header {
background-color: var(--light-header);
}
.dark-mode .header {
background-color: var(--dark-header);
}
.icon-button {
background-color: var(--light-icon-bg);
border: 1px solid var(--light-border);
color: var(--light-icons);
}
.icon-button:hover {
background-color: var(--light-icon-hover-bg);
}
.dark-mode .icon-button {
background-color: var(--dark-icon-bg);
border: 1px solid var(--dark-border);
color: var(--dark-icons);
}
.dark-mode .icon-button:hover {
background-color: var(--dark-icon-hover-bg);
}
.group h2 {
color: var(--light-group-text);
}
.dark-mode .group h2 {
color: var(--dark-group-text);
}
.router {
background-color: var(--light-router-bg);
color: var(--light-router-text);
}
.router:hover {
box-shadow: 0 4px 8px var(--light-router-hover-shadow);
}
.router h2 {
color: var(--light-router-title);
}
.dark-mode .router h2 {
color: var(--dark-router-title);
}
.dark-mode .router {
background-color: var(--dark-router-bg);
color: var(--dark-router-text);
}
.dark-mode .router:hover {
box-shadow: 0 4px 8px var(--dark-router-hover-shadow);
}
.group-title .fa {
color: var(--light-group-text);
}
.dark-mode .group-title .fa {
color: var(--dark-group-text);
}
.settings-menu .fa {
color: var(--light-icons);
}
.dark-mode .settings-menu .fa {
color: var(--dark-icons);
}

77
static/css/components.css Normal file
View File

@ -0,0 +1,77 @@
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.header h1 {
margin: 0;
flex-grow: 1;
text-align: center;
}
.settings {
position: relative;
}
.icon-button {
font-size: 24px;
cursor: pointer;
margin: 5px;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s, border-color 0.3s;
}
.settings-menu {
display: none;
position: absolute;
top: 50px;
right: 0;
flex-direction: column;
}
.settings-menu.visible {
display: flex;
}
.group {
margin-bottom: 40px;
}
.group-title {
display: inline-block;
cursor: pointer;
}
.group-icon {
margin-right: 8px;
}
/* Responsive Design */
@media (max-width: 1024px) {
.router {
flex: 1 1 calc(50% - 20px);
max-width: calc(50% - 20px);
}
}
@media (max-width: 768px) {
.router {
flex: 1 1 calc(50% - 20px);
max-width: calc(50% - 20px);
}
}
@media (max-width: 480px) {
.router {
flex: 1 1 100%;
max-width: 100%;
}
}

37
static/css/styles.css Normal file
View File

@ -0,0 +1,37 @@
body {
font-family: Arial, sans-serif;
margin: 0;
transition: background-color 0.3s, color 0.3s;
}
.content {
padding: 20px;
}
.group {
margin-bottom: 40px;
}
.group.collapsed .router-container {
display: none;
}
.router-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.router {
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 10px;
flex: 1 1 calc(33.333% - 20px);
max-width: calc(33.333% - 20px);
text-align: center;
cursor: pointer;
transition: box-shadow 0.3s ease;
box-sizing: border-box;
}

46
static/js/scripts.js Normal file
View File

@ -0,0 +1,46 @@
document.addEventListener("DOMContentLoaded", function() {
if (localStorage.getItem("dark-mode") === "true") {
document.body.classList.add("dark-mode");
document.getElementById('theme-icon').classList.remove('fa-moon');
document.getElementById('theme-icon').classList.add('fa-sun');
} else {
document.getElementById('theme-icon').classList.remove('fa-sun');
document.getElementById('theme-icon').classList.add('fa-moon');
}
document.addEventListener("click", function(event) {
const settingsMenu = document.getElementById('settings-menu');
if (!settingsMenu.contains(event.target) && !event.target.closest('.icon-button')) {
settingsMenu.classList.remove('visible');
}
});
});
function toggleDarkMode() {
document.body.classList.toggle("dark-mode");
const themeIcon = document.getElementById('theme-icon');
if (document.body.classList.contains("dark-mode")) {
localStorage.setItem("dark-mode", "true");
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
} else {
localStorage.setItem("dark-mode", "false");
themeIcon.classList.remove('fa-sun');
themeIcon.classList.add('fa-moon');
}
}
function toggleGroup(group) {
const groupElement = document.getElementById(group);
groupElement.classList.toggle("collapsed");
}
function toggleSettings() {
const settingsMenu = document.getElementById('settings-menu');
settingsMenu.classList.toggle('visible');
}
function refreshData() {
location.reload();
}

136
static/styles.css
View File

@ -1,136 +0,0 @@
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #f9f9f9;
color: #333;
transition: background-color 0.3s, color 0.3s;
}
.header {
background-color: #3f51b5;
color: white;
padding: 20px;
text-align: center;
}
.header button {
background: none;
border: 2px solid white;
color: white;
padding: 10px 20px;
cursor: pointer;
margin-top: 10px;
border-radius: 5px;
}
.header button:hover {
background-color: white;
color: #3f51b5;
}
.content {
padding: 20px;
}
.applications {
max-width: 1200px;
margin: 0 auto;
}
.applications h2 {
color: #3f51b5;
}
.router-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.router {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 10px;
flex: 1 1 calc(33.333% - 20px);
max-width: calc(33.333% - 20px);
text-align: center;
cursor: pointer;
transition: box-shadow 0.3s ease;
box-sizing: border-box;
}
.router:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.router h2 {
margin: 0;
color: #3f51b5;
text-transform: uppercase;
}
.router p {
margin: 10px 0 0;
color: #666;
}
/* Dark Mode */
.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
.dark-mode .header {
background-color: #1e1e1e;
}
.dark-mode .header button {
border-color: #e0e0e0;
}
.dark-mode .header button:hover {
background-color: #e0e0e0;
color: #1e1e1e;
}
.dark-mode .applications h2 {
color: #bb86fc;
}
.dark-mode .router {
background-color: #1e1e1e;
color: #e0e0e0;
}
.dark-mode .router h2 {
color: #bb86fc;
}
.dark-mode .router:hover {
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
}
/* Responsive Design */
@media (max-width: 1024px) {
.router {
flex: 1 1 calc(50% - 20px);
max-width: calc(50% - 20px);
}
}
@media (max-width: 768px) {
.router {
flex: 1 1 calc(50% - 20px);
max-width: calc(50% - 20px);
}
}
@media (max-width: 480px) {
.router {
flex: 1 1 100%;
max-width: 100%;
}
}