alee/stegasoo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web UI v4.1.6: Admin settings, nav icons, air-gap ready

Browse Source 
Admin System Settings page:
- New /admin/settings route with channel key config
- QR code export with tiled print sheet (4x5 on US Letter)
- Server config display (HTTPS, port, auth, DCT/QR status)
- Environment info (version, Python, platform, KDF)

Navigation improvements:
- Icon-only nav with floating labels on hover
- Gold labels slide down below icons
- Gradient pill background on hover

Air-gap ready:
- All vendor libs now local (Bootstrap CSS/JS, Icons, html5-qrcode)
- QRious library for QR generation
- No external CDN dependencies

Other changes:
- Moved About link from nav to footer
- Channel QR export moved from about.html to admin/settings.html
- Print sheet button for QR codes (tiled US Letter output)
- Dev runner script (dev_run.sh) with r/q hotkeys
- Fixed navbar dropdown z-index

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Aaron D. Lee
2026-01-07 18:36:33 -05:00
parent 28b539bcd9
commit 4d8575ce33
18 changed files with 2368 additions and 716 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
frontends/web/app.py
View File

@@ -2105,6 +2105,145 @@ def api_tools_exif_clear():
return jsonify({"success": False, "error": str(e)}), 500
@app.route("/api/tools/rotate", methods=["POST"])
@login_required
def api_tools_rotate():
"""Rotate and/or flip an image."""
from PIL import Image
image_file = request.files.get("image")
if not image_file:
return jsonify({"success": False, "error": "No image provided"}), 400
rotation = int(request.form.get("rotation", 0))
flip_h = request.form.get("flip_h", "false").lower() == "true"
flip_v = request.form.get("flip_v", "false").lower() == "true"
try:
img = Image.open(io.BytesIO(image_file.read()))
# Apply rotation (PIL rotates counter-clockwise, so negate)
if rotation:
img = img.rotate(-rotation, expand=True)
# Apply flips
if flip_h:
img = img.transpose(Image.FLIP_LEFT_RIGHT)
if flip_v:
img = img.transpose(Image.FLIP_TOP_BOTTOM)
# Output as PNG (lossless)
buffer = io.BytesIO()
img.save(buffer, format="PNG")
buffer.seek(0)
stem = (
image_file.filename.rsplit(".", 1)[0]
if "." in image_file.filename
else image_file.filename
)
return send_file(
buffer,
mimetype="image/png",
as_attachment=True,
download_name=f"{stem}_transformed.png",
)
except Exception as e:
return jsonify({"success": False, "error": str(e)}), 500
@app.route("/api/tools/compress", methods=["POST"])
@login_required
def api_tools_compress():
"""Compress image to JPEG at specified quality."""
from PIL import Image
image_file = request.files.get("image")
if not image_file:
return jsonify({"success": False, "error": "No image provided"}), 400
quality = int(request.form.get("quality", 85))
quality = max(10, min(100, quality)) # Clamp to valid range
try:
img = Image.open(io.BytesIO(image_file.read()))
# Convert to RGB if necessary (JPEG doesn't support alpha)
if img.mode in ("RGBA", "LA", "P"):
img = img.convert("RGB")
buffer = io.BytesIO()
img.save(buffer, format="JPEG", quality=quality)
buffer.seek(0)
stem = (
image_file.filename.rsplit(".", 1)[0]
if "." in image_file.filename
else image_file.filename
)
return send_file(
buffer,
mimetype="image/jpeg",
as_attachment=True,
download_name=f"{stem}_q{quality}.jpg",
)
except Exception as e:
return jsonify({"success": False, "error": str(e)}), 500
@app.route("/api/tools/convert", methods=["POST"])
@login_required
def api_tools_convert():
"""Convert image to different format."""
from PIL import Image
image_file = request.files.get("image")
if not image_file:
return jsonify({"success": False, "error": "No image provided"}), 400
output_format = request.form.get("format", "PNG").upper()
quality = int(request.form.get("quality", 90))
quality = max(10, min(100, quality))
# Validate format
format_map = {
"PNG": ("png", "image/png"),
"JPEG": ("jpg", "image/jpeg"),
"WEBP": ("webp", "image/webp"),
}
if output_format not in format_map:
return jsonify({"success": False, "error": f"Unsupported format: {output_format}"}), 400
try:
img = Image.open(io.BytesIO(image_file.read()))
# Convert to RGB for JPEG (no alpha)
if output_format == "JPEG" and img.mode in ("RGBA", "LA", "P"):
img = img.convert("RGB")
buffer = io.BytesIO()
save_kwargs = {"format": output_format}
if output_format in ("JPEG", "WEBP"):
save_kwargs["quality"] = quality
img.save(buffer, **save_kwargs)
buffer.seek(0)
ext, mimetype = format_map[output_format]
stem = (
image_file.filename.rsplit(".", 1)[0]
if "." in image_file.filename
else image_file.filename
)
return send_file(
buffer,
mimetype=mimetype,
as_attachment=True,
download_name=f"{stem}.{ext}",
)
except Exception as e:
return jsonify({"success": False, "error": str(e)}), 500
# Add these two test routes anywhere in app.py after the app = Flask(...) line:
@@ -2554,6 +2693,42 @@ def api_channel_key_use(key_id):
# ============================================================================
@app.route("/admin/settings")
@admin_required
def admin_settings():
"""System settings page (admin only)."""
import platform
import sys
from stegasoo import __version__
from stegasoo.channel import get_channel_status
channel_status = get_channel_status()
return render_template(
"admin/settings.html",
# Channel info
channel_configured=channel_status["configured"],
channel_fingerprint=channel_status.get("fingerprint"),
channel_source=channel_status.get("source"),
channel_key_full=channel_status.get("key") if channel_status["configured"] else "",
# Server config
hostname=os.environ.get("STEGASOO_HOSTNAME") or socket.gethostname(),
port=os.environ.get("STEGASOO_PORT", "5000"),
https_enabled=app.config.get("HTTPS_ENABLED", False),
auth_enabled=app.config.get("AUTH_ENABLED", True),
max_payload_kb=MAX_FILE_PAYLOAD_SIZE // 1024,
max_upload_mb=MAX_FILE_SIZE // (1024 * 1024),
dct_available=has_dct_support(),
qr_available=HAS_QRCODE_READ,
# Environment
version=__version__,
python_version=f"{sys.version_info.major}.{sys.version_info.minor}.{sys.version_info.micro}",
platform=platform.system(),
kdf_type="Argon2id" if has_argon2() else "PBKDF2",
)
@app.route("/admin/users")
@admin_required
def admin_users():

