doctype
html
  head
    meta(charset="utf-8")
    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui")
    meta(name='apple-mobile-web-app-capable', content='yes')
    meta(name="apple-mobile-web-app-status-bar-style", content="black")
    title My App
    // Path to Framework7 Library CSS
    link(rel="stylesheet", href="../../dist/css/framework7.ios.min.css")
    // Path to your custom app styles
    link(rel="stylesheet", href="css/my-app.css")
  body
    // Status bar overlay for fullscreen mode
    .statusbar-overlay

    // Panels overlay
    .panel-overlay
    // Left panel with reveal effect
    .panel.panel-left.panel-reveal
      .content-block
        p Left panel content goes here
    // Right panel with cover effect
    .panel.panel-right.panel-cover
      .content-block
        p Right panel content goes here

    // Views
    .views
      // Your main view, should have "view-main" class
      .view.view-main
        // Top Navbar
        .navbar
          // Navbar inner for Index page
          .navbar-inner(data-page="index")
            // We have home navbar without left link
            .center.sliding Awesome App
            .right
              // Right link contains only icon - additional "icon-only" class
              a(href="#").link.icon-only.open-panel 
                i.icon.icon-bars
          // Navbar inner for About page
          .navbar-inner(data-page="about").cached
            .left.sliding
              a(href="#").back.link 
                i.icon.icon-back
                span Back
            .center.sliding About Us
          // Navbar inner for Services page
          .navbar-inner(data-page="services").cached
            .left.sliding
              a(href="#").back.link 
                i.icon.icon-back
                span Back
            .center.sliding Services
          // Navbar inner for Form page
          .navbar-inner(data-page="form").cached
            .left.sliding
              a(href="#").back.link 
                i.icon.icon-back
                span Back
            .center.sliding Form
        // Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes
        .pages.navbar-through.toolbar-through
          // Index Page
          .page(data-page="index")
            // Scrollable page content
            .page-content
              .content-block-title Welcome To My Awesome App
              .content-block
                .content-block-inner
                  p Couple of worlds here because my app is so awesome!
                  p Duis sed erat ac eros ultrices pharetra id ut tellus. Praesent rhoncus enim ornare ipsum aliquet ultricies. Pellentesque sodales erat quis elementum sagittis.
              
              .content-block-title What about simple navigation?
              .list-block
                ul
                  li
                    a(href="#about").item-link
                      .item-content
                        .item-inner 
                          .item-title About
                  li
                    a(href="#services").item-link
                      .item-content 
                        .item-inner
                          .item-title Services
                  li
                    a(href="#form").item-link
                      .item-content 
                        .item-inner
                          .item-title Form
              .content-block-title Side panels
              .content-block
                .row
                  .col-50
                    a(href="#", data-panel="left").button.open-panel Left Panel
                  .col-50
                    a(href="#", data-panel="right").button.open-panel Right Panel
          // About Page
          .page(data-page="about").cached
            .page-content
              .content-block
                p You may go <a href="#" class="back">back</a> or load <a href="#services">Services</a> page.
                p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.    
                p Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.
                p Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.
                p Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.
          // Services Page
          .page(data-page="services").cached
            .page-content
              .content-block
                p You may go <a href="#" class="back">back</a> or load <a href="#about">About</a> page.
                p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.    
                p Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.
                p Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.
                p Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.     
          // Form Page
          .page(data-page="form").cached
            .page-content
              .content-block-title Form Example
              .list-block
                ul
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-name
                      .item-inner 
                        .item-title.label Name
                        .item-input
                          input(type="text", placeholder="Your name")
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-email
                      .item-inner 
                        .item-title.label E-mail
                        .item-input
                          input(type="email", placeholder="E-mail")
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-url
                      .item-inner 
                        .item-title.label URL
                        .item-input
                          input(type="url", placeholder="URL")
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-password
                      .item-inner 
                        .item-title.label Password
                        .item-input
                          input(type="password", placeholder="Password")
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-tel
                      .item-inner 
                        .item-title.label Phone
                        .item-input
                          input(type="tel", placeholder="Phone")
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-gender
                      .item-inner 
                        .item-title.label Gender
                        .item-input
                          select
                            option Male
                            option Female
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-calendar
                      .item-inner 
                        .item-title.label Birth date
                        .item-input
                          input(type="date", placeholder="Birth day", value="2014-04-30")
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-toggle
                      .item-inner 
                        .item-title.label Switch
                        .item-input
                          label.label-switch
                            input(type="checkbox")
                            .checkbox
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-settings
                      .item-inner
                        .item-title.label Slider
                        .item-input
                          .range-slider
                            input(type="range", min="0", max="100", value="50", step="0.1")
                  li.align-top
                    .item-content
                      .item-media
                        i.icon.icon-form-comment
                      .item-inner 
                        .item-title.label Textarea
                        .item-input
                          textarea
              .content-block
                .row
                  .col-50
                    a(href="#").button.button-big.button-fill.color-red Cancel
                  .col-50
                    input(type="submit", value="Submit").button.button-big.button-fill.color-green
                  
              .content-block-title Checkbox group
              .list-block
                ul
                  li
                    label.label-checkbox.item-content
                      input(type="checkbox", name="ks-checkbox", value="Books", checked=true)
                      .item-media
                        i.icon.icon-form-checkbox
                      .item-inner
                        .item-title Books
                  li
                    label.label-checkbox.item-content
                      input(type="checkbox", name="ks-checkbox", value="Movies")
                      .item-media
                        i.icon.icon-form-checkbox
                      .item-inner
                        .item-title Movies
                  li
                    label.label-checkbox.item-content
                      input(type="checkbox", name="ks-checkbox", value="Food")
                      .item-media
                        i.icon.icon-form-checkbox
                      .item-inner
                        .item-title Food
                  li
                    label.label-checkbox.item-content
                      input(type="checkbox", name="ks-checkbox", value="Drinks")
                      .item-media
                        i.icon.icon-form-checkbox
                      .item-inner
                        .item-title Drinks
              .content-block-title Radio buttons group
              .list-block
                ul
                  li
                    label.label-radio.item-content
                      input(type="radio", name="ks-radio", value="Books", checked=true)
                      .item-inner
                        .item-title Books
                  li
                    label.label-radio.item-content
                      input(type="radio", name="ks-radio", value="Movies")
                      .item-inner
                        .item-title Movies
                  li
                    label.label-radio.item-content
                      input(type="radio", name="ks-radio", value="Food")
                      .item-inner
                        .item-title Food
                  li
                    label.label-radio.item-content
                      input(type="radio", name="ks-radio", value="Drinks")
                      .item-inner
                        .item-title Drinks
          
        // Bottom Toolbar
        .toolbar
          .toolbar-inner
            a(href="#").link Link 1
            a(href="#").link Link 2

    // Path to Framework7 Library JS
    script(type="text/javascript", src="../../dist/js/framework7.min.js")
    // Path to your app js
    script(type="text/javascript", src="js/my-app.js")