adding card visualization demo on card_visual.html https://github.com…

…/jessepollak/card
ackuser · Apr 11, 2015 · ac37150 · ac37150
1 parent 609400e
commit ac37150
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 1 deletion.
diff --git a/.bowerrc b/.bowerrc
@@ -1,4 +1,4 @@
 {
   "json": "bower.json",
-  "directory": "components" 
+  "directory": "bower-omponents" 
 }
diff --git a/.gitignore b/.gitignore
@@ -23,4 +23,5 @@ build/Release
 # Deployed apps should consider commenting this line out:
 # see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
 node_modules
+bower_components
 components
diff --git a/sample/card_visual.html b/sample/card_visual.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Card &ndash; the better way to collect credit cards</title>
+    <meta name="viewport" content="initial-scale=1">
+</head>
+<body>
+    <style>
+        .demo-container {
+            width: 100%;
+            max-width: 350px;
+            margin: 50px auto;
+        }
+        form {
+            margin: 30px;
+        }
+        input {
+            width: 200px;
+            margin: 10px auto;
+            display: block;
+        }
+    </style>
+    <div class="demo-container">
+        <div class="card-wrapper"></div>
+
+        <div class="form-container active">
+            <form action="">
+                <input placeholder="Card number" type="text" name="number">
+                <input placeholder="Full name" type="text" name="name">
+                <input placeholder="MM/YY" type="text" name="expiry">
+                <input placeholder="CVC" type="text" name="cvc">
+            </form>
+        </div>
+    </div>
+
+    <script src="../node_modules/card/lib/js/card.js"></script>
+    <script>
+        new Card({
+            form: document.querySelector('form'),
+            container: '.card-wrapper'
+        });
+    </script>
+</body>
+</html>