Permalink
Browse files

mmm

  • Loading branch information...
1 parent 5f49f9a commit 1ff25f30f142d805089c29194ca265576398069e @secretgspot committed May 12, 2012
Showing with 236 additions and 42 deletions.
  1. +121 −0 app/templates/login/main.html
  2. +5 −5 app/templates/runway/slot.html
  3. +73 −1 assets/css/login.css
  4. +37 −36 assets/css/runway.css
View
121 app/templates/login/main.html 100644 → 100755
@@ -14,6 +14,91 @@
<div id="page-login" class="container">
+ <section 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>
+ </section>
+
+ <section id="slot-results" class="hide">
+
+ <h1 id="results-welcom">Tada!!</h1>
+ <h3 id="results-det">we've got just a match for your</h3>
+
+ <figure id="slot-r-head" class="slot-body">
+ <figcaption>head</figcaption>
+ <img src="//placehold.it/111x111/000000/ff0000" class="front" alt="Head">
+ <img src="//placehold.it/111x111" class="back" alt="Head 1">
+ </figure>
+
+ <figure id="slot-r-torso" class="slot-body">
+ <figcaption>torso</figcaption>
+ <img src="//placehold.it/111x111/000000/ff0000" class="front" alt="Head">
+ <img src="//placehold.it/111x111" class="back" alt="Head 1">
+ </figure>
+
+ <figure id="slot-r-accessories">
+ <figcaption>accessories</figcaption>
+ <img src="//placehold.it/111x111/000000/ff0000" class="front" alt="Head">
+ <img src="//placehold.it/111x111" class="back" alt="Head 1">
+ </figure>
+
+ <figure id="slot-r-belt" class="slot-body">
+ <figcaption>belt</figcaption>
+ <img src="//placehold.it/111x32/000000/ff0000" class="front" alt="Head">
+ <img src="//placehold.it/111x32" class="back" alt="Head 1">
+ </figure>
+
+ <figure id="slot-r-legs" class="slot-body">
+ <figcaption>legs</figcaption>
+ <img src="//placehold.it/111x169/000000/ff0000" class="front" alt="Head">
+ <img src="//placehold.it/111x169" class="back" alt="Head 1">
+ </figure>
+
+ <figure id="slot-r-feet" class="slot-body">
+ <figcaption>feet</figcaption>
+ <img src="//placehold.it/111x111/000000/ff0000" class="front" alt="Head">
+ <img src="//placehold.it/111x111" class="back" alt="Head 1">
+ </figure>
+
+ <div id="slot-r-compiled">
+ <img src="//placehold.it/666x545">
+ </div>
+
+ <div id="spin-btn-group">
+ <button id="spin-again" class="btn btn-large btn-primary">SPIN AGAIN!</button>
+ <button id="spin-save" class="btn btn-large btn-success">Save</button>
+ <a id="spin-back" href="#">Go back</a>
+ </div>
+ </section>
+
+ <hr/>
+
<div class="row">
<hgroup id="top-welcome" class="span12">
<h2>Service for storing and sharing your closet</h2>
@@ -401,6 +486,42 @@ <h3 id="app-logo" class="brand"><a href="#">fazzle<em class="ico-btn">R</em>me</
!function ($) {
$(function(){
+
+ // SLOT MACHINE STUFF
+ $('#spin-again').click(function(e) {
+ e.preventDefault();
+ alert("Trr trr rrrr rrr");
+
+ $('#slot-results figure').each(function(i){
+ $(this).delay(i*222).fadeIn(222,function(){
+ $(this).toggleClass('flipped');
+ });
+ });
+ //$('#slot-results figure').toggleClass('flipped');
+ });
+
+ $("#slot-results").on("click", "img", function() {
+ $(this).parent().toggleClass("flipped");
+ console.log("did it");
+ });
+
+ $('#btn-slotme').click(function(e) {
+ e.preventDefault();
+ $('#slot-results').show('fast');
+ });
+
+ $('#spin-back').click(function(e) {
+ e.preventDefault();
+ $('#slot-results').hide('fast');
+ });
+
+ $('#spin-save').click(function(e) {
+ e.preventDefault();
+ alert("Generated look has been saved to your closet, or login details", "success");
+ });
+ // END SLOT MACHINE STUFF
+
+
// $('#runway-global').masonry({
// itemSelector: '.rw-thumbnail-wrap'
// });
@@ -10,11 +10,11 @@
#slot-results figure {
width: 222px;
max-height: 222px;
- -webkit-transition: -webkit-transform 1s;
- -moz-transition: -moz-transform 1s;
- -ms-transition: -ms-transform 1s;
- -o-transition: -o-transform 1s;
- transition: transform 1s;
+ -webkit-transition: -webkit-transform 0.3s;
+ -moz-transition: -moz-transform 0.3s;
+ -ms-transition: -ms-transform 0.3s;
+ -o-transition: -o-transform 0.3s;
+ transition: transform 0.3s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
View
74 assets/css/login.css 100644 → 100755
@@ -45,4 +45,76 @@ padding: 9px;
#page-register-interest #top-welcome,
#page-register-suggest #top-welcome { margin: 22px 96px 0; }
#page-register-interest #top-welcome h2,
-#page-register-suggest #top-welcome h2 { font-size: 17px; }
+#page-register-suggest #top-welcome h2 { font-size: 17px; }
+
+#slot-results {
+ -webkit-perspective: 940px;
+ -moz-perspective: 940px;
+ -ms-perspective: 940px;
+ -o-perspective: 940px;
+ perspective: 940px;
+}
+#slot-r-compiled {
+width: 616px !important;
+height: 396px !important;
+max-height: 396px !important;
+position: absolute;
+right: 9px;
+top: 160px;
+}
+#slot-r-compiled img {
+position: static !important;
+height: 545px;
+}
+
+#slot-results figure {
+ width: 111px;
+ max-height: 111px;
+ padding: 0;
+ margin: 0;
+ -webkit-transition: -webkit-transform 0.3s;
+ -moz-transition: -moz-transform 0.3s;
+ -ms-transition: -ms-transform 0.3s;
+ -o-transition: -o-transform 0.3s;
+ transition: transform 0.3s;
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -ms-transform-style: preserve-3d;
+ -o-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-transform-origin: right center;
+ -moz-transform-origin: right center;
+ -ms-transform-origin: right center;
+ -o-transform-origin: right center;
+ transform-origin: right center;
+}
+
+#slot-results figure.flipped {
+ -webkit-transform: translateX( -100% ) rotateY( -180deg );
+ -moz-transform: translateX( -100% ) rotateY( -180deg );
+ -ms-transform: translateX( -100% ) rotateY( -180deg );
+ -o-transform: translateX( -100% ) rotateY( -180deg );
+ transform: translateX( -100% ) rotateY( -180deg );
+}
+
+#slot-results figure img {
+ display: block;
+ text-align: center;
+ position: absolute;
+ -webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ -ms-backface-visibility: hidden;
+ -o-backface-visibility: hidden;
+ backface-visibility: hidden;
+}
+
+#slot-results figure .front { background: #fff; }
+
+#slot-results figure .back {
+ background: #f9f9f9;
+ -webkit-transform: rotateY( 180deg );
+ -moz-transform: rotateY( 180deg );
+ -ms-transform: rotateY( 180deg );
+ -o-transform: rotateY( 180deg );
+ transform: rotateY( 180deg );
+}
View
@@ -232,6 +232,7 @@ right: 69px;
/* SLOT MACHINE - LANDING PAGE */
+/*#slot-overview .btn-group {z-index: 1;}*/
#selecting-sex {
position: absolute;
top: 32px;
@@ -295,71 +296,71 @@ font-weight: bold;
#slot-results {
-position: absolute;
-top: 0;
-bottom: 0;
-left: 0;
-right: 0;
+position: relative;
+top: -517px;
background: rgba(255, 255, 255, 0.93);
-min-height: 1069px;
+min-height: 713px;
+width: 940px;
+margin-bottom: -500px;
}
#slot-results-header {
margin: 3em 0 2em 6em;
}
.slot-body { }
#slot-r-belt {
-position: absolute !important;
-left: 50%;
-margin-left: -112px;
-top: 475px;
+position: absolute;
+left: 169px;
+top: 335px;
+height: 32px;
}
#slot-results figcaption { position: absolute; z-index: 999; }
#slot-r-accessories {
-position: absolute !important;
-left: 69px;
-top: 369px;
+position: absolute;
+left: 39px;
+top: 250px;
+height: 111px;
}
#spin-btn-group {
position: absolute;
-top: 470px;
-right: 160px;
+top: 99px;
+right: 350px;
}
#results-welcom {
position: absolute;
-top: 122px;
-left: 112px;
+top: 22px;
+left: 63px;
}
#results-det {
position: absolute;
-top: 142px;
-right: 192px;
-width: 142px;
+top: 36px;
+right: 222px;
+width: 281px;
text-align: right;
}
#slot-r-head {
-position: absolute !important;
-left: 50%;
-margin-left: -112px;
-top: 22px;
+position: absolute;
+left: 169px;
+top: 111px;
+height: 111px;
}
#slot-r-torso {
-position: absolute !important;
-left: 50%;
-margin-left: -112px;
-top: 251px;
+position: absolute;
+left: 169px;
+top: 223px;
+height: 111px;
}
#slot-r-legs {
-position: absolute !important;
-left: 50%;
-margin-left: -112px;
-top: 546px;
+position: absolute;
+left: 169px;
+top: 368px;
+height: 169px;
}
#slot-r-feet {
-position: absolute !important;
-left: 50%;
-margin-left: -112px;
-top: 770px;
+position: absolute;
+left: 169px;
+top: 538px;
+height: 111px;
}

0 comments on commit 1ff25f3

Please sign in to comment.