From 1ff25f30f142d805089c29194ca265576398069e Mon Sep 17 00:00:00 2001 From: Hooker Juggernaut Date: Sat, 12 May 2012 03:15:15 -0600 Subject: [PATCH] mmm --- app/templates/login/main.html | 121 +++++++++++++++++++++++++++++++++ app/templates/runway/slot.html | 10 +-- assets/css/login.css | 74 +++++++++++++++++++- assets/css/runway.css | 73 ++++++++++---------- 4 files changed, 236 insertions(+), 42 deletions(-) mode change 100644 => 100755 app/templates/login/main.html mode change 100644 => 100755 assets/css/login.css diff --git a/app/templates/login/main.html b/app/templates/login/main.html old mode 100644 new mode 100755 index 627715a..ad1cf74 --- a/app/templates/login/main.html +++ b/app/templates/login/main.html @@ -14,6 +14,91 @@
+
+
+ I am a +
+ + +
+
+ +
+ and I can't decide on what to wear with my +
+
+ + + + +
+
+ +
+

What

+ does my + +

Drop image here

+ +

match with?

+ +
+
+ +
+ +

Tada!!

+

we've got just a match for your

+ +
+
head
+ Head + Head 1 +
+ +
+
torso
+ Head + Head 1 +
+ +
+
accessories
+ Head + Head 1 +
+ +
+
belt
+ Head + Head 1 +
+ +
+
legs
+ Head + Head 1 +
+ +
+
feet
+ Head + Head 1 +
+ +
+ +
+ +
+ + + Go back +
+
+ +
+

Service for storing and sharing your closet

@@ -401,6 +486,42 @@

So, there you have it!

!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' // }); diff --git a/app/templates/runway/slot.html b/app/templates/runway/slot.html index 60a74ec..8f7c61b 100755 --- a/app/templates/runway/slot.html +++ b/app/templates/runway/slot.html @@ -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; diff --git a/assets/css/login.css b/assets/css/login.css old mode 100644 new mode 100755 index 4b7e489..b19f546 --- a/assets/css/login.css +++ b/assets/css/login.css @@ -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; } \ No newline at end of file +#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 ); +} \ No newline at end of file diff --git a/assets/css/runway.css b/assets/css/runway.css index 7112a36..a8be647 100755 --- a/assets/css/runway.css +++ b/assets/css/runway.css @@ -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; } \ No newline at end of file