diff options
| -rw-r--r-- | www/Makefile | 3 | ||||
| -rw-r--r-- | www/sample.html | 101 | ||||
| -rw-r--r-- | www/snow/alpine.jpg | bin | 0 -> 4005 bytes | |||
| -rw-r--r-- | www/snow/blutop.png | bin | 0 -> 222 bytes | |||
| -rw-r--r-- | www/snow/edge.jpg | bin | 0 -> 329 bytes | |||
| -rw-r--r-- | www/snow/sel-left.png | bin | 0 -> 540 bytes | |||
| -rw-r--r-- | www/snow/sel-right.png | bin | 0 -> 871 bytes | |||
| -rw-r--r-- | www/snow/selected.png | bin | 0 -> 57716 bytes | |||
| -rw-r--r-- | www/snow/snow.css | 377 | ||||
| -rw-r--r-- | www/snow/un-left.png | bin | 0 -> 316 bytes | |||
| -rw-r--r-- | www/snow/un-right.png | bin | 0 -> 845 bytes | |||
| -rw-r--r-- | www/snow/y-left.png | bin | 0 -> 2862 bytes |
12 files changed, 437 insertions, 44 deletions
diff --git a/www/Makefile b/www/Makefile index 04d3724..0a14df4 100644 --- a/www/Makefile +++ b/www/Makefile @@ -18,7 +18,8 @@ WWW_DIST=cgi-bin/acf\ swirl/header_body.jpg\ swirl/selected.gif\ swirl/swirl.css\ - swirl/unselected.gif + swirl/unselected.gif \ + snow/* EXTRA_DIST=Makefile DISTFILES=$(WWW_DIST) $(EXTRA_DIST) diff --git a/www/sample.html b/www/sample.html index 665334d..e4c9e14 100644 --- a/www/sample.html +++ b/www/sample.html @@ -3,57 +3,66 @@ <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Alpine</title> -<link rel="stylesheet" type="text/css" href="static/webconf.css"> -<meta http-equiv="Refresh" content="5; url=sample.html"> +<link rel="stylesheet" type="text/css" href="snow/snow.css"> </head> -<body> - - - - -<div id=head> -<h1>Alpine</h1> -<p>Host: <em>Inside</em></p> -</div> - - -<div id="mainmenu"> -<h3>Networking</h3> -<ul><a href="foo"><li>Interfaces</li></a> -<li id="selected"><a href="bar">Routes</a></li> -<li><a href="bar">DNS Cache</a></li> -<li><a href="bar">DNS Server</a></li> -<li><a href="bar">Firewall</a></li> -</ul> -<h3>VPN</h3> -<ul> -<li><a href="foo">IPSec</a></li> -<li><a href="bar">OpenVPN</a></li> -<li><a href="bar">Tinc</a></li> -</ul> -<h3>Application Proxy</h3> -<ul> -<li><a href="foo">DNS Proxy</a></li> -<li><a href="bar">Fetchmail</a></li> -<li><a href="bar">Squid</a></li> -</ul> -</div> -<div id="submenu"> -<h2>Networking > Routes</h2> -<ul><li><a href="foo">Status</a></li> -<li id="selected">Interfaces</li> -<li><a href="fee">Expert</a></li> -</ul> +<body> +<div id=header> + <a href="#Content" class="hide">[Skip to main content]</a> + <h1 class="logo">AlpineLinux</h1> + <div class="leader">[ this is h-leader div text <a href="#Content">Goto content</a>]</div> + <p>This is plain old Head div text</p> </div> +<div id="main"> + <div id="nav"> + <ul><li>Networking + <ul><a href=""><li>Interfaces</li></a> + <a href=""><li>Firewall</li></a> + <a href=""><li>BGP</li></a> + <a href=""><li>DHCP Server</li></a> + <a href=""><li>Ipsec VPN</li></a> + </ul></li> + <li>Applications + <ul><li><a href="">Web Proxy</a></li> + <li><a href="">Content Filter</a></li> + <li><a href="">Fetchmail</a></li> + <li><a href="">Certificate Authority</a></li> + </ul></li> + <li>System + <ul><li><a href="">Backup</a></li> + <li><a href="">Package Management</a></li> + <li><a href="">General Health</a></li> + <li><a href="">System Logs</a></li> + <li><a href="">SNMP</a></li> + </ul></li> + </ul> + </div> + + <div class="postnav"> + <h2>Networking : Interfaces</h2> + <p>[ welcome ] > [ login ] > [ bgp ] > [ firewall ] > [ content filter ] > [ interfaces ]</p> + </div> + <a name="Content"></a> + <div id="subnav"> + <a href="">Nav 1</a> + <strong class=selected>Nav 2</strong> + <a href="">Nav 3</a> + </div> + + <div id="content"> + + + + <p> +This is plain old content +</p> -<div id="content"> <h1>Errors</h1> <p class="error">This is error text. As if you didn't know that. Just check the errors below.</p> - +<p class="hide">This is some plain content level hide text</p> <p>This is a page with a <a href="foo">link</a> in it.</p> <h1>Networking - Status</h1> @@ -94,9 +103,15 @@ the page you want. Evenutally, you'll see the page you want. But not quite yet <p>Bring Service Down</p> <p>Bring Service Up</p> </div> +</div> + +<div id=c-trailer>This is c-trailer</div> <div id="footer"> -<p><center>Made with care by webconf</center></p> + <div id="f-leader">F leader</div> + <p>Made with care by webconf</p> + <div id="f-nav">F nav</div> + <div id="f-trailer">F trailer</div> </div> </body> </html> diff --git a/www/snow/alpine.jpg b/www/snow/alpine.jpg Binary files differnew file mode 100644 index 0000000..c792250 --- /dev/null +++ b/www/snow/alpine.jpg diff --git a/www/snow/blutop.png b/www/snow/blutop.png Binary files differnew file mode 100644 index 0000000..10d6f3e --- /dev/null +++ b/www/snow/blutop.png diff --git a/www/snow/edge.jpg b/www/snow/edge.jpg Binary files differnew file mode 100644 index 0000000..3620801 --- /dev/null +++ b/www/snow/edge.jpg diff --git a/www/snow/sel-left.png b/www/snow/sel-left.png Binary files differnew file mode 100644 index 0000000..d339f85 --- /dev/null +++ b/www/snow/sel-left.png diff --git a/www/snow/sel-right.png b/www/snow/sel-right.png Binary files differnew file mode 100644 index 0000000..672ab3d --- /dev/null +++ b/www/snow/sel-right.png diff --git a/www/snow/selected.png b/www/snow/selected.png Binary files differnew file mode 100644 index 0000000..4edbaa4 --- /dev/null +++ b/www/snow/selected.png diff --git a/www/snow/snow.css b/www/snow/snow.css new file mode 100644 index 0000000..c71fd21 --- /dev/null +++ b/www/snow/snow.css @@ -0,0 +1,377 @@ +/* "Snow" - a css for Alpine Configuration Framework - N. Angelacos 2007 - GPL2 */ + + +/* Default definitions */ +body { + margin: 0px 0px 0px 0px; + padding: 0px 0px 0px 0px; + background: url("alpine.jpg") no-repeat; + background-position: top center; + font-family: Helvetica, Geneva, Arial, SunSans-Regular, + sans-serif, Verdana, "Trebuchet MS"; +} + +.hide { + display: none; + } + +#page { + position: relative; + left: 0px; + top: 0px; +} + +a { + text-decoration:none; + color: #072966; +} +a:visited { + color: #072966; +} +a:hover { + color: red; +} +input { + border: 1px solid #ccc; +} +hr { + background-color: #ff9933; + height: 3px; +} +.error { + height: 0px; + font-size: 11pt; + font-weight: bold; + color: #f33; +} + +/*---------------------------------------------------------------------------------- + * Header, h-leader, h-nav, h-trailer + *---------------------------------------------------------------------------------- + */ +#header { + position: relative; + margin: 0px 0px 0px 0px; + padding: 0px 0px 0px 0px; + // height: 75px; + // background: url("alpine.jpg") no-repeat; + // background-position: top center; + border: 1px solid #f00; +} + +#header .logo { + float: left; + width: 30%; + background-color: #0c0; + display: inline; + } + +#header h1 { + font-size: 100%; + display: inline; + } + +#header .leader { + padding: 0.5em; + font-size: 60%; + float: right; + display: inline; + } + + +/*---------------------------------------------------------------------------------- + * Content and main menu + *---------------------------------------------------------------------------------- + */ + +/* DEFAULT DEFINITIONS */ +#main { /* 'content' is both the wrapper and the navmenu */ + position: relative; + padding: 0px 0px 0px 0px; + margin: 0px 0px 0px 0px; + // margin: 0% 10% 0% 10%; + // clear: both; + border: 1px solid #00c; +} + +/* The .nav class is taken from suckerfish css dropdowns + see http://www.alistapart.com/articles/dropdowns/ */ +#nav { + height: auto; + float: right; + width: 70%; + display: inline; + background-color: #ccc; + font-size: 75%; + font-weight: bold; + } + +#nav ul { /* all lists */ + padding: 0; + margin: 0; + list-style: none; + line-height: 1; +} + +#nav a { + display: block; + padding: .25em; + width: 19em; +} + +#nav li { /* all list items */ + float: left; + border-left: 2px solid #fff; + border-right: 2px solid #fff; + padding: 0em 1em 0em 0.25em; + // width: 10em; /* width needed or else Opera goes nuts */ +} + +#nav li ul { /* second-level lists */ + position: absolute; + // background-image: url("blutop.png"); + background: transparent; + border: none; + width: 20em; + left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ +} + +#nav li ul ul { /* third-and-above-level lists */ + margin: -1em 0 0 20em; +} +#nav li ul li { + border: none; + } + +#nav li:hover ul ul, #c-nav li:hover ul ul ul, #c-nav li.sfhover ul ul, #c-nav li.sfhover ul ul ul { + left: -999em; +} +#nav li:hover ul, #c-nav li li:hover ul, #c-nav li li li:hover ul, #c-nav li.sfhover ul, #c-nav li li.sfhover ul, #c-nav li li li.sfhover ul { /* lists nested under hovered list items */ + left: auto; + background: url("y-left.png") no-repeat #fff; + border-left: 1px solid #ccf; + border-top: 1px solid #aaa; + border-bottom: 1px solid #ccf; + } + +#nav a:hover { + background: url("blutop.png") repeat-x #ccf; + // color: #222; + } +/* End suckerfish */ + +#main .leader { + display: block; + clear: both; + width: 100%; + } + +#main .postnav { + clear: both; + margin: 0% 10% 0% 10%; + padding: 0; + // padding: .5em .5em; + display: block; + font-size: 75%; + background: url("blutop.png") repeat-x; + } + +#main .postnav h2 { + padding: .5em 0em 0em .5em; + color: #ccd; + display: inline; + clear: both; + } + +#content { + margin: 0% 10% 0% 10%; + padding: 0em .5em; + border: 1px solid #ccc; + clear: both; + } + + +#main h1 { + display: block; + clear: both; + width: 100%; + } + +#subnav { + width: 100%; + margin: 0% 10% 0% 10%; + //font-size: 60%; + font-weight: bold; + clear:both; + line-height: 1; + } + +#subnav a { + display: inline; + padding: .25em .25em 0 .25em; + border: 1px solid #ccccff; + border-bottom: none; + background: url("blutop.png") repeat-x top; + color: #fff; + background-color: #aaa; + } +#subnav a:hover { + color: #666; + background-color: #ddd; + } + +#subnav .selected { + background: #fff; + } + +#subnav strong { + background: #fff; + border: 1px solid #ccccff; + padding: .25em .25em 0 .25em; + border-bottom:none; + color: #446; + } + +#subnav .selected a { + // background: url("sel-left.png") no-repeat top left; + } + + +/* CONTENT/WRAPPER */ +#wrapper { /* 'wrapper' is the area where you display the interesting things */ + position: absolute; + top: 20px; + right: 0px; + width: 560px; + font-size: 12px; +} + +#background-wrapper { + padding: 0px 0px 0px 0px; + margin: 0px 0px 0px 0px; + background-image: url(watermark.jpg); + background-repeat: no-repeat; + background-position:200px 50px; +} + +#wrapper h1 { + clear: both; + height: 18px; + padding: 2px 0px 0px 5px; + margin: 0px 0px 2px -20px; + text-decoration: none; + font-size: 14px; + font-weight: bold; + white-space: nowrap; + overflow: hidden; + border-bottom: 1px solid #cacaca; + border-top: px solid #ccc; + background-image: url(h1.png); + color: #5c7b99; +} + +#wrapper h2 { + clear: both; + height: 18px; + padding: 2px 0px 0px 10px; + margin: 0px 0px 2px -20px; + text-decoration: none; + font-size: 14px; + font-weight: bold; + white-space: nowrap; + overflow: hidden; + border-bottom: 1px solid #cacaca; + border-top: 1px solid #ccc; + background-image: url(h2.png); + color: #5c7b99; +} +#wrapper h3 { + clear: both; + height: 14px; + padding: 0px 0px 0px 15px; + margin: 0px 0px 2px -20px; + text-decoration: none; + font-size: 12px; + font-weight: thin; + white-space: nowrap; + overflow: hidden; + border-bottom: 1px solid #cacaca; + border-top: 1px solid #ccc; + background-image: url(h3.png); + color: #5c7b99; +} + +#wrapper p { + clear: both; +} + +#wrapper dt { + float: left; + clear: both; + width: 200px; + color: #000; + font-size: 12px; + text-align: left; + margin: 0px 5px 0px 0px; + padding: 5px 0px 5px 0px; + border-top: 1px solid #ddd; + font-weight: bold; +} + +#wrapper dd { + float: left; + width: 350px; + + color: #444; + font-size: 12px; + margin: 0px 0px 0px 5px; + padding: 5px 0px 0px 0px; + font-weight: light; +} + +#wrapper textarea { + width: 99%; + height: 300px; + border-right: 1px solid #cacaca; + border-bottom: 1px solid #cacaca; +} +#wrapper form { + display: inline; +} + +#wrapper dd select { + width: 247px; + border-right: 1px solid #cacaca; + border-bottom: 1px solid #cacaca; +} + +#wrapper .submit { + width: 100px; + border-right: 1px solid #cacaca; + border-bottom: 1px solid #cacaca; + background: #eee; +} +#wrapper .text { + width: 245px; + border-right: 1px solid #cacaca; + border-bottom: 1px solid #cacaca; + background: white; +} +#wrapper table { + width: 99%; +} + +/* FOOTER */ +#footer { + clear: both; + border-top: 1px solid #d6d6d6; + position: relative; + width: 100%; + padding-top: 5px; + margin-top: 15px; + margin-bottom: 10px; + font-size: 10px; + text-align: left; + color: #aaa; +} + diff --git a/www/snow/un-left.png b/www/snow/un-left.png Binary files differnew file mode 100644 index 0000000..1f4f252 --- /dev/null +++ b/www/snow/un-left.png diff --git a/www/snow/un-right.png b/www/snow/un-right.png Binary files differnew file mode 100644 index 0000000..e5d0018 --- /dev/null +++ b/www/snow/un-right.png diff --git a/www/snow/y-left.png b/www/snow/y-left.png Binary files differnew file mode 100644 index 0000000..08cf5e9 --- /dev/null +++ b/www/snow/y-left.png |
