gitea-mirror/pwnagotchi
1
0
Fork 0
mirror of https://github.com/jayofelony/pwnagotchi.git synced 2026-04-28 09:53:06 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): enhance web interface with new logtail and web configuration features

Browse Source 
Signed-off-by: Jeroen Oudshoorn <oudshoorn.jeroen@gmail.com>
This commit is contained in:
Jeroen Oudshoorn
2026-03-26 09:33:31 +01:00
parent 7999a0455f
commit c166942586
8 changed files with 126 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
pwnagotchi/defaults.toml
View File

@@ -26,23 +26,9 @@ custom_plugins = "/usr/local/share/pwnagotchi/custom-plugins/"
[main.plugins.auto-tune] [main.plugins.auto-tune]
enabled = true enabled = true
[main.plugins.auto_backup] [main.plugins.auto_backup] #More options availble https://github.com/wpa-2/Pwnagotchi-Plugins/blob/main/auto_backup_config.md
enabled = false enabled = true
interval = "daily" # or "hourly", or a number (minutes) backup_location = "/home/pi/backups"
max_tries = 0
backup_location = "/etc/pwnagotchi/"
files = [
"/root/.api-report.json",
"/root/.ssh",
"/root/.bashrc",
"/root/.profile",
"/etc/pwnagotchi/",
"/root/peers",
"/etc/ssh/",
"/root/.auto-backup"
]
exclude = [ "/etc/pwnagotchi/logs/*"]
commands = [ "tar cf {backup_file} {files}"]
[main.plugins.auto-update] [main.plugins.auto-update]
enabled = true enabled = true
@@ -52,12 +38,12 @@ token = "" # Create a personal access token (classic) with scope set to public_r
[main.plugins.bt-tether] [main.plugins.bt-tether]
enabled = false enabled = false
auto_reconnect = true # Auto reconnect on disconnect (default: true) phone-name = "" # name as shown on the phone i.e. "Pwnagotchi's Phone"
show_on_screen = true # Master switch: show status on display mac = ""
show_mini_status = true # Show mini status indicator (C/N/P/D) phone = "" # android or ios
mini_status_position = [110, 0] # Position for mini status ip = "" # optional, default : 192.168.44.2 if android or 172.20.10.2 if ios
show_detailed_status = true # Show detailed status line with IP gateway = "" #optional, default : 192.168.44.1 if android or 172.20.10.2 if ios
detailed_status_position = [0, 82] # Position for detailed status line dns = "8.8.8.8 1.1.1.1" # optional, default (google): "8.8.8.8 1.1.1.1". Consider using anonymous DNS like OpenNic :-)
[main.plugins.fix_services] [main.plugins.fix_services]
enabled = true enabled = true
@@ -65,6 +51,12 @@ enabled = true
[main.plugins.cache] [main.plugins.cache]
enabled = true enabled = true
[main.plugins.gdrivesync]
enabled = false
backupfiles = [""]
backup_folder = "PwnagotchiBackups"
interval = 1
[main.plugins.gpio_buttons] [main.plugins.gpio_buttons]
enabled = false enabled = false
@@ -73,6 +65,9 @@ enabled = false
speed = 19200 speed = 19200
device = "/dev/ttyUSB0" # for GPSD: "localhost:2947" device = "/dev/ttyUSB0" # for GPSD: "localhost:2947"
[main.plugins.gps_listener]
enabled = false
[main.plugins.grid] [main.plugins.grid]
enabled = true enabled = true
report = true report = true
@@ -111,7 +106,7 @@ key = ""
[main.plugins.session-stats] [main.plugins.session-stats]
enabled = false enabled = false
save_directory = "/etc/pwnagotchi/sessions/" save_directory = "/var/tmp/pwnagotchi/sessions/"
[main.plugins.ups_hat_c] [main.plugins.ups_hat_c]
enabled = false enabled = false
@@ -127,6 +122,9 @@ shutdown = 2
[main.plugins.webcfg] [main.plugins.webcfg]
enabled = true enabled = true
[main.plugins.pwnstore_ui]
enabled = true
[main.plugins.webgpsmap] [main.plugins.webgpsmap]
enabled = false enabled = false
@@ -198,11 +196,11 @@ cool = ["(⌐■_■)", "(단__단)"]
happy = ["(•‿‿•)", "(^‿‿^)", "(^◡◡^)"] happy = ["(•‿‿•)", "(^‿‿^)", "(^◡◡^)"]
excited = ["(ᵔ◡◡ᵔ)", "(✜‿‿✜)"] excited = ["(ᵔ◡◡ᵔ)", "(✜‿‿✜)"]
grateful = ["(^‿‿^)"] grateful = ["(^‿‿^)"]
motivated = ["(☼‿‿☼)"] motivated = ["(☼‿‿☼)", "(★‿★)", "(•̀ᴗ•́)"]
demotivated = ["(≖__≖)"] demotivated = ["(≖__≖)", "(￣ヘ￣)", "(¬､¬)"]
smart = ["(✜‿‿✜)"] smart = ["(✜‿‿✜)"]
lonely = ["(ب__ب)"] lonely = ["(ب__ب)", "(｡•́︿•̀｡)", "(︶︹︺)"]
sad = ["(╥☁╥ )"] sad = ["(╥☁╥ )", "(╥﹏╥)", "(ಥ﹏ಥ)"]
angry = ["(-_-')", "(⇀__⇀)", "(`___´)"] angry = ["(-_-')", "(⇀__⇀)", "(`___´)"]
friend = ["(♥‿‿♥)", "(♡‿‿♡)", "(♥‿♥ )", "(♥ω♥ )"] friend = ["(♥‿‿♥)", "(♡‿‿♡)", "(♥‿♥ )", "(♥ω♥ )"]
broken = ["(☓‿‿☓)"] broken = ["(☓‿‿☓)"]
@@ -234,7 +232,7 @@ rotation = 180
type = "waveshare_4" type = "waveshare_4"
[bettercap] [bettercap]
handshakes = "/etc/pwnagotchi/handshakes" handshakes = "/home/pi/handshakes"
silence = [ silence = [
"ble.device.new", "ble.device.new",
"ble.device.lost", "ble.device.lost",

4
pwnagotchi/plugins/default/bt-tether.py
View File

@@ -60,7 +60,7 @@ TEMPLATE = """
#searchText:focus { #searchText:focus {
outline: none; outline: none;
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 15px rgba(76, 175, 80, 0.1); box-shadow: 0 0 15px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1);
background-color: #1e1e1e; background-color: #1e1e1e;
} }
@@ -105,7 +105,7 @@ TEMPLATE = """
} }
tbody tr:hover { tbody tr:hover {
background-color: rgba(76, 175, 80, 0.05); background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.05);
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }

