blob: e05f42d06f7bc164c678e35368a73d4eca7313af (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<script lang="ts">
let leftPanelCardId = $state();
let leftPanelCardDesc = $state("");
</script>
<div class="left-panel">
<div class="card-preview">
<div class="card-image-large">
{#if leftPanelCardId}
<img height="100%" src="https://cdn.233.momobako.com/ygopro/pics/{leftPanelCardId}.jpg" alt="card img">
{/if}
</div>
<div class="card-description">
<pre>{leftPanelCardDesc}</pre>
</div>
</div>
</div>
<style>
.left-panel {
width: 25%;
padding: 20px;
background-color: #f5f5f5;
}
.card-image-large {
height: 400px;
text-align: center;
background-color: #ddd;
margin-bottom: 20px;
border-radius: 8px;
}
.card-description {
line-height: 1.6;
font-size: 14px;
}
</style>
|
