Permalink
Browse files

mm

  • Loading branch information...
1 parent 92659fc commit 63da41d85f25163e7750deb4ec3968bca4934b27 @secretgspot committed May 3, 2012
Showing with 601 additions and 1 deletion.
  1. +8 −0 app/modules/slot.js
  2. +270 −0 app/templates/runway/slot.html
  3. +66 −1 assets/css/runway.css
  4. +254 −0 assets/plugins/jslot.js
  5. +3 −0 index.html
View
@@ -0,0 +1,8 @@
+(function($){
+
+FazzleX.Modules.register({
+ id: 'slot',
+ template: "app/templates/runway/slot.html"
+});
+
+})(jQuery);
@@ -0,0 +1,270 @@
+<style type="text/css">
+
+ul { list-style: none; padding: 0; margin: 0;}
+
+.jSlots-wrapper {
+ overflow: hidden;
+ height: 20px;
+ display: inline-block; /* to size correctly, can use float too, or width*/
+ border: 1px solid #999;
+}
+
+.slot {
+ float: left;
+}
+
+
+
+/* ---------------------------------------------------------------------
+ FANCY EXAMPLE
+--------------------------------------------------------------------- */
+.fancy .jSlots-wrapper {
+ overflow: hidden;
+ height: 100px;
+ display: inline-block; /* to size correctly, can use float too, or width*/
+ border: 1px solid #999;
+}
+
+.fancy .slot li {
+ width: 100px;
+ line-height: 100px;
+ text-align: center;
+ font-size: 70px;
+ font-weight: bold;
+ color: #fff;
+ text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
+ font-family: 'Gravitas One', serif;
+ border-left: 1px solid #999;
+}
+
+.fancy .slot:first-child li {
+ border-left: none;
+}
+
+.fancy .slot li:nth-child(7) {
+ background-color: #FFCE29;
+}
+.fancy .slot li:nth-child(6) {
+ background-color: #FFA22B;
+}
+.fancy .slot li:nth-child(5) {
+ background-color: #FF8645;
+}
+.fancy .slot li:nth-child(4) {
+ background-color: #FF6D3F;
+}
+.fancy .slot li:nth-child(3) {
+ background-color: #FF494C;
+}
+.fancy .slot li:nth-child(2) {
+ background-color: #FF3333;
+}
+.fancy .slot li:nth-child(1),
+.fancy .slot li:nth-child(8) {
+ background-color: #FF0000;
+}
+
+.fancy .slot li span {
+ display: block;
+}
+
+/* ---------------------------------------------------------------------
+ ANIMATIONS
+--------------------------------------------------------------------- */
+
+@-webkit-keyframes winner {
+ 0%, 50%, 100% {
+ -webkit-transform: rotate(0deg);
+ font-size:70px;
+ color: #fff;
+ }
+ 25% {
+ -webkit-transform: rotate(20deg);
+ font-size:90px;
+ color: #FF16D8;
+ }
+ 75% {
+ -webkit-transform: rotate(-20deg);
+ font-size:90px;
+ color: #FF16D8;
+ }
+}
+@-moz-keyframes winner {
+ 0%, 50%, 100% {
+ -moz-transform: rotate(0deg);
+ font-size:70px;
+ color: #fff;
+ }
+ 25% {
+ -moz-transform: rotate(20deg);
+ font-size:90px;
+ color: #FF16D8;
+ }
+ 75% {
+ -moz-transform: rotate(-20deg);
+ font-size:90px;
+ color: #FF16D8;
+ }
+}
+@-ms-keyframes winner {
+ 0%, 50%, 100% {
+ -ms-transform: rotate(0deg);
+ font-size:70px;
+ color: #fff;
+ }
+ 25% {
+ -ms-transform: rotate(20deg);
+ font-size:90px;
+ color: #FF16D8;
+ }
+ 75% {
+ -ms-transform: rotate(-20deg);
+ font-size:90px;
+ color: #FF16D8;
+ }
+}
+
+
+@-webkit-keyframes winnerBox {
+ 0%, 50%, 100% {
+ box-shadow: inset 0 0 0px yellow;
+ background-color: #FF0000;
+ }
+ 25%, 75% {
+ box-shadow: inset 0 0 30px yellow;
+ background-color: aqua;
+ }
+}
+@-moz-keyframes winnerBox {
+ 0%, 50%, 100% {
+ box-shadow: inset 0 0 0px yellow;
+ background-color: #FF0000;
+ }
+ 25%, 75% {
+ box-shadow: inset 0 0 30px yellow;
+ background-color: aqua;
+ }
+}
+@-ms-keyframes winnerBox {
+ 0%, 50%, 100% {
+ box-shadow: inset 0 0 0px yellow;
+ background-color: #FF0000;
+ }
+ 25%, 75% {
+ box-shadow: inset 0 0 30px yellow;
+ background-color: aqua;
+ }
+}
+
+
+
+.winner li {
+ -webkit-animation: winnerBox 2s infinite linear;
+ -moz-animation: winnerBox 2s infinite linear;
+ -ms-animation: winnerBox 2s infinite linear;
+}
+.winner li span {
+ -webkit-animation: winner 2s infinite linear;
+ -moz-animation: winner 2s infinite linear;
+ -ms-animation: winner 2s infinite linear;
+}
+
+.navbar.navbar-fixed-top { display: none !important; }
+</style>
+
+
+<div id="slot-view" class="container">
+
+ <a href="#slot-overview" data-toggle="tab">Upload</a>
+ <a href="#slot-results" data-toggle="tab">Results</a>
+
+ <div id="myTabContent" class="tab-content">
+ <div class="tab-pane fade active in" id="slot-overview">
+ <div id="selecting-sex">
+ <b>I am a</b>
+ <div class="btn-group inlined" data-toggle="buttons-radio">
+ <button class="btn">Girl</button>
+ <button class="btn">Boy</button>
+ </div>
+ </div>
+
+ <div id="selecting-category" class="ar">
+ <b>and I can't decide on what to wear with my</b>
+ <br/>
+ <div class="btn-group inlined" data-toggle="buttons-radio">
+ <button class="btn">Head</button>
+ <button class="btn">Torso</button>
+ <button class="btn">Legs</button>
+ <button class="btn">Feet</button>
+ </div>
+ </div>
+
+ <div id="item-drop-area" class="well">
+ <h1 id="txt-what">What</h1>
+ <span class="lead" id="txt-does">does my</span>
+
+ <p class="ac">Drop image here</p>
+
+ <h1 id="txt-match">match with<em>?</em></h1>
+ <button class="btn btn-primary btn-large" id="btn-slotme">Fazzle ME!</button>
+ </div>
+ </div>
+
+
+ <div class="tab-pane fade" id="slot-results">
+ <section id="spin-list" class="global-filter">
+
+ <div class="fancy">
+ <ul class="slot">
+ <!-- In reverse order so the 7s show on load -->
+ <li><span>F</span></li>
+ <li><span>A</span></li>
+ <li><span>Z</span></li>
+ <li><span>Z</span></li>
+ <li><span>L</span></li>
+ <li><span>E</span></li>
+ </ul>
+ </div>
+ <button class="btn btn-primary btn-large" id="btn-fancyme">Fazzle ME!</button>
+ </section>
+ </div>
+ </div>
+
+</div> <!-- /container -->
+
+<script>
+!function ($) {
+ $(function(){
+
+ // fancy example
+ $('.fancy .slot').jSlots({
+ number : 6,
+ winnerNumber : 1,
+ spinner : '#btn-fancyme',
+ easing : 'easeOutSine',
+ time : 3333,
+ loops : 6,
+ onStart : function() {
+ $('.slot').removeClass('winner');
+ },
+ onWin : function(winCount, winners) {
+ // only fires if you win
+
+ $.each(winners, function() {
+ this.addClass('winner');
+ console.log("7 hit the board");
+ });
+
+ // react to the # of winning slots
+ if ( winCount === 1 ) {
+ //alert('You got ' + winCount + ' 7!!!');
+ } else if ( winCount > 1 ) {
+ //alert('You got ' + winCount + ' 7’s!!!');
+ }
+
+ }
+ });
+
+ })
+}(window.jQuery)
+</script>
View
67 assets/css/runway.css 100644 → 100755
@@ -226,4 +226,69 @@ right: 69px;
#next.visible:hover, #previous.visible:hover {
opacity:1 !important;
-}
+}
+
+
+
+
+/* SLOT MACHINE - LANDING PAGE */
+#selecting-sex {
+position: absolute;
+top: 32px;
+left: 132px;
+}
+#selecting-category {
+position: absolute;
+top: 32px;
+right: 110px;
+}
+#btn-slotme {
+position: absolute;
+bottom: -69px;
+left: 13px;
+}
+#slot-overview {
+position: relative;
+min-height: 369px;
+padding: 113px 69px 3px 69px;
+margin-top: 32px;
+}
+#item-drop-area p {
+line-height: 222px;
+}
+#item-drop-area {
+width: 222px;
+height: 222px;
+margin: 0 auto;
+position: relative;
+}
+
+#txt-what {
+position: absolute;
+top: 69px;
+left: -288px;
+font-size: 7em;
+}
+#txt-does {
+position: absolute;
+top: 132px;
+left: -252px;
+font-size: 5em;
+}
+#txt-match {
+position: absolute;
+top: 162px;
+right: -130px;
+font-size: 4.2em;
+width: 196px;
+text-align: right;
+line-height: 0.8;
+font-weight: normal;
+}
+#txt-match em {
+font-size: 2em;
+position: absolute;
+top: 35px;
+right: -54px;
+font-weight: bold;
+}
Oops, something went wrong. Retry.

0 comments on commit 63da41d

Please sign in to comment.