From: Alexander Marx Date: Sun, 5 Jan 2014 13:04:59 +0000 (+0100) Subject: New theme for the IPFire web user interface X-Git-Tag: v2.15-beta1~72^2^2~18 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=af731c7dc5e4d947893bcd1427d14195665bcb4f;p=people%2Fms%2Fipfire-2.x.git New theme for the IPFire web user interface --- diff --git a/html/html/themes/ipfire-new/images/n2.gif b/html/html/themes/ipfire-new/images/n2.gif new file mode 100644 index 0000000000..b92a19de7a Binary files /dev/null and b/html/html/themes/ipfire-new/images/n2.gif differ diff --git a/html/html/themes/ipfire-new/images/n3.gif b/html/html/themes/ipfire-new/images/n3.gif new file mode 100644 index 0000000000..6627c91a15 Binary files /dev/null and b/html/html/themes/ipfire-new/images/n3.gif differ diff --git a/html/html/themes/ipfire-new/images/n5.gif b/html/html/themes/ipfire-new/images/n5.gif new file mode 100644 index 0000000000..a032242789 Binary files /dev/null and b/html/html/themes/ipfire-new/images/n5.gif differ diff --git a/html/html/themes/ipfire-new/images/n6.gif b/html/html/themes/ipfire-new/images/n6.gif new file mode 100644 index 0000000000..ed1781c5ff Binary files /dev/null and b/html/html/themes/ipfire-new/images/n6.gif differ diff --git a/html/html/themes/ipfire-new/images/tux2.png b/html/html/themes/ipfire-new/images/tux2.png new file mode 100644 index 0000000000..cd84ad53d5 Binary files /dev/null and b/html/html/themes/ipfire-new/images/tux2.png differ diff --git a/html/html/themes/ipfire-new/include/colors.txt b/html/html/themes/ipfire-new/include/colors.txt new file mode 100644 index 0000000000..6d7dd1cba9 --- /dev/null +++ b/html/html/themes/ipfire-new/include/colors.txt @@ -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 diff --git a/html/html/themes/ipfire-new/include/css/style.css b/html/html/themes/ipfire-new/include/css/style.css new file mode 100644 index 0000000000..1f1189adff --- /dev/null +++ b/html/html/themes/ipfire-new/include/css/style.css @@ -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; +} diff --git a/html/html/themes/ipfire-new/include/functions.pl b/html/html/themes/ipfire-new/include/functions.pl new file mode 100644 index 0000000000..b644c073d5 --- /dev/null +++ b/html/html/themes/ipfire-new/include/functions.pl @@ -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 . # +# # +############################################################################### +# # +# Theme file for IPfire (based on ipfire theme) # +# Author kay-michael köhler kmk # +# # +# 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 "
    "; + 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 '
  • '; + } else { + print '
  • '; + } + print ''.$submenus->{$item}->{'caption'}.''; + + &showsubmenu($subsubmenus) if ($subsubmenus); + print '
    • '; + } + print "
" +} + +############################################################################### +# +# print menu html elements +sub showmenu() { + print '
    '; + foreach my $k1 ( sort keys %$menu ) { + $link = getlink($menu->{$k1}); + next if (!is_menu_visible($link) or $link eq ''); + print '
  • '.$menu->{$k1}->{'caption'}.''; + my $submenus = $menu->{$k1}->{'subMenu'}; + &showsubmenu($submenus) if ($submenus); + print "
    • "; + } + if ($settings{'SPEED'} ne 'off') { + print"
    "; + print""; + print""; + print"
    Traffic:  In   Out
    "; + print '
'; + } +} + +############################################################################### +# +# 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 < + + + $title + $extrahead + + + + +END +; +if ($settings{'SPEED'} ne 'off') { +print < +END +; +} + +if ($settings{'FX'} ne 'off') { +print < + +END +; +} + +print < + +END +; + +print < +
+ +
+END +; + +&showmenu() if ($suppressMenu != 1); + +print < +
+
+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 +; + +print "
"; +print < + $status Uptime: $uptime +END +; + +print < +
+ + + + +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 +; +if ($caption) { print "

$caption

\n"; } else { print " "; } +} + +############################################################################### +# +# print box closing html layout +sub closebox +{ + print < +
+ +END +; +} + +1; diff --git a/html/html/themes/ipfire-new/include/js/refreshInetInfo.js b/html/html/themes/ipfire-new/include/js/refreshInetInfo.js new file mode 100644 index 0000000000..7ead8330ae --- /dev/null +++ b/html/html/themes/ipfire-new/include/js/refreshInetInfo.js @@ -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); +}