52
frontends/web/dev_run.sh Executable file
View File

@@ -0,0 +1,52 @@
#!/bin/bash
# Stegasoo Web Frontend - Development Runner
# Press 'r' to restart, 'q' to quit (single keypress, no Enter needed)
cd "$(dirname "$0")"
PID=""
cleanup() {
echo -e "\n\033[33mShutting down...\033[0m"
[[ -n "$PID" ]] && kill "$PID" 2>/dev/null
stty sane 2>/dev/null
exit 0
}
trap cleanup SIGINT SIGTERM EXIT
start_server() {
clear
echo -e "\033[36m┌──────────────────────────────────────┐\033[0m"
echo -e "\033[36m│ Stegasoo Dev Server │\033[0m"
echo -e "\033[36m│ \033[0m[r] restart [q] quit\033[36m │\033[0m"
echo -e "\033[36m└──────────────────────────────────────┘\033[0m"
pkill -f "python app.py" 2>/dev/null
sleep 0.3
python app.py 2>&1 &
PID=$!
echo -e "\033[32m✓ Running on http://localhost:5000 (PID: $PID)\033[0m\n"
}
start_server
# Single keypress mode
stty -echo -icanon time 0 min 0
while true; do
key=$(dd bs=1 count=1 2>/dev/null)
case "$key" in
r|R) start_server ;;
q|Q) cleanup ;;
esac
# Check if crashed
if [[ -n "$PID" ]] && ! kill -0 "$PID" 2>/dev/null; then
echo -e "\033[31m✗ Crashed! Press 'r' to restart\033[0m"
PID=""
fi
sleep 0.1
done

6
frontends/web/static/js/qrcode.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

110
frontends/web/static/js/stegasoo.js
View File

