You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.0 KiB
53 lines
1.0 KiB
2 years ago
|
<style>
|
||
|
|
card {
|
||
|
|
width: 400px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import IconImage from "$/client/components/IconImage.svelte";
|
||
|
|
let flipped = false;
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<flipper class:flipped={ flipped }>
|
||
|
|
<inner>
|
||
|
|
<card class="front">
|
||
|
|
<top>
|
||
|
|
<IconImage name="arrow-left" />
|
||
|
|
</top>
|
||
|
|
|
||
|
|
<middle>
|
||
|
|
<h4>
|
||
|
|
Front Card
|
||
|
|
</h4>
|
||
|
|
<p>This is the front facing card. Click the button to flip it.</p>
|
||
|
|
</middle>
|
||
|
|
|
||
|
|
<bottom>
|
||
|
|
<button-group>
|
||
|
|
<button on:click={ () => flipped = !flipped }>Flip It!</button>
|
||
|
|
</button-group>
|
||
|
|
</bottom>
|
||
|
|
</card>
|
||
|
|
<card class="back">
|
||
|
|
<top>
|
||
|
|
<IconImage name="arrow-right" />
|
||
|
|
</top>
|
||
|
|
|
||
|
|
<middle>
|
||
|
|
<h4>
|
||
|
|
Back Card
|
||
|
|
</h4>
|
||
|
|
<p>This is the back facing card. Click the button to flip it back.</p>
|
||
|
|
</middle>
|
||
|
|
|
||
|
|
<bottom>
|
||
|
|
<button-group>
|
||
|
|
<button on:click={ () => flipped = !flipped }>Flip it Back!</button>
|
||
|
|
</button-group>
|
||
|
|
</bottom>
|
||
|
|
</card>
|
||
|
|
</inner>
|
||
|
|
</flipper>
|