Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

derp

  • Loading branch information...
commit ec623555b2d4aa77e9283e9338e6b145556133d7 1 parent 4097979
@nateberkopec authored
Showing with 117 additions and 5 deletions.
  1. +63 −0 index.html
  2. +14 −0 public/config.ru
  3. +40 −5 public/index.html
View
63 index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>TastingTonight</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
+</head>
+<body>
+
+<div data-role="content" >
+ <h2>TastingTonight</h2>
+
+ <p>Welcome to TastingTonight! You're just an hour away from getting a professionally curated tasting box delivered to your place in NYC.</p>
+
+ <h3>Let's get started:</h3>
+ <p><a href="#two" data-role="button">Choose Package</a></p>
+ </div><!-- /content -->
+
+</div><!-- /page one -->
+
+
+<!-- Start of second page: #two -->
+<div data-role="page" id="two" data-theme="a">
+
+ <div data-role="header">
+ <h1>Two</h1>
+ </div><!-- /header -->
+
+ <div data-role="content" data-theme="a">
+ <h2>Two</h2>
+ <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
+ <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>
+ <p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p>
+
+ </div><!-- /content -->
+
+ <div data-role="footer">
+ <h4>Page Footer</h4>
+ </div><!-- /footer -->
+</div><!-- /page two -->
+
+
+<!-- Start of third page: #popup -->
+<div data-role="page" id="popup">
+
+ <div data-role="header" data-theme="e">
+ <h1>Dialog</h1>
+ </div><!-- /header -->
+
+ <div data-role="content" data-theme="d">
+ <h2>Popup</h2>
+ <p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p>
+ <p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p>
+ </div><!-- /content -->
+
+ <div data-role="footer">
+ <h4>Page Footer</h4>
+ </div><!-- /footer -->
+</div><!-- /page popup -->
+
+</body>
View
14 public/config.ru
@@ -0,0 +1,14 @@
+use Rack::Static,
+ :urls => ["/css", "/img"],
+ :root => "public"
+
+run lambda { |env|
+ [
+ 200,
+ {
+ 'Content-Type' => 'text/html',
+ 'Cache-Control' => 'public, max-age=86400'
+ },
+ File.open('public/index.html', File::RDONLY)
+ ]
+}
View
45 public/index.html
@@ -9,16 +9,51 @@
</head>
<body>
-<div data-role="page">
+<div data-role="page" id="one" data-theme="a">
+ <div data-role="content" >
+ <h2>TastingTonight</h2>
+
+ <p>Welcome to TastingTonight! You're just an hour away from getting a professionally curated tasting box delivered to your place in NYC.</p>
+
+ <h3>Let's get started:</h3>
+ <p><a href="#two" data-role="button">Choose Package</a></p>
+ </div><!-- /content -->
+
+</div><!-- /page one -->
+
+
+<!-- Start of second page: #two -->
+<div data-role="page" id="two" data-theme="a">
<div data-role="header">
- <h1>TastingTonight</h1>
+ <h1>Choose Package</h1>
</div><!-- /header -->
- <div data-role="content">
- <p>Hello world</p>
+ <div data-role="content" data-theme="a">
+ <h2>Choose Your Tasting Package</h2>
+ <a href="foo.html" data-role="button" data-rel="dialog">Craft Beers</a>
+ <a href="foo.html" data-role="button" data-rel="dialog">Wines</a>
+ <a href="foo.html" data-role="button" data-rel="dialog">Scotches</a>
</div><!-- /content -->
+</div><!-- /page two -->
+
-</div><!-- /page -->
+<!-- Start of third page: #popup -->
+<div data-role="page" id="popup">
+
+ <div data-role="header" data-theme="e">
+ <h1>Dialog</h1>
+ </div><!-- /header -->
+
+ <div data-role="content" data-theme="d">
+ <h2>Popup</h2>
+ <p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p>
+ <p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p>
+ </div><!-- /content -->
+
+ <div data-role="footer">
+ <h4>Page Footer</h4>
+ </div><!-- /footer -->
+</div><!-- /page popup -->
</body>
Please sign in to comment.
Something went wrong with that request. Please try again.