77 lines
3.7 KiB
Plaintext
77 lines
3.7 KiB
Plaintext
.page
|
|
.prev_slide
|
|
<
|
|
.next_slide
|
|
>
|
|
.content
|
|
|
|
%h1 Puzzle
|
|
|
|
-width = 533
|
|
-height = 600
|
|
|
|
|
|
|
|
.puzzle.puzzle_insectes{:style => "position:relative;", :data => {:width => width.to_s+"px", :height => height.to_s+"px"}}
|
|
.success{:style => "margin:1em;display:none;width:460px;right:-10px;top:10px;position:absolute;"}
|
|
%h3 Bravo, tu as réussi à reconstituer le puzzle.
|
|
|
|
%center
|
|
.btn.reset
|
|
Rejouer
|
|
=image_tag "/assets/plaquettes/fourmi-puzzle.jpg", :id => "puzzle-insectes", :style => "opacity:0.2;width:#{width}px;height:#{height}px;"
|
|
|
|
.piece_place{:style => "top:0px;left:0px;", :data => {:rep => 1}}
|
|
.piece_place{:style => "top:0px; left:#{width/3}px;", :data => {:rep => 2}}
|
|
.piece_place{:style => "top:0px; left:#{width/3*2}px;", :data => {:rep => 3}}
|
|
.piece_place{:style => "top:#{height/3}px;", :data => {:rep => 4}}
|
|
.piece_place{:style => "top:#{height/3}px;left:#{width/3}px;", :data => {:rep => 5}}
|
|
.piece_place{:style => "top:#{height/3}px;left:#{width/3*2}px;", :data => {:rep => 6}}
|
|
.piece_place{:style => "top:#{height/3*2}px;", :data => {:rep => 7}, }
|
|
.piece_place{:style => "left:#{width/3}px;top:#{height/3*2}px;", :data => {:rep => 8}}
|
|
.piece_place{:style => "left:#{width/3*2}px;top:#{height/3*2}px;", :data => {:rep => 9}}
|
|
|
|
.pieces
|
|
.piece{:data => {:rep => 1}, :style => "top:448px;left:453px;-webkit-transform:rotate(2deg)"}
|
|
=image_tag "/assets/plaquettes/fourmi-puzzle.jpg", :style => ""
|
|
.piece{:data => {:rep => 2}, :style => "top:390px; left:706px;-webkit-transform:rotate(3deg)"}
|
|
=image_tag "/assets/plaquettes/fourmi-puzzle.jpg", :style => "left:-#{width/3}px;"
|
|
.piece{:data => {:rep => 3}, :style => "left: 754px; top: 153px;-webkit-transform:rotate(-4deg)"}
|
|
=image_tag "/assets/plaquettes/fourmi-puzzle.jpg", :style => "left:-#{width/3*2}px;"
|
|
|
|
.piece{:data => {:rep => 4}, :style => "top:280px;left:700px;-webkit-transform:rotate(-5deg)"}
|
|
=image_tag "/assets/plaquettes/fourmi-puzzle.jpg", :style => "top:-#{height/3}px;"
|
|
.piece{:data => {:rep => 5}, :style => "top:30px;left:710px;-webkit-transform:rotate(7deg)"}
|
|
=image_tag "/assets/plaquettes/fourmi-puzzle.jpg", :style => "top:-#{height/3}px;left:-#{width/3}px;"
|
|
.piece{:data => {:rep => 6}, :style => "top: 479px; left: 648px;-webkit-transform:rotate(5deg)"}
|
|
=image_tag "/assets/plaquettes/fourmi-puzzle.jpg", :style => "top:-#{height/3}px;left:-#{width/3*2}px;"
|
|
|
|
.piece{:data => {:rep => 7}, :style => "top: 257px; left: 719px;-webkit-transform:rotate(2deg)"}
|
|
=image_tag "/assets/plaquettes/fourmi-puzzle.jpg", :style => "top:-#{height/3*2}px;"
|
|
.piece{:data => {:rep => 8}, :style => "left: 755px; top: 74px;-webkit-transform:rotate(-6deg)"}
|
|
=image_tag "/assets/plaquettes/fourmi-puzzle.jpg", :style => "top:-#{height/3*2}px;left:-#{width/3}px;"
|
|
.piece{:data => {:rep => 9}, :style => "top:440px; left:700px;-webkit-transform:rotate(2deg)"}
|
|
=image_tag "/assets/plaquettes/fourmi-puzzle.jpg", :style => "top:-#{height/3*2}px;left:-#{width/3*2}px;"
|
|
|
|
|
|
|
|
<style>
|
|
=".puzzle_insectes .piece_place, .puzzle_insectes .piece{"
|
|
=" width:#{width/3}px;height:#{height/3}px;"
|
|
="}"
|
|
=".puzzle_insectes .piece img{"
|
|
=" width:#{width}px;max-width:#{width}px;"
|
|
="}"
|
|
</style>
|
|
|
|
:css
|
|
.piece_place{
|
|
overflow:hidden;position:absolute;
|
|
}
|
|
.piece{
|
|
box-shadow:0 0 10px rgba(0,0,0,0.5);
|
|
overflow:hidden;position:absolute;
|
|
}
|
|
.piece img{
|
|
position:absolute;
|
|
} |