webgui/index.html

   1 <!DOCTYPE html>
   2 <html manifest="phi.appcache" lang="en">
   3 <head>
   4 <meta charset="utf-8" />
   5 <title>Phi (FI) - The FlightGear User Interface</title>
   6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7 <meta name="mobile-web-app-capable" content="yes">
   8 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   9 <meta name="apple-mobile-web-app-title" content="Phi (FI)">
  10 <meta name="apple-mobile-web-app-capable" content="yes">
  11 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  12 <meta http-equiv="Pragma" content="no-cache" />
  13 <meta http-equiv="Expires" content="0" />
  14 <link rel="manifest" href="manifest.json">
  15 <!-- non-retina iPhone pre iOS 7 -->
  16 <link rel="apple-touch-icon" href="images/FI_logo-57.png" sizes="57x57">
  17 <!-- non-retina iPad vor iOS 7 -->
  18 <link rel="apple-touch-icon" href="images/FI_logo-72.png" sizes="72x72">
  19 <!-- non-retina iPad iOS 7 -->
  20 <link rel="apple-touch-icon" href="images/FI_logo-76.png" sizes="76x76">
  21 <!-- retina iPhone pre iOS 7 -->
  22 <link rel="apple-touch-icon" href="images/FI_logo-114.png" sizes="114x114">
  23 <!-- retina iPhone iOS 7 -->
  24 <link rel="apple-touch-icon" href="images/FI_logo-120.png" sizes="120x120">
  25 <!-- retina iPad pre iOS 7 -->
  26 <link rel="apple-touch-icon" href="images/FI_logo-144.png" sizes="144x144">
  27 <!-- retina iPad iOS 7 -->
  28 <link rel="apple-touch-icon" href="images/FI_logo-152.png" sizes="152x152">
  29 <!--Android-->
  30 <link rel="shortcut icon" href="images/FI_logo-196.png" sizes="196x196">
  31
  32 <link rel="stylesheet" type="text/css" href="/Fonts/LiberationFonts/LiberationFonts.css">
  33 <link rel="stylesheet" href="3rdparty/leaflet-0.7.3/leaflet.css" />
  34 <link id="ui-theme" rel="stylesheet" href="3rdparty/jquery-ui-themes-1.11.2/themes/smoothness/jquery-ui.min.css" />
  35
  36 <style>
  37 * {
  38         font-family: 'Liberation Sans';
  39 }
  40
  41 html, body, #wrapper {
  42         width: 100%;
  43         height: 100%;
  44         border: 0;
  45         padding: 0;
  46         margin: 0;
  47 }
  48
  49 #toolbar {
  50         background: url('images/FI_logo.svg') no-repeat left #427ebf;
  51         height: 75px;
  52         position: absolute;
  53         top: 0;
  54         right: 0;
  55         left: 0;
  56         padding-left: 100px;
  57         color: white;
  58 }
  59
  60 #content {
  61         position: absolute;
  62         top: 75px;
  63         bottom: 14pt;
  64         width: 100%;
  65 }
  66
  67 #widgetarea {
  68     overflow-y: auto;
  69         position: fixed;
  70         top: 104px;
  71         right: 0;
  72         width: 220px;
  73         bottom: 14pt;
  74 }
  75
  76 #statusbar {
  77         background-color: gray;
  78         position: fixed;
  79         width: 100%;
  80         height: 14pt;
  81         bottom: 0;
  82         text-align: center;
  83 }
  84
  85 #statusbar a {
  86         color: black;
  87         font-weight: bold;
  88         text-decoration: none;
  89         padding: 1px;
  90 }
  91
  92 #statusbar a:active {
  93         color: black;
  94 }
  95
  96 #statusbar a:visited {
  97         color: black;
  98 }
  99
 100 #statusbar a:hover {
 101         color: black;
 102         padding: 0;
 103         border: 1px dotted silver;
 104 }
 105
 106 .htabs {
 107         position: absolute;
 108         width: 100%;
 109         top: 0px;
 110         height: 29px;
 111         background: #427ebf;
 112 }
 113
 114 .htabs ul {
 115         list-style: none;
 116         text-align: left;
 117         margin: 0;
 118         padding: 0 0 0 100px;
 119 }
 120
 121 .htabs ul li {
 122         background-color: #bbb;
 123         background-image: linear-gradient(180deg, #fff, #bbb);
 124         float: left;
 125         width: 6em;
 126         height: 25px;
 127         margin-left: 2px;
 128         margin-right: 2px;
 129         border-left: 2px solid #888;
 130         border-right: 2px solid #888;
 131         border-top: 2px solid #888;
 132         border-bottom: 2px solid #888;
 133         border-top-left-radius: 10px;
 134         border-top-right-radius: 10px;
 135         color: #888;
 136         padding: 5px;
 137         text-align: center;
 138 }
 139
 140 .htabs ul li a, .htabs ul li a:visited {
 141         text-decoration: none;
 142         width: 100%;
 143         height: 100%;
 144         display: block;
 145         color: #888;
 146 }
 147
 148 .htabs ul li:hover {
 149         color: #444;
 150         font-weight: bold;
 151         cursor: pointer;
 152 }
 153
 154 .htabs ul li.selected {
 155         background-color: #eee;
 156         background-image: linear-gradient(180deg, #fff, #eee);
 157         border-bottom: 2px solid #eee;
 158         color: #444;
 159         font-weight: bold;
 160 }
 161
 162 .htabs ul li a {
 163         position: relative;
 164         display: inline-block;
 165         width: 100%;
 166         font-size: 18px;
 167         padding-top: 1px;
 168         text-align: center;
 169 }
 170
 171 #htabs-content {
 172         position: absolute;
 173         top: 29px;
 174         left: 0;
 175         right: 0;
 176         bottom: 0;
 177         background: #eee;
 178         padding: 10px 230px 10px 10px;
 179 }
 180
 181 .vtabs {
 182         float: left;
 183         margin: 0px;
 184         padding: 0px;
 185         width: 100px;
 186         background-color: #eee;
 187         height: 100%;
 188 }
 189
 190 .vtabs ul {
 191         list-style: none;
 192         text-align: center;
 193         margin: 0px;
 194         padding: 0px;
 195 }
 196
 197 .vtabs ul li {
 198         background: #427ebf;
 199         background-image: linear-gradient(to bottom, #d3d9e0, #427ebf);
 200         border-radius: 10px;
 201         box-shadow: 0px 7px 9px #666666;
 202         color: #eee;
 203         font-size: 18px;
 204         padding: 5px 7px 5px 7px;
 205         margin: 10px 0;
 206         text-decoration: none;
 207 }
 208
 209 .vtabs ul li:hover {
 210         cursor: pointer;
 211         color: #000;
 212         background-image: linear-gradient(to bottom, #fcfcf4, #fbfc46);
 213 }
 214
 215 .vtabs ul li.selected {
 216         background-image: linear-gradient(to bottom, #fcfcf4, #fbfc46);
 217         color: #000;
 218 }
 219
 220 #vtabs-content {
 221         margin-left: 140px;
 222         padding: 5px;
 223         overflow: auto;
 224         height: 100%;
 225 }
 226
 227 #refresh-button {
 228         float: right;
 229 }
 230
 231 .switcher_container:before {
 232         content: 'Theme';
 233         padding-right: 0.5em;
 234         color: white;
 235 }
 236
 237 .switcher_container {
 238         padding-right: 5px;
 239         float: right;
 240 }
 241
 242 .switcher_list {
 243         padding: 2px;
 244 }
 245
 246 .switcher_label {
 247         display: none;
 248 }
 249 </style>
 250
 251 </head>
 252
 253 <body>
 254     <div id="wrapper">
 255         <div id="toolbar">
 256             <h1>Phi - The FlightGear User Interface</h1>
 257         </div>
 258         <div id="content">
 259             <div class="tabs htabs">
 260                 <ul data-bind="foreach: topics">
 261                     <li
 262                         data-bind="text: $data,
 263                    css: { selected: $data == $root.selectedTopic() },
 264                    click: $root.selectTopic">
 265                     </li>
 266                 </ul>
 267                 <button id="refresh-button"
 268                     data-bind="button: { icons: { primary: 'ui-icon-refresh' }, text: false }, click: refresh">Refresh Page</button>
 269                 <div id="ui-theme-switcher"></div>
 270             </div>
 271             <div id="htabs-content" data-bind="component: { name: selectedTopic, params: { topic: selectedSubtopic } }"></div>
 272         </div>
 273         <div id="widgetarea">
 274             <div data-bind="foreach: widgets">
 275                 <div class="phi-widget" data-bind="component: { name: $data }"></div>
 276             </div>
 277         </div>
 278         <div id="statusbar">
 279             <span>FlightGear. Fly free, be happy. <a href="http://www.flightgear.org/">http://www.flightgear.org/</a></span>
 280         </div>
 281     </div>
 282 </body>
 283 <script type="text/javascript" async="async" data-main="./main" src="3rdparty/require/require.js"></script>
 284
 285 </html>
 286
 287