diff options
| -rw-r--r-- | card.svg | 57 | ||||
| -rw-r--r-- | index.html | 11 | ||||
| -rw-r--r-- | style.css | 31 |
3 files changed, 99 insertions, 0 deletions
diff --git a/card.svg b/card.svg new file mode 100644 index 0000000..f648df3 --- /dev/null +++ b/card.svg @@ -0,0 +1,57 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 635 889"> + <defs> + <pattern id="Diagonals" width="20" height="20" patternUnits="userSpaceOnUse"> + <path d="M0 0 L20 20" class="inner"/> + <path d="M20 0 L0 20" class="inner"/> + </pattern> + <style type="text/css"><![CDATA[ + .scene { perspective: 100cm; } + .card { + transform: translateZ(-10cm) rotateY(0); + transform-origin: center center; + transform-style: preserve-3d; + transition: 300ms transform; + cursor: pointer; + user-select: none; + perspective: inherit; + font-family: sans-serif; + font-weight: bold; + } + .card.flipped { transform: translateZ(-10cm) rotateY(180deg); } + .side { backface-visibility: hidden; transform-origin: center center; } + .front { transform: rotateY(180deg); } + .back { transform: rotateY(0deg); } + .corner { font-size: 64px; text-anchor: middle; } + .corner.top-left { dominant-baseline: hanging; } + .corner.bottom-right {} + .center { font-size: 180px; text-anchor: middle; dominant-baseline: middle; } + .inner { stroke: #cef3be; stroke-width: 2; } + .outer { fill: url(#Diagonals); stroke: #3e632f; stroke-width: 4; } + ]]></style> + </defs> + <g class="scene"> + <g class="card" onclick="flip(this)"> + <g class="side front"> + <!-- ♠ ♥ ♦ ♣ --> + <rect width="635" height="889" rx="35" fill="white"/> + <text class="corner top-left" x="50" y="40">5</text> + <text class="corner top-left" x="50" y="104">♣</text> + <text class="corner bottom-right" x="585" y="785">♣</text> + <text class="corner bottom-right" x="585" y="849">5</text> + <text class="center" x="177.5" y="130">♣</text> + <text class="center" x="177.5" y="789">♣</text> + <text class="center" x="317.5" y="450">♣</text> + <text class="center" x="457.5" y="130">♣</text> + <text class="center" x="457.5" y="789">♣</text> + </g> + <g class="side back"> + <rect width="635" height="889" rx="35" fill="white"/> + <rect width="595" height="849" rx="25" x="20" y="20" class="outer"/> + </g> + </g> + </g> + <script><![CDATA[ + function flip(element) { element.classList.toggle("flipped"); } + ]]></script> +</svg> diff --git a/index.html b/index.html new file mode 100644 index 0000000..bab0463 --- /dev/null +++ b/index.html @@ -0,0 +1,11 @@ +<!doctype html> +<html lang="en"> +<meta charset="utf-8"> +<link rel="stylesheet" href="style.css"> +<title>What Is This Card?</title> +<main> +<h1>What Is This Card?</h1> +<object type="image/svg+xml" data="card.svg"></object> +<p>Answer the question in the shortest exposition time.<br>Click the card to flip it.</p> +<label for="answer">This card is </label><input id="answer" type="text" autofocus><input type="submit" value="→"> +</main> diff --git a/style.css b/style.css new file mode 100644 index 0000000..641b380 --- /dev/null +++ b/style.css @@ -0,0 +1,31 @@ +body { + background-color: #293e28; +} + +body, input { + color: #e6fee5; + font-family: monospace; + font-size: 16px; +} + +main { + max-width: 32em; + width: 100%; + margin: 0 auto; + text-align: center; +} + +img, object { + max-width: 50%; +} + +input[type=text] { + background: none; + border: none; + border-bottom: 1px solid #e6fee5; +} + +input[type=submit] { + background: none; + border: 1px solid #e6fee5; +} |
