update
This commit is contained in:
163
app/templates/colors.css
Normal file
163
app/templates/colors.css
Normal file
@ -0,0 +1,163 @@
|
||||
:root {
|
||||
{% for mode, mode_colors in colors.items() %}
|
||||
{% for name, value in mode_colors.items() %}
|
||||
--{{ mode }}-{{ name }}: {{ value }};
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
}
|
||||
|
||||
/* Body */
|
||||
body {
|
||||
background-color: var(--light-background);
|
||||
color: var(--light-title-text);
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
background-color: var(--dark-background);
|
||||
color: var(--dark-title-text);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
background-color: var(--light-header-bg, var(--light-accent));
|
||||
}
|
||||
|
||||
.dark-mode .header {
|
||||
background-color: var(--dark-header-bg, var(--dark-accent));
|
||||
}
|
||||
|
||||
/* Icon Button */
|
||||
.icon-button {
|
||||
background-color: var(--light-icon-bg);
|
||||
border: 1px solid var(--light-border, var(--light-accent));
|
||||
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, var(--dark-accent));
|
||||
color: var(--dark-icons);
|
||||
}
|
||||
|
||||
.dark-mode .icon-button:hover {
|
||||
background-color: var(--dark-icon-hover-bg);
|
||||
}
|
||||
|
||||
/* Group Title */
|
||||
.group h2 {
|
||||
color: var(--light-group-text, var(--light-accent));
|
||||
}
|
||||
|
||||
.dark-mode .group h2 {
|
||||
color: var(--dark-group-text, var(--dark-accent));
|
||||
}
|
||||
|
||||
/* Router */
|
||||
.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, var(--light-accent));
|
||||
}
|
||||
|
||||
.dark-mode .router h2 {
|
||||
color: var(--dark-router-title, var(--dark-accent));
|
||||
}
|
||||
|
||||
.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 Icon */
|
||||
.group-title .fa {
|
||||
color: var(--light-group-text, var(--light-accent));
|
||||
}
|
||||
|
||||
.dark-mode .group-title .fa {
|
||||
color: var(--dark-group-text, var(--dark-accent));
|
||||
}
|
||||
|
||||
/* Settings Menu Icon */
|
||||
.settings-menu .fa {
|
||||
color: var(--light-icons);
|
||||
}
|
||||
|
||||
.dark-mode .settings-menu .fa {
|
||||
color: var(--dark-icons);
|
||||
}
|
||||
|
||||
/* Router Icon */
|
||||
.router svg {
|
||||
font-size: 26px;
|
||||
color: var(--light-router-title, var(--light-accent));
|
||||
}
|
||||
|
||||
.dark-mode .router svg {
|
||||
color: var(--dark-router-title, var(--dark-accent));
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background-color: var(--light-footer-bg, var(--light-accent));
|
||||
}
|
||||
|
||||
.dark-mode .footer {
|
||||
background-color: var(--dark-footer-bg);
|
||||
}
|
||||
|
||||
/* Search Bar */
|
||||
.search-bar {
|
||||
background-color: var(--light-search-bar-bg);
|
||||
}
|
||||
|
||||
.dark-mode .search-bar {
|
||||
background-color: var(--dark-search-bar-bg);
|
||||
}
|
||||
|
||||
.search-bar i {
|
||||
color: var(--light-search-bar-icon, var(--light-accent));
|
||||
}
|
||||
|
||||
.search-bar svg {
|
||||
color: var(--light-search-bar-icon, var(--light-accent));
|
||||
}
|
||||
|
||||
.dark-mode .search-bar svg {
|
||||
color: var(--dark-search-bar-icon, var(--dark-accent));
|
||||
}
|
||||
|
||||
.dark-mode .search-bar i {
|
||||
color: var(--dark-search-bar-icon, var(--dark-accent));
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
color: var(--light-search-bar-input, var(--light-accent));
|
||||
}
|
||||
|
||||
.dark-mode .search-bar input {
|
||||
color: var(--dark-search-bar-input, var(--dark-accent));
|
||||
}
|
||||
|
||||
/* Selected Router */
|
||||
.router.selected {
|
||||
border: 2px solid var(--light-selected-router-border, var(--light-accent));
|
||||
}
|
||||
|
||||
.dark-mode .router.selected {
|
||||
border: 2px solid var(--dark-selected-router-border, var(--dark-accent));
|
||||
}
|
||||
55
app/templates/index.html
Normal file
55
app/templates/index.html
Normal file
@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title }}</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/components.css') }}">
|
||||
<link rel="icon" href="{{ url_for('static', filename='tf.png') }}" type="image/png">
|
||||
<script src="{{ url_for('static', filename='js/fontawesome.js') }}" defer></script>
|
||||
<script src="{{ url_for('static', filename='js/scripts.js') }}" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header" class="header">
|
||||
<h1>{{ title }}</h1>
|
||||
<div class="settings">
|
||||
<button class="icon-button" onclick="toggleSettings()"><i class="fas fa-cog"></i></button>
|
||||
<div id="settings-menu" class="settings-menu">
|
||||
<button class="icon-button" onclick="toggleDarkMode()"><i id="theme-icon" class="fas fa-moon"></i></button>
|
||||
<button class="icon-button" onclick="refreshData()"><i class="fas fa-sync-alt"></i></button>
|
||||
<button class="icon-button" onclick="toggleViewMode()"><i class="fas fa-list" id="view-mode-icon"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" id="content">
|
||||
{% for group, data in groups.items() %}
|
||||
<div class="group {% if data.collapsed %}collapsed{% endif %}" id="{{ group }}" data-collapsed="{{ data.collapsed }}">
|
||||
<h2 class="group-title" onclick="toggleGroup('{{ group }}')"><i class="{{ data.icon }}"></i> {{ group }}</h2>
|
||||
<div class="router-container">
|
||||
{% for router in data.routers %}
|
||||
<div class="router" onclick="window.open('{{ router['protocol'] }}://{{ router['rule'].split('`')[1] }}', '{{ router['target'] }}')">
|
||||
<i class="{{ router['icon'] }}"></i>
|
||||
<div>
|
||||
<h2>{{ router['display_name'] }}</h2>
|
||||
{% if router['description'] %}
|
||||
<p>{{ router['description'] }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="search-bar">
|
||||
<i class="fas fa-search" id="start-search" onclick="searchFocus()"></i>
|
||||
<input type="text" id="search-input" placeholder="Search...">
|
||||
<i class="fas fa-times" id="clear-search" onclick="clearSearch()"></i>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user