mirror of https://github.com/twbs/ratchet.git
connors
12 years ago
14 changed files with 1300 additions and 0 deletions
@ -0,0 +1,86 @@
|
||||
<!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"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png"> |
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png"> |
||||
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png"> |
||||
|
||||
<link rel="stylesheet" href="../../dist/ratchet.css"> |
||||
<link rel="stylesheet" href="css/app.css"> |
||||
<script src="../../dist/ratchet.js"></script> |
||||
<script src="../../dos/js/fingerblast.js"></script> |
||||
|
||||
</head> |
||||
<body> |
||||
<header class="bar-title"> |
||||
<a class="button-prev" href="choose-theater.html" data-transition="slide-out"> |
||||
Back |
||||
</a> |
||||
<h1 class="title">Buy tickets</h1> |
||||
</header> |
||||
<nav class="bar-standard bar-header-secondary"> |
||||
<form> |
||||
<input type="search" placeholder="Search for movies"> |
||||
</form> |
||||
</nav> |
||||
|
||||
<nav class="bar-tab"> |
||||
<ul class="tab-inner"> |
||||
<li class="tab-item active"> |
||||
<a href="index.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Movies</div> |
||||
</a> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<a href="theaters.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Theaters</div> |
||||
</a> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<a href="settings.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Settings</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
|
||||
<div class="content"> |
||||
<div class="form-wrapper"> |
||||
<form> |
||||
<div class="input-group"> |
||||
<div class="input-row"> |
||||
<input type="text" placeholder="Fullname"> |
||||
</div> |
||||
<div class="input-row"> |
||||
<input type="email" placeholder="Email"> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="input-group"> |
||||
<div class="input-row"> |
||||
<input type="text" placeholder="Name on card"> |
||||
</div> |
||||
<div class="input-row"> |
||||
<input type="text" placeholder="Credit card number"> |
||||
</div> |
||||
<div class="input-row"> |
||||
<input type="text" placeholder="Security code"> |
||||
</div> |
||||
</div> |
||||
|
||||
<a class="button-positive button-block button-filled">Checkout</a> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,125 @@
|
||||
<!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"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png"> |
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png"> |
||||
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png"> |
||||
|
||||
<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-title"> |
||||
<a class="button-prev" href="theaters.html" data-transition="slide-out"> |
||||
Back |
||||
</a> |
||||
<h1 class="title">Choose a movie</h1> |
||||
</header> |
||||
<nav class="bar-standard bar-header-secondary"> |
||||
<form> |
||||
<input type="search" placeholder="Search for movies"> |
||||
</form> |
||||
</nav> |
||||
|
||||
<nav class="bar-tab"> |
||||
<ul class="tab-inner"> |
||||
<li class="tab-item"> |
||||
<a href="index.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Movies</div> |
||||
</a> |
||||
</li> |
||||
<li class="tab-item active"> |
||||
<a href="theaters.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Theaters</div> |
||||
</a> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<a href="settings.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Settings</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
|
||||
<div class="content"> |
||||
|
||||
<ul class="table-view"> |
||||
<li class="table-view-divider">Recommended movies</li> |
||||
<li> |
||||
<strong>Argo</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>Skyfall: 007</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>Wreck-it Ralph</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-divider">Top movies</li> |
||||
<li> |
||||
<strong>Movie 4</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>Movie 5</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>Movie 6</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>Movie 7</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>Movie 8</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>Movie 9</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>Movie 10</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>Movie 11</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>Movie 12</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,115 @@
|
||||
<!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"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png"> |
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png"> |
||||
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png"> |
||||
|
||||
<link rel="stylesheet" href="../../dist/ratchet.css"> |
||||
<link rel="stylesheet" href="css/app.css"> |
||||
<script src="../../dist/ratchet.js"></script> |
||||
<script src="../../docs/js/fingerblast.js"></script> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<header class="bar-title"> |
||||
<a class="button-prev" href="index.html" data-transition="slide-out"> |
||||
Back |
||||
</a> |
||||
<h1 class="title">Argo</h1> |
||||
</header> |
||||
<nav class="bar-standard bar-header-secondary"> |
||||
<form> |
||||
<input type="search" placeholder="Search theaters"> |
||||
</form> |
||||
</nav> |
||||
|
||||
<nav class="bar-tab"> |
||||
<ul class="tab-inner"> |
||||
<li class="tab-item active"> |
||||
<a href="index.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Movies</div> |
||||
</a> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<a href="theaters.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Theaters</div> |
||||
</a> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<a href="settings.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Settings</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
|
||||
<div class="content"> |
||||
|
||||
<ul class="table-view"> |
||||
<li class="table-view-divider">Theaters nearby</li> |
||||
<li> |
||||
<strong>Metreon 16</strong> |
||||
<p>1.3 miles away</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>AMC 5</strong> |
||||
<p>3.5 miles away</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>Regal 42</strong> |
||||
<p>7.3 miles away</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>Shorline theater</strong> |
||||
<p>12.5 miles away</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>AMC 16</strong> |
||||
<p>12.2 miles away</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>BW3 16</strong> |
||||
<p>13.4 miles away</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>MC Hammer 16</strong> |
||||
<p>14.1 miles away</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>AMC 3</strong> |
||||
<p>14.3 miles away</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>AMC 2</strong> |
||||
<p>14.7 miles away</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
<li> |
||||
<strong>AMC 10</strong> |
||||
<p>15 miles away</p> |
||||
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,16 @@
|
||||
.slider { |
||||
margin-bottom: 0; |
||||
height: 150px; |
||||
} |
||||
|
||||
.slider li img { |
||||
width: 100%; |
||||
} |
||||
|
||||
.form-wrapper { |
||||
padding: 10px 0; |
||||
} |
||||
|
||||
.form-wrapper [class*="button"] { |
||||
margin: 0 10px; |
||||
} |
||||
|
After Width: | Height: | Size: 257 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 30 KiB |
@ -0,0 +1,160 @@
|
||||
<!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"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png"> |
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png"> |
||||
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png"> |
||||
|
||||
<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-title"> |
||||
<h1 class="title">Movie finder</h1> |
||||
</header> |
||||
<nav class="bar-standard bar-header-secondary"> |
||||
<form> |
||||
<input type="search" placeholder="Search"> |
||||
</form> |
||||
</nav> |
||||
|
||||
<nav class="bar-tab"> |
||||
<ul class="tab-inner"> |
||||
<li class="tab-item active"> |
||||
<a href="index.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Movies</div> |
||||
</a> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<a href="theaters.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Theaters</div> |
||||
</a> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<a href="settings.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Settings</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
|
||||
<div class="content"> |
||||
|
||||
<div class="slider"> |
||||
<ul> |
||||
<li> |
||||
<img src="img/argo.png"> |
||||
</li> |
||||
<li> |
||||
<img src="img/skyfall.png"> |
||||
</li> |
||||
<li> |
||||
<img src="img/ralph.png"> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<ul class="table-view"> |
||||
<li class="table-view-divider">Recommended movies</li> |
||||
<li> |
||||
<a href="choose-theater.html" data-transition="slide-in"> |
||||
<strong>Argo</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-theater.html" data-transition="slide-in"> |
||||
<strong>Skyfall: 007</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-theater.html" data-transition="slide-in"> |
||||
<strong>Wreck-it Ralph</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-divider">Top movies</li> |
||||
<li> |
||||
<a href="choose-theater.html" data-transition="slide-in"> |
||||
<strong>Movie 4</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-theater.html" data-transition="slide-in"> |
||||
<strong>Movie 5</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-theater.html" data-transition="slide-in"> |
||||
<strong>Movie 6</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-theater.html" data-transition="slide-in"> |
||||
<strong>Movie 7</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-theater.html" data-transition="slide-in"> |
||||
<strong>Movie 8</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-theater.html" data-transition="slide-in"> |
||||
<strong>Movie 9</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-theater.html" data-transition="slide-in"> |
||||
<strong>Movie 10</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-theater.html" data-transition="slide-in"> |
||||
<strong>Movie 11</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-theater.html" data-transition="slide-in"> |
||||
<strong>Movie 12</strong> |
||||
<p>Lorem ipsum dolor sit amet</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,73 @@
|
||||
<!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"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png"> |
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png"> |
||||
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png"> |
||||
|
||||
<link rel="stylesheet" href="../../dist/ratchet.css"> |
||||
<link rel="stylesheet" href="css/app.css"> |
||||
<script src="../../dist/ratchet.js"></script> |
||||
<script src="../../docs/js/fingerblast.js"></script> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<header class="bar-title"> |
||||
<h1 class="title">Settings</h1> |
||||
</header> |
||||
|
||||
<nav class="bar-tab"> |
||||
<ul class="tab-inner"> |
||||
<li class="tab-item"> |
||||
<a href="index.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Movies</div> |
||||
</a> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<a href="theaters.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Theaters</div> |
||||
</a> |
||||
</li> |
||||
<li class="tab-item active"> |
||||
<a href="settings.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Settings</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
|
||||
<div class="content"> |
||||
<div class="form-wrapper"> |
||||
<form> |
||||
<div class="input-group"> |
||||
<div class="input-row"> |
||||
<label>Full name</label> |
||||
<input type="text" placeholder="Mister Ratchet"> |
||||
</div> |
||||
<div class="input-row"> |
||||
<label>Email</label> |
||||
<input type="email" placeholder="ratchetframework@gmail.com"> |
||||
</div> |
||||
<div class="input-row"> |
||||
<label>Username</label> |
||||
<input type="text" placeholder="goRatchet"> |
||||
</div> |
||||
</div> |
||||
<a class="button-block button-negative">Delete Account</a> |
||||
</form> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,131 @@
|
||||
<!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"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png"> |
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png"> |
||||
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png"> |
||||
|
||||
<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-title"> |
||||
<h1 class="title">Find a theater</h1> |
||||
</header> |
||||
<nav class="bar-standard bar-header-secondary"> |
||||
<form> |
||||
<input type="search" placeholder="Search"> |
||||
</form> |
||||
</nav> |
||||
|
||||
<nav class="bar-tab"> |
||||
<ul class="tab-inner"> |
||||
<li class="tab-item"> |
||||
<a href="index.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Movies</div> |
||||
</a> |
||||
</li> |
||||
<li class="tab-item active"> |
||||
<a href="theaters.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Theaters</div> |
||||
</a> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<a href="settings.html" data-transition="fade"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png"> |
||||
<div class="tab-label">Settings</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
|
||||
<div class="content"> |
||||
|
||||
<ul class="table-view"> |
||||
<li class="table-view-divider">Theaters nearby</li> |
||||
<li> |
||||
<a href="choose-movie.html" data-transition="slide-in"> |
||||
<strong>Metreon 16</strong> |
||||
<p>1.3 miles away</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-movie.html" data-transition="slide-in"> |
||||
<strong>AMC 5</strong> |
||||
<p>3.5 miles away</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-movie.html" data-transition="slide-in"> |
||||
<strong>Regal 42</strong> |
||||
<p>7.3 miles away</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-movie.html" data-transition="slide-in"> |
||||
<strong>Shorline theater</strong> |
||||
<p>12.5 miles away</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-movie.html" data-transition="slide-in"> |
||||
<strong>AMC 16</strong> |
||||
<p>12.2 miles away</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-movie.html" data-transition="slide-in"> |
||||
<strong>BW3 16</strong> |
||||
<p>13.4 miles away</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-movie.html" data-transition="slide-in"> |
||||
<strong>MC Hammer 16</strong> |
||||
<p>14.1 miles away</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-movie.html" data-transition="slide-in"> |
||||
<strong>AMC 3</strong> |
||||
<p>14.3 miles away</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-movie.html" data-transition="slide-in"> |
||||
<strong>AMC 2</strong> |
||||
<p>14.7 miles away</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="choose-movie.html" data-transition="slide-in"> |
||||
<strong>AMC 10</strong> |
||||
<p>15 miles away</p> |
||||
<span class="chevron"></span> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,521 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Testing</title> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> |
||||
<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"> |
||||
<script src="../../dist/ratchet.js"></script> |
||||
|
||||
<style> |
||||
[class*="bar"] { |
||||
position: relative; |
||||
} |
||||
.slider, |
||||
.slider li, |
||||
.slider li img { |
||||
width: 100%; |
||||
} |
||||
</style> |
||||
|
||||
</head> |
||||
|
||||
<!-- ontouchstart property makes :active/:hover behaviors work on everything --> |
||||
<body ontouchstart=""> |
||||
|
||||
<div class="content"> |
||||
|
||||
<header class="bar-title"> |
||||
<ul class="segmented-controller"> |
||||
<li class="active"> |
||||
<a href="#item1">Thing one</a> |
||||
</li> |
||||
<li> |
||||
<a href="#item2">Thing two</a> |
||||
</li> |
||||
</ul> |
||||
</header> |
||||
|
||||
<div> |
||||
<div id="item1" class="segmented-controller-item active"><p>section #1</p></div> |
||||
<div id="item2" class="segmented-controller-item"><p>section #2</p></div> |
||||
</div> |
||||
|
||||
|
||||
<!-- SLIDER ============================================================ --> |
||||
<div class="slider"> |
||||
<ul> |
||||
<li> |
||||
<img src="http://ionehellobeautiful.files.wordpress.com/2010/05/lebron-james3.jpg"> |
||||
</li> |
||||
<li> |
||||
<img src="http://www.nba.com/media/allstar2006/james_300_060115.jpg"> |
||||
</li> |
||||
<li> |
||||
<img src="http://hoopedia.nba.com/images/e/eb/Lebron-james_streetclothes.jpg"> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<!-- POPOVER ============================================================ --> |
||||
<div id="myPopover" class="popover"> |
||||
<header class="popover-header"> |
||||
<a class="button" href="#"> |
||||
Open |
||||
</a> |
||||
<h3 class="title">Popover title</h3> |
||||
<a class="button" href="#"> |
||||
Filter |
||||
</a> |
||||
</header> |
||||
<ul class="table-view"> |
||||
<li>Item1</li> |
||||
<li>Item2</li> |
||||
<li>Item3</li> |
||||
<li class="table-view-divider">With counts</li> |
||||
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li> |
||||
<li>Item2 <span class="count">1</span></li> |
||||
<li>Item3 <span class="count">1</span></li> |
||||
<li class="table-view-divider">With chevrons</li> |
||||
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
||||
<li>Item2 <span class="chevron"></span></li> |
||||
<li>Item3 <span class="chevron"></span></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<!-- TITLEBAR ============================================================ --> |
||||
|
||||
<!-- Title-bar left and right buttons --> |
||||
<header class="bar-title"> |
||||
<a class="button button-prev" href="#"> |
||||
Left |
||||
</a> |
||||
<h1 class="title">Title</h1> |
||||
<a class="button button-next" href="#"> |
||||
Right |
||||
</a> |
||||
</header> |
||||
|
||||
<!-- Title-bar --> |
||||
<header class="bar-title"> |
||||
<h1 class="title"><a href="#myPopover">Title</a></h1> |
||||
</header> |
||||
|
||||
<!-- Title-bar left button --> |
||||
<header class="bar-title"> |
||||
<a class="button open-shelf" href="#"> |
||||
Open fatty |
||||
</a> |
||||
<h1 class="title">Title</h1> |
||||
</header> |
||||
|
||||
<!-- Title-bar right button --> |
||||
<header class="bar-title"> |
||||
<h1 class="title">Title</h1> |
||||
<a class="button" href="#"> |
||||
Filter |
||||
</a> |
||||
</header> |
||||
|
||||
<div class="test"></div> |
||||
|
||||
<!-- Title-bar right button --> |
||||
<header class="bar-title"> |
||||
<ul class="segmented-controller"> |
||||
<li class="active"> |
||||
<a href="#">Thing one</a> |
||||
</li> |
||||
<li> |
||||
<a href="#">Thing two</a> |
||||
</li> |
||||
<li> |
||||
<a href="#">Thing three</a> |
||||
</li> |
||||
</ul> |
||||
</header> |
||||
|
||||
<!-- Title-bar left button --> |
||||
<header class="bar-title" id="newshit"> |
||||
<a class="button-primary open-shelf" href="#"> |
||||
Open |
||||
</a> |
||||
<ul class="segmented-controller"> |
||||
<li> |
||||
<a href="#">Thing one</a> |
||||
</li> |
||||
<li class="active"> |
||||
<a href="#">Thing two</a> |
||||
</li> |
||||
</ul> |
||||
</header> |
||||
|
||||
<!-- Title-bar left button --> |
||||
<header class="bar-title"> |
||||
<ul class="segmented-controller"> |
||||
<li> |
||||
<a href="#">Thing one</a> |
||||
</li> |
||||
<li class="active"> |
||||
<a href="#">Thing two</a> |
||||
</li> |
||||
</ul> |
||||
<a class="button" href="#"> |
||||
Filter |
||||
</a> |
||||
</header> |
||||
|
||||
<!-- Title-bar left button --> |
||||
<header class="bar-title"> |
||||
<a class="button open-shelf" href="#"> |
||||
Open |
||||
</a> |
||||
<ul class="segmented-controller"> |
||||
<li> |
||||
<a href="#">Thing one</a> |
||||
</li> |
||||
<li class="active"> |
||||
<a href="#">Thing two</a> |
||||
</li> |
||||
</ul> |
||||
<a class="button" href="#"> |
||||
Filter |
||||
</a> |
||||
</header> |
||||
|
||||
<!-- BAR-TAB ============================================================ --> |
||||
|
||||
<!-- Bar-tab 5 --> |
||||
<nav class="bar-tab"> |
||||
<ul class="tab-inner"> |
||||
<li class="tab-item active"> |
||||
<img class="tab-icon" src="../../docs/img/icon-home.png" alt=""> |
||||
<div class="tab-label">test</div> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt=""> |
||||
<div class="tab-label">test</div> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt=""> |
||||
<div class="tab-label">test</div> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<img class="tab-icon" src="../../docs/img/icon-hamburger.png" alt=""> |
||||
<div class="tab-label">test</div> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt=""> |
||||
<div class="tab-label">test</div> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
|
||||
<!-- Bar-tab 4 --> |
||||
<nav class="bar-tab"> |
||||
<ul class="tab-inner"> |
||||
<li class="tab-item active"> |
||||
<img class="tab-icon" src="../../docs/img/icon-home.png" alt=""> |
||||
<div class="tab-label">test</div> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt=""> |
||||
<div class="tab-label">test</div> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt=""> |
||||
<div class="tab-label">test</div> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt=""> |
||||
<div class="tab-label">test</div> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
|
||||
<!-- Bar-tab 3 --> |
||||
<nav class="bar-tab"> |
||||
<ul class="tab-inner"> |
||||
<li class="tab-item active"> |
||||
<img class="tab-icon" src="../../docs/img/icon-home.png" alt=""> |
||||
<div class="tab-label">test</div> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt=""> |
||||
<div class="tab-label">test</div> |
||||
</li> |
||||
<li class="tab-item"> |
||||
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt=""> |
||||
<div class="tab-label">test</div> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
|
||||
|
||||
<!-- SEARCH BAR ============================================================ --> |
||||
<!-- Search bar --> |
||||
<div class="bar-standard"> |
||||
<form> |
||||
<input type="search" placeholder="Search"> |
||||
</form> |
||||
</div> |
||||
|
||||
|
||||
<!-- CONTROLLER BAR ============================================================ --> |
||||
|
||||
<!-- Segmented controller as a bar --> |
||||
<nav class="bar-standard"> |
||||
<ul class="segmented-controller"> |
||||
<li> |
||||
<a href="#">Thing one</a> |
||||
</li> |
||||
<li class="active"> |
||||
<a href="#">Thing two</a> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
|
||||
<!-- Segmented controller as a bar w/ 3 options --> |
||||
<nav class="bar-standard"> |
||||
<ul class="segmented-controller"> |
||||
<li> |
||||
<a href="#">Thing one</a> |
||||
</li> |
||||
<li class="active"> |
||||
<a href="#">Thing two</a> |
||||
</li> |
||||
<li> |
||||
<a href="#">Thing one</a> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
|
||||
<!-- BUTTON BAR ============================================================ --> |
||||
|
||||
<!-- Button bar --> |
||||
<div class="bar-standard"> |
||||
<a class="button-block">Block level button</a> |
||||
</div> |
||||
|
||||
<!-- Button bar main --> |
||||
<div class="bar-standard"> |
||||
<a class="button-primary button-block">Block level button</a> |
||||
</div> |
||||
|
||||
<!-- Button bar positive --> |
||||
<div class="bar-standard"> |
||||
<a class="button-positive button-block">Block level button</a> |
||||
</div> |
||||
|
||||
<!-- Button bar negative --> |
||||
<div class="bar-standard"> |
||||
<a class="button-negative button-block">Block level button</a> |
||||
</div> |
||||
|
||||
<!-- BUTTONS ============================================================ --> |
||||
|
||||
<!-- Standard buttons --> |
||||
<a class="button">Button</a> |
||||
<a class="button-primary">Button</a> |
||||
<a class="button-positive">Button</a> |
||||
<a class="button-negative">Button</a> |
||||
|
||||
<!-- Buttons w/ counts --> |
||||
<a class="button">Button <span class="count">1</span></a> |
||||
<a class="button-primary">Button <span class="count">1</span></a> |
||||
<a class="button-positive">Button <span class="count">1</span></a> |
||||
<a class="button-negative">Button <span class="count">1</span></a> |
||||
|
||||
<!-- Buttons at block level --> |
||||
<a class="button-block">Block level button</a> |
||||
<a class="button-primary button-block">Block level button</a> |
||||
<a class="button-positive button-block">Block level button</a> |
||||
<a class="button-negative button-block">Block level button</a> |
||||
|
||||
<!-- Buttons at block level w/ counts --> |
||||
<a class="button-block">Block level button <span class="count">1</span></a> |
||||
<a class="button-primary button-block">Block level button <span class="count">1</span></a> |
||||
<a class="button-positive button-block">Block level button <span class="count">1</span></a> |
||||
<a class="button-negative button-block">Block level button <span class="count">1</span></a> |
||||
|
||||
<!-- TOGGLE ============================================================ --> |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
|
||||
<!-- COUNTS ============================================================ --> |
||||
<span class="count">1</span> |
||||
<span class="count-primary">2</span> |
||||
<span class="count-positive">3</span> |
||||
<span class="count-negative">4</span> |
||||
<span class="count">5</span> |
||||
|
||||
<!-- LIST ============================================================ --> |
||||
<ul class="table-view"> |
||||
<li>Item1</li> |
||||
<li>Item2</li> |
||||
<li>Item3</li> |
||||
<li class="table-view-divider">With counts</li> |
||||
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li> |
||||
<li>Item2 <span class="count">1</span></li> |
||||
<li>Item3 <span class="count">1</span></li> |
||||
<li class="table-view-divider">With chevrons</li> |
||||
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
||||
<li>Item2 <span class="chevron"></span></li> |
||||
<li>Item3 <span class="chevron"></span></li> |
||||
<li class="table-view-divider">With chevrons & counts</li> |
||||
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="count-primary">1</span></li> |
||||
<li>Item2 <span class="chevron"></span><span class="count-negative">1</span></li> |
||||
<li>Item3 <span class="chevron"></span><span class="count-positive">1</span></li> |
||||
<li class="table-view-divider">With buttons</li> |
||||
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li> |
||||
<li>Item2 <a class="button-primary">Button</a></li> |
||||
<li>Item3 <a class="button-positive">Button</a></li> |
||||
<li>Item4 <a class="button-negative">Button</a></li> |
||||
<li class="table-view-divider">With a toggle</li> |
||||
<li> |
||||
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<a href="#"> |
||||
Item2 |
||||
</a> |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
Item3 |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<ul class="table-view inset"> |
||||
<li class="table-view-divider">Normal</li> |
||||
<li>Item1</li> |
||||
<li>Item2</li> |
||||
<li>Item3</li> |
||||
<li class="table-view-divider">With counts</li> |
||||
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li> |
||||
<li>Item2 <span class="count">1</span></li> |
||||
<li>Item3 <span class="count">1</span></li> |
||||
<li class="table-view-divider">With chevrons</li> |
||||
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
||||
<li>Item2 <span class="chevron"></span></li> |
||||
<li>Item3 <span class="chevron"></span></li> |
||||
<li class="table-view-divider">With chevrons & counts</li> |
||||
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="count">1</span></li> |
||||
<li>Item2 <span class="chevron"></span><span class="count">1</span></li> |
||||
<li>Item3 <span class="chevron"></span><span class="count">1</span></li> |
||||
<li class="table-view-divider">With buttons</li> |
||||
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li> |
||||
<li>Item2 <a class="button-primary">Button</a></li> |
||||
<li>Item3 <a class="button-positive">Button</a></li> |
||||
<li>Item4 <a class="button-negative">Button</a></li> |
||||
<li class="table-view-divider">With a toggle</li> |
||||
<li> |
||||
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
Item2 |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
Item3 |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
<li class="table-view-divider">Bottom table-view-divider test</li> |
||||
</ul> |
||||
|
||||
<!-- List with <a>'s --> |
||||
<ul class="inset table-view"> |
||||
<li> |
||||
<a href="#">Item1</a> |
||||
</li> |
||||
<li> |
||||
<a href="#">Item2</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
<!-- SEGMENTED CONTROLLER ============================================================ --> |
||||
|
||||
<!-- Segmented controller with 2 tabs --> |
||||
<ul class="segmented-controller"> |
||||
<li><a href="#">Thing one</a></li> |
||||
<li class="active"><a href="#">Thing two</a></li> |
||||
</ul> |
||||
|
||||
<!-- Segmented controller with 3 tabs --> |
||||
<ul class="segmented-controller"> |
||||
<li><a href="#">Thing one</a></li> |
||||
<li><a href="#">Thing two</a></li> |
||||
<li class="active"><a href="#">Thing three</a></li> |
||||
</ul> |
||||
|
||||
<!-- Segmented controller with 4 tabs --> |
||||
<ul class="segmented-controller"> |
||||
<li><a href="#">Thing one</a></li> |
||||
<li><a href="#">Thing two</a></li> |
||||
<li class="active"><a href="#">Thing three</a></li> |
||||
<li><a href="#">Thing four</a></li> |
||||
</ul> |
||||
|
||||
<!-- Segmented controller with 5 tabs --> |
||||
<ul class="segmented-controller"> |
||||
<li><a href="#">Thing one</a></li> |
||||
<li><a href="#">Thing two</a></li> |
||||
<li class="active"><a href="#">Thing three</a></li> |
||||
<li><a href="#">Thing four</a></li> |
||||
<li><a href="#">Thing five</a></li> |
||||
</ul> |
||||
|
||||
<!-- FORMS ============================================================ --> |
||||
|
||||
<!-- Input --> |
||||
<form> |
||||
<input type="text" placeholder="Full name"> |
||||
<input type="search" placeholder="Search"> |
||||
<textarea rows="5"></textarea> |
||||
<a class="button-positive button-block button-filled">Choose existing</a> |
||||
</form> |
||||
|
||||
<!-- Input group --> |
||||
<form class="input-group"> |
||||
<input type="text" placeholder="Full name"> |
||||
<input type="email" placeholder="Email"> |
||||
<input type="text" placeholder="Username"> |
||||
</form> |
||||
|
||||
<!-- Input group with labels--> |
||||
<form class="input-group"> |
||||
<div class="input-row"> |
||||
<label>Full name</label> |
||||
<input type="text" placeholder="Mister Ratchet"> |
||||
</div> |
||||
<div class="input-row"> |
||||
<label>Email</label> |
||||
<input type="email" placeholder="ratchetframework@gmail.com"> |
||||
</div> |
||||
<div class="input-row"> |
||||
<label>Username</label> |
||||
<input type="text" placeholder="goRatchet"> |
||||
</div> |
||||
</form> |
||||
|
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Modal slideup</title> |
||||
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> |
||||
|
||||
<link rel="stylesheet" href="../../lib/css/base.css"> |
||||
<link rel="stylesheet" href="../../lib/css/bars.css"> |
||||
<link rel="stylesheet" href="../../lib/css/lists.css"> |
||||
<link rel="stylesheet" href="../../lib/css/forms.css"> |
||||
<link rel="stylesheet" href="../../lib/css/buttons.css"> |
||||
<link rel="stylesheet" href="../../lib/css/chevrons.css"> |
||||
<link rel="stylesheet" href="../../lib/css/counts.css"> |
||||
<link rel="stylesheet" href="../../lib/css/segmented-controllers.css"> |
||||
<link rel="stylesheet" href="../../lib/css/popovers.css"> |
||||
<link rel="stylesheet" href="../../lib/css/modals.css"> |
||||
<link rel="stylesheet" href="../../lib/css/sliders.css"> |
||||
<link rel="stylesheet" href="../../lib/css/toggles.css"> |
||||
<link rel="stylesheet" href="../../lib/css/push.css"> |
||||
<script src="../../lib/js/push.js"></script> |
||||
<script src="../../lib/js/toggles.js"></script> |
||||
<script src="../../lib/js/sliders.js"></script> |
||||
<script src="../../lib/js/popovers.js"></script> |
||||
<script src="../../lib/js/modals.js"></script> |
||||
<script src="../../lib/js/segmented-controllers.js"></script> |
||||
</head> |
||||
<body> |
||||
|
||||
<header class="bar-title"> |
||||
<h1 class="title">Modal slideup</h1> |
||||
</header> |
||||
|
||||
<div class="content content-padded"> |
||||
<a href="#myModal" class="button">Open modal</a> |
||||
</div> |
||||
|
||||
<div id="myModal" class="modal"> |
||||
<header class="bar-title"> |
||||
<h1 class="title">Modal</h1> |
||||
<a class="button" href="#myModal"> |
||||
Close |
||||
</a> |
||||
</header> |
||||
|
||||
<div class="content content-padded"> |
||||
<p>Honey, check it out, you got me mesmerized |
||||
With your black hair and fat-ass thighs |
||||
Street poetry is my everyday |
||||
But yo, I gotta stop when you trot my way |
||||
If I was workin at the club you would not pay |
||||
Aiyyo, my man phife diggy, he got somthin to say</p> |
||||
|
||||
<p>I like em brown, yellow, puero rican or hatian |
||||
Name is phife dawg from the zulu nation |
||||
Told you in the jam that we can get down |
||||
Now lets knock the boots like the group h-town |
||||
You got bbd all on your bedroom wall |
||||
But Im above the rim and this is how I ball |
||||
A pretty little somethin on the new york street |
||||
This is how I represent over this here beat</p> |
||||
<p>Talkin bout you</p> |
||||
|
||||
<p>Yo, I took you out</p> |
||||
<p>But sex was on my mind for the whole damn route |
||||
My mind was in a frenzy and a horny state |
||||
But I couldnt drop dimes cause *you couldnt relate*</p> |
||||
</div> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue