framework7rails 0.9.7 → 1.0.0

data/Framework7-0.9.6/dist/css/framework7.themes.css

@@ -0,0 +1,279 @@
+/*==========================
+Framework7 Layouts Themes
+==========================*/
+.layout-dark .navbar,
+.navbar.layout-dark {
+  border-bottom-color: #333333;
+  background-color: #131313;
+  color: #ffffff;
+}
+.layout-dark .toolbar,
+.toolbar.layout-dark {
+  border-top-color: #333333;
+  background-color: #131313;
+  color: #ffffff;
+}
+.layout-dark .photo-browser .navbar,
+.photo-browser.layout-dark .navbar,
+.layout-dark .view[data-page="photo-browser-slides"] .navbar,
+.view[data-page="photo-browser-slides"].layout-dark .navbar,
+.layout-dark .photo-browser .toolbar,
+.photo-browser.layout-dark .toolbar,
+.layout-dark .view[data-page="photo-browser-slides"] .toolbar,
+.view[data-page="photo-browser-slides"].layout-dark .toolbar {
+  background: rgba(19, 19, 19, 0.95);
+}
+.layout-dark .tabbar a:not(.active) {
+  color: #ffffff;
+}
+.layout-dark .page,
+.layout-dark .login-screen-content,
+.page.layout-dark,
+.layout-dark .panel,
+.panel.layout-dark {
+  background-color: #222426;
+  color: #dddddd;
+}
+.layout-dark .content-block-title {
+  color: #ffffff;
+}
+.layout-dark .content-block,
+.content-block.layout-dark {
+  color: #bbbbbb;
+}
+.layout-dark .content-block-inner {
+  background: #1c1d1f;
+  color: #dddddd;
+  border-color: #393939;
+}
+.layout-dark .list-block ul,
+.list-block.layout-dark ul {
+  background: #1c1d1f;
+  border-color: #393939;
+}
+.layout-dark .list-block.inset ul,
+.list-block.layout-dark.inset ul {
+  background: #1c1d1f;
+}
+.layout-dark .list-block.notifications > ul,
+.list-block.layout-dark.notifications > ul {
+  background: none;
+}
+.layout-dark .popover,
+.popover.layout-dark {
+  background: rgba(0, 0, 0, 0.8);
+}
+.layout-dark .popover .popover-angle:after,
+.popover.layout-dark .popover-angle:after {
+  background: rgba(0, 0, 0, 0.8);
+}
+.layout-dark .popover .list-block ul,
+.popover.layout-dark .list-block ul {
+  background: none;
+}
+.layout-dark .actions-popover .list-block ul {
+  border-color: #393939;
+}
+.layout-dark .actions-popover .actions-popover-label {
+  border-bottom-color: #393939;
+}
+.layout-dark li.sorting {
+  background-color: #29292f;
+}
+.layout-dark .swipeout-actions-left a,
+.layout-dark .swipeout-actions-right a {
+  background-color: #444444;
+}
+.layout-dark .item-inner,
+.layout-dark .list-block ul ul li:last-child .item-inner {
+  border-color: #393939;
+}
+.layout-dark .item-after {
+  color: #bbbbbb;
+}
+html:not(.watch-active-state) .layout-dark .item-link:active,
+html:not(.watch-active-state) .layout-dark label.label-checkbox:active,
+html:not(.watch-active-state) .layout-dark label.label-radio:active,
+.layout-dark .item-link.active-state,
+.layout-dark label.label-checkbox.active-state,
+.layout-dark label.label-radio.active-state {
+  background-color: #29292f;
+}
+.layout-dark .item-link.list-button {
+  border-bottom-color: #393939;
+}
+.layout-dark .list-block-label {
+  color: #bbbbbb;
+}
+.layout-dark .item-divider,
+.layout-dark .list-group-title {
+  background: #1a1a1a;
+  color: #bbbbbb;
+  border-top-color: #393939;
+}
+.layout-dark .searchbar {
+  background: #333333;
+  border-bottom-color: #333333;
+}
+.layout-dark .list-block input[type="text"],
+.list-block.layout-dark input[type="text"],
+.layout-dark .list-block input[type="password"],
+.list-block.layout-dark input[type="password"],
+.layout-dark .list-block input[type="email"],
+.list-block.layout-dark input[type="email"],
+.layout-dark .list-block input[type="tel"],
+.list-block.layout-dark input[type="tel"],
+.layout-dark .list-block input[type="url"],
+.list-block.layout-dark input[type="url"],
+.layout-dark .list-block input[type="date"],
+.list-block.layout-dark input[type="date"],
+.layout-dark .list-block input[type="datetime-local"],
+.list-block.layout-dark input[type="datetime-local"],
+.layout-dark .list-block input[type="number"],
+.list-block.layout-dark input[type="number"],
+.layout-dark .list-block select,
+.list-block.layout-dark select,
+.layout-dark .list-block textarea,
+.list-block.layout-dark textarea {
+  color: #ffffff;
+}
+.layout-dark .label-switch .checkbox {
+  background-color: #393939;
+}
+.layout-dark .label-switch .checkbox:before {
+  background-color: #1c1d1f;
+}
+.layout-dark .range-slider input[type="range"]:after {
+  background: #1c1d1f;
+}
+/* === White layout === */
+.layout-white .navbar,
+.navbar.layout-white {
+  border-bottom-color: #dddddd;
+  background-color: #ffffff;
+  color: #000000;
+}
+.layout-white .toolbar,
+.toolbar.layout-white {
+  border-top-color: #dddddd;
+  background-color: #ffffff;
+  color: #000000;
+}
+.layout-white .photo-browser .navbar,
+.photo-browser.layout-white .navbar,
+.layout-white .view[data-page="photo-browser-slides"] .navbar,
+.view[data-page="photo-browser-slides"].layout-white .navbar,
+.layout-white .photo-browser .toolbar,
+.photo-browser.layout-white .toolbar,
+.layout-white .view[data-page="photo-browser-slides"] .toolbar,
+.view[data-page="photo-browser-slides"].layout-white .toolbar {
+  background: rgba(255, 255, 255, 0.95);
+}
+.layout-white .tabbar a:not(.active) {
+  color: #777777;
+}
+.layout-white .page,
+.layout-white .login-screen-content,
+.page.layout-white,
+.layout-white .panel,
+.panel.layout-white {
+  background-color: #ffffff;
+  color: #000000;
+}
+.layout-white .content-block-title {
+  color: #777777;
+}
+.layout-white .content-block,
+.content-block.layout-white {
+  color: #777777;
+}
+.layout-white .content-block-inner {
+  background: #fafafa;
+  color: #000000;
+  border-color: #dddddd;
+}
+.layout-white .list-block ul,
+.list-block.layout-white ul {
+  background: #ffffff;
+  border-color: #dddddd;
+}
+.layout-white .list-block.inset ul,
+.list-block.layout-white.inset ul {
+  background: #fafafa;
+}
+.layout-white .list-block.notifications > ul,
+.list-block.layout-white.notifications > ul {
+  background: none;
+}
+.layout-white .popover-inner > .list-block ul {
+  background: none;
+}
+.layout-white li.sorting {
+  background-color: #eeeeee;
+}
+.layout-white .swipeout-actions-left a,
+.layout-white .swipeout-actions-right a {
+  background-color: #c7c7cc;
+}
+.layout-white .item-inner,
+.layout-white .list-block ul ul li:last-child .item-inner {
+  border-color: #dddddd;
+}
+.layout-white .item-after {
+  color: #8e8e93;
+}
+html:not(.watch-active-state) .layout-white .item-link:active,
+html:not(.watch-active-state) .layout-white label.label-checkbox:active,
+html:not(.watch-active-state) .layout-white label.label-radio:active,
+.layout-white .item-link.active-state,
+.layout-white label.label-checkbox.active-state,
+.layout-white label.label-radio.active-state {
+  background-color: #eeeeee;
+}
+.layout-white .item-link.list-button {
+  border-bottom-color: #dddddd;
+}
+.layout-white .list-block-label {
+  color: #777777;
+}
+.layout-white .item-divider,
+.layout-white .list-group-title {
+  background: #f7f7f7;
+  color: #777777;
+  border-top-color: #dddddd;
+}
+.layout-white .searchbar {
+  background: #c9c9ce;
+  border-bottom-color: #b4b4b4;
+}
+.layout-white .list-block input[type="text"],
+.list-block.layout-white input[type="text"],
+.layout-white .list-block input[type="password"],
+.list-block.layout-white input[type="password"],
+.layout-white .list-block input[type="email"],
+.list-block.layout-white input[type="email"],
+.layout-white .list-block input[type="tel"],
+.list-block.layout-white input[type="tel"],
+.layout-white .list-block input[type="url"],
+.list-block.layout-white input[type="url"],
+.layout-white .list-block input[type="date"],
+.list-block.layout-white input[type="date"],
+.layout-white .list-block input[type="datetime-local"],
+.list-block.layout-white input[type="datetime-local"],
+.layout-white .list-block input[type="number"],
+.list-block.layout-white input[type="number"],
+.layout-white .list-block select,
+.list-block.layout-white select,
+.layout-white .list-block textarea,
+.list-block.layout-white textarea {
+  color: #777777;
+}
+.layout-white .label-switch .checkbox {
+  background-color: #e5e5e5;
+}
+.layout-white .label-switch .checkbox:before {
+  background-color: #ffffff;
+}
+.layout-white .range-slider input[type="range"]:after {
+  background: #ffffff;
+}

