diff options
| author | lonkaars <loek@pipeframe.xyz> | 2023-01-04 23:16:29 +0100 |
|---|---|---|
| committer | lonkaars <loek@pipeframe.xyz> | 2023-01-04 23:16:29 +0100 |
| commit | 39aae80a3106ec6c5e792ab2934edb0425a63618 (patch) | |
| tree | 0d2762a99be2acadaa560fbed6f1a599ccda0662 /anki-card-template/card.html | |
| parent | b49925b09a8962411706b00a446f5cd84007a086 (diff) | |
add vertical layout for mobile screens
Diffstat (limited to 'anki-card-template/card.html')
| -rw-r--r-- | anki-card-template/card.html | 18 |
1 files changed, 15 insertions, 3 deletions
diff --git a/anki-card-template/card.html b/anki-card-template/card.html index 71ca300..69edc1d 100644 --- a/anki-card-template/card.html +++ b/anki-card-template/card.html @@ -5,18 +5,30 @@ <title>card template test</title> <link rel='stylesheet' type='text/css' media='screen' href='./card.css'> <script defer src='./card.js'></script> + <style> + body.nightMode { + background-color: black; + color: white; + } + </style> </head> <body> -<div class="card back"> +<div id="card" class="back vertical-layout"> +<div id="front"> <span id="sentence" class="parse foreign">[俺](おれ)の[目](め)の[前](まえ)に{全}(ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\n\*escape\* (<i>test</i>)</span> -<hr class="split"> +</div> +<hr id="separator"> +<div id="back"> <span id="target-word-reading" class="foreign">立つ【た・つ】</span> <span id="target-word-translation" class="native">To stand</span> <span id="sentence-translation" class="native spoiler hidden">Before my eyes stood Alice, butt-naked.</span> </div> +</div> -<button onclick="document.getElementsByClassName('card')[0].classList.toggle('back'); document.getElementsByClassName('card')[0].classList.toggle('front')">toggle view</button> +<button onclick="document.getElementById('card').classList.toggle('back'); document.getElementById('card').classList.toggle('front')">toggle view</button> +<button onclick="document.getElementById('card').classList.toggle('horizontal-layout'); document.getElementById('card').classList.toggle('vertical-layout')">toggle layout</button> +<button onclick="document.body.classList.toggle('nightMode')">toggle dark</button> </span> </html> |