2
pwnagotchi/plugins/default/logtail.py
View File

@@ -116,7 +116,7 @@ INDEX = """
} }
tbody tr:hover { tbody tr:hover {
background-color: rgba(76, 175, 80, 0.05); background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.05);
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }

24
pwnagotchi/plugins/default/session-stats.py
View File

@@ -73,7 +73,7 @@ TEMPLATE = """
.stat-card:hover { .stat-card:hover {
border-color: var(--accent); border-color: var(--accent);
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(76, 175, 80, 0.1); box-shadow: 0 6px 20px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1);
} }
.stat-label { .stat-label {
@@ -133,7 +133,7 @@ TEMPLATE = """
div.chart:hover { div.chart:hover {
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 8px 25px rgba(76, 175, 80, 0.1); box-shadow: 0 8px 25px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1);
} }
div.chart canvas { div.chart canvas {
@@ -240,6 +240,14 @@ TEMPLATE = """
} }
} }
function getTransparentColor(color) {
// Convert rgb() to rgba() with 0.2 opacity, or append hex opacity
if (color.startsWith('rgb(')) {
return color.replace('rgb(', 'rgba(').replace(')', ', 0.2)');
}
return color + '33'; // hex format
}
function createChart(elementId, title, data) { function createChart(elementId, title, data) {
const container = document.getElementById(elementId); const container = document.getElementById(elementId);
if (!container || !data.values || data.values.length === 0) return; if (!container || !data.values || data.values.length === 0) return;
@@ -261,7 +269,7 @@ TEMPLATE = """
label: data.labels[index], label: data.labels[index],
data: chartData, data: chartData,
borderColor: color, borderColor: color,
backgroundColor: color + '33', backgroundColor: getTransparentColor(color),
borderWidth: 2, borderWidth: 2,
fill: true, fill: true,
tension: 0.1, tension: 0.1,
@@ -353,7 +361,15 @@ TEMPLATE = """
} }
function getChartColor(index) { function getChartColor(index) {
return ['#4caf50', '#ff9800', '#2196f3', '#f44336', '#9c27b0', '#00bcd4'][index % 6]; // Get accent color from CSS root variables
const root = document.documentElement;
const r = getComputedStyle(root).getPropertyValue('--accent-r').trim();
const g = getComputedStyle(root).getPropertyValue('--accent-g').trim();
const b = getComputedStyle(root).getPropertyValue('--accent-b').trim();
const accentColor = `rgb(${r},${g},${b})`;
// Use accent color as first chart color, then secondary colors
const colors = [accentColor, '#ff9800', '#2196f3', '#f44336', '#9c27b0', '#00bcd4'];
return colors[index % colors.length];
} }
async function updateStats() { async function updateStats() {

91
pwnagotchi/plugins/default/webcfg.py
View File

@@ -57,32 +57,6 @@ INDEX = """
cursor: pointer; cursor: pointer;
} }
/* Add Button */
#btnAdd {
padding: 10px 14px;
min-width: auto;
background-color: var(--accent);
color: #000;
border: none;
border-radius: 6px;
font-family: var(--font-pixel);
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
}
#btnAdd:hover {
background-color: var(--accent-hover);
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
transform: translateY(-2px);
}
#btnAdd:active {
transform: translateY(0);
}
/* Wrapper spans */ /* Wrapper spans */
#divTop > span { #divTop > span {
display: flex; display: flex;
@@ -131,7 +105,7 @@ INDEX = """
} }
tbody tr:hover { tbody tr:hover {
background-color: rgba(76, 175, 80, 0.05); background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.05);
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
@@ -203,51 +177,9 @@ INDEX = """
margin-top: 2rem; margin-top: 2rem;
} }
.btn-save, #divSaveTop .btn {
.btn-save-caution {
flex: 1; flex: 1;
min-width: 150px; min-width: 150px;
padding: 12px 20px;
font-size: 0.9rem;
font-family: var(--font-pixel);
text-transform: uppercase;
font-weight: 600;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-save {
background-color: var(--accent);
color: #000;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
}
.btn-save:hover {
background-color: var(--accent-hover);
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
transform: translateY(-2px);
}
.btn-save:active {
transform: translateY(0);
}
.btn-save-caution {
background-color: var(--danger);
color: #fff;
box-shadow: 0 2px 8px rgba(255, 85, 85, 0.2);
}
.btn-save-caution:hover {
background-color: var(--danger-hover);
box-shadow: 0 4px 12px rgba(255, 85, 85, 0.3);
transform: translateY(-2px);
}
.btn-save-caution:active {
transform: translateY(0);
} }
/* Responsive Design */ /* Responsive Design */
@@ -281,12 +213,6 @@ INDEX = """
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.75rem;
} }
.btn-save,
.btn-save-caution {
width: 100%;
min-width: auto;
}
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
@@ -325,13 +251,6 @@ INDEX = """
margin-bottom: 70px; margin-bottom: 70px;
} }
.btn-save,
.btn-save-caution {
width: 100%;
min-width: auto;
padding: 12px 16px;
}
/* Mobile table display */ /* Mobile table display */
table, tr, td { table, tr, td {
padding: 0; padding: 0;
@@ -399,14 +318,14 @@ INDEX = """
<div id="divTop"> <div id="divTop">
<input type="text" id="searchText" placeholder="Search for options ..." title="Type an option name"> <input type="text" id="searchText" placeholder="Search for options ..." title="Type an option name">
<span><select id="selAddType"><option value="text">Text</option><option value="number">Number</option></select></span> <span><select id="selAddType"><option value="text">Text</option><option value="number">Number</option></select></span>
<span><button id="btnAdd" type="button" onclick="addOption()">+</button></span> <span><button class="btn primary" type="button" onclick="addOption()">+</button></span>
</div> </div>
<div class="table-container" id="content"></div> <div class="table-container" id="content"></div>
<div id="divSaveTop"> <div id="divSaveTop">
<button class="btn-save" type="button" onclick="saveConfig()">Save and restart</button> <button class="btn primary" type="button" onclick="saveConfig()">Save and restart</button>
<button class="btn-save-caution" type="button" onclick="saveConfigNoRestart()">Merge and Save (CAUTION)</button> <button class="btn danger" type="button" onclick="saveConfigNoRestart()">Merge and Save (CAUTION)</button>
</div> </div>
{% endblock %} {% endblock %}

