Skip to content
This repository has been archived by the owner on Oct 31, 2020. It is now read-only.

Commit

Permalink
mmm
Browse files Browse the repository at this point in the history
  • Loading branch information
@secretgspot
secretgspot committed May 12, 2012
1 parent 5f49f9a commit 1ff25f3
Show file tree
Hide file tree
Showing 4 changed files with 236 additions and 42 deletions.
121 changes: 121 additions & 0 deletions app/templates/login/main.html 100644 → 100755
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -401,6 +486,42 @@ <h2>So, there you have it!</h2>
!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'
// });
Expand Down
10 changes: 5 additions & 5 deletions app/templates/runway/slot.html
View file
Expand Up @@ -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;
Expand Down
74 changes: 73 additions & 1 deletion assets/css/login.css 100644 → 100755
View file
Expand Up @@ -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 );
}
73 changes: 37 additions & 36 deletions assets/css/runway.css
View file
Expand Up @@ -232,6 +232,7 @@ right: 69px;


/* SLOT MACHINE - LANDING PAGE */
/*#slot-overview .btn-group {z-index: 1;}*/
#selecting-sex {
position: absolute;
top: 32px;
Expand Down Expand Up @@ -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.