|  |  | 
 |  |  |     <title>App-Vorlage</title> | 
 |  |  |     <meta charset="UTF-8"> | 
 |  |  |     <meta name="viewport" content="width=device-width, initial-scale=1.0"> | 
 |  |  |     <meta name="apple-mobile-web-app-capable" content="yes" /> | 
 |  |  |     <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> | 
 |  |  |     <link rel="stylesheet" type="text/css" href="jslib/app-menu/app-menu.css"> | 
 |  |  |     <link rel="stylesheet" type="text/css" href="app-menu.css"> | 
 |  |  |     <link rel="stylesheet" type="text/css" href="hamburger.css"> | 
 |  |  |     <link rel="stylesheet" type="text/css" href="app.css"> | 
 |  |  |   </head> | 
 |  |  | 
 |  |  |       <div class="west"> | 
 |  |  |         westliche Seitenleiste | 
 |  |  |       </div> | 
 |  |  |       <!-- zentraler Inhaltsbereich --> | 
 |  |  |       <div class="zentrum"> | 
 |  |  |         <p> | 
 |  |  |           Hier kann beliebiger Inhalt erscheinen. | 
 |  |  |         </p> | 
 |  |  |         <p> | 
 |  |  |           Wenn dessen Darstellung mehr | 
 |  |  |           Platz benötigt als das Anzeigegerät bietet wird ein | 
 |  |  |           Rollbalken eingeblendet. Beim Rollen zu anfangs nicht sichtbaren | 
 |  |  |           Teilen des Inhalts bleiben die den Inhaltsbereich | 
 |  |  |           umschließenden Elemente sichtbar. | 
 |  |  |         </p> | 
 |  |  |         <p> | 
 |  |  |           Ein Klick auf das Hamburger-Piktogramm oben links bzw. dessen | 
 |  |  |           Antippen blendet ein Menü ein. | 
 |  |  |         </p> | 
 |  |  |       <div class="zentrum-behaelter"> | 
 |  |  |         <!-- Einblendbereich --> | 
 |  |  |         <div class="dialog"></div> | 
 |  |  |         <!-- zentraler Inhaltsbereich --> | 
 |  |  |         <div class="zentrum"> | 
 |  |  |           <div class="zentraler-inhalt"> | 
 |  |  |             <p> | 
 |  |  |               Hier kann beliebiger Inhalt erscheinen. | 
 |  |  |             </p> | 
 |  |  |             <p> | 
 |  |  |               Wenn dessen Darstellung mehr | 
 |  |  |               Platz benötigt als das Anzeigegerät bietet wird ein | 
 |  |  |               Rollbalken eingeblendet. Beim Rollen zu anfangs nicht sichtbaren | 
 |  |  |               Teilen des Inhalts bleiben die den Inhaltsbereich | 
 |  |  |               umschließenden Elemente sichtbar. | 
 |  |  |             </p> | 
 |  |  |             <p> | 
 |  |  |               Ein Klick auf das Hamburger-Piktogramm oben links bzw. dessen | 
 |  |  |               Antippen blendet ein Menü ein von dem aus weitere Funktionen | 
 |  |  |               ausgelöst werden können. | 
 |  |  |             </p> | 
 |  |  |           </div> | 
 |  |  |         </div> | 
 |  |  |       </div> | 
 |  |  |       <!-- oestliche Seitenleiste --> | 
 |  |  |       <div class="ost"> | 
 |  |  |       <div class="ost ost-open"> | 
 |  |  |         östliche Seitenleiste | 
 |  |  |       </div> | 
 |  |  |     </div> | 
 |  |  |     <!-- Fusszeile --> | 
 |  |  |     <div class="sued"> | 
 |  |  |     <div class="sued sued-open"> | 
 |  |  |       Fußzeile | 
 |  |  |     </div> | 
 |  |  |     <!-- Skripte --> | 
 |  |  |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | 
 |  |  |     <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script> | 
 |  |  |     <script src="jslib/app-menu/app-menu.js"></script> | 
 |  |  |     <script src="app.js"></script> | 
 |  |  |     <script src="js/app-menu.js"></script> | 
 |  |  |     <!-- <script src="js/vorlagen.js"></script> --> | 
 |  |  |     <script src="js/app.js"></script> | 
 |  |  |     <script> | 
 |  |  |       var app; | 
 |  |  |       $(document).ready(function() { | 
 |  |  |         app = new AppVorlage(); | 
 |  |  |         app.init(); | 
 |  |  |       }); | 
 |  |  |       var app; | 
 |  |  |       document.addEventListener('DOMContentLoaded', function () { | 
 |  |  |          app = new AppVorlage(); | 
 |  |  |          app.init(); | 
 |  |  |       }); | 
 |  |  |     </script> | 
 |  |  |   </body> | 
 |  |  | </html> | 
 |  |  |  |