2
pwnagotchi/ui/web/static/css/inbox.css
View File

@@ -154,7 +154,7 @@
.unread { .unread {
font-weight: 600; font-weight: 600;
color: var(--text-bright); color: var(--text-bright);
background-color: rgba(76, 175, 80, 0.15); background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.15);
border-left: 3px solid var(--accent); border-left: 3px solid var(--accent);
padding-left: calc(1rem - 3px); padding-left: calc(1rem - 3px);
} }

128
pwnagotchi/ui/web/static/css/style.css
View File

@@ -15,15 +15,14 @@
} }
:root { :root {
/* Colors - Dark Mode (Default) */ /* Colors - Default */
--bg-color: #121212; --bg-color: #121212;
--card-bg: #1e1e1e; --card-bg: #1e1e1e;
--text-main: #e0e0e0; --text-main: #e0e0e0;
--text-bright: #ffffff; --text-bright: #ffffff;
--text-body: #bfbfbf; --text-body: #bfbfbf;
--text-muted: #888; --text-muted: #888;
--accent: #4caf50; --accent: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
--accent-hover: #66bb6a;
--danger: #ff5555; --danger: #ff5555;
--danger-hover: #ff7777; --danger-hover: #ff7777;
--info: #4fc3f7; --info: #4fc3f7;
@@ -38,26 +37,10 @@
/* Spacing & Effects */ /* Spacing & Effects */
--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 15px rgba(76, 175, 80, 0.1); --shadow-md: 0 4px 15px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1);
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.4);
} }
body.dark-mode {
--bg-color: #121212;
--card-bg: #1e1e1e;
--text-main: #e0e0e0;
--text-muted: #888;
--accent: #4caf50;
--accent-hover: #66bb6a;
--danger: #ff5555;
--danger-hover: #ff7777;
--info: #4fc3f7;
--border-color: #333;
--bg-hover: #252525;
--bg-secondary: #161616;
--shadow-md: 0 4px 15px rgba(76, 175, 80, 0.1);
}
* { * {
box-sizing: border-box; box-sizing: border-box;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@@ -97,7 +80,8 @@ a {
} }
a:hover { a:hover {
color: var(--accent-hover); color: var(--accent);
filter: brightness(1.3);
} }
/* ============================================ /* ============================================
@@ -183,7 +167,7 @@ strong, b {
padding: 40px 20px; padding: 40px 20px;
text-align: center; text-align: center;
margin-bottom: 40px; margin-bottom: 40px;
background: linear-gradient(to bottom, rgba(76, 175, 80, 0.05), transparent); background: linear-gradient(to bottom, rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.05), transparent);
border-bottom: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a;
} }
@@ -196,7 +180,7 @@ strong, b {
line-height: 0.9; line-height: 0.9;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 2px;
text-shadow: 0 0 15px rgba(76, 175, 80, 0.3); text-shadow: 0 0 15px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.3);
} }
/* ============================================ /* ============================================
@@ -243,14 +227,14 @@ strong, b {
.navbar-item a:hover { .navbar-item a:hover {
color: #ffffff; color: #ffffff;
background-color: rgba(76, 175, 80, 0.08); background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08);
text-decoration: none; text-decoration: none;
} }
.navbar-item a.active { .navbar-item a.active {
color: #4caf50; color: var(--accent);
border-bottom-color: #4caf50; border-bottom-color: var(--accent);
background-color: rgba(76, 175, 80, 0.1); background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1);
} }
.navbar-icon { .navbar-icon {
@@ -262,56 +246,74 @@ strong, b {
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
} }
/* Navigation Icons - Default State */ /* Navigation Icons - Using mask-image with currentColor via background-color */
#home .navbar-icon { #home .navbar-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E"); -webkit-mask-image: url("../svg/home.svg");
mask-image: url("../svg/home.svg");
background-color: rgb(176,176,176);
} }
#inbox .navbar-icon { #inbox .navbar-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22 6 12 13 2 6'%3E%3C/polyline%3E%3C/svg%3E"); -webkit-mask-image: url("../svg/inbox.svg");
mask-image: url("../svg/inbox.svg");
background-color: rgb(176,176,176);
} }
#new .navbar-icon { #new .navbar-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-image: url("../svg/new.svg");
mask-image: url("../svg/new.svg");
background-color: rgb(176,176,176);
} }
#profile .navbar-icon { #profile .navbar-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E"); -webkit-mask-image: url("../svg/profile.svg");
mask-image: url("../svg/profile.svg");
background-color: rgb(176,176,176);
} }
#peers .navbar-icon { #peers .navbar-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='9' cy='7' r='4'%3E%3C/circle%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'%3E%3C/path%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-image: url("../svg/peers.svg");
mask-image: url("../svg/peers.svg");
background-color: rgb(176,176,176);
} }
#plugins .navbar-icon { #plugins .navbar-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Cpath d='M12 1v6m0 6v6'%3E%3C/path%3E%3Cpath d='M4.22 4.22l4.24 4.24m2.12 2.12l4.24 4.24'%3E%3C/path%3E%3Cpath d='M1 12h6m6 0h6'%3E%3C/path%3E%3Cpath d='M4.22 19.78l4.24-4.24m2.12-2.12l4.24-4.24'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-image: url("../svg/plugins.svg");
mask-image: url("../svg/plugins.svg");
background-color: rgb(176,176,176);
} }
/* Active State - Icons turn green */ /* Active state - Icons use accent color */
#home.active .navbar-icon { #home.active .navbar-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E"); background-color: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
} }
#inbox.active .navbar-icon { #inbox.active .navbar-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22 6 12 13 2 6'%3E%3C/polyline%3E%3C/svg%3E"); background-color: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
} }
#new.active .navbar-icon { #new.active .navbar-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E"); background-color: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
} }
#profile.active .navbar-icon { #profile.active .navbar-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E"); background-color: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
} }
#peers.active .navbar-icon { #peers.active .navbar-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='9' cy='7' r='4'%3E%3C/circle%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'%3E%3C/path%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'%3E%3C/path%3E%3C/svg%3E"); background-color: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
} }
#plugins.active .navbar-icon { #plugins.active .navbar-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Cpath d='M12 1v6m0 6v6'%3E%3C/path%3E%3Cpath d='M4.22 4.22l4.24 4.24m2.12 2.12l4.24 4.24'%3E%3C/path%3E%3Cpath d='M1 12h6m6 0h6'%3E%3C/path%3E%3Cpath d='M4.22 19.78l4.24-4.24m2.12-2.12l4.24-4.24'%3E%3C/path%3E%3C/svg%3E"); background-color: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
} }
/* ============================================ /* ============================================
@@ -334,7 +336,7 @@ h1 {
margin: 1.5rem 0 1rem 0; margin: 1.5rem 0 1rem 0;
line-height: 0.9; line-height: 0.9;
text-transform: uppercase; text-transform: uppercase;
text-shadow: 0 0 15px rgba(76, 175, 80, 0.3); text-shadow: 0 0 15px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.3);
font-weight: 400; font-weight: 400;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@@ -521,21 +523,27 @@ textarea:focus,
select:focus { select:focus {
outline: none; outline: none;
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 15px rgba(76, 175, 80, 0.1); box-shadow: 0 0 15px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1);
background-color: #1e1e1e; background-color: #1e1e1e;
} }
/* Select Box Styling */ /* Select Box Styling - chevron-down.svg as mask with accent color */
select { select {
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); -webkit-mask-image: url("../svg/chevron-down.svg");
background-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
background-position: right 10px center; -webkit-mask-position: right 10px center;
background-size: 20px; -webkit-mask-size: 20px;
mask-image: url("../svg/chevron-down.svg");
mask-repeat: no-repeat;
mask-position: right 10px center;
mask-size: 20px;
padding-right: 36px; padding-right: 36px;
cursor: pointer; cursor: pointer;
color: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
background-color: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
} }
select::-ms-expand { select::-ms-expand {
@@ -574,7 +582,7 @@ input[type="reset"],
font-family: var(--font-pixel); font-family: var(--font-pixel);
font-size: 1.2rem; font-size: 1.2rem;
cursor: pointer; cursor: pointer;
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4); box-shadow: 0 4px 15px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.4);
text-transform: uppercase; text-transform: uppercase;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@@ -591,7 +599,7 @@ input[type="reset"]:hover,
.btn:hover { .btn:hover {
color: #000; color: #000;
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0 6px 20px rgba(76, 175, 80, 0.5); box-shadow: 0 6px 20px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.5);
transform: translateY(-2px) scale(1.02); transform: translateY(-2px) scale(1.02);
text-decoration: none; text-decoration: none;
} }
@@ -602,7 +610,7 @@ input[type="button"]:active,
input[type="reset"]:active, input[type="reset"]:active,
.btn:active { .btn:active {
transform: translateY(0) scale(0.98); transform: translateY(0) scale(0.98);
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3); box-shadow: 0 2px 8px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.3);
} }
button:disabled, button:disabled,
@@ -699,7 +707,7 @@ input:checked + .slider {
input:checked + .slider:before { input:checked + .slider:before {
transform: translateX(1.2rem); transform: translateX(1.2rem);
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0 0 8px rgba(76, 175, 80, 0.3); box-shadow: 0 0 8px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.3);
} }
.switch-label { .switch-label {
@@ -745,7 +753,7 @@ li {
} }
.list-item:hover { .list-item:hover {
background-color: rgba(76, 175, 80, 0.05); background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.05);
border-left: 4px solid var(--accent); border-left: 4px solid var(--accent);
padding-left: calc(1rem - 4px); padding-left: calc(1rem - 4px);
color: var(--text-bright); color: var(--text-bright);
@@ -872,9 +880,9 @@ li {
} }
.badge.default { .badge.default {
background: #2a3a2a; background: #262626;
color: #888; color: #888;
border-color: #3a4a3a; border-color: #333;
} }
.tooltip { .tooltip {
@@ -944,7 +952,7 @@ li {
.toast-success { .toast-success {
border-left-color: var(--accent); border-left-color: var(--accent);
background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.05)); background: linear-gradient(135deg, rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1), rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.05));
} }
.toast-info { .toast-info {
@@ -981,9 +989,10 @@ li {
} }
.alert-success { .alert-success {
background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.08)); background: linear-gradient(135deg, rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.15), rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08));
border-left-color: var(--accent); border-left-color: var(--accent);
color: #66bb6a; color: var(--accent);
filter: brightness(1.2);
} }
.alert-info { .alert-info {
@@ -1087,7 +1096,8 @@ code {
} }
.btn.primary:hover { .btn.primary:hover {
background-color: var(--accent-hover); background-color: var(--accent);
filter: brightness(1.2);
text-decoration: none; text-decoration: none;
transform: translateY(-2px); transform: translateY(-2px);
} }

1
pwnagotchi/ui/web/templates/base.html
View File

@@ -13,6 +13,7 @@
{% block styles %} {% block styles %}
<link rel="stylesheet" type="text/css" href="/css/style.css" /> <link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/theme.css" />
{% if active_page == 'profile' %} {% if active_page == 'profile' %}
<link rel="stylesheet" type="text/css" href="/css/profile.css" /> <link rel="stylesheet" type="text/css" href="/css/profile.css" />
{% elif active_page in ['inbox', 'new'] %} {% elif active_page in ['inbox', 'new'] %}