frodovdr/raspap-webgui
1
0
Fork 0
mirror of https://github.com/billz/raspap-webgui.git synced 2025-12-26 23:26:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1940 from RaspAP/feat/animated-logo

Browse Source 
Feature: Animated SVG logo
This commit is contained in:
Bill Zimmerman
2025-09-05 15:36:16 +02:00
committed by GitHub
parent f7e4b95ee2 f7058b048a
commit 93b5dc4dac
6 changed files with 53 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/css/all.css
View File

@@ -48,8 +48,15 @@ th {
}
.navbar-logo {
margin-top: 0.5em;
margin-left: 0.5em;
margin-top: 0.2em;
margin-left: 0.7em;
}
.login-logo {
width: 70px;
height: 70px;
margin-left: 1.2rem;
margin-bottom: -0.5rem;
}
.page-header {

3
app/css/custom.php
View File

@@ -2,6 +2,7 @@
<?php
require_once '../../includes/functions.php';
$color = getColorOpt();
$allCss = 'all.css';
?>
/*
Theme Name: RaspAP default
@@ -11,7 +12,7 @@ Description: Default theme for RaspAP
License: GNU General Public License v3.0
*/
@import url('all.css');
@import url('<?= $allCss ?>?v=<?= filemtime($allCss); ?>');
:root {
--raspap-theme-color: <?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;

76
app/img/raspAP-logo.php
View File

@@ -1,7 +1,10 @@
<?php header("Content-Type: image/svg+xml; charset=utf-8"); ?>
<?php
require_once '../../includes/config.php';
require_once '../../includes/functions.php';
$color = getColorOpt();
$static = (isset($_GET['static']) && $_GET['static'] == '1') ||
(defined('RASPI_UI_STATIC_LOGO') && RASPI_UI_STATIC_LOGO === true);
?>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
@@ -10,42 +13,41 @@ $color = getColorOpt();
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 490.66666 487.11066"
height="487.11066"
width="490.66666"
viewBox="0 180 352 290"
xml:space="preserve"
id="svg2"
version="1.1"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs6"><clipPath
id="clipPath18"
clipPathUnits="userSpaceOnUse"><path
id="path16"
d="M 0,365.333 H 368 V 0 H 0 Z" /></clipPath></defs><g
transform="matrix(1.3333333,0,0,-1.3333333,0,487.11067)"
id="g10"><g
id="g12"><g
clip-path="url(#clipPath18)"
id="g14"><g
transform="translate(192.6768,123.4365)"
id="g20"><path
id="path22"
style="fill:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 c 0,-37.169 -30.128,-67.3 -67.296,-67.3 -37.167,0 -67.294,30.131 -67.294,67.3 0,37.165 30.127,67.296 67.294,67.296 C -30.128,67.296 0,37.165 0,0" /></g><g
transform="translate(125.3823,219.0791)"
id="g24"><path
id="path26"
style="fill:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 c -52.737,0 -95.641,-42.905 -95.641,-95.643 0,-52.74 42.904,-95.647 95.641,-95.647 52.737,0 95.642,42.907 95.642,95.647 C 95.642,-42.905 52.737,0 0,0 m 0,-217.29 c -67.073,0 -121.641,54.571 -121.641,121.647 C -121.641,-28.569 -67.073,26 0,26 67.074,26 121.642,-28.569 121.642,-95.643 121.642,-162.719 67.074,-217.29 0,-217.29" /></g><g
transform="translate(144.4277,271.9385)"
id="g28"><path
id="path30"
style="fill:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 c 66.188,0 121.118,-49.055 130.392,-112.714 l 28.259,-1.874 C 150.044,-34.655 82.181,27.791 0,27.791 c -3.892,0 -7.75,-0.147 -11.571,-0.423 L -9.73,-0.397 C -6.513,-0.161 -3.275,0 0,0" /></g><g
transform="translate(144.4883,334.7588)"
id="g32"><path
id="path34"
style="fill:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 c 101.94,0 185.667,-79.438 192.56,-179.664 l 27.962,-1.857 C 214.513,-65.087 117.899,27.791 0,27.791 c -5.31,0 -10.576,-0.2 -15.792,-0.571 l 1.84,-27.728 C -9.343,-0.177 -4.691,0 0,0" /></g></g></g></g></svg>
version="1.1">
<style>
<?php if (!$static): ?>
.wave {
opacity: 0.4;
animation: pulse 1.8s infinite;
}
.wave1 { animation-delay: 0.3s; }
.wave2 { animation-delay: 0.6s; }
@keyframes pulse {
0% { opacity: 0.4; }
20% { opacity: 1; }
60% { opacity: 0.4; }
100% { opacity: 0.4; }
}
<?php else: ?>
.wave {
opacity: 1.0;
}
<?php endif; ?>
</style>
<!-- inner solid circle -->
<circle cx="128" cy="384" r="60" fill="<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>"/>
<!-- outer ring -->
<circle cx="128" cy="384" r="100" fill="none" stroke="<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>" stroke-width="25"/>
<!-- arcs -->
<path class="wave wave1" d="M128 234 A 150 150 0 0 1 278 384" fill="none" stroke="<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>" stroke-width="25"/>
<path class="wave wave2" d="M128 184 A 200 200 0 0 1 328 384" fill="none" stroke="<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>" stroke-width="25"/>
</svg>

1
config/config.php
View File

@@ -69,6 +69,7 @@ define('RASPI_SYSTEM_ENABLED', true);
define('RASPI_MONITOR_ENABLED', false);
define('RASPI_RESTAPI_ENABLED', false);
define('RASPI_PLUGINS_ENABLED', true);
define('RASPI_UI_STATIC_LOGO', false);
// Locale settings
define('LOCALE_ROOT', 'locale');

2
includes/functions.php
View File

@@ -915,7 +915,7 @@ function renderStatus($hostapd_led, $hostapd_status, $memused_led, $memused, $cp
?>
<div class="row g-0">
<div class="col-4 ms-2 sidebar-brand-icon">
<img src="app/img/raspAP-logo.php" class="navbar-logo" width="60" height="60">
<img src="app/img/raspAP-logo.php?static=1" class="navbar-logo" width="70" height="70">
</div>
<div class="col ml-2">
<div class="ml-1 sb-status">Status</div>

2
templates/login.php
View File

@@ -8,7 +8,7 @@
<div class="col-12">
<!-- branding -->
<div class="text-center mb-3">
<img src="app/img/raspAP-logo.php" class="navbar-logo" alt="RaspAP logo" class="img-fluid" style="max-width: 100px;">
<img src="app/img/raspAP-logo.php" class="login-logo" alt="RaspAP logo" class="img-fluid" style="max-width: 100px;">
<h2 class="login-brand"><?php echo htmlspecialchars(RASPI_BRAND_TEXT); ?></h2>
<div class="mt-2 admin-login"><?php echo _("Administrator login") ?></div>
<div class="text-center text-danger mt-1 mb-3"><?php echo $status ?></div>