mirror of
https://github.com/vincentmli/bpfire.git
synced 2026-04-18 15:02:59 +02:00
New theme for the IPFire web user interface
This commit is contained in:
Alexander Marx
committed by
Michael Tremer
Michael Tremer
parent
1dc4447136
commit
af731c7dc5
BIN
html/html/themes/ipfire-new/images/n2.gif
Normal file
BIN
html/html/themes/ipfire-new/images/n2.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 449 B |
BIN
html/html/themes/ipfire-new/images/n3.gif
Normal file
BIN
html/html/themes/ipfire-new/images/n3.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 B |
BIN
html/html/themes/ipfire-new/images/n5.gif
Normal file
BIN
html/html/themes/ipfire-new/images/n5.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 B |
BIN
html/html/themes/ipfire-new/images/n6.gif
Normal file
BIN
html/html/themes/ipfire-new/images/n6.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 B |
BIN
html/html/themes/ipfire-new/images/tux2.png
Normal file
BIN
html/html/themes/ipfire-new/images/tux2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
25
html/html/themes/ipfire-new/include/colors.txt
Normal file
25
html/html/themes/ipfire-new/include/colors.txt
Normal file
@@ -0,0 +1,25 @@
|
||||
color1=#CD5B45
|
||||
color2=#EE6A50
|
||||
color3=#FF7256
|
||||
color4=#EE9572
|
||||
color5=#FFA07A
|
||||
color6=#CDAF95
|
||||
color7=#EECBAD
|
||||
color8=#FFDAB9
|
||||
color9=#FFE4C4
|
||||
color10=#FFCCCC
|
||||
color11=#0000FF
|
||||
color12=#00FF00
|
||||
color13=#FF0000
|
||||
color14=#FFD700
|
||||
color15=#CCCCCC
|
||||
color16=#40E0D0
|
||||
color17=#90EE90
|
||||
color18=#F4A460
|
||||
color19=#EAE9EE
|
||||
color20=#D6D6D6
|
||||
color21=#FFFFFF
|
||||
color22=#F0F0F0
|
||||
color23=#FF00FF
|
||||
color24=#6464FF
|
||||
color25=#FF6464
|
||||
631
html/html/themes/ipfire-new/include/css/style.css
Normal file
631
html/html/themes/ipfire-new/include/css/style.css
Normal file
@@ -0,0 +1,631 @@
|
||||
@charset 'UTF-8';
|
||||
/* Menu */
|
||||
#cssmenu ul,
|
||||
#cssmenu li,
|
||||
#cssmenu span,
|
||||
#cssmenu a {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#cssmenu {
|
||||
position: relative;
|
||||
width: 950px;
|
||||
margin: 0 auto;
|
||||
background: #dddddd; /* Old browsers */
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
-webkit-border-radius: 8px 8px 8px 8px;
|
||||
font-weight: 600;
|
||||
height: 32px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#cssmenu:after,
|
||||
#cssmenu ul:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
#cssmenu a {
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
-webkit-border-radius: 8px 8px 8px 8px;
|
||||
color: #111111;
|
||||
display: inline-block;
|
||||
font-family: Arial, Verdana, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 32px;
|
||||
padding: 0 15px;
|
||||
text-decoration: none;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
#cssmenu ul {
|
||||
list-style: none;
|
||||
}
|
||||
#cssmenu > ul > li {
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
#cssmenu > ul > li.active a,
|
||||
#cssmenu > ul > li:hover > a {
|
||||
color: white;
|
||||
background: #aaaaaa;
|
||||
}
|
||||
|
||||
#cssmenu .has-sub {
|
||||
z-index: 1;
|
||||
}
|
||||
#cssmenu .has-sub:hover > ul {
|
||||
display: block;
|
||||
}
|
||||
#cssmenu .has-sub ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
#cssmenu .has-sub ul li a {
|
||||
border-radius: 7px 7px 7px 7px;
|
||||
background: #ffffff;
|
||||
color: grey;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
line-height: 40%;
|
||||
padding: 12px 5px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#cssmenu .has-sub ul li:hover a {
|
||||
background: #dddddd;
|
||||
box-shadow: inset 0 5px 1px rgba(0, 0, 0, 0.15);
|
||||
-webkit-box-shadow: inset 0 5px 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
#cssmenu .has-sub .has-sub:hover > ul {
|
||||
display: block;
|
||||
}
|
||||
#cssmenu .has-sub .has-sub ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
}
|
||||
#cssmenu .has-sub .has-sub ul li a {
|
||||
background: #606a76;
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
}
|
||||
#cssmenu .has-sub .has-sub ul li a:hover {
|
||||
background: #4a5662;
|
||||
box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
|
||||
-webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Table */
|
||||
/* when using class='bordered' after tabletag */
|
||||
|
||||
table {
|
||||
*border-collapse: collapse; /* IE7 and lower */
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.bordered th{
|
||||
border-top: 1px solid grey;
|
||||
border-bottom: 1px solid grey;
|
||||
background: #cccccc;
|
||||
}
|
||||
|
||||
.bordered th:first-child{
|
||||
-moz-border-radius: 6px 0 0 0;
|
||||
-webkit-border-radius: 6px 0 0 0;
|
||||
border-radius: 6px 0 0 0;
|
||||
border-left: 1px solid grey;
|
||||
border-top: 1px solid grey;
|
||||
border-bottom: 1px solid grey;
|
||||
}
|
||||
|
||||
.bordered th:last-child {
|
||||
-moz-border-radius: 0 6px 0 0;
|
||||
-webkit-border-radius: 0 6px 0 0;
|
||||
border-radius: 0 6px 0 0;
|
||||
border-right: 1px solid grey;
|
||||
border-top: 1px solid grey;
|
||||
border-bottom: 1px solid grey;
|
||||
}
|
||||
|
||||
.bordered th:only-child{
|
||||
-moz-border-radius: 6px 6px 0 0;
|
||||
-webkit-border-radius: 6px 6px 0 0;
|
||||
border-radius: 6px 6px 0 0;
|
||||
border: 1px solid grey;
|
||||
}
|
||||
|
||||
.bordered tr:first-child td:first-child{
|
||||
-moz-border-radius: 6px 0 0 0;
|
||||
-webkit-border-radius: 6px 0 0 0;
|
||||
border-radius: 6px 0 0 0;
|
||||
border-left: 1px solid grey;
|
||||
border-top: 1px solid grey;
|
||||
}
|
||||
|
||||
.bordered tr:first-child td:last-child{
|
||||
-moz-border-radius: 0 6px 0 0;
|
||||
-webkit-border-radius: 0 6px 0 0;
|
||||
border-radius: 0 6px 0 0;
|
||||
border-top: 1px solid grey;
|
||||
}
|
||||
.bordered tr:first-child td:only-child{
|
||||
-moz-border-radius: 6px 6px 0 0;
|
||||
-webkit-border-radius: 6px 6px 0 0;
|
||||
border-radius: 6px 6px 0 0;
|
||||
border-left: 1px solid grey;
|
||||
border-right: 1px solid grey;
|
||||
border-top: 1px solid grey;
|
||||
}
|
||||
|
||||
.bordered tr:first-child td{
|
||||
border-top: 1px solid grey;
|
||||
}
|
||||
|
||||
.bordered tr:last-child{
|
||||
border-left: 1px solid grey;
|
||||
border-right: 1px solid grey;
|
||||
}
|
||||
|
||||
.bordered tr:last-child td:first-child {
|
||||
-moz-border-radius: 0 0 0 6px;
|
||||
-webkit-border-radius: 0 0 0 6px;
|
||||
border-radius: 0 0 0 6px;
|
||||
border-bottom: 1px solid grey;
|
||||
}
|
||||
|
||||
.bordered tr:last-child td:last-child {
|
||||
-moz-border-radius: 0 0 6px 0;
|
||||
-webkit-border-radius: 0 0 6px 0;
|
||||
border-radius: 0 0 6px 0;
|
||||
border-bottom: 1px solid grey;
|
||||
}
|
||||
|
||||
.bordered tr:last-child td:only-child {
|
||||
-moz-border-radius: 0 0 6px 6px;
|
||||
-webkit-border-radius: 0 0 6px 6px;
|
||||
border-radius: 0 0 6px 6px;
|
||||
border-bottom: 1px solid grey;
|
||||
}
|
||||
|
||||
.bordered tr:last-child td {
|
||||
border-bottom: 1px solid grey;
|
||||
}
|
||||
|
||||
.bordered td:first-child {
|
||||
border-left: 1px solid grey;
|
||||
}
|
||||
|
||||
.bordered td:last-child {
|
||||
border-right: 1px solid grey;
|
||||
}
|
||||
|
||||
|
||||
/* This controls the width of the fluid width layouts */
|
||||
|
||||
div.fluid
|
||||
{
|
||||
width: 90% !important;
|
||||
}
|
||||
|
||||
/* This controls the width of the fixed width layouts */
|
||||
|
||||
div.fixed
|
||||
{
|
||||
width: 910px !important;
|
||||
}
|
||||
|
||||
/* Basic Stuff */
|
||||
|
||||
*
|
||||
{
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
}
|
||||
|
||||
/* body */
|
||||
|
||||
body
|
||||
{
|
||||
background: #ffffff;
|
||||
background-image: -webkit-linear-gradient(#880400 0%, black 100%);
|
||||
background-image: -moz-linear-gradient(#880400 0%, black 100%);
|
||||
background-image: -o-linear-gradient(#880400 0%, black 100%);
|
||||
background-image: linear-gradient(#880400 0%, black 100%);
|
||||
background-attachment: fixed;
|
||||
font-size: 9pt;
|
||||
font-family: "trebuchet ms", helvetica, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
h1,h3,h4,h5,h6
|
||||
{
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
letter-spacing: -1px;
|
||||
text-transform: lowercase;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
h3,h4,h5,h6
|
||||
{
|
||||
color: #66000F;
|
||||
}
|
||||
|
||||
h1 span
|
||||
{
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
padding-left: 1.7em;
|
||||
}
|
||||
|
||||
h3 span
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h4 span
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
br.clear
|
||||
{
|
||||
clear: both;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
img.floatTL
|
||||
{
|
||||
float: left;
|
||||
margin-right: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
text-decoration: underline;
|
||||
color: #D90000;
|
||||
}
|
||||
|
||||
a:hover
|
||||
{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.links
|
||||
{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.links li
|
||||
{
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
ul.links li.first
|
||||
{
|
||||
}
|
||||
|
||||
p
|
||||
{
|
||||
line-height: 1.8em;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
#header
|
||||
{
|
||||
width:100%;
|
||||
height:80px;
|
||||
}
|
||||
|
||||
#header_inner
|
||||
{
|
||||
position: relative;
|
||||
width: 910px;
|
||||
height:80px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
|
||||
#logo
|
||||
{
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height:65px;
|
||||
bottom: 0em;
|
||||
background: url('/themes/ipfire-new/images/tux2.png') no-repeat;
|
||||
background-position: left;
|
||||
}
|
||||
|
||||
#logo h1
|
||||
{
|
||||
display: inline;
|
||||
color: #fff;
|
||||
font-size: 3.6em;
|
||||
}
|
||||
|
||||
#logo h2
|
||||
{
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 20px;
|
||||
top: 70px;
|
||||
left: 0px;
|
||||
display: block;
|
||||
padding-left: 0.5em;
|
||||
color: #880400;
|
||||
font-size: 14px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
/* Main */
|
||||
|
||||
#main
|
||||
{
|
||||
position: relative;
|
||||
width: 910px;
|
||||
margin: 0 auto;
|
||||
margin-top: 1em;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
-webkit-border-radius: 8px 8px 8px 8px;
|
||||
background: #fff url('/themes/ipfire-new/images/n2.gif') 0px 0px repeat-x;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#main_inner p
|
||||
{
|
||||
text-align: justify;
|
||||
margin-bottom: 2.0em;
|
||||
}
|
||||
|
||||
#main_inner ul
|
||||
{
|
||||
margin-bottom: 2.0em;
|
||||
}
|
||||
|
||||
#main_inner
|
||||
{
|
||||
position: relative;
|
||||
width: 910px;
|
||||
margin: 0 auto;
|
||||
padding-top: 3.5em;
|
||||
}
|
||||
|
||||
#main_inner h3,h4
|
||||
{
|
||||
border-bottom: dotted 1px #E1E1E1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#main_inner h3
|
||||
{
|
||||
font-size: 2.1em;
|
||||
padding-bottom: 0.1em;
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
|
||||
#main_inner h4
|
||||
{
|
||||
font-size: 1.2em;
|
||||
padding-bottom: 0.175em;
|
||||
margin-bottom: 1.4em;
|
||||
margin-top: 0.95em;
|
||||
}
|
||||
|
||||
#main_inner .post
|
||||
{
|
||||
position: relative;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
-webkit-border-radius: 8px 8px 8px 8px;
|
||||
border: 1px solid silver;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
padding-bottom: 1em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
#main_inner .post h3
|
||||
{
|
||||
font-size: 1.7em;
|
||||
padding-bottom: 1.2em;
|
||||
}
|
||||
|
||||
#main_inner .post ul.post_info
|
||||
{
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
top: 3em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
#main_inner .post ul.post_info li
|
||||
{
|
||||
background-position: 0em 0.2em;
|
||||
background-repeat: no-repeat;
|
||||
display: inline;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
#main_inner .post ul.post_info li.date
|
||||
{
|
||||
background-image: url('/themes/ipfire-new/images/n5.gif');
|
||||
}
|
||||
|
||||
#main_inner .post ul.post_info li.comments
|
||||
{
|
||||
background-image: url('/themes/ipfire-new/images/n6.gif');
|
||||
margin-left: 1.1em;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
#footer
|
||||
{
|
||||
width: 930px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
border-top: dotted 1px #E1E1E1;
|
||||
margin-top: 1.0em;
|
||||
margin-bottom: 1.0em;
|
||||
padding-top: 1.0em;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
|
||||
input
|
||||
{
|
||||
margin: 0.2em;
|
||||
}
|
||||
|
||||
input.button
|
||||
{
|
||||
background: #CA2F2F url('/themes/ipfire-new/images/n3.gif') repeat-x;
|
||||
color: #fff;
|
||||
border: solid 1px #A94B4B;
|
||||
font-weight: bold;
|
||||
text-transform: lowercase;
|
||||
font-size: 0.8em;
|
||||
height: 2.0em;
|
||||
}
|
||||
|
||||
input.text
|
||||
{
|
||||
border: solid 1px #F1F1F1;
|
||||
font-size: 1.0em;
|
||||
padding: 0.25em 0.25em 0.25em 0.25em;
|
||||
}
|
||||
|
||||
#search
|
||||
{
|
||||
width: 100%;
|
||||
margin-bottom: 2.0em;
|
||||
}
|
||||
|
||||
#search input.text
|
||||
{
|
||||
position: absolute;
|
||||
top: 0em;
|
||||
left: 0em;
|
||||
width: 9.5em;
|
||||
}
|
||||
|
||||
#search input.button
|
||||
{
|
||||
position: absolute;
|
||||
top: 0em;
|
||||
right: 0em;
|
||||
min-width: 2.0em;
|
||||
max-width: 2.5em;
|
||||
}
|
||||
|
||||
#traffic
|
||||
{
|
||||
margin-top: -2.2em;
|
||||
margin-left: 60em;
|
||||
}
|
||||
/* LAYOUT - 3 COLUMNS */
|
||||
|
||||
/* Primary content */
|
||||
|
||||
#primaryContent_3columns
|
||||
{
|
||||
margin-right: 34em;
|
||||
}
|
||||
|
||||
#columnA_3columns
|
||||
{
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-right: -34em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
/* Secondary Content */
|
||||
|
||||
#secondaryContent_3columns
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
|
||||
#columnB_3columns
|
||||
{
|
||||
width: 13.0em;
|
||||
float: left;
|
||||
padding: 0em 2em 0.5em 2em;
|
||||
border-left: dotted 1px #E1E1E1;
|
||||
}
|
||||
|
||||
#columnC_3columns
|
||||
{
|
||||
width: 13.0em;
|
||||
float: left;
|
||||
padding: 0em 0em 0.5em 2em;
|
||||
border-left: dotted 1px #E1E1E1;
|
||||
}
|
||||
#columnC_2columns
|
||||
{
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* LAYOUT - COLUMNLESS */
|
||||
|
||||
/* Primary content */
|
||||
|
||||
#primaryContent_columnless
|
||||
{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#columnA_columnless
|
||||
{
|
||||
position: relative;
|
||||
margin-left: -5em;
|
||||
}
|
||||
|
||||
/* status */
|
||||
.statusdisplay {
|
||||
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
-webkit-border-radius: 8px 8px 8px 8px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin: 0 auto;
|
||||
width: 950px;
|
||||
height:100px;
|
||||
margin-left: -1.6em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
background: #fff url('/themes/ipfire-new/images/n2.gif') 0px 0px repeat-x;
|
||||
}
|
||||
/* Bandwidth Calculation */
|
||||
|
||||
#bandwidthCalculationContainer {
|
||||
display: block;
|
||||
}
|
||||
270
html/html/themes/ipfire-new/include/functions.pl
Normal file
270
html/html/themes/ipfire-new/include/functions.pl
Normal file
@@ -0,0 +1,270 @@
|
||||
#!/usr/bin/perl
|
||||
###############################################################################
|
||||
# #
|
||||
# IPFire.org - A linux based firewall #
|
||||
# Copyright (C) 2007 Michael Tremer & Christian Schmidt #
|
||||
# #
|
||||
# This program is free software: you can redistribute it and/or modify #
|
||||
# it under the terms of the GNU General Public License as published by #
|
||||
# the Free Software Foundation, either version 3 of the License, or #
|
||||
# (at your option) any later version. #
|
||||
# #
|
||||
# This program is distributed in the hope that it will be useful, #
|
||||
# but WITHOUT ANY WARRANTY; without even the implied warranty of #
|
||||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the #
|
||||
# GNU General Public License for more details. #
|
||||
# #
|
||||
# You should have received a copy of the GNU General Public License #
|
||||
# along with this program. If not, see <http://www.gnu.org/licenses/>. #
|
||||
# #
|
||||
###############################################################################
|
||||
# #
|
||||
# Theme file for IPfire (based on ipfire theme) #
|
||||
# Author kay-michael köhler kmk <michael@koehler.tk> #
|
||||
# #
|
||||
# Version 1.0 March, 6th 2013 #
|
||||
###############################################################################
|
||||
# #
|
||||
# Modyfied theme by a.marx@ipfire.org January 2014 #
|
||||
# #
|
||||
# Cleanup code, deleted unused code and rewrote the rest to get a new working #
|
||||
# IPFire default theme. #
|
||||
###############################################################################
|
||||
|
||||
use File::Basename;
|
||||
require "${General::swroot}/lang.pl";
|
||||
###############################################################################
|
||||
#
|
||||
# print menu html elements for submenu entries
|
||||
# @param submenu entries
|
||||
sub showsubmenu() {
|
||||
my $submenus = shift;
|
||||
|
||||
print "<ul>";
|
||||
foreach my $item (sort keys %$submenus) {
|
||||
$link = getlink($submenus->{$item});
|
||||
next if (!is_menu_visible($link) or $link eq '');
|
||||
|
||||
my $subsubmenus = $submenus->{$item}->{'subMenu'};
|
||||
|
||||
if ($subsubmenus) {
|
||||
print '<li class="has-sub ">';
|
||||
} else {
|
||||
print '<li>';
|
||||
}
|
||||
print '<a href="'.$link.'"><span>'.$submenus->{$item}->{'caption'}.'</span></a>';
|
||||
|
||||
&showsubmenu($subsubmenus) if ($subsubmenus);
|
||||
print '</li>';
|
||||
}
|
||||
print "</ul>"
|
||||
}
|
||||
|
||||
###############################################################################
|
||||
#
|
||||
# print menu html elements
|
||||
sub showmenu() {
|
||||
print '<div id="cssmenu"><ul>';
|
||||
foreach my $k1 ( sort keys %$menu ) {
|
||||
$link = getlink($menu->{$k1});
|
||||
next if (!is_menu_visible($link) or $link eq '');
|
||||
print '<li class="has-sub "><a><span>'.$menu->{$k1}->{'caption'}.'</span></a>';
|
||||
my $submenus = $menu->{$k1}->{'subMenu'};
|
||||
&showsubmenu($submenus) if ($submenus);
|
||||
print "</li>";
|
||||
}
|
||||
if ($settings{'SPEED'} ne 'off') {
|
||||
print"<div id='traffic'>";
|
||||
print"<table><tr><td style='font-weight: bold;'>Traffic: </td>";
|
||||
print"<td id='bandwidthCalculationContainer'>In <span id='rx_kbs'></span> Out <span id='tx_kbs'></span></td>";
|
||||
print"</tr></table>";
|
||||
print '</ul></div></div>';
|
||||
}
|
||||
}
|
||||
|
||||
###############################################################################
|
||||
#
|
||||
# print page opening html layout
|
||||
# @param page title
|
||||
# @param boh
|
||||
# @param extra html code for html head section
|
||||
# @param suppress menu option, can be numeric 1 or nothing.
|
||||
# menu will be suppressed if param is 1
|
||||
sub openpage {
|
||||
my $title = shift;
|
||||
my $boh = shift;
|
||||
my $extrahead = shift;
|
||||
my $suppressMenu = shift;
|
||||
my @tmp = split(/\./, basename($0));
|
||||
my $scriptName = @tmp[0];
|
||||
my $h2 = $title;
|
||||
|
||||
@URI=split ('\?', $ENV{'REQUEST_URI'} );
|
||||
&General::readhash("${swroot}/main/settings", \%settings);
|
||||
&genmenu();
|
||||
|
||||
$title = "IPFire - $title";
|
||||
if ($settings{'WINDOWWITHHOSTNAME'} eq 'on') {
|
||||
$title = "$settings{'HOSTNAME'}.$settings{'DOMAINNAME'} - $title";
|
||||
}
|
||||
|
||||
print <<END
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>$title</title>
|
||||
$extrahead
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="/favicon.ico" />
|
||||
<link href="/themes/ipfire-new/include/css/style.css" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="/include/jquery-1.9.1.min.js"></script>
|
||||
END
|
||||
;
|
||||
if ($settings{'SPEED'} ne 'off') {
|
||||
print <<END
|
||||
<script type="text/javascript" src="/themes/ipfire-new/include/js/refreshInetInfo.js"></script>
|
||||
END
|
||||
;
|
||||
}
|
||||
|
||||
if ($settings{'FX'} ne 'off') {
|
||||
print <<END
|
||||
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.5,Transition=12)" />
|
||||
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.5,Transition=12)" />
|
||||
END
|
||||
;
|
||||
}
|
||||
|
||||
print <<END
|
||||
</head>
|
||||
<body>
|
||||
END
|
||||
;
|
||||
|
||||
print <<END
|
||||
<!-- IPFIRE HEADER -->
|
||||
<div id="header_inner" class="fixed">
|
||||
<div id="logo">
|
||||
END
|
||||
;
|
||||
if ($settings{'WINDOWWITHHOSTNAME'} eq 'on') {
|
||||
print "<h1><span>$settings{'HOSTNAME'}.$settings{'DOMAINNAME'}</span></h1><br />";
|
||||
} else {
|
||||
print "<h1><span>IPFire</span></h1><br />";
|
||||
}
|
||||
|
||||
print <<END
|
||||
<h2>$h2</h2>
|
||||
</div>
|
||||
</div>
|
||||
END
|
||||
;
|
||||
|
||||
&showmenu() if ($suppressMenu != 1);
|
||||
|
||||
print <<END
|
||||
<div id="main">
|
||||
<div id="main_inner" class="fixed">
|
||||
<div id="columnA_2columns">
|
||||
END
|
||||
;
|
||||
}
|
||||
|
||||
###############################################################################
|
||||
#
|
||||
# print page opening html layout without menu
|
||||
# @param page title
|
||||
# @param boh
|
||||
# @param extra html code for html head section
|
||||
sub openpagewithoutmenu {
|
||||
openpage(shift,shift,shift,1);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
###############################################################################
|
||||
#
|
||||
# print page closing html layout
|
||||
|
||||
sub closepage () {
|
||||
my $status = &connectionstatus();
|
||||
my $uptime = `/usr/bin/uptime|cut -d \" \" -f 4-`;
|
||||
$uptime =~ s/year(s|)/$Lang::tr{'year'}/;
|
||||
$uptime =~ s/month(s|)/$Lang::tr{'month'}/;
|
||||
$uptime =~ s/days/$Lang::tr{'days'}/;
|
||||
$uptime =~ s/day /$Lang::tr{'day'}/;
|
||||
$uptime =~ s/user(s|)/$Lang::tr{'user'}/;
|
||||
$uptime =~ s/load average/$Lang::tr{'uptime load average'}/;
|
||||
print <<END
|
||||
<!-- closepage begin -->
|
||||
</div>
|
||||
</div>
|
||||
END
|
||||
;
|
||||
|
||||
print "<div id='columnC_2columns'>";
|
||||
print <<END
|
||||
<table cellspacing="5" class="statusdisplay" border="0">
|
||||
<tr><td align='center'>$status Uptime: $uptime</td></tr>
|
||||
END
|
||||
;
|
||||
|
||||
print <<END
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!-- closepage end -->
|
||||
END
|
||||
;
|
||||
}
|
||||
|
||||
###############################################################################
|
||||
#
|
||||
# print big box opening html layout
|
||||
sub openbigbox
|
||||
{
|
||||
}
|
||||
|
||||
###############################################################################
|
||||
#
|
||||
# print big box closing html layout
|
||||
sub closebigbox
|
||||
{
|
||||
}
|
||||
|
||||
###############################################################################
|
||||
#
|
||||
# print box opening html layout
|
||||
# @param page width
|
||||
# @param page align
|
||||
# @param page caption
|
||||
sub openbox
|
||||
{
|
||||
$width = $_[0];
|
||||
$align = $_[1];
|
||||
$caption = $_[2];
|
||||
|
||||
print <<END
|
||||
<!-- openbox -->
|
||||
<div class="post" align="$align">
|
||||
END
|
||||
;
|
||||
if ($caption) { print "<h3>$caption</h3>\n"; } else { print " "; }
|
||||
}
|
||||
|
||||
###############################################################################
|
||||
#
|
||||
# print box closing html layout
|
||||
sub closebox
|
||||
{
|
||||
print <<END
|
||||
</div>
|
||||
<br class="clear" />
|
||||
<!-- closebox -->
|
||||
END
|
||||
;
|
||||
}
|
||||
|
||||
1;
|
||||
53
html/html/themes/ipfire-new/include/js/refreshInetInfo.js
Normal file
53
html/html/themes/ipfire-new/include/js/refreshInetInfo.js
Normal file
@@ -0,0 +1,53 @@
|
||||
/* refreshInetInfo.js
|
||||
* functions for retrieving status information via jQuery
|
||||
* Modified: March 6th, 2013 by michael@koehler.tk
|
||||
* Authors: IPFire Team (info@ipfire.org)
|
||||
Kay-Michael K<>hler (michael@koehler.tk)
|
||||
* Visit http://www.ipfire.org/
|
||||
*/
|
||||
|
||||
var t_current;
|
||||
var t_last = 0;
|
||||
var rxb_current;
|
||||
var rxb_last = 0;
|
||||
var txb_current;
|
||||
var txb_last = 0;
|
||||
|
||||
$(document).ready(function(){
|
||||
refreshInetInfo();
|
||||
});
|
||||
|
||||
function refreshInetInfo() {
|
||||
$.ajax({
|
||||
url: '/cgi-bin/speed.cgi',
|
||||
success: function(xml){
|
||||
|
||||
t_current = new Date();
|
||||
var t_diff = t_current - t_last;
|
||||
|
||||
rxb_current = $("rxb",xml).text();
|
||||
var rxb_diff = rxb_current - rxb_last;
|
||||
rxb_last = rxb_current;
|
||||
|
||||
var rx_kbs = rxb_diff/t_diff;
|
||||
rx_kbs = Math.round(rx_kbs*10)/10;
|
||||
|
||||
txb_current = $("txb",xml).text();
|
||||
var txb_diff = txb_current - txb_last;
|
||||
txb_last = txb_current;
|
||||
|
||||
var tx_kbs = txb_diff/t_diff;
|
||||
tx_kbs = Math.round(tx_kbs*10)/10;
|
||||
|
||||
if (t_last != 0) {
|
||||
$("#rx_kbs").text(rx_kbs + ' kb/s');
|
||||
$("#tx_kbs").text(tx_kbs + ' kb/s');
|
||||
if ($("#bandwidthCalculationContainer").css('display') == 'none')
|
||||
$("#bandwidthCalculationContainer").css('display','block');
|
||||
}
|
||||
|
||||
t_last = t_current;
|
||||
}
|
||||
});
|
||||
window.setTimeout("refreshInetInfo()", 2000);
|
||||
}
|
||||
Reference in New Issue
Block a user