From 1cb93ef7873f352ac9d21772eeed8d43aad7be52 Mon Sep 17 00:00:00 2001 From: luc Date: Wed, 19 Aug 2015 15:28:32 +0800 Subject: [PATCH] Modify css to be embedded in pages Decrease restart time as now css is embedded Change HTML code according new css Known issue menu bar is not optimized for small screen as bootstrap is, so need to scroll vertically and horizontally Fix issue with \b instead of \n Change Version to 0.3 --- esp8266/config.h | 2 +- esp8266/webinterface.cpp | 161 ++++++++++++++++++++++++++++----------- 2 files changed, 116 insertions(+), 47 deletions(-) diff --git a/esp8266/config.h b/esp8266/config.h index 816c86fe..01acb39a 100644 --- a/esp8266/config.h +++ b/esp8266/config.h @@ -39,7 +39,7 @@ extern "C" { #include "user_interface.h" } //version and sources location -#define FW_VERSION "V0.2" +#define FW_VERSION "V0.3" #define REPOSITORY "https://github.com/luc-github/ESP8266" diff --git a/esp8266/webinterface.cpp b/esp8266/webinterface.cpp index 7238eccc..841ffa5b 100644 --- a/esp8266/webinterface.cpp +++ b/esp8266/webinterface.cpp @@ -33,60 +33,84 @@ extern "C" { #ifdef SSDP_FEATURE #include #endif -const char CSS[] PROGMEM = "html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}body{margin:0;}main,menu,nav,summary{display:block;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}h1{margin:.67em 0;font-size:2em;}img{border:0;}svg:not(:root){overflow:hidden;}hr{height:0;-webkit-box-sizing:content-box; -moz-box-sizing:content-box;box-sizing:content-box;}button,input,select{margin:0;font:inherit;color:inherit;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type=\nbutton\n],input[type=\nreset\n],input[type=\nsubmit\n]{-webkit-appearance:button;cursor:pointer;}input{line-height:normal;}input[type=\ncheckbox\n],input[type=\nradio\n]{-webkit-box-sizing:border-box; -moz-box-sizing:border-box;box-sizing:border-box;padding:0;}input[type=\nnumber\n]::-webkit-inner-spin-button,input[type=\nnumber\n]::-webkit-outer-spin-button{height:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box;box-sizing:border-box;}*:before,*:after{-webkit-box-sizing:border-box; -moz-box-sizing:border-box;box-sizing:border-box;}html{font-size:10px;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}"\ -"body{font-family:\nHelvetica Neue\n, Helvetica, Arial, sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff;}input,button,select,a{color:#337ab7;text-decoration:none;}a:hover,a:focus{color:#23527c;text-decoration:underline;}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}img{vertical-align:middle;}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee;}[role=\nbutton\n]{cursor:pointer;}h1,h3,.h1,.h3{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;}h1,.h1,h3,.h3{margin-top:20px;margin-bottom:10px;}h1,.h1{font-size:36px;}h3,.h3{font-size:24px;}p{margin:0 0 10px;}@media (min-width:768px){.lead{font-size:21px;}}.text-left{text-align:left;}.text-right{text-align:right;}.text-center{text-align:center;}.text-primary{color:#337ab7;}.text-success{color:#3c763d;}.text-info{color:#31708f;}.page-header{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eee;}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media (min-width:768px){.container{width:750px;}}@media (min-width:992px){.container{width:970px;}}@media (min-width:1200px){.container{width:1170px;}}.row{margin-right:-15px;margin-left:-15px;}"\ -"table{background-color:transparent;}caption{padding-top:8px;padding-bottom:8px;color:#777;text-align:left;}th{text-align:left;}.table{width:100%;max-width:100%;margin-bottom:20px;}.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd;}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd;}.table>caption + thead>tr:first-child>th,.table>colgroup + thead>tr:first-child>th,.table>thead:first-child>tr:first-child>th,.table>caption + thead>tr:first-child>td,.table>colgroup + thead>tr:first-child>td,.table>thead:first-child>tr:first-child>td{border-top:0;}.table>tbody + tbody{border-top:2px solid #ddd;}.table .table{background-color:#fff;}.table-bordered{border:1px solid #ddd;}.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td,.table-bordered>tfoot>tr>td{border:1px solid #ddd;}.table-bordered>thead>tr>th,.table-bordered>thead>tr>td{border-bottom-width:2px;}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9;}.table-hover>tbody>tr:hover{background-color:#f5f5f5;}"\ -"table col[class*=\ncol-\n]{position:static;display:table-column;float:none;}table td[class*=\ncol-\n],table th[class*=\ncol-\n]{position:static;display:table-cell;float:none;}.table>thead>tr>td.active,.table>tbody>tr>td.active,.table>tfoot>tr>td.active,.table>thead>tr>th.active,.table>tbody>tr>th.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>tbody>tr.active>td,.table>tfoot>tr.active>td,.table>thead>tr.active>th,.table>tbody>tr.active>th,.table>tfoot>tr.active>th{background-color:#f5f5f5;}.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover,.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr.active:hover>th{background-color:#e8e8e8;}label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:bold;}input[type=\nradio\n],input[type=\ncheckbox\n]{margin:4px 0 0;margin-top:1px;line-height:normal;}input[type=\nfile\n]{display:block;}input[type=\nrange\n]{display:block;width:100%;}input[type=\nfile\n]:focus,input[type=\nradio\n]:focus,input[type=\ncheckbox\n]:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}"\ -".form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);-webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}.form-control::-moz-placeholder{color:#999;opacity:1;}.form-control:-ms-input-placeholder{color:#999;}.form-control::-webkit-input-placeholder{color:#999;}.form-control[readonly]{background-color:#eee;opacity:1;}textarea.form-control{height:auto;}.form-group{margin-bottom:15px;}.radio,.checkbox{position:relative;display:block;margin-top:10px;margin-bottom:10px;}.radio label,.checkbox label{min-height:20px;padding-left:20px;margin-bottom:0;font-weight:normal;cursor:pointer;}"\ -".radio input[type=\nradio\n],.checkbox input[type=\ncheckbox\n]{position:absolute;margin-top:4px;margin-left:-20px;}.radio + .radio,.checkbox + .checkbox{margin-top:-5px;}.has-error .control-label{color:#a94442;}.has-error .form-control{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);}.has-error .form-control:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:normal;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none; -moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px;}.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}.btn:hover,.btn:focus,.btn.focus{color:#333;text-decoration:none;}.btn:active,.btn.active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, .125);box-shadow:inset 0 3px 5px rgba(0, 0, 0, .125);}"\ -".btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4;}.btn-primary:hover,.btn-primary:focus,.btn-primary.focus,.btn-primary:active,.btn-primary.active{color:#fff;background-color:#286090;border-color:#204d74;}.btn-primary:active,.btn-primary.active{background-image:none;}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a;}.btn-danger:hover,.btn-danger:focus,.btn-danger.focus,.btn-danger:active,.btn-danger.active{color:#fff;background-color:#c9302c;border-color:#ac2925;}.btn-danger:active,.btn-danger.active{background-image:none;}.nav{padding-left:0;margin-bottom:0;list-style:none;}.nav>li{position:relative;display:block;}.nav>li>a{position:relative;display:block;padding:10px 15px;}.nav>li>a:hover,.nav>li>a:focus{text-decoration:none;background-color:#eee;}.nav-tabs{border-bottom:1px solid #ddd;}.nav-tabs>li{float:left;margin-bottom:-1px;}.nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:4px 4px 0 0;}.nav-tabs>li>a:hover{border-color:#eee #eee #ddd;}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent;}"\ -".navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent;}@media (min-width:768px){.navbar{border-radius:4px;}}@media (min-width:768px){.navbar-header{float:left;}}.container>.navbar-header{margin-right:-15px;margin-left:-15px;}@media (min-width:768px){.container>.navbar-header{margin-right:0;margin-left:0;}}.navbar-nav{margin:7.5px -15px;}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px;}@media (min-width:768px){.navbar-nav{float:left;margin:0;}.navbar-nav>li{float:left;}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px;}}.navbar-text{margin-top:15px;margin-bottom:15px;}@media (min-width:768px){.navbar-text{float:left;margin-right:15px;margin-left:15px;}}@media (min-width:768px){.navbar-left{float:left !important;}.navbar-right{float:right !important;margin-right:-15px;}.navbar-right ~ .navbar-right{margin-right:0;}}.navbar-inverse{background-color:#222;border-color:#080808;}.navbar-inverse .navbar-text{color:#9d9d9d;}.navbar-inverse .navbar-nav>li>a{color:#9d9d9d;}.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li>a:focus{color:#fff;background-color:transparent;}"\ -".navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>.active>a:focus{color:#fff;background-color:#080808;}.navbar-inverse .navbar-link{color:#9d9d9d;}.navbar-inverse .navbar-link:hover{color:#fff;}.navbar-inverse .btn-link{color:#9d9d9d;}.navbar-inverse .btn-link:hover,.navbar-inverse .btn-link:focus{color:#fff;}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:bold;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;}a.label:hover,a.label:focus{color:#fff;text-decoration:none;cursor:pointer;}.label:empty{display:none;}.btn .label{position:relative;top:-1px;}.label-info{background-color:#5bc0de;}.label-info[href]:hover,.label-info[href]:focus{background-color:#31b0d5;}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px;}.alert h4{margin-top:0;color:inherit;}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6;}.alert-success hr{border-top-color:#c9e2b3;}.alert-success .alert-link{color:#2b542c;}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1;}.alert-danger hr{border-top-color:#e4b9c0;}.alert-danger .alert-link{color:#843534;}"\ -".panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, .05);box-shadow:0 1px 1px rgba(0, 0, 0, .05);}.panel-body{padding:15px;}.panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px;}.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit;}.panel-footer{padding:10px 15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px;}.panel>.table{margin-bottom:0;}.panel>.table caption{padding-right:15px;padding-left:15px;}..panel>.table-bordered{border:0;}.panel-default{border-color:#ddd;}.panel-default>.panel-heading{color:#333;background-color:#f5f5f5;border-color:#ddd;}@-ms-viewport{width:device-width;}"; +const char CSS_START[] PROGMEM ="\n"; const char PAGE_HEAD_1[] PROGMEM = "\n\n\n\n" \ - "\n"\ - ""; + "\n"; const char PAGE_HEAD_2[] PROGMEM = "Wifi Configuration" \ - "\n\n"\ - "
"; -const char NAV_START[] PROGMEM = "