data/Framework7-0.9.6/dist/css/framework7.themes.min.css

@@ -0,0 +1 @@
+.layout-dark .navbar,.navbar.layout-dark{border-bottom-color:#333;background-color:#131313;color:#fff}.layout-dark .toolbar,.toolbar.layout-dark{border-top-color:#333;background-color:#131313;color:#fff}.layout-dark .photo-browser .navbar,.photo-browser.layout-dark .navbar,.layout-dark .view[data-page=photo-browser-slides] .navbar,.view[data-page=photo-browser-slides].layout-dark .navbar,.layout-dark .photo-browser .toolbar,.photo-browser.layout-dark .toolbar,.layout-dark .view[data-page=photo-browser-slides] .toolbar,.view[data-page=photo-browser-slides].layout-dark .toolbar{background:rgba(19,19,19,.95)}.layout-dark .tabbar a:not(.active){color:#fff}.layout-dark .page,.layout-dark .login-screen-content,.page.layout-dark,.layout-dark .panel,.panel.layout-dark{background-color:#222426;color:#ddd}.layout-dark .content-block-title{color:#fff}.layout-dark .content-block,.content-block.layout-dark{color:#bbb}.layout-dark .content-block-inner{background:#1c1d1f;color:#ddd;border-color:#393939}.layout-dark .list-block ul,.list-block.layout-dark ul{background:#1c1d1f;border-color:#393939}.layout-dark .list-block.inset ul,.list-block.layout-dark.inset ul{background:#1c1d1f}.layout-dark .list-block.notifications>ul,.list-block.layout-dark.notifications>ul{background:0 0}.layout-dark .popover,.popover.layout-dark{background:rgba(0,0,0,.8)}.layout-dark .popover .popover-angle:after,.popover.layout-dark .popover-angle:after{background:rgba(0,0,0,.8)}.layout-dark .popover .list-block ul,.popover.layout-dark .list-block ul{background:0 0}.layout-dark .actions-popover .list-block ul{border-color:#393939}.layout-dark .actions-popover .actions-popover-label{border-bottom-color:#393939}.layout-dark li.sorting{background-color:#29292f}.layout-dark .swipeout-actions-left a,.layout-dark .swipeout-actions-right a{background-color:#444}.layout-dark .item-inner,.layout-dark .list-block ul ul li:last-child .item-inner{border-color:#393939}.layout-dark .item-after{color:#bbb}html:not(.watch-active-state) .layout-dark .item-link:active,html:not(.watch-active-state) .layout-dark label.label-checkbox:active,html:not(.watch-active-state) .layout-dark label.label-radio:active,.layout-dark .item-link.active-state,.layout-dark label.label-checkbox.active-state,.layout-dark label.label-radio.active-state{background-color:#29292f}.layout-dark .item-link.list-button{border-bottom-color:#393939}.layout-dark .list-block-label{color:#bbb}.layout-dark .item-divider,.layout-dark .list-group-title{background:#1a1a1a;color:#bbb;border-top-color:#393939}.layout-dark .searchbar{background:#333;border-bottom-color:#333}.layout-dark .list-block input[type=text],.list-block.layout-dark input[type=text],.layout-dark .list-block input[type=password],.list-block.layout-dark input[type=password],.layout-dark .list-block input[type=email],.list-block.layout-dark input[type=email],.layout-dark .list-block input[type=tel],.list-block.layout-dark input[type=tel],.layout-dark .list-block input[type=url],.list-block.layout-dark input[type=url],.layout-dark .list-block input[type=date],.list-block.layout-dark input[type=date],.layout-dark .list-block input[type=datetime-local],.list-block.layout-dark input[type=datetime-local],.layout-dark .list-block input[type=number],.list-block.layout-dark input[type=number],.layout-dark .list-block select,.list-block.layout-dark select,.layout-dark .list-block textarea,.list-block.layout-dark textarea{color:#fff}.layout-dark .label-switch .checkbox{background-color:#393939}.layout-dark .label-switch .checkbox:before{background-color:#1c1d1f}.layout-dark .range-slider input[type=range]:after{background:#1c1d1f}.layout-white .navbar,.navbar.layout-white{border-bottom-color:#ddd;background-color:#fff;color:#000}.layout-white .toolbar,.toolbar.layout-white{border-top-color:#ddd;background-color:#fff;color:#000}.layout-white .photo-browser .navbar,.photo-browser.layout-white .navbar,.layout-white .view[data-page=photo-browser-slides] .navbar,.view[data-page=photo-browser-slides].layout-white .navbar,.layout-white .photo-browser .toolbar,.photo-browser.layout-white .toolbar,.layout-white .view[data-page=photo-browser-slides] .toolbar,.view[data-page=photo-browser-slides].layout-white .toolbar{background:rgba(255,255,255,.95)}.layout-white .tabbar a:not(.active){color:#777}.layout-white .page,.layout-white .login-screen-content,.page.layout-white,.layout-white .panel,.panel.layout-white{background-color:#fff;color:#000}.layout-white .content-block-title{color:#777}.layout-white .content-block,.content-block.layout-white{color:#777}.layout-white .content-block-inner{background:#fafafa;color:#000;border-color:#ddd}.layout-white .list-block ul,.list-block.layout-white ul{background:#fff;border-color:#ddd}.layout-white .list-block.inset ul,.list-block.layout-white.inset ul{background:#fafafa}.layout-white .list-block.notifications>ul,.list-block.layout-white.notifications>ul{background:0 0}.layout-white .popover-inner>.list-block ul{background:0 0}.layout-white li.sorting{background-color:#eee}.layout-white .swipeout-actions-left a,.layout-white .swipeout-actions-right a{background-color:#c7c7cc}.layout-white .item-inner,.layout-white .list-block ul ul li:last-child .item-inner{border-color:#ddd}.layout-white .item-after{color:#8e8e93}html:not(.watch-active-state) .layout-white .item-link:active,html:not(.watch-active-state) .layout-white label.label-checkbox:active,html:not(.watch-active-state) .layout-white label.label-radio:active,.layout-white .item-link.active-state,.layout-white label.label-checkbox.active-state,.layout-white label.label-radio.active-state{background-color:#eee}.layout-white .item-link.list-button{border-bottom-color:#ddd}.layout-white .list-block-label{color:#777}.layout-white .item-divider,.layout-white .list-group-title{background:#f7f7f7;color:#777;border-top-color:#ddd}.layout-white .searchbar{background:#c9c9ce;border-bottom-color:#b4b4b4}.layout-white .list-block input[type=text],.list-block.layout-white input[type=text],.layout-white .list-block input[type=password],.list-block.layout-white input[type=password],.layout-white .list-block input[type=email],.list-block.layout-white input[type=email],.layout-white .list-block input[type=tel],.list-block.layout-white input[type=tel],.layout-white .list-block input[type=url],.list-block.layout-white input[type=url],.layout-white .list-block input[type=date],.list-block.layout-white input[type=date],.layout-white .list-block input[type=datetime-local],.list-block.layout-white input[type=datetime-local],.layout-white .list-block input[type=number],.list-block.layout-white input[type=number],.layout-white .list-block select,.list-block.layout-white select,.layout-white .list-block textarea,.list-block.layout-white textarea{color:#777}.layout-white .label-switch .checkbox{background-color:#e5e5e5}.layout-white .label-switch .checkbox:before{background-color:#fff}.layout-white .range-slider input[type=range]:after{background:#fff}

data/Framework7-0.9.6/dist/form.html

@@ -0,0 +1,229 @@
+
+<!-- We don't need full layout here, because this page will be parsed with Ajax-->
+<!-- Top Navbar-->
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left"><a href="#" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Form</div>
+    <div class="right">
+      <!-- Right link contains only icon - additional "icon-only" class--><a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
+    </div>
+  </div>
+</div>
+<div class="pages">
+  <!-- Page, data-page contains page name-->
+  <div data-page="form" class="page">
+    <!-- Scrollable page content-->
+    <div class="page-content">
+      <div class="content-block-title">Form Example</div>
+      <div class="list-block">
+        <ul>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-name"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">Name</div>
+                <div class="item-input">
+                  <input type="text" placeholder="Your name"/>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-email"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">E-mail</div>
+                <div class="item-input">
+                  <input type="email" placeholder="E-mail"/>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-url"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">URL</div>
+                <div class="item-input">
+                  <input type="url" placeholder="URL"/>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-password"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">Password</div>
+                <div class="item-input">
+                  <input type="password" placeholder="Password"/>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-tel"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">Phone</div>
+                <div class="item-input">
+                  <input type="tel" placeholder="Phone"/>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-gender"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">Gender</div>
+                <div class="item-input">
+                  <select>
+                    <option>Male</option>
+                    <option>Female</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-calendar"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">Birth date</div>
+                <div class="item-input">
+                  <input type="date" placeholder="Birth day" value="2014-04-30"/>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-toggle"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">Switch</div>
+                <div class="item-input">
+                  <label class="label-switch">
+                    <input type="checkbox"/>
+                    <div class="checkbox"></div>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-settings"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">Slider</div>
+                <div class="item-input">
+                  <div class="range-slider">
+                    <input type="range" min="0" max="100" value="50" step="0.1"/>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="align-top">
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-comment"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">Textarea</div>
+                <div class="item-input">
+                  <textarea></textarea>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="content-block">
+        <div class="row">
+          <div class="col-50"><a href="#" class="button button-big button-cancel">Cancel</a></div>
+          <div class="col-50">
+            <input type="submit" value="Submit" class="button button-big button-submit"/>
+          </div>
+        </div>
+      </div>
+      <div class="content-block-title">Checkbox group</div>
+      <div class="list-block">
+        <ul>
+          <li>
+            <label class="label-checkbox item-content">
+              <input type="checkbox" name="ks-checkbox" value="Books" checked="checked"/>
+              <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Books</div>
+              </div>
+            </label>
+          </li>
+          <li>
+            <label class="label-checkbox item-content">
+              <input type="checkbox" name="ks-checkbox" value="Movies"/>
+              <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Movies</div>
+              </div>
+            </label>
+          </li>
+          <li>
+            <label class="label-checkbox item-content">
+              <input type="checkbox" name="ks-checkbox" value="Food"/>
+              <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Food</div>
+              </div>
+            </label>
+          </li>
+          <li>
+            <label class="label-checkbox item-content">
+              <input type="checkbox" name="ks-checkbox" value="Drinks"/>
+              <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Drinks</div>
+              </div>
+            </label>
+          </li>
+        </ul>
+      </div>
+      <div class="content-block-title">Radio buttons group</div>
+      <div class="list-block">
+        <ul>
+          <li>
+            <label class="label-radio item-content">
+              <input type="radio" name="ks-radio" value="Books" checked="checked"/>
+              <div class="item-inner">
+                <div class="item-title">Books</div>
+              </div>
+            </label>
+          </li>
+          <li>
+            <label class="label-radio item-content">
+              <input type="radio" name="ks-radio" value="Movies"/>
+              <div class="item-inner">
+                <div class="item-title">Movies</div>
+              </div>
+            </label>
+          </li>
+          <li>
+            <label class="label-radio item-content">
+              <input type="radio" name="ks-radio" value="Food"/>
+              <div class="item-inner">
+                <div class="item-title">Food</div>
+              </div>
+            </label>
+          </li>
+          <li>
+            <label class="label-radio item-content">
+              <input type="radio" name="ks-radio" value="Drinks"/>
+              <div class="item-inner">
+                <div class="item-title">Drinks</div>
+              </div>
+            </label>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/dist/index.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<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</title>
+    <!-- Path to Framework7 Library CSS-->
+    <link rel="stylesheet" href="css/framework7.min.css">
+    <!-- Path to your custom app styles-->
+    <link rel="stylesheet" href="css/my-app.css">
+  </head>
+  <body>
+    <!-- Status bar overlay for fullscreen mode-->
+    <div class="statusbar-overlay"></div>
+    <!-- Panels overlay-->
+    <div class="panel-overlay"></div>
+    <!-- Left panel with reveal effect-->
+    <div class="panel panel-left panel-reveal">
+      <div class="content-block">
+        <p>Left panel content goes here</p>
+      </div>
+    </div>
+    <!-- Right panel with cover effect-->
+    <div class="panel panel-right panel-cover">
+      <div class="content-block">
+        <p>Right panel content goes here</p>
+      </div>
+    </div>
+    <!-- Views-->
+    <div class="views">
+      <!-- Your main view, should have "view-main" class-->
+      <div class="view view-main">
+        <!-- Top Navbar-->
+        <div class="navbar">
+          <div class="navbar-inner">
+            <!-- We have home navbar without left link-->
+            <div class="center sliding">Awesome App</div>
+            <div class="right">
+              <!-- Right link contains only icon - additional "icon-only" class--><a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
+            </div>
+          </div>
+        </div>
+        <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
+        <div class="pages navbar-through toolbar-through">
+          <!-- Page, data-page contains page name-->
+          <div data-page="index" class="page">
+            <!-- Scrollable page content-->
+            <div class="page-content">
+              <div class="content-block-title">Welcome To My Awesome App</div>
+              <div class="content-block">
+                <div class="content-block-inner">
+                  <p>Couple of worlds here because my app is so awesome!</p>
+                  <p>Duis sed erat ac eros ultrices pharetra id ut tellus. Praesent rhoncus enim ornare ipsum aliquet ultricies. Pellentesque sodales erat quis elementum sagittis.</p>
+                </div>
+              </div>
+              <div class="content-block-title">What about simple navigation?</div>
+              <div class="list-block">
+                <ul>
+                  <li><a href="about.html" class="item-link">
+                      <div class="item-content">
+                        <div class="item-inner">
+                          <div class="item-title">About</div>
+                        </div>
+                      </div></a></li>
+                  <li><a href="services.html" class="item-link">
+                      <div class="item-content">
+                        <div class="item-inner">
+                          <div class="item-title">Services</div>
+                        </div>
+                      </div></a></li>
+                  <li><a href="form.html" class="item-link">
+                      <div class="item-content">
+                        <div class="item-inner">
+                          <div class="item-title">Form</div>
+                        </div>
+                      </div></a></li>
+                </ul>
+              </div>
+              <div class="content-block-title">Side panels</div>
+              <div class="content-block">
+                <div class="row">
+                  <div class="col-50"><a href="#" data-panel="left" class="button open-panel">Left Panel</a></div>
+                  <div class="col-50"><a href="#" data-panel="right" class="button open-panel">Right Panel</a></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Bottom Toolbar-->
+        <div class="toolbar">
+          <div class="toolbar-inner"><a href="#" class="link">Link 1</a><a href="#" class="link">Link 2</a></div>
+        </div>
+      </div>
+    </div>
+    <!-- Path to Framework7 Library JS-->
+    <script type="text/javascript" src="js/framework7.min.js"></script>
+    <!-- Path to your app js-->
+    <script type="text/javascript" src="js/my-app.js"></script>
+  </body>
+</html>