Skip to content
Browse files

updated app

  • Loading branch information...
1 parent 06316c1 commit f4386dc9be845310ebd5555c289698c4d8609db7 @bradvin committed Mar 14, 2012
Showing with 189 additions and 96 deletions.
  1. +52 −0 css/poker.css
  2. +53 −0 css/reset.css
  3. +84 −96 index.html
View
52 css/poker.css
@@ -0,0 +1,52 @@
+html { height:100%; }
+body { background:#000; font-family:verdana; height:100%; }
+
+.footer {
+ text-align:center;
+ color:#369;
+ font-size:0.8em;
+ font-size:10px;
+}
+
+.footer a {
+ color:#fff;
+}
+
+table{
+ height:100%;
+}
+
+table td {
+ position:relative;
+}
+
+.card {
+ text-align: center;
+ margin:10px;
+}
+
+.card a {
+ position:absolute;
+ top:10px;
+ right:10px;
+ bottom:10px;
+ left:10px;
+ width:auto;
+ height:auto;
+ color: #DEF;
+ text-decoration:none;
+ font-family: 'Ribeye Marrow', cursive;
+ font-size:3em;
+ background: #123;
+ background-image: -webkit-linear-gradient(-45deg, rgba(100, 155, 155, 0), rgba(100, 155, 155, .1) 50%, transparent 50%), -webkit-linear-gradient(#234,#345,#234);
+ background-image: -moz-linear-gradient(-45deg, rgba(100, 155, 155, 0), rgba(100, 155, 155, .1) 50%, transparent 50%), -moz-linear-gradient(#234,#345,#234);
+ background-image: -ms-linear-gradient(-45deg, rgba(100, 155, 155, 0), rgba(100, 155, 155, .1) 50%, transparent 50%), -ms-linear-gradient(#234,#345,#234);
+ background-image: linear-gradient(-45deg, rgba(100, 155, 155, 0), rgba(100, 155, 155, .1) 50%, transparent 50%), linear-gradient(#234,#345,#234);
+ text-shadow: 0 1px 1px rgba(0, 0, 0, .7);
+ border-radius: 5px;
+ box-shadow: 0 0 7px 3px rgba(0,155,255,.3), inset 0 0 0 1px rgba(180,255,255,.2), inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px #012;
+}
+
+.zoom {
+ font-size:6em;
+}
View
53 css/reset.css
@@ -0,0 +1,53 @@
+/* http://meyerweb.com/eric/tools/css/reset/ */
+/* v1.0 | 20080212 */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ background: transparent;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+
+/* remember to define focus styles! */
+:focus {
+ outline: 0;
+}
+
+/* remember to highlight inserts somehow! */
+ins {
+ text-decoration: none;
+}
+del {
+ text-decoration: line-through;
+}
+
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
View
180 index.html
@@ -1,105 +1,93 @@
-<!DOCTYPE html>
+<!doctype html>
<html>
<head>
- <meta charset='utf-8'>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>bradvin/pokerapp @ GitHub</title>
+ <title dir="ltr">Agile Planning Poker App (on github)</title>
- <style type="text/css">
- body {
- margin-top: 1.0em;
- background-color: #c95e68;
- font-family: Helvetica, Arial, FreeSans, san-serif;
- color: #000000;
- }
- #container {
- margin: 0 auto;
- width: 700px;
- }
- h1 { font-size: 3.8em; color: #36a197; margin-bottom: 3px; }
- h1 .small { font-size: 0.4em; }
- h1 a { text-decoration: none }
- h2 { font-size: 1.5em; color: #36a197; }
- h3 { text-align: center; color: #36a197; }
- a { color: #36a197; }
- .description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
- .download { float: right; }
- pre { background: #000; color: #fff; padding: 15px;}
- hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
- .footer { text-align:center; padding-top:30px; font-style: italic; }
- </style>
+ <meta name="viewport" content="width=device-width">
+ <link rel="stylesheet" media="screen" href="css/reset.css" >
+ <link rel="stylesheet" media="screen" href="css/poker.css" >
+ <link href='http://fonts.googleapis.com/css?family=Ribeye+Marrow' rel='stylesheet' type='text/css'>
</head>
-
<body>
- <a href="https://github.com/bradvin/pokerapp"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
-
- <div id="container">
-
- <div class="download">
- <a href="https://github.com/bradvin/pokerapp/zipball/master">
- <img border="0" width="90" src="https://github.com/images/modules/download/zip.png"></a>
- <a href="https://github.com/bradvin/pokerapp/tarball/master">
- <img border="0" width="90" src="https://github.com/images/modules/download/tar.png"></a>
- </div>
-
- <h1><a href="https://github.com/bradvin/pokerapp">pokerapp</a>
- <span class="small">by <a href="https://github.com/bradvin">bradvin</a></span></h1>
-
- <div class="description">
- pokerapp
- </div>
-
-
- <p>Agile Planning Poker App</p>
-
-
-
- <h2>Dependencies</h2>
- <p>jQuery</p>
-
-
+ <table width="100%" cellspacing="5">
+ <tr>
+ <td class="card"><a href="#"><p>?</p></a></td>
+ <td class="card"><a href="#"><p>&frac12;</p></a></td>
+ <td class="card"><a href="#"><p>1</p></a></td>
+ </tr>
+ <tr>
+ <td class="card"><a href="#"><p>2</p></a></td>
+ <td class="card"><a href="#"><p>3</p></a></td>
+ <td class="card"><a href="#"><p>5</p></a></td>
+ </tr>
+ <tr>
+ <td class="card"><a href="#"><p>8</p></a></td>
+ <td class="card"><a href="#"><p>13</p></a></td>
+ <td class="card"><a href="#"><p>20</p></a></td>
+ </tr>
+ <tr>
+ <td class="card"><a href="#"><p>40</p></a></td>
+ <td class="card"><a href="#"><p>100</p></a></td>
+ <td class="card"><a href="#"><p>&#8734;</p></a></td>
+ </tr>
+ <tr>
+ <td class="footer" colspan="3" height="20px">
+ &copy; 2012 Brad Vincent - <a href="https://github.com/bradvin/pokerapp">fork on GitHub</a>
+ </td>
+ </tr>
+ </table>
+ <div style="display:none" class="card zoom"><a href="#"><p></p></a></div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script>
+ $(function() {
+
+ // VERTICALLY ALIGN FUNCTION
+ $.fn.vAlign = function() {
+ return this.each(function(i){
+ var ah = $(this).height();
+ var ph = $(this).parent().height();
+ var mh = Math.ceil((ph-ah) / 2);
+ $(this).css('margin-top', mh);
+ });
+ };
-
-
- <h2>License</h2>
- <p>free for all</p>
-
-
-
- <h2>Authors</h2>
- <p>Brad Vincent (bradvin@gmail.com)
-<br/> </p>
-
-
-
- <h2>Contact</h2>
+ var maxW = 600;
+ var size = function(){
+ var winW = document.body.clientWidth || window.innerWidth;
+ document.body.style.fontSize = ( (winW/maxW)*100 ) + "%";
+ $('.card p').vAlign();
+ }
+
+ window.onresize = size;
+ size();
+
+ $('.card.zoom').click(function(e) {
+ e.preventDefault();
+ $(this).hide();
+ $('.card:not(.zoom)').show();
+ size();
+ });
-<br/> </p>
-
-
- <h2>Download</h2>
- <p>
- You can download this project in either
- <a href="https://github.com/bradvin/pokerapp/zipball/master">zip</a> or
- <a href="https://github.com/bradvin/pokerapp/tarball/master">tar formats.
- </p>
- <p>You can also clone the project with <a href="http://git-scm.com">Git</a>
- by running:
- <pre>$ git clone git://github.com/bradvin/pokerapp</pre>
- </p>
-
- <div class="footer">
- get the source code on GitHub : <a href="https://github.com/bradvin/pokerapp">bradvin/pokerapp</a>
- </div>
-
- </div>
-
-<script type="text/javascript">
-var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-</script>
-<script type="text/javascript">
-try {
-var pageTracker = _gat._getTracker("UA-258761-23");
+ $('.card:not(.zoom)').click(function(e) {
+ e.preventDefault();
+ var point = $(this).find('p').text();
+ $('.card:not(.zoom)').hide();
+ $('.zoom').show().find('p').html(point).vAlign();
+ });
+ });
+ </script>
+ <script type="text/javascript">
+ var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+ document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+ </script>
+ <script type="text/javascript">
+ try {
+ var pageTracker = _gat._getTracker("UA-258761-23");
+ pageTracker._trackPageview();
+ } catch(err) {}
+ </script>
</body>
-} catch(err) {}</script>"
+</html>

0 comments on commit f4386dc

Please sign in to comment.
Something went wrong with that request. Please try again.