redesigned web pages
authorJean-Philippe Orsini <jeanfi@gmail.com>
Tue, 11 Feb 2014 17:45:16 +0000 (17:45 +0000)
committerJean-Philippe Orsini <jeanfi@gmail.com>
Tue, 11 Feb 2014 17:45:16 +0000 (17:45 +0000)
css consistent with website

www/Makefile.am
www/Makefile.in
www/details.html
www/index.html
www/monitor.html [deleted file]
www/psensor.js
www/style.css

index de61dcf..17dca21 100644 (file)
@@ -4,7 +4,6 @@ defaultwww_DATA = \
        index.html \
         excanvas.js \
        favicon.ico \
-       monitor.html \
        psensor.js \
        jqplot.dateAxisRenderer.js \
        jqplot.css \
index ce82eb6..9a2f2f0 100644 (file)
@@ -257,7 +257,6 @@ defaultwww_DATA = \
        index.html \
         excanvas.js \
        favicon.ico \
-       monitor.html \
        psensor.js \
        jqplot.dateAxisRenderer.js \
        jqplot.css \
index 3dabb65..56cb972 100644 (file)
@@ -3,10 +3,6 @@
     <meta charset="utf-8">
     <title id="title">Sensor </title>
 
-    <link type="text/css"
-         rel="stylesheet"
-href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
-
     <link href="jqplot.css" rel="stylesheet" type="text/css"/> 
     <link href="style.css" rel="stylesheet" type="text/css"/>  
 
@@ -44,21 +40,23 @@ href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
     </script>
   </head>
   <body>
+
+    <div id="page">
       <div id="menu">
        <ul id="menu-list">
-         <li><em><a href="monitor.html">All</a></em></li>
+         <li><a href="index.html">Summary</a></li>
        </ul>
       </div>
       
       <div id="main">
        <h1></h1>
        
-       <div class="chart" id="chart"></div>
-       
+       <div class="chart" id="chart"></div>    
       </div>
       
       <div id="footer">
        Generated by <a href='http://wpitchoune.net/psensor'>psensor-server</a>
       </div>
+    </div>
   </body>
 </html>
index 4c57443..722024d 100644 (file)
 <html>
   <head>
-    <title>Psensor Server</title>
-    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
+    <meta charset="utf-8">
+    <title>Psensor Server Monitoring</title>
+
     <link type="text/css" href="style.css" rel="stylesheet" /> 
+    <script type="text/javascript" src="jquery.js"></script>
+    <script type="text/javascript" src="psensor.js"></script>
+    <script>  
+       $(document).ready(function() {          
+               update_menu();
+
+               update_summary_sensors();
+               update_summary_sysinfo();      
+
+               $(document).ready(function() {
+                       setInterval(function() {
+                               update_summary_sensors();
+                               update_summary_sysinfo();
+                       }, 5000);
+               });
+         
+
+      });
+    </script>
   </head>
   <body>
 
-    <div class='page'>
-      <div class='page-header'>
-       <h1>Psensor Server</h1>
+    <div id="page">
+      <div id="menu">
+       <ul id="menu-list">
+         <li><a href="index.html">Summary</a></li>
+       </ul>
       </div>
       
-      <div class='page-content'>
-       <p>Go to the <a href='monitor.html'>Monitoring page</a></p>
+      <div id="main">
+       <h1>System Monitoring</h1>
+       
+       <p><em>Uptime</em>: <span id='uptime'></span></p>
+       
+       <h2><a name="cpu">CPU</a></h2>
+       
+       <table id='cpu'>
+         <thead>
+           <tr>
+             <th>Current usage</th>
+             <th>Load 1mn</th>
+             <th>Load 5mn</th>
+             <th>Load 15mn</th>
+           </tr>
+         </thead>
+         <tbody></tbody>
+       </table>
        
+       <h2><a name="memory">Memory</a></h2>
+       
+       <table>
+         <thead>
+           <tr>
+             <th></th>
+             <th>Total</th>
+             <th>Used</th>
+             <th>Free</th>
+             <th>Shared</th>
+             <th>Buffer</th>
+           </tr>
+         </thead>
+         <tbody>
+           <tr id='memory'></tr>
+           <tr id='swap'></tr>
+         </tbody>
+       </table>
+       
+       <h2><a name="network">Network</a></h2>
+       
+       <table id='net'>
+         <thead>
+           <tr>
+             <th>Interface</th>
+             <th>Bytes In</th>
+             <th>Bytes Out</th>
+           </tr>
+         </thead>
+         <tbody>
+         </tbody>
+       </table>
+       
+       <h2><a name="sensors">Sensors</a></h2>
+       
+       <table id='sensors'>
+         <thead>
+           <tr>
+             <th>Name</th>
+             <th>Value</th>
+             <th>Min</th>
+             <th>Max</th>
+             <th>Type</th>
+           </tr>
+         </thead>
+         <tbody id ="sensors"></tbody>
+       </table>
+      </div>
+      
+      <div id="footer">
+       Generated by <a href='http://wpitchoune.net/psensor'>psensor-server</a>
       </div>
     </div>
