diff options
Diffstat (limited to 'docs/examples/app-movies/index.html')
| -rw-r--r-- | docs/examples/app-movies/index.html | 170 |
1 files changed, 170 insertions, 0 deletions
diff --git a/docs/examples/app-movies/index.html b/docs/examples/app-movies/index.html new file mode 100644 index 0000000..ec3bfcc --- /dev/null +++ b/docs/examples/app-movies/index.html @@ -0,0 +1,170 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Movie finder</title> + <meta name="viewport" content="initial-scale=1, maximum-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"> + + <link rel="stylesheet" href="../../dist/ratchet.css"> + <link rel="stylesheet" href="css/app.css"> + <script src="../../dist/ratchet.js"></script> + </head> + <body> + <header class="bar bar-nav"> + <a class="icon icon-gear pull-right" href="#settingsModal" ></a> + <h1 class="title">Movie finder</h1> + </header> + + <div class="bar bar-standard bar-header-secondary"> + <form> + <input type="search" placeholder="Search"> + </form> + </div> + + <div class="content"> + + <div class="slider"> + <div class="slide-group"> + <div class="slide"> + <img src="img/argo.png"> + </div> + <div class="slide"> + <img src="img/skyfall.png"> + </div> + <div class="slide"> + <img src="img/ralph.png"> + </div> + </div> + </div> + + <ul class="table-view"> + <li class="table-view-cell table-view-divider">Recommended movies</li> + <li class="table-view-cell media"> + <a class="push-right" href="choose-theater.html" data-transition="slide-in"> + <img class="media-object pull-left" src="http://placehold.it/64x64"> + <div class="media-body"> + Argo + <p>Lorem ipsum dolor sit amet, consectetur.</p> + </div> + </a> + </li> + <li class="table-view-cell media"> + <a class="push-right" href="choose-theater.html" data-transition="slide-in"> + <img class="media-object pull-left" src="http://placehold.it/64x64"> + <div class="media-body"> + Skyfall: 007 + <p>Lorem ipsum dolor sit amet, consectetur.</p> + </div> + </a> + </li> + <li class="table-view-cell media"> + <a class="push-right" href="choose-theater.html" data-transition="slide-in"> + <img class="media-object pull-left" src="http://placehold.it/64x64"> + <div class="media-body"> + Wreck-it Ralph + <p>Lorem ipsum dolor sit amet, consectetur.</p> + </div> + </a> + </li> + <li class="table-view-cell media"> + <a class="push-right" href="choose-theater.html" data-transition="slide-in"> + <img class="media-object pull-left" src="http://placehold.it/64x64"> + <div class="media-body"> + Argo + <p>Lorem ipsum dolor sit amet, consectetur.</p> + </div> + </a> + </li> + <li class="table-view-cell media"> + <a class="push-right" href="choose-theater.html" data-transition="slide-in"> + <img class="media-object pull-left" src="http://placehold.it/64x64"> + <div class="media-body"> + Skyfall: 007 + <p>Lorem ipsum dolor sit amet, consectetur.</p> + </div> + </a> + </li> + <li class="table-view-cell media"> + <a class="push-right" href="choose-theater.html" data-transition="slide-in"> + <img class="media-object pull-left" src="http://placehold.it/64x64"> + <div class="media-body"> + Wreck-it Ralph + <p>Lorem ipsum dolor sit amet, consectetur.</p> + </div> + </a> + </li> + <li class="table-view-cell media"> + <a class="push-right" href="choose-theater.html" data-transition="slide-in"> + <img class="media-object pull-left" src="http://placehold.it/64x64"> + <div class="media-body"> + Argo + <p>Lorem ipsum dolor sit amet, consectetur.</p> + </div> + </a> + </li> + <li class="table-view-cell media"> + <a class="push-right" href="choose-theater.html" data-transition="slide-in"> + <img class="media-object pull-left" src="http://placehold.it/64x64"> + <div class="media-body"> + Skyfall: 007 + <p>Lorem ipsum dolor sit amet, consectetur.</p> + </div> + </a> + </li> + <li class="table-view-cell media"> + <a class="push-right" href="choose-theater.html" data-transition="slide-in"> + <img class="media-object pull-left" src="http://placehold.it/64x64"> + <div class="media-body"> + Wreck-it Ralph + <p>Lorem ipsum dolor sit amet, consectetur.</p> + </div> + </a> + </li> + </ul> + </div><!-- /.content --> + + <!-- Settings modal --> + <div id="settingsModal" class="modal"> + <header class="bar bar-nav"> + <a class="icon icon-close pull-right" href="#settingsModal"></a> + <h1 class="title">Settings</h1> + </header> + + <div class="content"> + <form class="input-group"> + <input type="text" placeholder="Full name"> + <input type="email" placeholder="Email"> + <input type="text" placeholder="Username"> + </form> + + <h5 class="content-padded">App settings</h5> + + <ul class="table-view"> + <li class="table-view-cell media"> + <span class="media-object pull-left icon icon-sound"></span> + <div class="media-body"> + Enable sounds + </div> + <div class="toggle"> + <div class="toggle-handle"></div> + </div> + </li> + <li class="table-view-cell media"> + <span class="media-object pull-left icon icon-person"></span> + <div class="media-body"> + Parental controls + </div> + <div class="toggle"> + <div class="toggle-handle"></div> + </div> + </li> + </ul> + <div class="container"> + <a class="btn btn-positive btn-block content-padded">Save settings</a> + </div> + </div> + </div><!-- /.modal --> + </body> +</html> |