@@ -333,56 +333,68 @@ const Stegasoo = {
generateEmbedTraces(container, width, height) {
// Color classes for variety
const colors = ['color-yellow', 'color-cyan', 'color-purple', 'color-blue'];
// Generate 6-8 snake paths spread across the whole image
const numPaths = 6 + Math.floor(Math.random() * 3);
for (let p = 0; p < numPaths; p++) {
// Each path gets a random color
const pathColor = colors[Math.floor(Math.random() * colors.length)];
// Distribute starting points across the image
let x = (width * 0.1) + (Math.random() * width * 0.8);
let y = (height * 0.1) + (Math.random() * height * 0.8);
let delay = p * 40;
// Each path has 3-5 segments for more coverage
const numSegments = 3 + Math.floor(Math.random() * 3);
let horizontal = Math.random() > 0.5;
for (let s = 0; s < numSegments; s++) {
const trace = document.createElement('div');
trace.className = 'embed-trace ' + (horizontal ? 'h' : 'v') + ' ' + pathColor;
const length = 30 + Math.random() * 60;
trace.style.left = x + 'px';
trace.style.top = y + 'px';
trace.style.animationDelay = delay + 'ms';
if (horizontal) {
trace.style.width = length + 'px';
} else {
trace.style.height = length + 'px';
// Grid-based distribution: divide image into cells for even coverage
const gridCols = 5;
const gridRows = 4;
const cellWidth = width / gridCols;
const cellHeight = height / gridRows;
let pathIndex = 0;
// Spawn 1-2 paths from each grid cell for even distribution
for (let row = 0; row < gridRows; row++) {
for (let col = 0; col < gridCols; col++) {
// 1-2 paths per cell
const pathsInCell = 1 + Math.floor(Math.random() * 2);
for (let p = 0; p < pathsInCell; p++) {
const pathColor = colors[Math.floor(Math.random() * colors.length)];
// Start within this grid cell (with padding)
let x = (col * cellWidth) + (cellWidth * 0.15) + (Math.random() * cellWidth * 0.7);
let y = (row * cellHeight) + (cellHeight * 0.15) + (Math.random() * cellHeight * 0.7);
let delay = pathIndex * 15;
// Each path has 3-5 short segments
const numSegments = 3 + Math.floor(Math.random() * 3);
let horizontal = Math.random() > 0.5;
for (let s = 0; s < numSegments; s++) {
const trace = document.createElement('div');
trace.className = 'embed-trace ' + (horizontal ? 'h' : 'v') + ' ' + pathColor;
// Shorter segments: 12-30px for denser circuit look
const length = 12 + Math.random() * 18;
trace.style.left = Math.max(0, Math.min(x, width - length)) + 'px';
trace.style.top = Math.max(0, Math.min(y, height - length)) + 'px';
trace.style.animationDelay = delay + 'ms';
if (horizontal) {
trace.style.width = length + 'px';
} else {
trace.style.height = length + 'px';
}
container.appendChild(trace);
// Move position for next segment
if (horizontal) {
x += length * (Math.random() > 0.5 ? 1 : -1);
} else {
y += length * (Math.random() > 0.5 ? 1 : -1);
}
// Keep within bounds
x = Math.max(5, Math.min(x, width - 20));
y = Math.max(5, Math.min(y, height - 20));
// Alternate direction (90 degree turn)
horizontal = !horizontal;
delay += 20;
}
pathIndex++;
}
container.appendChild(trace);
// Move position for next segment
if (horizontal) {
x += length;
} else {
y += length;
}
// Wrap around if out of bounds to keep traces in view
if (x > width - 20) x = 10 + Math.random() * 40;
if (y > height - 20) y = 10 + Math.random() * 40;
if (x < 10) x = width - 60 + Math.random() * 40;
if (y < 10) y = height - 60 + Math.random() * 40;
// Alternate direction (90 degree turn)
horizontal = !horizontal;
delay += 30;
}
}
},

584
frontends/web/static/style.css
View File

@@ -125,6 +125,115 @@ body {
.navbar {
background: var(--overlay-dark) !important;
backdrop-filter: blur(10px);
z-index: 1030; /* Above page content for dropdowns */
}
/* Ensure navbar dropdown appears above all page content */
.navbar .dropdown-menu {
z-index: 1031;
}
/* ----------------------------------------------------------------------------
Nav Icons - Floating Label on Hover (label floats below, no layout shift)
---------------------------------------------------------------------------- */
.nav-icons {
gap: 0.25rem;
}
.nav-icons .nav-item {
position: relative;
}
.nav-expand {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.75rem !important;
border-radius: 0.5rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: transparent;
position: relative;
}
.nav-expand i {
font-size: 1.15rem;
transition: all 0.3s ease;
}
/* Floating label - absolutely positioned below */
.nav-expand span {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-4px);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
color: var(--header-gold);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background: linear-gradient(135deg, rgba(74, 40, 96, 0.95) 0%, rgba(85, 112, 212, 0.9) 100%);
padding: 0.2rem 0.5rem;
border-radius: 0.25rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
transition: opacity 0.2s ease,
transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1040;
}
.nav-expand:hover {
background: linear-gradient(135deg, rgba(74, 40, 96, 0.5) 0%, rgba(85, 112, 212, 0.4) 100%);
box-shadow: 0 0 12px rgba(102, 126, 234, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.nav-expand:hover i {
color: var(--header-gold);
filter: drop-shadow(0 0 4px rgba(254, 232, 98, 0.4));
}
.nav-expand:hover span {
opacity: 1;
transform: translateX(-50%) translateY(2px);
}
/* Active state for current page */
.nav-expand.active,
.nav-item.active .nav-expand {
background: linear-gradient(135deg, rgba(74, 40, 96, 0.6) 0%, rgba(85, 112, 212, 0.5) 100%);
}
.nav-expand.active i,
.nav-item.active .nav-expand i {
color: var(--header-gold);
}
/* Mobile: Always show labels inline in collapsed menu */
@media (max-width: 991.98px) {
.nav-expand span {
position: static;
transform: none;
opacity: 1;
background: none;
box-shadow: none;
padding: 0;
margin-left: 0.5rem;
font-size: 0.9rem;
text-transform: none;
letter-spacing: normal;
pointer-events: auto;
}
.nav-expand:hover span {
transform: none;
}
.nav-expand:hover {
background: rgba(255, 255, 255, 0.1);
}
}
/* ----------------------------------------------------------------------------
@@ -893,36 +1002,36 @@ footer {
opacity: 0;
}
/* Color variants - 60% opacity */
/* Color variants - 70% opacity with tighter glow for thin lines */
.embed-trace.color-yellow {
background: rgba(212, 225, 87, 0.6);
box-shadow: 0 0 6px rgba(212, 225, 87, 0.5), 0 0 12px rgba(212, 225, 87, 0.3);
background: rgba(212, 225, 87, 0.7);
box-shadow: 0 0 3px rgba(212, 225, 87, 0.6), 0 0 6px rgba(212, 225, 87, 0.3);
}
.embed-trace.color-cyan {
background: rgba(0, 255, 170, 0.6);
box-shadow: 0 0 6px rgba(0, 255, 170, 0.5), 0 0 12px rgba(0, 255, 170, 0.3);
background: rgba(0, 255, 170, 0.7);
box-shadow: 0 0 3px rgba(0, 255, 170, 0.6), 0 0 6px rgba(0, 255, 170, 0.3);
}
.embed-trace.color-purple {
background: rgba(167, 139, 250, 0.6);
box-shadow: 0 0 6px rgba(167, 139, 250, 0.5), 0 0 12px rgba(167, 139, 250, 0.3);
background: rgba(167, 139, 250, 0.7);
box-shadow: 0 0 3px rgba(167, 139, 250, 0.6), 0 0 6px rgba(167, 139, 250, 0.3);
}
.embed-trace.color-blue {
background: rgba(102, 126, 234, 0.6);
box-shadow: 0 0 6px rgba(102, 126, 234, 0.5), 0 0 12px rgba(102, 126, 234, 0.3);
background: rgba(102, 126, 234, 0.7);
box-shadow: 0 0 3px rgba(102, 126, 234, 0.6), 0 0 6px rgba(102, 126, 234, 0.3);
}
/* Vertical segments shrink from top */
.embed-trace.v {
width: 2px;
width: 1px;
transform-origin: top center;
}
/* Horizontal segments shrink from left */
.embed-trace.h {
height: 2px;
height: 1px;
transform-origin: left center;
}
@@ -1699,3 +1808,456 @@ footer {
font-size: 3rem;
}
}
/* ============================================================================
TOOLS PAGE - Office-style Ribbon + Two-Panel Layout
============================================================================ */
/* Icon Toolbar Ribbon - Purple/Blue Gradient Theme */
.tools-ribbon {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
border-bottom: 1px solid rgba(139, 92, 246, 0.2);
border-radius: 0.5rem 0.5rem 0 0;
flex-wrap: wrap;
}
.tools-ribbon-group {
display: flex;
align-items: center;
gap: 0.25rem;
}
.tools-ribbon-divider {
width: 2px;
height: 32px;
background: linear-gradient(180deg, rgba(102, 126, 234, 0.4) 0%, rgba(139, 92, 246, 0.4) 100%);
margin: 0 0.75rem;
border-radius: 1px;
}
/* Tool Icon Buttons */
.tool-icon-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 52px;
height: 48px;
padding: 0.25rem;
border: 1px solid transparent;
border-radius: 0.375rem;
background: transparent;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: all 0.2s ease;
}
.tool-icon-btn i {
font-size: 1.25rem;
margin-bottom: 2px;
}
.tool-icon-btn span {
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.tool-icon-btn:hover {
background: rgba(139, 92, 246, 0.15);
border-color: rgba(139, 92, 246, 0.3);
color: rgba(255, 255, 255, 0.95);
}
.tool-icon-btn.active {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);
border-color: rgba(139, 92, 246, 0.5);
color: #c4b5fd;
box-shadow: 0 0 12px rgba(139, 92, 246, 0.2);
}
/* Two-Panel Layout */
.tools-panels {
display: flex;
min-height: 400px;
border-radius: 0 0 0.5rem 0.5rem;
}
/* Left Panel - Input/Dropzone */
.tools-panel-input {
flex: 1;
display: flex;
flex-direction: column;
background: rgba(0, 0, 0, 0.15);
border-right: 1px solid rgba(255, 255, 255, 0.08);
}
/* Tool Mode Banner - bottom of input panel */
.tool-mode-banner {
margin-top: auto; /* Push to bottom */
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 1.25rem;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
border-top: 1px solid rgba(139, 92, 246, 0.2);
font-size: 0.75rem;
}
.tool-mode-type {
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
padding: 0.2rem 0.5rem;
border-radius: 3px;
background: rgba(139, 92, 246, 0.3);
color: #c4b5fd;
}
.tool-mode-banner.mode-analyze .tool-mode-type {
background: rgba(72, 187, 120, 0.3);
color: #9ae6b4;
}
.tool-mode-banner.mode-transform .tool-mode-type {
background: rgba(237, 181, 71, 0.3);
color: #fbd38d;
}
.tool-mode-name {
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
/* Right Panel - Results */
.tools-panel-results {
width: 280px;
min-width: 280px;
display: flex;
flex-direction: column;
padding: 1.25rem;
background: rgba(0, 0, 0, 0.25);
}
/* Tool Options Row */
.tool-options {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-wrap: wrap;
}
.tool-options:empty {
display: none;
}
.tool-options label {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 0;
}
.tool-options .form-select,
.tool-options .form-control {
background: rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.15);
font-size: 0.85rem;
padding: 0.4rem 0.75rem;
}
/* Tool Drop Zone */
.tool-dropzone {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
border: 2px dashed rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
background: rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.tool-dropzone input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
z-index: 10;
}
.tool-dropzone-label {
text-align: center;
color: rgba(255, 255, 255, 0.5);
}
.tool-dropzone-label i {
font-size: 2.5rem;
margin-bottom: 0.75rem;
display: block;
opacity: 0.5;
}
.tool-dropzone.drag-over {
border-color: #63b3ed;
background: rgba(99, 179, 237, 0.1);
}
.tool-dropzone.drag-over .tool-dropzone-label i {
color: #63b3ed;
opacity: 1;
}
/* Dropzone with preview */
.tool-dropzone.has-file .tool-dropzone-label {
display: none;
}
.tool-dropzone-preview {
display: none;
width: 100%;
height: 100%;
padding: 1rem;
}
.tool-dropzone.has-file .tool-dropzone-preview {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tool-dropzone-preview img {
max-width: 100%;
max-height: 180px;
object-fit: contain;
border-radius: 0.375rem;
border: 2px solid rgba(99, 179, 237, 0.3);
}
/* Rotate preview - smooth transitions for size and transform */
#rotateThumb {
transition: transform 0.1s ease-out, width 0.1s ease-out, height 0.1s ease-out;
}
/* Rotate image container - fixed height to contain rotated images */
.rotate-img-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 180px;
}
/* Rotate file info - separate row below dropzone */
.rotate-file-info {
text-align: center;
padding: 0.5rem 0;
margin-top: 0.25rem;
}
.rotate-file-info .file-name {
font-size: 0.85rem;
color: #63b3ed;
font-weight: 500;
}
.rotate-file-info .file-meta {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
}
.tool-dropzone-preview .file-name {
margin-top: 0.75rem;
font-size: 0.85rem;
color: #63b3ed;
font-weight: 500;
}
.tool-dropzone-preview .file-meta {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
}
.tool-dropzone-clear {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 20;
opacity: 0.6;
}
.tool-dropzone-clear:hover {
opacity: 1;
}
/* Results Panel Content */
.tool-results-header {
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tool-results-header h6 {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: #fff;
}
.tool-results-header small {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
}
.tool-results-body {
flex: 1;
overflow-y: auto;
}
.tool-results-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: rgba(255, 255, 255, 0.3);
text-align: center;
}
.tool-results-empty i {
font-size: 2rem;
margin-bottom: 0.5rem;
}
/* Result Items */
.tool-result-item {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.5rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tool-result-item:last-child {
border-bottom: none;
}
.tool-result-label {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
}
.tool-result-value {
font-size: 0.9rem;
font-weight: 500;
color: #fff;
font-family: 'SF Mono', 'Consolas', monospace;
}
.tool-result-value.text-primary { color: #63b3ed !important; }
.tool-result-value.text-success { color: #48bb78 !important; }
.tool-result-value.text-warning { color: #edb547 !important; }
/* Results Actions */
.tool-results-actions {
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
gap: 0.5rem;
}
.tool-results-actions .btn {
flex: 1;
font-size: 0.85rem;
}
/* Tool Section Visibility */
.tool-section {
display: none;
width: 100%;
flex: 1;
padding: 1.25rem;
}
.tool-section.active {
display: flex;
flex-direction: column;
}
/* EXIF Table in Results */
.tool-exif-table {
font-size: 0.8rem;
max-height: 250px;
overflow-y: auto;
}
.tool-exif-table table {
width: 100%;
}
.tool-exif-table th,
.tool-exif-table td {
padding: 0.35rem 0.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tool-exif-table th {
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
text-align: left;
width: 40%;
}
.tool-exif-table td {
font-family: 'SF Mono', 'Consolas', monospace;
word-break: break-all;
}
/* Loading State */
.tool-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
z-index: 30;
border-radius: 0.5rem;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.tools-panels {
flex-direction: column;
}
.tools-panel-results {
width: 100%;
min-width: 100%;
border-right: none;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tools-ribbon {
justify-content: center;
}
.tool-icon-btn {
width: 48px;
height: 44px;
}
.tool-icon-btn span {
display: none;
}
}

5
frontends/web/static/vendor/css/bootstrap-icons.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

6
frontends/web/static/vendor/css/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
frontends/web/static/vendor/css/fonts/bootstrap-icons.woff vendored Normal file
View File

Binary file not shown.

BIN
frontends/web/static/vendor/css/fonts/bootstrap-icons.woff2 vendored Normal file
View File

Binary file not shown.

7
frontends/web/static/vendor/js/bootstrap.bundle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
frontends/web/static/vendor/js/html5-qrcode.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

102
frontends/web/templates/about.html
View File

@@ -317,58 +317,19 @@
</div>
{% if channel_configured %}
<div class="alert alert-success mt-3 mb-3">
<div class="alert alert-success mt-3 mb-0">
<i class="bi bi-shield-lock me-2"></i>
<strong>This server has a channel key configured:</strong>
<code class="ms-2">{{ channel_fingerprint }}</code>
<span class="text-muted ms-2">({{ channel_source }})</span>
</div>
{% else %}
<div class="alert alert-info mt-3 mb-3">
<div class="alert alert-info mt-3 mb-0">
<i class="bi bi-info-circle me-2"></i>
This server is running in <strong>public mode</strong>.
Set <code>STEGASOO_CHANNEL_KEY</code> to enable server-wide channel isolation.
</div>
{% endif %}
<!-- Channel Key QR Generator (Admin only) -->
{% if is_admin %}
<div class="card bg-dark border-secondary">
<div class="card-header">
<i class="bi bi-qr-code me-2"></i>Share Channel Key via QR
<span class="badge bg-warning text-dark ms-2"><i class="bi bi-shield-check me-1"></i>Admin</span>
</div>
<div class="card-body">
<p class="small text-muted mb-3">Generate a QR code to share a channel key with others.</p>
<div class="row g-2 align-items-end">
<div class="col-md-8">
<label class="form-label small">Channel Key</label>
<div class="input-group">
<input type="text" class="form-control font-monospace" id="channelKeyQrInput"
placeholder="Enter or generate a key">
<button class="btn btn-outline-secondary" type="button" id="channelKeyQrGenerate"
title="Generate random key">
<i class="bi bi-shuffle"></i>
</button>
</div>
</div>
<div class="col-md-4">
<button class="btn btn-primary w-100" type="button" id="channelKeyQrShow">
<i class="bi bi-qr-code me-1"></i>Show QR
</button>
</div>
</div>
<div class="text-center mt-3 d-none" id="channelKeyQrContainer">
<canvas id="channelKeyQrCanvas" class="bg-white p-2 rounded"></canvas>
<div class="mt-2">
<button class="btn btn-sm btn-outline-secondary" type="button" id="channelKeyQrDownload">
<i class="bi bi-download me-1"></i>Download PNG
</button>
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
@@ -635,62 +596,3 @@
</div>
{% endblock %}
{% block scripts %}
<!-- QR Code library for channel key sharing -->
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
<script src="{{ url_for('static', filename='js/stegasoo.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const input = document.getElementById('channelKeyQrInput');
const generateBtn = document.getElementById('channelKeyQrGenerate');
const showBtn = document.getElementById('channelKeyQrShow');
const container = document.getElementById('channelKeyQrContainer');
const canvas = document.getElementById('channelKeyQrCanvas');
const downloadBtn = document.getElementById('channelKeyQrDownload');
// Generate random key
generateBtn?.addEventListener('click', function() {
if (input && typeof Stegasoo !== 'undefined') {
input.value = Stegasoo.generateChannelKey();
}
});
// Show QR code
showBtn?.addEventListener('click', function() {
const key = input?.value?.trim().replace(/-/g, '');
if (!key || key.length !== 32) {
alert('Please enter a valid 32-character channel key');
return;
}
// Format key with dashes for QR
const formatted = key.match(/.{4}/g)?.join('-') || key;
// Generate QR code
if (typeof QRCode !== 'undefined' && canvas) {
QRCode.toCanvas(canvas, formatted, {
width: 200,
margin: 2,
color: { dark: '#000', light: '#fff' }
}, function(error) {
if (error) {
console.error('QR generation error:', error);
return;
}
container?.classList.remove('d-none');
});
}
});
// Download QR as PNG
downloadBtn?.addEventListener('click', function() {
if (canvas) {
const link = document.createElement('a');
link.download = 'stegasoo-channel-key.png';
link.href = canvas.toDataURL('image/png');
link.click();
}
});
});
</script>
{% endblock %}

121
frontends/web/templates/account.html
View File

@@ -250,7 +250,10 @@
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-sm btn-outline-secondary" id="qrDownload">
<i class="bi bi-download me-1"></i>Download PNG
<i class="bi bi-download me-1"></i>Download
</button>
<button type="button" class="btn btn-sm btn-outline-secondary" id="qrPrint">
<i class="bi bi-printer me-1"></i>Print Sheet
</button>
</div>
</div>
@@ -263,7 +266,7 @@
<script src="{{ url_for('static', filename='js/auth.js') }}"></script>
<script src="{{ url_for('static', filename='js/stegasoo.js') }}"></script>
{% if is_admin %}
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
<script src="{{ url_for('static', filename='js/qrcode.min.js') }}"></script>
{% endif %}
<script>
StegasooAuth.initPasswordConfirmation('accountForm', 'newPasswordInput', 'newPasswordConfirmInput');
@@ -305,20 +308,20 @@ function showKeyQr(channelKey, keyName) {
document.getElementById('qrKeyName').textContent = keyName;
document.getElementById('qrKeyDisplay').textContent = formatted;
// Generate QR code
// Generate QR code using QRious
const canvas = document.getElementById('qrCanvas');
if (typeof QRCode !== 'undefined' && canvas) {
QRCode.toCanvas(canvas, formatted, {
width: 200,
margin: 2,
color: { dark: '#000', light: '#fff' }
}, function(error) {
if (error) {
console.error('QR generation error:', error);
return;
}
if (typeof QRious !== 'undefined' && canvas) {
try {
new QRious({
element: canvas,
value: formatted,
size: 200,
level: 'M'
});
new bootstrap.Modal(document.getElementById('qrModal')).show();
});
} catch (error) {
console.error('QR generation error:', error);
}
}
}
@@ -333,6 +336,96 @@ document.getElementById('qrDownload')?.addEventListener('click', function() {
link.click();
}
});
// Print tiled QR sheet (US Letter)
document.getElementById('qrPrint')?.addEventListener('click', function() {
const canvas = document.getElementById('qrCanvas');
const keyText = document.getElementById('qrKeyDisplay').textContent;
const keyName = document.getElementById('qrKeyName').textContent;
if (canvas && keyText) {
printQrSheet(canvas, keyText, keyName);
}
});
// Print QR codes tiled on US Letter paper (8.5" x 11")
function printQrSheet(canvas, keyText, title) {
const qrDataUrl = canvas.toDataURL('image/png');
const printWindow = window.open('', '_blank');
if (!printWindow) {
alert('Please allow popups to print');
return;
}
// US Letter: 8.5" x 11" - create 4x5 grid of QR codes
const cols = 4;
const rows = 5;
let qrGrid = '';
for (let i = 0; i < rows * cols; i++) {
qrGrid += `
<div class="qr-tile">
<img src="${qrDataUrl}" alt="QR">
<div class="key-text">${keyText}</div>
</div>
`;
}
printWindow.document.write(`
<!DOCTYPE html>
<html>
<head>
<title>Stegasoo ${title} - Print Sheet</title>
<style>
@page {
size: letter;
margin: 0.2in;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Courier New', monospace;
background: white;
}
.grid {
display: grid;
grid-template-columns: repeat(${cols}, 1fr);
gap: 0.08in;
margin-top: 0.20in;
}
.qr-tile {
border: 1px dashed #ccc;
padding: 0.08in;
text-align: center;
page-break-inside: avoid;
}
.qr-tile img {
width: 1.4in;
height: 1.4in;
}
.key-text {
font-size: 6pt;
color: #333;
margin-top: 0.03in;
word-break: break-all;
}
.footer {
text-align: center;
padding-top: 0.1in;
font-size: 7pt;
color: #999;
}
</style>
</head>
<body>
<div class="grid">${qrGrid}</div>
<div class="footer">Cut along dashed lines</div>
<script>
window.onload = function() { window.print(); };
<\/script>
</body>
</html>
`);
printWindow.document.close();
}
{% endif %}
</script>
{% endblock %}

372
frontends/web/templates/admin/settings.html Normal file
View File

@@ -0,0 +1,372 @@
{% extends "base.html" %}
{% block title %}System Settings - Stegasoo{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-lg-10">
<!-- Channel Key Configuration -->
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-broadcast me-2"></i>Channel Key Configuration</h5>
</div>
<div class="card-body">
{% if channel_configured %}
<div class="alert alert-success mb-4">
<i class="bi bi-shield-lock me-2"></i>
<strong>Server channel key active:</strong>
<code class="ms-2">{{ channel_fingerprint }}</code>
<span class="text-muted ms-2">({{ channel_source }})</span>
</div>
{% else %}
<div class="alert alert-info mb-4">
<i class="bi bi-info-circle me-2"></i>
Server running in <strong>public mode</strong>.
Set <code>STEGASOO_CHANNEL_KEY</code> environment variable to enable server-wide channel isolation.
</div>
{% endif %}
<!-- QR Code Generator -->
<div class="card bg-dark border-secondary">
<div class="card-header">
<i class="bi bi-qr-code me-2"></i>Share Channel Key via QR
</div>
<div class="card-body">
<p class="small text-muted mb-3">Generate a QR code to share a channel key with others.</p>
<div class="row g-2 align-items-end">
<div class="col-md-8">
<label class="form-label small">Channel Key</label>
<div class="input-group">
<input type="text" class="form-control font-monospace" id="channelKeyQrInput"
placeholder="Enter or generate a key"
{% if channel_configured %}value="{{ channel_key_full }}"{% endif %}>
<button class="btn btn-outline-secondary" type="button" id="channelKeyQrGenerate"
title="Generate random key">
<i class="bi bi-shuffle"></i>
</button>
</div>
</div>
<div class="col-md-4">
<button class="btn btn-primary w-100" type="button" id="channelKeyQrShow">
<i class="bi bi-qr-code me-1"></i>Show QR
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Server Configuration -->
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-gear me-2"></i>Server Configuration</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<table class="table table-dark table-sm">
<tbody>
<tr>
<td><i class="bi bi-hdd-network me-2"></i>Hostname</td>
<td><code>{{ hostname }}</code></td>
</tr>
<tr>
<td><i class="bi bi-ethernet me-2"></i>Port</td>
<td><code>{{ port }}</code></td>
</tr>
<tr>
<td><i class="bi bi-shield-lock me-2"></i>HTTPS</td>
<td>
{% if https_enabled %}
<span class="badge bg-success"><i class="bi bi-lock me-1"></i>Enabled</span>
{% else %}
<span class="badge bg-warning text-dark"><i class="bi bi-unlock me-1"></i>Disabled</span>
{% endif %}
</td>
</tr>
<tr>
<td><i class="bi bi-person-lock me-2"></i>Authentication</td>
<td>
{% if auth_enabled %}
<span class="badge bg-success"><i class="bi bi-check me-1"></i>Enabled</span>
{% else %}
<span class="badge bg-danger"><i class="bi bi-x me-1"></i>Disabled</span>
{% endif %}
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<table class="table table-dark table-sm">
<tbody>
<tr>
<td><i class="bi bi-file-earmark me-2"></i>Max Payload</td>
<td><code>{{ max_payload_kb }} KB</code></td>
</tr>
<tr>
<td><i class="bi bi-upload me-2"></i>Max Upload</td>
<td><code>{{ max_upload_mb }} MB</code></td>
</tr>
<tr>
<td><i class="bi bi-soundwave me-2"></i>DCT Mode</td>
<td>
{% if dct_available %}
<span class="badge bg-success"><i class="bi bi-check me-1"></i>Available</span>
{% else %}
<span class="badge bg-secondary">Not Available</span>
{% endif %}
</td>
</tr>
<tr>
<td><i class="bi bi-qr-code me-2"></i>QR Support</td>
<td>
{% if qr_available %}
<span class="badge bg-success"><i class="bi bi-check me-1"></i>Available</span>
{% else %}
<span class="badge bg-secondary">Not Available</span>
{% endif %}
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="alert alert-secondary small mt-3 mb-0">
<i class="bi bi-info-circle me-2"></i>
To change server settings, edit environment variables or config file and restart the service.
<br>See <code>STEGASOO_HTTPS_ENABLED</code>, <code>STEGASOO_PORT</code>, <code>STEGASOO_CHANNEL_KEY</code>
</div>
</div>
</div>
<!-- Environment Info -->
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Environment</h5>
</div>
<div class="card-body">
<div class="row text-center">
<div class="col-6 col-md-3 mb-3">
<div class="p-3 bg-dark rounded h-100">
<i class="bi bi-box text-primary fs-3 d-block mb-2"></i>
<div class="small text-muted">Version</div>
<strong>{{ version }}</strong>
</div>
</div>
<div class="col-6 col-md-3 mb-3">
<div class="p-3 bg-dark rounded h-100">
<i class="bi bi-terminal text-info fs-3 d-block mb-2"></i>
<div class="small text-muted">Python</div>
<strong>{{ python_version }}</strong>
</div>
</div>
<div class="col-6 col-md-3 mb-3">
<div class="p-3 bg-dark rounded h-100">
<i class="bi bi-cpu text-warning fs-3 d-block mb-2"></i>
<div class="small text-muted">Platform</div>
<strong>{{ platform }}</strong>
</div>
</div>
<div class="col-6 col-md-3 mb-3">
<div class="p-3 bg-dark rounded h-100">
<i class="bi bi-shield-check text-success fs-3 d-block mb-2"></i>
<div class="small text-muted">KDF</div>
<strong>{{ kdf_type }}</strong>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- QR Code Modal -->
<div class="modal fade" id="channelKeyQrModal" tabindex="-1">
<div class="modal-dialog modal-sm modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title"><i class="bi bi-qr-code me-2"></i>Channel Key</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body text-center">
<canvas id="channelKeyQrCanvas" class="bg-white p-2 rounded"></canvas>
<div class="mt-2">
<code class="small" id="channelKeyQrDisplay"></code>
</div>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-sm btn-outline-secondary" id="channelKeyQrDownload">
<i class="bi bi-download me-1"></i>Download
</button>
<button type="button" class="btn btn-sm btn-outline-secondary" id="channelKeyQrPrint">
<i class="bi bi-printer me-1"></i>Print Sheet
</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/qrcode.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/stegasoo.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const input = document.getElementById('channelKeyQrInput');
const generateBtn = document.getElementById('channelKeyQrGenerate');
const showBtn = document.getElementById('channelKeyQrShow');
const canvas = document.getElementById('channelKeyQrCanvas');
const displayEl = document.getElementById('channelKeyQrDisplay');
const downloadBtn = document.getElementById('channelKeyQrDownload');
const modalEl = document.getElementById('channelKeyQrModal');
const modal = modalEl ? new bootstrap.Modal(modalEl) : null;
// Generate random key
generateBtn?.addEventListener('click', function() {
if (!input) return;
if (typeof Stegasoo !== 'undefined' && Stegasoo.generateChannelKey) {
input.value = Stegasoo.generateChannelKey();
} else {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
let key = '';
for (let i = 0; i < 8; i++) {
if (i > 0) key += '-';
for (let j = 0; j < 4; j++) {
key += chars.charAt(Math.floor(Math.random() * chars.length));
}
}
input.value = key;
}
});
// Show QR code in modal
showBtn?.addEventListener('click', function() {
const key = input?.value?.trim().replace(/-/g, '');
if (!key || key.length !== 32) {
alert('Please enter a valid 32-character channel key');
return;
}
const formatted = key.match(/.{4}/g)?.join('-') || key;
if (typeof QRious === 'undefined') {
alert('QR Code library failed to load.');
return;
}
try {
new QRious({
element: canvas,
value: formatted,
size: 200,
level: 'M'
});
if (displayEl) displayEl.textContent = formatted;
modal?.show();
} catch (error) {
alert('Failed to generate QR code: ' + error.message);
}
});
// Download QR as PNG
downloadBtn?.addEventListener('click', function() {
if (canvas) {
const link = document.createElement('a');
link.download = 'stegasoo-channel-key.png';
link.href = canvas.toDataURL('image/png');
link.click();
}
});
// Print tiled QR sheet (US Letter)
document.getElementById('channelKeyQrPrint')?.addEventListener('click', function() {
if (canvas && displayEl) {
printQrSheet(canvas, displayEl.textContent, 'Channel Key');
}
});
});
// Print QR codes tiled on US Letter paper (8.5" x 11")
function printQrSheet(canvas, keyText, title) {
const qrDataUrl = canvas.toDataURL('image/png');
const printWindow = window.open('', '_blank');
if (!printWindow) {
alert('Please allow popups to print');
return;
}
// US Letter: 8.5" x 11" - create 4x5 grid of QR codes
const cols = 4;
const rows = 5;
let qrGrid = '';
for (let i = 0; i < rows * cols; i++) {
qrGrid += `
<div class="qr-tile">
<img src="${qrDataUrl}" alt="QR">
<div class="key-text">${keyText}</div>
</div>
`;
}
printWindow.document.write(`
<!DOCTYPE html>
<html>
<head>
<title>Stegasoo ${title} - Print Sheet</title>
<style>
@page {
size: letter;
margin: 0.2in;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Courier New', monospace;
background: white;
}
.grid {
display: grid;
grid-template-columns: repeat(${cols}, 1fr);
gap: 0.08in;
margin-top: 0.20in;
}
.qr-tile {
border: 1px dashed #ccc;
padding: 0.08in;
text-align: center;
page-break-inside: avoid;
}
.qr-tile img {
width: 1.4in;
height: 1.4in;
}
.key-text {
font-size: 6pt;
color: #333;
margin-top: 0.03in;
word-break: break-all;
}
.footer {
text-align: center;
padding-top: 0.1in;
font-size: 7pt;
color: #999;
}
</style>
</head>
<body>
<div class="grid">${qrGrid}</div>
<div class="footer">Cut along dashed lines</div>
<script>
window.onload = function() { window.print(); };
<\/script>
</body>
</html>
`);
printWindow.document.close();
}
</script>
{% endblock %}

28
frontends/web/templates/base.html
View File

@@ -5,8 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Stegasoo{% endblock %}</title>
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
<link href="{{ url_for('static', filename='vendor/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='vendor/css/bootstrap-icons.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
</head>
<body>
@@ -23,26 +23,23 @@
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<ul class="navbar-nav ms-auto nav-icons">
<li class="nav-item">
<a class="nav-link" href="/"><i class="bi bi-house me-1"></i> Home</a>
<a class="nav-link nav-expand" href="/"><i class="bi bi-house"></i><span>Home</span></a>
</li>
{% if not auth_enabled or is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="/encode"><i class="bi bi-lock me-1"></i> Encode</a>
<a class="nav-link nav-expand" href="/encode"><i class="bi bi-lock"></i><span>Encode</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/decode"><i class="bi bi-unlock me-1"></i> Decode</a>
<a class="nav-link nav-expand" href="/decode"><i class="bi bi-unlock"></i><span>Decode</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/generate"><i class="bi bi-key me-1"></i> Generate</a>
<a class="nav-link nav-expand" href="/generate"><i class="bi bi-key"></i><span>Generate</span></a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link" href="/about"><i class="bi bi-info-circle me-1"></i> About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/tools"><i class="bi bi-tools me-1"></i> Tools</a>
<a class="nav-link nav-expand" href="/tools"><i class="bi bi-tools"></i><span>Tools</span></a>
</li>
{% if auth_enabled %}
{% if is_authenticated %}
@@ -54,6 +51,7 @@
<li><a class="dropdown-item" href="/account"><i class="bi bi-gear me-2"></i>Account</a></li>
{% if is_admin %}
<li><a class="dropdown-item" href="/admin/users"><i class="bi bi-people me-2"></i>Users</a></li>
<li><a class="dropdown-item" href="/admin/settings"><i class="bi bi-sliders me-2"></i>System Settings</a></li>
{% endif %}
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="/logout"><i class="bi bi-box-arrow-left me-2"></i>Logout</a></li>
@@ -96,13 +94,15 @@
<small>
<img src="{{ url_for('static', filename='favicon.svg') }}" alt="" height="16" class="me-1" style="vertical-align: text-bottom;">
Stegasoo v{{ version }} — Steganography with Reference Photo + Passphrase + PIN/Key
<span class="mx-2">|</span>
<a href="/about" class="text-muted text-decoration-none"><i class="bi bi-info-circle me-1"></i>About</a>
</small>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- QR Code scanning library (v4.1.5) -->
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<script src="{{ url_for('static', filename='vendor/js/bootstrap.bundle.min.js') }}"></script>
<!-- QR Code scanning library (local) -->
<script src="{{ url_for('static', filename='vendor/js/html5-qrcode.min.js') }}"></script>
<script>
// Initialize toasts (auto-hide after delay)
document.querySelectorAll('.toast').forEach(el => new bootstrap.Toast(el));

1401
frontends/web/templates/tools.html
View File

File diff suppressed because it is too large Load Diff