Advertisement
rdsedmundo

arduino.final

Oct 16th, 2015
138
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.23 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang='pt-br'>
  3. <head>
  4.   <meta charset='utf-8'>
  5.   <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
  6.   <meta name='viewport' content='width=device-width, initial-scale=1'>
  7.   <meta name='author' content='edmundo-r@ufmg.br; Raul Julian; Daniel Marchesotti'>
  8.  
  9.   <title>Arduino</title>
  10.  
  11.   <style rel='reset' type='text/css'>
  12.     a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
  13.   </style>
  14.  
  15.   <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css' rel='stylesheet' />
  16.   <link href='http://bootswatch.com/flatly/bootstrap.min.css' rel='stylesheet' />
  17.  
  18.   <style media='screen'>
  19.     h1 {
  20.       text-align: center;
  21.       position: relative;
  22.     }
  23.  
  24.     h1:after {
  25.       position: absolute;
  26.       left: 0;
  27.       bottom: -15px;
  28.       content: '';
  29.       width: 100%;
  30.       height: 1px;
  31.       border-bottom: thin solid #C9C9C9;
  32.     }
  33.  
  34.     button {
  35.       display: block;
  36.       margin: 0 auto;
  37.       background-color: #18BC9C;
  38.       padding: 10px;
  39.       color: #FFFFFF;
  40.       border: initial;
  41.       border-radius: 10px;
  42.       width: 100%;
  43.  
  44.       -webkit-transition: all 0.3s ease-in-out;
  45.       -moz-transition: all 0.3s ease-in-out;
  46.       -o-transition: all 0.3s ease-in-out;
  47.       transition: all 0.3s ease-in-out;
  48.     }
  49.  
  50.     button:hover {
  51.       color: #18BC9C;
  52.       background-color: rgba(235, 235, 235, 1.0);
  53.     }
  54.  
  55.     .row:not(:first-of-type) {
  56.       margin-top: 30px;
  57.     }
  58.  
  59.     .spec {
  60.       text-align: right;
  61.     }
  62.  
  63.     footer p {
  64.       font-size: 12px;
  65.       color: #A7A7A7;
  66.     }
  67.   </style>
  68. </head>
  69. <body>
  70.   <div class='container-fluid'>
  71.     <div class='row'>
  72.       <div class='col-xs-offset-2 col-xs-8'>
  73.         <h1>Arduino</h1>
  74.       </div>
  75.     </div>
  76.  
  77.     <div class='row'>
  78.       <div class='col-xs-offset-2 col-xs-3'>
  79.         <div>
  80.           <strong>Temperatura atual</strong>
  81.           <div>
  82.             ??? <span class='unit'>ºC</span>
  83.           </div>
  84.         </div>
  85.         <div><strong>Temperatura mínima</strong> <div>???<span class='unit'>ºC</span></div></div>
  86.         <div><strong>Temperatura máxima</strong> <div>???<span class='unit'>ºC</span></div></div>
  87.       </div>
  88.  
  89.       <div class='col-xs-offset-2 col-xs-3 spec'>
  90.         <div><strong>Umidade atual</strong> <div>???<span class='unit'>%</span></div></div>
  91.         <div><strong>Umidade mínima</strong> <div>???<span class='unit'>%</span></div></div>
  92.         <div><strong>Umidade máxima</strong> <div>???<span class='unit'>%</span></div></div>
  93.       </div>
  94.     </div>
  95.  
  96.     <div class='controllers row'>
  97.       <div class='col-xs-offset-2 col-xs-8'>
  98.         <button onclick='location.href='?control=1''>Ativar Sistema de Segurança</button>
  99.       </div>
  100.     </div>
  101.  
  102.     <div class='data row'>
  103.       <div class='col-xs-offset-2 col-xs-4'>
  104.         <table class='table table-bordered table-striped'>
  105.           <thead>
  106.             <tr>
  107.               <th>#</th>
  108.               <th>Temperatura</th>
  109.             </tr>
  110.           </thead>
  111.           <tbody>
  112.             <tr>
  113.               <td>1</td>
  114.               <td>25.0ºC</td>
  115.             </tr>
  116.             <tr>
  117.               <td>1</td>
  118.               <td>25.0ºC</td>
  119.             </tr>
  120.             <tr>
  121.               <td>1</td>
  122.               <td>25.0ºC</td>
  123.             </tr>
  124.             <tr>
  125.               <td>1</td>
  126.               <td>25.0ºC</td>
  127.             </tr>
  128.             <tr>
  129.               <td>1</td>
  130.               <td>25.0ºC</td>
  131.             </tr>                                                
  132.           </tbody>
  133.         </table>
  134.       </div>
  135.  
  136.       <div class='col-xs-offset-0 col-xs-4'>
  137.         <table class='table table-bordered table-striped'>
  138.           <thead>
  139.             <tr>
  140.               <th>#</th>
  141.               <th>Umidade</th>
  142.             </tr>
  143.           </thead>
  144.           <tbody>
  145.             <tr>
  146.               <td>1</td>
  147.               <td>25.0ºC</td>
  148.             </tr>
  149.             <tr>
  150.               <td>1</td>
  151.               <td>25.0ºC</td>
  152.             </tr>
  153.             <tr>
  154.               <td>1</td>
  155.               <td>25.0ºC</td>
  156.             </tr>
  157.             <tr>
  158.               <td>1</td>
  159.               <td>25.0ºC</td>
  160.             </tr>
  161.             <tr>
  162.               <td>1</td>
  163.               <td>25.0ºC</td>
  164.             </tr>
  165.           </tbody>
  166.         </table>
  167.       </div>      
  168.     </div>
  169.  
  170.     <footer class='row'>
  171.       <div class='col-xs-offset-2 col-xs-8'>
  172.         <p>&copy 2014-2015 OCS-1/2.</p>
  173.      </div>
  174.    </footer>
  175.  </div>
  176. </body>
  177. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement