derp

nateberkopec · Jul 14, 2012 · ec62355 · ec62355
1 parent 4097979
commit ec62355
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 5 deletions.
diff --git a/index.html b/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>
diff --git a/public/config.ru b/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)
+  ]
+}
diff --git a/public/index.html b/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>