-    
-    <div id="footer">Generated by <a href='http://wpitchoune.net/psensor'>psensor-server</a></div>
   </body>
 </html>
diff --git a/www/monitor.html b/www/monitor.html
deleted file mode 100644 (file)
index 04d5303..0000000
+++ /dev/null
@@ -1,111 +0,0 @@
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Psensor Server Monitoring</title>
-
-    <link type="text/css"
-         rel="stylesheet"
-href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
-
-    <link type="text/css" href="style.css" rel="stylesheet" /> 
-    <script type="text/javascript" src="jquery.js"></script>
-    <script type="text/javascript" src="psensor.js"></script>
-    <script>  
-       $(document).ready(function() {          
-               update_menu();
-
-               update_summary_sensors();
-               update_summary_sysinfo();      
-
-               $(document).ready(function() {
-                       setInterval(function() {
-                               update_summary_sensors();
-                               update_summary_sysinfo();
-                       }, 5000);
-               });
-         
-
-      });
-    </script>
-  </head>
-  <body>
-
-    <div id="menu">
-      <ul id="menu-list">
-       <li><em><a href="monitor.html">All</a></em></li>
-      </ul>
-    </div>
-      
-    <div id="main">
-      <h1>System Monitoring</h1>
-      
-      <p><em>Uptime</em>: <span id='uptime'></span></p>
-      
-      <h2>CPU</h2>
-      
-      <table id='cpu'>
-       <thead>
-         <tr>
-           <th>Current usage</th>
-           <th>Load 1mn</th>
-           <th>Load 5mn</th>
-           <th>Load 15mn</th>
-         </tr>
-       </thead>
-       <tbody></tbody>
-      </table>
-      
-      <h2>Memory</h2>
-      
-      <table>
-       <thead>
-         <tr>
-           <th></th>
-           <th>Total</th>
-           <th>Used</th>
-           <th>Free</th>
-           <th>Shared</th>
-           <th>Buffer</th>
-         </tr>
-       </thead>
-       <tbody>
-       <tr id='memory'></tr>
-       <tr id='swap'></tr>
-       </tbody>
-      </table>
-      
-      <h2>Network</h2>
-      
-      <table id='net'>
-       <thead>
-         <tr>
-           <th>Interface</th>
-           <th>Bytes In</th>
-           <th>Bytes Out</th>
-         </tr>
-       </thead>
-       <tbody>
-       </tbody>
-      </table>
-      
-      <h2>Sensors</h2>
-      
-      <table id='sensors'>
-       <thead>
-         <tr>
-           <th>Name</th>
-           <th>Value</th>
-         <th>Min</th>
-           <th>Max</th>
-           <th>Type</th>
-         </tr>
-       </thead>
-      <tbody id ="sensors"></tbody>
-      </table>
-    </div>
-
-    <div id="footer">
-      Generated by <a href='http://wpitchoune.net/psensor'>psensor-server</a>
-    </div>
-  </body>
-</html>
index 6f4ef7e..3e90285 100644 (file)
@@ -169,8 +169,17 @@ function update_menu() {
     str = "";
 
     $.getJSON("/api/1.1/sensors", function(data) {
-       str += "<li><em>Sensors</em>\n<ul>";
+       str += "<li><a href=\"index.html#cpu\">CPU</a><ul>";
+       url = "details.html?id="+escape("/api/1.1/cpu/usage");
+       link = "<a href='"+url+"'>usage</a>";
+       str += "<li>"+link+"</li>";
+       str += "</li></ul>";    
 
+       str += "<li><a href=\"index.html#network\">Network</a></li>";
+
+       str += "<li><a href=\"index.html#memory\">Memory</a></li>";
+
+       str += "<li><a href=\"index.html#sensors\">Sensors</a>\n<ul>";
        $.each(data, function(i, item) {
             name = item["name"];
            url = "details.html?id="+escape("/api/1.1/sensors/"+item["id"]);
@@ -178,13 +187,6 @@ function update_menu() {
            str += "<li>"+link+"</li>";
        });
        str += "</li></ul>";
-
-       str += "<li><em>CPU</em><ul>";
-       url = "details.html?id="+escape("/api/1.1/cpu/usage");
-       link = "<a href='"+url+"'>usage</a>";
-       str += "<li>"+link+"</li>";
-       
-       str += "</li></ul>";
        
        $("#menu-list").append(str);
 
index 456a739..865c3d2 100644 (file)
+
 body {
-    padding: 1em 1em 1em 1em;
-    font-family: "Ubuntu", sans-serif;
-    font-size: 100%;
-    font-style: normal;
-    font-weight: normal;
-    color: #000;
-    background-color: #fff;
-    margin: 0 0 0 0;
+    background: #e2e2e2;
+    color: #333333;
+    font-family: Ubuntu,Arial,sans-serif;
+    line-height: 1.6;
+    font-weight: lighter;
+    margin: 1em 2em 2em 2em;
+    padding: 0 0 0 0;
 }
 
-a {
-    color: #1982D1;
-    font-style: normal;
-    text-decoration: none;
+h1 {
+    font-size: 2.813em;
+    margin: 0 0 0.267em 0;
+    padding: 0 0 0 0;
+    font-weight: normal;
 }
 
-a:hover {
-    text-decoration: underline;
+h2 {
+    font-size: 2em;
+    margin: 0 0 0.375em;
+    padding: 0 0 0 0;
+    font-weight: normal;
 }
 
-h1 {
-    font-size: 140%;
-    font-style: normal;
-    font-weight: bold;
-    text-transform: uppercase;
-    margin: 0 0 1em 0;
+h3 {
+    font-size: 1.438em;
+    margin: 0 0 0.522em;
     padding: 0 0 0 0;
+    font-weight: normal;
 }
 
+h4 {
+    font-size: 1.219em;
+    margin: 0 0 0.615em;
+    padding: 0 0 0 0;
+    font-weight: normal;
+}
 
-h2, #toctitle{
-    font-size: 110%;
-    font-style: normal;
+h5 {
+    font-size: 1em;
+    margin: 0 0 0.75em;
+    padding: 0 0 0 0;
     font-weight: bold;
+}
+
+h6 {
+    font-weight: normal;
+    font-size: 0.813em;
+    letter-spacing: 0.1em;
+    margin: 0 0 0.923em;
     text-transform: uppercase;
-    margin: 2em 0em 1em 0em;
     padding: 0 0 0 0;
 }
 
-#footer {
-    padding-top: 2em;
-    color: #666;
-    clear: both;
-    text-align: right;
-    font-size: 75%;
+li {
+    margin: 0 0 0 1em;
+    line-height: 1.6;
 }
 
-p {
-    font-size: 100%;
-    margin-bottom: 8px;
+li p {
+    margin: 0 0 0 0;
 }
 
-table {
-    text-align: left;
+ul {
+    margin: 0 0 0 0;
     padding: 0 0 0 0;
-    min-width: 50%;
-    border-spacing: 0;
-    border: 0;
 }
 
-thead {
-    background-color: #000;
-    color: #fff;
-    padding: 0 0 0 0;    
+a:link, a:visited {
+    color: #19B6EE;
+    text-decoration: none;
 }
 
-tbody {
-    padding: 0 0 0 0;
+a:hover {
+    text-decoration: underline;
 }
 
-th {
-    padding: 0.25em 0.5em 0.25em 0.5em;
-    font-style: normal;
+code, pre, tt {
+    font-family: "Ubuntu Mono","Courier New",Courier,monospace;
     font-weight: normal;
+    color: #333333;
 }
 
-td {
-    padding: 0.25em 0.25em 0em 0.25em;
+pre {
+    background: none repeat scroll 0 0 #e0e0e0;
+    border-radius: 4px;
+    padding: 0.5em 0.5em;
+    margin: 0 0 0 0;
+    white-space: pre-wrap;
+    word-wrap: break-word;
 }
 
-#chart {
-    color: #000;
-    font-style: normal;
-    font-weight: normal;
+table {
     width: 100%;
-    height: 300px;
-}
-
-ul#menu-list li {
-    list-style: none;
+    text-align: left;
 }
 
-#menu-list {
-    padding: 0 0 0 0;
+#footer {
     margin: 0 0 0 0;
+    font-size: 0.8em;
+    font-weight: lighter;
+    clear: both;
+    text-align: right;
 }
 
-#menu {
-    float: left;
-    width: 20%;
-    padding: 0 0 0 0;
+#page {
     margin: 0 0 0 0;
+    padding: 0 0 0 0;
 }
 
 #main {
-    float: right;
-    width: 80%;
-    padding: 0 0 0 0;
-    margin: 0 0em 0 0;
-}
+    background: #ffffff;
 
-em {
-    font-weight: bold;
-    font-style: normal;
+   -moz-box-sizing: border-box;
+
+    padding: 2em 2em 2em 2em;
+
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    
+    -webkit-box-shadow: 0 2px 2px 0 #C2C2C2;
+    box-shadow: 0 2px 2px 0 #C2C2C2;
 }
 
-#uptime {
-    font-weight: normal;
+#menu {
+    background: #ffffff;
+   -moz-box-sizing: border-box;
+    padding: 2em 2em 2em 2em;
+
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    
+    -webkit-box-shadow: 0 2px 2px 0 #C2C2C2;
+    box-shadow: 0 2px 2px 0 #C2C2C2;
 }
 
-#menu-list em {
-    text-transform: uppercase;
+#menu-list, #menu-list > li > ul  {
+    list-style-type: none;
 }
 
-#menu ul li {
-    padding-bottom: 1em;
+/* menu on left col, content on right col */
+
+#menu {
+    float: left;
+    width: 18%;
 }
 
-#menu-list ul li {
-    padding: 0 0 0 0em;
+#main {
+    float: right;
+    width: 80%;
 }
 
+/* asciidoc */
+
+#toc, #content {
+    margin: 0em 0em 2em 0em;
+    
+    background: #ffffff;
+   -moz-box-sizing: border-box;
+    padding: 2em 2em 2em 2em;
+
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    
+    -webkit-box-shadow: 0 2px 2px 0 #C2C2C2;
+    box-shadow: 0 2px 2px 0 #C2C2C2;
+}
\ No newline at end of file